/*
 * SiamPoints - der Design-Baukasten (seit 2.6.0, Schritt 37a+37b, E1930 bis E1945; Konzept Bau-Konzepte/2.6.0-Design-Baukasten.md).
 *
 * Laedt auf jeder Seite als LETZTE Gestaltung (SiamPoints_Design::kopf(), nur Bildschirm - die Druckboegen bleiben) und legt die
 * Regeln fuer alle Bereiche darueber; die alten Dateien (gast.css, website.css, verwaltung.css, geoapify.css, anbieter.css) bleiben
 * Byte fuer Byte (Technik wie ProfileOS, E1931). Die Anmelde-Knoepfe der Anbieter bleiben nach deren Vorgaben (E1933).
 *
 * Die Farb-Regel (E1932): jede Regel mit Schriftfarbe nennt ihren Grund - background-color derselben Regel oder --spd-auf (der Grund,
 * auf dem die Schrift steht); jede Regel mit Grundfarbe nennt ihre Schrift oder --spd-flaeche: 1 (Flaeche ohne Text). Der Pruefstand
 * (pruefstand-260.php) rechnet jedes Paar nach: mindestens 4,5 : 1, in jedem Zustand. Keine Durchsichtigkeit an Text.
 *
 *   1 Palette            2 Grundlagen (iPhone/Safari)   3 Knoepfe        4 Reihen          5 X-Knoepfe
 *   6 Raender, Leisten   7 Felder ohne Skript (37b)     8 Bausteine von design.js (Auswahl, Mehrfachauswahl, Uhrzeit)
 *   8a Datumswaehler (seit 3.0.0 Teil 4, E2087-E2094)
 *   9 Korrekturen der alten Dateien (derselbe Selektor)
 *   13 Schrift: SP Inter und SP Plex Thai, Stapel je Sprache, Logo, Ueberschriften 600 (seit 3.9.0 Teil 2, E2513-E2516)
 *   14 Mass-System und Bausteine Design 3, Variante B (seit 3.9.0 Teil 2, E2502, E2507, E2517-E2520) - ab 13 nur aus der Skala (H141)
 *   16 Seiten der Betriebe: Inhaber und Personal in Variante B (seit 3.9.0 Teil 5, E2546-E2556) - nur unter body.spd-d3-seite (H157)
 *      16h die Zeile "Angemeldet" des Personals und die Abstaende auf "Punkte buchen" (seit 3.9.0 Teil 5b, E2567, E2569, E2570)
 *      16i Befunde der Design-Pruefung, erste Gruppe (seit 3.9.0 Teil 5c, E2579, E2585): Kontrast, Meldungen, Knoepfe gleich, Tipp-Flaechen, alte Reste
 *          dazu der Rest in Teil 5d (seit 3.9.0 Teil 5d, E2586-E2592): Luecken, Tipp-Flaechen, alte Reste, Namen, Breite, ohne Skript
 *   17 Sperrbildschirm wie die Bausteine von B (seit 3.9.0 Teil 5d, E2586): eigener Selektor body.sp-sperrbildschirm
 *   18 Seiten der Gaeste in Variante B (seit 3.9.0 Teil 6, E2610-E2620) - nur unter body.spd-d3-seite.sp-gast (H180), nie in der Punkte-Darstellung (H179)
 *   19 Anmeldung und Registrierung in Variante B (seit 3.9.0 Teil 7, E2637-E2641) - die Karte .spd-d3-anmeldung, nur unter body.spd-d3-seite (H187)
 */

/* ------------------------------------------------------------ 1 Palette */

:root {
	--spd-text: #0f172a;
	--spd-weiss: #ffffff;
	--spd-grund: #f8fafc;
	--spd-grau: #f1f5f9;
	--spd-grau-tief: #e2e8f0;
	--spd-linie: #cbd5e1;
	--spd-rahmen: #64748b;
	--spd-leise: #64748b;
	--spd-leise-tief: #475569;
	--spd-gold: #f59e0b;
	--spd-gold-tief: #d97706;
	--spd-gold-hell: #fef3c7;
	--spd-gold-schrift: #b45309;
	--spd-rot: #b91c1c;
	--spd-rot-hell: #fef2f2;
	--spd-rot-tief: #fee2e2;
	--spd-gruen: #047857;
	--spd-blau: #1d4ed8;
	--spd-orange: #c2410c;
	--spd-dunkel-2: #1e293b;
	--spd-dunkel-3: #334155;
	--spd-google: #1a73e8;
	--spd-google-2: #1765cc;
	--spd-google-3: #185abc;
	--spd-ring: #1d4ed8;
	--spd-rand: 16px;
	--spd-schatten: 0 12px 32px rgba(15, 23, 42, 0.18);
}

/* ------------------------------------------------ 2 Grundlagen (iPhone/Safari, E1935) */

button,
[role="button"],
summary,
a.sp-knopf,
a.sw-knopf {
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

/* Text-Felder ohne die Optik des Handys (keine Schatten, keine runden Ecken von iOS); Datum bleibt bis 38 (E1377). */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
	-webkit-appearance: none;
	appearance: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

/* Am iPhone zoomt Safari in jedes Feld unter 16 px - keins ist kleiner (E1935); die zwei kleineren der alten Dateien gezielt. */
select,
textarea {
	font-size: max(16px, 1em);
}

.sp-filterzeile select,
.sp-inhaber input[type="file"] {
	font-size: 16px;
}

/* ------------------------------------------------------------ 3 Knoepfe (E1934) */

.sp-knopf,
.sw-knopf,
.sp-fenster-zu,
.sp-melden-knopf,
.sp-reiter-punkt,
.spd-knopf {
	font-weight: 500 !important;
	text-align: center !important;
	text-decoration: none !important;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	line-height: 1.3;
	text-wrap: balance;
	cursor: pointer;
}

.sp-knopf,
.sw-knopf,
.spd-knopf {
	padding: 12px 20px;
}

.sp-knopf,
.spd-knopf {
	color: var(--spd-text);
	background-color: var(--spd-gold);
	border-color: var(--spd-gold);
}

.sp-knopf:hover,
.sp-knopf:focus-visible,
.spd-knopf:hover,
.spd-knopf:focus-visible {
	color: var(--spd-text);
	background-color: var(--spd-gold-tief);
	border-color: var(--spd-gold-tief);
}

.sp-knopf:active,
.spd-knopf:active {
	color: var(--spd-text);
	background-color: var(--spd-gold-tief);
	border-color: var(--spd-gold-tief);
}

.sp-knopf:focus-visible,
.sw-knopf:focus-visible,
.spd-knopf:focus-visible,
.sp-fenster-zu:focus-visible,
.sp-melden-knopf:focus-visible,
.sp-reiter-punkt:focus-visible {
	outline: 2px solid var(--spd-ring);
	outline-offset: 2px;
}

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

.sp-knopf-hell:hover,
.sp-knopf-hell:focus-visible,
.spd-knopf-hell:hover,
.spd-knopf-hell:focus-visible {
	color: var(--spd-text);
	background-color: var(--spd-grau);
	border-color: var(--spd-text);
}

.sp-knopf-hell:active,
.spd-knopf-hell:active {
	color: var(--spd-text);
	background-color: var(--spd-grau-tief);
	border-color: var(--spd-text);
}

.sp-knopf-loeschen,
.sp-knopf.sp-knopf-loeschen {
	color: var(--spd-rot);
	background-color: var(--spd-weiss);
	border-color: var(--spd-rot);
}

.sp-knopf.sp-knopf-loeschen:hover,
.sp-knopf.sp-knopf-loeschen:focus-visible {
	color: var(--spd-rot);
	background-color: var(--spd-rot-hell);
	border-color: var(--spd-rot);
}

.sp-knopf.sp-knopf-loeschen:active {
	color: var(--spd-rot);
	background-color: var(--spd-rot-tief);
	border-color: var(--spd-rot);
}

/* Der Knopf "Google-Bewertung" - kein Anmeldeknopf (E1933). Doppelte Klasse: ".sp-gast a" (gast.css) faerbt Links sonst dunkel. */
.sp-knopf-google,
.sp-knopf.sp-knopf-google {
	color: var(--spd-weiss);
	background-color: var(--spd-google);
	border-color: var(--spd-google);
}

.sp-knopf.sp-knopf-google:hover,
.sp-knopf.sp-knopf-google:focus-visible {
	color: var(--spd-weiss);
	background-color: var(--spd-google-2);
	border-color: var(--spd-google-2);
}

.sp-knopf.sp-knopf-google:active {
	color: var(--spd-weiss);
	background-color: var(--spd-google-3);
	border-color: var(--spd-google-3);
}

/* Die Website (sw-knopf-gold, -rahmen, -dunkel). */
.sw-knopf-gold {
	color: var(--spd-text);
	background-color: var(--spd-gold);
}

.sw-knopf-gold:hover,
.sw-knopf-gold:focus-visible,
.sw-knopf-gold:active {
	color: var(--spd-text);
	background-color: var(--spd-gold-tief);
}

.sw-knopf-rahmen {
	color: var(--spd-text);
	background-color: var(--spd-weiss);
}

.sw-knopf-rahmen:hover,
.sw-knopf-rahmen:focus-visible {
	color: var(--spd-text);
	background-color: var(--spd-grau);
}

.sw-knopf-rahmen:active {
	color: var(--spd-text);
	background-color: var(--spd-grau-tief);
}

.sw-knopf-dunkel {
	color: var(--spd-weiss);
	background-color: var(--spd-text);
}

.sw-knopf-dunkel:hover,
.sw-knopf-dunkel:focus-visible {
	color: var(--spd-weiss);
	background-color: var(--spd-dunkel-2);
}

.sw-knopf-dunkel:active {
	color: var(--spd-weiss);
	background-color: var(--spd-dunkel-3);
}

/* Gesperrt und beim Senden: lesbar, nie durchsichtig (E1932). */
.sp-knopf:disabled,
.sp-knopf[aria-disabled="true"],
.sw-knopf:disabled,
.sw-knopf[aria-disabled="true"],
.spd-knopf:disabled,
.spd-knopf[aria-disabled="true"] {
	color: var(--spd-leise-tief);
	background-color: var(--spd-grau);
	border-color: var(--spd-linie);
	cursor: not-allowed;
	opacity: 1;
	transform: none;
}

.sp-sendet,
.sw-form .sp-sendet,
.sp-foto-formular .sp-knopf[disabled] {
	color: var(--spd-leise-tief);
	background-color: var(--spd-grau);
	border-color: var(--spd-linie);
	cursor: progress;
	opacity: 1 !important;
}

.sp-foto-formular .sp-knopf[disabled] {
	cursor: not-allowed;
}

/* Kleine und niedrige Knoepfe auf 44 px - nur angehoben, nie gesenkt (E1934). */
.sp-gast .sp-knopf-klein,
.sp-team-schritt .sp-knopf,
.sp-treue-weg .sp-knopf,
.sp-team-haken .sp-knopf {
	min-height: 44px;
}

.sp-menue-zu {
	min-height: 44px;
	padding: 0 16px;
	font-weight: 500;
	color: var(--spd-text);
	background-color: var(--spd-grau);
}

.sp-menue-zu:hover,
.sp-menue-zu:focus-visible {
	color: var(--spd-text);
	background-color: var(--spd-grau-tief);
}

.sp-melden-knopf {
	color: var(--spd-leise-tief);
	--spd-auf: #ffffff;
}

/* ------------------------------------------------------------ 4 Reihen (E1934): gleich breit, gleich hoch */

.sp-ruf-knoepfe,
.sp-res-knoepfe,
.sp-reiter,
.sw-knoepfe,
.spd-reihe {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
	align-items: stretch;
	gap: 12px;
}

.sp-knopfreihe {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
	align-items: stretch;
}

.sp-knopfreihe > form,
.sp-ruf-knoepfe > form,
.sp-res-knoepfe > form,
.sw-knoepfe > form,
.spd-reihe > form {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sp-knopfreihe > .sp-knopf,
.sp-knopfreihe > form > .sp-knopf,
.sp-ruf-knoepfe .sp-knopf,
.sp-res-knoepfe .sp-knopf,
.sw-knoepfe > .sw-knopf,
.sw-knoepfe > form > .sw-knopf,
.spd-reihe > .sp-knopf,
.spd-reihe > form > .sp-knopf {
	flex: 1 1 auto;
	width: 100%;
	align-self: stretch;
}

.sp-reiter-punkt {
	width: 100%;
}

/* ------------------------------------------------------------ 5 X-Knoepfe (E1934): 44 px Tippflaeche, im Kreis, genau mittig */

.spd-x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	font: inherit;
	line-height: 1;
	color: var(--spd-text);
	background-color: var(--spd-grau);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.spd-x:hover,
.spd-x:focus-visible {
	color: var(--spd-text);
	background-color: var(--spd-grau-tief);
}

.spd-x:focus-visible {
	outline: 2px solid var(--spd-ring);
	outline-offset: 2px;
}

.spd-x svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* Auf Fotos: der sichtbare Kreis 32 px, die Tippflaeche 44 px (durchsichtiger Rand). */
.sp-ablage-weg,
.sp-foto-weg,
.sp-foto-hoch {
	width: 44px;
	height: 44px;
	min-width: 44px;
	border: 6px solid transparent;
	background-clip: padding-box;
	color: var(--spd-weiss);
	background-color: var(--spd-text);
	font-weight: 500;
	line-height: 1;
}

.sp-ablage-weg {
	top: 0;
	right: 0;
}

/* ------------------------------------------------------------ 6 Raender und Leisten (E1935) */

.spd-leiste-unten {
	position: sticky;
	bottom: 0;
	z-index: 50;
	margin-left: calc(-1 * var(--spd-rand));
	margin-right: calc(-1 * var(--spd-rand));
	padding: 12px var(--spd-rand);
	padding-bottom: max(12px, env(safe-area-inset-bottom));
	color: var(--spd-text);
	background-color: var(--spd-weiss);
	box-shadow: 0 -1px 0 var(--spd-grau-tief), 0 -8px 24px rgba(15, 23, 42, 0.06);
}

.sw-loesungen-panel {
	max-height: calc(100dvh - 110px);
	overflow-y: auto;
}

/* ------------------------------------------------------------ 7 Felder ohne Skript (37b, E1936) */

/* Auswahlfeld mit eigenem Pfeil - ohne Skript bedienbar wie bisher. */
body select:not([multiple]):not([size]) {
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px 18px;
}

/* Haken und Auswahlknoepfe eigens gezeichnet - Groesse aus der alten Regel, sonst 22 px. */
:where(input[type="checkbox"], input[type="radio"]) {
	width: 22px;
	height: 22px;
}

input[type="checkbox"],
input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	display: inline-grid;
	place-content: center;
	flex: 0 0 auto;
	margin: 2px 0 0;
	border: 2px solid var(--spd-rahmen);
	border-radius: 6px;
	background-color: var(--spd-weiss);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 80% 80%;
	cursor: pointer;
	--spd-flaeche: 1;
}

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

input[type="checkbox"]:checked {
	border-color: var(--spd-text);
	background-color: var(--spd-text);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--spd-flaeche: 1;
}

input[type="radio"]:checked {
	border-color: var(--spd-text);
	background-color: var(--spd-weiss);
	background-image: radial-gradient(circle, #0f172a 0 42%, transparent 46%);
	background-size: 100% 100%;
	--spd-flaeche: 1;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
	outline: 2px solid var(--spd-ring);
	outline-offset: 2px;
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
	border-color: var(--spd-linie);
	background-color: var(--spd-grau);
	cursor: not-allowed;
	--spd-flaeche: 1;
}

input[type="checkbox"][aria-invalid="true"],
input[type="radio"][aria-invalid="true"] {
	border-color: var(--spd-rot);
}

/* Schalter: ein Haken mit role="switch". */
input[type="checkbox"][role="switch"] {
	width: 48px;
	height: 28px;
	border-radius: 999px;
	border-color: var(--spd-rahmen);
	background-color: var(--spd-rahmen);
	background-image: radial-gradient(circle at 12px 50%, #ffffff 0 9px, transparent 10px);
	background-size: 100% 100%;
	transition: background-position 0.15s ease;
	--spd-flaeche: 1;
}

input[type="checkbox"][role="switch"]:checked {
	border-color: var(--spd-gruen);
	background-color: var(--spd-gruen);
	background-image: radial-gradient(circle at calc(100% - 12px) 50%, #ffffff 0 9px, transparent 10px);
	--spd-flaeche: 1;
}

/* ------------------------------------------------------------ 8 Bausteine von design.js (E1937-E1939) */

/* Das echte Feld bleibt im Formular (Wert, Pflicht, Pruefung), unsichtbar - der Fokus geht sofort an den eigenen Knopf. */
.spd-versteckt {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	opacity: 0;
	pointer-events: none;
	clip-path: inset(50%);
	white-space: nowrap;
	--spd-flaeche: 1;
}

.spd-wahl {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-width: 0;
	min-height: 48px;
	margin: 0;
	padding: 10px 12px 10px 14px;
	font: inherit;
	font-size: max(16px, 1em);
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
	color: var(--spd-text);
	background-color: var(--spd-weiss);
	border: 1px solid var(--spd-linie);
	border-radius: 10px;
	cursor: pointer;
}

.spd-wahl:hover {
	color: var(--spd-text);
	background-color: var(--spd-grund);
	border-color: var(--spd-rahmen);
}

.spd-wahl:focus-visible,
.spd-wahl[aria-expanded="true"] {
	color: var(--spd-text);
	background-color: var(--spd-weiss);
	border-color: var(--spd-ring);
	outline: 2px solid var(--spd-ring);
	outline-offset: 0;
}

.spd-wahl.spd-fehler {
	border-color: var(--spd-rot);
}

.spd-wahl:disabled {
	color: var(--spd-leise-tief);
	background-color: var(--spd-grau);
	cursor: not-allowed;
}

.spd-wahl-wert {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.spd-wahl-leer .spd-wahl-wert {
	color: var(--spd-leise);
	--spd-auf: #ffffff;
}

.spd-wahl-pfeil {
	display: block;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
}

.spd-wahl[aria-expanded="true"] .spd-wahl-pfeil {
	transform: rotate(180deg);
}

/* Mehrfachauswahl: die Chips der gewaehlten Eintraege ueber dem Knopf. */
.spd-mehr {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.spd-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.spd-chips:empty {
	display: none;
}

.spd-chip {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	min-height: 44px;
	padding: 0 0 0 14px;
	font-size: 15px;
	line-height: 1.3;
	color: var(--spd-text);
	background-color: var(--spd-gold-hell);
	border-radius: 999px;
	overflow-wrap: anywhere;
}

.spd-chip .spd-x {
	width: 44px;
	height: 44px;
	color: var(--spd-text);
	background-color: transparent;
	--spd-auf: #fef3c7;
}

.spd-chip .spd-x:hover,
.spd-chip .spd-x:focus-visible {
	color: var(--spd-text);
	background-color: var(--spd-grau-tief);
}

.spd-chip .spd-x svg {
	width: 16px;
	height: 16px;
}

/* Die Liste: am Rechner unter dem Feld, am Handy als Blatt von unten (E1937). */
.spd-hinter {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background-color: rgba(15, 23, 42, 0.45);
	--spd-flaeche: 1;
}

.spd-liste {
	position: fixed;
	z-index: 100001;
	display: flex;
	flex-direction: column;
	min-width: 220px;
	max-height: 320px;
	overflow-y: auto;
	color: var(--spd-text);
	background-color: var(--spd-weiss);
	border: 1px solid var(--spd-grau-tief);
	border-radius: 12px;
	box-shadow: var(--spd-schatten);
	font-size: 16px;
	line-height: 1.4;
}

.spd-liste.spd-blatt {
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
	width: auto;
	min-width: 0;
	max-height: 85dvh;
	overflow-y: auto;
	border: 0;
	border-radius: 16px 16px 0 0;
	padding-bottom: env(safe-area-inset-bottom);
	animation: spd-blatt-ein 0.2s ease-out;
}

@keyframes spd-blatt-ein {
	from {
		transform: translateY(24px);
	}

	to {
		transform: none;
	}
}

.spd-blatt-kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px var(--spd-rand) 8px;
	border-bottom: 1px solid var(--spd-grau-tief);
}

.spd-blatt-titel {
	font-weight: 600;
	color: var(--spd-text);
	--spd-auf: #ffffff;
	overflow-wrap: anywhere;
}

.spd-liste-suche {
	padding: 12px 12px 8px;
}

.spd-liste.spd-blatt .spd-liste-suche {
	padding: 12px var(--spd-rand) 8px;
}

.spd-suche {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 8px 12px;
	font: inherit;
	font-size: 16px;
	color: var(--spd-text);
	background-color: var(--spd-weiss);
	border: 1px solid var(--spd-linie);
	border-radius: 10px;
}

.spd-suche:focus {
	color: var(--spd-text);
	background-color: var(--spd-weiss);
	border-color: var(--spd-ring);
	outline: 2px solid var(--spd-ring);
	outline-offset: 0;
}

.spd-suche::placeholder {
	color: var(--spd-leise);
	--spd-auf: #ffffff;
	opacity: 1;
}

.spd-liste-knoepfe {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding: 0 12px 8px;
}

.spd-liste.spd-blatt .spd-liste-knoepfe,
.spd-liste.spd-blatt .spd-liste-fuss {
	padding-left: var(--spd-rand);
	padding-right: var(--spd-rand);
}

.spd-liste .spd-knopf,
.spd-liste .spd-knopf-hell {
	margin: 0;
	padding: 10px 12px;
	font: inherit;
	font-size: 15px;
	border-width: 1px;
	border-style: solid;
	border-radius: 10px;
}

.spd-eintraege {
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.spd-eintraege:focus {
	outline: none;
}

.spd-eintrag {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 10px 14px;
	color: var(--spd-text);
	background-color: var(--spd-weiss);
	cursor: pointer;
	overflow-wrap: anywhere;
}

.spd-liste.spd-blatt .spd-eintrag {
	padding-left: var(--spd-rand);
	padding-right: var(--spd-rand);
}

.spd-eintrag:hover,
.spd-eintrag.spd-aktiv {
	color: var(--spd-text);
	background-color: var(--spd-grau);
}

.spd-eintrag[aria-selected="true"] {
	color: var(--spd-text);
	background-color: var(--spd-gold-hell);
}

.spd-eintrag[aria-selected="true"].spd-aktiv {
	color: var(--spd-text);
	background-color: var(--spd-gold-hell);
	box-shadow: inset 3px 0 0 var(--spd-gold-tief);
}

.spd-eintrag.spd-aktiv {
	box-shadow: inset 3px 0 0 var(--spd-ring);
}

.spd-eintrag[aria-disabled="true"] {
	color: var(--spd-leise-tief);
	background-color: var(--spd-weiss);
	cursor: not-allowed;
	text-decoration: line-through;
}

.spd-haken {
	display: inline-grid;
	place-content: center;
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	border: 2px solid var(--spd-rahmen);
	border-radius: 6px;
	background-color: var(--spd-weiss);
	--spd-flaeche: 1;
}

.spd-eintrag[aria-selected="true"] .spd-haken {
	border-color: var(--spd-text);
	color: var(--spd-weiss);
	background-color: var(--spd-text);
}

.spd-haken svg {
	width: 16px;
	height: 16px;
	visibility: hidden;
}

.spd-eintrag[aria-selected="true"] .spd-haken svg {
	visibility: visible;
}

.spd-gruppe {
	padding: 12px 14px 4px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--spd-leise-tief);
	--spd-auf: #ffffff;
}

.spd-keine {
	margin: 0;
	padding: 16px;
	color: var(--spd-leise-tief);
	--spd-auf: #ffffff;
}

.spd-liste-fuss {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 8px 12px 12px;
	border-top: 1px solid var(--spd-grau-tief);
}

.spd-liste-fuss .spd-knopf,
.spd-liste-fuss .spd-knopf-hell {
	min-width: 96px;
}

/* Uhrzeit (E1939): zwei Spalten, Stunden und Minuten. */
.spd-zeit-spalten {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	flex: 1 1 auto;
	min-height: 0;
	height: 264px;
}

.spd-zeit-spalte {
	display: flex;
	flex-direction: column;
	min-height: 0;
	border-right: 1px solid var(--spd-grau-tief);
}

.spd-zeit-spalte:last-child {
	border-right: 0;
}

.spd-zeit-titel {
	padding: 8px 14px 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--spd-leise-tief);
	--spd-auf: #ffffff;
}

.spd-zeit-spalte .spd-eintrag {
	justify-content: center;
	font-variant-numeric: tabular-nums;
}

html.spd-offen {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.spd-liste.spd-blatt {
		animation: none;
	}
}

/* ------------------------------------------------------------ 8a Datumswaehler (3.0.0 Teil 4, E2053, E2087-E2094) */

/* Nur Paare, die es schon gibt (E2093) - mit White Label wirken die Farben des Betriebs ueber die Variablen, aussehen.css bleibt unberuehrt. */
.spd-datum-koerper {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px;
}

.spd-liste.spd-blatt .spd-datum-koerper {
	padding-left: var(--spd-rand);
	padding-right: var(--spd-rand);
}

/* Zeitraum: zwei Reiter mit den Beschriftungen der Felder und dem Wert. */
.spd-bereich {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.spd-bereich-reiter {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 2px;
	min-width: 0;
	min-height: 56px;
	margin: 0;
	padding: 8px 12px;
	font: inherit;
	font-size: 15px;
	line-height: 1.3;
	text-align: left;
	color: var(--spd-text);
	background-color: var(--spd-grau);
	border: 2px solid transparent;
	border-radius: 10px;
	cursor: pointer;
}

.spd-bereich-reiter[aria-pressed="true"] {
	color: var(--spd-text);
	background-color: var(--spd-weiss);
	border-color: var(--spd-ring);
}

.spd-bereich-reiter:focus-visible {
	outline: 2px solid var(--spd-ring);
	outline-offset: 2px;
}

.spd-bereich-titel {
	font-size: 13px;
	font-weight: 600;
	color: var(--spd-leise-tief);
	--spd-auf: var(--spd-grau);
	overflow-wrap: anywhere;
}

.spd-bereich-reiter[aria-pressed="true"] .spd-bereich-titel {
	color: var(--spd-leise-tief);
	--spd-auf: var(--spd-weiss);
}

.spd-bereich-wert {
	overflow-wrap: anywhere;
}

/* Schnellwahl: eine Reihe, am Handy seitlich zu schieben. */
.spd-schnell {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 2px 0 4px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.spd-schnell-knopf {
	flex: 0 0 auto;
	min-height: 44px;
	margin: 0;
	padding: 8px 14px;
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--spd-text);
	background-color: var(--spd-grau);
	border: 1px solid var(--spd-grau-tief);
	border-radius: 999px;
	cursor: pointer;
}

.spd-schnell-knopf:hover {
	color: var(--spd-text);
	background-color: var(--spd-grau-tief);
}

.spd-schnell-knopf:focus-visible {
	outline: 2px solid var(--spd-ring);
	outline-offset: 2px;
}

/* Ein oder zwei Monate (am Rechner beim Zeitraum ab 720 px). */
.spd-monate {
	display: flex;
	justify-content: center;
	gap: 24px;
}

.spd-monat {
	flex: 0 0 auto;
}

.spd-monat-kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	min-height: 44px;
	margin-bottom: 4px;
}

.spd-monat-titel {
	flex: 1 1 auto;
	font-weight: 600;
	text-align: center;
	color: var(--spd-text);
	--spd-auf: #ffffff;
	overflow-wrap: anywhere;
}

.spd-monat-platz {
	flex: 0 0 44px;
	width: 44px;
}

.spd-monat-knopf {
	display: inline-grid;
	place-content: center;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	color: var(--spd-text);
	background-color: var(--spd-weiss);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.spd-monat-knopf:hover {
	color: var(--spd-text);
	background-color: var(--spd-grau);
}

.spd-monat-knopf:focus-visible {
	outline: 2px solid var(--spd-ring);
	outline-offset: 0;
}

.spd-monat-knopf:disabled {
	color: var(--spd-leise);
	background-color: var(--spd-weiss);
	cursor: not-allowed;
}

.spd-monat-knopf svg {
	display: block;
	width: 20px;
	height: 20px;
}

.spd-kalender {
	margin: 0 auto;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
}

.spd-kalender th {
	width: 44px;
	height: 32px;
	padding: 0;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	color: var(--spd-leise-tief);
	background-color: var(--spd-weiss);
	border: 0;
}

.spd-kalender td {
	padding: 1px 0;
	text-align: center;
	background: none;
	border: 0;
}

/* Ein Tag: 44 px zum Tippen, die Zahl genau in der Mitte. */
.spd-tag {
	display: inline-grid;
	place-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	font: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--spd-text);
	background-color: var(--spd-weiss);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.spd-tag:hover {
	color: var(--spd-text);
	background-color: var(--spd-grau);
}

.spd-tag:focus-visible {
	outline: 2px solid var(--spd-ring);
	outline-offset: 0;
}

.spd-tag[aria-current="date"] {
	font-weight: 600;
	box-shadow: inset 0 0 0 2px var(--spd-rahmen);
}

.spd-tag.spd-tag-spanne,
.spd-tag.spd-tag-spanne:hover {
	color: var(--spd-text);
	background-color: var(--spd-gold-hell);
	border-radius: 10px;
}

.spd-tag.spd-tag-wahl,
.spd-tag.spd-tag-wahl:hover {
	font-weight: 600;
	color: var(--spd-weiss);
	background-color: var(--spd-text);
}

.spd-tag[aria-disabled="true"],
.spd-tag[aria-disabled="true"]:hover {
	color: var(--spd-leise);
	background-color: var(--spd-weiss);
	cursor: not-allowed;
}

/* Datum mit Uhrzeit: oben der gewaehlte Tag und "Datum aendern", darunter Stunde und Minute (wie die Uhrzeit, E2092). */
.spd-datum-zeitkopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.spd-datum-gewaehlt {
	font-weight: 600;
	color: var(--spd-text);
	--spd-auf: #ffffff;
	overflow-wrap: anywhere;
}

/* Sehr schmale Handys (unter 360 px): die Woche passt ohne Schieben. */
@media (max-width: 359px) {
	.spd-liste.spd-blatt .spd-datum-koerper {
		padding-left: 6px;
		padding-right: 6px;
	}

	.spd-tag,
	.spd-kalender th {
		width: 42px;
	}
}

/* ------------------------------------------------------------ 9 Korrekturen der alten Dateien (E1932) */

/* Leise Schrift: #94a3b8 (2,45 : 1) wird #64748b (4,76 : 1 auf Weiss). */
.sp-karte-zeit,
.sp-buchung-storniert .sp-buchung-punkte,
.sp-buchung-storniert.sp-buchung-einloesung .sp-buchung-punkte,
.sp-zustand-geloescht,
.sp-uebernahme[data-stand="storniert"] .sp-uebernahme-punkte {
	color: var(--spd-leise);
	--spd-auf: #ffffff;
}

.sp-fuss {
	color: var(--spd-leise);
	--spd-auf: #f8fafc;
}

/* Symbole (Pfeile, Punkte): dieselbe leise Farbe. */
.sp-karte-link::after,
.sp-kachel::after,
.sp-gruppe summary::after,
.sp-team-schritt-name::before {
	color: var(--spd-leise);
	--spd-auf: #ffffff;
}

.sp-foto-fehlt {
	color: var(--spd-leise-tief);
	background-color: var(--spd-grau);
}

/* Gruen als Schrift: #10b981 (2,42 : 1) wird #047857 (5,48 : 1). */
.sp-haekchen,
.sp-af-keine,
.sp-team-schritt[data-zustand="erledigt"] .sp-team-schritt-name::before,
.sw-vertrauen svg {
	color: var(--spd-gruen);
	--spd-auf: #ffffff;
}

/* Gold als Schrift: #d97706 (3,04 : 1) wird #b45309 (5,02 : 1) - "Gold nie als Textfarbe auf Weiss" (Dokument 01). */
.sp-shop-karte-preis,
.sp-shop-preis,
.sp-shop-stand,
.sp-menue-punkt svg,
.sp-ablage-symbol,
.sw-nav .sw-loesungen-alle,
.sw-menue-panel .sw-menue-alle {
	color: var(--spd-gold-schrift);
	--spd-auf: #ffffff;
}

/* Rot als Schrift: #ef4444 (3,60 : 1) wird #b91c1c (6,47 : 1). */
.sp-ab-rot,
.sp-karte-gesperrt,
.sp-shop-aus,
.sp-abholung-offen {
	color: var(--spd-rot);
	--spd-auf: #ffffff;
}

/* Blau als Schrift: #3b82f6 (3,52 : 1) wird #1d4ed8 (6,70 : 1). */
.sp-backupweg > summary {
	color: var(--spd-blau);
	--spd-auf: #ffffff;
}

/* Durchsichtige Schrift wird deckend - "aus" bleibt erkennbar an der leisen Farbe. */
.sp-code-abgelaufen .sp-code,
.sp-code-abgelaufen .sp-code-hinweis,
.sp-res-aus,
.sp-menue-aus,
.sp-ob-hinweis,
.sp-to-angaben dt,
.sp-shop-code-aus {
	opacity: 1;
	color: var(--spd-leise-tief);
	--spd-auf: #ffffff;
}

.sp-team-mitglied[data-zustand="gesperrt"] {
	opacity: 1;
	color: var(--spd-leise-tief);
	background-color: var(--spd-grau);
}

.sp-banner-name,
.sp-banner-hinweis {
	opacity: 1;
}

.sp-liste-mehr[aria-busy="true"] {
	opacity: 1;
	color: var(--spd-leise-tief);
	background-color: var(--spd-grau);
	cursor: progress;
}

/* Sterne: leere Sterne mit deutlichem Umriss (3 : 1 fuer Symbole). */
.sp-sterne-reihe label svg {
	stroke: var(--spd-rahmen);
}

/* Geoapify laedt nach dieser Datei - darum mit "body" davor. */
body .sp-geo-fuss {
	color: var(--spd-leise);
	--spd-auf: #ffffff;
}

body .sp-geo-symbol {
	color: var(--spd-orange);
	--spd-auf: #ffffff;
}

/* ------------------------------------------------------------ 10 Meldungen (37c, E1946, E1947): Popup nach dem Speichern, Fehler-Popup */

/* Oben fest, rechts; am Handy ueber die Breite mit 16 px Rand; unter der Leiste von WordPress (32 px, am Handy 46 px). */
.spd-meldungen {
	position: fixed;
	top: max(16px, env(safe-area-inset-top));
	right: max(16px, env(safe-area-inset-right));
	z-index: 100050;
	display: grid;
	gap: 12px;
	width: min(440px, calc(100vw - 32px));
	pointer-events: none;
}

.wp-toolbar .spd-meldungen,
.admin-bar .spd-meldungen {
	top: 48px;
}

@media (max-width: 782px) {
	.wp-toolbar .spd-meldungen,
	.admin-bar .spd-meldungen {
		top: 62px;
	}
}

@media (max-width: 640px) {
	.spd-meldungen {
		left: max(16px, env(safe-area-inset-left));
		right: max(16px, env(safe-area-inset-right));
		width: auto;
	}
}

.spd-meldung {
	position: relative;
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr) 44px;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 12px 12px 18px 16px;
	font-size: 15px;
	line-height: 1.45;
	text-align: left;
	color: var(--spd-text);
	background-color: var(--spd-weiss);
	border: 1px solid var(--spd-linie);
	border-left: 6px solid var(--spd-gruen);
	border-radius: 14px;
	box-shadow: var(--spd-schatten);
	pointer-events: auto;
	animation: spd-meldung-ein 0.2s ease-out;
}

/* Das Fehler-Popup: direkt ueber dem Formular, beim Scrollen oben stehend (sticky); viele Felder rollen in der Karte - jedes bleibt
   erreichbar (Waechter, E1947); unter der Leiste von WordPress. */
.spd-meldung-fehler {
	position: sticky;
	top: max(16px, env(safe-area-inset-top));
	z-index: 100040;
	align-items: start;
	max-height: 50vh;
	overflow-y: auto;
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-left-color: var(--spd-rot);
}

.wp-toolbar .spd-meldung-fehler,
.admin-bar .spd-meldung-fehler {
	top: 48px;
}

@media (max-width: 782px) {
	.wp-toolbar .spd-meldung-fehler,
	.admin-bar .spd-meldung-fehler {
		top: 62px;
	}
}

.spd-meldung-zeichen {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-weight: 700;
	line-height: 1;
	color: var(--spd-weiss);
	background-color: var(--spd-gruen);
}

.spd-meldung-fehler .spd-meldung-zeichen {
	color: var(--spd-weiss);
	background-color: var(--spd-rot);
}

.spd-meldung-text {
	margin: 0;
	font-weight: 500;
	color: var(--spd-text);
	--spd-auf: #ffffff;
}

.spd-meldung-liste {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.spd-meldung-liste li {
	margin: 0;
}

/* Die Felder als Knoepfe (E1934): 500, mittig, nie unterstrichen, 44 px; antippen springt hin. */
.spd-meldung-feld {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 16px;
	font: inherit;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	color: var(--spd-rot);
	background-color: var(--spd-rot-hell);
	border: 1px solid var(--spd-rot-tief);
	border-radius: 999px;
	cursor: pointer;
}

.spd-meldung-feld:hover,
.spd-meldung-feld:focus-visible,
.spd-meldung-feld:active {
	color: var(--spd-rot);
	background-color: var(--spd-rot-tief);
}

.spd-meldung-feld:focus-visible {
	outline: 2px solid var(--spd-ring);
	outline-offset: 2px;
}

/* Das X der Popups (spd-x, 44 px im Kreis): zwei Striche genau in der Mitte, in der Schriftfarbe des Knopfs. */
.spd-meldung-x {
	position: relative;
}

.spd-meldung-x::before,
.spd-meldung-x::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 2px;
	border-radius: 1px;
	background-color: currentColor;
	--spd-flaeche: 1;
	forced-color-adjust: none;
	transform: translate(-50%, -50%) rotate(45deg);
}

.spd-meldung-x::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* Der Balken: 5 Sekunden von rechts nach links (das rechte Ende laeuft nach links); haelt mit an (spd-halt). */
.spd-meldung-balken {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 6px;
	height: 4px;
	border-radius: 999px;
	background-color: var(--spd-gruen);
	--spd-flaeche: 1;
	transform-origin: left center;
	animation: spd-balken 5s linear forwards;
}

.spd-halt .spd-meldung-balken {
	animation-play-state: paused;
}

@keyframes spd-balken {
	from {
		transform: scaleX(1);
	}

	to {
		transform: scaleX(0);
	}
}

@keyframes spd-meldung-ein {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

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

@media (prefers-reduced-motion: reduce) {
	.spd-meldung {
		animation: none;
	}
}

/* ------------------------------------------------------------ 10a Rechnungen des Abos (2.9.0 Teil 2, E2010-E2015): nur die Anordnung, keine Farbe */

/* Jede offene Rechnung eine Karte - Kopf mit Betrieb, Nummer und Betrag, darunter QR, Beleg und Handy. */
.sp-zf-liste li.sp-zf-rechnung {
	display: block;
	margin: 0 0 16px;
	padding: 16px;
	border: 1px solid var(--spd-linie);
	border-radius: 12px;
}

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

.sp-zf-rechnung h3 {
	margin: 20px 0 8px;
	font-size: 1rem;
}

.sp-zf-handy-knopf {
	margin: 12px 0 0;
}

.sp-zf-handy {
	margin: 16px 0 0;
	padding: 12px 14px;
	border: 1px dashed var(--spd-rahmen);
	border-radius: 10px;
}

.sp-zf-link a {
	overflow-wrap: anywhere;
}

/* Die Wahl der Quellensteuer - aufklappbar, einmal ueber den Rechnungen. */
details.sp-zf-qst {
	margin: 16px 0;
	padding: 10px 12px;
	border: 1px solid var(--spd-linie);
	border-radius: 10px;
}

.sp-zf-qst > summary {
	padding: 10px 0;
	cursor: pointer;
	font-weight: 600;
}

/* ------------------------------------------------------------ 10b Adresssuche: die Lupe neben dem Feld (3.0.0, E2059) */

/* Seit 3.0.0 Teil 1 (E2059, Daniel 22.10.2026): die Lupe der Suche "Firma oder Adresse" stand im Feld und lag ueber Platzhalter und Text (die
   Felder der alten Dateien setzen den Innenabstand neu). Jetzt steht sie als eigenes Kaestchen links neben dem Feld - gleich hoch, am Handy
   und am Rechner gleich; das Feld nimmt den Rest der Breite, die Vorschlaege stehen darunter ueber die ganze Breite. */
.sp-geo .sp-geo-feld {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.sp-geo .sp-geo-feld .sp-geo-lupe {
	position: static;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 48px;
	height: auto;
	min-height: 44px;
	padding: 0 13px;
	transform: none;
	color: var(--spd-leise-tief);
	background-color: var(--spd-grau);
	border: 1px solid var(--spd-linie);
	border-radius: 10px;
}

.sp-geo .sp-geo-feld .sp-geo-eingabe {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	margin: 0;
	padding-left: 14px;
}

.sp-geo .sp-geo-feld > .sp-geo-liste {
	top: 100%;
}

/* ------------------------------------------------------------ 10c Warnfenster (3.8.0, E2353): vom Server gezeigt, auch ohne JavaScript */

/* Ueber dem Hintergrund von .spd-hinter in der Mitte; am Handy 16 px Rand; das X oben rechts fuehrt ohne Speichern zurueck. */
.spd-warnfenster {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 100002;
	box-sizing: border-box;
	width: min(520px, calc(100vw - 32px));
	max-height: calc(100dvh - 32px);
	overflow-y: auto;
	padding: 24px 24px 20px;
	color: var(--spd-text);
	background-color: var(--spd-weiss);
	border-top: 4px solid var(--spd-rot);
	border-radius: 16px;
	box-shadow: var(--spd-schatten);
	transform: translate(-50%, -50%);
	font-size: 16px;
	line-height: 1.5;
}

.spd-warnfenster h2 {
	margin: 0 48px 12px 0;
	color: var(--spd-text);
	--spd-auf: #ffffff;
	font-size: 20px;
	line-height: 1.3;
}

.spd-warnfenster ul {
	margin: 0 0 8px;
	padding-left: 20px;
}

.spd-warnfenster-x {
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--spd-text);
	--spd-auf: #ffffff;
	border-radius: 999px;
	text-decoration: none;
}

.spd-warnfenster-x:hover,
.spd-warnfenster-x:focus-visible {
	color: var(--spd-text);
	background-color: var(--spd-grau-tief);
}

.spd-warnfenster-knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 16px 0 0;
}

/* ------------------------------------------------------------ 11 WordPress-Bereich (37d, E1949, E1950): nur die Seiten von SiamPoints */

/* Gilt nur unter body.spd-verwaltung (SiamPoints_Design::koerper()) - die Seiten von WordPress selbst bleiben, wie WordPress sie zeichnet.
   Die Regeln von WordPress (.wp-core-ui ...) sind staerker als einfache Selektoren - darum #wpbody-content; gesperrte Knoepfe wie bei
   WordPress mit !important. */
body.spd-verwaltung {
	color: var(--spd-text);
	background-color: var(--spd-grund);
}

body.spd-verwaltung .wrap {
	max-width: 1120px;
}

body.spd-verwaltung .wrap h1 {
	margin: 8px 0 16px;
	padding: 8px 0 0;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--spd-text);
	--spd-auf: #f8fafc;
}

body.spd-verwaltung .wrap h2 {
	margin: 32px 0 12px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--spd-text);
	--spd-auf: #f8fafc;
}

body.spd-verwaltung .wrap h3 {
	color: var(--spd-text);
	--spd-auf: #ffffff;
}

body.spd-verwaltung #wpbody-content p,
body.spd-verwaltung #wpbody-content li,
body.spd-verwaltung #wpbody-content td,
body.spd-verwaltung #wpbody-content th,
body.spd-verwaltung #wpbody-content label {
	font-size: 14px;
	line-height: 1.55;
}

body.spd-verwaltung #wpbody-content .description {
	color: var(--spd-leise-tief);
	--spd-auf: #f8fafc;
}

/* Karten: jedes Formular, jede Tabelle und jeder Kasten direkt auf der Seite (E1949). */
body.spd-verwaltung .wrap > form,
body.spd-verwaltung .wrap > fieldset,
body.spd-verwaltung .wrap > .sp-liste,
body.spd-verwaltung .wrap > .sp-web-tabelle,
body.spd-verwaltung .wrap > .sp-login,
body.spd-verwaltung .wrap > .sp-compliance-liste {
	margin: 16px 0 24px;
	padding: 20px 24px;
	color: var(--spd-text);
	background-color: var(--spd-weiss);
	border: 1px solid var(--spd-grau-tief);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

body.spd-verwaltung .wrap > form > :first-child,
body.spd-verwaltung .wrap > fieldset > :first-child {
	margin-top: 0;
}

body.spd-verwaltung .wrap > form > :last-child,
body.spd-verwaltung .wrap > fieldset > :last-child {
	margin-bottom: 0;
}

/* Die erste Ueberschrift einer Karte ohne Luft darueber (vor ihr stehen oft nur verborgene Felder). */
body.spd-verwaltung .wrap > form > h2:first-of-type,
body.spd-verwaltung .wrap > form > h3:first-of-type {
	margin-top: 0;
}

/* Gruppen in einer Karte: ein ruhiger Kasten statt des Rahmens des Browsers. */
body.spd-verwaltung #wpbody-content form fieldset {
	margin: 16px 0;
	padding: 8px 16px 12px;
	border: 1px solid var(--spd-grau-tief);
	border-radius: 12px;
}

body.spd-verwaltung #wpbody-content form legend {
	padding: 0 6px;
	font-weight: 600;
	color: var(--spd-text);
	--spd-auf: #ffffff;
}

/* Meldungen als Karten statt der Balken von WordPress (E1950). */
body.spd-verwaltung #wpbody-content .notice,
body.spd-verwaltung #wpbody-content div.updated,
body.spd-verwaltung #wpbody-content div.error {
	margin: 16px 0;
	padding: 12px 16px;
	color: var(--spd-text);
	background-color: var(--spd-weiss);
	border: 1px solid var(--spd-grau-tief);
	border-left: 6px solid var(--spd-blau);
	border-radius: 12px;
	box-shadow: none;
}

body.spd-verwaltung #wpbody-content .notice-success,
body.spd-verwaltung #wpbody-content div.updated {
	border-left-color: var(--spd-gruen);
}

body.spd-verwaltung #wpbody-content .notice-error,
body.spd-verwaltung #wpbody-content div.error {
	color: var(--spd-text);
	background-color: var(--spd-rot-hell);
	border-left-color: var(--spd-rot);
}

body.spd-verwaltung #wpbody-content .notice-warning {
	color: var(--spd-text);
	background-color: #fffbeb;
	border-left-color: var(--spd-gold-schrift);
}

body.spd-verwaltung #wpbody-content .notice p {
	margin: 4px 0;
	padding: 0;
}

/* Knoepfe (E1934): Schrift 500, mittig, nie unterstrichen, 44 px - Hauptknopf Gold, sonst hell. */
body.spd-verwaltung #wpbody-content .button,
body.spd-verwaltung #wpbody-content .button-secondary,
body.spd-verwaltung #wpbody-content .button-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	white-space: normal;
	vertical-align: middle;
	color: var(--spd-text);
	background-color: var(--spd-weiss);
	border: 1px solid var(--spd-rahmen);
	border-radius: 10px;
	box-shadow: none;
	text-shadow: none;
}

body.spd-verwaltung #wpbody-content .button:hover,
body.spd-verwaltung #wpbody-content .button:focus,
body.spd-verwaltung #wpbody-content .button-secondary:hover,
body.spd-verwaltung #wpbody-content .button-secondary:focus {
	color: var(--spd-text);
	background-color: var(--spd-grau);
	border-color: var(--spd-leise-tief);
	box-shadow: none;
}

body.spd-verwaltung #wpbody-content .button:active,
body.spd-verwaltung #wpbody-content .button-secondary:active {
	color: var(--spd-text);
	background-color: var(--spd-grau-tief);
	border-color: var(--spd-leise-tief);
}

body.spd-verwaltung #wpbody-content .button:focus-visible {
	outline: 2px solid var(--spd-ring);
	outline-offset: 2px;
}

body.spd-verwaltung #wpbody-content .button-primary {
	color: var(--spd-text);
	background-color: var(--spd-gold);
	border-color: var(--spd-gold-tief);
}

body.spd-verwaltung #wpbody-content .button-primary:hover,
body.spd-verwaltung #wpbody-content .button-primary:focus,
body.spd-verwaltung #wpbody-content .button-primary:active {
	color: var(--spd-text);
	background-color: var(--spd-gold-tief);
	border-color: var(--spd-gold-tief);
}

body.spd-verwaltung #wpbody-content .button:disabled,
body.spd-verwaltung #wpbody-content .button[disabled],
body.spd-verwaltung #wpbody-content .button.disabled,
body.spd-verwaltung #wpbody-content .button-primary:disabled,
body.spd-verwaltung #wpbody-content .button-primary[disabled] {
	color: var(--spd-leise-tief) !important;
	background-color: var(--spd-grau) !important;
	border-color: var(--spd-linie) !important;
	cursor: default;
}

/* Felder (E1935, E1936): 44 px hoch, Schrift 16 px (kein Hineinzoomen am iPhone), ruhiger Rahmen, deutlicher Fokus. */
body.spd-verwaltung #wpbody-content input[type="text"],
body.spd-verwaltung #wpbody-content input[type="email"],
body.spd-verwaltung #wpbody-content input[type="url"],
body.spd-verwaltung #wpbody-content input[type="password"],
body.spd-verwaltung #wpbody-content input[type="number"],
body.spd-verwaltung #wpbody-content input[type="search"],
body.spd-verwaltung #wpbody-content input[type="tel"],
body.spd-verwaltung #wpbody-content input[type="date"],
body.spd-verwaltung #wpbody-content input[type="time"],
body.spd-verwaltung #wpbody-content select,
body.spd-verwaltung #wpbody-content textarea {
	box-sizing: border-box;
	min-height: 44px;
	padding: 10px 12px;
	font-size: 16px;
	line-height: 1.4;
	color: var(--spd-text);
	background-color: var(--spd-weiss);
	border: 1px solid var(--spd-rahmen);
	border-radius: 10px;
	box-shadow: none;
}

body.spd-verwaltung #wpbody-content select {
	padding-right: 40px;
}

body.spd-verwaltung #wpbody-content input:focus,
body.spd-verwaltung #wpbody-content select:focus,
body.spd-verwaltung #wpbody-content textarea:focus {
	border-color: var(--spd-blau);
	outline: 2px solid var(--spd-ring);
	outline-offset: 1px;
	box-shadow: none;
}

body.spd-verwaltung #wpbody-content [aria-invalid="true"] {
	border-color: var(--spd-rot);
}

/* Haken und Auswahlknoepfe aus Abschnitt 7 - ohne die eigenen Zeichen von WordPress. */
body.spd-verwaltung #wpbody-content input[type="checkbox"],
body.spd-verwaltung #wpbody-content input[type="radio"] {
	width: 22px;
	height: 22px;
	min-width: 22px;
	margin: 0 8px 0 0;
	box-shadow: none;
}

body.spd-verwaltung #wpbody-content input[type="checkbox"]:checked::before,
body.spd-verwaltung #wpbody-content input[type="radio"]:checked::before {
	content: none;
}

/* Tabellen als Karte. */
body.spd-verwaltung #wpbody-content .widefat {
	color: var(--spd-text);
	background-color: var(--spd-weiss);
	border: 1px solid var(--spd-grau-tief);
	border-radius: 12px;
	box-shadow: none;
}

body.spd-verwaltung #wpbody-content .widefat thead th,
body.spd-verwaltung #wpbody-content .widefat thead td {
	font-weight: 600;
	color: var(--spd-text);
	background-color: var(--spd-grau);
	border-bottom: 1px solid var(--spd-grau-tief);
}

body.spd-verwaltung #wpbody-content .widefat thead tr > :first-child {
	border-top-left-radius: 11px;
}

body.spd-verwaltung #wpbody-content .widefat thead tr > :last-child {
	border-top-right-radius: 11px;
}

body.spd-verwaltung #wpbody-content .widefat td,
body.spd-verwaltung #wpbody-content .widefat th {
	padding: 12px;
	color: var(--spd-text);
	--spd-auf: #ffffff;
}

body.spd-verwaltung #wpbody-content .striped > tbody > :nth-child(odd) {
	background-color: var(--spd-grund);
	--spd-flaeche: 1;
}

body.spd-verwaltung #wpbody-content .form-table th {
	font-weight: 600;
	color: var(--spd-text);
	--spd-auf: #ffffff;
}

/* Reiter: Pillen, der aktive dunkel. */
body.spd-verwaltung #wpbody-content .nav-tab-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0;
	padding: 0;
	border-bottom: 0;
}

body.spd-verwaltung #wpbody-content .nav-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	margin: 0;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	color: var(--spd-text);
	background-color: var(--spd-weiss);
	border: 1px solid var(--spd-linie);
	border-radius: 999px;
}

body.spd-verwaltung #wpbody-content .nav-tab:hover,
body.spd-verwaltung #wpbody-content .nav-tab:focus {
	color: var(--spd-text);
	background-color: var(--spd-grau);
}

body.spd-verwaltung #wpbody-content .nav-tab-active,
body.spd-verwaltung #wpbody-content .nav-tab-active:hover,
body.spd-verwaltung #wpbody-content .nav-tab-active:focus {
	color: var(--spd-weiss);
	background-color: var(--spd-text);
	border-color: var(--spd-text);
}

/* Handy (WordPress schaltet bei 782 px um): Karten mit 16 px, Felder ueber die Breite. */
@media (max-width: 782px) {
	body.spd-verwaltung .wrap > form,
	body.spd-verwaltung .wrap > fieldset,
	body.spd-verwaltung .wrap > .sp-liste,
	body.spd-verwaltung .wrap > .sp-web-tabelle,
	body.spd-verwaltung .wrap > .sp-login,
	body.spd-verwaltung .wrap > .sp-compliance-liste {
		padding: 16px;
	}

	body.spd-verwaltung #wpbody-content .regular-text,
	body.spd-verwaltung #wpbody-content .large-text {
		width: 100%;
		max-width: 100%;
	}
}

/* ------------------------------------------------------------ 12 Korrekturen von verwaltung.css (E1951, derselbe Selektor) */

.sp-web-veraltet span,
.sp-web-reiter.sp-web-veraltet .sp-web-zustand {
	color: var(--spd-gold-schrift);
	--spd-auf: #ffffff;
}

.sp-web-leer span,
.sp-web-reiter.sp-web-leer .sp-web-zustand {
	color: var(--spd-leise);
	--spd-auf: #ffffff;
}

.sp-web-versteckt {
	opacity: 1;
}

.sp-web-erfolg .sp-web-sichern {
	color: var(--spd-weiss);
	background-color: var(--spd-gruen);
	border-color: var(--spd-gruen);
}

.sp-web-fehler .sp-web-sichern {
	color: var(--spd-weiss);
	background-color: var(--spd-rot);
	border-color: var(--spd-rot);
}

.sp-anfrage-geleert td,
.sp-anfrage-lead td {
	color: var(--spd-leise-tief);
	--spd-auf: #ffffff;
}

/* Ampel und Werte: Schrift und Grund je Farbklasse als Paar. */
.sp-web-ampel-gruen,
.sp-web-wert-gruen {
	color: var(--spd-text);
	background-color: #10b981;
}

.sp-web-ampel-orange,
.sp-web-wert-orange {
	color: var(--spd-text);
	background-color: var(--spd-gold);
}

.sp-web-ampel-rot,
.sp-web-wert-rot {
	color: var(--spd-weiss);
	background-color: var(--spd-rot);
}

/* ------------------------------------------------------------ 13 Schrift (3.9.0 Teil 2, E2513-E2516; Konzept 3.9.0 Abschnitt 18) */

/*
 * Ab hier (Abschnitte 13 und 14) ist neue Gestaltung: nur aus der Skala von Abschnitt 14 - Groesse, Zeilenhoehe, Staerke, Abstaende, Rundung,
 * Schatten (Waechter H141 in _pruefstand/pruefstand-390.php; Ausnahmen nur mit E-Nummer in SP390_AUSNAHMEN).
 *
 * Die eigenen Schriften auf unserem Server (assets/schriften-sp/, SIL Open Font License 1.1, OFL-inter.txt und OFL-ibm_plex_thai.txt): "SP Inter"
 * (Inter 4.000, Latein und Kyrillisch) und "SP Plex Thai" (IBM Plex Sans Thai, Thai), je 400, 500 und 600 - nie 700 oder mehr, so zeichnet auch
 * eine alte Regel mit 800 hoechstens 600. Erzeugt mit _pruefstand/werkzeuge/schrift_390_bauen.py, nie von Hand. Der Browser laedt nur die
 * Teile, deren Zeichen auf der Seite stehen; bis dahin die Schrift des Geraets (swap). Chinesisch und Japanisch: die Schrift des Geraets.
 */

@font-face {
	font-family: "SP Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("schriften-sp/sp-inter-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "SP Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("schriften-sp/sp-inter-400-kyrillisch.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "SP Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("schriften-sp/sp-inter-500-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "SP Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("schriften-sp/sp-inter-500-kyrillisch.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "SP Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("schriften-sp/sp-inter-600-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "SP Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("schriften-sp/sp-inter-600-kyrillisch.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "SP Plex Thai";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("schriften-sp/sp-plex-thai-400-thai.woff2") format("woff2");
	unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
	font-family: "SP Plex Thai";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("schriften-sp/sp-plex-thai-500-thai.woff2") format("woff2");
	unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
	font-family: "SP Plex Thai";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("schriften-sp/sp-plex-thai-600-thai.woff2") format("woff2");
	unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}

/* Die Stapel je Sprache - und die alten (bis 3.8.3) nur noch fuer das Logo (E2515). */
:root {
	--spd-schrift: "SP Inter", "SP Plex Thai", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--spd-schrift-th: "SP Inter", "SP Plex Thai", "Noto Sans Thai", Sarabun, Tahoma, Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--spd-schrift-zh: "SP Inter", "SP Plex Thai", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--spd-schrift-ja: "SP Inter", "SP Plex Thai", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--spd-schrift-logo: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--spd-schrift-logo-th: "Noto Sans Thai", Sarabun, Tahoma, Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--spd-schrift-logo-zh: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--spd-schrift-logo-ja: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--sp-schrift: var(--spd-schrift);
	--sw-schrift: var(--spd-schrift);
}

/* Dieselben Selektoren wie gast.css und website.css (Thai, Chinesisch, Japanisch) - die Zeilenhoehe von Thai bleibt dort. */
:lang(th) body.sp-gast,
body.sp-gast:lang(th),
:lang(th) body.sw-seite,
body.sw-seite:lang(th) {
	font-family: var(--spd-schrift-th);
}

:lang(zh-CN) body.sp-gast,
body.sp-gast:lang(zh-CN),
:lang(zh) body.sw-seite,
body.sw-seite:lang(zh) {
	font-family: var(--spd-schrift-zh);
}

:lang(ja) body.sp-gast,
body.sp-gast:lang(ja),
:lang(ja) body.sw-seite,
body.sw-seite:lang(ja) {
	font-family: var(--spd-schrift-ja);
}

/* Das Logo bleibt genau so (E2515): der Schriftzug in seinem bisherigen Stapel - mit White Label wie bisher aus aussehen.css. */
body:not(.spw) .sp-logo-siam,
body:not(.spw) .sp-logo-points,
.sw-logo-siam,
.sw-logo-points {
	font-family: var(--spd-schrift-logo);
}

body:not(.spw) .sp-logo-siam:lang(th),
body:not(.spw) .sp-logo-points:lang(th),
.sw-logo-siam:lang(th),
.sw-logo-points:lang(th) {
	font-family: var(--spd-schrift-logo-th);
}

body:not(.spw) .sp-logo-siam:lang(zh),
body:not(.spw) .sp-logo-points:lang(zh),
.sw-logo-siam:lang(zh),
.sw-logo-points:lang(zh) {
	font-family: var(--spd-schrift-logo-zh);
}

body:not(.spw) .sp-logo-siam:lang(ja),
body:not(.spw) .sp-logo-points:lang(ja),
.sw-logo-siam:lang(ja),
.sw-logo-points:lang(ja) {
	font-family: var(--spd-schrift-logo-ja);
}

/* Ueberschriften hoechstens 600 (E2516): h1-h6 auf allen Seiten von Gast, Inhaber, Personal, Team, Website und Anmeldung. */
body.sp-gast :is(h1, h2, h3, h4, h5, h6),
body.sw-seite :is(h1, h2, h3, h4, h5, h6) {
	font-weight: 600;
}

/* Die Titel ausserhalb von h1-h6 (derselbe Selektor wie gast.css bzw. website.css). */
.sp-titel,
.sp-fenster-titel,
.sp-kachel-titel,
.sp-ablage-titel,
.sp-banner-titel,
.sp-top-titel,
.sp-team-vorschau-titel,
.sp-bericht-titel,
.sp-res-schritt-titel,
.sp-rufstand-titel,
.sp-theke-titel,
.sp-code-titel,
.sp-besuchsnummer-titel,
.sp-ob-kasten .sp-ob-kasten-titel,
.sp-aufklapp > summary,
.sw-claim,
.sw-mega-titel {
	font-weight: 600;
}

/* Die Titel der Kacheln auf den Startseiten (app.css laedt nach design.css - darum mit body davor). */
body.sp-gast .spa-kachel-titel {
	font-weight: 600;
}

/* Die Ueberschriften im Footer feiner (E2516): 600 in gedaempftem Weiss - Logo, Claim und Links bleiben. */
.sw-fuss h2,
.sw-fuss-loesungen h3 {
	color: var(--sw-hell);
	--spd-auf: var(--sw-dunkel);
	font-weight: 600;
}

/* ------------------------------------------------------------ 14 Mass-System und Bausteine - Design 3, Variante B "Weich" (3.9.0 Teil 2) */

/*
 * E2502, E2507, E2517-E2520 (Konzept 3.9.0 Abschnitte 5, 8, 17, 18; Vorlage Bau-Konzepte/Entwuerfe-Design-3/freigegeben-B/quellen/d3.css):
 * Schrift 12 / 14 / 16 / 20 / 28 (Zeilen 16 / 20 / 24 / 28 / 32), Staerken 400 / 500 / 600, Abstaende 4 / 8 / 12 / 16 / 24 / 32, Rundungen 16 und
 * rund, ein leichter Schatten nur fuer Schwebendes. Die Toene schalten selbst: hell auf :root, dunkel unter html[data-sp-thema="dunkel"], mit
 * White Label aus dem Aussehen des Betriebs (nur hell, E2519) - dunkel_bauen.py laesst --spd-ton-* stehen. Die Markenfarbe nur fuer den
 * Hauptknopf und kleine Akzente. Klassen spd-d3-... (je eine Regel der Vorlage, ohne die Varianten A und C, ohne Malee - E2518).
 */

:root {
	--spd-s1: 4px;
	--spd-s2: 8px;
	--spd-s3: 12px;
	--spd-s4: 16px;
	--spd-s5: 24px;
	--spd-s6: 32px;
	--spd-f1: 12px;
	--spd-f2: 14px;
	--spd-f3: 16px;
	--spd-f4: 20px;
	--spd-f5: 28px;
	--spd-z1: 16px;
	--spd-z2: 20px;
	--spd-z3: 24px;
	--spd-z4: 28px;
	--spd-z5: 32px;
	--spd-r1: 16px;
	--spd-r2: 999px;
	--spd-ton-schweben: 0 8px 24px rgba(15, 23, 42, 0.12);
	--spd-ton-grund: #f4f5f7;
	--spd-ton-flaeche: #ffffff;
	--spd-ton-flaeche-2: #eef0f3;
	--spd-ton-linie: #e6e8ec;
	--spd-ton-text: #0f172a;
	--spd-ton-text-2: #4f5868;
	--spd-ton-text-3: #5f6776;
	--spd-ton-marke: #f59e0b;
	--spd-ton-auf-marke: #0f172a;
	--spd-ton-akzent: #a64b08;
	--spd-ton-akzent-flaeche: #fef3c7;
	--spd-ton-gut: #15803d;
	--spd-ton-gut-punkt: #16a34a;
	--spd-ton-schlecht: #b91c1c;
	--spd-ton-schlecht-flaeche: #fee2e2;
	--spd-ton-kreis: #ffffff;
	--spd-ton-schalter: #e6e8ec;
	--spd-ton-knauf: #ffffff;
	--spd-ton-avatar: #0f172a;
	--spd-ton-auf-avatar: #ffffff;
}

html[data-sp-thema="dunkel"] {
	--spd-ton-schweben: 0 8px 24px rgba(0, 0, 0, 0.45);
	--spd-ton-grund: #0f172a;
	--spd-ton-flaeche: #1b2433;
	--spd-ton-flaeche-2: #263042;
	--spd-ton-linie: #2c3748;
	--spd-ton-text: #e8edf6;
	--spd-ton-text-2: #aab4c5;
	--spd-ton-text-3: #9aa5b8;
	--spd-ton-marke: #f59e0b;
	--spd-ton-auf-marke: #0f172a;
	--spd-ton-akzent: #fbbf24;
	--spd-ton-akzent-flaeche: #3a2c12;
	--spd-ton-gut: #4ade80;
	--spd-ton-gut-punkt: #22c55e;
	--spd-ton-schlecht: #fca5a5;
	--spd-ton-schlecht-flaeche: #3b1d22;
	--spd-ton-kreis: #1b2433;
	--spd-ton-schalter: #3a4558;
	--spd-ton-knauf: #ffffff;
	--spd-ton-avatar: #e8edf6;
	--spd-ton-auf-avatar: #0f172a;
}

/* White Label (E2519, nur hell): Hauptknopf = Knopf des Betriebs, Akzent = seine lesbare Hauptfarbe, Flaechen, Linie und Schrift aus seinem
   Aussehen (die Paare prueft SiamPoints_Aussehen, E1943); fehlt ein Wert, gilt B. */
body.sp-gast.spw {
	--spd-ton-grund: var(--spw-grund, #f4f5f7);
	--spd-ton-flaeche: var(--spw-karte, #ffffff);
	--spd-ton-flaeche-2: var(--spw-flaeche, #eef0f3);
	--spd-ton-linie: var(--spw-linie, #e6e8ec);
	--spd-ton-text: var(--spw-text, #0f172a);
	--spd-ton-text-2: var(--spw-nebentext, #4f5868);
	--spd-ton-text-3: var(--spw-nebentext, #5f6776);
	--spd-ton-marke: var(--spw-knopf, #f59e0b);
	--spd-ton-auf-marke: var(--spw-knopf-text, #0f172a);
	--spd-ton-akzent: var(--spw-haupt-schrift, #a64b08);
	--spd-ton-akzent-flaeche: var(--spw-flaeche, #eef0f3);
	--spd-ton-kreis: var(--spw-karte, #ffffff);
	--spd-schrift: var(--spw-schrift-text, "SP Inter", "SP Plex Thai", Inter, system-ui, sans-serif);
}

/* Grundlage: die Seite und der Inhalt. */
body.sp-gast.spd-d3-seite {
	background-color: var(--spd-ton-grund);
	color: var(--spd-ton-text);
}

.spd-d3-inhalt.sp-inhalt {
	padding: var(--spd-s5) var(--spd-s4) var(--spd-s6);
	font-family: var(--spd-schrift);
	color: var(--spd-ton-text);
	--spd-auf: var(--spd-ton-grund);
	font-size: var(--spd-f3);
	line-height: var(--spd-z3);
	font-weight: 400;
}

/* Seit 3.9.0 Teil 6 (E2616): nicht in der Punkte-Darstellung der Gaeste - Pass, Punktekarte, Stand, "Gesammelt insgesamt" und die kleinen Karten
   in "Meine Punkte" behalten ihre Abstaende aus gast.css (die Staerke der Regel bleibt 0,1,0). */
.spd-d3-inhalt :where(h1, h2, h3, p, ul, li, figure):not(:where(.sp-pass *, .sp-punktekarte *, .sp-stand *, .sp-gesammelt, .sp-pk-mini *)) {
	margin: 0;
	padding: 0;
}

.spd-d3-inhalt :where(ul) {
	list-style: none;
}

.spd-d3-inhalt :where(a) {
	text-decoration: none;
}

/* Links im Inhalt: so stark wie ".sp-gast a" (gast.css) und ".sw-seite a" (website.css), die vorher laden; dunkel ueber --spx-auf (app-dunkel.css). */
.spd-d3-inhalt a {
	color: var(--spd-ton-text);
	--spd-auf: var(--spd-ton-grund);
	--spx-auf: var(--spd-ton-text);
}

.spd-d3-inhalt svg {
	flex: none;
}

.spd-d3-inhalt .spd-d3-sym {
	width: 20px;
	height: 20px;
}

.spd-d3-inhalt .spd-d3-sym-24 {
	width: 24px;
	height: 24px;
}

/* Kopf der Seite (Datum - Titel - Unterzeile). */
.spd-d3-kopf {
	display: flex;
	flex-direction: column;
	gap: var(--spd-s1);
}

.spd-d3-oben {
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	color: var(--spd-ton-text-2);
	--spd-auf: var(--spd-ton-grund);
	font-weight: 500;
}

.spd-d3-titel {
	font-size: var(--spd-f5);
	line-height: var(--spd-z5);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--spd-ton-text);
	--spd-auf: var(--spd-ton-grund);
}

.spd-d3-unter {
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	color: var(--spd-ton-text-2);
	--spd-auf: var(--spd-ton-grund);
}

/* Knoepfe: Hauptknopf (Marke), Zweitknopf, Textlink; eine Reihe bricht um statt zu quetschen (E2508, E2509). */
.spd-d3-aktionen {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--spd-s3);
	margin-top: var(--spd-s5);
}

.spd-d3-aktionen .spd-d3-knopf {
	min-width: fit-content;
}

.spd-d3-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spd-s2);
	padding: var(--spd-s3) var(--spd-s5);
	border: 0;
	border-radius: var(--spd-r2);
	font: 600 var(--spd-f3) / var(--spd-z3) var(--spd-schrift);
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
}

.spd-d3-knopf:focus-visible,
.spd-d3-kreise a:focus-visible,
.spd-d3-zeile:focus-visible,
.spd-d3-link:focus-visible {
	outline: 2px solid var(--spd-ring);
	outline-offset: 2px;
}

.spd-d3-knopf-haupt,
a.spd-d3-knopf-haupt {
	background-color: var(--spd-ton-marke);
	color: var(--spd-ton-auf-marke);
	--spx-auf: var(--spd-ton-auf-marke);
	flex: 1 1 0;
}

.spd-d3-knopf-zweit,
a.spd-d3-knopf-zweit {
	background-color: var(--spd-ton-flaeche);
	color: var(--spd-ton-text);
	--spx-auf: var(--spd-ton-text);
	flex: 1 1 0;
}

.spd-d3-karte .spd-d3-knopf-zweit {
	background-color: var(--spd-ton-flaeche-2);
	color: var(--spd-ton-text);
	--spx-auf: var(--spd-ton-text);
}

.spd-d3-breit {
	width: 100%;
}

.spd-d3-link,
a.spd-d3-link {
	color: var(--spd-ton-akzent);
	--spd-auf: var(--spd-ton-grund);
	--spx-auf: var(--spd-ton-akzent);
	font-weight: 500;
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
}

@media (max-width: 899px) {
	.spd-d3-aktionen .spd-d3-knopf {
		padding: var(--spd-s3) var(--spd-s4);
	}

	.spd-d3-aktionen .spd-d3-knopf svg {
		display: none;
	}
}

/* Abschnitt mit kleiner grauer Ueberschrift und Link rechts; Karte ohne Schatten. */
.spd-d3-abschnitt {
	margin-top: var(--spd-s6);
}

.spd-d3-ab-kopf {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--spd-s3);
	margin-bottom: var(--spd-s3);
	padding: 0 var(--spd-s1);
}

.spd-d3-ueber {
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	font-weight: 600;
	color: var(--spd-ton-text-2);
	--spd-auf: var(--spd-ton-grund);
	display: flex;
	align-items: center;
	gap: var(--spd-s2);
}

.spd-d3-zaehler {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	padding: 0 var(--spd-s2);
	border-radius: var(--spd-r2);
	background-color: var(--spd-ton-akzent-flaeche);
	color: var(--spd-ton-akzent);
	font-size: var(--spd-f1);
	line-height: var(--spd-z2);
	font-weight: 600;
}

.spd-d3-karte {
	background-color: var(--spd-ton-flaeche);
	color: var(--spd-ton-text);
	border-radius: var(--spd-r1);
}

/* Zahlen "Heute": 2 x 2 am Handy, 4 nebeneinander am Rechner. */
.spd-d3-zahlen {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.spd-d3-zahl {
	display: flex;
	flex-direction: column;
	gap: var(--spd-s1);
	padding: var(--spd-s4);
}

.spd-d3-zahl:nth-child(2n) {
	border-left: 1px solid var(--spd-ton-linie);
}

.spd-d3-zahl:nth-child(n+3) {
	border-top: 1px solid var(--spd-ton-linie);
}

.spd-d3-zahl-wort {
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	color: var(--spd-ton-text-2);
	--spd-auf: var(--spd-ton-flaeche);
	font-weight: 500;
}

.spd-d3-zahl-wert {
	font-size: var(--spd-f5);
	line-height: var(--spd-z5);
	font-weight: 600;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.spd-d3-zahl-neben {
	font-size: var(--spd-f1);
	line-height: var(--spd-z1);
	color: var(--spd-ton-text-3);
	--spd-auf: var(--spd-ton-flaeche);
}

.spd-d3-zahl-neben.ist-offen {
	color: var(--spd-ton-akzent);
	--spd-auf: var(--spd-ton-flaeche);
	font-weight: 500;
}

/* Liste: Zeile mit Symbol, Titel, Unterzeile, Wert, Pfeil; dazu Zustand, Schalter, Auswahl. */
.spd-d3-liste > li + li > .spd-d3-zeile::before {
	content: "";
	position: absolute;
	top: 0;
	left: 68px;
	right: 0;
	border-top: 1px solid var(--spd-ton-linie);
}

.spd-d3-zeile {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--spd-s3);
	padding: var(--spd-s3) var(--spd-s4);
	min-height: 48px;
}

.spd-d3-zeichen {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--spd-r2);
	background-color: var(--spd-ton-flaeche-2);
	color: var(--spd-ton-text);
	flex: none;
}

.spd-d3-zeichen.ist-akzent {
	background-color: var(--spd-ton-akzent-flaeche);
	color: var(--spd-ton-akzent);
}

.spd-d3-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
}

.spd-d3-zeile-titel {
	font-size: var(--spd-f3);
	line-height: var(--spd-z3);
	font-weight: 500;
}

.spd-d3-zeile-unter {
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	color: var(--spd-ton-text-2);
	--spd-auf: var(--spd-ton-flaeche);
}

.spd-d3-wert {
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	color: var(--spd-ton-text-2);
	--spd-auf: var(--spd-ton-flaeche);
	white-space: nowrap;
	flex: none;
}

.spd-d3-wert.ist-akzent {
	color: var(--spd-ton-akzent);
	--spd-auf: var(--spd-ton-flaeche);
	font-weight: 500;
}

.spd-d3-pfeil {
	color: var(--spd-ton-text-3);
	--spd-auf: var(--spd-ton-flaeche);
	width: 20px;
	height: 20px;
}

.spd-d3-zustand {
	display: inline-flex;
	align-items: center;
	padding: 0 var(--spd-s2);
	border-radius: var(--spd-r2);
	font-size: var(--spd-f1);
	line-height: var(--spd-z2);
	font-weight: 600;
	flex: none;
}

.spd-d3-zustand.ist-schlecht {
	background-color: var(--spd-ton-schlecht-flaeche);
	color: var(--spd-ton-schlecht);
}

.spd-d3-zustand.ist-gut {
	color: var(--spd-ton-gut);
	--spd-auf: var(--spd-ton-flaeche);
}

.spd-d3-zeile.ist-rot .spd-d3-zeile-titel,
.spd-d3-zeile.ist-rot .spd-d3-zeichen {
	color: var(--spd-ton-schlecht);
	--spd-auf: var(--spd-ton-flaeche-2);
}

.spd-d3-liste > li:first-child > .spd-d3-zeile.ist-gewaehlt {
	border-radius: var(--spd-r1) var(--spd-r1) 0 0;
}

.spd-d3-schalter {
	position: relative;
	width: 44px;
	height: 24px;
	border-radius: var(--spd-r2);
	background-color: var(--spd-ton-schalter);
	--spd-flaeche: 1;
	flex: none;
}

.spd-d3-schalter::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	border-radius: var(--spd-r2);
	background-color: var(--spd-ton-knauf);
	--spd-flaeche: 1;
}

.spd-d3-schalter.ist-an {
	background-color: var(--spd-ton-marke);
	--spd-flaeche: 1;
}

.spd-d3-schalter.ist-an::after {
	left: 22px;
}

.spd-d3-wahl {
	width: 20px;
	height: 20px;
	border-radius: var(--spd-r2);
	border: 2px solid var(--spd-ton-text-3);
	flex: none;
	box-sizing: border-box;
}

.spd-d3-wahl.ist-an {
	border: 6px solid var(--spd-ton-marke);
}

/* Runde Knoepfe: Schnellzugriff der Betriebe = Profil-Knoepfe der Gaeste (ein Baustein); in der Karte Rand 24 / 16, Spalten hoechstens 72 px (E2509). */
.spd-d3-kreise {
	display: grid;
	grid-template-columns: repeat(4, minmax(56px, 72px));
	justify-content: space-between;
	gap: var(--spd-s4) 0;
}

.spd-d3-karte > .spd-d3-kreise {
	padding: var(--spd-s5) var(--spd-s4);
}

@media (min-width: 600px) and (max-width: 899px) {
	.spd-d3-kreise {
		grid-template-columns: repeat(8, minmax(56px, 72px));
	}
}

/* Gaeste: fuenf runde Knoepfe in einer Reihe, unter 382 px 3 + 2 - keine Beschriftung breiter als ihre Spalte (E2509). */
.spd-d3-kreise-5 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--spd-s4) 0;
}

.spd-d3-kreise-5 > li {
	flex: 0 0 20%;
}

@media (max-width: 381px) {
	.spd-d3-kreise-5 > li {
		flex-basis: 33.333%;
	}
}

.spd-d3-kreise a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spd-s2);
	text-align: center;
}

.spd-d3-kreis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--spd-r2);
	background-color: var(--spd-ton-kreis);
	color: var(--spd-ton-text);
}

.spd-d3-karte .spd-d3-kreis {
	background-color: var(--spd-ton-flaeche-2);
	color: var(--spd-ton-text);
}

.spd-d3-kreise .ist-haupt .spd-d3-kreis {
	background-color: var(--spd-ton-marke);
	color: var(--spd-ton-auf-marke);
}

.spd-d3-kreis-wort {
	font-size: var(--spd-f1);
	line-height: var(--spd-z1);
	font-weight: 500;
	color: var(--spd-ton-text);
	--spd-auf: var(--spd-ton-flaeche-2);
}

/* Chips und Felder (Feld mit kleinem grauem Hinweis). */
.spd-d3-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spd-s2);
}

.spd-d3-chip,
a.spd-d3-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--spd-s2);
	padding: var(--spd-s2) var(--spd-s3);
	border-radius: var(--spd-r2);
	background-color: var(--spd-ton-flaeche-2);
	color: var(--spd-ton-text);
	--spx-auf: var(--spd-ton-text);
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	font-weight: 500;
}

.spd-d3-chip.ist-gewaehlt {
	background-color: var(--spd-ton-text);
	color: var(--spd-ton-flaeche);
	--spx-auf: var(--spd-ton-flaeche);
}

.spd-d3-feld {
	display: flex;
	flex-direction: column;
	gap: var(--spd-s2);
}

.spd-d3-feld-wort {
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	font-weight: 500;
	color: var(--spd-ton-text);
	--spd-auf: var(--spd-ton-flaeche);
}

.spd-d3-feld-eingabe {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: var(--spd-s3) var(--spd-s4);
	border-radius: var(--spd-r1);
	border: 1px solid var(--spd-ton-linie);
	background-color: var(--spd-ton-flaeche);
	font: 400 var(--spd-f3) / var(--spd-z3) var(--spd-schrift);
	color: var(--spd-ton-text);
}

.spd-d3-feld-eingabe::placeholder {
	color: var(--spd-ton-text-3);
	--spd-auf: var(--spd-ton-flaeche);
}

.spd-d3-karte .spd-d3-feld-eingabe {
	background-color: var(--spd-ton-grund);
	color: var(--spd-ton-text);
	border-color: transparent;
}

.spd-d3-feld-hinweis .spd-d3-link {
	font-size: inherit;
	line-height: inherit;
}

.spd-d3-feld-hinweis {
	font-size: var(--spd-f1);
	line-height: var(--spd-z1);
	color: var(--spd-ton-text-3);
	--spd-auf: var(--spd-ton-flaeche);
}

.spd-d3-stapel {
	display: flex;
	flex-direction: column;
	gap: var(--spd-s4);
	padding: var(--spd-s4);
}

/* Hinweis klein und grau; Mitte; leere Seite (ein Satz, ein Knopf). */
.spd-d3-hinweis {
	display: flex;
	gap: var(--spd-s2);
	align-items: flex-start;
	margin-top: var(--spd-s5);
	padding: 0 var(--spd-s1);
	font-size: var(--spd-f1);
	line-height: var(--spd-z1);
	color: var(--spd-ton-text-3);
	--spd-auf: var(--spd-ton-grund);
}

.spd-d3-hinweis svg {
	width: 16px;
	height: 16px;
	margin-top: 0;
}

.spd-d3-mitte {
	text-align: center;
	justify-content: center;
}

/* Startseite der Betriebe: Kopf-Zeile (am Rechner Titel links, Knoepfe rechts). */
.spd-d3-start .spd-d3-kopf-zeile {
	display: flex;
	flex-direction: column;
}

/* Profil-Kopf: Titelbild (rund, ohne overflow - E2520), Avatar (Logo oder Monogramm), Status. */
.spd-d3-titelbild {
	position: relative;
	border-radius: var(--spd-r1);
	aspect-ratio: 16 / 9;
	background-color: var(--spd-ton-flaeche-2);
	--spd-flaeche: 1;
}

.spd-d3-titelbild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--spd-r1);
}

.spd-d3-profil-kopf {
	display: flex;
	gap: var(--spd-s4);
	align-items: flex-end;
	margin-top: calc(-1 * var(--spd-s6));
	padding: 0 var(--spd-s4);
	position: relative;
}

.spd-d3-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: var(--spd-r2);
	background-color: var(--spd-ton-avatar);
	color: var(--spd-ton-auf-avatar);
	font-size: var(--spd-f4);
	line-height: var(--spd-z4);
	font-weight: 600;
	letter-spacing: 0.02em;
	outline: 4px solid var(--spd-ton-grund);
	flex: none;
}

.spd-d3-profil-name {
	margin-top: var(--spd-s3);
	padding: 0 var(--spd-s1);
	display: flex;
	flex-direction: column;
	gap: var(--spd-s1);
}

.spd-d3-status {
	display: inline-flex;
	align-items: center;
	gap: var(--spd-s2);
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	color: var(--spd-ton-gut);
	--spd-auf: var(--spd-ton-grund);
	font-weight: 500;
}

.spd-d3-status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: var(--spd-r2);
	background-color: var(--spd-ton-gut-punkt);
	--spd-flaeche: 1;
}

.spd-d3-status .spd-d3-grau {
	color: var(--spd-ton-text-2);
	--spd-auf: var(--spd-ton-grund);
	font-weight: 400;
}

.spd-d3-profil .spd-d3-kreise {
	margin-top: var(--spd-s5);
}

/* Gruss (E2511, design.js "Gruss nach Tageszeit"). */
.spd-d3-hallo {
	margin-top: var(--spd-s6);
	padding: 0 var(--spd-s1);
	font-size: var(--spd-f4);
	line-height: var(--spd-z4);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.spd-d3-hallo + .spd-d3-abschnitt {
	margin-top: var(--spd-s4);
}

/* Fotos: ein grosses, zwei kleine. */
.spd-d3-fotos {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: var(--spd-s2);
	aspect-ratio: 16 / 10;
}

.spd-d3-fotos img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--spd-r1);
	display: block;
}

.spd-d3-fotos img:first-child {
	grid-row: 1 / 3;
}

.spd-d3-unten {
	margin-top: var(--spd-s6);
	display: flex;
	justify-content: center;
	gap: var(--spd-s2);
	align-items: center;
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	color: var(--spd-ton-text-2);
	--spd-auf: var(--spd-ton-grund);
}

/* Einstellungen als Liste (E2510): Profilzeile, Version, Unterseite mit "zurueck"; am Handy nur die Liste, am Rechner Liste links und Inhalt rechts. */
.spd-d3-profilzeile {
	display: flex;
	align-items: center;
	gap: var(--spd-s3);
	padding: var(--spd-s4);
	margin-top: var(--spd-s5);
}

.spd-d3-profilzeile .spd-d3-avatar {
	width: 56px;
	height: 56px;
	font-size: var(--spd-f4);
	outline: 0;
	background-color: var(--spd-ton-marke);
	color: var(--spd-ton-auf-marke);
}

.spd-d3-version {
	margin-top: var(--spd-s5);
	text-align: center;
	font-size: var(--spd-f1);
	line-height: var(--spd-z1);
	color: var(--spd-ton-text-3);
	--spd-auf: var(--spd-ton-grund);
}

.spd-d3-zurueck,
a.spd-d3-zurueck {
	display: inline-flex;
	align-items: center;
	gap: var(--spd-s1);
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	font-weight: 500;
	color: var(--spd-ton-text-2);
	--spd-auf: var(--spd-ton-grund);
	--spx-auf: var(--spd-ton-text-2);
	margin-bottom: var(--spd-s3);
}

.spd-d3-zurueck svg {
	transform: rotate(180deg);
	width: 16px;
	height: 16px;
}

/* "Speichern" am Handy unten fest - ueber der Leiste des Menues. */
.spd-d3-fest {
	position: sticky;
	bottom: 88px;
	margin-top: var(--spd-s5);
	padding: var(--spd-s3) 0;
	background: linear-gradient(180deg, transparent, var(--spd-ton-grund) 30%);
}

@media (max-width: 899px) {
	.spd-d3-einst-zwei .spd-d3-rechts {
		display: none;
	}
}

/* Rechner (ab 900 px). */
@media (min-width: 900px) {
	.spd-d3-inhalt.sp-inhalt {
		padding: var(--spd-s6) var(--spd-s5);
	}

	.spd-d3-aktionen {
		margin-top: 0;
	}

	.spd-d3-aktionen .spd-d3-knopf {
		flex: none;
	}

	.spd-d3-start .spd-d3-kopf-zeile {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--spd-s5);
	}

	.spd-d3-zahlen {
		grid-template-columns: repeat(4, 1fr);
	}

	.spd-d3-zahl:nth-child(n+2) {
		border-left: 1px solid var(--spd-ton-linie);
	}

	.spd-d3-zahl:nth-child(n+3) {
		border-top: 0;
	}

	.spd-d3-zahl {
		padding: var(--spd-s5);
	}

	.spd-d3-spalten {
		display: grid;
		grid-template-columns: 7fr 5fr;
		gap: var(--spd-s5);
		align-items: start;
	}

	.spd-d3-spalten > .spd-d3-abschnitt {
		margin-top: var(--spd-s6);
	}

	.spd-d3-spalten .spd-d3-kreise {
		padding: var(--spd-s5) var(--spd-s4);
		grid-template-columns: repeat(4, minmax(56px, 72px));
	}

	/* Gast */
	.spd-d3-gast .spd-d3-titelbild {
		aspect-ratio: 4 / 1;
	}

	.spd-d3-gast .spd-d3-profil-kopf {
		padding: 0 var(--spd-s5);
	}

	.spd-d3-gast .spd-d3-avatar {
		width: 96px;
		height: 96px;
		font-size: var(--spd-f5);
	}

	.spd-d3-gast .spd-d3-profil-zeile {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--spd-s5);
		padding: 0 var(--spd-s1);
	}

	.spd-d3-gast .spd-d3-profil .spd-d3-kreise {
		margin-top: 0;
		display: flex;
		gap: var(--spd-s4);
	}

	.spd-d3-gast .spd-d3-profil .spd-d3-kreise > li {
		width: 72px;
		flex: none;
	}

	.spd-d3-gast .spd-d3-gitter {
		display: grid;
		grid-template-columns: 5fr 7fr;
		gap: var(--spd-s5);
		align-items: start;
	}

	.spd-d3-gast .spd-d3-gitter > div > .spd-d3-abschnitt:first-child {
		margin-top: var(--spd-s6);
	}

	/* Einstellungen: Liste links (280-360 px), Inhalt rechts. */
	.spd-d3-einst-zwei {
		display: grid;
		grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
		gap: var(--spd-s5);
		align-items: start;
	}

	.spd-d3-einst-zwei .spd-d3-rechts {
		padding-top: var(--spd-s1);
	}

	.spd-d3-zeile.ist-gewaehlt {
		background-color: var(--spd-ton-akzent-flaeche);
		color: var(--spd-ton-text);
	}

	.spd-d3-fest {
		position: static;
		background: none;
		padding: 0;
	}

	.spd-d3-fest .spd-d3-knopf {
		width: auto;
	}
}

/* ------------------------------------------------------------ 15 Menue - Design 3, Variante B "Weich" (3.9.0 Teil 4, E2526-E2541) */

/*
 * Das Menue von Gast, Personal, Inhaber und Team 1:1 wie die freigegebenen Bilder (Bau-Konzepte/Entwuerfe-Menue/freigegeben-B/, Regeln
 * R-M1-R-M10, Masse E2532; Konzept Bau-Konzepte/3.9.0-Teil-4-Menue-bauen.md): am Rechner die Leiste 280 px auf dem Grund der Seite, am Handy
 * das Panel - ruhige graue Kacheln, nur die Gruppe der offenen Seite in der Markenfarbe, EINE Markierung (grauer runder Grund, Schrift 600,
 * Symbol im Akzent), kein Schatten. Nur aus der Skala (H141), nur die Toene aus Abschnitt 14 (schalten hell/dunkel selbst) und die Zeichen
 * des Rahmens --spa-knopf/--spa-knopf-zeichen fuer die Markenfarbe (White Label und die Akzentfarbe aus "Frontend Menue" wirken weiter,
 * E2539). Jede Regel beginnt mit body.sp-gast (jede Seite mit Rahmen traegt es) - so gilt sie auch gegen die dunklen Kopien aus gast.css
 * in app-dunkel.css (E2540). Der schwebende Balken unten und der Knopf "Menue" stehen nur in app.css Abschnitt 2 (Byte fuer Byte, H149).
 */

body.sp-gast .spa-seite .spa-liste,
body.sp-gast .spa-panel .sp-menue-liste {
	display: block;
	max-width: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.sp-gast .spa-seite .spa-liste > li,
body.sp-gast .spa-panel .sp-menue-liste > li {
	margin: 0;
	padding: 0;
}

/* Die Kachel einer Gruppe: ein runder Kreis 32 px, Symbol 18 px - ruhig grau, die Gruppe der Seite in der Markenfarbe (R-M1). */
body.sp-gast .spa-gruppe-kachel {
	display: inline-grid;
	flex: 0 0 auto;
	place-items: center;
	width: 32px;
	height: 32px;
	color: var(--spd-ton-text-2);
	background-color: var(--spd-ton-flaeche-2);
	border-radius: var(--spd-r2);
}

body.sp-gast .spa-gruppe-kachel svg {
	display: block;
	width: 18px;
	height: 18px;
}

body.sp-gast .spm-zahl {
	flex: 0 0 auto;
	min-width: 20px;
	margin-left: auto;
	padding: 0 var(--spd-s2);
	font-size: var(--spd-f1);
	font-weight: 600;
	line-height: var(--spd-z2);
	text-align: center;
	color: var(--spa-knopf-zeichen);
	background-color: var(--spa-knopf);
	border-radius: var(--spd-r2);
}

body.sp-gast .spa-avatar {
	display: inline-grid;
	flex: 0 0 auto;
	place-items: center;
	width: 32px;
	height: 32px;
	font-size: var(--spd-f2);
	font-weight: 600;
	line-height: var(--spd-z2);
	color: var(--spa-knopf-zeichen);
	background-color: var(--spa-knopf);
	border-radius: var(--spd-r2);
}

/* Der Betrieb oben beim Gast (Monogramm und Name, E2527). */
body.sp-gast .spm-betrieb {
	display: flex;
	align-items: center;
	gap: var(--spd-s3);
	margin: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
	color: var(--spd-ton-text);
	--spd-auf: var(--spd-ton-flaeche);
}

/* ------------------------------------------------------------ 15a Leiste am Rechner (ab 1024 px) */

@media (min-width: 1024px) {
	body.sp-gast aside.spa-seite {
		padding: var(--spd-s5) var(--spd-s3) var(--spd-s4);
		color: var(--spd-ton-text);
		background-color: var(--spd-ton-grund);
		border-right: 0;
	}

	body.sp-gast {
		--spa-breite: 280px;
	}

	body.sp-gast .spa-seite .spa-seite-logo {
		margin: 0 var(--spd-s3) var(--spd-s5);
	}

	body.sp-gast .spa-seite .spa-seite-nav {
		display: flex;
		flex: 0 0 auto;
		flex-direction: column;
	}

	body.sp-gast .spa-seite .spm-oben {
		margin-bottom: var(--spd-s1);
	}

	/* Eine Zeile: 40 px, Symbol 20 px grau, Schrift 14/500, rund (R-M2). */
	body.sp-gast .spa-seite .spa-punkt,
	body.sp-gast .spa-seite .spa-gruppe-kopf {
		display: flex;
		align-items: center;
		gap: var(--spd-s3);
		width: 100%;
		min-height: 40px;
		margin: 0;
		padding: var(--spd-s2) var(--spd-s3);
		box-sizing: border-box;
		font-family: inherit;
		font-size: var(--spd-f2);
		font-weight: 500;
		line-height: var(--spd-z2);
		text-align: left;
		text-decoration: none;
		white-space: nowrap;
		color: var(--spd-ton-text);
		background-color: var(--spd-ton-grund);
		border: 0;
		border-radius: var(--spd-r2);
		cursor: pointer;
	}

	body.sp-gast .spa-seite .spa-punkt > .spa-symbol {
		flex: 0 0 auto;
		width: 20px;
		height: 20px;
		color: var(--spd-ton-text-2);
		--spd-auf: var(--spd-ton-grund);
	}

	body.sp-gast .spa-seite .spa-wort,
	body.sp-gast .spa-seite .spa-gruppe-name,
	body.sp-gast .spa-seite .spm-wort {
		min-width: 0;
		white-space: nowrap;
	}

	body.sp-gast .spa-seite .spa-punkt:hover,
	body.sp-gast .spa-seite .spa-gruppe-kopf:hover,
	body.sp-gast .spa-seite .spa-punkt[aria-current="page"] {
		color: var(--spd-ton-text);
		background-color: var(--spd-ton-flaeche);
	}

	body.sp-gast .spa-seite .spa-punkt[aria-current="page"] {
		font-weight: 600;
	}

	body.sp-gast .spa-seite .spa-punkt[aria-current="page"] > .spa-symbol {
		color: var(--spd-ton-akzent);
		--spd-auf: var(--spd-ton-flaeche);
	}

	/* Kopf einer Gruppe und Zeile einer Gruppe mit nur einem Eintrag: 48 px mit Kachel (Kachel weiss auf dem Grund). */
	body.sp-gast .spa-seite .spa-gruppe-kopf,
	body.sp-gast .spa-seite .spm-einzeln {
		min-height: 48px;
		padding-left: var(--spd-s1);
	}

	body.sp-gast .spa-seite .spa-gruppe-kopf .spa-gruppe-kachel,
	body.sp-gast .spa-seite .spm-einzeln .spa-gruppe-kachel {
		color: var(--spd-ton-text-2);
		background-color: var(--spd-ton-flaeche);
	}

	body.sp-gast .spa-seite .spa-gruppe.spm-hier > .spa-gruppe-kopf,
	body.sp-gast .spa-seite .spm-einzeln[aria-current="page"] {
		font-weight: 600;
		color: var(--spd-ton-text);
		background-color: var(--spd-ton-grund);
	}

	body.sp-gast .spa-seite .spa-gruppe.spm-hier > .spa-gruppe-kopf .spa-gruppe-kachel,
	body.sp-gast .spa-seite .spm-einzeln[aria-current="page"] .spa-gruppe-kachel {
		color: var(--spa-knopf-zeichen);
		background-color: var(--spa-knopf);
	}

	/* Die offene Gruppe als weisse Karte; darin die gewaehlte Zeile auf Flaeche 2. */
	body.sp-gast .spa-seite .spa-gruppe:not(.spm-oben) > .spa-liste {
		margin: var(--spd-s1) 0 var(--spd-s2);
		padding: var(--spd-s1);
		color: var(--spd-ton-text);
		background-color: var(--spd-ton-flaeche);
		border-radius: var(--spd-r1);
	}

	body.sp-gast .spa-seite .spa-gruppe:not(.spm-oben) > .spa-liste .spa-punkt,
	body.sp-gast .spa-seite .spa-fenster .spa-punkt {
		color: var(--spd-ton-text);
		background-color: var(--spd-ton-flaeche);
	}

	body.sp-gast .spa-seite .spa-gruppe:not(.spm-oben) > .spa-liste .spa-punkt > .spa-symbol {
		--spd-auf: var(--spd-ton-flaeche);
	}

	body.sp-gast .spa-seite .spa-gruppe:not(.spm-oben) > .spa-liste .spa-punkt[aria-current="page"] {
		color: var(--spd-ton-text);
		background-color: var(--spd-ton-flaeche-2);
	}

	body.sp-gast .spa-seite .spa-gruppe:not(.spm-oben) > .spa-liste .spa-punkt[aria-current="page"] > .spa-symbol {
		color: var(--spd-ton-akzent);
		--spd-auf: var(--spd-ton-flaeche-2);
	}

	body.sp-gast .spa-seite .spa-gruppe:not(.spm-oben) > .spa-liste .spa-punkt:hover {
		color: var(--spd-ton-text);
		background-color: var(--spd-ton-flaeche-2);
	}

	/* Gast: der Betrieb oben, die Kachel 32 px. */
	body.sp-gast .spa-seite .spm-betrieb {
		margin: 0 0 var(--spd-s2);
		padding: var(--spd-s2) var(--spd-s3) var(--spd-s2) var(--spd-s1);
		font-size: var(--spd-f2);
		line-height: var(--spd-z2);
		--spd-auf: var(--spd-ton-grund);
	}

	/* Unten: "Einstellungen", die Profil-Karte und die vier runden Knoepfe (R-M8). */
	body.sp-gast .spa-seite .spa-seite-fuss {
		display: flex;
		flex-direction: column;
		gap: var(--spd-s2);
		margin-top: auto;
		padding-top: var(--spd-s4);
	}

	body.sp-gast .spa-seite .spa-einstellungen > summary {
		list-style: none;
	}

	body.sp-gast .spa-seite .spa-einstellungen > summary::-webkit-details-marker {
		display: none;
	}

	body.sp-gast .spa-seite .spa-einstellungen[open] > summary {
		color: var(--spd-ton-text);
		background-color: var(--spd-ton-flaeche);
	}

	body.sp-gast .spa-seite .spa-profil-zeile {
		display: flex;
		align-items: center;
		gap: var(--spd-s3);
		padding: var(--spd-s3);
		color: var(--spd-ton-text);
		background-color: var(--spd-ton-flaeche);
		border-radius: var(--spd-r1);
	}

	body.sp-gast .spa-seite .spa-profil-text {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	body.sp-gast .spa-seite .spa-profil-name {
		font-size: var(--spd-f2);
		font-weight: 600;
		line-height: var(--spd-z2);
		overflow-wrap: anywhere;
		color: var(--spd-ton-text);
		--spd-auf: var(--spd-ton-flaeche);
	}

	body.sp-gast .spa-seite .spa-profil-rolle {
		font-size: var(--spd-f1);
		font-weight: 400;
		line-height: var(--spd-z1);
		color: var(--spd-ton-text-3);
		--spd-auf: var(--spd-ton-flaeche);
	}

	body.sp-gast .spa-seite .spa-knoepfe {
		display: flex;
		justify-content: space-between;
		gap: var(--spd-s2);
		padding: 0 var(--spd-s1);
	}

	body.sp-gast .spa-seite .spa-knopf-form {
		display: contents;
	}

	body.sp-gast .spa-seite .spa-knopf {
		display: inline-grid;
		flex: 1 1 0;
		place-items: center;
		min-width: 0;
		height: 36px;
		margin: 0;
		padding: 0;
		color: var(--spd-ton-text-2);
		background-color: var(--spd-ton-flaeche);
		border: 0;
		border-radius: var(--spd-r2);
		cursor: pointer;
	}

	body.sp-gast .spa-seite .spa-knopf svg {
		width: 18px;
		height: 18px;
	}

	/* Markiert (Hilfe auf der Hilfe, Schalter an) und Hover: eine Stufe dunkler wie die gewaehlte Zeile im Panel - sichtbar anders (E2254, E2545). */
	body.sp-gast .spa-seite .spa-knopf:hover,
	body.sp-gast .spa-seite .spa-knopf[aria-pressed="true"],
	body.sp-gast .spa-seite .spa-knopf[aria-current="page"] {
		color: var(--spd-ton-akzent);
		background-color: var(--spd-ton-flaeche-2);
	}

	body.sp-gast .spa-seite .spa-knopf-rot,
	body.sp-gast .spa-seite .spa-knopf-rot:hover {
		color: var(--spd-ton-schlecht);
		background-color: var(--spd-ton-flaeche);
	}

	/* Das Fenster "Einstellungen" in B-Gestalt: rechts neben der Leiste, unten buendig, nichts liegt ueber dem Menue (E2541, M9). */
	body.sp-gast .spa-seite .spa-fenster {
		position: fixed;
		bottom: var(--spd-s4);
		left: calc(var(--spa-breite) + 8px);
		z-index: 950;
		width: max-content;
		min-width: 280px;
		max-width: min(420px, calc(100vw - var(--spa-breite) - 32px));
		margin: 0;
		padding: var(--spd-s1);
		color: var(--spd-ton-text);
		background-color: var(--spd-ton-flaeche);
		border: 1px solid var(--spd-ton-linie);
		border-radius: var(--spd-r1);
		box-shadow: var(--spd-ton-schweben);
	}

	body.sp-gast .spa-seite .spa-fenster .spa-punkt {
		padding-right: var(--spd-s4);
	}

	body.sp-gast .spa-seite .spa-fenster .spa-punkt:hover,
	body.sp-gast .spa-seite .spa-fenster .spa-punkt[aria-current="page"] {
		color: var(--spd-ton-text);
		background-color: var(--spd-ton-flaeche-2);
	}

	body.sp-gast .spa-seite .spa-fenster .spa-punkt[aria-current="page"] > .spa-symbol {
		color: var(--spd-ton-akzent);
		--spd-auf: var(--spd-ton-flaeche-2);
	}

	body.sp-gast .spa-seite .spa-fenster .spa-punkt > .spa-symbol {
		--spd-auf: var(--spd-ton-flaeche);
	}

	body.sp-gast .spa-seite .spa-fenster-titel {
		margin: 0;
		padding: var(--spd-s4) var(--spd-s3) var(--spd-s1);
		font-size: var(--spd-f1);
		font-weight: 500;
		line-height: var(--spd-z1);
		color: var(--spd-ton-text-3);
		--spd-auf: var(--spd-ton-flaeche);
	}

	body.sp-gast .spa-seite .spa-fenster-zu {
		position: absolute;
		top: var(--spd-s1);
		right: var(--spd-s1);
		display: inline-grid;
		place-items: center;
		width: 32px;
		height: 32px;
		padding: 0;
		color: var(--spd-ton-text-2);
		background-color: var(--spd-ton-flaeche-2);
		border: 0;
		border-radius: var(--spd-r2);
		cursor: pointer;
	}

	body.sp-gast .spa-seite .spa-fenster-zu:not([hidden]) + .spa-liste {
		padding-right: var(--spd-s6);
	}

	/* Kopf der Seite: die Sprache als runder Knopf ohne Rahmen (R-M10); Logo und goldene Linie bleiben. */
	body.sp-gast .spa-seite ~ .sp-kopf .sp-sprache > summary {
		color: var(--spd-ton-text);
		background-color: var(--spd-ton-flaeche-2);
		border-color: var(--spd-ton-flaeche-2);
		border-radius: var(--spd-r2);
	}
}

/* ------------------------------------------------------------ 15b Panel am Handy (unter 1024 px) */

body.sp-gast .sp-menue-panel.spa-panel {
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-grund);
}

body.sp-gast .spa-panel > * {
	box-sizing: border-box;
	max-width: 560px;
	margin-right: auto;
	margin-left: auto;
}

/* Die Profil-Karte oben zum Antippen (E2529). */
body.sp-gast .spa-panel .spm-profil {
	display: flex;
	align-items: center;
	gap: var(--spd-s4);
	margin-top: 0;
	margin-bottom: 0;
	padding: var(--spd-s4);
	text-decoration: none;
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche);
	border-radius: var(--spd-r1);
}

body.sp-gast .spa-panel .spm-profil .spa-avatar-gross {
	width: 48px;
	height: 48px;
	font-size: var(--spd-f4);
	line-height: var(--spd-z4);
}

body.sp-gast .spa-panel .spm-profil .spa-profil-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

body.sp-gast .spa-panel .spm-profil .spa-profil-name {
	font-size: var(--spd-f3);
	font-weight: 600;
	line-height: var(--spd-z3);
	overflow-wrap: anywhere;
	color: var(--spd-ton-text);
	--spd-auf: var(--spd-ton-flaeche);
}

body.sp-gast .spa-panel .spm-profil .spa-profil-mail {
	font-size: var(--spd-f2);
	font-weight: 400;
	line-height: var(--spd-z2);
	overflow-wrap: anywhere;
	color: var(--spd-ton-text-3);
	--spd-auf: var(--spd-ton-flaeche);
}

body.sp-gast .spa-panel .spm-profil .spa-profil-link {
	font-size: var(--spd-f2);
	font-weight: 500;
	line-height: var(--spd-z2);
	color: var(--spd-ton-akzent);
	--spd-auf: var(--spd-ton-flaeche);
}

body.sp-gast .spa-panel .spm-pfeil {
	flex: 0 0 auto;
	margin-left: auto;
	color: var(--spd-ton-text-3);
	--spd-auf: var(--spd-ton-flaeche);
}

/* Die Karten: weiss, 16, innen 4 - oben das Haeufigste, darunter alle Gruppen, "App", Abmelden. */
body.sp-gast .spa-panel .spm-karte,
body.sp-gast .spa-panel .spa-karte-abmelden {
	margin-top: var(--spd-s2);
	margin-bottom: 0;
	padding: var(--spd-s1);
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche);
	border-radius: var(--spd-r1);
}

body.sp-gast .spa-panel .spm-ueber {
	margin-top: 0;
	margin-bottom: 0;
	padding: var(--spd-s5) var(--spd-s3) 0;
	font-size: var(--spd-f1);
	font-weight: 500;
	line-height: var(--spd-z1);
	color: var(--spd-ton-text-3);
	--spd-auf: var(--spd-ton-grund);
}

/* Eine Zeile im Panel: 48 px, innen 12, Symbol 20 grau, Schrift 14/500, gewaehlt 600 auf Flaeche 2 mit Akzent-Symbol. */
body.sp-gast .spa-panel .sp-menue-punkt,
body.sp-gast .spa-panel .spa-zeile,
body.sp-gast .spa-panel .spa-panel-kopf {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--spd-s3);
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: var(--spd-s3);
	box-sizing: border-box;
	font-family: inherit;
	font-size: var(--spd-f2);
	font-weight: 500;
	line-height: var(--spd-z2);
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche);
	border: 0;
	border-radius: var(--spd-r1);
	cursor: pointer;
}

body.sp-gast .spa-panel .sp-menue-punkt > svg,
body.sp-gast .spa-panel .spa-zeile > svg {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: var(--spd-ton-text-2);
	--spd-auf: var(--spd-ton-flaeche);
}

body.sp-gast .spa-panel .sp-menue-punkt[aria-current="page"],
body.sp-gast .spa-panel .spa-zeile[aria-current="page"]:not(.spm-einzeln) {
	font-weight: 600;
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche-2);
}

body.sp-gast .spa-panel .sp-menue-punkt[aria-current="page"] > svg,
body.sp-gast .spa-panel .spa-zeile[aria-current="page"]:not(.spm-einzeln) > svg {
	color: var(--spd-ton-akzent);
	--spd-auf: var(--spd-ton-flaeche-2);
}

body.sp-gast .spa-panel a.sp-menue-punkt:active,
body.sp-gast .spa-panel button.sp-menue-punkt:active {
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche-2);
}

/* "Nicht in Ihrer Branche": der Satz klein darunter (wie bisher, nur ruhig). */
body.sp-gast .spa-panel .sp-menue-aus {
	flex-wrap: wrap;
	white-space: normal;
	color: var(--spd-ton-text-3);
	--spd-auf: var(--spd-ton-flaeche);
}

body.sp-gast .spa-panel .sp-menue-aus-satz {
	flex: 1 0 100%;
	padding-left: var(--spd-s6);
	font-size: var(--spd-f1);
	line-height: var(--spd-z1);
	color: var(--spd-ton-text-3);
	--spd-auf: var(--spd-ton-flaeche);
}

/* Kopf einer Gruppe und Zeile einer Gruppe mit nur einem Eintrag: 56 px mit Kachel auf Flaeche 2. */
body.sp-gast .spa-panel .spa-panel-kopf,
body.sp-gast .spa-panel .spm-einzeln {
	min-height: 56px;
	padding: var(--spd-s2) var(--spd-s3);
}

body.sp-gast .spa-panel .spa-panel-titel,
body.sp-gast .spa-panel .spm-wort {
	min-width: 0;
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: inherit;
	white-space: nowrap;
}

body.sp-gast .spa-panel .spa-panel-gruppe.spm-hier > .spa-panel-kopf .spa-gruppe-kachel,
body.sp-gast .spa-panel .spm-einzeln[aria-current="page"] .spa-gruppe-kachel {
	color: var(--spa-knopf-zeichen);
	background-color: var(--spa-knopf);
}

body.sp-gast .spa-panel .spa-panel-gruppe.spm-hier > .spa-panel-kopf {
	font-weight: 600;
}

/* Die offene Gruppe: ihre Zeilen eingerueckt unter dem Namen; Linien zwischen den Gruppen. */
body.sp-gast .spa-panel .spa-panel-gruppe > .sp-menue-liste {
	padding: 0 0 var(--spd-s1) var(--spd-s6);
}

body.sp-gast .spa-panel .spa-panel-gruppe {
	max-width: none;
	margin: 0;
}

body.sp-gast .spa-panel .spa-panel-gruppe + .spa-panel-gruppe,
body.sp-gast .spa-panel .spm-app > .sp-menue-liste + .spa-panel-gruppe {
	border-top: 1px solid var(--spd-ton-linie);
}

/* Gast: der Betrieb oben in seiner Karte. */
body.sp-gast .spa-panel .spm-betrieb {
	padding: var(--spd-s3) var(--spd-s3) var(--spd-s1);
	font-size: var(--spd-f3);
	line-height: var(--spd-z3);
}

/* Die Schalter Privatsphaere und Dunkel: 44 x 24, an in der Markenfarbe. */
body.sp-gast .spa-panel .spa-schalter {
	position: relative;
	flex: 0 0 auto;
	width: 44px;
	height: 24px;
	margin-left: auto;
	background-color: var(--spd-ton-schalter);
	border-radius: var(--spd-r2);
	--spd-flaeche: 1;
}

body.sp-gast .spa-panel .spa-schalter::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	background-color: var(--spd-ton-knauf);
	border-radius: var(--spd-r2);
	transition: transform 0.15s ease;
	--spd-flaeche: 1;
}

body.sp-gast .spa-panel [aria-pressed="true"] > .spa-schalter {
	background-color: var(--spa-knopf);
	--spd-flaeche: 1;
}

body.sp-gast .spa-panel [aria-pressed="true"] > .spa-schalter::after {
	transform: translateX(20px);
}

/* "Abmelden": eine ruhige rote Zeile in eigener Karte (R-M5). */
body.sp-gast .spa-panel .spa-karte-abmelden form {
	margin: 0;
}

body.sp-gast .spa-panel .spa-karte-abmelden .sp-menue-punkt,
body.sp-gast .spa-panel .spa-karte-abmelden .sp-menue-punkt > svg {
	color: var(--spd-ton-schlecht);
	--spd-auf: var(--spd-ton-flaeche);
}

@media (prefers-reduced-motion: reduce) {
	body.sp-gast .spa-panel .spa-schalter::after {
		transition: none;
	}
}

/* ------------------------------------------------------------ 16 Seiten der Betriebe - Design 3, Variante B "Weich" (3.9.0 Teil 5, E2546-E2556) */

/*
 * Konzept Bau-Konzepte/3.9.0-Teil-5-Betriebe-Personal.md (E2556): die vorhandenen Bausteine der angemeldeten Seiten von Inhaber und Personal in B -
 * Titel, Einleitung, Abschnitt als Karte, Feldname, Feld, Hinweis, Knoepfe, Verweis, Liste, leere Seite, Zurueck, Streifen; dazu die Startseite
 * (inhaber-start.php) und die Einstellungen als Liste (einstellungen.php). Jede Regel beginnt mit body.spd-d3-seite (H157) - die Vorlagen setzen
 * es nur angemeldet, nie auf Anmeldung, Vergessen, PIN festlegen, Zustimmung. Nur aus der Skala (H141), nur die Toene aus Abschnitt 14 (schalten
 * hell/dunkel selbst, H142); orange nur ueber die Zeichen des Rahmens (--spa-knopf, wie das Menue in 15). Das Markup bleibt Zeichen fuer Zeichen.
 */

/* 16a Kopf des Inhalts: Titel ohne goldenen Strich (die goldene Linie des Kopfes bleibt), Name des Betriebs, Einleitung, Zurueck. */
body.spd-d3-seite .spd-d3-inhalt .sp-titel {
	margin: 0 0 var(--spd-s2);
	font-size: var(--spd-f5);
	line-height: var(--spd-z5);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--spd-ton-text);
	--spd-auf: var(--spd-ton-grund);
}

body.spd-d3-seite .spd-d3-inhalt .sp-goldlinie {
	display: none;
}

body.spd-d3-seite .spd-d3-inhalt .sp-inhaber-betrieb,
body.spd-d3-seite .spd-d3-inhalt .sp-personal-betrieb {
	margin: 0 0 var(--spd-s1);
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	font-weight: 500;
	color: var(--spd-ton-text-2);
	--spd-auf: var(--spd-ton-grund);
}

/* Auf der Startseite steht der Betrieb unter dem Gruss. */
body.spd-d3-seite.sp-ansicht-start .spd-d3-inhalt .sp-inhaber-betrieb {
	display: none;
}

body.spd-d3-seite .spd-d3-inhalt .sp-einleitung {
	margin: 0 0 var(--spd-s5);
	font-size: var(--spd-f3);
	line-height: var(--spd-z3);
	color: var(--spd-ton-text-2);
	--spd-auf: var(--spd-ton-grund);
}

body.spd-d3-seite .spd-d3-inhalt .sp-zurueck {
	margin: 0 0 var(--spd-s3);
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
}

body.spd-d3-seite .spd-d3-inhalt .sp-zurueck a {
	font-weight: 500;
	text-decoration: none;
	color: var(--spd-ton-text-2);
	--spd-auf: var(--spd-ton-grund);
	--spx-auf: var(--spd-ton-text-2);
}

/* 16b Abschnitte als ruhige Karten: weiss, Rundung 16, kein Rahmen, kein Schatten, Rand rundherum gleich (R1). */
body.spd-d3-seite .spd-d3-inhalt .sp-abschnitt {
	margin: var(--spd-s5) 0 0;
	padding: var(--spd-s4);
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche);
	border: 0;
	border-radius: var(--spd-r1);
	box-shadow: none;
}

body.spd-d3-seite .spd-d3-inhalt .sp-abschnitt > :first-child {
	margin-top: 0;
}

body.spd-d3-seite .spd-d3-inhalt .sp-abschnitt > :last-child {
	margin-bottom: 0;
}

body.spd-d3-seite .spd-d3-inhalt .sp-abschnitt h2,
body.spd-d3-seite .spd-d3-inhalt .sp-abschnitt-titel {
	margin: 0 0 var(--spd-s3);
	font-size: var(--spd-f4);
	line-height: var(--spd-z4);
	font-weight: 600;
	color: var(--spd-ton-text);
	--spd-auf: var(--spd-ton-flaeche);
}

/* 16c Ruhige Formulare: Feldname, Feld, Hinweis - am Rechner hoechstens 720 px breit. */
body.spd-d3-seite .spd-d3-inhalt .sp-formular {
	max-width: 720px;
}

body.spd-d3-seite .spd-d3-inhalt .sp-feldname {
	margin: var(--spd-s4) 0 var(--spd-s2);
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	font-weight: 500;
	color: var(--spd-ton-text);
	--spd-auf: var(--spd-ton-grund);
}

body.spd-d3-seite .spd-d3-inhalt .sp-abschnitt .sp-feldname {
	color: var(--spd-ton-text);
	--spd-auf: var(--spd-ton-flaeche);
}

body.spd-d3-seite .spd-d3-inhalt :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="url"], input[type="search"], input[type="date"], input[type="time"], select, textarea) {
	box-sizing: border-box;
	min-height: 48px;
	padding: var(--spd-s3) var(--spd-s4);
	font-size: var(--spd-f3);
	line-height: var(--spd-z3);
	font-weight: 400;
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche);
	border: 1px solid var(--spd-ton-linie);
	border-radius: var(--spd-r1);
	box-shadow: none;
}

body.spd-d3-seite .spd-d3-inhalt .sp-abschnitt :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="url"], input[type="search"], input[type="date"], input[type="time"], select, textarea) {
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-grund);
	border-color: transparent;
}

body.spd-d3-seite .spd-d3-inhalt :is(input, select, textarea):focus-visible {
	border-color: var(--spd-ton-text-3);
}

body.spd-d3-seite .spd-d3-inhalt .sp-feldhinweis {
	margin: var(--spd-s2) 0 0;
	font-size: var(--spd-f1);
	line-height: var(--spd-z1);
	color: var(--spd-ton-text-3);
	--spd-auf: var(--spd-ton-grund);
}

body.spd-d3-seite .spd-d3-inhalt .sp-abschnitt .sp-feldhinweis {
	color: var(--spd-ton-text-3);
	--spd-auf: var(--spd-ton-flaeche);
}

body.spd-d3-seite .spd-d3-inhalt .sp-klein {
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	color: var(--spd-ton-text-2);
	--spd-auf: var(--spd-ton-grund);
}

body.spd-d3-seite .spd-d3-inhalt .sp-abschnitt .sp-klein {
	color: var(--spd-ton-text-2);
	--spd-auf: var(--spd-ton-flaeche);
}

body.spd-d3-seite .spd-d3-inhalt .sp-haken {
	gap: var(--spd-s2);
	font-size: var(--spd-f3);
	line-height: var(--spd-z3);
}

/* 16d Knoepfe rund (Rand Schrift-Knopf >= 12 / 8, R2): der Hauptknopf behaelt seine Farbe, der zweite ruhig; Verweise im Akzent. */
body.spd-d3-seite .spd-d3-inhalt .sp-knopf {
	min-height: 48px;
	padding: var(--spd-s3) var(--spd-s5);
	font-size: var(--spd-f3);
	line-height: var(--spd-z3);
	font-weight: 600;
	border-radius: var(--spd-r2);
	box-shadow: none;
}

body.spd-d3-seite .spd-d3-inhalt .sp-knopf-hell {
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche);
	border: 1px solid var(--spd-ton-linie);
}

body.spd-d3-seite .spd-d3-inhalt .sp-abschnitt .sp-knopf-hell {
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche-2);
	border-color: transparent;
}

body.spd-d3-seite .spd-d3-inhalt .sp-verweis {
	font-weight: 500;
	text-decoration: none;
	color: var(--spd-ton-akzent);
	--spd-auf: var(--spd-ton-flaeche);
	--spx-auf: var(--spd-ton-akzent);
}

/* 16e Listen als Karten-Zeilen, leere Seiten als ein ruhiger Satz, Streifen und Hinweise. */
body.spd-d3-seite .spd-d3-inhalt .sp-liste > li + li {
	border-top: 1px solid var(--spd-ton-linie);
}

body.spd-d3-seite .spd-d3-inhalt :is(.sp-leer, .sp-rm-leer) {
	padding: var(--spd-s6) var(--spd-s4);
	text-align: center;
	font-size: var(--spd-f3);
	line-height: var(--spd-z3);
	color: var(--spd-ton-text-2);
	background-color: var(--spd-ton-flaeche);
	border: 0;
	border-radius: var(--spd-r1);
}

body.spd-d3-seite .spd-d3-inhalt .sp-abschnitt :is(.sp-leer, .sp-rm-leer) {
	padding: var(--spd-s5) 0;
	color: var(--spd-ton-text-2);
	background-color: var(--spd-ton-flaeche);
}

body.spd-d3-seite .spd-d3-inhalt .sp-streifen {
	padding: var(--spd-s3) var(--spd-s4);
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	border-radius: var(--spd-r1);
}

body.spd-d3-seite .spd-d3-inhalt .spd-d3-leer {
	padding: var(--spd-s5) var(--spd-s4);
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	color: var(--spd-ton-text-2);
	--spd-auf: var(--spd-ton-flaeche);
}

body.spd-d3-seite .spd-d3-inhalt .spd-d3-rechts > .spd-d3-leer {
	padding: var(--spd-s6) 0;
	text-align: center;
	color: var(--spd-ton-text-2);
	--spd-auf: var(--spd-ton-grund);
}

/* Der Alkohol-Hinweis klein und grau am Seitenende (E2505) - der Satz bleibt in seinem Absatz. */
body.spd-d3-seite .spd-d3-inhalt .spd-d3-hinweis .sp-hinweis-regeln {
	margin: 0;
	padding: 0;
	font-size: var(--spd-f1);
	line-height: var(--spd-z1);
	color: var(--spd-ton-text-3);
	background-color: var(--spd-ton-grund);
	border: 0;
	border-radius: 0;
}

/* 16f Startseite: "Alle Bereiche" - die Kacheln (Markup wie bisher) als ruhige Liste in einer Karte. */
body.spd-d3-seite .spd-d3-inhalt .spd-d3-bereiche .sp-kacheln {
	display: block;
	margin: 0;
	padding: var(--spd-s1) 0;
	list-style: none;
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche);
	border-radius: var(--spd-r1);
}

body.spd-d3-seite .spd-d3-inhalt .spd-d3-bereiche .sp-kacheln > li {
	position: relative;
}

body.spd-d3-seite .spd-d3-inhalt .spd-d3-bereiche .sp-kacheln > li + li::after {
	content: "";
	position: absolute;
	top: 0;
	left: 68px;
	right: 0;
	border-top: 1px solid var(--spd-ton-linie);
}

body.spd-d3-seite .spd-d3-inhalt .spd-d3-bereiche .sp-kacheln > li::before {
	top: calc(50% - 20px);
	left: 16px;
	width: 40px;
	height: 40px;
	background-color: var(--spd-ton-flaeche-2);
	border-radius: var(--spd-r2);
	--spd-flaeche: 1;
}

body.spd-d3-seite .spd-d3-inhalt .spd-d3-bereiche .sp-kacheln .sp-kachel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0;
	min-height: 64px;
	height: auto;
	margin: 0;
	padding: var(--spd-s3) var(--spd-s6) var(--spd-s3) 68px;
	color: var(--spd-ton-text);
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	--spd-auf: var(--spd-ton-flaeche);
}

body.spd-d3-seite .spd-d3-inhalt .spd-d3-bereiche .sp-kacheln .sp-kachel::before {
	top: calc(50% - 10px);
	left: 26px;
	width: 20px;
	height: 20px;
	-webkit-mask-size: 20px 20px;
	mask-size: 20px 20px;
	background-color: var(--spd-ton-text);
	--spd-flaeche: 1;
}

body.spd-d3-seite .spd-d3-inhalt .spd-d3-bereiche .sp-kacheln .sp-kachel::after {
	top: calc(50% - 10px);
	right: 16px;
	width: 20px;
	height: 20px;
	background-color: var(--spd-ton-text-3);
	background-image: none;
	border-radius: 0;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
	--spd-flaeche: 1;
}

body.spd-d3-seite .spd-d3-inhalt .spd-d3-bereiche .sp-kachel-titel {
	font-size: var(--spd-f3);
	line-height: var(--spd-z3);
	font-weight: 500;
	color: var(--spd-ton-text);
	--spd-auf: var(--spd-ton-flaeche);
}

body.spd-d3-seite .spd-d3-inhalt .spd-d3-bereiche .sp-kachel-text {
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	color: var(--spd-ton-text-2);
	--spd-auf: var(--spd-ton-flaeche);
}

/* 16g Einstellungen: Zeilen als Knopf (Schalter, Abmelden), der Schalter an in der Farbe des Rahmens, die Unterseiten. */
body.spd-d3-seite .spd-d3-inhalt button.spd-d3-zeile {
	width: 100%;
	margin: 0;
	text-align: left;
	font: inherit;
	color: var(--spd-ton-text);
	background: none;
	border: 0;
	cursor: pointer;
	--spd-auf: var(--spd-ton-flaeche);
}

body.spd-d3-seite .spd-d3-inhalt button.spd-d3-zeile[hidden] {
	display: none;
}

body.spd-d3-seite .spd-d3-inhalt .spd-d3-zeile[aria-pressed="true"] .spd-d3-schalter {
	background-color: var(--spa-knopf);
	--spd-flaeche: 1;
}

body.spd-d3-seite .spd-d3-inhalt .spd-d3-zeile[aria-pressed="true"] .spd-d3-schalter::after {
	left: 22px;
}

body.spd-d3-seite .spd-d3-inhalt .spd-d3-abmelden {
	margin: 0;
}

body.spd-d3-seite .spd-d3-inhalt .spd-d3-einst-zwei .sp-zurueck {
	display: none;
}

@media (max-width: 899px) {
	body.spd-d3-seite .spd-d3-inhalt .spd-d3-einst-zwei.ist-unterseite .spd-d3-links {
		display: none;
	}

	body.spd-d3-seite .spd-d3-inhalt .spd-d3-einst-zwei.ist-unterseite .spd-d3-rechts {
		display: block;
	}
}

@media (min-width: 900px) {
	body.spd-d3-seite .spd-d3-inhalt .spd-d3-einst-zwei .spd-d3-rechts > .spd-d3-zurueck {
		display: none;
	}

	body.spd-d3-seite .spd-d3-inhalt .spd-d3-einst-zwei .spd-d3-links .spd-d3-held .spd-d3-kopf {
		margin-bottom: var(--spd-s5);
	}
}

/* 16h Die Zeile "Angemeldet" des Personals (auch der Inhaber auf der Personal-Seite) und die Abstaende auf "Punkte buchen" (3.9.0 Teil 5b, E2567). */

/*
 * Konzept Bau-Konzepte/3.9.0-Teil-5b-Angemeldet-Zeile.md (E2569): statt des gelben Kastens (gast.css .sp-angemeldet) eine ruhige Zeile direkt unter dem
 * Namen des Betriebs - klein, grau, ohne Flaeche, Rahmen und Schatten; Markup, Texte, Abmelden-Formular und Link bleiben Zeichen fuer Zeichen. Der Punkt
 * zwischen Name und Link ist nur Gestaltung (fuer Bildschirmleser leer). Die Tipp-Flaeche des Links ist mindestens 44 px hoch und reicht nur nach unten
 * in den eigenen Abstand (nie ueber den Namen des Betriebs oder den naechsten Knopf, H159). Das Team behaelt seinen Kasten (nicht unter spd-d3-seite).
 */
body.spd-d3-seite .spd-d3-inhalt .sp-angemeldet {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 0 var(--spd-s2);
	margin: 0 0 var(--spd-s5);
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

body.spd-d3-seite .spd-d3-inhalt .sp-angemeldet-name {
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	font-weight: 400;
	color: var(--spd-ton-text-2);
	--spd-auf: var(--spd-ton-grund);
}

body.spd-d3-seite .spd-d3-inhalt .sp-angemeldet-name::after {
	content: "\00b7";
	content: "\00b7" / "";
	margin-left: var(--spd-s1);
}

body.spd-d3-seite .spd-d3-inhalt .sp-angemeldet form {
	display: flex;
	margin: 0;
}

body.spd-d3-seite .spd-d3-inhalt .sp-angemeldet .sp-verweis {
	display: inline-flex;
	align-items: flex-start;
	min-height: 44px;
	margin: 0 0 calc(-1 * var(--spd-s5));
	padding: 0;
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	font-weight: 500;
	text-decoration: none;
	color: var(--spd-ton-akzent);
	background: none;
	border: 0;
	cursor: pointer;
	--spd-auf: var(--spd-ton-grund);
	--spx-auf: var(--spd-ton-akzent);
}

/*
 * E2570: auf "Punkte buchen" standen "QR-Code zeigen" und "Theken-Modus" 56 px auseinander - drei Aussenabstaende aus gast.css (20 unter dem QR-Knopf,
 * 12 ueber dem Block, 24 ueber jedem .sp-knopf) addierten sich, weil beide Knoepfe inline-flex sind. Jetzt wie die Aktionen von B: 12 zwischen den
 * Knoepfen, 8 zum Satz, 24 bis zum Titel (ohne Skript bleibt der Block verborgen: QR-Knopf bis Titel ebenso 24).
 */
body.spd-d3-seite .spd-d3-inhalt .sp-qr-knopf {
	margin: 0;
}

body.spd-d3-seite .spd-d3-inhalt .sp-theke-start {
	margin: var(--spd-s3) 0 0;
}

body.spd-d3-seite .spd-d3-inhalt .sp-theke-start .sp-theke-knopf {
	margin: 0;
}

body.spd-d3-seite .spd-d3-inhalt .sp-theke-start .sp-klein {
	margin: var(--spd-s2) 0 0;
}

body.spd-d3-seite .spd-d3-inhalt .sp-qr-knopf ~ .sp-titel {
	margin-top: var(--spd-s5);
}

/* 16i Befunde der Design-Pruefung - erste Gruppe (3.9.0 Teil 5c, E2579, E2585; Konzept Bau-Konzepte/3.9.0-Teil-5c-Design-Pruefung.md, Befunde
 * Bau-Konzepte/3.9.0-Teil-5c-Befunde.md): nur Gestaltung, nur unter body.spd-d3-seite (H157), nur Werte der Skala (H141), nur Toene aus Abschnitt 14 (H142).
 * Der Rest der Befunde folgt in Teil 5d (E2582). */

/* R8 Kontrast: Pflicht-Hinweis, Name im Monatsbericht und "Von/Bis" der Oeffnungszeiten waren 4,36 : 1 (Grau aus gast.css) - jetzt Text 2. */
body.spd-d3-seite .spd-d3-inhalt :is(.sp-pflicht-hinweis, .sp-bericht-name, .sp-zeiten-feld) {
	color: var(--spd-ton-text-2);
	--spd-auf: var(--spd-ton-grund);
}

body.spd-d3-seite .spd-d3-inhalt .sp-abschnitt :is(.sp-pflicht-hinweis, .sp-bericht-name, .sp-zeiten-feld) {
	color: var(--spd-ton-text-2);
	--spd-auf: var(--spd-ton-flaeche);
}

/* R12 Meldungen im Inhalt (ohne Skript, und die Zeile ueber dem Formular): Innenabstand rundherum, ruhig ohne Schatten und Strich; Feldfehler 500. */
body.spd-d3-seite .spd-d3-inhalt :is(p.sp-fehler, p.sp-meldung) {
	padding: var(--spd-s3) var(--spd-s4);
	border: 0;
	border-radius: var(--spd-r1);
	box-shadow: none;
}

body.spd-d3-seite .spd-d3-inhalt p.sp-fehler {
	color: var(--spd-ton-schlecht);
	background-color: var(--spd-ton-schlecht-flaeche);
}

body.spd-d3-seite .spd-d3-inhalt p.sp-meldung {
	color: var(--spd-ton-gut);
	background-color: var(--spd-ton-flaeche);
}

body.spd-d3-seite .spd-d3-inhalt .sp-feldfehler {
	font-weight: 500;
}

/* R5 zu breit: eine lange Adresse im kleinen Satz (Seite des Personals unter "Mitarbeiter") bricht um, statt die Seite breiter zu machen. */
body.spd-d3-seite .spd-d3-inhalt .sp-klein a {
	overflow-wrap: anywhere;
}

/* R11 gleiche Knoepfe: wie die Knoepfe von B 48 px hoch und in 600 (Abschnitt 3 setzt 500 mit !important, E1934 - darum hier ebenso, E2585);
 * der Hauptknopf ohne den unsichtbaren Rand, der zweite mit seiner Linie als Kontur statt Rand (keine 2 px mehr). Verweise 14 px und 500. */
body.spd-d3-seite .spd-d3-inhalt .sp-knopf {
	font-weight: 600 !important;
	border-width: 0;
}

body.spd-d3-seite .spd-d3-inhalt .sp-knopf-hell {
	border-width: 0;
	outline: 1px solid var(--spd-ton-linie);
	outline-offset: -1px;
}

body.spd-d3-seite .spd-d3-inhalt .sp-abschnitt .sp-knopf-hell {
	outline-color: transparent;
}

body.spd-d3-seite .spd-d3-inhalt .sp-verweis {
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	font-weight: 500;
}

/* R7 Tipp-Flaechen mindestens 44 px: Aufklapper, Haken und Auswahl-Knoepfe der Listen (Monate, Arten, Shop-Filter). */
body.spd-d3-seite .spd-d3-inhalt summary {
	display: flex;
	align-items: center;
	min-height: 44px;
}

body.spd-d3-seite .spd-d3-inhalt .sp-haken {
	align-items: center;
	min-height: 44px;
	margin: 0;
}

body.spd-d3-seite .spd-d3-inhalt :is(.sp-kb-wahl, .sp-shop-pille) {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* R10 alte Reste: keine Schatten auf Karten, leeren Saetzen und der Karte des Gastes; kein goldener Strich am Hinweis des Treueprogramms; die
 * Hinweise zu Regeln und die kurzen Hinweise ruhig und grau statt gelb (wie der Alkohol-Hinweis in 16e, E2505). */
body.spd-d3-seite .spd-d3-inhalt :is(.sp-treue, .sp-leer, .sp-gastkarte, .sp-banner-flaeche, .sp-team-abschnitt) {
	box-shadow: none;
}

body.spd-d3-seite .spd-d3-inhalt .sp-gastkarte {
	border: 0;
}

body.spd-d3-seite .spd-d3-inhalt .sp-treue-hinweis {
	padding: 0;
	border: 0;
}

body.spd-d3-seite .spd-d3-inhalt :is(.sp-hinweis-regeln, .sp-hinweis-kurz) {
	padding: 0;
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	color: var(--spd-ton-text-2);
	background-color: var(--spd-ton-grund);
	border: 0;
	border-radius: 0;
}

body.spd-d3-seite .spd-d3-inhalt .sp-abschnitt :is(.sp-hinweis-regeln, .sp-hinweis-kurz) {
	color: var(--spd-ton-text-2);
	background-color: var(--spd-ton-flaeche);
}

/* 16i (Fortsetzung) Teil 5d - der Rest der Befunde (3.9.0 Teil 5d, E2586-E2592; Konzept Bau-Konzepte/3.9.0-Teil-5d-Befunde-beheben.md): nur Gestaltung,
 * nur unter body.spd-d3-seite (H157), nur Werte der Skala (H141), nur Toene aus Abschnitt 14 (H142). Danach ist design-390-offen.json leer. */

/* R6 Luecken (E2590): die alten Abstaende aus gast.css, app.css und aussehen-editor.css auf die Skala; Knoepfe untereinander 12; Titel und Text nie 0. */
body.spd-d3-seite .spd-d3-inhalt .sp-knopfreihe {
	gap: var(--spd-s3);
}

body.spd-d3-seite .spd-d3-inhalt .sp-knopfreihe .sp-knopf,
body.spd-d3-seite .spd-d3-inhalt .sp-qr-hinweis + .sp-knopf {
	margin-top: 0;
}

body.spd-d3-seite .spd-d3-inhalt :is(.sp-stufe, .sp-treue-eintrag) {
	row-gap: var(--spd-s1);
}

body.spd-d3-seite .spd-d3-inhalt .sp-res-karte > p {
	margin-bottom: var(--spd-s1);
}

body.spd-d3-seite .spd-d3-inhalt .sp-treue-symbole {
	margin-top: var(--spd-s4);
}

body.spd-d3-seite .spd-d3-inhalt .sp-gast-zahlen {
	margin-top: var(--spd-s2);
}

body.spd-d3-seite .spd-d3-inhalt .sp-bericht-name {
	margin-top: var(--spd-s1);
}

body.spd-d3-seite .spd-d3-inhalt .sp-angebot-kurz-text .sp-klein {
	margin-top: var(--spd-s1);
}

body.spd-d3-seite .spd-d3-inhalt .sp-abo-angaben {
	row-gap: var(--spd-s2);
	margin-bottom: var(--spd-s3);
}

body.spd-d3-seite .spd-d3-inhalt .sp-ablage-zahl,
body.spd-d3-seite .spd-d3-inhalt .sp-ablage input[type="file"] {
	margin-top: var(--spd-s1);
}

/* Shop: "Wer verkauft", Zahlarten, Versand, Produkt. */
body.spd-d3-seite .spd-d3-inhalt .sp-shop-wer-verkauft {
	margin-bottom: var(--spd-s3);
}

body.spd-d3-seite .spd-d3-inhalt .sp-shop-wer-verkauft + .sp-shop-hinweis-angaben {
	margin-top: 0;
}

body.spd-d3-seite .spd-d3-inhalt .sp-shop-zahlarten h3 {
	margin: var(--spd-s4) 0 var(--spd-s2);
}

body.spd-d3-seite .spd-d3-inhalt .sp-shop-zahlarten h3 + .sp-feldname {
	margin-top: 0;
}

body.spd-d3-seite .spd-d3-inhalt :is(select, textarea) {
	vertical-align: top;
}

body.spd-d3-seite .spd-d3-inhalt .sp-shop-varianten {
	margin-bottom: var(--spd-s2);
}

body.spd-d3-seite .spd-d3-inhalt :is(.sp-shop-lieferung p, .sp-shop-hinweis) {
	margin: 0;
}

body.spd-d3-seite .spd-d3-inhalt .sp-shop-knoepfe {
	margin-top: var(--spd-s3);
}

body.spd-d3-seite .spd-d3-inhalt .sp-liste-fuss {
	margin-top: var(--spd-s3);
}

/* Rufe: Abstand unter den Ruf-Karten, die Ueberschrift "Alle Rufe" mit Luft ueber und unter sich. */
body.spd-d3-seite .spd-d3-inhalt .sp-rufkarten .sp-rufe {
	margin-bottom: var(--spd-s5);
}

body.spd-d3-seite .spd-d3-inhalt .sp-rufe-alle {
	margin: var(--spd-s5) 0 var(--spd-s3);
	font-size: var(--spd-f4);
	line-height: var(--spd-z4);
	font-weight: 600;
}

/* "Aussehen": die Vorschau des Handys in der Skala. */
body.spd-d3-seite .spd-d3-inhalt .spw-unter {
	margin-top: var(--spd-s5);
}

body.spd-d3-seite .spd-d3-inhalt .spw-v-kopf {
	row-gap: var(--spd-s1);
}

body.spd-d3-seite .spd-d3-inhalt .spw-v-inhalt {
	row-gap: var(--spd-s3);
}

/* QR-Code des Personals: der Satz ueber dem Code ein Titel wie alle (28/32/600), darunter 8 bis zum Hinweis. */
body.spd-d3-seite .spd-d3-inhalt .sp-qr-satz {
	font-size: var(--spd-f5);
	line-height: var(--spd-z5);
	font-weight: 600;
}

body.spd-d3-seite .spd-d3-inhalt .sp-qr-hinweis {
	margin-top: var(--spd-s2);
}

/* R10 alte Reste (E2589): Ruf-Karten ruhig wie die Karten von B (weiss, Rundung 16, ohne Schatten und Goldrahmen); wer hingeht und "ohne Platz"
 * bleiben als Streifen links in den Toenen von B; "gerade eben" und "Tippen fuer Ton" ruhig grau. */
body.spd-d3-seite .spd-d3-inhalt .sp-ruf.sp-rufkarte {
	padding: var(--spd-s4);
	border: 0;
	border-radius: var(--spd-r1);
	box-shadow: none;
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche);
}

body.spd-d3-seite .spd-d3-inhalt .sp-ruf.sp-rufkarte.sp-ruf-unterwegs {
	border-left: 4px solid var(--spd-ton-gut);
}

body.spd-d3-seite .spd-d3-inhalt .sp-ruf.sp-rufkarte.sp-rufkarte-unbekannt {
	border-left: 4px solid var(--spd-ton-schlecht);
}

body.spd-d3-seite .spd-d3-inhalt .sp-ruf.sp-rufkarte.sp-rufkarte-probe {
	border: 1px dashed var(--spd-ton-linie);
}

body.spd-d3-seite .spd-d3-inhalt .sp-rufkarte-alter {
	padding: var(--spd-s1) var(--spd-s2);
	font-size: var(--spd-f1);
	line-height: var(--spd-z1);
	font-weight: 600;
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche-2);
	border-radius: var(--spd-r2);
}

body.spd-d3-seite .spd-d3-inhalt .sp-rufkarten-ton-knopf {
	padding: var(--spd-s2) var(--spd-s4);
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	font-weight: 600;
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche);
	border: 1px solid var(--spd-ton-linie);
}

/* Auswahl wie die Chips von B: ruhig grau, gewaehlt mit Rahmen in der Schriftfarbe - auch dunkel ohne helle Flaeche (H17) (Symbol-Kacheln, Filter der
 * Bestellungen, Plaetze, gewaehlte Provinzen). */
body.spd-d3-seite .spd-d3-inhalt .sp-treue-symbol-kachel {
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche);
	border: 2px solid var(--spd-ton-linie);
	border-radius: var(--spd-r1);
}

body.spd-d3-seite .spd-d3-inhalt .sp-treue-symbol-kachel:has(input:checked) {
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche-2);
	border-color: var(--spd-ton-text);
}

body.spd-d3-seite .spd-d3-inhalt .sp-shop-pille {
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche-2);
	border-color: transparent;
}

body.spd-d3-seite .spd-d3-inhalt .sp-shop-pille.sp-aktiv {
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche);
	border-color: var(--spd-ton-text);
}

body.spd-d3-seite .spd-d3-inhalt .sp-platz-knopf {
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche-2);
	border-color: transparent;
}

body.spd-d3-seite .spd-d3-inhalt .sp-platz-kachel[open] > .sp-platz-knopf {
	border-color: var(--spd-ton-text);
}

body.spd-d3-seite .spd-d3-inhalt .spd-chip {
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche-2);
}

/* Hinweise ruhig: "Wer verkauft", Standort, Reservierungen beim Personal - Flaeche 2 statt Gelb, ohne goldenen Strich. */
body.spd-d3-seite .spd-d3-inhalt :is(.sp-shop-wer-verkauft, .sp-ob-standort-info, .sp-res-hinweis-personal) {
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche-2);
	border: 0;
	border-radius: var(--spd-r1);
}

/* "Aussehen": das Handy ohne Schatten (eine Linie wie die Karten), der Titel 600, der Hinweis grau. */
body.spd-d3-seite .spd-d3-inhalt .spw-handy {
	box-shadow: none;
}

body.spd-d3-seite .spd-d3-inhalt .spw-v-titel {
	font-weight: 600;
}

body.spd-d3-seite .spd-d3-inhalt .spw-v-hinweis {
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche-2);
}

body.spd-d3-seite .spd-d3-inhalt .sp-qr-gross {
	box-shadow: none;
}

/* Felder in Gruppen (fieldset) ohne den Rahmen des Browsers - der Feldname (legend) steht wie jeder Feldname ueber den Feldern. */
body.spd-d3-seite .spd-d3-inhalt fieldset {
	min-width: 0;
	padding: 0;
	border: 0;
}

body.spd-d3-seite .spd-d3-inhalt .sp-shop-wer-verkauft {
	padding: 0;
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-grund);
}

body.spd-d3-seite .spd-d3-inhalt .sp-abschnitt .sp-shop-wer-verkauft {
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche);
}

body.spd-d3-seite .spd-d3-inhalt .sp-res-karte .sp-res-verlauf {
	margin-top: var(--spd-s1);
}

body.spd-d3-seite .spd-d3-inhalt .sp-shop-bestellung {
	margin-bottom: var(--spd-s3);
}

body.spd-d3-seite .spd-d3-inhalt .sp-abo {
	margin-bottom: var(--spd-s4);
}

body.spd-d3-seite .spd-d3-inhalt > p + .sp-titel {
	margin-top: var(--spd-s2);
}

body.spd-d3-seite .spd-d3-inhalt .sp-platz-kachel {
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche);
}

/* R4: die Zeile "Name des Betriebs: ... Kontaktdaten: ..." - jede Beschriftung bleibt beisammen (sonst liegt ihr Rahmen ueber der anderen);
 * der Satz unter "Bestellungen als Datei" steht in einer eigenen Zeile. */
body.spd-d3-seite .spd-d3-inhalt .sp-pruefung-stand > span {
	white-space: nowrap;
}

body.spd-d3-seite .spd-d3-inhalt .sp-shop-datei .sp-klein {
	display: block;
}

/* R7 Tipp-Flaechen (E2587): freistehende Links bekommen ihre 44 px unsichtbar (Innenabstand; als Zeile im Satz verschiebt der Innenabstand
 * nichts, als Block gleicht ihn ein negativer Aussenabstand aus) - das Bild von B bleibt gleich. Nur Links in Absaetzen (p) - Links in Listen
 * der Bausteine von B (runde Knoepfe, Zeilen) haben ihre Flaechen schon. */
body.spd-d3-seite .spd-d3-inhalt :is(p > a:not([class]), a.sp-verweis) {
	padding-top: var(--spd-s4);
	padding-bottom: var(--spd-s4);
}

/* Zwei Zurueck-Links uebereinander (neues Produkt): so weit auseinander, dass sich ihre Flaechen nicht ueberdecken. */
body.spd-d3-seite.sp-ansicht-shop_produkt .spd-d3-inhalt .sp-zurueck {
	margin-bottom: var(--spd-s6);
}

/* Die Wege unter "Hilfe" als Zeilen von 44 px (eine Liste von Links - jeder einzeln antippbar). */
body.spd-d3-seite .spd-d3-inhalt .spa-hilfe-wege {
	row-gap: 0;
}

body.spd-d3-seite .spd-d3-inhalt .spa-hilfe-wege li > a:not([class]) {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
}

body.spd-d3-seite .spd-d3-inhalt .spd-d3-ab-kopf .spd-d3-link {
	padding: var(--spd-s3) 0;
	margin: calc(-1 * var(--spd-s3)) 0;
}

body.spd-d3-seite .spd-d3-inhalt .spw-schalter {
	min-height: 44px;
}

/* Am Rechner: die Zeilen der Leiste 44 px (Tablets quer tippen ab 1024 px), die runden Knoepfe unten 44 px hoch mit der Flaeche wie bisher 36 px. */
@media (min-width: 1024px) {
	body.spd-d3-seite .spa-seite .spa-punkt {
		min-height: 44px;
	}

	body.spd-d3-seite .spa-seite .spa-knopf {
		height: 44px;
		padding: var(--spd-s1) 0;
		margin: calc(-1 * var(--spd-s1)) 0;
		background-clip: content-box;
	}
}

/* R12 ohne Skript (E2588): verborgene Knoepfe bleiben verborgen ("QR-Code scannen" zeigt erst das Skript); die Gruppen-Koepfe des Menues sind ohne
 * Skript ohne Wirkung (die Gruppen sind offen) und darum still. */
body.spd-d3-seite .spd-d3-inhalt .sp-knopf[hidden] {
	display: none;
}

@media (scripting: none) {
	body.spd-d3-seite :is(.spa-gruppe-kopf, .spa-panel-kopf) {
		pointer-events: none;
		cursor: default;
	}
}

/* "Mein Abo": die Links zu den Rechnungsangaben und den Abo-Bedingungen stehen je in einer Zeile - als Zeilen von 44 px (sonst ueberdecken sich ihre
 * Flaechen); "Nein, SiamPoints behalten" mit Luft unter dem Code-Knopf. */
body.spd-d3-seite.sp-ansicht-abo .spd-d3-inhalt p.sp-klein > a:not([class]) {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
}

body.spd-d3-seite .spd-d3-inhalt .sp-nebenweg {
	margin-top: var(--spd-s4);
}

/* Zahlungsseite (seit Teil 5d im Waechter, E2592): die Rechnung als Karte von B, die Hinweise ruhig mit Innenabstand, Abstaende aus der Skala,
 * die Namen der Bankdaten in Text 2 (vorher 4,36 : 1). */
body.spd-d3-seite .spd-d3-inhalt .sp-zf-rechnung {
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche);
	border: 0;
	border-radius: var(--spd-r1);
}

body.spd-d3-seite .spd-d3-inhalt .sp-zf-rechnung h3 {
	margin-top: var(--spd-s4);
}

body.spd-d3-seite .spd-d3-inhalt .sp-zf-kopf .sp-klein {
	margin-bottom: 0;
}

body.spd-d3-seite .spd-d3-inhalt .sp-zf-summe {
	margin-bottom: var(--spd-s5);
}

body.spd-d3-seite .spd-d3-inhalt .sp-zf-bank {
	row-gap: var(--spd-s2);
}

body.spd-d3-seite .spd-d3-inhalt .sp-zf-bank dt {
	color: var(--spd-ton-text-2);
	--spd-auf: var(--spd-ton-grund);
}

body.spd-d3-seite .spd-d3-inhalt .sp-hinweis-gold {
	padding: var(--spd-s3) var(--spd-s4);
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche);
	border: 0;
	border-radius: var(--spd-r1);
}

body.spd-d3-seite .spd-d3-inhalt .sp-zf-rechnung .sp-hinweis-gold {
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche-2);
}

/* R9/R4/R5 Namen und Breite (E2591): Knoepfe einer Reihe stehen gleich breit nebeneinander, solange ihre Beschriftung in eine Zeile passt, sonst
 * untereinander (lange Saetze auf Thai, Russisch, Japanisch, Deutsch - vorher drei Zeilen; E1934 "gleich breit" bleibt nebeneinander); die Angaben des Abos teilen sich die Breite; die Zeilen der Einstellungen lassen in 320 px den
 * Wert umbrechen (sonst laeuft der Name aus seiner Zeile). */
body.spd-d3-seite .spd-d3-inhalt :is(.sp-knopfreihe, .sp-ruf-knoepfe) {
	display: flex;
	flex-wrap: wrap;
}

body.spd-d3-seite .spd-d3-inhalt :is(.sp-knopfreihe, .sp-ruf-knoepfe) > * {
	flex: 1 1 0;
	min-width: fit-content;
}

body.spd-d3-seite .spd-d3-inhalt .sp-abo-angaben {
	grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
	column-gap: var(--spd-s3);
}

body.spd-d3-seite .spd-d3-inhalt .sp-abo-angaben :is(dt, dd) {
	overflow-wrap: break-word;
}

@media (max-width: 359px) {
	body.spd-d3-seite .spd-d3-inhalt .spd-d3-zeile {
		gap: var(--spd-s2);
		padding-left: var(--spd-s3);
		padding-right: var(--spd-s3);
	}

	body.spd-d3-seite .spd-d3-inhalt .spd-d3-zeile .spd-d3-text {
		min-width: min-content;
	}

	body.spd-d3-seite .spd-d3-inhalt .spd-d3-zeile .spd-d3-wert {
		flex-shrink: 1;
		white-space: normal;
		text-align: right;
	}
}

/* ------------------------------------------------------------ 17 Sperrbildschirm wie die Bausteine von B (3.9.0 Teil 5d, E2586) */

/* Der Sperrbildschirm (templates/sperrbildschirm.php) traegt kein spd-d3-seite - darum ein eigener Abschnitt mit seinem Selektor. Titel, Feldname,
 * Hauptknopf und Verweis wie auf den Seiten in B (R11): 28/32/600, 14/20/500, 48 px rund in 600 (Abschnitt 3 setzt 500 mit !important, E1934),
 * 14/500. Nur Masse - die Farben bleiben. */
body.sp-sperrbildschirm .sp-titel {
	font-size: var(--spd-f5);
	line-height: var(--spd-z5);
	font-weight: 600;
}

body.sp-sperrbildschirm .sp-feldname {
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	font-weight: 500;
}

body.sp-sperrbildschirm .sp-knopf {
	min-height: 48px;
	padding: var(--spd-s3) var(--spd-s5);
	font-size: var(--spd-f3);
	line-height: var(--spd-z3);
	font-weight: 600 !important;
	border-width: 0;
	border-radius: var(--spd-r2);
}

body.sp-sperrbildschirm .sp-verweis {
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	font-weight: 500;
}

/* ------------------------------------------------------------ 18 Seiten der Gaeste - Design 3, Variante B "Weich" (3.9.0 Teil 6, E2610-E2620) */

/*
 * Konzept Bau-Konzepte/3.9.0-Teil-6-Gaeste.md (E2619): jede Seite der Gaeste traegt seit Teil 6 spd-d3-seite (rahmen.php, nie die Anmeldung - Teil 7),
 * damit wirkt Abschnitt 16 auch dort. Hier steht nur, was die Gaeste zusaetzlich brauchen: der Profil-Kopf ohne Foto, die Ueberschriften der
 * Abschnitte klein und grau wie in B, die Zeilen von Belohnungen, Meinung, "Ueber diesen Betrieb" und Notizen, der Ruf als Karte, die Fotos, die
 * Karten-Listen und leeren Seiten. Jede Regel beginnt mit body.spd-d3-seite.sp-gast (H180); keine Regel greift in die Punkte-Darstellung (Pass,
 * Besuchsnummer, Punktekarte, Stufe, "Gesammelt insgesamt" - E2616, H179). Nur aus der Skala (H141), nur die Toene aus Abschnitt 14 (H142).
 */

/* 18a Profil-Kopf (E2611, E2612): ohne Foto eine ruhige, niedrigere Flaeche - der Avatar ueberlappt sie wie beim Foto. Name wie der Titel von B. */
body.spd-d3-seite.sp-gast .spd-d3-inhalt .spd-d3-titelbild.ist-leer {
	aspect-ratio: 3 / 1;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .spd-d3-avatar.ist-logo {
	background-color: var(--spd-ton-flaeche);
	--spd-flaeche: 1;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .spd-d3-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: var(--spd-r2);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .spd-d3-profil-name .sp-titel {
	margin: 0;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .spd-d3-status.ist-zu {
	color: var(--spd-ton-schlecht);
	--spd-auf: var(--spd-ton-grund);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .spd-d3-status.ist-zu::before {
	background-color: var(--spd-ton-schlecht);
	--spd-flaeche: 1;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .spd-d3-profil .spd-d3-kreise a {
	text-decoration: none;
}

/* 18b Ueberschriften: unter jeder Zwischenueberschrift ein Abstand der Skala (Shop, Kasse, Bestellungen - vorher 0); die Ueberschriften der
   Abschnitte auf der Seite des Betriebs klein und grau wie in B ("Ihre Meinung", "Brauchen Sie etwas?", "Ueber diesen Betrieb" ...). */
body.spd-d3-seite.sp-gast .spd-d3-inhalt :is(h2, h3, h4):not(.spd-d3-ueber) {
	margin-bottom: var(--spd-s2);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt :is(.sp-belohnungen, .sp-meinung, .sp-hilfe, .sp-reservierung, .sp-angebote, .sp-angaben) {
	margin: var(--spd-s6) 0 0;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt :is(.sp-belohnungen, .sp-meinung, .sp-hilfe, .sp-reservierung, .sp-angebote, .sp-angaben) > h2 {
	margin: 0 0 var(--spd-s3);
	padding: 0 var(--spd-s1);
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	font-weight: 600;
	color: var(--spd-ton-text-2);
	--spd-auf: var(--spd-ton-grund);
}

/* 18c Belohnungen als Zeilen von B (E2617): Symbol, Name, darunter die Schwelle, rechts was fehlt oder "Einloesen" - das Markup wie bisher. */
body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-leiter {
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: var(--spd-ton-flaeche);
	color: var(--spd-ton-text);
	border-radius: var(--spd-r1);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-leiter > .sp-stufe {
	position: relative;
	display: grid;
	grid-template-columns: 40px minmax(0, max-content) minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: var(--spd-s3);
	row-gap: 0;
	margin: 0;
	padding: var(--spd-s3) var(--spd-s4);
	min-height: 64px;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-leiter > .sp-stufe + .sp-stufe::before {
	content: "";
	position: absolute;
	top: 0;
	left: 68px;
	right: 0;
	border-top: 1px solid var(--spd-ton-linie);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-leiter .spd-d3-zeichen {
	grid-column: 1;
	grid-row: 1 / 3;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-leiter .sp-stufe-text {
	grid-column: 2 / 4;
	grid-row: 1;
	font-size: var(--spd-f3);
	line-height: var(--spd-z3);
	font-weight: 500;
	color: var(--spd-ton-text);
	--spd-auf: var(--spd-ton-flaeche);
	overflow-wrap: anywhere;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-leiter .sp-stufe-schwelle {
	grid-column: 2;
	grid-row: 2;
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	font-weight: 400;
	color: var(--spd-ton-text-2);
	--spd-auf: var(--spd-ton-flaeche);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-leiter .sp-stufe-hinweis {
	grid-column: 3;
	grid-row: 2;
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	color: var(--spd-ton-text-2);
	--spd-auf: var(--spd-ton-flaeche);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-leiter .sp-stufe-hinweis::before {
	content: "· ";
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-leiter :is(.sp-stufe-fehlt, .sp-stufe-formular) {
	grid-column: 4;
	grid-row: 1 / 3;
	margin: 0;
	justify-self: end;
	text-align: right;
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	color: var(--spd-ton-text-2);
	--spd-auf: var(--spd-ton-flaeche);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-leiter .sp-stufe-erreicht .sp-stufe-fehlt {
	color: var(--spd-ton-gut);
	--spd-auf: var(--spd-ton-flaeche);
	font-weight: 500;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-leiter .sp-stufe-formular .sp-knopf {
	margin: 0;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-belohnungen > .sp-klein {
	margin: var(--spd-s3) 0 0;
	padding: 0 var(--spd-s1);
}

/* 18d Zeilen in Karten (Meinung, Ueber diesen Betrieb, Notizen): der Link oder das Aufklappen ist die Zeile von B; Trennlinie wie .spd-d3-liste. */
body.spd-d3-seite.sp-gast .spd-d3-inhalt :is(.sp-meinung-liste, .sp-angaben-liste) {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt :is(.sp-meinung-liste, .sp-angaben-liste) > li {
	position: relative;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt :is(.sp-meinung-liste, .sp-angaben-liste) > li + li::before {
	content: "";
	position: absolute;
	top: 0;
	left: 68px;
	right: 0;
	border-top: 1px solid var(--spd-ton-linie);
	z-index: 1;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-meinung-liste .sp-knopf-google {
	display: block;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche);
	border: 0;
	border-radius: var(--spd-r1);
	box-shadow: none;
	text-align: left;
	text-decoration: none;
	font-weight: 400;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-meinung-liste .sp-knopf-google .spd-d3-zeile {
	text-align: left;
	font-weight: 400;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-meinung-liste .sp-knopf-google .spd-d3-zeile-unter {
	font-weight: 400;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt :is(.sp-meinung-liste, .sp-angaben-liste, .sp-notizen) a.spd-d3-zeile,
body.spd-d3-seite.sp-gast .spd-d3-inhalt :is(.sp-meinung-liste, .sp-angaben-liste, .sp-notizen) a .spd-d3-zeile {
	color: var(--spd-ton-text);
	--spd-auf: var(--spd-ton-flaeche);
	text-decoration: none;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt :is(.sp-meinung-liste, .sp-angaben-liste, .sp-notizen) summary.spd-d3-zeile {
	display: flex;
	min-height: 64px;
	padding: var(--spd-s3) var(--spd-s4);
	font-weight: 400;
	color: var(--spd-ton-text);
	list-style: none;
	cursor: pointer;
	border: 0;
	border-radius: var(--spd-r1);
	background-color: var(--spd-ton-flaeche);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt :is(.sp-meinung-liste, .sp-angaben-liste, .sp-notizen) summary.spd-d3-zeile::after {
	content: none;
	display: none;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt :is(.sp-meinung-liste, .sp-angaben-liste, .sp-notizen) summary.spd-d3-zeile::-webkit-details-marker {
	display: none;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt :is(.sp-meinung-liste, .sp-angaben-liste, .sp-notizen) details[open] > summary .spd-d3-pfeil {
	transform: rotate(90deg);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt :is(.sp-meinung-liste, .sp-angaben-liste, .sp-notizen) .sp-aufklapp-titel {
	font-size: var(--spd-f3);
	line-height: var(--spd-z3);
	font-weight: 500;
	color: var(--spd-ton-text);
	--spd-auf: var(--spd-ton-flaeche);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-angaben-liste .sp-aufklapp-zusatz {
	margin: 0;
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	font-weight: 400;
	text-align: left;
	color: var(--spd-ton-text-2);
	--spd-auf: var(--spd-ton-flaeche);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt :is(.sp-meinung-liste, .sp-angaben-liste, .sp-notizen) details {
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
	box-shadow: none;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt :is(.sp-meinung-liste, .sp-angaben-liste, .sp-notizen) details > :not(summary) {
	margin: 0 var(--spd-s4) var(--spd-s4);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-angaben-liste a.sp-kontakt {
	flex-direction: row;
	align-items: center;
	gap: var(--spd-s3);
	font-size: var(--spd-f3);
	line-height: var(--spd-z3);
	font-weight: 400;
	text-align: left;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-angaben-liste .sp-kontakt-symbol {
	width: 40px;
	height: 40px;
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche-2);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-angaben-liste .sp-kontakt-name {
	font-size: var(--spd-f3);
	line-height: var(--spd-z3);
	font-weight: 500;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-angaben-liste .sp-adresse {
	margin: 0;
	overflow-wrap: anywhere;
	color: var(--spd-ton-text);
	--spd-auf: var(--spd-ton-flaeche);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-angaben-liste .sp-oeffnung {
	margin: 0 var(--spd-s4) var(--spd-s4);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-meinung-hinweis {
	margin: var(--spd-s3) 0 0;
	padding: 0 var(--spd-s1);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-notizen {
	margin: var(--spd-s5) 0 0;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-notizen .sp-aufklapp {
	margin: 0;
}

/* 18e Ruf "Brauchen Sie etwas?" als Karte (E2618): Gruende als Chips, "Bedienung rufen" breit mit Glocke, "Chef rufen" als Textlink. */
body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-hilfe > :not(h2) {
	margin-top: 0;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-hilfe-formular,
body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-platzwahl {
	margin: 0 0 var(--spd-s3);
	padding: var(--spd-s4);
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche);
	border: 0;
	border-radius: var(--spd-r1);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-hilfe-knoepfe {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--spd-s3);
	margin: var(--spd-s4) 0 0;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-hilfe-knoepfe .sp-knopf {
	width: 100%;
	gap: var(--spd-s2);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-hilfe-knoepfe .sp-verweis {
	align-self: center;
	color: var(--spd-ton-akzent);
	--spd-auf: var(--spd-ton-flaeche);
	--spx-auf: var(--spd-ton-akzent);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-ruf-gruende-kacheln,
body.spd-d3-seite.sp-gast .spd-d3-inhalt :is(.sp-platzwahl-liste, .sp-platzwahl-extra) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spd-s2);
	margin: 0;
	padding: 0;
	list-style: none;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt :is(.sp-ruf-grund-kachel, .sp-platz-kachel) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spd-s2);
	min-width: 0;
	min-height: 44px;
	margin: 0;
	padding: var(--spd-s2) var(--spd-s4);
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	font-weight: 500;
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche-2);
	border: 2px solid transparent;
	border-radius: var(--spd-r2);
	box-shadow: none;
	text-decoration: none;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-ruf-grund-kachel:has(input:checked) {
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche-2);
	border-color: var(--spd-ton-text);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-ruf-grund-kachel svg {
	width: 20px;
	height: 20px;
}

/* Reservierungen der Gaeste als Karten von B: ohne Streifen links, der Zustand steht im Satz. */
body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-res-karte {
	padding: var(--spd-s4);
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche);
	border: 0;
	border-radius: var(--spd-r1);
	box-shadow: none;
}

/* 18g Karten-Listen, Angebote, Einloese-Code, Shop und Formulare der Gaeste (Befunde der Design-Pruefung, E2620). */
body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-liste > li.sp-karte {
	margin: 0 0 var(--spd-s3);
	padding: var(--spd-s4);
	min-height: 0;
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche);
	border: 0;
	border-radius: var(--spd-r1);
	box-shadow: none;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-liste > li.sp-karte:has(> .sp-karte-link) {
	padding: 0;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-liste > li.sp-karte > .sp-karte-link {
	margin: 0;
	padding: var(--spd-s4) var(--spd-s6) var(--spd-s4) var(--spd-s4);
	border-radius: var(--spd-r1);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-karte-stand strong {
	border-bottom: 0;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-angebot {
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche);
	border: 0;
	border-radius: var(--spd-r1);
	box-shadow: none;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-angebot-titel {
	margin: 0 0 var(--spd-s1);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-code-box {
	padding: var(--spd-s5) var(--spd-s4);
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche);
	border: 0;
	border-radius: var(--spd-r1);
	box-shadow: none;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-code-titel {
	margin: 0 0 var(--spd-s1);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-code-balken {
	height: 8px;
	margin: var(--spd-s3) 0 var(--spd-s1);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-betrieb-ort {
	color: var(--spd-ton-text-2);
	--spd-auf: var(--spd-ton-grund);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-shop-produktname {
	margin: 0 0 var(--spd-s1);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-shop-kopf-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--spd-ton-text);
	--spd-auf: var(--spd-ton-grund);
	--spx-auf: var(--spd-ton-text);
	text-decoration: none;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt label.sp-feldname {
	display: block;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt :is(.sp-shop-wahl, .sp-shop-adresse) {
	margin: 0 0 var(--spd-s2);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-hilfe-formular label[for="sp-ruf-platz"] {
	margin-bottom: var(--spd-s2);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-region {
	margin-bottom: var(--spd-s5);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-rufstand {
	padding: var(--spd-s4);
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche);
	border: 0;
	border-radius: var(--spd-r1);
	box-shadow: none;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-rufstand-stufen {
	margin-top: var(--spd-s2);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-rueckmeldung-formular label[for="sp-rm-text"],
body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-sterne legend {
	margin-bottom: var(--spd-s2);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt :is(.sp-shop-zahlen, .sp-pdpa) {
	padding: var(--spd-s4);
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche);
	border: 0;
	border-radius: var(--spd-r1);
	box-shadow: none;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-pdpa .sp-klein {
	margin-top: var(--spd-s4);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt input[type="file"] {
	min-height: 44px;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-shop-posten li {
	gap: var(--spd-s2) var(--spd-s3);
	line-height: var(--spd-z3);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-shop-korbzeile > span:not(.sp-shop-korbname) {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt dl :is(dt, dd) {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* 18f Fotos (E2617): ein grosses, zwei kleine; mit einem oder zwei Fotos entsprechend; "Alle N" klappt alle auf. */
body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-fotos .spd-d3-fotos > a {
	display: block;
	min-width: 0;
	min-height: 0;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-fotos .spd-d3-fotos > a:first-child {
	grid-row: 1 / 3;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-fotos .spd-d3-fotos img {
	grid-row: auto;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-fotos .spd-d3-fotos.sp-fotos-1 {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-fotos .spd-d3-fotos.sp-fotos-2 {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-fotos .spd-d3-fotos:is(.sp-fotos-1, .sp-fotos-2) > a:first-child {
	grid-row: auto;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-fotos .sp-aufklapp-fotos {
	margin: var(--spd-s3) 0 0;
	border: 0;
	background-color: transparent;
	box-shadow: none;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-fotos .sp-aufklapp-fotos > summary {
	justify-content: center;
	min-height: 44px;
	padding: var(--spd-s3) var(--spd-s4);
	color: var(--spd-ton-akzent);
	--spd-auf: var(--spd-ton-grund);
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	font-weight: 500;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-fotos .sp-aufklapp-fotos > summary::after {
	content: none;
	display: none;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-fotos .sp-aufklapp-fotos > :not(summary) {
	margin: var(--spd-s3) 0 0;
}

/* 18h Aktionen und Top-Listen (E2620, E2622): Abstaende aus der Skala; im Banner haelt die Luecke 8 px, der Name steht weiter unten in der
 * quadratischen Kachel (der freie Raum darueber ist gewollt, E2622); die Karte der Top-Liste wie B ohne Schatten, der Name hoechstens 600. */
body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-reiter {
	margin: 0 0 var(--spd-s5);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-banner-flaeche {
	gap: var(--spd-s2);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-banner-flaeche .sp-anzeige {
	margin: 0;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-top-karte {
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche);
	border-radius: var(--spd-r1);
	box-shadow: none;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-top-kopf .sp-anzeige {
	display: table;
	margin: 0 0 var(--spd-s2);
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-top-name {
	font-weight: 600;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt :is(.sp-top-titel, .sp-top-text) {
	margin: var(--spd-s1) 0 0;
}

body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-top-koerper .sp-kontakt {
	gap: var(--spd-s2);
}

@media (min-width: 900px) {
	body.spd-d3-seite.sp-gast .spd-d3-inhalt .spd-d3-gast .spd-d3-titelbild.ist-leer {
		aspect-ratio: 6 / 1;
	}
}

/* ------------------------------------------------------------ 19 Anmeldung und Registrierung - Design 3, Variante B "Weich" (3.9.0 Teil 7, E2637-E2641) */

/*
 * Konzept Bau-Konzepte/3.9.0-Teil-7-Anmeldung.md: jede Anmelde- und Registrierungsseite von Gaesten, Inhabern und Personal als zentrierte Karte -
 * der Baustein .spd-d3-karte (Abschnitt 14) mit dem Zusatz .spd-d3-anmeldung. Die Vorlagen setzen ihn um den Inhalt der Ansicht (inhaber.php,
 * personal.php, gast-anmeldung.php, gast-anbieter-*.php); die Anmeldung des Teams bleibt bis Teil 9 wie sie ist. Jede Regel beginnt mit
 * body.spd-d3-seite und nennt .spd-d3-anmeldung (H187); nur die Skala (H141), nur die Toene aus Abschnitt 14 (H142). Die Knoepfe der Anbieter
 * behalten Farbe und Schrift nach deren Vorgaben (E1262, E1323) - hier nur Hoehe, Rundung und Abstand (E2640). Das Markup bleibt.
 */

/* 19a Die Karte: in der Mitte, hoechstens 440 px, Innenrand rundherum gleich (R1) - am Handy 24 px, ab 768 px 32 px. */
body.spd-d3-seite .spd-d3-inhalt .spd-d3-karte.spd-d3-anmeldung {
	box-sizing: border-box;
	max-width: 440px;
	margin: 0 auto;
	padding: var(--spd-s5);
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche);
	border-radius: var(--spd-r1);
}

/* Endet die Karte mit einem Nebenweg (Link oder Knopf als Link, je 44 px mit 12 px Luft im Link), ist der Rand unten um diese 12 px kleiner (R1). */
body.spd-d3-seite .spd-d3-inhalt .spd-d3-karte.spd-d3-anmeldung:has(> p.sp-nebenweg:last-child, > form.sp-nebenweg:last-child, > p.sp-klein:last-child > a:not([class])) {
	padding-bottom: var(--spd-s3);
}

@media (min-width: 768px) {
	body.spd-d3-seite .spd-d3-inhalt .spd-d3-karte.spd-d3-anmeldung {
		padding: var(--spd-s6);
	}

	body.spd-d3-seite .spd-d3-inhalt .spd-d3-karte.spd-d3-anmeldung:has(> p.sp-nebenweg:last-child, > form.sp-nebenweg:last-child, > p.sp-klein:last-child > a:not([class])) {
		padding-bottom: var(--spd-s4);
	}
}

/* Was neben der Karte im Inhalt steht (Meldungen oben, der Name des Betriebs beim Personal, "Auf Google bewerten" darunter): genauso breit, in der Mitte. */
body.spd-d3-seite .spd-d3-inhalt:has(> .spd-d3-anmeldung) > :not(.spd-d3-anmeldung) {
	box-sizing: border-box;
	max-width: 440px;
	margin-right: auto;
	margin-left: auto;
}

body.spd-d3-seite .spd-d3-inhalt:has(> .spd-d3-anmeldung) > .spd-d3-anmeldung + * {
	margin-top: var(--spd-s5);
}

/* 19b In der Karte steht alles auf der Flaeche der Karte: Titel, Saetze, Feldnamen, Hinweise und Links nennen sie als Grund. */
body.spd-d3-seite .spd-d3-inhalt .spd-d3-anmeldung :is(.sp-titel, .sp-einleitung, .sp-feldname, .sp-pflicht-hinweis, .sp-klein, .sp-betrieb-zeile, .sp-gastname, .sp-abschnitt-titel) {
	color: var(--spd-ton-text);
	--spd-auf: var(--spd-ton-flaeche);
}

body.spd-d3-seite .spd-d3-inhalt .spd-d3-anmeldung :is(.sp-einleitung, .sp-pflicht-hinweis, .sp-klein, .sp-betrieb-zeile) {
	color: var(--spd-ton-text-2);
	--spd-auf: var(--spd-ton-flaeche);
}

body.spd-d3-seite .spd-d3-inhalt .spd-d3-anmeldung .sp-feldhinweis {
	color: var(--spd-ton-text-3);
	--spd-auf: var(--spd-ton-flaeche);
}

body.spd-d3-seite .spd-d3-inhalt .spd-d3-anmeldung .sp-betrieb-zeile {
	margin: 0 0 var(--spd-s2);
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	font-weight: 500;
}

/* Felder in der Karte grau ohne Rand (wie in einem Abschnitt), der zweite Knopf auf Flaeche 2. */
body.spd-d3-seite .spd-d3-inhalt .spd-d3-anmeldung :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], select) {
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-grund);
	border-color: transparent;
}

body.spd-d3-seite .spd-d3-inhalt .spd-d3-anmeldung .sp-knopf-hell {
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche-2);
	border-color: transparent;
}

/* 19c Breiter Knopf (E2640): jeder Knopf eines Formulars der Karte und jeder Knopf als eigener Absatz ueber die ganze Breite. */
body.spd-d3-seite .spd-d3-inhalt .spd-d3-anmeldung :is(form.sp-formular, .sp-codeweg, p) > .sp-knopf,
body.spd-d3-seite .spd-d3-inhalt .spd-d3-anmeldung .sp-abschnitt form > .sp-knopf {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: var(--spd-s2);
}

body.spd-d3-seite .spd-d3-inhalt .spd-d3-anmeldung form.sp-formular > .sp-knopf {
	margin-top: var(--spd-s5);
}

/* 19d Die Knoepfe der Anbieter - nur wenn eingeschaltet (SiamPoints_Anbieter::aktive()); Farbe und Schrift nach den Vorgaben der Anbieter. */
body.spd-d3-seite .spd-d3-inhalt .spd-d3-anmeldung .sp-anbieter-oder {
	gap: var(--spd-s3);
	margin: var(--spd-s5) 0 var(--spd-s1);
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	color: var(--spd-ton-text-3);
	--spd-auf: var(--spd-ton-flaeche);
}

body.spd-d3-seite .spd-d3-inhalt .spd-d3-anmeldung .sp-anbieter-oder::before,
body.spd-d3-seite .spd-d3-inhalt .spd-d3-anmeldung .sp-anbieter-oder::after {
	background-color: var(--spd-ton-linie);
	--spd-flaeche: 1;
}

body.spd-d3-seite .spd-d3-inhalt .spd-d3-anmeldung .sp-anbieter-form {
	margin: var(--spd-s3) 0 0;
}

body.spd-d3-seite .spd-d3-inhalt .spd-d3-anmeldung .sp-anbieter-knopf {
	min-height: 48px;
	padding: var(--spd-s3) var(--spd-s4);
	gap: var(--spd-s2);
	border-radius: var(--spd-r2);
}

body.spd-d3-seite .spd-d3-inhalt .spd-d3-anmeldung .sp-anbieter-browser {
	margin: var(--spd-s3) 0 0;
	padding: var(--spd-s4);
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche-2);
	border: 0;
	border-radius: var(--spd-r1);
}

/* 19e Nebenwege (E2641): ruhige Textlinks in der Akzentfarbe, mittig, je 44 px hoch (R7); "Mit E-Mail-Code anmelden" bleibt ein breiter Zweitknopf. */
body.spd-d3-seite .spd-d3-inhalt .spd-d3-anmeldung :is(p.sp-nebenweg, form.sp-nebenweg) {
	margin: var(--spd-s2) 0 0;
	text-align: center;
}

body.spd-d3-seite .spd-d3-inhalt .spd-d3-anmeldung .sp-codeweg {
	margin: var(--spd-s3) 0 0;
}

body.spd-d3-seite .spd-d3-inhalt .spd-d3-anmeldung :is(p.sp-nebenweg > a, form.sp-nebenweg > .sp-verweis) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: var(--spd-s3) var(--spd-s2);
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	font-weight: 500;
	color: var(--spd-ton-akzent);
	--spd-auf: var(--spd-ton-flaeche);
	--spx-auf: var(--spd-ton-akzent);
}

body.spd-d3-seite .spd-d3-inhalt .spd-d3-anmeldung .sp-klein a {
	color: var(--spd-ton-akzent);
	--spd-auf: var(--spd-ton-flaeche);
	--spx-auf: var(--spd-ton-akzent);
}

/* Ein Link als eigener kleiner Absatz ("Datenschutzerklaerung lesen"): 44 px hoch im Absatz selbst - seine Flaeche liegt nicht ueber dem Knopf darueber (R7). */
body.spd-d3-seite .spd-d3-inhalt .spd-d3-anmeldung p.sp-klein > a:not([class]) {
	display: inline-block;
	padding: var(--spd-s3) 0;
}

body.spd-d3-seite .spd-d3-inhalt .spd-d3-anmeldung > p.sp-klein {
	margin-top: var(--spd-s3);
}

/* Haekchen: der Satz in der Schrift der Karte (hell und dunkel); die Links darin brechen als Ganzes um (keine zwei Links in einer Flaeche, R4). */
body.spd-d3-seite .spd-d3-inhalt .spd-d3-anmeldung .sp-haken > span {
	color: var(--spd-ton-text);
	--spd-auf: var(--spd-ton-flaeche);
}

body.spd-d3-seite .spd-d3-inhalt .spd-d3-anmeldung .sp-haken a {
	display: inline-block;
}

/* 19f Abschnitte in der Karte (Zustimmung der Gaeste: Abmelden, Daten loeschen) als ruhige Flaeche 2 - wie jede Karte von B rund 16, ohne Rand (R11). */
body.spd-d3-seite .spd-d3-inhalt .spd-d3-anmeldung .sp-abschnitt {
	margin: var(--spd-s5) 0 0;
	padding: var(--spd-s4);
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche-2);
	border: 0;
	border-radius: var(--spd-r1);
}

body.spd-d3-seite .spd-d3-inhalt .spd-d3-anmeldung .sp-abschnitt :is(h2, .sp-pflicht-hinweis) {
	color: var(--spd-ton-text);
	--spd-auf: var(--spd-ton-flaeche-2);
}

body.spd-d3-seite .spd-d3-inhalt .spd-d3-anmeldung .sp-abschnitt :is(.sp-klein, .sp-haken > span) {
	color: var(--spd-ton-text-2);
	--spd-auf: var(--spd-ton-flaeche-2);
}

body.spd-d3-seite .spd-d3-inhalt .spd-d3-anmeldung .sp-abschnitt .sp-knopf-hell {
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche);
	border-color: transparent;
}

body.spd-d3-seite .spd-d3-inhalt .spd-d3-anmeldung > .sp-abschnitt-titel {
	margin: var(--spd-s6) 0 var(--spd-s3);
}

/* ------------------------------------------------------------ 20 Website - Design 3, Variante B "Weich" (3.9.0 Teil 8, E2647-E2652, E2656) */

/*
 * Der Feinschliff der Website wie Variante B (Konzept Bau-Konzepte/3.9.0-Teil-8-Website.md): ruhiger Seitengrund, weisse Karten mit Rundung 16
 * ohne Schatten und ohne farbige Oberkante (die Saeulenfarben bleiben an Symbol und Titel), Ueberschriften 28 / 20 / 16 in 600 (der h1 wie jeder
 * Seitentitel, E2656), Fliesstext 16 in Text-2, Pillen als ruhige Chips, Knoepfe rund, FAQ und Abschluss als weisse Karte, Weiter-Links mit
 * 44 px Tipp-Flaeche, das Branchen-Menue als schwebendes Panel. Nur fuer body.sw-seite - dunkel_bauen.py laesst die Website weg (nur hell);
 * darum die Toene von B hier als feste Werte (Abschnitt 5, hell), nie die schaltenden --spd-ton-... (E2646: die Website kennt kein Dunkel).
 * Dazu das Startseiten-Foto (E2648-E2650): ab 768 px Text links, Foto rechts; darunter das Foto oben. Texte, Logo und Footer bleiben - nur die
 * Ueberschriften im Footer werden feiner (E2652).
 */

/* 20a Grund, Schrift und Abstaende der Bloecke */
body.sw-seite {
	color: #0f172a;
	background-color: #f4f5f7;
	font-size: var(--spd-f3);
	line-height: var(--spd-z3);
}

body.sw-seite .sw-inhalt .sw-block {
	padding: var(--spd-s6) 0;
}

body.sw-seite .sw-inhalt .sw-karten {
	background-color: #f4f5f7;
	--spd-flaeche: 1;
}

body.sw-seite .sw-inhalt h1 {
	margin: 0 0 var(--spd-s4);
	color: #0f172a;
	--spd-auf: #f4f5f7;
	font-size: var(--spd-f5);
	line-height: var(--spd-z5);
	font-weight: 600;
	letter-spacing: -0.02em;
	overflow-wrap: break-word;
}

body.sw-seite .sw-inhalt h2 {
	margin: 0 0 var(--spd-s4);
	color: #0f172a;
	--spd-auf: #f4f5f7;
	font-size: var(--spd-f4);
	line-height: var(--spd-z4);
	font-weight: 600;
	letter-spacing: -0.01em;
}

body.sw-seite .sw-inhalt h3 {
	margin: 0 0 var(--spd-s2);
	color: #0f172a;
	--spd-auf: #ffffff;
	font-size: var(--spd-f3);
	line-height: var(--spd-z3);
	font-weight: 600;
}

body.sw-seite .sw-inhalt .sw-text {
	color: #4f5868;
	--spd-auf: #f4f5f7;
}

body.sw-seite .sw-inhalt .sw-text strong {
	color: #0f172a;
	--spd-auf: #f4f5f7;
}

body.sw-seite .sw-inhalt .sw-text h3 {
	margin: var(--spd-s5) 0 var(--spd-s2);
}

body.sw-seite .sw-inhalt .sw-text blockquote {
	padding: var(--spd-s3) var(--spd-s4);
	color: #0f172a;
	background-color: #eef0f3;
	border: 0;
	border-radius: var(--spd-r1);
}

/* 20b Kopfbereich: Pille als Chip, Unterzeile, Claim, Vertrauen */
body.sw-seite .sw-inhalt .sw-pille {
	margin: 0 0 var(--spd-s4);
	padding: var(--spd-s1) var(--spd-s3);
	color: #4f5868;
	background-color: #ffffff;
	border-radius: var(--spd-r2);
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	font-weight: 500;
}

body.sw-seite .sw-inhalt .sw-subline {
	margin: 0 0 var(--spd-s4);
	color: #4f5868;
	--spd-auf: #f4f5f7;
	font-size: var(--spd-f3);
	line-height: var(--spd-z3);
}

body.sw-seite .sw-inhalt .sw-claim {
	margin: 0 0 var(--spd-s5);
	color: #0f172a;
	--spd-auf: #f4f5f7;
	font-size: var(--spd-f3);
	line-height: var(--spd-z3);
	font-weight: 600;
}

body.sw-seite .sw-inhalt .sw-knoepfe {
	gap: var(--spd-s3);
	margin: 0 0 var(--spd-s5);
}

body.sw-seite .sw-inhalt .sw-vertrauen {
	gap: var(--spd-s2) var(--spd-s5);
	color: #4f5868;
	--spd-auf: #f4f5f7;
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
}

body.sw-seite .sw-inhalt .sw-vertrauen li {
	gap: var(--spd-s2);
}

/* 20c Knoepfe im Inhalt rund (B): Hauptknopf Gold, zweiter Knopf weiss mit feiner Linie, der dunkle Knopf des Abschlusses bleibt dunkel */
body.sw-seite .sw-inhalt .sw-knopf {
	min-height: 48px;
	padding: var(--spd-s3) var(--spd-s5);
	border-width: 1px;
	border-radius: var(--spd-r2);
	font-size: var(--spd-f3);
	line-height: var(--spd-z3);
	font-weight: 600;
}

body.sw-seite .sw-inhalt .sw-knopf-rahmen {
	color: #0f172a;
	background-color: #ffffff;
	border-color: #e6e8ec;
}

/* Weiter-Links ("Alle Branchen ansehen", "Alle Preise ansehen"): 44 px zum Antippen (R7) */
body.sw-seite .sw-inhalt .sw-weiter {
	margin: var(--spd-s4) 0 0;
}

/* Die Stand-Zeile der Rechtstexte auf dem ruhigen Grund in Text-2 (#64748b haette dort 4,4 : 1) */
body.sw-seite .sw-inhalt .sw-recht-stand {
	color: #4f5868;
	--spd-auf: #f4f5f7;
}

body.sw-seite .sw-inhalt .sw-weiter a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
}

/* 20d Karten, Schritte, Branchen - weiss, Rundung 16, ohne Schatten und ohne Oberkante */
body.sw-seite .sw-inhalt .sw-raster {
	gap: var(--spd-s4);
	margin-top: var(--spd-s5);
}

body.sw-seite .sw-inhalt .sw-karte {
	padding: var(--spd-s5);
	color: #0f172a;
	background-color: #ffffff;
	border-top: 0;
	border-radius: var(--spd-r1);
	box-shadow: none;
}

body.sw-seite .sw-inhalt .sw-karte .sw-text,
body.sw-seite .sw-inhalt .sw-schrittliste .sw-text,
body.sw-seite .sw-inhalt .sw-abschluss-innen .sw-text {
	color: #4f5868;
	--spd-auf: #ffffff;
}

body.sw-seite .sw-inhalt .sw-karte .sw-text strong,
body.sw-seite .sw-inhalt .sw-schrittliste .sw-text strong {
	color: #0f172a;
	--spd-auf: #ffffff;
}

/* Preise: der Preis als Titel der Karte etwas groesser, Ziffern gleich breit */
body.sw-seite.sw-preise .sw-inhalt .sw-karte h3 {
	font-size: var(--spd-f4);
	line-height: var(--spd-z4);
	font-variant-numeric: tabular-nums;
}

body.sw-seite .sw-inhalt .sw-schrittliste {
	gap: var(--spd-s4);
	margin: var(--spd-s5) 0 0;
}

body.sw-seite .sw-inhalt .sw-schrittliste li {
	gap: var(--spd-s4);
	padding: var(--spd-s5);
	color: #0f172a;
	background-color: #ffffff;
	border-radius: var(--spd-r1);
}

body.sw-seite .sw-inhalt .sw-nummer {
	font-weight: 600;
}

body.sw-seite .sw-inhalt .sw-branchenliste {
	gap: var(--spd-s3);
	margin: var(--spd-s5) 0 0;
}

body.sw-seite .sw-inhalt .sw-branchenliste li {
	padding: var(--spd-s4);
	color: #0f172a;
	background-color: #ffffff;
	border-radius: var(--spd-r1);
}

body.sw-seite .sw-inhalt .sw-branchenliste strong {
	color: #0f172a;
	--spd-auf: #ffffff;
	font-weight: 600;
}

body.sw-seite .sw-inhalt .sw-branchenliste span {
	color: #4f5868;
	--spd-auf: #ffffff;
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
}

/* 20e Fragen als weisse Karte mit Linien (statt des dunklen Blocks) */
body.sw-seite .sw-inhalt .sw-dunkel {
	padding: var(--spd-s5);
	color: #4f5868;
	background-color: #ffffff;
	border-radius: var(--spd-r1);
}

body.sw-seite .sw-inhalt .sw-dunkel h2 {
	color: #0f172a;
	--spd-auf: #ffffff;
}

body.sw-seite .sw-inhalt .sw-frage {
	padding: 0;
	border-top: 1px solid #e6e8ec;
}

body.sw-seite .sw-inhalt .sw-frage > summary {
	align-items: center;
	gap: var(--spd-s4);
	min-height: 48px;
	padding: var(--spd-s3) 0;
}

body.sw-seite .sw-inhalt .sw-frage > summary::after {
	color: #5f6776;
	--spd-auf: #ffffff;
	font-size: var(--spd-f4);
	line-height: var(--spd-z4);
	font-weight: 400;
}

body.sw-seite .sw-inhalt .sw-frage h3 {
	margin: 0;
	color: #0f172a;
	--spd-auf: #ffffff;
	font-size: var(--spd-f3);
	line-height: var(--spd-z3);
}

body.sw-seite .sw-inhalt .sw-frage .sw-text {
	padding: 0 0 var(--spd-s4);
	color: #4f5868;
	--spd-auf: #ffffff;
}

body.sw-seite .sw-inhalt .sw-frage .sw-text strong {
	color: #0f172a;
	--spd-auf: #ffffff;
}

body.sw-seite .sw-inhalt .sw-frage :focus-visible {
	outline-color: #3b82f6;
}

body.sw-seite .sw-inhalt .sw-dunkel .sw-bald {
	color: #92400e;
	background-color: #fef3c7;
}

/* 20f Abschluss als weisse Karte - der dunkle Knopf bleibt */
body.sw-seite .sw-inhalt .sw-abschluss-innen {
	padding: var(--spd-s6) var(--spd-s5);
	color: #0f172a;
	background-color: #ffffff;
	border-radius: var(--spd-r1);
}

body.sw-seite .sw-inhalt .sw-abschluss-innen h2 {
	color: #0f172a;
	--spd-auf: #ffffff;
}

body.sw-seite .sw-inhalt .sw-abschluss .sw-text {
	margin: 0 auto var(--spd-s5);
}

/* 20g Formulare der Website ("Melden", Kontakt) wie eine Karte von B: Luecken 16, ohne Schatten */
body.sw-seite .sw-inhalt .sw-form {
	gap: var(--spd-s4);
	margin-top: var(--spd-s5);
	padding: var(--spd-s4);
	color: #0f172a;
	background-color: #ffffff;
	border-radius: var(--spd-r1);
	box-shadow: none;
}

/* Die Felder wie jedes Feld von B: 50 px hoch (12 + 24 + 12 + Rand), Rundung 16 - in jeder Sprache dieselbe Zeile (R11) */
body.sw-seite .sw-inhalt .sw-form input[type="text"],
body.sw-seite .sw-inhalt .sw-form input[type="tel"],
body.sw-seite .sw-inhalt .sw-form input[type="email"],
body.sw-seite .sw-inhalt .sw-form select {
	min-height: 50px;
	padding: var(--spd-s3) var(--spd-s4);
	border-radius: var(--spd-r1);
	font-size: var(--spd-f3);
	line-height: var(--spd-z3);
}

body.sw-seite .sw-inhalt .sw-form textarea {
	padding: var(--spd-s3) var(--spd-s4);
	border-radius: var(--spd-r1);
	font-size: var(--spd-f3);
	line-height: var(--spd-z3);
}

/* 20h Startseiten-Foto (E2648-E2650): darunter das Foto oben ueber die ganze Breite, ab 768 px Text links und Foto rechts - ganzes Bild, Rundung 16 */
body.sw-seite .sw-inhalt .sw-hero-foto .sw-breite {
	display: flex;
	flex-direction: column;
	gap: var(--spd-s5);
}

body.sw-seite .sw-inhalt .sw-hero-text > :last-child {
	margin-bottom: 0;
}

body.sw-seite .sw-inhalt .sw-hero-bild {
	position: relative;
	order: -1;
	margin: 0;
}

body.sw-seite .sw-inhalt .sw-hero-bild picture,
body.sw-seite .sw-inhalt .sw-hero-bild img {
	display: block;
	width: 100%;
	height: auto;
}

body.sw-seite .sw-inhalt .sw-hero-bild img {
	border-radius: var(--spd-r1);
}

body.sw-seite .sw-inhalt .sw-hero-rabatt {
	position: absolute;
	top: 0;
	left: 0;
	margin: var(--spd-s4);
	padding: var(--spd-s1) var(--spd-s3);
	color: #ffffff;
	background-color: #b91c1c;
	border-radius: var(--spd-r2);
	font-size: var(--spd-f4);
	line-height: var(--spd-z4);
	font-weight: 600;
}

@media (min-width: 768px) {
	body.sw-seite .sw-inhalt .sw-hero-foto .sw-breite {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		gap: var(--spd-s6);
	}

	body.sw-seite .sw-inhalt .sw-hero-bild {
		order: 0;
	}

	/* Das Formular ab 768 px mit dem Innenrand der Karten (am Handy 16 - so bleiben der Telefonnummer bei 360 px mindestens 150 px, H77) */
	body.sw-seite .sw-inhalt .sw-form {
		padding: var(--spd-s5);
	}
}

/* 20i Das Branchen-Menue (Loesungen) als schwebendes Panel: Rundung 16, der eine Schatten von B, Gruppen klein und grau */
body.sw-seite .sw-loesungen-panel {
	border-radius: var(--spd-r1);
	box-shadow: var(--spd-ton-schweben);
}

body.sw-seite .sw-mega-titel {
	color: #0f172a;
	--spd-auf: #ffffff;
	font-size: var(--spd-f3);
	line-height: var(--spd-z3);
	font-weight: 600;
}

body.sw-seite .sw-gruppe h3 a {
	color: #4f5868;
	--spd-auf: #ffffff;
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	font-weight: 600;
}

body.sw-seite .sw-nav .sw-gruppe ul a {
	padding: var(--spd-s1) var(--spd-s2);
	border-radius: var(--spd-r2);
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
}

/* 20j Die Ueberschriften im Footer feiner (E2652): 14 / 20, 500, gedaempftes Weiss - Logo, Satz, Claim, Links und Anschrift bleiben */
body.sw-seite .sw-fuss h2,
body.sw-seite .sw-fuss-loesungen h3 {
	color: var(--sw-hell);
	--spd-auf: var(--sw-dunkel);
	font-size: var(--spd-f2);
	line-height: var(--spd-z2);
	font-weight: 500;
}

/* ------------------------------------------------------------ 21 Team, Druck und Verkaeufer - Fehler der Design-Pruefung (3.9.0 Teil 9, E2683-E2688) */

/*
 * Konzept Bau-Konzepte/3.9.0-Teil-9-Gesamtpruefung-ZIP.md: nur die Befunde der Design-Pruefung (R6-R12) - kein Umbau auf B (Plan Abschnitt 5).
 * 21a die angemeldeten Seiten des Teams (body.sp-team ohne B; die Anmeldung des Teams ist B mit der Karte aus Abschnitt 19, E2683), 21b die
 * Druck-Vorlagen (am Bildschirm, vor dem Drucken), 21c eine Stelle der Gaeste (zwei Links beim Verkaeufer, E2687), 21d seit Teil 9b der
 * WordPress-Bereich (nur Ueberlauf, E2697). Jede Regel beginnt mit body.sp-team:not(.spd-d3-seite), body.sp-druck, body.sp-bericht-druck,
 * body.spd-d3-seite.sp-gast oder body.spd-verwaltung (H195); nur die Skala (H141), nur die Toene aus Abschnitt 14 (H142, schalten hell und dunkel
 * selbst). Das Markup bleibt.
 */

/* 21a Team - der Kasten "Angemeldet" ruhig grau statt gelb (wie beim Personal in Teil 5b, R10). */
body.sp-team:not(.spd-d3-seite) .sp-inhalt .sp-angemeldet {
	color: var(--spd-ton-text);
	background-color: var(--spd-ton-flaeche-2);
	--spd-auf: var(--spd-ton-flaeche-2);
}

/* Keine Schatten mehr (R10): leere Saetze, Abschnitte, Karten, Summen, Meldungen und die Kacheln der Uebersicht. */
body.sp-team:not(.spd-d3-seite) .sp-inhalt :is(.sp-leer, .sp-abschnitt, .sp-team-abschnitt, .sp-team-kunde, .sp-team-lead, .sp-team-summen, .sp-team-uebersicht, .sp-meldung, .sp-fehler, .sp-karte, .sp-kachel, .sp-tfa-qr, .sp-codekarte, .spa-karten > li > a) {
	box-shadow: none;
}

/* Das Symbol der Kachel grau statt gelb (R10), das Zeichen bleibt im Akzent. */
body.sp-team:not(.spd-d3-seite) .sp-inhalt .spa-kachel-symbol {
	color: var(--spd-ton-akzent);
	background-color: var(--spd-ton-flaeche-2);
	--spd-auf: var(--spd-ton-flaeche-2);
}

/* Titel -> Inhalt aus der Skala (R6): der goldene Strich unter dem Titel faellt weg wie in B (R10), der Titel haelt 16 px Abstand. */
body.sp-team:not(.spd-d3-seite) .sp-inhalt .sp-goldlinie {
	display: none;
}

body.sp-team:not(.spd-d3-seite) .sp-inhalt .sp-titel {
	margin-bottom: var(--spd-s4);
}

/* Uebersicht: Kacheln -> "Heute" 24 px, "Heute" -> "Kunden" 24 px (R6). */
body.sp-team:not(.spd-d3-seite) .sp-inhalt .spa-karten {
	margin-bottom: var(--spd-s5);
}

body.sp-team:not(.spd-d3-seite) .sp-inhalt .spa-kunden-titel {
	margin-top: var(--spd-s5);
}

/* Seit Teil 9b (E2694): Aufgaben - der Kasten "Dringend" haelt 24 px Abstand zum Folgenden (R6). */
body.sp-team:not(.spd-d3-seite) .sp-inhalt .sp-dringend {
	margin-bottom: var(--spd-s5);
}

/* Formulare: Pflicht-Hinweis -> erstes Feld 16 px, Feldname -> Haken 8 px, Feldname -> Hinweis 8 px (R6). */
body.sp-team:not(.spd-d3-seite) .sp-inhalt .sp-pflicht-hinweis {
	margin-bottom: 0;
}

body.sp-team:not(.spd-d3-seite) .sp-inhalt .sp-feldname + .sp-haken {
	margin-top: 0;
}

body.sp-team:not(.spd-d3-seite) .sp-inhalt :is(.sp-feldname, .sp-haken) + .sp-feldhinweis {
	margin-top: 0;
}

body.sp-team:not(.spd-d3-seite) .sp-inhalt legend + label.sp-feldname {
	margin-top: var(--spd-s1);
}

/* Abrechnung: Reiter -> Liste 24 px, Zeilen der Rechnung 8 px (R6). */
body.sp-team:not(.spd-d3-seite) .sp-inhalt .sp-ab-reiter {
	margin-bottom: var(--spd-s5);
}

body.sp-team:not(.spd-d3-seite) .sp-inhalt .sp-ab-zeile p {
	margin-bottom: var(--spd-s2);
}

/* Hilfe: die Wege als Zeilen von 44 px mit 8 px Abstand (R6, R7). */
body.sp-team:not(.spd-d3-seite) .sp-inhalt .spa-hilfe-wege {
	row-gap: var(--spd-s2);
}

body.sp-team:not(.spd-d3-seite) .sp-inhalt .spa-hilfe-wege a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Listen der Betriebe und Mitglieder: Zeilen mittig, jede Angabe 20 px hoch - zwischen zwei Zeilen genau der Abstand der Liste (R6). */
body.sp-team:not(.spd-d3-seite) .sp-inhalt :is(.sp-team-betriebe li, .sp-team-mitglied, .sp-team-liste > li) {
	align-items: center;
}

body.sp-team:not(.spd-d3-seite) .sp-inhalt :is(.sp-team-betriebe li, .sp-team-mitglied, .sp-team-liste > li) > * {
	margin-top: 0;
	margin-bottom: 0;
	line-height: var(--spd-z2);
}

/* Seit Teil 9b (E2695): die Ampel in den Listen 20 px hoch wie jede Angabe (16 px Zeile + 2 px oben und unten) - die Zeile bleibt 20 px (R6). */
body.sp-team:not(.spd-d3-seite) .sp-inhalt .sp-team-liste .sp-ampel {
	line-height: var(--spd-z1);
	vertical-align: top;
}

/* Liste der Rechnungen: Rechnung -> Rechnung und -> Fuss der Liste 16 px (R6). */
body.sp-team:not(.spd-d3-seite) .sp-inhalt .sp-ab-zeile {
	margin-bottom: var(--spd-s4);
}

/* Feldnamen stehen als eigene Zeile ueber dem Feld wie in B (R6) - auch unter "Anmeldung & Sicherheit". */
body.sp-team:not(.spd-d3-seite) .sp-inhalt label.sp-feldname {
	display: block;
}

/* Tipp-Flaechen mindestens 44 px (R7): Namen in den Listen, Reiter, Haken, Aufklapper; Links im Satz unsichtbar (wie in B, E2587). */
body.sp-team:not(.spd-d3-seite) .sp-inhalt :is(.sp-team-mitglied > a, .sp-team-betriebe li > a, .sp-team-liste > li > a, .sp-pruefung-navi a) {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

body.sp-team:not(.spd-d3-seite) .sp-inhalt :is(label.sp-haken, summary) {
	display: flex;
	align-items: center;
	min-height: 44px;
}

body.sp-team:not(.spd-d3-seite) .sp-inhalt :is(.sp-team-kunde-name a, p > a.sp-verweis) {
	padding-top: var(--spd-s4);
	padding-bottom: var(--spd-s4);
}

/* Zweitknoepfe wie alle Zweitknoepfe des Teams (R11): Suchen, Filtern, Zeigen, neue Backup-Codes; seit Teil 9b auch "Mehr laden" (E2696). */
body.sp-team:not(.spd-d3-seite) .sp-inhalt :is(button.sp-knopf.sp-knopf-hell, a.sp-knopf.sp-knopf-hell.sp-liste-mehr) {
	min-height: 44px;
	padding-top: var(--spd-s2);
	padding-bottom: var(--spd-s2);
}

/* 21b Druck - am Bildschirm vor dem Drucken (design.css gilt nur am Bildschirm); auf dem Papier bleibt die Gestaltung der Vorlage. */
/* Quittung: die Spalte "Betrag" darf am Handy umbrechen - sonst ragt die Tabelle aus dem Bildschirm (R5). */
body.sp-bericht-druck .sp-quittung-posten th.sp-quittung-zahl {
	white-space: normal;
	overflow-wrap: anywhere;
}

/* Quittung: Angaben des Kunden - Angabe -> Wert 4 px, Wert -> naechste Angabe 12 px; Thai und Englisch untereinander ohne Luecke (R6). */
body.sp-bericht-druck .sp-to-angaben {
	gap: var(--spd-s1);
}

body.sp-bericht-druck .sp-quittung-posten td {
	line-height: var(--spd-z2);
}

body.sp-bericht-druck .sp-quittung-posten td > span {
	display: inline-block;
	vertical-align: top;
}

/* Lieferschein und Monatsbericht: Abstaende aus der Skala (R6). */
body.sp-bericht-druck :is(.sp-ls-kopf, .sp-ls-empfaenger, .sp-ls-posten) {
	margin-bottom: var(--spd-s4);
}

body.sp-bericht-druck :is(.sp-ls-nummer p, .sp-ls-empfaenger p, .sp-ls-betrieb) {
	margin-top: var(--spd-s1);
	margin-bottom: var(--spd-s1);
}

body.sp-bericht-druck .sp-bericht-titel {
	margin-bottom: var(--spd-s1);
}

/* Monatsbericht: "Details ansehen" als Link im Satz mit unsichtbarer Tipp-Flaeche (R7, wie in B). */
body.sp-bericht-druck p > a:not([class]) {
	padding-top: var(--spd-s4);
	padding-bottom: var(--spd-s4);
}

/* 21c Gaeste - Verkaeufer: "Problem melden" und "Zurueck zum Online-Shop" so weit auseinander, dass sich ihre Flaechen nicht ueberdecken (R7). */
body.spd-d3-seite.sp-gast .spd-d3-inhalt .sp-shop-melden {
	margin-bottom: var(--spd-s6);
}

/* 21d WordPress-Bereich (seit Teil 9b, E2697) - nur Fehler wie Ueberlauf am Handy, kein Umbau (Plan Abschnitt 2); nur auf den Seiten von SiamPoints. */
/* Systemstatus: lange Befehle und Adressen brechen um, statt die Tabelle breiter als den Bildschirm zu machen. */
body.spd-verwaltung .widefat code {
	overflow-wrap: anywhere;
}

/* Website: die Tabelle der Seiten (9 Spalten) rollt am Handy in ihrem Kasten, nicht die ganze Seite (am Rechner passt sie, nichts rollt). */
body.spd-verwaltung .sp-web-tabelle {
	position: relative;
	overflow-x: auto;
}

/* Auswahlfelder nie breiter als ihr Platz (VAT Tax: der laengste Eintrag). */
body.spd-verwaltung #wpbody-content select {
	max-width: 100%;
}