/*
 * SiamPoints - die Gastseite (Dokument 01, Abschnitt 5).
 *
 * Eine Hand, ein Daumen. Sonnenlicht ist der Normalfall. Sechs Sprachen mit
 * sehr verschiedenen Wortlaengen - kein Text in einem Kasten mit fester Breite.
 * Gold nur fuer Stand, Fortschritt und die Linie; nie als Textfarbe auf Weiss.
 * Die Kanalfarben (LINE, WhatsApp, Google) kommen hier nicht vor. Nichts blinkt.
 *
 * Schriften: Es werden keine Schriften nachgeladen. Wer Inter oder Noto auf dem
 * Telefon hat, bekommt sie; sonst die Schrift des Telefons.
 */

:root {
	--sp-dunkel: #0f172a;
	--sp-gold: #f59e0b;
	--sp-gold-dunkel: #d97706;
	--sp-gold-hell: #fef3c7;
	--sp-weiss: #ffffff;
	--sp-grund: #f8fafc;
	--sp-flaeche: #f1f5f9;
	--sp-linie: #e2e8f0;
	--sp-leise: #94a3b8;
	--sp-mittel: #64748b;
	--sp-text: #475569;
	--sp-gut: #10b981;
	--sp-schlecht: #ef4444;
	--sp-fokus: #3b82f6;
	--sp-schrift: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body.sp-gast {
	margin: 0;
	background: var(--sp-grund);
	color: var(--sp-dunkel);
	font-family: var(--sp-schrift);
	font-size: 16px;
	line-height: 1.6;
	overflow-x: hidden;
}

:lang(th) body.sp-gast,
body.sp-gast:lang(th) {
	font-family: "Noto Sans Thai", Sarabun, Tahoma, var(--sp-schrift);
	line-height: 1.8;
}

:lang(zh-CN) body.sp-gast,
body.sp-gast:lang(zh-CN) {
	font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", var(--sp-schrift);
}

:lang(ja) body.sp-gast,
body.sp-gast:lang(ja) {
	font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", var(--sp-schrift);
}

.sp-gast a {
	color: var(--sp-dunkel);
}

.sp-gast :focus-visible {
	outline: 2px solid var(--sp-fokus);
	outline-offset: 2px;
}

/* --------------------------------------------------------------- Kopf */

.sp-kopf {
	background: var(--sp-weiss);
	border-bottom: 4px solid var(--sp-gold);
}

.sp-kopf-innen {
	max-width: 560px;
	margin: 0 auto;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.sp-logo {
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -0.02em;
	text-decoration: none;
	line-height: 1;
}

.sp-logo-siam {
	color: var(--sp-dunkel);
}

.sp-logo-points {
	color: var(--sp-gold);
}

.sp-sprache {
	position: relative;
}

.sp-sprache summary {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	min-width: 44px;
	padding: 0 12px;
	border: 1px solid var(--sp-linie);
	border-radius: 10px;
	cursor: pointer;
	font-weight: 700;
	font-size: 14px;
	color: var(--sp-dunkel);
	background: var(--sp-weiss);
}

.sp-sprache summary::-webkit-details-marker {
	display: none;
}

.sp-sprachliste {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	z-index: 10;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
	min-width: 160px;
}

.sp-sprachliste a {
	display: block;
	padding: 10px 12px;
	border-radius: 8px;
	text-decoration: none;
	min-height: 44px;
}

.sp-sprachliste a[aria-current="true"] {
	background: var(--sp-gold-hell);
	font-weight: 700;
}

/* ------------------------------------------------------------- Inhalt */

.sp-inhalt {
	max-width: 560px;
	margin: 0 auto;
	padding: 24px 16px 48px;
}

.sp-titel {
	font-size: 24px;
	font-weight: 800;
	line-height: 1.25;
	margin: 0 0 8px;
	overflow-wrap: anywhere;
}

.sp-kopfzeile {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.sp-goldlinie {
	height: 4px;
	background: var(--sp-gold);
	border-radius: 2px;
	margin: 4px 0 24px;
}

.sp-nummer {
	color: var(--sp-mittel);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.sp-einleitung {
	color: var(--sp-text);
	font-size: 17px;
	margin: 0 0 24px;
}

.sp-klein {
	color: var(--sp-mittel);
	font-size: 14px;
	margin: 8px 0 16px;
}

.sp-meldung,
.sp-fehler {
	margin: 0 0 24px;
	padding: 12px 16px;
	border-radius: 10px;
	background: var(--sp-weiss);
	border-left: 4px solid var(--sp-gut);
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.sp-fehler {
	border-left-color: var(--sp-schlecht);
}

/* ---------------------------------------------------------- Formulare */

.sp-formular {
	display: flex;
	flex-direction: column;
}

.sp-feldname {
	font-weight: 700;
	margin: 16px 0 8px;
}

.sp-gast input[type="text"],
.sp-gast input[type="tel"],
.sp-gast input[type="email"],
.sp-gast input[type="password"],
.sp-gast input[type="search"],
.sp-gast select {
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	font: inherit;
	font-size: 16px;
	color: var(--sp-dunkel);
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-radius: 10px;
}

.sp-gast input:focus,
.sp-gast select:focus {
	outline: 2px solid var(--sp-fokus);
	outline-offset: 0;
	border-color: var(--sp-fokus);
}

.sp-telefon {
	display: flex;
	gap: 8px;
}

.sp-telefon select {
	flex: 0 0 auto;
	width: auto;
	min-width: 104px;
}

.sp-telefon input {
	flex: 1 1 auto;
	min-width: 0;
}

/* Seit 3.6.0 Teil 2 (I1/T1, E2299): die gestaltete Laenderwahl (design.js) nur so breit wie noetig - die Nummer bekommt den Rest. */
.sp-telefon .spd-wahl {
	flex: 0 0 auto;
	width: auto;
	min-width: 104px;
}

.sp-gast input.sp-pin {
	max-width: 180px;
	font-size: 24px;
	letter-spacing: 0.4em;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.sp-nummerzeile {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 8px;
}

.sp-nummerzeile form {
	margin: 0;
}

/* ------------------------------------------------------------ Knoepfe */

.sp-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	margin-top: 24px;
	padding: 12px 24px;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	color: var(--sp-dunkel);
	background: var(--sp-gold);
	border: 2px solid var(--sp-gold);
	border-radius: 10px;
	cursor: pointer;
	width: 100%;
}

.sp-knopf:hover {
	background: var(--sp-gold-dunkel);
	border-color: var(--sp-gold-dunkel);
}

.sp-knopf:active {
	transform: scale(0.98);
}

.sp-knopf-hell {
	background: var(--sp-weiss);
	border-color: var(--sp-dunkel);
}

.sp-knopf-hell:hover {
	background: var(--sp-flaeche);
	border-color: var(--sp-dunkel);
}

.sp-knopf-loeschen {
	background: var(--sp-weiss);
	border-color: var(--sp-schlecht);
	color: #b91c1c;
}

.sp-knopf-loeschen:hover {
	background: #fef2f2;
	border-color: var(--sp-schlecht);
}

.sp-verweis {
	min-height: 44px;
	padding: 8px 0;
	font: inherit;
	font-size: 15px;
	color: var(--sp-dunkel);
	text-decoration: underline;
	background: none;
	border: 0;
	cursor: pointer;
}

.sp-nebenweg {
	margin-top: 16px;
	text-align: center;
}

/* --------------------------------------------------------- PDPA-Kasten */

.sp-pdpa {
	margin-top: 24px;
	padding: 16px;
	background: var(--sp-gold-hell);
	border-radius: 12px;
}

.sp-pdpa h2 {
	font-size: 18px;
	margin: 0 0 8px;
}

.sp-haken {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 12px 0;
	cursor: pointer;
}

.sp-haken input {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin: 2px 0 0;
	accent-color: var(--sp-dunkel);
}

.sp-haken span {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--sp-text);
	font-size: 15px;
}

/* ------------------------------------------------------ Meine Punkte */

.sp-liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sp-karte {
	background: var(--sp-weiss);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
	padding: 16px;
	margin: 0 0 12px;
	min-height: 88px;
}

.sp-karte[hidden] {
	display: none;
}

.sp-karte-kopf {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

.sp-karte-name {
	font-size: 17px;
	font-weight: 700;
	color: var(--sp-dunkel);
	overflow-wrap: anywhere;
	min-width: 0;
}

.sp-karte-ort {
	flex: 0 0 auto;
	font-size: 13px;
	color: var(--sp-mittel);
}

.sp-karte-stand {
	margin-top: 4px;
	color: var(--sp-text);
}

.sp-karte-stand strong {
	font-size: 20px;
	color: var(--sp-dunkel);
	font-variant-numeric: tabular-nums;
	border-bottom: 3px solid var(--sp-gold);
}

.sp-karte-hinweis {
	color: var(--sp-mittel);
	font-size: 14px;
}

.sp-karte-zeit {
	margin-top: 4px;
	font-size: 13px;
	color: var(--sp-leise);
}

.sp-karte-stufe {
	color: var(--sp-text);
	font-size: 14px;
}

.sp-karte-belohnung {
	margin-top: 4px;
	color: var(--sp-text);
	font-size: 14px;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.sp-leer {
	background: var(--sp-weiss);
	border-radius: 12px;
	padding: 16px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.sp-leer p {
	margin: 0 0 8px;
	color: var(--sp-text);
}

/* ------------------------------------------------------------ Suche */

.sp-suche {
	position: sticky;
	top: 0;
	z-index: 5;
	background: var(--sp-grund);
	padding: 8px 0 12px;
	margin-bottom: 12px;
}

.sp-suche[hidden],
.sp-keine[hidden] {
	display: none;
}

.sp-filterzeile {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	margin-top: 8px;
}

.sp-filterzeile select {
	flex: 1 1 0;
	min-width: 0;
	padding-left: 8px;
	padding-right: 4px;
	font-size: 15px;
}

.sp-trefferzeile {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 4px;
	font-size: 14px;
	color: var(--sp-mittel);
}

.sp-keine {
	background: var(--sp-weiss);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 12px;
}

.sp-keine p {
	margin: 0;
}

/* ------------------------------------------------------------ Konto */

.sp-abschnitt {
	background: var(--sp-weiss);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
	padding: 16px;
	margin: 0 0 16px;
}

.sp-abschnitt h2 {
	font-size: 18px;
	margin: 0 0 4px;
}

.sp-abschnitt .sp-knopf {
	margin-top: 16px;
}

.sp-freiwillig {
	font-weight: 400;
	font-size: 14px;
	color: var(--sp-mittel);
}

.sp-email-stand {
	margin: 0 0 8px;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.sp-formular-klein {
	margin-top: 16px;
	padding-top: 8px;
	border-top: 1px solid var(--sp-linie);
}

.sp-abschnitt-loeschen {
	border: 1px solid #fecaca;
}

.sp-unten {
	margin-top: 24px;
}

/* ------------------------------------------- Seit 1.0.2: Scan-Seite */

.sp-betrieb-kopf .sp-titel {
	margin-bottom: 2px;
}

.sp-betrieb-ort {
	margin: 0;
	color: var(--sp-mittel);
	font-size: 15px;
}

.sp-besuchsnummer-box {
	margin: 8px 0 12px;
	padding: 20px 16px;
	background: var(--sp-weiss);
	border: 3px solid var(--sp-gold);
	border-radius: 16px;
	text-align: center;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.sp-besuchsnummer-titel {
	margin: 0;
	font-weight: 700;
	color: var(--sp-text);
}

.sp-besuchsnummer {
	margin: 8px 0;
	padding-left: 0.25em;
	font-size: 56px;
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: 0.25em;
	color: var(--sp-dunkel);
	font-variant-numeric: tabular-nums;
}

.sp-besuchsnummer-hinweis {
	margin: 0;
	color: var(--sp-mittel);
	font-size: 15px;
}

.sp-gebucht {
	margin: 8px 0 0;
	padding: 12px 16px;
	background: var(--sp-weiss);
	border-radius: 10px;
	font-weight: 700;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.sp-haekchen {
	color: var(--sp-gut);
	font-weight: 900;
}

/* Die Zahl steht dunkel: Gold auf Weiss ist in der Sonne nicht lesbar
   (Dokument 01, Abschnitt 8). Gold bleibt Rahmen und Linie. */
.sp-stand {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 24px 0 0;
	padding: 16px;
	background: var(--sp-weiss);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
	text-align: center;
}

.sp-stand-titel {
	color: var(--sp-mittel);
	font-size: 14px;
}

.sp-stand-zahl {
	font-size: 44px;
	font-weight: 900;
	line-height: 1.15;
	color: var(--sp-dunkel);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.sp-stand-wort {
	color: var(--sp-mittel);
	font-size: 15px;
	overflow-wrap: anywhere;
}

/* ---------------------------------------- Seit 1.0.2: Personal-Seite */

.sp-personal-betrieb,
.sp-betrieb-zeile {
	margin: 0 0 12px;
	font-weight: 700;
	color: var(--sp-mittel);
	overflow-wrap: anywhere;
}

.sp-angemeldet {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0 12px;
	margin: 0 0 16px;
	padding: 4px 16px;
	background: var(--sp-gold-hell);
	border-radius: 10px;
}

.sp-angemeldet-name {
	font-size: 17px;
	font-weight: 800;
	overflow-wrap: anywhere;
}

.sp-gast input.sp-eingabe-gross {
	font-size: 28px;
	font-weight: 800;
	letter-spacing: 0.15em;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.sp-gastname {
	margin: 0 0 12px;
	font-size: 24px;
	font-weight: 800;
	overflow-wrap: anywhere;
}

.sp-zeilen {
	margin: 0 0 8px;
	padding: 0;
}

.sp-zeilen > div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--sp-linie);
}

.sp-zeilen dt {
	color: var(--sp-text);
}

.sp-zeilen dd {
	margin: 0;
	font-weight: 700;
	text-align: right;
	overflow-wrap: anywhere;
	font-variant-numeric: tabular-nums;
}

.sp-zeile-wichtig {
	font-size: 20px;
}

/* Abbrechen links, Bestaetigen rechts, mindestens 24 px dazwischen
   (Dokument 01, 5.10). */
.sp-knopfreihe {
	display: flex;
	gap: 24px;
	align-items: stretch;
}

.sp-knopfreihe > form,
.sp-knopfreihe > .sp-knopf {
	flex: 1 1 0;
	min-width: 0;
}

.sp-knopfreihe .sp-knopf {
	width: 100%;
}

.sp-meldung-gebucht {
	font-weight: 700;
}

.sp-buchungen {
	margin-top: 32px;
}

.sp-buchungsliste {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}

.sp-buchung {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 12px;
	padding: 6px 0;
	border-bottom: 1px solid var(--sp-linie);
}

.sp-buchung-zeit {
	color: var(--sp-mittel);
	font-variant-numeric: tabular-nums;
}

.sp-buchung-name {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.sp-buchung-punkte {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.sp-buchung-betrag {
	color: var(--sp-mittel);
}

.sp-buchung form,
.sp-buchung-status {
	margin-left: auto;
}

.sp-buchung-status {
	color: var(--sp-mittel);
	font-size: 14px;
}

.sp-buchung-storniert .sp-buchung-punkte {
	color: var(--sp-leise);
	text-decoration: line-through;
}

/* ------------------------------ Seit 1.0.3: Pass, Belohnungen, Einloesen */

.sp-eingeloest {
	margin: 0 0 16px;
	padding: 12px 16px;
	background: var(--sp-weiss);
	border-left: 4px solid var(--sp-gut);
	border-radius: 10px;
	font-weight: 700;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
	overflow-wrap: anywhere;
}

/* Der Pass (E20, E55): dunkler Kopf, Vorname gross, Goldrand - eine
   Gestaltung fuer alle. */
.sp-pass {
	margin: 0 0 12px;
	background: var(--sp-weiss);
	border: 3px solid var(--sp-gold);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.sp-pass-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	padding: 12px 16px;
	background: var(--sp-dunkel);
	color: var(--sp-weiss);
}

.sp-pass-betrieb {
	min-width: 0;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.25;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.sp-pass-name {
	color: var(--sp-gold-hell);
	font-size: 14px;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.sp-pass-koerper {
	padding: 12px 16px 16px;
}

.sp-pass-gast {
	margin: 0;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.sp-pass-zeile {
	margin: 2px 0 0;
	color: var(--sp-text);
	font-size: 15px;
	overflow-wrap: anywhere;
}

.sp-pass .sp-besuchsnummer-box {
	margin: 12px 0 0;
	border-width: 2px;
	box-shadow: none;
}

.sp-gesammelt {
	margin: 8px 0 0;
	color: var(--sp-mittel);
	font-size: 14px;
	text-align: center;
	overflow-wrap: anywhere;
}

/* ------------------------- Seit 3.7.0 Teil 2 (E2317-E2327): die Punktekarte des Gastes (vorher Stand und Stempelkarte einzeln) */

/* Die Karte im Look des Betriebs (E2235, E2239, E2246): oben Logo und Name des Passes, darunter der Stand mit Stempelraster ("Je Besuch")
   oder Ring ("Nach Umsatz"), die Saetze und die Stufe als schmale Leiste. Farben nur als Paare aus SiamPoints_Aussehen::PAARE (Regel 17,
   H3) - mit White Label folgen sie dem Betrieb (aussehen.css stellt die Variablen um), sonst SiamPoints; dunkel nur ueber dunkel_bauen.py.
   Die Klassen heissen sp-pk-..., denn .sp-karte gehoert den Karten in "Meine Punkte". */
.sp-punktekarte {
	position: relative;
	margin: 24px 0 0;
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-radius: 20px;
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.08);
	overflow: hidden;
}

.sp-pk-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 12px;
	padding: 12px 18px;
	border-bottom: 3px solid var(--sp-gold);
}

.sp-pk-marke {
	min-width: 0;
	font-size: 19px;
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.sp-pk-logo {
	display: block;
	width: auto;
	max-width: 160px;
	height: auto;
	max-height: 36px;
}

.sp-pk-name {
	color: var(--sp-mittel);
	font-size: 13px;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.sp-pk-koerper {
	padding: 16px 18px 18px;
}

/* Der Stand in der Karte - dieselben Teile wie vorher (sp-stand-titel, -zahl, -wort), ohne eigenen Kasten. */
.sp-punktekarte .sp-stand {
	margin: 0;
	padding: 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
}

/* Beim Stempelraster steht der Stand als Zeile darueber. */
.sp-pk-art-stempel .sp-stand {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0 12px;
	text-align: start;
}

.sp-pk-art-stempel .sp-stand-zahl {
	font-size: 30px;
}

.sp-stand-wert {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 0 6px;
}

/* Das Stempelraster (E2319, G2): ein Feld je Besuch bis zur Belohnung, bis 20 in zwei Reihen; leere Felder zart, das letzte ein Geschenk. */
.sp-punktekarte .sp-stempelkarte {
	margin: 14px 0 0;
	padding: 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
}

.sp-pk-raster {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 52px));
	gap: 10px;
	justify-content: center;
}

.sp-pk-raster[data-sp-spalten="1"] {
	grid-template-columns: minmax(0, 76px);
}

.sp-pk-raster[data-sp-spalten="2"] {
	grid-template-columns: repeat(2, minmax(0, 64px));
}

.sp-pk-raster[data-sp-spalten="3"] {
	grid-template-columns: repeat(3, minmax(0, 60px));
}

.sp-pk-raster[data-sp-spalten="4"] {
	grid-template-columns: repeat(4, minmax(0, 56px));
}

.sp-pk-raster[data-sp-spalten="6"] {
	grid-template-columns: repeat(6, minmax(0, 48px));
	gap: 8px;
}

.sp-pk-raster[data-sp-spalten="7"] {
	grid-template-columns: repeat(7, minmax(0, 44px));
	gap: 7px;
}

.sp-pk-raster[data-sp-spalten="8"] {
	grid-template-columns: repeat(8, minmax(0, 42px));
	gap: 6px;
}

.sp-pk-raster[data-sp-spalten="9"] {
	grid-template-columns: repeat(9, minmax(0, 40px));
	gap: 5px;
}

.sp-pk-raster[data-sp-spalten="10"] {
	grid-template-columns: repeat(10, minmax(0, 38px));
	gap: 5px;
}

.sp-stempel {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	border: 2px dashed var(--sp-linie);
	border-radius: 50%;
	background: var(--sp-weiss);
}

.sp-stempel svg {
	width: 46%;
	height: 46%;
}

.sp-stempel-voll {
	border: 2px solid var(--sp-gold);
	background: var(--sp-gold-hell);
	color: var(--sp-dunkel);
}

.sp-stempel-geschenk {
	border-color: var(--sp-gold);
	color: var(--sp-dunkel);
}

.sp-stempel-voll.sp-stempel-geschenk {
	border-width: 3px;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--sp-gold) 30%, transparent);
}

/* Der Ring (E2246, E2310, E2320): nur der Ring - in der Mitte der Stand und das Ziel; sanfter Verlauf, runde Enden, zarte Spur. */
.sp-pk-ring {
	position: relative;
	width: 184px;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	margin: 6px auto 0;
}

.sp-pk-ring svg {
	display: block;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.sp-pk-ring-spur {
	fill: none;
	stroke: color-mix(in srgb, var(--sp-gold) 22%, transparent);
	stroke-width: 11;
}

.sp-pk-ring-fuellung {
	fill: none;
	stroke-width: 11;
	stroke-linecap: round;
	transition: stroke-dashoffset 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sp-pk-ring-leer .sp-pk-ring-fuellung {
	visibility: hidden;
}

.sp-pk-ring-a {
	stop-color: var(--sp-gold);
}

.sp-pk-ring-b {
	stop-color: var(--sp-gold-dunkel);
}

.sp-pk-ring-mitte {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 26px;
	text-align: center;
}

.sp-pk-ring .sp-stand-zahl {
	font-size: 46px;
	line-height: 1.05;
}

.sp-pk-ring-von {
	color: var(--sp-mittel);
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.sp-pk-ring .sp-stand-wort {
	font-size: 14px;
}

/* Die Saetze unter Stempeln und Ring - Vorlese-Programme lesen denselben Text (E2246). */
.sp-pk-ziel,
.sp-pk-noch,
.sp-pk-regel {
	margin: 0;
	text-align: center;
	overflow-wrap: anywhere;
}

.sp-pk-ziel {
	margin-top: 14px;
	color: var(--sp-dunkel);
}

.sp-pk-noch {
	margin-top: 2px;
	color: var(--sp-dunkel);
	font-weight: 700;
}

.sp-pk-regel {
	margin-top: 6px;
	color: var(--sp-mittel);
	font-size: 14px;
}

/* Erreicht (E2321): "Geschafft - ... einloesen" und "Jetzt einloesen" (der Knopf schickt das Formular der Belohnung in der Liste ab). */
.sp-pk-geschafft {
	margin: 16px 0 0;
	padding: 14px 16px 16px;
	border-radius: 14px;
	background: var(--sp-gold-hell);
	color: var(--sp-dunkel);
	text-align: center;
}

.sp-pk-geschafft p {
	margin: 0 0 10px;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.sp-pk-geschafft .sp-knopf {
	width: 100%;
}

.sp-pk-fest .sp-pk-geschafft {
	box-shadow: 0 0 0 3px var(--sp-gold);
}

/* Die Stufe als schmale Leiste unten in der Karte (E2326, Vorschlag Punkt 5). */
.sp-pk-stufe {
	padding: 10px 18px 12px;
	border-top: 1px solid var(--sp-linie);
	background: var(--sp-grund);
}

.sp-pk-stufe svg {
	display: block;
	width: 100%;
	height: 4px;
}

.sp-pk-stufe-spur {
	fill: color-mix(in srgb, var(--sp-gold) 22%, transparent);
}

.sp-pk-stufe-fuellung {
	fill: var(--sp-gold);
}

.sp-pk-stufe p {
	margin: 6px 0 0;
	color: var(--sp-mittel);
	font-size: 13px;
	overflow-wrap: anywhere;
}

/* Bewegung (E2322-E2325): nur mit Skript (gast.js Teil 21) und ohne "weniger Bewegung" - der neue Stempel drueckt sich ein, die Zahl
   zaehlt hoch, der Ring fuellt sich; Belohnung frei: ein kurzer Fest-Moment. Ohne Skript steht alles gleich fertig da. */
.sp-pk-wartet .sp-stempel-neu {
	opacity: 0;
}

.sp-pk-bewegt .sp-stempel-neu {
	animation: sp-pk-druck 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
}

@keyframes sp-pk-druck {
	0% {
		opacity: 0;
		transform: scale(1.9) rotate(-16deg);
	}

	60% {
		opacity: 1;
		transform: scale(0.9) rotate(3deg);
	}

	100% {
		opacity: 1;
		transform: none;
	}
}

.sp-pk-konfetti {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.sp-pk-konfetti i {
	position: absolute;
	top: 38%;
	left: 50%;
	width: 8px;
	height: 12px;
	border-radius: 2px;
	background: var(--sp-gold);
	opacity: 0;
}

.sp-pk-konfetti i:nth-child(3n) {
	background: var(--sp-gold-dunkel);
}

.sp-pk-konfetti i:nth-child(3n + 1) {
	background: var(--sp-gold-hell);
}

.sp-pk-bewegt .sp-pk-konfetti i {
	animation: sp-pk-konfetti 1.4s cubic-bezier(0.15, 0.6, 0.35, 1) 0.3s forwards;
}

@keyframes sp-pk-konfetti {
	0% {
		opacity: 1;
		transform: translate(0, 0) rotate(0deg);
	}

	100% {
		opacity: 0;
		transform: translate(var(--sp-pk-x, 0), var(--sp-pk-y, 160px)) rotate(var(--sp-pk-r, 360deg));
	}
}

.sp-pk-konfetti i:nth-child(1) { --sp-pk-x: -140px; --sp-pk-y: -40px; --sp-pk-r: 300deg; }
.sp-pk-konfetti i:nth-child(2) { --sp-pk-x: -110px; --sp-pk-y: 90px; --sp-pk-r: -260deg; }
.sp-pk-konfetti i:nth-child(3) { --sp-pk-x: -70px; --sp-pk-y: -90px; --sp-pk-r: 420deg; }
.sp-pk-konfetti i:nth-child(4) { --sp-pk-x: -40px; --sp-pk-y: 140px; --sp-pk-r: -380deg; }
.sp-pk-konfetti i:nth-child(5) { --sp-pk-x: -10px; --sp-pk-y: -110px; --sp-pk-r: 280deg; }
.sp-pk-konfetti i:nth-child(6) { --sp-pk-x: 20px; --sp-pk-y: 120px; --sp-pk-r: -320deg; }
.sp-pk-konfetti i:nth-child(7) { --sp-pk-x: 50px; --sp-pk-y: -100px; --sp-pk-r: 360deg; }
.sp-pk-konfetti i:nth-child(8) { --sp-pk-x: 80px; --sp-pk-y: 150px; --sp-pk-r: -300deg; }
.sp-pk-konfetti i:nth-child(9) { --sp-pk-x: 110px; --sp-pk-y: -60px; --sp-pk-r: 340deg; }
.sp-pk-konfetti i:nth-child(10) { --sp-pk-x: 140px; --sp-pk-y: 70px; --sp-pk-r: -420deg; }
.sp-pk-konfetti i:nth-child(11) { --sp-pk-x: -150px; --sp-pk-y: 30px; --sp-pk-r: 260deg; }
.sp-pk-konfetti i:nth-child(12) { --sp-pk-x: 150px; --sp-pk-y: -20px; --sp-pk-r: -280deg; }

@media (prefers-reduced-motion: reduce) {
	.sp-pk-wartet .sp-stempel-neu {
		opacity: 1;
	}

	.sp-pk-bewegt .sp-stempel-neu,
	.sp-pk-bewegt .sp-pk-konfetti i {
		animation: none;
	}

	.sp-pk-ring-fuellung {
		transition: none;
	}
}

/* ------------------------- Seit 3.7.0 Teil 3 (E2330-E2332): die Wahl des Symbols unter "Treueprogramm" und die kleine Karte in "Meine Punkte".
   Farben nur als vorhandene Paare (Regel 17, H3); dunkel nur ueber dunkel_bauen.py. */

/* Die Wahl des Symbols in den Stempeln (E2331) - Kacheln mit Radio-Knoepfen wie "Gast ruft" (3.6.0), ohne Skript bedienbar. */
.sp-treue-symbole {
	min-width: 0;
	margin: 18px 0 0;
	padding: 0;
	border: 0;
}

.sp-treue-symbole legend {
	padding: 0;
}

.sp-treue-symbol-kacheln {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 8px;
	margin: 8px 0 0;
}

.sp-treue-symbol-kachel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 0;
	min-height: 76px;
	margin: 0;
	padding: 8px 6px;
	color: var(--sp-dunkel);
	background: var(--sp-weiss);
	border: 2px solid var(--sp-linie);
	border-radius: 12px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	overflow-wrap: anywhere;
}

/* Die erste Kachel ("Passend zu Ihrer Branche") ist doppelt so breit. */
.sp-treue-symbol-kachel:first-child {
	grid-column: span 2;
}

.sp-treue-symbole .sp-treue-symbol-kachel input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
}

.sp-treue-symbol-kachel svg {
	flex: 0 0 auto;
}

.sp-treue-symbol-kachel:has(input:checked) {
	background: var(--sp-gold-hell);
	border-color: var(--sp-gold);
}

.sp-treue-symbol-kachel:focus-within {
	outline: 2px solid var(--sp-fokus);
	outline-offset: 2px;
}

/* "Meine Punkte" (E2332): die Punktekarte im Kleinen - der Ring rechts neben den Zeilen, das Raster unter dem Stand. Die Karte umschliesst
   den Ring (flow-root); versteckte Karten bleiben versteckt (.sp-karte[hidden] wiegt mehr). */
.sp-karte,
.sp-karte-link {
	display: flow-root;
}

.sp-pk-mini-ring {
	position: relative;
	float: right;
	width: 56px;
	height: 56px;
	margin: 2px 0 4px 12px;
	color: var(--sp-dunkel);
}

.sp-pk-mini-ring svg {
	display: block;
}

.sp-pk-mini-ring svg:first-child {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.sp-pk-mini-ring svg + svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.sp-pk-mini-spur {
	fill: none;
	stroke: color-mix(in srgb, var(--sp-gold) 22%, transparent);
	stroke-width: 7;
}

.sp-pk-mini-fuellung {
	fill: none;
	stroke: var(--sp-gold);
	stroke-width: 7;
	stroke-linecap: round;
}

.sp-pk-mini-leer .sp-pk-mini-fuellung {
	visibility: hidden;
}

.sp-pk-mini-raster {
	display: grid;
	grid-template-columns: repeat(5, 20px);
	gap: 4px;
	margin: 8px 0 2px;
}

.sp-pk-mini-raster[data-sp-spalten="1"] {
	grid-template-columns: repeat(1, 20px);
}

.sp-pk-mini-raster[data-sp-spalten="2"] {
	grid-template-columns: repeat(2, 20px);
}

.sp-pk-mini-raster[data-sp-spalten="3"] {
	grid-template-columns: repeat(3, 20px);
}

.sp-pk-mini-raster[data-sp-spalten="4"] {
	grid-template-columns: repeat(4, 20px);
}

.sp-pk-mini-raster[data-sp-spalten="6"] {
	grid-template-columns: repeat(6, 20px);
}

.sp-pk-mini-raster[data-sp-spalten="7"] {
	grid-template-columns: repeat(7, 20px);
}

.sp-pk-mini-raster[data-sp-spalten="8"] {
	grid-template-columns: repeat(8, 20px);
}

.sp-pk-mini-raster[data-sp-spalten="9"] {
	grid-template-columns: repeat(9, 20px);
}

.sp-pk-mini-raster[data-sp-spalten="10"] {
	grid-template-columns: repeat(10, 20px);
}

.sp-pk-mini-feld {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	color: var(--sp-dunkel);
	background: var(--sp-weiss);
	border: 1.5px dashed var(--sp-linie);
	border-radius: 50%;
}

.sp-pk-mini-voll {
	background: var(--sp-gold-hell);
	border: 1.5px solid var(--sp-gold);
}

.sp-pk-mini-geschenk {
	border-color: var(--sp-gold);
}

/* Die Liste der Belohnungen - beim Gast und beim Personal. */
.sp-belohnungen {
	margin: 24px 0 0;
}

.sp-belohnungen h2 {
	font-size: 18px;
	margin: 0 0 8px;
}

.sp-belohnungen h3 {
	font-size: 16px;
	margin: 16px 0 4px;
}

.sp-leiter {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sp-stufe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 12px;
	margin: 0 0 8px;
	padding: 12px 16px;
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-radius: 12px;
}

.sp-stufe-einloesbar {
	border: 2px solid var(--sp-gold);
}

.sp-stufe-schwelle {
	flex: 0 0 auto;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.sp-stufe-text {
	flex: 1 1 12em;
	min-width: 0;
	overflow-wrap: anywhere;
}

.sp-stufe-fehlt,
.sp-stufe-hinweis {
	flex: 1 1 100%;
	color: var(--sp-mittel);
	font-size: 14px;
	overflow-wrap: anywhere;
}

.sp-stufe-erreicht .sp-stufe-fehlt {
	color: #047857;
	font-weight: 700;
}

.sp-stufe-formular {
	flex: 1 1 100%;
}

.sp-gast .sp-knopf-klein {
	min-height: 48px;
	margin-top: 8px;
	padding: 8px 20px;
}

.sp-guthaben {
	margin: 8px 0 0;
	padding: 12px 16px 16px;
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-radius: 12px;
}

.sp-guthaben h3 {
	margin-top: 0;
}

.sp-guthaben-zeile {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	align-items: stretch;
}

.sp-guthaben-zeile input {
	flex: 1 1 8em;
	min-width: 0;
	font-size: 22px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.sp-guthaben-zeile .sp-knopf {
	flex: 1 1 auto;
	width: auto;
	margin-top: 0;
}

/* Der Einloese-Code (E16, E48): zwei Dreiergruppen, Balken, zuletzt rot,
   danach blass. */
.sp-werte {
	margin: 0 0 16px;
	padding: 0;
}

.sp-werte dt {
	color: var(--sp-text);
	font-size: 14px;
}

.sp-werte dd {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 800;
	overflow-wrap: anywhere;
	font-variant-numeric: tabular-nums;
}

.sp-code-box {
	margin: 0 0 8px;
	padding: 20px 16px;
	background: var(--sp-weiss);
	border: 3px solid var(--sp-gold);
	border-radius: 16px;
	text-align: center;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.sp-code-titel {
	margin: 0;
	font-weight: 700;
	color: var(--sp-text);
}

.sp-code {
	margin: 8px 0;
	font-size: 44px;
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: 0.08em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.sp-code span + span {
	margin-left: 0.3em;
}

.sp-code-hinweis {
	margin: 0;
	color: var(--sp-mittel);
	font-size: 15px;
}

.sp-code-balken {
	height: 10px;
	margin: 16px 0 8px;
	background: var(--sp-flaeche);
	border-radius: 5px;
	overflow: hidden;
}

.sp-code-balken-fuellung {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--sp-gold);
	border-radius: 5px;
}

.sp-code-knapp .sp-code-balken-fuellung {
	background: var(--sp-schlecht);
}

.sp-code-zeit {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.sp-code-abgelaufen .sp-code,
.sp-code-abgelaufen .sp-code-hinweis {
	opacity: 0.3;
}

.sp-code-abgelaufen {
	border-color: var(--sp-linie);
}

[data-sp-code-neu][hidden] {
	display: none;
}

/* Die Personal-Seite: Karte des Gastes, Zeile unter dem Namen, Einloesungen. */
.sp-gastkarte {
	margin: 0 0 24px;
	padding: 16px;
	background: var(--sp-weiss);
	border: 3px solid var(--sp-gold);
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.sp-gastkarte .sp-gastname {
	margin-bottom: 0;
}

.sp-gastzeile {
	margin: -8px 0 12px;
	color: var(--sp-text);
	overflow-wrap: anywhere;
}

.sp-gastkarte .sp-gastzeile {
	margin: 0 0 8px;
}

.sp-gastkarte .sp-zeilen > div:last-child {
	border-bottom: 0;
}

.sp-feldhinweis {
	margin: 6px 0 0;
}

.sp-einloesen {
	margin-top: 32px;
}

.sp-einloesen h2,
.sp-abschnitt.sp-belohnungen h2 {
	margin-bottom: 0;
}

.sp-abschnitt.sp-belohnungen .sp-stufe {
	padding: 8px 12px;
}

.sp-buchung-titel {
	flex: 1 1 100%;
	color: var(--sp-text);
	font-size: 14px;
	overflow-wrap: anywhere;
}

.sp-buchung-einloesung .sp-buchung-punkte {
	color: #b45309;
}

.sp-buchung-storniert.sp-buchung-einloesung .sp-buchung-punkte {
	color: var(--sp-leise);
}

/* ------------------------------------------------------------- Fuss */

.sp-fuss {
	max-width: 560px;
	margin: 0 auto;
	padding: 24px 16px 32px;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: 13px;
	color: var(--sp-leise);
}

.sp-fuss a {
	color: var(--sp-mittel);
}

@media (min-width: 640px) {
	.sp-knopf {
		width: auto;
		min-height: 48px;
	}

	.sp-formular .sp-knopf {
		align-self: flex-start;
	}

	.sp-titel {
		font-size: 30px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sp-knopf:active {
		transform: none;
	}
}

/* Sehr schmale Telefone: der Code bleibt auf einer Zeile. */
@media (max-width: 340px) {
	.sp-code {
		font-size: 36px;
	}
}

/* ------------------------------ Seit 1.0.4: QR-Code und Druckseite */

/* Der Knopf oben auf der Buchungsansicht - hell, ueber die ganze Breite. */
.sp-qr-knopf {
	width: 100%;
	margin: 0 0 20px;
	gap: 10px;
}

.sp-qr-symbol {
	flex: 0 0 auto;
}

/* Die grosse Ansicht (E68): weiss, so breit wie der Bildschirm, hoechstens
   420 Punkte. Der weisse Rand steckt im Code selbst. */
.sp-qr-gross {
	max-width: 420px;
	margin: 0 auto 16px;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
	overflow: hidden;
}

.sp-qr-gross svg,
.sp-druckkarte-code svg {
	display: block;
	width: 100%;
	height: auto;
}

.sp-qr-satz {
	margin: 8px 0 4px;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.3;
	text-align: center;
	overflow-wrap: anywhere;
}

.sp-qr-hinweis {
	text-align: center;
	margin-bottom: 8px;
}

.sp-qr-druckwahl,
.sp-qr-dateien {
	margin-top: 32px;
}

.sp-qr-liste {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}

.sp-qr-datei {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding: 8px 0;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.sp-qr-vorschau {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border: 1px solid var(--sp-linie);
	image-rendering: pixelated;
}

/* Die Druckseite auf dem Bildschirm: Leiste oben, darunter eine Karte als
   Vorschau in voller Breite des Telefons. Die beiden A4-Seiten entstehen erst
   beim Drucken. */
.sp-druck-leiste {
	max-width: 560px;
	margin: 0 auto;
	padding: 24px 16px 8px;
}

[data-sp-drucken][hidden] {
	display: none;
}

.sp-bogen {
	max-width: 420px;
	margin: 0 auto 48px;
	padding: 16px;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.sp-bogen-seite + .sp-bogen-seite,
.sp-druckkarte + .sp-druckkarte {
	display: none;
}

/* Die Karte: alle Masse relativ zu ihrer Breite (105 mm = 100cqw), damit
   Vorschau und Druck dieselbe Gestaltung haben. Die Werte in Punkten davor
   gelten nur fuer Browser ohne diese Einheit. */
.sp-druckkarte {
	container-type: inline-size;
	aspect-ratio: 105 / 148.5;
	background: #ffffff;
	color: #0f172a;
	border: 1px solid var(--sp-linie);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
	overflow: hidden;
}

.sp-druckkarte-innen {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 28px;
	padding: 7.62cqw;
	text-align: center;
}

.sp-druckkarte-innen p {
	margin: 0;
}

.sp-druckkarte-name {
	font-size: 20px;
	font-size: 5.33cqw;
	font-weight: 800;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.sp-druckkarte-name-lang {
	font-size: 16px;
	font-size: 4.3cqw;
}

.sp-druckkarte-name-sehr-lang {
	font-size: 13px;
	font-size: 3.4cqw;
}

/* Die Goldlinie als Linie, nicht als Flaeche - sie druckt auch ohne
   "Hintergrundgrafiken". */
.sp-druckkarte-linie {
	width: 19cqw;
	height: 0;
	margin: 2.4cqw 0;
	border-top: 0.76cqw solid #f59e0b;
}

/* Das Feld fuer den Code: 75 mm, der schwarze Teil damit mindestens 60 mm. */
.sp-druckkarte-code {
	width: 84.27%;
	width: 71.43cqw;
	margin: 0 0 2.4cqw;
}

.sp-druckkarte-satz {
	font-size: 14px;
	font-size: 3.7cqw;
	font-weight: 600;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.sp-druckkarte-satz-1 {
	font-size: 18px;
	font-size: 4.7cqw;
	font-weight: 800;
}

.sp-druckkarte-satz:lang(th) {
	font-family: "Noto Sans Thai", Sarabun, Tahoma, var(--sp-schrift);
	line-height: 1.8;
}

.sp-druckkarte-satz:lang(zh-CN) {
	font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", var(--sp-schrift);
}

.sp-druckkarte-satz:lang(ja) {
	font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", var(--sp-schrift);
}

.sp-druckkarte-innen .sp-druckkarte-adresse {
	margin-top: 1.9cqw;
	font-size: 11px;
	font-size: 2.86cqw;
	color: #475569;
	overflow-wrap: anywhere;
}

.sp-druckkarte-innen .sp-druckkarte-marke {
	margin-top: 1.4cqw;
	font-size: 13px;
	font-size: 3.36cqw;
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

/* Beim Drucken: nur der Bogen - zwei A4-Seiten mit je 2 x 2 Karten zu
   105 x 148,5 mm, Schnittlinien in der Mitte. Gilt nur fuer die Druckseite;
   A4 ohne Rand steht in der Druckseite selbst (qr-druck.php). */
@media print {
	body.sp-druck {
		margin: 0;
		background: #ffffff;
	}

	body.sp-druck > *:not(.sp-bogen) {
		display: none !important;
	}

	body.sp-druck .sp-bogen {
		display: block !important;
		max-width: none;
		width: 210mm;
		margin: 0;
		padding: 0;
	}

	body.sp-druck .sp-bogen-seite {
		position: relative;
		display: grid !important;
		grid-template-columns: 105mm 105mm;
		grid-template-rows: 148.5mm 148.5mm;
		width: 210mm;
		height: 296.9mm;
		overflow: hidden;
		break-after: page;
		page-break-after: always;
		break-inside: avoid;
	}

	body.sp-druck .sp-bogen-seite:last-child {
		break-after: auto;
		page-break-after: auto;
	}

	body.sp-druck .sp-bogen-seite::before,
	body.sp-druck .sp-bogen-seite::after {
		content: "";
		position: absolute;
	}

	body.sp-druck .sp-bogen-seite::before {
		top: 0;
		bottom: 0;
		left: 105mm;
		border-left: 0.3mm dashed #b3b3b3;
	}

	body.sp-druck .sp-bogen-seite::after {
		left: 0;
		right: 0;
		top: 148.5mm;
		border-top: 0.3mm dashed #b3b3b3;
	}

	body.sp-druck .sp-druckkarte {
		display: block !important;
		width: 105mm;
		height: 148.5mm;
		aspect-ratio: auto;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
}

/* ------------------ Seit 1.0.5: das Fenster, der Knopf "Ton", die Ansicht */

/* Das Fenster nach einer Buchung oder Einloesung (E73): unten auf dem
   Telefon, gruen mit weisser Schrift (Kontrast 5,5 : 1), der Rest der Seite
   abgedunkelt. Ohne JavaScript bleibt es verborgen. */
.sp-fenster {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 16px;
	padding-bottom: max(16px, env(safe-area-inset-bottom));
	background: rgba(15, 23, 42, 0.45);
}

.sp-fenster[hidden] {
	display: none;
}

.sp-fenster-karte {
	width: 100%;
	max-width: 480px;
	padding: 24px 20px 20px;
	background: #047857;
	color: var(--sp-weiss);
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.35);
	text-align: center;
	animation: sp-fenster-ein 0.25s ease-out;
}

@keyframes sp-fenster-ein {
	from {
		transform: translateY(24px);
		opacity: 0;
	}

	to {
		transform: none;
		opacity: 1;
	}
}

.sp-fenster-haken {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: var(--sp-weiss);
	color: #047857;
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
}

.sp-fenster-titel {
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.sp-fenster-zeile {
	margin: 0;
	font-size: 16px;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.sp-fenster-balken {
	height: 4px;
	margin: 18px 0 16px;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 2px;
	overflow: hidden;
}

.sp-fenster-balken span {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--sp-weiss);
	border-radius: 2px;
	animation: sp-fenster-lauf 8s linear forwards;
}

@keyframes sp-fenster-lauf {
	from {
		width: 100%;
	}

	to {
		width: 0;
	}
}

.sp-fenster-zu {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 12px 20px;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	color: #047857;
	background: var(--sp-weiss);
	border: 0;
	border-radius: 12px;
	cursor: pointer;
}

.sp-fenster-zu:focus-visible {
	outline: 3px solid var(--sp-gold);
	outline-offset: 3px;
}

/* Der Knopf "Ton" (E74): klein, neben dem Inhalt, erst sichtbar, wenn das
   Telefon Klang kann. */
.sp-ton {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin: 16px 0 0;
	padding: 8px 16px;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--sp-text);
	background: var(--sp-weiss);
	border: 2px solid var(--sp-linie);
	border-radius: 999px;
	cursor: pointer;
}

.sp-ton[hidden] {
	display: none;
}

.sp-ton[aria-pressed="true"] {
	color: var(--sp-dunkel);
	border-color: var(--sp-gut);
}

.sp-ton svg {
	flex: 0 0 auto;
}

/* "Meine Punkte": die ganze Karte ist der Knopf zur Ansicht (E75). */
.sp-karte-link {
	position: relative;
	display: block;
	margin: -16px;
	padding: 16px 36px 16px 16px;
	color: inherit;
	text-decoration: none;
	border-radius: 12px;
}

.sp-karte-link::after {
	content: "\203A";
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	font-size: 26px;
	line-height: 1;
	color: var(--sp-leise);
}

.sp-karte-link:active {
	background: var(--sp-flaeche);
}

/* Die Ansicht: der Hinweis, vor Ort zu scannen. */
.sp-hinweis-vor-ort {
	margin: 16px 0 0;
	padding: 12px 16px;
	background: var(--sp-weiss);
	border-left: 4px solid var(--sp-gold);
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
	color: var(--sp-text);
	font-size: 15px;
	overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
	.sp-fenster-karte,
	.sp-fenster-balken span {
		animation: none;
	}
}

/* ------------------------------ Seit 1.0.9: der Bereich des Inhabers */

/* Nur unter .sp-inhaber bzw. mit neuen Klassen - keine Regel des Gastes
   aendert sich. */

.sp-inhaber input[type="url"],
.sp-inhaber input[type="time"],
.sp-inhaber textarea {
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	font: inherit;
	font-size: 16px;
	color: var(--sp-dunkel);
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-radius: 10px;
}

.sp-inhaber textarea {
	min-height: 180px;
	line-height: 1.5;
	resize: vertical;
}

.sp-inhaber textarea:focus {
	outline: 2px solid var(--sp-fokus);
	outline-offset: 0;
	border-color: var(--sp-fokus);
}

.sp-inhaber .sp-angemeldet-name {
	overflow-wrap: anywhere;
}

.sp-inhaber-betrieb {
	margin: 0 0 8px;
	color: var(--sp-mittel);
	font-weight: 700;
	overflow-wrap: anywhere;
}

.sp-inhaber-wahl {
	margin: 0 0 24px;
}

.sp-inhaber-wahl .sp-feldname {
	display: block;
	margin-top: 0;
}

.sp-inhaber-wahl-zeile {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.sp-inhaber-wahl-zeile select {
	flex: 1 1 auto;
	min-width: 0;
}

.sp-inhaber-wahl-zeile .sp-knopf {
	flex: 0 0 auto;
	width: auto;
	min-height: 48px;
	margin-top: 0;
	padding: 8px 16px;
}

.sp-kacheln {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sp-kachel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 0 12px;
	padding: 16px 40px 16px 16px;
	min-height: 72px;
	color: inherit;
	text-decoration: none;
	background: var(--sp-weiss);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.sp-gast .sp-kachel {
	text-decoration: none;
}

.sp-kachel::after {
	content: "\203A";
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	font-size: 26px;
	line-height: 1;
	color: var(--sp-leise);
}

.sp-kachel:active {
	background: var(--sp-flaeche);
}

.sp-kachel-titel {
	font-weight: 700;
	font-size: 17px;
}

.sp-kachel-text {
	color: var(--sp-mittel);
	font-size: 14px;
	overflow-wrap: anywhere;
}

.sp-zurueck {
	margin: 0 0 8px;
	font-size: 15px;
}

.sp-zurueck a::before {
	content: "\2039\00a0";
}

.sp-feldfehler {
	margin: 6px 0 0;
	color: #b91c1c;
	font-size: 14px;
	font-weight: 700;
}

.sp-inhaber [aria-invalid="true"] {
	border-color: var(--sp-schlecht);
}

.sp-zeiten {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}

.sp-zeiten-zeile {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	align-items: flex-end;
	padding: 12px 0;
	border-bottom: 1px solid var(--sp-linie);
}

.sp-zeiten-tag {
	flex: 1 1 100%;
	font-weight: 700;
}

.sp-zeiten-feld {
	display: flex;
	flex-direction: column;
	flex: 1 1 120px;
	min-width: 0;
	font-size: 14px;
	color: var(--sp-mittel);
}

.sp-zeiten-zu.sp-haken {
	flex: 1 1 100%;
	margin: 4px 0 0;
}

.sp-mitarbeiterliste {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}

.sp-mitarbeiter {
	padding: 12px 0;
	border-bottom: 1px solid var(--sp-linie);
}

.sp-mitarbeiter:last-child {
	border-bottom: 0;
}

.sp-mitarbeiter .sp-klein {
	margin: 4px 0 0;
}

.sp-mitarbeiter-kopf {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	align-items: baseline;
}

.sp-mitarbeiter-name {
	font-weight: 700;
	overflow-wrap: anywhere;
}

.sp-mitarbeiter-nummer {
	color: var(--sp-mittel);
	font-variant-numeric: tabular-nums;
}

.sp-zustand {
	display: inline-block;
	padding: 2px 10px;
	font-size: 13px;
	font-weight: 700;
	border-radius: 999px;
	background: var(--sp-flaeche);
	color: var(--sp-text);
}

.sp-zustand-aktiv {
	background: #d1fae5;
	color: #065f46;
}

.sp-zustand-gesperrt {
	background: #fee2e2;
	color: #991b1b;
}

.sp-zustand-ohne_pin {
	background: var(--sp-gold-hell);
	color: #92400e;
}

.sp-zustand-geloescht {
	background: none;
	padding: 0;
	font-weight: 400;
	color: var(--sp-leise);
}

.sp-mitarbeiter-knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 0 20px;
	margin-top: 4px;
}

.sp-mitarbeiter-knoepfe form {
	margin: 0;
}

/* Die Personal-Seite: der Hinweis fuer die erste Anmeldung (E94). */
.sp-erste-pin {
	margin-top: 8px;
	color: var(--sp-mittel);
	font-size: 14px;
}

/* ------------------------------ Seit 1.0.10: Was der Gast sieht (Teil B) */

/* Nur neue Klassen - keine Regel von vorher aendert sich. Keine Kanalfarben:
   die Symbole der Knoepfe sind neutral, der Name steht darunter. */

/* Der Menue-Knopf rechts neben der Sprachwahl (E102). Das Panel liegt ueber
   die volle Breite des Kopfes - in Prozent, nicht in vw. */
.sp-kopf {
	position: relative;
}

.sp-kopf-rechts {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sp-menue summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	padding: 0 10px;
	border: 1px solid var(--sp-linie);
	border-radius: 10px;
	cursor: pointer;
	color: var(--sp-dunkel);
	background: var(--sp-weiss);
}

.sp-menue summary::-webkit-details-marker {
	display: none;
}

.sp-menue[open] summary {
	background: var(--sp-flaeche);
}

.sp-menue-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 20;
	background: var(--sp-weiss);
	border-bottom: 4px solid var(--sp-gold);
	box-shadow: 0 16px 32px rgba(15, 23, 42, 0.14);
}

.sp-menue-liste {
	list-style: none;
	max-width: 560px;
	margin: 0 auto;
	padding: 8px 16px 16px;
}

.sp-menue-liste form {
	margin: 0;
}

.sp-menue-punkt {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 52px;
	padding: 10px 12px;
	font: inherit;
	font-size: 17px;
	font-weight: 700;
	color: var(--sp-dunkel);
	text-align: left;
	text-decoration: none;
	background: none;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
}

a.sp-menue-punkt:active,
button.sp-menue-punkt:active {
	background: var(--sp-flaeche);
}

.sp-menue-punkt svg {
	flex: 0 0 auto;
	color: var(--sp-gold-dunkel);
}

.sp-menue-sprachen {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0 12px 8px 46px;
}

.sp-menue-sprachen a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 14px;
	border: 1px solid var(--sp-linie);
	border-radius: 999px;
	text-decoration: none;
	font-size: 15px;
}

.sp-menue-sprachen a[aria-current="true"] {
	background: var(--sp-gold-hell);
	border-color: var(--sp-gold);
	font-weight: 700;
}

/* "Meine Punkte": Gruppen nach Region (E100). */
.sp-gruppe {
	margin: 0 0 16px;
}

.sp-gruppe[hidden] {
	display: none;
}

.sp-gruppe summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 48px;
	padding: 10px 16px;
	font-weight: 800;
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-radius: 12px;
	cursor: pointer;
}

.sp-gruppe summary::-webkit-details-marker {
	display: none;
}

.sp-gruppe summary::after {
	content: "\203A";
	font-size: 22px;
	line-height: 1;
	color: var(--sp-leise);
	transform: rotate(90deg);
}

.sp-gruppe[open] summary {
	margin-bottom: 12px;
}

.sp-gruppe[open] summary::after {
	transform: rotate(-90deg);
}

.sp-gruppe-name {
	flex: 1 1 auto;
	overflow-wrap: anywhere;
}

.sp-gruppe-zahl {
	flex: 0 0 auto;
	min-width: 28px;
	padding: 2px 8px;
	font-size: 14px;
	text-align: center;
	background: var(--sp-flaeche);
	border-radius: 999px;
}

/* Die Ansicht: der Knopf "Meine Besuchsnummer zeigen" (E87). */
.sp-hinweis-vor-ort p {
	margin: 0;
}

.sp-hinweis-vor-ort form {
	margin: 0;
}

.sp-hinweis-vor-ort .sp-knopf {
	margin-top: 12px;
	width: 100%;
}

/* Der Knopf "Ton" ist ein Formular (E90). */
.sp-ton-formular {
	margin: 0;
}

/* "Ueber diesen Betrieb". */
.sp-angaben,
.sp-notizen {
	margin: 32px 0 0;
}

.sp-angaben h2,
.sp-notizen h2 {
	font-size: 18px;
	margin: 0 0 12px;
}

.sp-angaben h3 {
	font-size: 16px;
	margin: 20px 0 8px;
}

.sp-kontakte {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 8px;
	margin: 0 0 12px;
	padding: 0;
}

.sp-kontakte li {
	flex: 0 0 72px;
}

.sp-kontakt {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	color: var(--sp-dunkel);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
}

.sp-kontakt-symbol {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	color: var(--sp-weiss);
	background: var(--sp-dunkel);
	border-radius: 50%;
}

.sp-kontakt:active .sp-kontakt-symbol {
	background: var(--sp-text);
}

.sp-kontakt-name {
	max-width: 100%;
	overflow-wrap: anywhere;
}

.sp-adresse {
	margin: 0 0 8px;
	color: var(--sp-text);
	overflow-wrap: anywhere;
}

.sp-oeffnung {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-radius: 12px;
	overflow: hidden;
}

.sp-oeffnung-zeile {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 8px 16px;
	border-top: 1px solid var(--sp-linie);
}

.sp-oeffnung-zeile:first-child {
	border-top: 0;
}

.sp-oeffnung-zeile.sp-heute {
	font-weight: 800;
	box-shadow: inset 4px 0 0 var(--sp-gold);
}

.sp-oeffnung-tag {
	overflow-wrap: anywhere;
}

.sp-oeffnung-heute {
	font-weight: 700;
	color: var(--sp-mittel);
}

.sp-oeffnung-zeit {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.sp-beschreibung {
	margin: 0 0 4px;
	color: var(--sp-dunkel);
	overflow-wrap: anywhere;
}

.sp-galerie {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
}

.sp-galerie-bild a {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 10px;
	background: var(--sp-flaeche);
}

.sp-galerie-bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* "Meine Notizen". */
.sp-notizen textarea {
	width: 100%;
	min-height: 112px;
	padding: 10px 12px;
	font: inherit;
	font-size: 16px;
	line-height: 1.5;
	color: var(--sp-dunkel);
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-radius: 10px;
	resize: vertical;
}

.sp-notizen textarea:focus {
	outline: 2px solid var(--sp-fokus);
	outline-offset: 0;
	border-color: var(--sp-fokus);
}

.sp-notizen .sp-knopf {
	margin-top: 12px;
}

/* Rote Saetze unter den Feldern beim Gast (Notiz 14) - mit Text, nie nur Farbe. */
.sp-gast input[aria-invalid="true"],
.sp-gast textarea[aria-invalid="true"] {
	border-color: var(--sp-schlecht);
}

.sp-feldfehler[hidden] {
	display: none;
}

.sp-haken + .sp-feldfehler {
	margin-top: -4px;
}

/* Die Fotos im Bereich des Inhabers (E101). */
.sp-inhaber input[type="file"] {
	width: 100%;
	max-width: 100%;
	padding: 10px 0;
	font: inherit;
	font-size: 15px;
}

.sp-fotoliste {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 12px;
	margin: 8px 0 0;
	padding: 0;
}

.sp-foto img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 10px;
	background: var(--sp-flaeche);
}

.sp-foto-fehlt {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	margin: 0;
	padding: 8px;
	font-size: 13px;
	color: var(--sp-mittel);
	text-align: center;
	background: var(--sp-flaeche);
	border-radius: 10px;
}

.sp-foto-knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 0 16px;
	margin-top: 2px;
}

.sp-foto-knoepfe form {
	margin: 0;
}

/* ------------------------ Seit 1.0.11: Menue und Feinschliff (E103 bis E111) */

/* Nur neue Klassen und Regeln, die spaeter stehen und deshalb gewinnen - keine
   Regel von vorher aendert sich. Wo ein Element per "display" gestaltet ist,
   steht [hidden] eigens dabei, sonst schlaegt die Gestaltung das Verbergen. */

.sp-unsichtbar {
	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;
}

/* Das Menue (E103, E105, E110). Am Handy unter dem Kopf ueber die volle
   Breite und bis zum unteren Rand; die Unterkante des Kopfes setzt gast.js
   beim Oeffnen, ohne JavaScript gilt die Hoehe des Kopfes (72 Punkte). */
.sp-menue-kreuz {
	display: none;
}

.sp-menue[open] .sp-menue-auf {
	display: none;
}

.sp-menue[open] .sp-menue-kreuz {
	display: block;
}

.sp-menue-panel {
	position: fixed;
	top: var(--sp-kopf-unten, 72px);
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	border-bottom: 0;
	box-shadow: none;
}

.sp-menue-kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	max-width: 560px;
	margin: 0 auto;
	padding: 14px 16px 4px;
}

.sp-menue-titel {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sp-mittel);
}

.sp-menue-zu {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 12px;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--sp-dunkel);
	background: var(--sp-flaeche);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.sp-menue-zu[hidden] {
	display: none;
}

.sp-menue-punkt[aria-current="page"] {
	background: var(--sp-gold-hell);
}

html.sp-menue-offen {
	overflow: hidden;
}

html:has(.sp-menue[open]) {
	overflow: hidden;
}

/* Am Rechner: eine Leiste von 380 Punkten von rechts, ueber die volle Hoehe,
   dahinter abgedunkelt. Die dunkle Flaeche gehoert zum Knopf (summary) - ein
   Klick darauf schliesst das Menue, auch ohne JavaScript. */
@media (min-width: 768px) {
	.sp-menue[open] > summary::before {
		content: "";
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 999;
		background: rgba(15, 23, 42, 0.45);
		cursor: default;
	}

	.sp-menue-panel {
		top: 0;
		left: auto;
		width: 380px;
		max-width: 100%;
		border-left: 4px solid var(--sp-gold);
		box-shadow: -16px 0 40px rgba(15, 23, 42, 0.18);
		animation: sp-menue-rein 0.18s ease-out;
	}

	.sp-menue-kopf {
		padding: 20px 20px 8px;
	}

	.sp-menue-liste {
		padding: 4px 20px 24px;
	}
}

@keyframes sp-menue-rein {
	from {
		transform: translateX(100%);
	}

	to {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sp-menue-panel {
		animation: none;
	}
}

/* Oeffnungszeiten: "Fuer alle Tage uebernehmen" in der Zeile Montag (E108). */
.sp-zeiten-alle {
	flex: 1 1 100%;
	padding: 2px 0 0;
	text-align: left;
}

/* Fotos hochladen (E109): das eigene Feld. Ohne JavaScript steht darin das
   Feld des Browsers; mit JavaScript liegt es unsichtbar ueber der ganzen
   Flaeche - antippen oeffnet die Auswahl, hineinziehen legt die Fotos ab. */
.sp-ablage {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 24px 16px;
	text-align: center;
	background: var(--sp-weiss);
	border: 2px dashed var(--sp-linie);
	border-radius: 14px;
}

.sp-ablage-symbol {
	color: var(--sp-gold-dunkel);
}

.sp-ablage-titel {
	font-size: 17px;
	font-weight: 800;
	color: var(--sp-dunkel);
	cursor: pointer;
}

.sp-ablage-ziehen {
	display: none;
	color: var(--sp-mittel);
}

@media (hover: hover) and (pointer: fine) {
	.sp-ablage-ziehen {
		display: block;
	}
}

.sp-ablage-zahl {
	margin-top: 6px;
	font-weight: 700;
	color: var(--sp-text);
}

.sp-ablage-hinweis {
	font-size: 13px;
	color: var(--sp-mittel);
}

.sp-ablage input[type="file"] {
	max-width: 100%;
	margin-top: 10px;
}

.sp-ablage.sp-ablage-js input[type="file"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.sp-ablage.sp-ablage-js:focus-within {
	outline: 3px solid var(--sp-fokus);
	outline-offset: 2px;
}

.sp-ablage.sp-ablage-ueber {
	background: var(--sp-gold-hell);
	border-color: var(--sp-gold);
}

.sp-ablage-liste {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
}

.sp-ablage-liste[hidden],
.sp-feldfehler[hidden] {
	display: none;
}

.sp-ablage-liste li {
	position: relative;
}

.sp-ablage-liste img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--sp-flaeche);
	border-radius: 8px;
}

.sp-ablage-weg {
	position: absolute;
	top: 4px;
	right: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	color: #ffffff;
	background: rgba(15, 23, 42, 0.72);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.sp-foto-formular .sp-knopf[disabled] {
	opacity: 0.6;
	cursor: wait;
}

/* Die Kacheln der Fotos: x oben rechts, Pfeil oben links, Griff unten rechts.
   Gezogen wird mit der Maus am Foto, mit dem Finger am Griff - so bleibt das
   Scrollen ueber die Fotos moeglich. */
@media (min-width: 768px) {
	.sp-fotoliste {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.sp-foto {
	position: relative;
	border-radius: 10px;
}

.sp-foto img {
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
}

.sp-foto-form-weg,
.sp-foto-form-hoch {
	margin: 0;
}

.sp-foto-weg,
.sp-foto-hoch {
	position: absolute;
	top: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	color: #ffffff;
	background: rgba(15, 23, 42, 0.72);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
	cursor: pointer;
}

.sp-foto-weg {
	right: 6px;
}

.sp-foto-hoch {
	left: 6px;
}

.sp-foto-griff {
	position: absolute;
	right: 6px;
	bottom: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	color: var(--sp-dunkel);
	background: rgba(255, 255, 255, 0.94);
	border-radius: 10px;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
	touch-action: none;
	cursor: grab;
}

.sp-foto-griff[hidden] {
	display: none;
}

.sp-fotoliste.sp-fotos-ziehbar .sp-foto {
	cursor: grab;
}

.sp-fotoliste.sp-fotos-zieht {
	-webkit-user-select: none;
	user-select: none;
}

.sp-foto.sp-foto-zieht {
	z-index: 5;
	opacity: 0.92;
	box-shadow: 0 14px 30px rgba(15, 23, 42, 0.28);
	pointer-events: none;
	cursor: grabbing;
}

/* Beim Gast: Balken zum Aufklappen (E111). */
.sp-aufklapp {
	margin: 12px 0 0;
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-radius: 12px;
}

.sp-aufklapp > summary {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 52px;
	padding: 12px 44px 12px 16px;
	font-weight: 700;
	color: var(--sp-dunkel);
	list-style: none;
	cursor: pointer;
}

.sp-aufklapp > summary::-webkit-details-marker {
	display: none;
}

.sp-aufklapp > summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 18px;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--sp-mittel);
	border-bottom: 2px solid var(--sp-mittel);
	transform: translateY(-70%) rotate(45deg);
}

.sp-aufklapp[open] > summary::after {
	transform: translateY(-30%) rotate(-135deg);
}

.sp-aufklapp-zusatz {
	margin-left: auto;
	font-size: 14px;
	font-weight: 600;
	color: var(--sp-mittel);
	text-align: right;
}

.sp-aufklapp > :not(summary) {
	margin-right: 16px;
	margin-left: 16px;
}

.sp-aufklapp > :last-child {
	margin-bottom: 16px;
}

.sp-notizen .sp-aufklapp {
	margin-top: 0;
}

/* --------------- Seit 1.0.12: Google-Bewertung und Rueckmeldung (E113 bis E117) */
/* Nur neue Klassen - keine vorhandene Regel aendert sich. Google-Blau steht
   genau an einem Knopf, dem zu Google (Dokument 01, 1.4 und 4.6). Die Sterne
   der Rueckmeldung sind dunkel: Gold heisst Punkte, Blau heisst Google. */

.sp-meinung {
	margin: 24px 0;
}

.sp-meinung h2 {
	font-size: 18px;
	margin: 0 0 4px;
}

.sp-meinung .sp-knopf {
	margin-top: 12px;
}

/* Die zwei Knoepfe sind immer gleich gross - auch am Rechner (E114). */
.sp-meinung > .sp-knopf-google,
.sp-rueckmeldung > summary.sp-knopf {
	width: 100%;
}

.sp-knopf-google {
	gap: 10px;
	color: var(--sp-weiss);
	background: #4285f4;
	border-color: #4285f4;
}

.sp-knopf-google:hover {
	background: #3367d6;
	border-color: #3367d6;
}

.sp-knopf-google svg {
	flex: 0 0 auto;
}

.sp-rueckmeldung > summary {
	list-style: none;
}

.sp-rueckmeldung > summary::-webkit-details-marker {
	display: none;
}

.sp-rueckmeldung > summary::after {
	content: "";
	width: 8px;
	height: 8px;
	margin-left: 12px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

.sp-rueckmeldung[open] > summary::after {
	transform: translateY(2px) rotate(-135deg);
}

.sp-rueckmeldung-formular {
	margin: 12px 0 0;
	padding: 16px;
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-radius: 12px;
}

.sp-rueckmeldung-formular > .sp-klein:first-of-type {
	margin-top: 0;
}

.sp-sterne {
	margin: 12px 0 16px;
	padding: 0;
	border: 0;
	min-width: 0;
}

.sp-sterne legend {
	padding: 0;
	margin-bottom: 6px;
	font-weight: 700;
}

.sp-sterne-reihe {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 4px;
}

.sp-sterne-reihe input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.sp-sterne-reihe label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	cursor: pointer;
	color: var(--sp-linie);
}

.sp-sterne-reihe label svg {
	fill: currentColor;
	stroke: var(--sp-leise);
}

.sp-sterne-reihe input:checked ~ label,
.sp-sterne-reihe label:hover,
.sp-sterne-reihe label:hover ~ label {
	color: var(--sp-dunkel);
}

.sp-sterne-reihe input:checked ~ label svg,
.sp-sterne-reihe label:hover svg,
.sp-sterne-reihe label:hover ~ label svg {
	stroke: var(--sp-dunkel);
}

.sp-sterne-reihe input:focus-visible + label {
	outline: 2px solid var(--sp-fokus);
	outline-offset: 2px;
	border-radius: 8px;
}

.sp-rueckmeldung-formular label[for="sp-rm-text"] {
	display: block;
	font-weight: 700;
	margin-bottom: 6px;
}

.sp-rueckmeldung-formular textarea {
	width: 100%;
	min-height: 112px;
	padding: 10px 12px;
	font: inherit;
	font-size: 16px;
	line-height: 1.5;
	color: var(--sp-dunkel);
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-radius: 10px;
	resize: vertical;
}

.sp-rueckmeldung-formular textarea:focus {
	outline: 2px solid var(--sp-fokus);
	outline-offset: 0;
	border-color: var(--sp-fokus);
}

.sp-meinung-hinweis {
	margin: 12px 0 0;
}

/* Im Bereich des Inhabers: die Liste der Rueckmeldungen. */
.sp-rm-liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-rm {
	margin: 0 0 12px;
	padding: 14px 16px;
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-radius: 12px;
}

.sp-rm-neu {
	border-left: 4px solid var(--sp-dunkel);
}

.sp-rm-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	margin: 0;
	font-size: 14px;
	color: var(--sp-mittel);
}

.sp-rm-marke {
	padding: 0 8px;
	font-weight: 700;
	color: var(--sp-weiss);
	background: var(--sp-dunkel);
	border-radius: 999px;
}

.sp-rm-sterne {
	color: var(--sp-dunkel);
	letter-spacing: 1px;
}

.sp-rm-text {
	margin: 8px 0 0;
	overflow-wrap: anywhere;
}

/* Der Streifen "Neue Rueckmeldung" - unten, im Bereich des Daumens. */
.sp-neues {
	position: fixed;
	right: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	left: 16px;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	max-width: 560px;
	margin: 0 auto;
	padding: 12px 16px;
	font-weight: 700;
	color: var(--sp-weiss);
	background: var(--sp-dunkel);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
}

.sp-neues[hidden] {
	display: none;
}

.sp-neues a {
	flex: 0 0 auto;
	padding: 8px 14px;
	color: var(--sp-dunkel);
	text-decoration: none;
	background: var(--sp-gold);
	border-radius: 10px;
}

/* ------------------------------------------ Seit 1.0.14: Der Ruf (E129 bis E134) */
/* Nur neue Klassen - keine vorhandene Regel aendert sich. Die zwei Knoepfe
   sind gleich breit wie die von "Ihre Meinung". Kein Blau, kein Gruen: Die
   Kanalfarben bleiben bei ihren Knoepfen unter "Ueber diesen Betrieb". */

.sp-hilfe {
	margin: 24px 0;
}

.sp-hilfe h2 {
	font-size: 18px;
	margin: 0 0 4px;
}

.sp-hilfe-formular label[for="sp-ruf-platz"] {
	display: block;
	margin: 8px 0 6px;
	font-weight: 700;
}

.sp-hilfe-knoepfe {
	display: flex;
	flex-direction: column;
}

.sp-hilfe-knoepfe .sp-knopf {
	width: 100%;
	margin-top: 12px;
}

.sp-ruf-kontakt {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin-top: 16px;
	padding: 14px 16px;
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-radius: 12px;
}

.sp-ruf-kontakt .sp-klein {
	flex: 1 0 100%;
	margin: 0;
}

.sp-ruf-kontakt .sp-knopf {
	flex: 1 1 140px;
	margin-top: 0;
}

/* Die Liste der Rufe - auf der Personal-Seite und im Bereich des Inhabers. */
.sp-rufe {
	margin: 0 0 24px;
}

.sp-rufe h2 {
	font-size: 18px;
	margin: 0 0 12px;
}

.sp-ruf-liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-ruf {
	margin: 0 0 12px;
	padding: 14px 16px;
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-left: 4px solid var(--sp-dunkel);
	border-radius: 12px;
}

.sp-ruf-unterwegs,
.sp-ruf-inhaber {
	border-left-color: var(--sp-linie);
}

.sp-ruf-inhaber.sp-ruf-offen {
	border-left-color: var(--sp-dunkel);
}

.sp-ruf-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0;
}

.sp-ruf-platz {
	font-size: 18px;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.sp-ruf-gast {
	font-weight: 700;
}

.sp-ruf-zeit,
.sp-ruf-stand {
	font-size: 14px;
	color: var(--sp-mittel);
}

.sp-ruf-inhaber .sp-ruf-kopf .sp-ruf-platz {
	font-size: 16px;
}

.sp-ruf-art {
	padding: 0 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--sp-weiss);
	background: var(--sp-dunkel);
	border-radius: 999px;
}

.sp-ruf-stand {
	margin: 6px 0 0;
}

.sp-ruf-knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
}

.sp-ruf-knoepfe form {
	flex: 1 1 140px;
}

.sp-ruf-knoepfe .sp-knopf,
.sp-ruf-form .sp-knopf {
	width: 100%;
	margin-top: 12px;
}

/* Der Streifen der Rufe: Steht der Streifen der Rueckmeldungen schon da, rueckt
   er darueber. */
.sp-neues:not([hidden]) ~ .sp-neues-ruf {
	bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

/* ------------------------- Seit 1.0.15: Reservierung und Termine (E136 bis E142) */
/* Nur neue Klassen - keine vorhandene Regel aendert sich. Gold nur fuer den
   Hinweis auf eine neue Antwort; bestaetigt gruen, ausgebucht rot - immer mit
   Text, nie nur als Farbe. Die Karten sind dieselben beim Gast, in "Meine
   Termine" und im Bereich des Inhabers. */

.sp-reservierung {
	margin: 24px 0;
	scroll-margin-top: 16px;
}

.sp-reservierung h2,
.sp-termine-gruppe h2,
.sp-res-gruppe h2 {
	font-size: 18px;
	margin: 0 0 8px;
}

.sp-res-meldung,
.sp-res-fehler {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-radius: 10px;
	background: var(--sp-weiss);
	border-left: 4px solid var(--sp-gut);
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.sp-res-fehler {
	border-left-color: var(--sp-schlecht);
}

.sp-res-karten {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 16px;
}

.sp-res-karte {
	padding: 14px 16px;
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-left: 4px solid var(--sp-dunkel);
	border-radius: 12px;
	overflow-wrap: anywhere;
	scroll-margin-top: 16px;
}

.sp-res-karte.sp-res-bestaetigt {
	border-left-color: var(--sp-gut);
}

.sp-res-karte.sp-res-ausgebucht,
.sp-res-karte.sp-res-abgesagt {
	border-left-color: var(--sp-schlecht);
}

.sp-res-karte.sp-res-vorbei {
	border-left-color: var(--sp-linie);
	color: var(--sp-text);
}

.sp-res-karte > p {
	margin: 0 0 6px;
}

.sp-res-betrieb,
.sp-res-zeile {
	font-weight: 700;
}

.sp-res-betrieb + .sp-res-zeile {
	font-weight: 400;
}

.sp-res-name {
	font-size: 18px;
	font-weight: 700;
}

.sp-res-stand {
	font-size: 14px;
	color: var(--sp-mittel);
}

.sp-res-bestaetigt .sp-res-stand {
	color: #047857;
	font-weight: 700;
}

.sp-res-ausgebucht .sp-res-stand {
	color: #b91c1c;
	font-weight: 700;
}

/* Nur der Absatz mit der vorgeschlagenen Zeit - die Karte selbst traegt im
   Stand "vorschlag" dieselbe Klasse. */
p.sp-res-vorschlag {
	font-weight: 700;
}

.sp-res-satz {
	padding: 8px 12px;
	background: var(--sp-flaeche);
	border-radius: 8px;
}

.sp-res-neu-marke {
	display: inline-block;
	padding: 0 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--sp-dunkel);
	background: var(--sp-gold-hell);
	border: 1px solid var(--sp-gold);
	border-radius: 999px;
}

.sp-res-verlauf {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--sp-text);
}

details.sp-res-verlauf > summary {
	cursor: pointer;
	color: var(--sp-mittel);
}

.sp-res-verlauf ol,
ol.sp-res-verlauf {
	margin: 6px 0 0;
	padding-left: 18px;
}

.sp-res-verlauf li {
	margin: 0 0 4px;
}

.sp-res-wann {
	color: var(--sp-mittel);
}

.sp-res-wer {
	font-weight: 700;
}

.sp-res-text {
	display: block;
	color: var(--sp-dunkel);
}

.sp-res-knopf-formular .sp-knopf,
.sp-res-antwort .sp-knopf,
.sp-res-formular .sp-knopf {
	width: 100%;
	margin-top: 12px;
}

.sp-res-knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
}

.sp-res-knoepfe .sp-knopf {
	flex: 1 1 140px;
	margin-top: 12px;
}

.sp-res-absagen,
.sp-res-andere,
.sp-res-vorschlagen {
	margin: 12px 0 0;
}

.sp-res-absagen > summary,
.sp-res-andere > summary,
.sp-res-vorschlagen > summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--sp-text);
}

.sp-res-absagen > summary {
	color: #b91c1c;
}

/* Seit 1.3.2 (E488, E404): der Grund der Absage und die ausgegrauten Einstellungen der
   Kontroll-Liste - ohne den Rahmen des Browsers, wie jede Gruppe im Plugin. */
.sp-res-gruende,
.sp-res-aus {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.sp-res-gruende legend {
	padding: 0;
}

.sp-res-aus {
	opacity: 0.55;
}

.sp-res-neu > summary {
	width: 100%;
	list-style: none;
}

.sp-res-neu > summary::-webkit-details-marker {
	display: none;
}

.sp-res-formular {
	margin: 12px 0 0;
	padding: 16px;
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-radius: 12px;
}

.sp-res-karte .sp-res-formular {
	padding: 0;
	border: 0;
}

/* Datum, Uhrzeit, Zahlen und Texte in den Formularen der Reservierung - so gross
   wie die anderen Felder (48 px hoch, volle Breite), beim Gast und beim Inhaber. */
.sp-reservierung input[type="date"],
.sp-reservierung input[type="time"],
.sp-reservierung input[type="number"],
.sp-reservierung textarea,
.sp-res-einstellungen input[type="number"],
.sp-res-vorschlagen input[type="date"] {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	font: inherit;
	font-size: 16px;
	color: var(--sp-dunkel);
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-radius: 10px;
}

.sp-reservierung textarea {
	min-height: 96px;
	line-height: 1.5;
	resize: vertical;
}

.sp-reservierung input[type="date"]:focus,
.sp-reservierung input[type="time"]:focus,
.sp-reservierung input[type="number"]:focus,
.sp-reservierung textarea:focus,
.sp-res-einstellungen input[type="number"]:focus,
.sp-res-vorschlagen input[type="date"]:focus {
	outline: 2px solid var(--sp-fokus);
	outline-offset: 0;
	border-color: var(--sp-fokus);
}

/* Ein Feld mit rotem Satz bleibt rot umrandet - auch mit den Regeln oben. */
.sp-reservierung input[aria-invalid="true"],
.sp-reservierung textarea[aria-invalid="true"],
.sp-res-einstellungen input[aria-invalid="true"],
.sp-res-einstellungen select[aria-invalid="true"],
.sp-res-vorschlagen input[aria-invalid="true"],
.sp-res-antwort textarea[aria-invalid="true"] {
	border-color: var(--sp-schlecht);
}

.sp-res-gesundheit,
.sp-res-pdpa {
	margin: 8px 0 0;
}

/* Der goldene Hinweis auf "Meine Punkte" (E138). */
.sp-res-hinweis {
	margin: 0 0 20px;
	padding: 12px 16px;
	font-weight: 700;
	background: var(--sp-gold-hell);
	border-left: 4px solid var(--sp-gold);
	border-radius: 10px;
}

.sp-res-hinweis a {
	color: var(--sp-dunkel);
	white-space: nowrap;
}

.sp-termine-gruppe {
	margin: 24px 0 0;
}

.sp-termine-gruppe .sp-knopf {
	width: 100%;
	margin-top: 8px;
}

/* Im Bereich des Inhabers. */
.sp-res-einstellungen {
	margin: 0 0 24px;
	padding: 12px 16px;
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-radius: 12px;
}

.sp-res-einstellungen > summary,
.sp-res-gruppe-vergangen > summary {
	cursor: pointer;
	font-weight: 700;
}

.sp-res-gruppe {
	margin: 0 0 24px;
}

/* Der Streifen der Reservierungen: Stehen die anderen schon da, rueckt er darueber. */
.sp-neues:not([hidden]) ~ .sp-neues-reservierung {
	bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

.sp-neues:not([hidden]) ~ .sp-neues-ruf:not([hidden]) ~ .sp-neues-reservierung {
	bottom: calc(160px + env(safe-area-inset-bottom, 0px));
}

/* ------------------------- Seit 1.0.16: Personal, Zimmer, WhatsApp (E152 bis E157) */

/* Die Antwort des Betriebs auf eine Anfrage ist keine Buchung - ohne gruenen Haken (E156). */
.sp-fenster[data-art="reservierung"] .sp-fenster-haken {
	display: none;
}

/* Das Haekchen fuer WhatsApp bei einer neuen Anfrage und sein Satz (E154). */
.sp-res-whatsapp-haken {
	margin-bottom: 4px;
}

.sp-res-whatsapp-satz {
	margin: 0 0 8px;
}

/* Die Erlaubnis auf der Karte des Gastes, der Knopf auf der Karte des Inhabers. */
.sp-res-whatsapp {
	margin: 12px 0 0;
	padding: 10px 12px;
	background: var(--sp-flaeche);
	border-radius: 8px;
}

.sp-res-whatsapp > p.sp-klein {
	margin: 6px 0 0;
}

.sp-res-whatsapp > p.sp-klein:first-child {
	margin-top: 0;
}

.sp-res-whatsapp .sp-res-whatsapp-knopf {
	width: 100%;
	margin-top: 0;
}

.sp-res-whatsapp .sp-res-knopf-formular {
	margin: 6px 0 0;
}

/* Die Zeile "Reservierungen · N neu" auf "Punkte buchen" (E152). */
.sp-res-hinweis-personal {
	margin: 0 0 16px;
}

/* Die Felder der Karten auf der Personal-Seite - wie die Felder der Reservierung
   beim Gast (48 px hoch, volle Breite), nur hier (E152). */
.sp-personal .sp-res-karte input[type="date"],
.sp-personal .sp-res-karte input[type="time"],
.sp-personal .sp-res-karte textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	font: inherit;
	font-size: 16px;
	color: var(--sp-dunkel);
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-radius: 10px;
}

.sp-personal .sp-res-karte textarea {
	min-height: 96px;
	line-height: 1.5;
	resize: vertical;
}

.sp-personal .sp-res-karte input[type="date"]:focus,
.sp-personal .sp-res-karte input[type="time"]:focus,
.sp-personal .sp-res-karte textarea:focus {
	outline: 2px solid var(--sp-fokus);
	outline-offset: 0;
	border-color: var(--sp-fokus);
}

/* ------------------- Seit 1.0.17: Angebote, Aktionen, Top-Listen, Google (E159 bis E171) */
/* Nur neue Klassen - keine vorhandene Regel aendert sich. Die Farben eines Banners
   und des Kopfes einer Karte kommen aus dem Stil des Betriebs (geprueft, E163);
   alles andere bleibt in den Farben der Seite. */

/* "Auf Google bewerten" ohne Anmeldung - mit Abstand zum Formular darueber (E167). */
.sp-meinung-google {
	margin-top: 32px;
}

/* Die Angebote beim Gast (E161). */
.sp-angebote {
	margin: 32px 0 0;
}

.sp-angebote h2,
.sp-angebote-gruppe h2 {
	font-size: 18px;
	margin: 0 0 12px;
}

.sp-angebote-gruppe {
	margin: 24px 0 0;
}

.sp-angebote-liste {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}

.sp-angebot {
	overflow: hidden;
	background: var(--sp-weiss);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.sp-angebot-bild {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--sp-flaeche);
}

.sp-angebot-inhalt {
	padding: 14px 16px 16px;
}

.sp-angebot-badge {
	display: inline-block;
	max-width: 100%;
	margin: 0 0 6px;
	padding: 2px 10px;
	font-size: 13px;
	font-weight: 700;
	color: var(--sp-dunkel);
	background: var(--sp-gold);
	border-radius: 999px;
	overflow-wrap: anywhere;
}

.sp-angebot-titel {
	margin: 0 0 4px;
	font-size: 18px;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.sp-angebot-text {
	margin: 0 0 8px;
	color: var(--sp-text);
	overflow-wrap: anywhere;
}

.sp-angebot-preis {
	margin: 8px 0 0;
	font-weight: 700;
}

.sp-preis {
	font-size: 18px;
}

.sp-preis-vorher {
	font-size: 14px;
	font-weight: 400;
	color: var(--sp-mittel);
}

.sp-angebot-gueltig {
	margin: 4px 0 0;
	font-size: 14px;
	color: var(--sp-mittel);
}

.sp-angebot .sp-nicht-uebersetzt {
	margin: 8px 0 0;
}

.sp-angebote-ziel .sp-knopf {
	margin-top: 12px;
}

/* Die Region (E162): eine Zeile, darunter die sechs Knoepfe zum Aufklappen. */
.sp-region {
	margin: 0 0 20px;
}

.sp-region-zeile {
	margin: 0;
	color: var(--sp-text);
}

.sp-region-wahl > summary {
	display: inline-block;
	list-style: none;
}

.sp-region-wahl > summary::-webkit-details-marker {
	display: none;
}

.sp-region-knoepfe {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-top: 8px;
}

.sp-region-knoepfe .sp-knopf {
	min-height: 48px;
	margin-top: 0;
	padding: 8px 10px;
	font-size: 15px;
}

.sp-region-knoepfe .sp-knopf[aria-pressed="true"] {
	color: var(--sp-weiss);
	background: var(--sp-dunkel);
}

/* Die vier Reiter der Top-Listen (E166) - sie brechen um, statt die Seite zu verbreitern. */
.sp-reiter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
}

.sp-reiter-punkt {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 14px;
	font-size: 15px;
	font-weight: 700;
	color: var(--sp-dunkel);
	text-decoration: none;
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-radius: 999px;
}

.sp-reiter-punkt[aria-current="page"] {
	color: var(--sp-weiss);
	background: var(--sp-dunkel);
	border-color: var(--sp-dunkel);
}

/* Die quadratischen Banner (E166): zwei Spalten, am Rechner drei. Seit 2.3.1 (E1784) ganz gezeigt: Titel und Text ohne Kuerzung -
   die Flaeche bleibt quadratisch und waechst nur, wenn der Text laenger ist (ohne overflow: hidden); das Bild bleibt 42 % der Breite hoch. */
.sp-banner-liste {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-banner {
	min-width: 0;
}

.sp-banner-flaeche {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	aspect-ratio: 1 / 1;
	padding: 12px;
	text-decoration: none;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.sp-banner-bild {
	display: block;
	flex: 0 0 auto;
	width: calc(100% + 24px);
	aspect-ratio: 50 / 21;
	height: 42cqw;
	min-height: 0;
	margin: -12px -12px 8px;
	object-fit: cover;
	border-radius: 12px 12px 0 0;
}

.sp-banner-titel {
	display: block;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.sp-banner-text {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.sp-banner-name {
	margin-top: auto;
	padding-top: 6px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	opacity: 0.9;
	overflow-wrap: anywhere;
}

.sp-banner-hinweis {
	font-size: 11px;
	line-height: 1.3;
	opacity: 0.85;
}

@media (min-width: 640px) {
	.sp-banner-liste {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Die Karten der Top-Listen (E166): Kopf in den Farben des Betriebs, darunter Adresse und Knoepfe. */
.sp-top-liste {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}

.sp-top-karte {
	overflow: hidden;
	background: var(--sp-weiss);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.sp-top-kopf {
	padding: 16px;
}

.sp-top-bild {
	display: block;
	width: calc(100% + 32px);
	max-height: 160px;
	margin: -16px -16px 12px;
	object-fit: cover;
}

.sp-top-name {
	margin: 0;
	font-size: 20px;
	line-height: 1.3;
	color: inherit;
	overflow-wrap: anywhere;
}

.sp-top-titel {
	margin: 4px 0 0;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.sp-top-text {
	margin: 4px 0 0;
	font-size: 15px;
	overflow-wrap: anywhere;
}

.sp-top-koerper {
	padding: 12px 16px 16px;
}

.sp-top-koerper .sp-kontakte {
	margin-bottom: 0;
}

.sp-top-koerper .sp-nicht-uebersetzt {
	margin: 0 0 8px;
}

/* Beim Inhaber: der Hinweis auf "Mein Betrieb", solange der Google-Link fehlt (E168). */
.sp-google-fehlt {
	margin: 0 0 20px;
	padding: 12px 16px;
	font-weight: 700;
	background: var(--sp-gold-hell);
	border-left: 4px solid var(--sp-gold);
	border-radius: 10px;
}

.sp-google-fehlt a {
	color: var(--sp-dunkel);
	white-space: nowrap;
}

/* Beim Inhaber: "Neues Angebot" zum Aufklappen und die Liste (E160). */
.sp-angebot-neu {
	margin: 0 0 24px;
}

.sp-angebot-neu > summary {
	list-style: none;
}

.sp-angebot-neu > summary::-webkit-details-marker {
	display: none;
}

.sp-angebot-formular {
	margin: 12px 0 0;
	padding: 16px;
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-radius: 12px;
}

.sp-inhaber .sp-angebot-formular textarea {
	min-height: 96px;
}

.sp-angebot-formular input[type="date"] {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	font: inherit;
	font-size: 16px;
	color: var(--sp-dunkel);
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-radius: 10px;
}

.sp-angebot-formular input[type="date"]:focus {
	outline: 2px solid var(--sp-fokus);
	outline-offset: 0;
	border-color: var(--sp-fokus);
}

.sp-angebot-paar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 0 12px;
}

.sp-angebot-paar > div {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sp-angebot-liste {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.sp-angebot-zeile {
	padding: 12px 0;
	border-top: 1px solid var(--sp-linie);
}

.sp-angebot-zeile:first-child {
	border-top: 0;
}

.sp-angebot-kurz {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.sp-angebot-klein {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 8px;
}

.sp-angebot-kurz-text {
	flex: 1 1 auto;
	min-width: 0;
}

.sp-angebot-kurz-text p {
	overflow-wrap: anywhere;
}

.sp-angebot-name {
	margin: 0;
	font-weight: 700;
}

.sp-angebot-stand {
	margin: 2px 0 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--sp-mittel);
}

.sp-angebot-zeile[data-zustand="sichtbar"] .sp-angebot-stand {
	color: #047857;
}

.sp-angebot-kurz-text .sp-klein {
	margin: 2px 0 0;
}

.sp-angebot-aendern,
.sp-angebot-loeschen {
	margin: 4px 0 0;
}

.sp-angebot-aendern > summary,
.sp-angebot-loeschen > summary {
	display: inline-block;
	list-style: none;
}

.sp-angebot-aendern > summary::-webkit-details-marker,
.sp-angebot-loeschen > summary::-webkit-details-marker {
	display: none;
}

.sp-angebot-loeschen > summary {
	color: #b91c1c;
}

.sp-angebot-loeschen .sp-knopf {
	margin-top: 8px;
}

/* Die Wahl des Fotos - nur die eigenen aus "Fotos" (E164). */
.sp-foto-feld {
	min-width: 0;
	margin: 16px 0 0;
	padding: 0;
	border: 0;
}

.sp-foto-feld legend {
	margin: 0 0 4px;
	padding: 0;
}

.sp-foto-wahl {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.sp-foto-wahl-punkt {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 48px;
	padding: 6px 8px;
	background: var(--sp-weiss);
	border: 2px solid var(--sp-linie);
	border-radius: 10px;
	cursor: pointer;
}

.sp-foto-wahl-punkt input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--sp-dunkel);
}

.sp-foto-wahl-punkt img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 6px;
}

.sp-foto-wahl-punkt:has(input:checked) {
	border-color: var(--sp-dunkel);
}

/* Beim Inhaber: Banner und Top-Liste gestalten (E160, E163). */
.sp-aktion-stand {
	margin: 4px 0 12px;
	font-weight: 700;
	color: var(--sp-mittel);
}

.sp-aktion-stand[data-zustand="laeuft"] {
	color: #047857;
}

.sp-aktion-vorschau .sp-feldname {
	margin-top: 0;
}

.sp-banner-vorschau {
	max-width: 220px;
	margin: 0 0 8px;
}

.sp-top-vorschau {
	margin: 0 0 8px;
	border: 1px solid var(--sp-linie);
	box-shadow: none;
}

.sp-farben {
	display: flex;
	flex-wrap: wrap;
	gap: 0 16px;
}

.sp-farbe {
	display: flex;
	flex: 1 1 140px;
	flex-direction: column;
	justify-content: flex-end;
	min-width: 0;
}

.sp-gast input[type="color"] {
	width: 100%;
	min-height: 48px;
	padding: 4px;
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-radius: 10px;
	cursor: pointer;
}

.sp-aktion-region {
	margin: 0 0 16px;
}

.sp-inhaber .sp-region-zeile {
	margin: 0 0 16px;
}

/* ------------- Seit 1.1.0: Team-Bereich und Treueprogramm (E172 bis E194) */

/* Nur unter .sp-team bzw. mit neuen Klassen - keine vorhandene Regel aendert
   sich. Das Treueprogramm steht beim Inhaber und im Team mit denselben Klassen. */

.sp-team input[type="url"],
.sp-team input[type="time"],
.sp-team textarea {
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	font: inherit;
	font-size: 16px;
	color: var(--sp-dunkel);
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-radius: 10px;
}

.sp-team textarea {
	min-height: 180px;
	line-height: 1.5;
	resize: vertical;
}

.sp-team textarea:focus {
	outline: 2px solid var(--sp-fokus);
	outline-offset: 0;
	border-color: var(--sp-fokus);
}

.sp-team .sp-angemeldet-name {
	overflow-wrap: anywhere;
}

.sp-team [aria-invalid="true"] {
	border-color: var(--sp-schlecht);
}

.sp-abschnitt-titel {
	font-size: 18px;
	margin: 24px 0 8px;
}

.sp-team-abschnitt,
.sp-treue,
.sp-team-kunde {
	margin: 0 0 16px;
	padding: 16px;
	background: var(--sp-weiss);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.sp-team-abschnitt .sp-abschnitt-titel,
.sp-treue .sp-abschnitt-titel {
	margin-top: 0;
}

.sp-team-kunde-name {
	font-size: 18px;
	margin: 0 0 4px;
	overflow-wrap: anywhere;
}

.sp-team-kunde-name a {
	color: inherit;
}

.sp-team-betriebe,
.sp-team-schritte,
.sp-team-mitglieder,
.sp-treue-beispiele,
.sp-treue-leiter {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}

.sp-team-betriebe li {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	align-items: baseline;
	padding: 8px 0;
	border-top: 1px solid var(--sp-linie);
	overflow-wrap: anywhere;
}

.sp-team-ort,
.sp-team-stand,
.sp-team-rolle,
.sp-team-zustand,
.sp-team-schritt-stand,
.sp-treue-art {
	color: var(--sp-mittel);
	font-size: 14px;
}

.sp-team-stand {
	margin-left: auto;
}

.sp-team-tarif {
	margin: 0 0 16px;
	color: var(--sp-mittel);
}

.sp-team-zugang {
	font-weight: 700;
	overflow-wrap: anywhere;
}

.sp-team-schritt {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 4px 12px;
	align-items: center;
	padding: 10px 0;
	border-top: 1px solid var(--sp-linie);
}

.sp-team-schritt-name::before {
	content: "\25CB\00a0";
	color: var(--sp-leise);
}

.sp-team-schritt[data-zustand="erledigt"] .sp-team-schritt-name::before {
	content: "\2713\00a0";
	color: var(--sp-gut);
	font-weight: 700;
}

.sp-team-schritt .sp-klein {
	grid-column: 1 / -1;
	margin: 0;
}

.sp-team-schritt form {
	margin: 0;
}

.sp-team-schritt .sp-knopf,
.sp-treue-weg .sp-knopf {
	width: auto;
	min-height: 40px;
	margin: 0;
	padding: 6px 14px;
}

.sp-team-qr-bild {
	max-width: 240px;
}

.sp-team-qr-bild svg {
	display: block;
	width: 100%;
	height: auto;
}

.sp-team-mitglied {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	align-items: baseline;
	padding: 10px 0;
	border-top: 1px solid var(--sp-linie);
	overflow-wrap: anywhere;
}

.sp-team-mitglied[data-zustand="gesperrt"] {
	opacity: 0.7;
}

.sp-team-rechte,
.sp-treue-wahl {
	margin: 16px 0 0;
	padding: 0;
	border: 0;
}

.sp-treue-hinweis {
	padding-left: 12px;
	border-left: 4px solid var(--sp-gold);
}

.sp-treue-satz,
.sp-treue-schwelle,
.sp-treue-voll {
	font-weight: 700;
}

.sp-treue-satz {
	margin: 0 0 8px;
}

.sp-treue-beispiele li {
	padding: 4px 0;
	font-variant-numeric: tabular-nums;
}

.sp-treue-eintrag {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 12px;
	padding: 10px 0;
	border-top: 1px solid var(--sp-linie);
}

.sp-treue-art,
.sp-treue-schwelle,
.sp-treue-text {
	grid-column: 1;
	overflow-wrap: anywhere;
}

.sp-treue-knoepfe {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	grid-column: 2;
	grid-row: 1 / span 3;
}

.sp-treue-weg > summary,
.sp-treue-uebersetzung > summary {
	cursor: pointer;
	list-style: none;
	color: var(--sp-mittel);
	font-size: 14px;
	padding: 6px 0;
}

.sp-treue-weg > summary::-webkit-details-marker,
.sp-treue-uebersetzung > summary::-webkit-details-marker {
	display: none;
}

.sp-treue-weg form {
	margin: 6px 0 0;
}

.sp-treue-uebersetzung {
	margin: 8px 0 0;
}

.sp-treue-voll {
	color: var(--sp-mittel);
}

/* ------------- Seit 1.1.1: Team 2 - Vertrieb, Provision, Werbung buchen (E195 bis E212) */

/* Nur neue Klassen und Regeln unter .sp-team - keine vorhandene Regel aendert
   sich. Dazu am Ende das Zeichen "Anzeige" beim Gast (E207). */

.sp-team input[type="date"],
.sp-team input[type="number"] {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	font: inherit;
	font-size: 16px;
	color: var(--sp-dunkel);
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-radius: 10px;
}

.sp-team input[type="date"]:focus,
.sp-team input[type="number"]:focus {
	outline: 2px solid var(--sp-fokus);
	outline-offset: 0;
	border-color: var(--sp-fokus);
}

/* Uebersicht auf der Startseite (E210). */
.sp-team-uebersicht {
	margin: 0 0 16px;
	padding: 16px;
	background: var(--sp-weiss);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.sp-team-uebersicht .sp-abschnitt-titel:first-child {
	margin-top: 0;
}

.sp-team-heute,
.sp-team-zahlen,
.sp-team-liste,
.sp-team-naehe,
.sp-team-fruehere {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}

.sp-team-heute {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.sp-team-heute a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-height: 64px;
	padding: 10px;
	font-size: 13px;
	color: var(--sp-dunkel);
	text-decoration: none;
	background: var(--sp-flaeche);
	border-radius: 10px;
}

.sp-team-heute-zahl {
	font-size: 22px;
	font-weight: 800;
}

.sp-team-heute li[data-heute="ergebnis"]:not([data-zahl="0"]) a,
.sp-team-heute li[data-heute="aufgaben"]:not([data-zahl="0"]) a {
	background: var(--sp-gold-hell);
}

.sp-team-zahlen {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.sp-team-zahl {
	display: flex;
	flex-direction: column;
	padding: 10px;
	border: 1px solid var(--sp-linie);
	border-radius: 10px;
}

.sp-team-zahl-wert {
	font-size: 22px;
	font-weight: 800;
}

.sp-team-zahl-name {
	color: var(--sp-mittel);
	font-size: 13px;
}

@media (min-width: 640px) {
	.sp-team-zahlen {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Suche, Filter und Seiten (E209). */
.sp-team-suche {
	margin: 0 0 12px;
}

.sp-team-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.sp-team-filter select {
	flex: 1 1 140px;
	width: auto;
}

.sp-team-filter .sp-knopf {
	flex: 0 0 auto;
	width: auto;
	min-height: 48px;
	margin: 0;
	padding: 8px 18px;
}

.sp-team-treffer {
	margin: 0 0 8px;
}

.sp-team-seiten {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	margin: 12px 0 24px;
	color: var(--sp-mittel);
	font-size: 14px;
}

/* Leads, Stufen und Marken (E197). */
.sp-team-lead {
	margin: 0 0 16px;
	padding: 16px;
	background: var(--sp-weiss);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.sp-team-marke {
	display: inline-block;
	margin-right: 6px;
	padding: 2px 8px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--sp-dunkel);
	background: var(--sp-flaeche);
	border-radius: 999px;
}

.sp-team-marke[data-status="gewonnen"],
.sp-team-marke[data-zustand="erledigt"],
.sp-team-marke[data-status="ausgezahlt"] {
	background: #d1fae5;
	color: #065f46;
}

.sp-team-marke[data-status="verloren"],
.sp-team-marke[data-status="gekuendigt"],
.sp-team-marke[data-status="gestrichen"],
.sp-team-marke[data-zustand="ueberfaellig"],
.sp-team-marke[data-zustand="ohne_ergebnis"] {
	background: #fee2e2;
	color: #b91c1c;
}

.sp-team-marke[data-status="pausiert"],
.sp-team-marke[data-zustand="heute"] {
	background: var(--sp-gold-hell);
	color: #92400e;
}

.sp-team-kontakt {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0 0;
}

.sp-team-kontakt .sp-knopf,
.sp-team-route,
.sp-team-neu > summary,
.sp-team-bestaetigen > summary {
	width: auto;
	min-height: 44px;
	margin: 8px 0 0;
	padding: 8px 16px;
}

.sp-team-neu > summary,
.sp-team-bestaetigen > summary,
.sp-team-notiz-form > summary {
	cursor: pointer;
	list-style: none;
}

.sp-team-neu > summary::-webkit-details-marker,
.sp-team-bestaetigen > summary::-webkit-details-marker,
.sp-team-notiz-form > summary::-webkit-details-marker {
	display: none;
}

.sp-team-kunde-verweis {
	font-weight: 700;
}

/* Termine und Aufgaben (E200, E201). */
.sp-team-liste > li {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	align-items: baseline;
	padding: 10px 0;
	border-top: 1px solid var(--sp-linie);
	overflow-wrap: anywhere;
}

.sp-team-liste .sp-klein {
	margin: 0;
}

.sp-team-aufgabe[data-zustand="ueberfaellig"] > a {
	color: #b91c1c;
	font-weight: 700;
}

.sp-team-aufgabe[data-zustand="erledigt"] > a {
	color: var(--sp-mittel);
	text-decoration: line-through;
}

.sp-team-haken {
	margin: 0 0 0 auto;
}

.sp-team-haken .sp-knopf {
	width: auto;
	min-height: 40px;
	margin: 0;
	padding: 6px 14px;
}

/* Standort und "In der Naehe" (E202). */
.sp-team-standort .sp-knopf {
	width: auto;
	margin-top: 12px;
}

.sp-team-standort-meldung {
	min-height: 1.2em;
}

.sp-team-naehe-eintrag {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	align-items: baseline;
	padding: 10px 0;
	border-top: 1px solid var(--sp-linie);
	overflow-wrap: anywhere;
}

.sp-team-weg {
	margin-left: auto;
	font-weight: 700;
}

.sp-team-naehe-eintrag .sp-team-route {
	margin: 0;
}

/* Notiz an der Checkliste (E212). */
.sp-team-notiz {
	grid-column: 1 / -1;
	margin: 0;
	padding: 6px 10px;
	font-size: 14px;
	background: var(--sp-gold-hell);
	border-radius: 8px;
	overflow-wrap: anywhere;
}

.sp-team-notiz-form {
	grid-column: 1 / -1;
}

.sp-team-notiz-form > summary {
	min-height: 32px;
	font-size: 14px;
}

.sp-team-notiz-form .sp-knopf {
	width: auto;
}

/* Werbung buchen (E204, E205). */
.sp-team-vorschau {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: 320px;
	padding: 16px;
	border-radius: 12px;
	overflow-wrap: anywhere;
}

.sp-team-vorschau-titel {
	font-size: 18px;
	font-weight: 800;
}

.sp-team-vorschau-text {
	font-size: 14px;
}

.sp-team-werbung-stand {
	margin: 8px 0 0;
	font-weight: 700;
}

.sp-team-fruehere li {
	padding: 6px 0;
	color: var(--sp-mittel);
	font-size: 14px;
	border-top: 1px solid var(--sp-linie);
}

/* Provision (E203). */
.sp-team-summen {
	margin: 0 0 16px;
	padding: 12px 16px;
	font-weight: 700;
	background: var(--sp-weiss);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.sp-team-betrag {
	font-weight: 800;
}

.sp-team-anlass,
.sp-team-provision {
	flex-direction: column;
}

.sp-team-provision[data-status="gestrichen"] > span:first-child {
	text-decoration: line-through;
}

/* "Anzeige" beim Gast (E207): ein ruhiges Zeichen auf jedem Banner und jeder Karte. */
.sp-anzeige {
	align-self: flex-start;
	display: inline-block;
	margin: 0 0 6px;
	padding: 1px 6px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--sp-dunkel);
	background: rgba(255, 255, 255, 0.9);
	border-radius: 6px;
}

.sp-anzeige-satz {
	margin: 0 0 8px;
}

/* ------------ Seit 1.3.0: Gaeste, Buchungen, Punkte uebernehmen, Plaetze */

/* Gaeste (E264): je Gast eine Karte - am Handy lesbar, keine breite Tabelle. */
.sp-gl-uebernahme {
	margin: 0 0 8px;
}

.sp-gl-uebernahme .sp-knopf {
	margin-top: 0;
}

.sp-gl-suche {
	margin: 0 0 8px;
}

.sp-gl-suche-zeile,
.sp-platz-zeile {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.sp-gl-suche-zeile input,
.sp-platz-zeile input {
	flex: 1 1 auto;
	min-width: 0;
}

.sp-gl-suche-zeile .sp-knopf,
.sp-platz-zeile .sp-knopf {
	flex: 0 0 auto;
	width: auto;
	min-height: 48px;
	margin-top: 0;
	padding: 8px 16px;
}

.sp-treffer {
	margin: 16px 0 8px;
	font-weight: 700;
}

.sp-hinweis-kurz {
	margin: 0 0 12px;
	padding: 10px 14px;
	font-size: 15px;
	background: var(--sp-gold-hell);
	border-radius: 10px;
}

.sp-gaeste-liste,
.sp-kassenbuch,
.sp-uebernahmen,
.sp-plaetze {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-gast-karte,
.sp-kb,
.sp-uebernahme,
.sp-platz {
	margin: 0 0 12px;
	padding: 14px 16px;
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-radius: 12px;
}

.sp-gast-kopf,
.sp-kb-kopf,
.sp-uebernahme-kopf,
.sp-platz-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0;
}

.sp-gast-name,
.sp-platz-name,
.sp-uebernahme-gast {
	font-size: 18px;
	font-weight: 800;
	overflow-wrap: anywhere;
}

.sp-gast-ende {
	color: var(--sp-mittel);
	font-variant-numeric: tabular-nums;
}

.sp-gast-sprache {
	font-size: 13px;
	color: var(--sp-text);
	padding: 1px 8px;
	background: var(--sp-flaeche);
	border-radius: 999px;
}

.sp-gast-zahlen {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 8px 16px;
	margin: 10px 0 0;
}

.sp-gast-zahlen div {
	min-width: 0;
}

.sp-gast-zahlen dt {
	font-size: 13px;
	color: var(--sp-mittel);
}

.sp-gast-zahlen dd {
	margin: 0;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.sp-blaettern {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	margin: 16px 0 0;
}

.sp-blaettern .sp-knopf {
	width: auto;
	min-height: 44px;
	margin-top: 0;
	padding: 8px 16px;
}

.sp-blatt {
	color: var(--sp-mittel);
	font-size: 14px;
}

/* Buchungen (E265): nur lesen - Zeit, Art, Punkte oben, darunter wer und wofuer. */
.sp-kb-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}

.sp-kb-wahl {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 6px 14px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-radius: 999px;
}

.sp-gast .sp-kb-wahl {
	text-decoration: none;
}

.sp-kb-wahl[aria-current="page"] {
	background: var(--sp-dunkel);
	border-color: var(--sp-dunkel);
	color: var(--sp-weiss);
}

.sp-kb-zeit {
	font-size: 14px;
	color: var(--sp-mittel);
	font-variant-numeric: tabular-nums;
}

.sp-kb-art {
	font-weight: 700;
}

.sp-kb-punkte {
	margin-left: auto;
	font-size: 18px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.sp-kb[data-art="einloesen"] .sp-kb-punkte {
	color: #b45309;
}

.sp-kb[data-art="storno"] .sp-kb-punkte {
	color: #b91c1c;
}

.sp-kb[data-art="uebernahme"] .sp-kb-punkte {
	color: #047857;
}

.sp-kb-text,
.sp-kb-titel,
.sp-kb-storno,
.sp-kb-grund {
	margin: 4px 0 0;
	font-size: 15px;
	color: var(--sp-text);
	overflow-wrap: anywhere;
}

.sp-kb-gast {
	font-weight: 700;
	color: var(--sp-dunkel);
}

/* Punkte uebernehmen (E266, E268). */
.sp-uebernahme-form .sp-knopf {
	margin-top: 24px;
}

.sp-ue-regel {
	margin-bottom: 24px;
}

.sp-uebernahme-punkte {
	margin-left: auto;
	font-size: 18px;
	font-weight: 800;
	color: #047857;
	font-variant-numeric: tabular-nums;
}

.sp-uebernahme[data-stand="storniert"] .sp-uebernahme-punkte {
	color: var(--sp-leise);
	text-decoration: line-through;
}

.sp-uebernahme .sp-klein {
	margin: 4px 0 8px;
}

.sp-uebernahme-zurueck .sp-feldname {
	margin-top: 4px;
}

.sp-uebernahme-zurueck .sp-knopf {
	margin-top: 12px;
}

.sp-uebernahme-pruefen .sp-gastname span {
	color: var(--sp-mittel);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Plaetze (E269). */
.sp-platz-adresse {
	margin: 4px 0 8px;
	overflow-wrap: anywhere;
}

.sp-platz .sp-feldname {
	margin-top: 4px;
}

.sp-platz-druck {
	margin-top: 0;
}

/* Die Karte eines Platzes: der Name gross unter dem Code - der Code dafuer etwas
   kleiner (64 mm, der schwarze Teil mindestens 52 mm). */
.sp-druckkarte-innen .sp-druckkarte-platz {
	margin: 0 0 1.9cqw;
	font-size: 26px;
	font-size: 7.6cqw;
	font-weight: 900;
	line-height: 1.15;
	overflow-wrap: anywhere;
}

.sp-ansicht-plaetze_druck .sp-druckkarte-code {
	width: 72%;
	width: 61cqw;
}

/* Die Druckseite der Plaetze am Bildschirm: alle Karten als Raster. Beim Drucken
   gelten die Regeln der Druckseite von 1.0.4 unveraendert. */
@media screen {
	.sp-ansicht-plaetze_druck .sp-bogen {
		max-width: 900px;
	}

	.sp-ansicht-plaetze_druck .sp-bogen-seite,
	.sp-ansicht-plaetze_druck .sp-bogen-seite + .sp-bogen-seite {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: 16px;
		margin: 0 0 16px;
	}

	.sp-ansicht-plaetze_druck .sp-druckkarte + .sp-druckkarte {
		display: block;
	}
}

/* ------------ Seit 1.3.1: Auffaelligkeiten, Monatsbericht (seit 1.3.2 ohne Textvorschlaege, E500) */

/* Auf "Mein Betrieb": der Bericht des Vormonats ist da (E341) - wie der Hinweis zu Google. */
.sp-bericht-neu {
	margin: 0 0 20px;
	padding: 12px 16px;
	font-weight: 700;
	background: var(--sp-gold-hell);
	border-left: 4px solid var(--sp-gold);
	border-radius: 10px;
}

.sp-bericht-neu a {
	color: var(--sp-dunkel);
	white-space: nowrap;
}

/* Die Wahl des Zeitraums und des Monats - wie die Auswahl bei den Buchungen. */
.sp-af-zeitraum,
.sp-bericht-monate {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}

/* Auffaelligkeiten (E345, E346). */
.sp-af-stand {
	margin: 0 0 16px;
	font-weight: 700;
}

.sp-af-liste {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.sp-af-eintrag {
	margin: 0 0 8px;
	padding: 10px 12px;
	font-size: 15px;
	background: var(--sp-grund);
	border-left: 4px solid var(--sp-gold);
	border-radius: 8px;
	overflow-wrap: anywhere;
}

.sp-af-zeit {
	color: var(--sp-mittel);
	font-variant-numeric: tabular-nums;
}

.sp-af-wer,
.sp-af-punkte,
.sp-af-nummer {
	font-weight: 700;
}

.sp-af-keine {
	margin: 8px 0 0;
	color: var(--sp-gut);
	font-weight: 700;
}

.sp-af .sp-hinweis-kurz {
	margin: 8px 0 0;
}

.sp-af-hinweis {
	margin: 8px 0 0;
	padding: 12px 16px;
	font-weight: 700;
	background: var(--sp-flaeche);
	border-radius: 10px;
}

/* Der Monatsbericht (E342): Karten mit Zahlen - am Bildschirm und auf Papier. */
.sp-bericht {
	margin: 0;
}

.sp-bericht-titel {
	margin: 0 0 2px;
	font-size: 22px;
	font-weight: 800;
}

.sp-bericht-name {
	margin: 0 0 16px;
	color: var(--sp-mittel);
	font-weight: 700;
	overflow-wrap: anywhere;
}

.sp-bericht-teil {
	margin: 0 0 16px;
	padding: 14px 16px;
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-radius: 12px;
}

.sp-bericht-teil h3 {
	margin: 0 0 8px;
	font-size: 17px;
}

.sp-bericht-zahlen {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 12px 16px;
	margin: 0;
}

.sp-bericht-zahlen div {
	min-width: 0;
}

.sp-bericht-zahlen dt {
	font-size: 13px;
	color: var(--sp-mittel);
	overflow-wrap: anywhere;
}

.sp-bericht-zahlen dd {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.sp-bericht-zahlen dd.sp-bericht-vormonat {
	font-size: 13px;
	font-weight: 400;
	color: var(--sp-mittel);
}

.sp-bericht-teil .sp-klein {
	margin: 8px 0 0;
}

.sp-bericht-erstellt {
	margin: 0 0 8px;
}

.sp-bericht-drucken .sp-knopf {
	margin-top: 8px;
}

/* Die Druckseite des Berichts (E344): am Bildschirm Leiste und Blatt, beim
   Drucken nur das Blatt. A4 mit Rand steht in der Druckseite selbst. */
.sp-bericht-blatt {
	max-width: 760px;
	margin: 0 auto 48px;
	padding: 16px;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.sp-bericht-marke {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 800;
}

@media print {
	body.sp-bericht-druck {
		margin: 0;
		background: #ffffff;
	}

	body.sp-bericht-druck > *:not(.sp-bericht-blatt) {
		display: none !important;
	}

	body.sp-bericht-druck .sp-bericht-blatt {
		max-width: none;
		margin: 0;
		padding: 0;
	}

	body.sp-bericht-druck .sp-bericht-teil {
		break-inside: avoid;
		page-break-inside: avoid;
		margin: 0 0 10px;
		padding: 10px 12px;
	}

	body.sp-bericht-druck .sp-bericht-verweis {
		display: none;
	}
}

/* ------------------------------------------ Seit 1.3.3: der Baustein der Formulare */

/* Der Stern hinter der Beschriftung eines Pflichtfeldes und einmal "* Pflichtfeld" (E536, E537). */
.sp-stern {
	color: #b91c1c;
	font-weight: 700;
}

.sp-pflicht-hinweis {
	margin: 0 0 12px;
	color: var(--sp-mittel);
	font-size: 13px;
}

.sp-pflicht-hinweis span {
	color: #b91c1c;
	font-weight: 700;
}

/* Der Satz kann in einem Absatz auch ein span sein - er steht immer in einer eigenen Zeile. */
span.sp-feldfehler {
	display: block;
}

/* Der rote Rahmen an jedem Feld, das nicht stimmt - in jedem Bereich. */
[data-sp-formular] input[aria-invalid="true"],
[data-sp-formular] select[aria-invalid="true"],
[data-sp-formular] textarea[aria-invalid="true"] {
	border-color: var(--sp-schlecht);
}

/* Der Sprung zum ersten Fehler laesst die Beschriftung sichtbar (der Kopf steht nicht fest). */
[data-sp-formular] label,
[data-sp-formular] legend,
[data-sp-formular] fieldset,
[data-sp-formular] input,
[data-sp-formular] select,
[data-sp-formular] textarea,
[data-sp-formular] .sp-telefon,
[data-sp-formular] .sp-guthaben-zeile {
	scroll-margin-top: 16px;
}

/* Kein doppeltes Absenden: der Knopf grau mit einem kleinen Kreis (E528). */
.sp-sendet {
	opacity: 0.6;
	cursor: progress;
	pointer-events: none;
}

.sp-sendet::after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-left: 8px;
	vertical-align: -2px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: sp-kreis 0.8s linear infinite;
}

@keyframes sp-kreis {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sp-sendet::after {
		animation: none;
	}
}

/* ------------------------------------------ Seit 1.3.5: die Moderation (E368, E579, E580, E581) */

.sp-badge {
	display: inline-block;
	margin: 0 0 0 .4rem;
	padding: .1rem .55rem;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 600;
	line-height: 1.5;
	vertical-align: middle;
	white-space: normal;
}

.sp-badge-gold {
	background: var(--sp-gold-hell);
	color: #92400e;
}

.sp-badge-gruen {
	background: #d1fae5;
	color: #065f46;
}

.sp-badge-rot {
	background: #fee2e2;
	color: #991b1b;
}

.sp-pruefung-badges {
	margin: .25rem 0 .75rem;
}

.sp-pruefung-badges .sp-badge:first-child {
	margin-left: 0;
}

.sp-menue-aus {
	opacity: .55;
}

.sp-menue-aus-satz {
	display: block;
	font-size: .78rem;
	color: var(--sp-mittel);
}

.sp-gesperrt-kasten {
	margin: 1rem 0;
	padding: .9rem 1rem;
	border: 1px solid var(--sp-linie);
	border-radius: 12px;
	background: var(--sp-flaeche);
	color: var(--sp-text);
}

.sp-hinweis-regeln {
	margin: .75rem 0;
	padding: .6rem .8rem;
	border-left: 3px solid var(--sp-gold);
	background: var(--sp-gold-hell);
	color: #78350f;
	font-size: .9rem;
}

.sp-pruefliste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sp-pruefung-eintrag {
	margin: 0 0 .75rem;
	padding: .75rem .9rem;
	border: 1px solid var(--sp-linie);
	border-radius: 12px;
	background: var(--sp-weiss);
}

.sp-pruefung-zurueck {
	display: inline;
	margin-left: .5rem;
}

.sp-pruefung-navi {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1rem;
	margin: 0 0 1rem;
}

.sp-pruefung-navi a[aria-current] {
	font-weight: 700;
	text-decoration: underline;
}

.sp-pruefung-rest {
	color: var(--sp-mittel);
}

.sp-pruefung-kopf,
.sp-pruefung-inhalt {
	margin: 0 0 1rem;
	padding: .9rem 1rem;
	border: 1px solid var(--sp-linie);
	border-radius: 12px;
	background: var(--sp-weiss);
}

.sp-pruefung-angaben {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: .35rem;
	margin: 0;
}

.sp-pruefung-angaben div {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem .75rem;
}

.sp-pruefung-angaben dt {
	min-width: 7rem;
	color: var(--sp-mittel);
}

.sp-pruefung-angaben dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.sp-pruefung-stichwort {
	margin: .75rem 0 0;
	padding: .4rem .6rem;
	background: #fef08a;
	color: #713f12;
	border-radius: 6px;
}

.sp-pruefung-bild {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 0 1rem;
	border-radius: 8px;
}

.sp-pruefung-bild-klein {
	display: block;
	max-width: 160px;
	height: auto;
	margin: .4rem 0;
	border-radius: 6px;
}

.sp-pruefung-feld {
	margin: 0 0 .75rem;
}

.sp-pruefung-text {
	margin: .2rem 0 0;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

ins.sp-neu {
	background: #d1fae5;
	color: #065f46;
	text-decoration: none;
}

del.sp-alt {
	background: #fee2e2;
	color: #991b1b;
}

.sp-pruefung-knoepfe {
	display: grid;
	gap: .75rem;
	margin: 0 0 .5rem;
}

.sp-pruefung-knoepfe details > summary,
.sp-pruefung-entfernen > summary,
.sp-pruefung-verbergen details > summary {
	cursor: pointer;
	font-weight: 600;
}

.sp-pruefung-sprachen {
	margin: 0 0 .75rem;
	padding: .5rem .75rem;
	border: 1px solid var(--sp-linie);
	border-radius: 8px;
}

.sp-pruefung-ohne ul {
	margin: .25rem 0 0;
}

/* ------------------------------------------ Seit 1.3.6: E-Mail-Vorlagen, Konto loeschen (E599, E600, E603) */

.sp-mail-eintrag {
	display: grid;
	gap: .15rem;
}

.sp-mail-titel {
	font-weight: 600;
}

.sp-mail-reiter {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0 0 1rem;
}

.sp-mail-reiter a {
	padding: .35rem .7rem;
	border: 1px solid var(--sp-linie);
	border-radius: 999px;
	text-decoration: none;
	color: inherit;
}

.sp-mail-reiter a[aria-current] {
	border-color: var(--sp-gold, #f59e0b);
	font-weight: 600;
}

.sp-mail-eigen {
	font-size: .75em;
	color: var(--sp-mittel);
}

.sp-mail-platzhalter {
	margin: 0 0 1rem;
	padding-left: 1.1rem;
}

.sp-mail-platzhalter code {
	font-weight: 600;
}

.sp-mail-vorschau {
	display: block;
	width: 100%;
	min-height: 420px;
	border: 1px solid var(--sp-linie);
	border-radius: 12px;
	background: #fff;
}

.sp-mail-text {
	margin: .25rem 0 0;
	padding: .75rem 1rem;
	border: 1px solid var(--sp-linie);
	border-radius: 12px;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	font-size: .9rem;
}

.sp-team-geloescht {
	color: var(--sp-mittel);
	font-weight: 600;
}

/* Seit 1.3.7 (E614, E619): das eine Formular des Onboardings - bedingte Felder, Beschriftungen und
   Kaesten nur mit :has(), kein Skript. Ohne :has() stehen die allgemeinen Beschriftungen und alle
   Felder da; nach dem Absenden zeigt der Server die Kaesten zur gewaehlten Branche (.sp-ob-an).
   Die Listen der Branchen folgen SiamPoints_Rubriken (KONTROLLE, PLUS, MIT_ZIMMERN) - der Pruefstand
   vergleicht sie. */
.sp-ob .sp-ob-nur-firma,
.sp-ob .sp-ob-nur-einzel,
.sp-ob .sp-ob-nur-land,
.sp-ob .sp-ob-nur-bangkok,
.sp-ob .sp-ob-kasten,
.sp-ob .sp-ob-tarif {
	display: none;
}

.sp-ob .sp-ob-kasten.sp-ob-an,
.sp-ob .sp-ob-tarif.sp-ob-an {
	display: block;
}

.sp-ob-kasten {
	margin: 4px 0 16px;
	padding: 12px 14px;
	border: 1px solid #e7d6a6;
	border-radius: 10px;
	background: #fffaf0;
}

.sp-ob-kasten p {
	margin: 0;
}

.sp-ob-kasten .sp-ob-kasten-titel {
	margin-bottom: 4px;
	font-weight: 700;
}

.sp-ob-tarif {
	margin: 0 0 16px;
	font-weight: 600;
}

.sp-ob-hinweis {
	display: block;
	margin: 2px 0 4px;
	font-size: 14px;
	opacity: .8;
}

.sp-ob-rechtsform {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
}

.sp-ob-wahl {
	margin: 4px 0;
}

.sp-ob-feld + .sp-ob-feld {
	margin-top: 12px;
}

.sp-ob-haken {
	margin-top: 16px;
}

.sp-ob:has(input[name="rechtsform"][value="firma"]:checked) .sp-ob-rf-allgemein,
.sp-ob:has(input[name="rechtsform"][value="einzel"]:checked) .sp-ob-rf-allgemein,
.sp-ob:has(input[name="rechtsform"][value="einzel"]:checked) .sp-ob-ansprechpartner {
	display: none;
}

.sp-ob:has(input[name="rechtsform"][value="firma"]:checked) .sp-ob-nur-firma,
.sp-ob:has(input[name="rechtsform"][value="einzel"]:checked) .sp-ob-nur-einzel {
	display: inline;
}

.sp-ob:has(select[name="provinz"] option:checked:not([value=""])) .sp-ob-ort-allgemein {
	display: none;
}

.sp-ob:has(select[name="provinz"] option[value="TH-10"]:checked) .sp-ob-nur-bangkok,
.sp-ob:has(select[name="provinz"] option:checked:not([value=""]):not([value="TH-10"])) .sp-ob-nur-land {
	display: inline;
}

.sp-ob:has(select[name="rubrik"]) .sp-ob-zimmer {
	display: none;
}

.sp-ob:has(select[name="rubrik"] option[value="hotel"]:checked, select[name="rubrik"] option[value="resort"]:checked) .sp-ob-zimmer {
	display: block;
}

.sp-ob:has(select[name="rubrik"] option[value="hotel"]:checked, select[name="rubrik"] option[value="resort"]:checked) .sp-ob-zimmer .sp-ob-hinweis {
	display: none;
}

.sp-ob:has(select[name="rubrik"] option:checked:not([value=""])) .sp-ob-kasten-gruen,
.sp-ob:has(select[name="rubrik"] option:checked:not([value=""])) .sp-ob-tarif-standard {
	display: block;
}

.sp-ob:has(select[name="rubrik"] option[value="hotel"]:checked, select[name="rubrik"] option[value="resort"]:checked, select[name="rubrik"] option[value="hostel"]:checked, select[name="rubrik"] option[value="touren"]:checked, select[name="rubrik"] option[value="boote"]:checked, select[name="rubrik"] option[value="jetski"]:checked, select[name="rubrik"] option[value="roller"]:checked, select[name="rubrik"] option[value="autovermietung"]:checked, select[name="rubrik"] option[value="tickets"]:checked, select[name="rubrik"] option[value="immobilien"]:checked, select[name="rubrik"] option[value="villen"]:checked) .sp-ob-kasten-gruen,
.sp-ob:has(select[name="rubrik"] option[value="golf"]:checked, select[name="rubrik"] option[value="gold"]:checked, select[name="rubrik"] option[value="juwelier"]:checked, select[name="rubrik"] option[value="edelsteine"]:checked, select[name="rubrik"] option[value="immobilien"]:checked, select[name="rubrik"] option[value="villen"]:checked, select[name="rubrik"] option[value="hotel"]:checked, select[name="rubrik"] option[value="resort"]:checked) .sp-ob-tarif-standard {
	display: none;
}

.sp-ob:has(select[name="rubrik"] option[value="hotel"]:checked, select[name="rubrik"] option[value="resort"]:checked, select[name="rubrik"] option[value="hostel"]:checked, select[name="rubrik"] option[value="touren"]:checked, select[name="rubrik"] option[value="boote"]:checked, select[name="rubrik"] option[value="jetski"]:checked, select[name="rubrik"] option[value="roller"]:checked, select[name="rubrik"] option[value="autovermietung"]:checked, select[name="rubrik"] option[value="tickets"]:checked, select[name="rubrik"] option[value="immobilien"]:checked, select[name="rubrik"] option[value="villen"]:checked) .sp-ob-kasten-kontrolle,
.sp-ob:has(select[name="rubrik"] option[value="golf"]:checked, select[name="rubrik"] option[value="gold"]:checked, select[name="rubrik"] option[value="juwelier"]:checked, select[name="rubrik"] option[value="edelsteine"]:checked, select[name="rubrik"] option[value="immobilien"]:checked, select[name="rubrik"] option[value="villen"]:checked, select[name="rubrik"] option[value="hotel"]:checked, select[name="rubrik"] option[value="resort"]:checked) .sp-ob-tarif-plus {
	display: block;
}
/* Seit 1.3.7 (E625, E628, E629): Zur Pruefung, Firmendaten, Antraege im Team. */
.sp-to-angaben {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2px;
	margin: 8px 0 12px;
}

.sp-to-angaben dt {
	margin-top: 8px;
	font-size: 14px;
	opacity: .75;
}

.sp-to-angaben dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.sp-to-doppelt {
	color: #b91c1c;
}

.sp-to-antrag .sp-knopfreihe {
	align-items: flex-end;
}

.sp-to-freischalten .sp-haken {
	align-items: flex-start;
}

/* Seit 1.3.8 (E701 bis E710): Anmeldung und Sicherheit - die gruene Meldung, der Weg mit E-Mail-Code,
   das Einrichten der Zwei-Faktor-Anmeldung und die Karte der Backup-Codes (Handy zuerst). */
.sp-meldung.sp-erfolg {
	background: #ecfdf5;
	border-left-color: var(--sp-gut);
	color: #065f46;
	font-weight: 600;
}

.sp-codeweg {
	margin: 20px 0 8px;
}

.sp-codeweg .sp-knopf {
	display: flex;
	width: 100%;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
}

.sp-code-feld {
	font-size: 22px;
	letter-spacing: 0.2em;
	font-variant-numeric: tabular-nums;
}

.sp-nebenformular {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--sp-linie);
}

.sp-backupweg {
	margin-top: 20px;
}

.sp-backupweg > summary {
	cursor: pointer;
	color: var(--sp-fokus);
	font-weight: 600;
}

.sp-schritte-tfa {
	margin: 0 0 16px;
	padding-left: 20px;
}

.sp-schritte-tfa > li {
	margin-bottom: 12px;
}

.sp-tfa-qr {
	width: 220px;
	max-width: 100%;
	margin: 12px 0;
	padding: 8px;
	background: var(--sp-weiss);
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.sp-tfa-qr svg {
	display: block;
	width: 100%;
	height: auto;
}

.sp-tfa-schluessel {
	display: inline-block;
	padding: 6px 10px;
	background: var(--sp-flaeche);
	border-radius: 8px;
	font-size: 16px;
	letter-spacing: 0.08em;
	overflow-wrap: anywhere;
}

.sp-codekarte {
	margin: 0 0 20px;
	padding: 16px 20px;
	background: var(--sp-weiss);
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.sp-codeliste {
	margin: 12px 0 16px;
	padding: 0;
	list-style: none;
}

.sp-codeliste > li {
	padding: 6px 0;
	border-bottom: 1px solid var(--sp-linie);
}

.sp-codeliste code {
	font-size: 20px;
	letter-spacing: 0.12em;
	font-variant-numeric: tabular-nums;
}

.sp-bestaetigung {
	margin: 16px 0;
	padding: 12px 16px;
	border: 1px solid var(--sp-linie);
	border-radius: 10px;
}

.sp-bestaetigung > legend {
	padding: 0 6px;
	font-size: 14px;
	color: var(--sp-mittel);
}

.sp-res-konto {
	margin: 12px 0;
}

/* Seit 1.3.9 (E807, Abhakliste 56): der Satz "Was Ihr Betrieb mit SiamPoints kann" je Branche nach der Matrix -
   je eine Zeile fuer Reservierungen, Reservierungen nach Lizenzpruefung, Zimmeranfragen, Online-Shop und
   Massanfertigung. Die Listen folgen SiamPoints_Rubriken (BAUART, LIZENZ, SHOP) - der Pruefstand vergleicht sie. */
.sp-ob .sp-ob-zeile {
	display: none;
	margin: 4px 0 0;
}

.sp-ob .sp-ob-zeile.sp-ob-an {
	display: block;
}

.sp-ob:has(select[name="rubrik"] option[value="restaurant"]:checked, select[name="rubrik"] option[value="cafe"]:checked, select[name="rubrik"] option[value="baeckerei"]:checked, select[name="rubrik"] option[value="dessert"]:checked, select[name="rubrik"] option[value="friseur"]:checked, select[name="rubrik"] option[value="barber"]:checked, select[name="rubrik"] option[value="nails"]:checked, select[name="rubrik"] option[value="lashes"]:checked, select[name="rubrik"] option[value="tattoo"]:checked, select[name="rubrik"] option[value="massage"]:checked, select[name="rubrik"] option[value="spa"]:checked, select[name="rubrik"] option[value="fitness"]:checked, select[name="rubrik"] option[value="yoga"]:checked, select[name="rubrik"] option[value="pilates"]:checked, select[name="rubrik"] option[value="tanz"]:checked, select[name="rubrik"] option[value="muaythai"]:checked, select[name="rubrik"] option[value="badminton"]:checked, select[name="rubrik"] option[value="golf"]:checked, select[name="rubrik"] option[value="carwash"]:checked, select[name="rubrik"] option[value="waescherei"]:checked, select[name="rubrik"] option[value="tierpflege"]:checked, select[name="rubrik"] option[value="coworking"]:checked, select[name="rubrik"] option[value="fotostudio"]:checked, select[name="rubrik"] option[value="reparatur"]:checked, select[name="rubrik"] option[value="schneider"]:checked, select[name="rubrik"] option[value="schneider_indisch"]:checked, select[name="rubrik"] option[value="thai_dress"]:checked, select[name="rubrik"] option[value="juwelier"]:checked, select[name="rubrik"] option[value="uhren"]:checked, select[name="rubrik"] option[value="edelsteine"]:checked, select[name="rubrik"] option[value="immobilien"]:checked) .sp-ob-zeile-res {
	display: block;
}

/* Seit 2.5.0 (E1913): Bars & Nachtleben - Tisch-Reservierung inklusive. */
.sp-ob:has(select[name="rubrik"] option[value="bar"]:checked, select[name="rubrik"] option[value="beach_club"]:checked, select[name="rubrik"] option[value="club"]:checked) .sp-ob-zeile-res {
	display: block;
}

.sp-ob:has(select[name="rubrik"] option[value="touren"]:checked, select[name="rubrik"] option[value="boote"]:checked, select[name="rubrik"] option[value="jetski"]:checked, select[name="rubrik"] option[value="roller"]:checked, select[name="rubrik"] option[value="autovermietung"]:checked, select[name="rubrik"] option[value="tickets"]:checked) .sp-ob-zeile-lizenz {
	display: block;
}

.sp-ob:has(select[name="rubrik"] option[value="hotel"]:checked, select[name="rubrik"] option[value="resort"]:checked, select[name="rubrik"] option[value="hostel"]:checked, select[name="rubrik"] option[value="villen"]:checked) .sp-ob-zeile-zimmer {
	display: block;
}

.sp-ob:has(select[name="rubrik"] option[value="cafe"]:checked, select[name="rubrik"] option[value="baeckerei"]:checked, select[name="rubrik"] option[value="eisdiele"]:checked, select[name="rubrik"] option[value="bubbletea"]:checked, select[name="rubrik"] option[value="feinkost"]:checked, select[name="rubrik"] option[value="friseur"]:checked, select[name="rubrik"] option[value="barber"]:checked, select[name="rubrik"] option[value="nails"]:checked, select[name="rubrik"] option[value="spa"]:checked, select[name="rubrik"] option[value="fitness"]:checked, select[name="rubrik"] option[value="yoga"]:checked, select[name="rubrik"] option[value="bekleidung"]:checked, select[name="rubrik"] option[value="schuhe"]:checked, select[name="rubrik"] option[value="accessoires"]:checked, select[name="rubrik"] option[value="sportartikel"]:checked, select[name="rubrik"] option[value="elektronik"]:checked, select[name="rubrik"] option[value="souvenir"]:checked, select[name="rubrik"] option[value="tierbedarf"]:checked, select[name="rubrik"] option[value="blumen"]:checked, select[name="rubrik"] option[value="buecher"]:checked, select[name="rubrik"] option[value="haushalt"]:checked, select[name="rubrik"] option[value="juwelier"]:checked, select[name="rubrik"] option[value="uhren"]:checked, select[name="rubrik"] option[value="edelsteine"]:checked) .sp-ob-zeile-shop {
	display: block;
}

/* Seit 1.6.4 (E957): der Online-Shop ist da - "in Kuerze" nur noch bei Tickets, Gold und Fotostudios (Druckauftraege). */
.sp-ob:has(select[name="rubrik"] option[value="fotostudio"]:checked, select[name="rubrik"] option[value="gold"]:checked, select[name="rubrik"] option[value="tickets"]:checked) .sp-ob-zeile-shop-bald {
	display: block;
}

.sp-ob:has(select[name="rubrik"] option[value="schneider"]:checked, select[name="rubrik"] option[value="schneider_indisch"]:checked, select[name="rubrik"] option[value="thai_dress"]:checked) .sp-ob-zeile-mass {
	display: block;
}

/* Seit 1.3.9 (Abhakliste 4): "Zur Website" im Kopf von Meine Punkte, Inhaber, Team und Anmeldung. */
.sp-zurueck-web {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 44px;
	padding: 0 10px;
	border-radius: 10px;
	color: inherit;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.sp-zurueck-web:hover,
.sp-zurueck-web:focus-visible {
	background: rgba(15, 23, 42, .06);
}

@media (max-width: 639px) {
	.sp-zurueck-web span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* Seit 1.3.9 (E804): "E-Mail aendern" aufklappbar in "Anmeldung & Sicherheit". */
.sp-aufklappen > summary {
	margin: 8px 0;
	cursor: pointer;
	font-weight: 600;
}

/* Seit 1.3.10 (E814 bis E828): Unterlagen, Pruefmaske, "Mein Abo", die Streifen. */
.sp-streifen {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 12px;
	font-weight: 600;
	line-height: 1.5;
}

.sp-streifen a {
	margin-left: 6px;
	color: inherit;
	white-space: nowrap;
}

.sp-streifen-gold {
	background: var(--sp-gold-hell);
	border: 1px solid var(--sp-gold);
	color: var(--sp-dunkel);
}

.sp-streifen-rot {
	background: #fef2f2;
	border: 1px solid var(--sp-schlecht);
	color: #991b1b;
}

.sp-ul-balken {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 16px;
	font-weight: 600;
}

.sp-ul-balken-leiste {
	flex: 1 1 160px;
	height: 10px;
	border-radius: 99px;
	background: var(--sp-flaeche);
	overflow: hidden;
}

.sp-ul-balken-leiste span {
	display: block;
	height: 100%;
	background: var(--sp-gold);
}

.sp-ul-balken[data-voll="1"] .sp-ul-balken-leiste span {
	background: var(--sp-gut);
}

.sp-ul-liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-ul-punkt {
	margin: 0 0 14px;
	padding: 14px;
	border: 1px solid var(--sp-linie);
	border-radius: 14px;
	background: var(--sp-weiss);
}

.sp-ul-punkt[data-stand="neu_angefordert"],
.sp-ul-punkt[data-stand="abgelaufen"] {
	border-color: var(--sp-schlecht);
}

.sp-ul-kopf {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6px 12px;
	margin: 0 0 4px;
}

.sp-ul-marke {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 99px;
	background: var(--sp-flaeche);
	font-size: 13px;
	font-weight: 600;
}

.sp-ul-marke[data-stand="geprueft"] {
	background: #d1fae5;
	color: #065f46;
}

.sp-ul-marke[data-stand="eingereicht"] {
	background: var(--sp-gold-hell);
	color: #92400e;
}

.sp-ul-marke[data-stand="neu_angefordert"],
.sp-ul-marke[data-stand="abgelaufen"],
.sp-ul-marke[data-stand="fehlt"] {
	background: #fee2e2;
	color: #991b1b;
}

.sp-ul-grund {
	color: #991b1b;
	font-weight: 600;
}

.sp-ul-zeile {
	margin: 10px 0;
	padding-top: 10px;
	border-top: 1px solid var(--sp-linie);
}

.sp-ul-form {
	margin-top: 12px;
}

.sp-ul-dokumente img.sp-ul-bild,
.sp-ul-dokumente iframe.sp-ul-pdf {
	display: block;
	width: 100%;
	max-width: 100%;
	border: 1px solid var(--sp-linie);
	border-radius: 10px;
	background: var(--sp-flaeche);
}

.sp-ul-dokumente iframe.sp-ul-pdf {
	height: 70vh;
	min-height: 360px;
}

.sp-ul-vergleich {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 4px 12px;
	margin: 0 0 8px;
}

.sp-ul-vergleich dt {
	color: var(--sp-mittel);
}

.sp-ul-vergleich dd {
	margin: 0;
	font-weight: 600;
}

.sp-ul-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}

@media (min-width: 900px) {
	.sp-ul[data-seite="team"] .sp-ul-zeile {
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		gap: 0 20px;
	}

	.sp-ul[data-seite="team"] .sp-ul-zeile > .sp-klein {
		grid-column: 1 / -1;
	}

	.sp-ul[data-seite="team"] .sp-ul-dokumente {
		grid-column: 1;
		grid-row: 2 / span 3;
	}
}

.sp-abo {
	margin: 0 0 18px;
	padding: 16px;
	border: 1px solid var(--sp-linie);
	border-radius: 14px;
	background: var(--sp-weiss);
}

.sp-abo-angaben {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 6px 14px;
	margin: 0 0 14px;
}

.sp-abo-angaben dt {
	color: var(--sp-mittel);
}

.sp-abo-angaben dd {
	margin: 0;
	font-weight: 600;
}

.sp-abo-folgen {
	margin: 0 0 20px;
	padding-left: 20px;
	line-height: 1.6;
}

.sp-abo-folgen li {
	margin: 0 0 8px;
}

/* Seit 1.4.0 (E840 bis E846): die Abrechnung im Team, das Zahlungsfenster des Inhabers, die Sperre bei Gaesten. */
.sp-ab-reiter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
}

.sp-ab-reiter a {
	padding: 8px 14px;
	border: 1px solid var(--sp-linie);
	border-radius: 999px;
	color: var(--sp-dunkel);
	text-decoration: none;
}

.sp-ab-reiter a[aria-current="page"] {
	background: var(--sp-dunkel);
	border-color: var(--sp-dunkel);
	color: var(--sp-weiss);
}

.sp-ab-zeile {
	margin: 0 0 14px;
	padding: 14px 16px;
	border: 1px solid var(--sp-linie);
	border-radius: 12px;
	background: var(--sp-weiss);
}

.sp-ab-zeile p {
	margin: 0 0 6px;
}

.sp-ab-zeile[data-stand="gesperrt"] {
	border-color: var(--sp-schlecht);
}

.sp-ab-rot,
.sp-karte-gesperrt {
	color: var(--sp-schlecht);
	font-weight: 600;
}

.sp-karte-gesperrt {
	margin-top: 6px;
	font-size: 0.875rem;
}

.sp-ab-qr img,
.sp-zf-qr img {
	display: block;
	width: 100%;
	max-width: 320px;
	height: auto;
	margin: 0 auto;
	border: 1px solid var(--sp-linie);
	border-radius: 12px;
	background: var(--sp-weiss);
}

.sp-ab-verlauf {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-ab-verlauf li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.sp-zf-liste {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.sp-zf-liste li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--sp-linie);
}

.sp-zf-betrag {
	margin-left: auto;
	font-weight: 700;
	color: var(--sp-dunkel);
}

.sp-zf-summe {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--sp-dunkel);
}

.sp-zf-qr {
	margin: 20px 0;
}

.sp-zf-hinweis {
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--sp-flaeche);
	color: var(--sp-dunkel);
}

.sp-zf-bank {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 6px 16px;
	margin: 16px 0;
}

.sp-zf-bank dt {
	color: var(--sp-mittel);
}

.sp-zf-bank dd {
	margin: 0;
	font-weight: 600;
	color: var(--sp-dunkel);
	word-break: break-word;
}

/* Seit 1.5.0 (E850 bis E857): Reservierungen je Branche - zwei Schritte beim Gast, der Badge
   "Reservierung bestaetigt", die Angaben der Bauart, die Zusammenfassung und die Einstellungen des Baukastens. */
.sp-res-schritt + .sp-res-schritt {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--sp-linie, #e5e1d8);
}

.sp-res-schritt-titel {
	margin: 0 0 8px;
	font-weight: 700;
	color: var(--sp-dunkel);
}

.sp-res-wahl {
	margin: 0 0 12px;
	font-weight: 600;
}

p.sp-res-badge {
	display: inline-block;
	margin: 6px 0;
	padding: 4px 12px;
	border-radius: 999px;
	background: #1f7a3a;
	color: #ffffff;
	font-weight: 700;
}

.sp-res-angaben,
.sp-res-regeln {
	margin: 4px 0 8px;
	padding-left: 18px;
}

.sp-res-zusammenfassung {
	margin: 16px 0;
	padding: 12px 14px;
	border: 1px solid var(--sp-linie, #e5e1d8);
	border-radius: 10px;
}

.sp-res-bezahlt {
	font-weight: 600;
	color: var(--sp-dunkel);
}

.sp-res-beleg p {
	margin: 4px 0;
}

.sp-res-baukasten {
	margin: 16px 0;
	padding: 12px 14px;
	border: 1px solid var(--sp-linie, #e5e1d8);
	border-radius: 10px;
}

.sp-res-kurszeile {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	margin: 0 0 10px;
}

@media (min-width: 700px) {
	.sp-res-kurszeile {
		grid-template-columns: 2fr 1.4fr 1fr 1fr 0.8fr;
	}
}

.sp-res-karte.sp-res-abgelehnt {
	border-left-color: var(--sp-schlecht);
}

/* Seit 1.6.0 (E863 bis E881): der Online-Shop im Bereich des Inhabers. */
.sp-shop-liste-saetze {
	margin: 6px 0 12px;
	padding-left: 20px;
}

.sp-shop-liste-saetze li {
	margin: 4px 0;
}

.sp-shop-kategorien,
.sp-shop-produkte {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.sp-shop-kategorie {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	align-items: center;
	margin: 0 0 8px;
}

.sp-shop-zeile {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	margin: 0;
}

.sp-shop-zeile input[type="text"] {
	flex: 1 1 180px;
	min-width: 0;
}

.sp-shop-produkt {
	margin: 0 0 12px;
	padding: 12px 14px;
	border: 1px solid var(--sp-linie, #e5e1d8);
	border-radius: 10px;
}

.sp-shop-kopf {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.sp-shop-bild {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 8px;
	flex: 0 0 auto;
}

.sp-shop-formular .sp-shop-bild {
	width: 120px;
	height: 120px;
	margin: 0 0 8px;
}

.sp-shop-name {
	margin: 0 0 2px;
	font-weight: 600;
}

.sp-shop-lager,
.sp-shop-varianten,
.sp-shop-angaben,
.sp-shop-arten {
	margin: 12px 0;
}

.sp-shop-varianten,
.sp-shop-angaben {
	padding: 12px 14px;
	border: 1px solid var(--sp-linie, #e5e1d8);
	border-radius: 10px;
}

.sp-shop-varianten summary,
.sp-shop-lager summary {
	cursor: pointer;
	font-weight: 600;
}

.sp-shop-bestand {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 0 0 6px;
}

.sp-shop-bestand span {
	flex: 1 1 auto;
}

.sp-shop-bestand input {
	width: 96px;
}

.sp-shop-tabelle {
	width: 100%;
	border-collapse: collapse;
}

.sp-shop-tabelle th {
	text-align: left;
	font-weight: 600;
	font-size: 0.9em;
	padding: 4px;
}

.sp-shop-tabelle td {
	padding: 3px 4px 3px 0;
}

.sp-shop-tabelle input {
	width: 100%;
	min-width: 0;
}

/* Seit 1.6.1 (E889 bis E901): der Online-Shop fuer Gaeste und die Bestellungen - Handy zuerst. */
.sp-hinweis-gold {
	margin: 12px 0;
	padding: 10px 14px;
	border-radius: 10px;
	background: var(--sp-gold-hell);
	color: var(--sp-dunkel);
}

.sp-shop-einstieg {
	margin: 16px 0;
}

.sp-shop-nav,
.sp-shop-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 12px 0;
}

.sp-shop-pille {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid var(--sp-linie);
	border-radius: 999px;
	color: var(--sp-dunkel);
	text-decoration: none;
	background: var(--sp-weiss);
}

.sp-shop-pille.sp-aktiv {
	border-color: var(--sp-gold-dunkel);
	background: var(--sp-gold-hell);
	font-weight: 600;
}

.sp-shop-suche {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0;
}

.sp-shop-suche input[type="search"] {
	flex: 1 1 200px;
	min-width: 0;
}

.sp-shop-raster {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 12px 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 720px) {
	.sp-shop-raster {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.sp-shop-raster {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.sp-shop-karte a {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	padding: 8px;
	border: 1px solid var(--sp-linie);
	border-radius: 12px;
	background: var(--sp-weiss);
	color: var(--sp-dunkel);
	text-decoration: none;
}

.sp-shop-karte img,
.sp-shop-hauptbild {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
	background: var(--sp-flaeche);
}

.sp-shop-karte-name {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.sp-shop-karte-preis,
.sp-shop-preis {
	color: var(--sp-gold-dunkel);
	font-weight: 700;
}

.sp-shop-preis {
	font-size: 1.25em;
	margin: 4px 0 12px;
}

.sp-shop-aus {
	color: var(--sp-schlecht);
	font-weight: 600;
}

.sp-shop-mehr {
	text-align: center;
}

.sp-shop-vorschau {
	display: flex;
	gap: 8px;
	margin: 8px 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
}

.sp-shop-vorschau img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 6px;
}

.sp-shop-text {
	white-space: normal;
	overflow-wrap: anywhere;
}

.sp-shop-angaben dl {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: 4px 12px;
	margin: 0;
}

.sp-shop-angaben dt {
	font-weight: 600;
}

.sp-shop-angaben dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.sp-shop-verkaeufer,
.sp-shop-regeln,
.sp-shop-mehr-kat {
	margin: 16px 0;
}

.sp-shop-posten {
	margin: 8px 0;
	padding: 0;
	list-style: none;
}

.sp-shop-posten li {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid var(--sp-linie);
}

.sp-shop-korbname {
	flex: 1 1 100%;
	font-weight: 600;
}

.sp-shop-korbzeile input[type="number"] {
	width: 72px;
}

.sp-shop-summe {
	text-align: right;
}

.sp-shop-wahl,
.sp-shop-adresse {
	margin: 12px 0;
	padding: 12px 14px;
	border: 1px solid var(--sp-linie);
	border-radius: 10px;
}

/* Seit 2.2.1 (E1622): eine Lieferadresse mit Land und die Rechnungsadresse - verborgen heisst verborgen, auch bei Flex. */
.sp-shop-land-gruppe {
	margin-top: 10px;
}

.sp-shop-adresse[hidden],
.sp-shop-land-gruppe[hidden],
.sp-shop-rechnung-felder[hidden],
.sp-shop-gruppe-titel[hidden],
.sp-shop-rechnung .sp-haken[hidden] {
	display: none;
}

.sp-shop-bestellung {
	margin: 0 0 14px;
	padding: 12px 14px;
	border: 1px solid var(--sp-linie);
	border-radius: 12px;
	background: var(--sp-weiss);
}

.sp-shop-bestellung-kopf {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	justify-content: space-between;
	margin: 0 0 4px;
}

.sp-shop-stand {
	margin: 0 0 6px;
	font-weight: 600;
	color: var(--sp-gold-dunkel);
}

.sp-shop-stand-storniert .sp-shop-stand,
.sp-shop-stand-verfallen .sp-shop-stand {
	color: var(--sp-mittel);
}

.sp-shop-knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 0;
}

.sp-shop-lieferung p,
.sp-shop-hinweis {
	margin: 2px 0;
	overflow-wrap: anywhere;
}

.sp-shop-zone {
	margin: 8px 0;
	padding: 10px 12px;
	border: 1px solid var(--sp-linie);
	border-radius: 10px;
}

.sp-shop-zone summary,
.sp-shop-versandt summary,
.sp-shop-storno summary {
	cursor: pointer;
	font-weight: 600;
}

.sp-shop-zone select[multiple] {
	width: 100%;
}

.sp-shop-zone-zahlen {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0 0;
}

.sp-shop-zone-zahlen label {
	display: flex;
	flex: 1 1 140px;
	flex-direction: column;
	gap: 2px;
}

/* Seit 1.6.2 (E907, E922, E925, E926): die Angaben zum Verkaeufer, das Abzeichen des DBD-Siegels, der Meldeweg. */
.sp-shop-verkaeufer dl {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: 4px 12px;
	margin: 8px 0;
}

.sp-shop-verkaeufer dt {
	font-weight: 600;
}

.sp-shop-verkaeufer dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.sp-shop-verkaeufer summary {
	cursor: pointer;
	font-weight: 600;
}

details.sp-shop-verkaeufer,
.sp-shop-verkaeufer-kasse,
.sp-shop-verkaeufer-beleg,
.sp-shop-hinweis-angaben {
	margin: 12px 0;
	padding: 10px 12px;
	border: 1px solid var(--sp-linie, #e5e1d8);
	border-radius: 10px;
}

.sp-shop-siegel {
	display: inline-block;
	padding: 2px 10px;
	border: 1px solid var(--sp-linie, #e5e1d8);
	border-radius: 999px;
	font-size: 0.85em;
	font-weight: 600;
	text-decoration: none;
}

.sp-shop-kopf-link {
	color: inherit;
	text-decoration: none;
}

.sp-shop-melden {
	margin: 8px 0 0;
}

/* ------------------------- Seit 1.6.4: Bezahlen im Shop (E947 bis E956) */

/* Der Kasten "So bezahlen Sie": Empfaenger laut Register, Betrag, QR mit Betrag, das freigegebene Konto, der Beleg. */
.sp-shop-zahlen {
	margin: 16px 0;
	padding: 14px 16px;
	background: var(--sp-weiss, #fff);
	border: 2px solid var(--sp-gold, #c9a227);
	border-radius: 12px;
}

.sp-shop-zahlen h3,
.sp-shop-zahlen h4 {
	margin: 12px 0 6px;
}

.sp-shop-zahlen h3 {
	margin-top: 0;
}

.sp-shop-zahlen-angaben {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 12px;
	margin: 0 0 8px;
}

.sp-shop-zahlen-angaben dt {
	font-weight: 600;
}

.sp-shop-zahlen-angaben dd {
	margin: 0;
	overflow-wrap: anywhere;
}

/* Der QR so gross, dass jede Banking-App ihn vom Bildschirm liest - auch auf einem zweiten Handy. */
.sp-shop-qr,
.sp-shop-code-qr {
	max-width: 260px;
	margin: 8px auto;
	padding: 8px;
	background: #fff;
	border-radius: 8px;
}

.sp-shop-qr svg,
.sp-shop-code-qr svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Die Codes fuer Gutschein und Mitgliedschaft. */
.sp-shop-codes {
	margin: 12px 0;
}

.sp-shop-code {
	margin: 8px 0;
	padding: 10px 12px;
	border: 1px dashed var(--sp-gold, #c9a227);
	border-radius: 10px;
}

.sp-shop-code-aus {
	opacity: 0.6;
}

.sp-shop-code-text {
	margin: 4px 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.25em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-align: center;
}

.sp-shop-codes-kurz {
	margin: 6px 0;
	padding-left: 18px;
}

.sp-shop-beleg {
	margin: 6px 0;
}

.sp-shop-zahlarten h3 {
	margin: 16px 0 6px;
}

/* Der Streifen des Shops: Stehen andere schon da, rueckt er darueber. */
.sp-neues:not([hidden]) ~ .sp-neues-shop {
	bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

.sp-neues:not([hidden]) ~ .sp-neues:not([hidden]) ~ .sp-neues-shop {
	bottom: calc(160px + env(safe-area-inset-bottom, 0px));
}

.sp-neues:not([hidden]) ~ .sp-neues:not([hidden]) ~ .sp-neues:not([hidden]) ~ .sp-neues-shop {
	bottom: calc(232px + env(safe-area-inset-bottom, 0px));
}

@media print {
	.sp-shop-zahlen form {
		display: none;
	}
}

/* Seit 1.6.5 (E962 bis E968): der Online-Shop beim Personal - das Ergebnis eines Codes, der Scanner, die Abholungen. */
.sp-shopcode-ergebnis {
	margin: 12px 0 18px;
	padding: 14px 16px;
	border-radius: 12px;
	border: 2px solid var(--sp-linie, #e2e8f0);
	background: #fff;
}

.sp-shopcode-gueltig {
	border-color: var(--sp-gut, #10b981);
	background: #ecfdf5;
}

.sp-shopcode-nein {
	border-color: var(--sp-schlecht, #ef4444);
	background: #fef2f2;
}

.sp-shopcode-art {
	margin: 0;
	font-size: 0.85em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.sp-shopcode-satz {
	margin: 6px 0 10px;
	font-size: 1.15em;
	font-weight: 700;
}

.sp-shopcode-feld {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sp-scanner {
	margin: 10px 0;
	text-align: center;
}

.sp-scanner-bild {
	display: block;
	width: 100%;
	max-width: 360px;
	margin: 0 auto 6px;
	border-radius: 10px;
	background: #000;
}

.sp-abholung .sp-gastname {
	margin: 4px 0;
}

.sp-abholung-offen {
	color: var(--sp-schlecht, #ef4444);
}

/* Seit 1.6.5 (E970): der Lieferschein auf dem Blatt. */
.sp-ls-kopf {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.sp-ls-nummer {
	text-align: right;
}

.sp-ls-nummer h2 {
	margin: 0 0 4px;
}

.sp-ls-nummer p,
.sp-ls-empfaenger p,
.sp-ls-betrieb {
	margin: 2px 0;
}

.sp-ls-empfaenger {
	margin: 0 0 18px;
	padding: 10px 12px;
	border: 1px solid var(--sp-linie, #e2e8f0);
	border-radius: 8px;
}

.sp-ls-posten {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 14px;
}

.sp-ls-posten th,
.sp-ls-posten td {
	padding: 6px 8px;
	border-bottom: 1px solid var(--sp-linie, #e2e8f0);
	text-align: left;
	vertical-align: top;
}

.sp-ls-posten th:first-child,
.sp-ls-posten td:first-child {
	width: 2.5em;
}

.sp-ls-posten th:last-child,
.sp-ls-posten td:last-child {
	width: 6em;
	text-align: right;
}

.sp-ls-sprachen a,
.sp-ls-sprachen strong {
	margin: 0 4px;
}

/* ------------------------------------------- Seit 1.7.0 (E1493, E1500): Anmeldeart und Hilfe an Passwortfeldern */

.sp-arten {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.sp-art {
	padding: 12px 14px;
	border: 1px solid var(--sp-linie);
	border-radius: 12px;
	background: var(--sp-weiss);
}

.sp-art strong {
	display: block;
	color: var(--sp-dunkel);
}

.sp-art-satz {
	display: block;
	font-size: 14px;
}

.sp-pw-hilfe {
	margin: 4px 0 8px;
}

.sp-pw-zeigen {
	min-height: 44px;
	padding: 8px 0;
	font: inherit;
	font-size: 15px;
	color: var(--sp-dunkel);
	text-decoration: underline;
	background: none;
	border: 0;
	cursor: pointer;
}

.sp-pw-staerke {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}

.sp-pw-staerke[hidden] {
	display: none;
}

.sp-pw-leiste {
	display: inline-flex;
	gap: 4px;
}

.sp-pw-teil {
	width: 36px;
	height: 10px;
	border: 1px solid #64748b;
	border-radius: 5px;
	background: transparent;
}

.sp-pw-wort {
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
}

/* Vier Stufen - jedes Wort als Abzeichen mit eigener Schrift (Kontrast mindestens 4,5 : 1), die Teile mit grauem Rand: auf hellem
   und dunklem Grund gleich gut zu sehen. */
.sp-pw-staerke[data-stufe="0"] .sp-pw-teil:nth-child(-n+1),
.sp-pw-staerke[data-stufe="0"] .sp-pw-wort {
	background: #b91c1c;
	color: #ffffff;
}

.sp-pw-staerke[data-stufe="1"] .sp-pw-teil:nth-child(-n+2),
.sp-pw-staerke[data-stufe="1"] .sp-pw-wort {
	background: #c2410c;
	color: #ffffff;
}

.sp-pw-staerke[data-stufe="2"] .sp-pw-teil:nth-child(-n+3),
.sp-pw-staerke[data-stufe="2"] .sp-pw-wort {
	background: #facc15;
	color: #422006;
}

.sp-pw-staerke[data-stufe="3"] .sp-pw-teil,
.sp-pw-staerke[data-stufe="3"] .sp-pw-wort {
	background: #15803d;
	color: #ffffff;
}

/* Seit 2.2.0 (E1459): der Baustein der Listen - "Mehr laden" mittig, das Ende und der Export leise. */
.sp-liste-fuss {
	display: flex;
	justify-content: center;
	margin: 12px 0 16px;
}

.sp-liste-mehr {
	width: auto;
	min-height: 48px;
	padding: 8px 24px;
}

.sp-liste-mehr[aria-busy="true"] {
	opacity: 0.6;
}

.sp-liste-ende {
	margin: 0;
	color: var(--sp-mittel);
	text-align: center;
}

.sp-liste-export {
	margin: 0 0 24px;
	text-align: center;
}

/* Seit 2.2.2 (E1683): die Info-Box am Standort - Ortsmarke, heller Grund in der Markenfarbe, abgerundet, kein Rot. */
.sp-ob-standort-info {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 4px 0 16px;
	padding: 12px 14px;
	border: 1px solid #fcd34d;
	border-radius: 12px;
	background: var(--sp-gold-hell);
	color: #422006;
}

.sp-ob-standort-symbol {
	flex: 0 0 22px;
	margin-top: 1px;
	fill: var(--sp-gold-dunkel);
}

.sp-ob-standort-info p {
	margin: 0;
	line-height: 1.5;
}

/* Seit 2.2.2 (E1672): der Kasten "Wer verkauft in Ihrem Online-Shop?" - die Felder zur gewaehlten Art (ohne :has() alle). */
.sp-shop-wer-verkauft {
	margin: 8px 0 16px;
	padding: 12px 14px;
	border: 1px solid #e7d6a6;
	border-radius: 10px;
	background: #fffaf0;
}

.sp-shop-wer-verkauft:not(:has(input[value="person"]:checked)) .sp-shop-wer-person,
.sp-shop-wer-verkauft:not(:has(input[value="firma"]:checked)) .sp-shop-wer-firma {
	display: none;
}

.sp-shop-wer-person,
.sp-shop-wer-firma {
	margin: 0 0 8px 28px;
}

.sp-shop-nicht-bestaetigt ul {
	margin: 4px 0 0;
	padding-left: 20px;
}

/* Seit 2.4.0 Teil 2 (E1861): der Knopf "Betrieb melden" unten auf der Seite eines Betriebs und sein Fenster (ohne JavaScript bedienbar). */
.sp-melden {
	margin: 32px 0 8px;
	text-align: center;
}

.sp-melden-knopf {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 8px;
	color: #6b6f76;
	font-size: 0.9rem;
	text-decoration: underline;
	cursor: pointer;
	list-style: none;
}

.sp-melden-knopf::-webkit-details-marker {
	display: none;
}

.sp-melden-knopf:hover,
.sp-melden-knopf:focus-visible {
	color: #b42318;
}

.sp-melden[open] .sp-melden-knopf {
	color: #b42318;
}

.sp-melden-fenster {
	max-width: 520px;
	margin: 12px auto 0;
	padding: 20px 18px;
	border: 1px solid #f1c4bf;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 12px 32px rgba(17, 24, 39, 0.12);
	text-align: left;
}

.sp-melden-frage {
	margin: 0 0 12px;
	font-size: 1.1rem;
	line-height: 1.35;
}

.sp-melden-formular select,
.sp-melden-formular textarea,
.sp-melden-formular input[type="email"] {
	width: 100%;
	box-sizing: border-box;
}

.sp-melden-falle {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
}

.sp-melden-knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0 0;
}

/* Seit 2.4.0 Teil 2 (E1866): die dringende Aufgabe im Team - offene Meldungen rot ganz oben in "Aufgaben". */
.sp-dringend {
	margin: 0 0 20px;
	padding: 14px 16px;
	border: 1px solid #f1c4bf;
	border-left: 4px solid #b42318;
	border-radius: 10px;
	background: #fef3f2;
}

.sp-dringend h2 {
	margin: 0 0 8px;
	color: #b42318;
	font-size: 1rem;
}

.sp-dringend ul {
	margin: 0 0 8px;
	padding-left: 18px;
}

/* Seit 2.4.0 Teil 4 (E1883, E1887, E1888): Behoerden im Team - Ampel und Countdown, die Akte im Fall, die Mappe; die Druckseite der
   Muster-Antwort (je Sprache ein Blatt, Unterschriftszeile) und der Mappe. */
.sp-ampel {
	display: inline-block;
	margin: 0 8px 0 0;
	padding: 2px 10px;
	border-radius: 99px;
	background: var(--sp-flaeche);
	font-size: 13px;
	font-weight: 700;
}

.sp-ampel[data-ampel="gruen"] {
	background: #d1fae5;
	color: #065f46;
}

.sp-ampel[data-ampel="orange"] {
	background: #ffedd5;
	color: #9a3412;
}

.sp-ampel[data-ampel="rot"] {
	background: #fee2e2;
	color: #991b1b;
}

.sp-ampel[data-ampel="beantwortet"] {
	background: #e5e7eb;
	color: #374151;
}

.sp-ampel-zeile {
	margin: 6px 0 10px;
}

.sp-countdown {
	font-weight: 600;
}

.sp-behoerde,
.sp-behoerden li[data-ampel] {
	border-left: 4px solid var(--sp-linie);
	padding-left: 12px;
}

.sp-behoerde[data-ampel="gruen"],
.sp-behoerden li[data-ampel="gruen"] {
	border-left-color: #10b981;
}

.sp-behoerde[data-ampel="orange"],
.sp-behoerden li[data-ampel="orange"] {
	border-left-color: #f97316;
}

.sp-behoerde[data-ampel="rot"],
.sp-behoerden li[data-ampel="rot"] {
	border-left-color: #dc2626;
}

.sp-behoerde-konto {
	margin: 14px 0 0;
}

.sp-mappe-zeilen li {
	margin: 0 0 6px;
}

.sp-brief {
	font-size: 15px;
	line-height: 1.6;
}

.sp-brief-datum {
	margin: 0 0 18px;
	text-align: right;
}

.sp-brief-betreff {
	margin: 0 0 18px;
}

.sp-brief-unterschrift {
	width: 220px;
	height: 56px;
	margin: 8px 0 4px;
	border-bottom: 1px solid #111827;
}

@media print {
	body.sp-behoerde-druck .sp-brief + .sp-brief {
		break-before: page;
		page-break-before: always;
	}

	body.sp-behoerde-druck .sp-bericht-blatt {
		display: block !important;
	}
}

/* ---------------------------------------------------------- Seit 3.6.0 Teil 1 (E2276, E2277): Tische & Plaetze, "Gast ruft" */

/* Schnell anlegen: "von" und "bis" nebeneinander, so gross wie die anderen Felder. */
.sp-platz-nummern {
	display: flex;
	gap: 12px;
}

.sp-platz-nummern > div {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	min-width: 0;
}

.sp-platz-nummern input[type="number"] {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	font: inherit;
	font-size: 16px;
	color: var(--sp-dunkel);
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-radius: 10px;
}

.sp-platz-nummern input[type="number"]:focus {
	outline: 2px solid var(--sp-fokus);
	outline-offset: 0;
	border-color: var(--sp-fokus);
}

/* Die Kacheln: je Bereich eine Ueberschrift ueber die ganze Breite, darunter die Plaetze nebeneinander. */
.sp-plaetze.sp-platz-kacheln {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 16px;
}

.sp-platz-kacheln > .sp-bereich-kopf {
	display: flex;
	flex: 0 0 100%;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	margin: 12px 0 0;
	padding: 0;
	border-radius: 10px;
}

.sp-platz-kacheln > .sp-bereich-kopf:first-child {
	margin-top: 0;
}

.sp-bereich-name {
	margin: 0;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sp-text);
	overflow-wrap: anywhere;
}

.sp-bereich-mehr {
	flex: 0 0 auto;
	max-width: 100%;
}

.sp-bereich-mehr > summary {
	list-style: none;
	cursor: pointer;
}

.sp-bereich-mehr > summary::-webkit-details-marker {
	display: none;
}

.sp-bereich-mehr[open] {
	flex: 0 0 100%;
	padding: 12px 14px;
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-radius: 12px;
}

.sp-bereich-knoepfe,
.sp-platz-knoepfe,
.sp-platz-knoepfe form {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 8px 0 0;
}

.sp-platz-knoepfe form {
	margin: 0;
}

/* Eine Kachel: der Name auf hellem Gold, ausgeschaltet grau; geoeffnet ueber die ganze Breite. */
.sp-platz-kacheln > .sp-platz {
	flex: 0 0 auto;
	max-width: 100%;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.sp-platz-kacheln > .sp-platz.sp-platz-offen {
	flex: 0 0 100%;
}

.sp-platz-knopf {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 8px;
	min-height: 44px;
	padding: 8px 16px;
	list-style: none;
	cursor: pointer;
	color: var(--sp-dunkel);
	background: var(--sp-gold-hell);
	border: 1px solid var(--sp-gold-hell);
	border-radius: 999px;
}

.sp-platz-knopf::-webkit-details-marker {
	display: none;
}

.sp-platz-knopf .sp-platz-name {
	font-size: 16px;
	font-weight: 700;
}

.sp-platz-knopf.sp-platz-aus {
	color: var(--sp-text);
	background: var(--sp-flaeche);
	border-color: var(--sp-linie);
}

.sp-platz-knopf:focus-visible {
	outline: 2px solid var(--sp-fokus);
	outline-offset: 2px;
}

.sp-platz-kachel[open] > .sp-platz-knopf {
	border-color: var(--sp-gold-dunkel);
}

.sp-platz-panel {
	margin: 8px 0 0;
	padding: 14px 16px;
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-radius: 12px;
}

.sp-platz-panel .sp-platz-form {
	display: flex;
	flex-direction: column;
}

.sp-platz-panel .sp-platz-form .sp-knopf {
	align-self: flex-start;
	margin-top: 12px;
}

/* Ziehen mit der Maus (gast.js Teil 16). */
.sp-plaetze-ziehbar .sp-platz-knopf {
	cursor: grab;
	-webkit-user-select: none;
	user-select: none;
}

.sp-platz-kacheln > .sp-platz.sp-platz-zieht .sp-platz-knopf {
	cursor: grabbing;
	outline: 2px dashed var(--sp-gold-dunkel);
	outline-offset: 2px;
}

.sp-platz-kacheln > .sp-platz.sp-platz-ziel .sp-platz-knopf,
.sp-platz-kacheln > .sp-bereich-kopf.sp-platz-ziel {
	box-shadow: 0 0 0 3px var(--sp-fokus);
}

/* Die Schalter der Einstellungen "Gast ruft": je Zeile Text links, Schalter rechts. */
.sp-schalter-liste {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
}

.sp-schalter-liste > legend {
	margin: 16px 0 4px;
	padding: 0;
}

.sp-gast .sp-schalter-zeile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 48px;
	margin: 0;
	padding: 8px 0;
	border-bottom: 1px solid var(--sp-linie);
	cursor: pointer;
}

.sp-schalter-zeile > span,
.sp-schalter-zeile > label {
	flex: 1 1 auto;
	min-width: 0;
}

.sp-gast .sp-schalter-zeile > input[type="checkbox"] {
	flex: 0 0 auto;
	margin: 0;
}

.sp-gast .sp-schalter-zeile > select,
.sp-gast .sp-schalter-zeile > .spd-wahl {
	flex: 0 0 auto;
	width: auto;
	max-width: 55%;
}

.sp-rufe-alle {
	margin-top: 24px;
}

/* -------------------------------- Seit 3.6.0 Teil 2 (E2292-E2297): Ruf-Karten, Platz und Grund des Gastes, Stand des Rufs */

/* Der Block der Ruf-Karten oben auf jeder Ansicht von Personal und Inhaber. */
.sp-rufkarten .sp-rufe {
	margin: 0 0 20px;
}

.sp-rufkarten-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 12px;
	margin: 0 0 8px;
}

.sp-rufkarten-kopf h2,
.sp-rufkarten .sp-rufkarten-kopf h2 {
	margin: 0;
}

.sp-rufkarten-ton {
	margin: 0;
}

.sp-rufkarten-ton-knopf {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	margin: 0;
	padding: 6px 14px;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--sp-dunkel);
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-radius: 999px;
	cursor: pointer;
}

.sp-rufkarten-ton-knopf[aria-pressed="false"] {
	color: var(--sp-mittel);
}

.sp-rufkarten-ton-knopf:focus-visible {
	outline: 2px solid var(--sp-fokus);
	outline-offset: 2px;
}

/* Eine Karte: der Platz gross, Rahmen in Gold; wer hingeht gruen, ohne Platz orange. */
.sp-ruf.sp-rufkarte {
	border: 2px solid var(--sp-gold);
	border-left-width: 6px;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.sp-ruf.sp-rufkarte.sp-ruf-unterwegs {
	border-color: var(--sp-linie);
	border-left-color: var(--sp-gut);
}

.sp-ruf.sp-rufkarte.sp-rufkarte-unbekannt {
	border-color: #c2410c;
}

.sp-ruf.sp-rufkarte.sp-rufkarte-probe {
	border-style: dashed;
}

.sp-rufkarte-kopf {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px 12px;
}

.sp-rufkarte .sp-ruf-platz {
	margin: 0;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--sp-dunkel);
	overflow-wrap: anywhere;
}

.sp-rufkarte-unbekannt .sp-ruf-platz {
	color: #c2410c;
}

.sp-rufkarte-alter {
	flex: 0 0 auto;
	margin: 4px 0 0;
	padding: 2px 10px;
	font-size: 13px;
	font-weight: 700;
	color: var(--sp-dunkel);
	background: var(--sp-gold-hell);
	border-radius: 999px;
}

.sp-rufkarte-bereich {
	margin: 2px 0 0;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sp-text);
	overflow-wrap: anywhere;
}

.sp-rufkarte-grund {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 8px 0 0;
	font-size: 18px;
	font-weight: 700;
	color: #9a3412;
}

.sp-rufkarte-grund svg {
	flex: 0 0 auto;
}

.sp-rufkarte-wer {
	margin: 6px 0 0;
	font-size: 15px;
	color: var(--sp-text);
	overflow-wrap: anywhere;
}

.sp-rufkarte-wer .sp-ruf-gast {
	color: var(--sp-dunkel);
}

.sp-rufkarte-wer .sp-ruf-art,
.sp-rufkarte-wer .sp-ruf-zeit {
	padding: 0;
	font-size: 15px;
	font-weight: 400;
	color: var(--sp-text);
	background: none;
	border-radius: 0;
}

.sp-rufkarte-weitergeleitet {
	display: inline-block;
	margin: 8px 0 0;
	padding: 2px 10px;
	font-size: 13px;
	font-weight: 700;
	color: #9a3412;
	background: #ffedd5;
	border-radius: 999px;
}

.sp-rufkarte .sp-ruf-stand {
	font-size: 15px;
	font-weight: 700;
	color: #047857;
}

/* Alle Rufe beim Inhaber: offen, aber nicht mehr aktuell (I2, E2290) - grau. */
.sp-ruf-inhaber.sp-ruf-offen.sp-ruf-alt {
	border-left-color: var(--sp-linie);
}

.sp-ruf-alt .sp-ruf-stand {
	font-style: italic;
}

.sp-ruf-grund {
	margin: 4px 0 0;
}

/* Der Gast: die Auswahl des Platzes (E2295). */
.sp-platzwahl {
	margin: 8px 0 16px;
}

.sp-platzwahl-suche {
	margin: 0 0 8px;
}

.sp-platzwahl-suche label {
	display: block;
	margin: 0 0 6px;
	font-weight: 700;
}

.sp-platzwahl-liste,
.sp-platzwahl-extra {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.sp-platzwahl-bereich {
	flex: 0 0 100%;
	margin: 8px 0 0;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sp-text);
	overflow-wrap: anywhere;
}

.sp-platzwahl-eintrag {
	max-width: 100%;
}

.sp-platz-kachel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	min-width: 64px;
	min-height: 48px;
	padding: 8px 16px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--sp-dunkel);
	text-decoration: none;
	background: var(--sp-gold-hell);
	border: 2px solid var(--sp-gold-hell);
	border-radius: 12px;
	overflow-wrap: anywhere;
}

.sp-platz-kachel:hover {
	color: var(--sp-dunkel);
	border-color: var(--sp-gold);
}

.sp-platz-kachel:focus-visible {
	outline: 2px solid var(--sp-fokus);
	outline-offset: 2px;
}

.sp-platz-kachel.sp-platz-kachel-hell {
	background: var(--sp-weiss);
	border-color: var(--sp-linie);
}

.sp-platz-gewaehlt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 8px;
}

.sp-platz-chip {
	display: inline-block;
	max-width: 100%;
	padding: 6px 14px;
	font-weight: 700;
	color: var(--sp-dunkel);
	background: var(--sp-gold-hell);
	border-radius: 999px;
	overflow-wrap: anywhere;
}

.sp-platz-liste-link {
	margin: 6px 0 0;
}

/* Der Gast: der Grund als Kacheln (E2296) - ein Auswahlknopf je Kachel, mit der Tastatur bedienbar. */
.sp-ruf-gruende {
	min-width: 0;
	margin: 16px 0 0;
	padding: 0;
	border: 0;
}

.sp-ruf-gruende legend {
	margin: 0 0 6px;
	padding: 0;
	font-weight: 700;
}

.sp-ruf-gruende-kacheln {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.sp-ruf-grund-kachel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 56px;
	margin: 0;
	padding: 10px 12px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--sp-dunkel);
	background: var(--sp-weiss);
	border: 2px solid var(--sp-linie);
	border-radius: 12px;
	cursor: pointer;
	overflow-wrap: anywhere;
}

.sp-gast .sp-ruf-grund-kachel input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	min-height: 0;
	margin: 0;
	padding: 0;
	opacity: 0;
}

.sp-ruf-grund-kachel svg {
	flex: 0 0 auto;
}

.sp-ruf-grund-kachel:has(input:checked) {
	background: var(--sp-gold-hell);
	border-color: var(--sp-gold);
}

.sp-ruf-grund-kachel:focus-within {
	outline: 2px solid var(--sp-fokus);
	outline-offset: 2px;
}

/* Der Gast: der Stand des eigenen Rufs (E2297). */
.sp-rufstand {
	margin: 16px 0 0;
	padding: 14px 16px;
	background: var(--sp-weiss);
	border: 1px solid var(--sp-linie);
	border-radius: 12px;
}

.sp-rufstand-titel {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 17px;
	font-weight: 800;
	color: var(--sp-dunkel);
	overflow-wrap: anywhere;
}

.sp-rufstand-punkt {
	flex: 0 0 12px;
	width: 12px;
	height: 12px;
	background: var(--sp-gold);
	border-radius: 50%;
}

.sp-rufstand-kommt .sp-rufstand-punkt,
.sp-rufstand-erledigt .sp-rufstand-punkt {
	background: var(--sp-gut);
}

.sp-rufstand .sp-klein {
	margin: 4px 0 0 22px;
}

.sp-rufstand-stufen {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 10px 0 0;
	padding: 0;
	font-size: 14px;
	color: var(--sp-mittel);
	list-style: none;
}

.sp-rufstand-stufen .sp-erreicht {
	font-weight: 700;
	color: #047857;
}

.sp-rufstand-stufen .sp-erreicht::before {
	content: "\2713\00a0";
}

.sp-rufstand .sp-knopf {
	width: 100%;
	margin-top: 12px;
}

/* ------------------------------------- Seit 3.6.0 Teil 3 (E2301-E2304): Ruf-Ton (Hinweis am Knopf) und Theken-Modus */

/* Der Knopf "Ton bei Rufen", solange der Ton noch nicht frei ist ("Fuer den Ton einmal tippen"). */
.sp-rufkarten-ton-knopf[data-sp-ton-wartet] {
	color: var(--sp-dunkel);
	background: var(--sp-gold-hell);
	border-color: var(--sp-gold);
}

/* Der Knopf "Theken-Modus" auf "Punkte buchen" - erscheint nur mit Skript. */
.sp-theke-start {
	margin: 12px 0 0;
}

.sp-theke-start .sp-klein {
	margin: 6px 0 0;
}

.sp-theke-knopf {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Die Flaeche ueber den ganzen Bildschirm - unter den Meldungen, ueber dem Rahmen. */
.sp-theke {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100030;
	overflow-y: auto;
	padding: 16px;
	background: var(--sp-grund);
	color: var(--sp-dunkel);
}

.sp-theke[hidden] {
	display: none;
}

html.sp-theke-an,
html.sp-theke-an body {
	overflow: hidden;
}

.sp-theke-innen {
	max-width: 1100px;
	margin: 0 auto;
}

.sp-theke-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin: 0 0 16px;
}

.sp-theke-titel {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
	color: var(--sp-dunkel);
	overflow-wrap: anywhere;
}

.sp-theke-ende {
	margin: 0;
}

.sp-theke-netz,
.sp-theke-tippen {
	margin: 0 0 12px;
	padding: 10px 14px;
	font-size: 16px;
	font-weight: 700;
	border-radius: 12px;
}

.sp-theke-netz {
	color: #9a3412;
	background: #ffedd5;
}

.sp-theke-tippen {
	color: var(--sp-dunkel);
	background: var(--sp-gold-hell);
}

.sp-theke-leer {
	margin: 12vh 0 0;
	font-size: 28px;
	font-weight: 800;
	text-align: center;
	color: var(--sp-text);
}

.sp-theke-satz {
	margin: 12px 0 0;
	text-align: center;
}

/* Die Rufe gross. */
.sp-theke .sp-rufkarte .sp-ruf-platz {
	font-size: 44px;
}

.sp-theke .sp-rufkarte-grund {
	font-size: 24px;
}

.sp-theke .sp-rufkarte-wer,
.sp-theke .sp-rufkarte .sp-ruf-stand {
	font-size: 18px;
}

.sp-theke .sp-ruf-knoepfe .sp-knopf {
	min-height: 56px;
	font-size: 20px;
}

@media (min-width: 900px) {
	.sp-theke .sp-rufkarten-liste {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
}