/*
 * SiamPoints - der App-Rahmen (seit 3.1.0, Schritt 39 "Menue 1 - App-Rahmen 1: Team", E2098-E2112; Konzept
 * Bau-Konzepte/3.1.0-App-Rahmen-Team.md). Laedt nach dem Design-Baukasten (nur Bildschirm), zuerst nur im Team (templates/team.php).
 *
 * Am Handy (bis 1023 px) wie Tapo: die schwebende Leiste mit vier Plaetzen, der fuenfte ist der Knopf des Menues (summary von
 * details.sp-menue - ohne JavaScript bedienbar); das Menue-Panel ueber die ganze Seite mit Profil, grauen Gruppen-Ueberschriften und
 * weissen Karten. Am Rechner (ab 1024 px) wie ProfileOS: links das Seitenmenue mit Logo, Gruppen, "Einstellungen" als Fenster, Profil und
 * den vier Knoepfen. Die Karten der Startseite wie Tapo.
 *
 * Farben nur als Zeichen (E2106: SiamPoints-Orange in zwei Toenen); jede Schrift nennt ihren Grund (background-color oder --spd-auf),
 * jeder Grund seine Schrift oder --spd-flaeche: 1 - der Pruefstand rechnet jedes Paar nach (Regel 17, mindestens 4,5 : 1). Dunkel
 * (html[data-sp-thema="dunkel"]) tauscht nur die Zeichen. Kein overflow: hidden, kein max-height, kein line-clamp (Waechter E1786).
 * Die Regeln fuer die Seite gelten nur unter body.sp-team (40 und 41 fuegen ihre Seiten hinzu, E2111) - seit 3.2.0 (Schritt 40, E2129) auch unter
 * body.sp-inhaber und body.sp-personal (dieselbe Regel als Selektor-Liste; Teile nur des Teams - .sp-team-... - bleiben beim Team) - seit 3.3.0
 * (Schritt 41, E2155) auch unter body.sp-gast (fuer die drei anderen wirkungsgleich: jeder dieser body traegt auch sp-gast, die Spezifitaet ist
 * gleich). Regeln nur fuer Gastseiten nennen body.sp-gast:not(.sp-team):not(.sp-inhaber):not(.sp-personal) oder eine Klasse nur der Gastseiten.
 *
 *   1 Zeichen   2 Leiste und Menue-Knopf   3 Menue-Panel   4 Seitenmenue (Rechner)   5 Karten der Startseite   6 Hilfe
 *   7 Privatsphaere   8 Dunkel (Zeichen)   9 Inhaber und Personal (seit 3.2.0: Karten, Streifen, Allgemeine Einstellungen)
 *   10 Gast (seit 3.3.0: Leiste, Startbildschirm mit "Ihre Meinung", White Label)
 *
 * Seit 3.5.0 Teil 2 (Schritt 43+44 "Menue 5", E2206-E2212; Konzept Bau-Konzepte/3.5.0-Menue-5.md): der schmale Laufbalken wie ProfileOS, die
 * Gruppen als Knoepfe mit Kachel ohne Pfeile (Seitenmenue und Panel), die Leiste tiefer und nie im Wort getrennt (app.js passt die Schrift
 * ein), "Abmelden" oben im Panel, dunkel die Markierung grau mit fast weisser Schrift und dem Akzent als Streifen.
 */

/* ------------------------------------------------------------ 1 Zeichen */

:root {
	--spa-text: #0f172a;
	--spa-leise: #475569;
	--spa-karte: #ffffff;
	--spa-grund: #f1f5f9;
	--spa-seite-grund: #f8fafc;
	--spa-hover: #eef2f7;
	--spa-linie: #e2e8f0;
	--spa-akzent: #b45309;
	--spa-akzent-flaeche: #fef3c7;
	--spa-knopf: #f59e0b;
	--spa-knopf-zeichen: #0f172a;
	--spa-rot: #b91c1c;
	--spa-schalter: #94a3b8;
	--spa-schatten: 0 10px 30px rgba(15, 23, 42, 0.16);
	--spa-breite: 272px;
	--spa-leiste-b: min(calc(100vw - 16px), 520px); /* Seit 3.5.0 Teil 2 (E2210): seitlich 8 px statt 12 px. */
	/* Seit 3.5.0 Teil 2: der Laufbalken (E2207) und die Markierung (E2212) - seit 3.9.0 Teil 4 nur noch fuer die Leiste unten; die Kacheln ruhig (design.css 15). */
	--spa-balken: #c7ced8;
	--spa-balken-ueber: #aeb7c3;
	--spa-wahl: #fef3c7;
	--spa-wahl-text: #b45309;
}

/* Seit 3.5.0 Teil 2 (E2210): auf ganz schmalen Handys (unter 360 px) seitlich 6 px - jeder Platz der Leiste bekommt 1,6 px mehr. */
@media (max-width: 359.98px) {
	:root {
		--spa-leiste-b: calc(100vw - 12px);
	}
}

/* ------------------------------------------------------------ 2 Leiste und Menue-Knopf (Handy, Tablet hochkant) */

.spa-seite {
	display: none;
}

.spa-leiste {
	position: fixed;
	left: calc((100vw - var(--spa-leiste-b)) / 2);
	bottom: max(8px, env(safe-area-inset-bottom, 0px)); /* Seit 3.5.0 Teil 2 (E2210): so tief wie moeglich, nie unter der Home-Leiste. */
	z-index: 1001;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 2px;
	width: var(--spa-leiste-b);
	padding: 4px;
	color: var(--spa-text);
	background-color: var(--spa-karte);
	border: 1px solid var(--spa-linie);
	border-radius: 30px;
	box-shadow: var(--spa-schatten);
}

.spa-leiste-punkt {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 0;
	min-height: 54px;
	padding: 6px 0;
	font-size: var(--spa-leiste-schrift, 11px);
	font-weight: 600;
	line-height: 1.15;
	text-align: center;
	text-decoration: none;
	overflow-wrap: normal; /* Seit 3.5.0 Teil 2 (E2205, E2210): nie mitten im Wort - app.js verkleinert die Schrift, bis jedes Wort passt. */
	word-break: normal;
	-webkit-hyphens: manual;
	hyphens: manual;
	color: var(--spa-leise);
	background-color: var(--spa-karte);
	border-radius: 24px;
}

body.sp-team .spa-leiste .spa-leiste-punkt,
body.sp-inhaber .spa-leiste .spa-leiste-punkt,
body.sp-personal .spa-leiste .spa-leiste-punkt,
body.sp-gast .spa-leiste .spa-leiste-punkt {
	color: var(--spa-leise);
	background-color: var(--spa-karte);
	text-decoration: none;
}

body.sp-team .spa-leiste .spa-leiste-punkt[aria-current="page"],
body.sp-inhaber .spa-leiste .spa-leiste-punkt[aria-current="page"],
body.sp-personal .spa-leiste .spa-leiste-punkt[aria-current="page"],
body.sp-gast .spa-leiste .spa-leiste-punkt[aria-current="page"] {
	color: var(--spa-akzent);
	background-color: var(--spa-akzent-flaeche);
}

.spa-leiste-platz {
	grid-column: 5;
}

/* Seit 3.5.0 Teil 2 (E2210): das Wort der Leiste so breit wie sein Platz (app.js misst daran); Chinesisch und Japanisch ohne Trennung im Wort. */
.spa-leiste-wort,
.spa-menue-wort {
	display: block;
	align-self: stretch;
	min-width: 0;
	text-align: center;
	overflow-wrap: normal;
	word-break: normal;
}

:lang(ja) .spa-leiste-wort,
:lang(zh) .spa-leiste-wort,
:lang(ja) .spa-menue-wort,
:lang(zh) .spa-menue-wort {
	word-break: keep-all;
}

/* Unter der Leiste bleibt Platz - sie verdeckt nie das Letzte der Seite. */
body.sp-team .spa-seite ~ .sp-fuss,
body.sp-inhaber .spa-seite ~ .sp-fuss,
body.sp-personal .spa-seite ~ .sp-fuss,
body.sp-gast .spa-seite ~ .sp-fuss {
	padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 1023.98px) {
	/* Der Knopf des Menues sitzt als fuenfter Platz in der Leiste. */
	body.sp-team .sp-menue > summary.spa-menue-knopf,
	body.sp-inhaber .sp-menue > summary.spa-menue-knopf,
	body.sp-personal .sp-menue > summary.spa-menue-knopf,
	body.sp-gast .sp-menue > summary.spa-menue-knopf {
		position: fixed;
		right: calc((100vw - var(--spa-leiste-b)) / 2 + 5px); /* Seit 3.5.0 Teil 2 (E2210): Rand 1 px + innen 4 px. */
		bottom: calc(max(8px, env(safe-area-inset-bottom, 0px)) + 5px);
		z-index: 1002;
		flex-direction: column;
		gap: 2px;
		width: calc((var(--spa-leiste-b) - 18px) / 5);
		min-width: 0;
		min-height: 54px;
		padding: 6px 0;
		font-size: var(--spa-leiste-schrift, 11px);
		font-weight: 600;
		line-height: 1.15;
		color: var(--spa-leise);
		background-color: var(--spa-karte);
		border: 0;
		border-radius: 24px;
	}

	body.sp-team .sp-menue[open] > summary.spa-menue-knopf,
	body.sp-inhaber .sp-menue[open] > summary.spa-menue-knopf,
	body.sp-personal .sp-menue[open] > summary.spa-menue-knopf,
	body.sp-gast .sp-menue[open] > summary.spa-menue-knopf {
		color: var(--spa-akzent);
		background-color: var(--spa-akzent-flaeche);
	}

	/* Keine dunkle Flaeche des alten Menues (gast.css ab 768 px) - das Panel deckt die Seite selbst. */
	body.sp-team .sp-menue[open] > summary.spa-menue-knopf::before,
	body.sp-inhaber .sp-menue[open] > summary.spa-menue-knopf::before,
	body.sp-personal .sp-menue[open] > summary.spa-menue-knopf::before,
	body.sp-gast .sp-menue[open] > summary.spa-menue-knopf::before {
		content: none;
	}
}

/* ------------------------------------------------------------ 3 Menue-Panel (wie Tapo "Me") */

/* Seit 3.9.0 Teil 4 (Schritt 44p, E2526-E2541): hier steht nur noch die Lage des Panels - sein Aussehen (Profil-Karte, Karten, Gruppen,
   Zeilen, Schalter, Abmelden) in Variante B "Weich" steht in design.css Abschnitt 15 (die alten Regeln sind abgeloest, E2540). */

body.sp-team .sp-menue-panel.spa-panel,
body.sp-inhaber .sp-menue-panel.spa-panel,
body.sp-personal .sp-menue-panel.spa-panel,
body.sp-gast .sp-menue-panel.spa-panel {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: calc(20px + env(safe-area-inset-top, 0px)) 16px calc(116px + env(safe-area-inset-bottom, 0px));
	border: 0;
	box-shadow: none;
	animation: none;
}

/* Ohne JavaScript bleiben die Knoepfe verborgen (app.js zeigt sie). */
.spa-panel [hidden],
.spa-seite [hidden] {
	display: none !important;
}

/* ------------------------------------------------------------ 4 Seitenmenue am Rechner (wie ProfileOS, einfarbig) */

/* Seit 3.9.0 Teil 4 (E2540): hier stehen nur noch Lage, Breite, Laufbalken und die Abstaende der Seite - das Aussehen der Leiste
   (Gruppen, Kacheln, Zeilen, Fenster "Einstellungen", Profil, runde Knoepfe) steht in design.css Abschnitt 15. */

@media (min-width: 1024px) {
	body.sp-team .sp-menue,
	body.sp-inhaber .sp-menue,
	body.sp-personal .sp-menue,
	body.sp-gast .sp-menue,
	.spa-leiste {
		display: none;
	}

	.spa-seite {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 900;
		display: flex;
		flex-direction: column;
		width: var(--spa-breite);
		overflow-y: auto;
		/* Seit 3.5.0 Teil 2 (E2207): der schmale Laufbalken wie ProfileOS - sichtbar nur mit der Maus ueber dem Menue oder dem Fokus darin;
		   der Platz bleibt reserviert, nichts springt. */
		scrollbar-color: transparent transparent;
		scrollbar-gutter: stable;
		scrollbar-width: thin;
	}

	.spa-seite:hover,
	.spa-seite:focus-within {
		scrollbar-color: var(--spa-balken) transparent;
	}

	.spa-seite::-webkit-scrollbar {
		width: 6px;
	}

	.spa-seite::-webkit-scrollbar-track {
		background-color: transparent;
		--spd-flaeche: 1;
	}

	.spa-seite::-webkit-scrollbar-thumb {
		background-color: transparent;
		border-radius: 999px;
		--spd-flaeche: 1;
	}

	.spa-seite:hover::-webkit-scrollbar-thumb,
	.spa-seite:focus-within::-webkit-scrollbar-thumb {
		background-color: var(--spa-balken);
		--spd-flaeche: 1;
	}

	.spa-seite::-webkit-scrollbar-thumb:hover,
	.spa-seite::-webkit-scrollbar-thumb:active {
		background-color: var(--spa-balken-ueber);
		--spd-flaeche: 1;
	}

	body.sp-team .spa-seite ~ .sp-kopf,
	body.sp-inhaber .spa-seite ~ .sp-kopf,
	body.sp-personal .spa-seite ~ .sp-kopf,
	body.sp-gast .spa-seite ~ .sp-kopf,
	body.sp-team .spa-seite ~ .sp-fuss,
	body.sp-inhaber .spa-seite ~ .sp-fuss,
	body.sp-personal .spa-seite ~ .sp-fuss,
	body.sp-gast .spa-seite ~ .sp-fuss {
		margin-left: var(--spa-breite);
	}

	body.sp-team .spa-seite ~ .sp-fuss,
	body.sp-inhaber .spa-seite ~ .sp-fuss,
	body.sp-personal .spa-seite ~ .sp-fuss,
	body.sp-gast .spa-seite ~ .sp-fuss {
		padding-bottom: 24px;
	}

	body.sp-team .spa-seite ~ .sp-kopf .sp-kopf-innen,
	body.sp-inhaber .spa-seite ~ .sp-kopf .sp-kopf-innen,
	body.sp-personal .spa-seite ~ .sp-kopf .sp-kopf-innen,
	body.sp-gast .spa-seite ~ .sp-kopf .sp-kopf-innen {
		justify-content: flex-end;
		max-width: 960px;
	}

	body.sp-team .spa-seite ~ .sp-kopf .sp-logo,
	body.sp-inhaber .spa-seite ~ .sp-kopf .sp-logo,
	body.sp-personal .spa-seite ~ .sp-kopf .sp-logo,
	body.sp-gast .spa-seite ~ .sp-kopf .sp-logo {
		display: none;
	}

	body.sp-team .spa-seite ~ .sp-inhalt,
	body.sp-inhaber .spa-seite ~ .sp-inhalt,
	body.sp-personal .spa-seite ~ .sp-inhalt,
	body.sp-gast .spa-seite ~ .sp-inhalt {
		max-width: 960px;
		margin-right: 0;
		margin-left: calc(var(--spa-breite) + (100% - var(--spa-breite) - min(100% - var(--spa-breite), 960px)) / 2);
	}

	body.sp-team .spa-seite ~ .sp-inhalt .sp-formular,
	body.sp-inhaber .spa-seite ~ .sp-inhalt .sp-formular,
	body.sp-personal .spa-seite ~ .sp-inhalt .sp-formular,
	body.sp-gast .spa-seite ~ .sp-inhalt .sp-formular {
		max-width: 640px;
	}
}

body.sp-team .spa-seite .spa-seite-logo,
body.sp-inhaber .spa-seite .spa-seite-logo,
body.sp-personal .spa-seite .spa-seite-logo,
body.sp-gast .spa-seite .spa-seite-logo {
	display: block;
	padding: 4px 10px 18px;
	font-size: 26px;
	text-decoration: none;
}

/* Wort 1 des Logos in der Schriftfarbe des Rahmens - dunkel hell (Wort 2 bleibt das Orange der Marke). */
body.sp-team .spa-seite .spa-seite-logo .sp-logo-siam,
body.sp-inhaber .spa-seite .spa-seite-logo .sp-logo-siam,
body.sp-personal .spa-seite .spa-seite-logo .sp-logo-siam,
body.sp-gast .spa-seite .spa-seite-logo .sp-logo-siam {
	color: var(--spa-text);
	--spd-auf: var(--spa-seite-grund);
}

/* ------------------------------------------------------------ 5 Karten der Startseite (wie Tapo) */

body.sp-team .spa-karten,
body.sp-inhaber .spa-karten,
body.sp-personal .spa-karten,
body.sp-gast .spa-karten {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 12px 0 20px;
	padding: 0;
	list-style: none;
}

body.sp-team .sp-team-uebersicht {
	padding: 0;
	background-color: transparent;
	box-shadow: none;
}

body.sp-team .spa-karten > li > a,
body.sp-inhaber .spa-karten > li > a,
body.sp-personal .spa-karten > li > a,
body.sp-gast .spa-karten > li > a {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	min-height: 124px;
	padding: 14px;
	font-size: 15px;
	line-height: 1.3;
	text-decoration: none;
	color: var(--spa-text);
	background-color: var(--spa-karte);
	border: 1px solid var(--spa-linie);
	border-radius: 18px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

body.sp-team .sp-team-heute.spa-karten li[data-heute]:not([data-zahl="0"]) a {
	color: var(--spa-text);
	background-color: var(--spa-akzent-flaeche);
}

.spa-kachel-kopf {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

.spa-kachel-symbol {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: var(--spa-akzent);
	background-color: var(--spa-akzent-flaeche);
	border-radius: 12px;
}

.spa-kachel-knopf {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	color: var(--spa-knopf-zeichen);
	background-color: var(--spa-knopf);
	border-radius: 50%;
}

.spa-kachel-titel {
	font-weight: 700;
	overflow-wrap: anywhere;
}

body.sp-team .spa-kachel-unter,
body.sp-inhaber .spa-kachel-unter,
body.sp-personal .spa-kachel-unter,
body.sp-gast .spa-kachel-unter {
	font-size: 13px;
	color: var(--spa-leise);
	--spd-auf: var(--spa-karte);
}

body.sp-team .spa-karten .sp-team-heute-zahl {
	font-size: 26px;
	font-weight: 800;
	line-height: 1.1;
}

body.sp-team .sp-team-zahl {
	color: var(--spa-text);
	background-color: var(--spa-karte);
	border-color: var(--spa-linie);
	border-radius: 14px;
}

body.sp-team .spa-kunden-titel {
	margin-top: 28px;
}

@media (min-width: 1024px) {
	body.sp-team .spa-seite ~ .sp-inhalt .spa-karten,
	body.sp-inhaber .spa-seite ~ .sp-inhalt .spa-karten,
	body.sp-personal .spa-seite ~ .sp-inhalt .spa-karten,
	body.sp-gast .spa-seite ~ .sp-inhalt .spa-karten {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------ 6 Hilfe */

.spa-hilfe-wege {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0 0 0 20px;
}

/* ------------------------------------------------------------ 7 Privatsphaere (E2104) - ein Sichtschutz, keine Sperre */

html[data-sp-privat="an"] [data-sp-privat-feld] {
	filter: blur(6px);
	-webkit-user-select: none;
	user-select: none;
}

html[data-sp-privat="an"] img[data-sp-privat-feld],
html[data-sp-privat="an"] [data-sp-privat-feld] img {
	filter: blur(14px);
}

/* ------------------------------------------------------------ 9 Inhaber und Personal (seit 3.2.0, Schritt 40, E2122-E2134) */

/* Die Kacheln von "Mein Betrieb" als Karten wie Tapo (E2128): das Markup bleibt Zeichen fuer Zeichen - die Flaeche des Symbols (li::before),
   das Symbol je Adresse (a::before, Maske aus dem Zeichen --spa-k) und der runde Pfeil (a::after) kommen allein aus der Gestaltung. */
body.sp-inhaber .sp-kacheln {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 12px 0 20px;
	padding: 0;
	list-style: none;
}

body.sp-inhaber .sp-kacheln > li {
	position: relative;
	min-width: 0;
}

body.sp-inhaber .sp-kacheln > li::before {
	content: "";
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 1;
	width: 40px;
	height: 40px;
	background-color: var(--spa-akzent-flaeche);
	border-radius: 12px;
	pointer-events: none;
	--spd-flaeche: 1;
}

body.sp-inhaber .sp-kacheln .sp-kachel {
	gap: 4px;
	height: 100%;
	min-height: 124px;
	margin: 0;
	padding: 66px 14px 14px;
	color: var(--spa-text);
	background-color: var(--spa-karte);
	border: 1px solid var(--spa-linie);
	border-radius: 18px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

body.sp-inhaber .sp-kacheln .sp-kachel::before {
	content: "";
	position: absolute;
	top: 22px;
	left: 22px;
	z-index: 2;
	width: 24px;
	height: 24px;
	background-color: var(--spa-akzent);
	-webkit-mask: var(--spa-k, 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%3Ccircle cx='6' cy='12' r='1.3'/%3E%3Ccircle cx='12' cy='12' r='1.3'/%3E%3Ccircle cx='18' cy='12' r='1.3'/%3E%3C/svg%3E")) center / 24px 24px no-repeat;
	mask: var(--spa-k, 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%3Ccircle cx='6' cy='12' r='1.3'/%3E%3Ccircle cx='12' cy='12' r='1.3'/%3E%3Ccircle cx='18' cy='12' r='1.3'/%3E%3C/svg%3E")) center / 24px 24px no-repeat;
	pointer-events: none;
	--spd-flaeche: 1;
}

body.sp-inhaber .sp-kacheln .sp-kachel::after {
	content: "";
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	transform: none;
	background-color: var(--spa-knopf);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	background-position: center;
	background-size: 18px 18px;
	background-repeat: no-repeat;
	border-radius: 50%;
	--spd-flaeche: 1;
}

body.sp-inhaber .sp-kacheln .sp-kachel-titel {
	font-size: 15px;
	overflow-wrap: anywhere;
	color: var(--spa-text);
	--spd-auf: var(--spa-karte);
}

body.sp-inhaber .sp-kacheln .sp-kachel-text {
	font-size: 13px;
	color: var(--spa-leise);
	--spd-auf: var(--spa-karte);
}

/* Das Symbol je Kachel - aus den Zeichen von SiamPoints_App (je Adresse eines). */
body.sp-inhaber .sp-kacheln a[href*="ansicht=rueckmeldungen"] {
	--spa-k: 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='M4 5.5h16v10H10l-4.5 3.5v-3.5H4z'/%3E%3Cpath d='M8 9.5h8M8 12.5h5'/%3E%3C/svg%3E");
}

body.sp-inhaber .sp-kacheln a[href*="ansicht=rufe"] {
	--spa-k: 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='M6 16.5V11a6 6 0 0 1 12 0v5.5l1.5 1.5h-15z'/%3E%3Cpath d='M10 20.5a2 2 0 0 0 4 0M12 5V3.5'/%3E%3C/svg%3E");
}

body.sp-inhaber .sp-kacheln a[href*="ansicht=reservierungen"] {
	--spa-k: 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%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4M8 14h3'/%3E%3C/svg%3E");
}

body.sp-inhaber .sp-kacheln a[href*="ansicht=angebote"] {
	--spa-k: 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='M3.5 12.5V4h8.5l8.5 8.5-8 8z'/%3E%3Ccircle cx='8' cy='8.5' r='1.6'/%3E%3C/svg%3E");
}

body.sp-inhaber .sp-kacheln a[href*="ansicht=aktionen"] {
	--spa-k: 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='M4 10v4h3l7 4.5V5.5L7 10z'/%3E%3Cpath d='M17.5 9a4 4 0 0 1 0 6M8 14l1.5 5'/%3E%3C/svg%3E");
}

body.sp-inhaber .sp-kacheln a[href*="ansicht=angaben"] {
	--spa-k: 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='M4 5h16v14H4z'/%3E%3Ccircle cx='9' cy='11' r='2'/%3E%3Cpath d='M6.5 16a3 3 0 0 1 5 0M14 10h4M14 13h3'/%3E%3C/svg%3E");
}

body.sp-inhaber .sp-kacheln a[href*="ansicht=beschreibung"] {
	--spa-k: 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='M5 6h14M5 10h14M5 14h10M5 18h7'/%3E%3C/svg%3E");
}

body.sp-inhaber .sp-kacheln a[href*="ansicht=zeiten"] {
	--spa-k: 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%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
}

body.sp-inhaber .sp-kacheln a[href*="ansicht=mitarbeiter"] {
	--spa-k: 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%3Ccircle cx='9' cy='8.5' r='3'/%3E%3Cpath d='M3.5 19a5.5 5.5 0 0 1 9.5-3.8'/%3E%3Cpath d='M17 12.5l3.5 1.3v2.7c0 2.2-1.5 3.8-3.5 4.5-2-.7-3.5-2.3-3.5-4.5v-2.7z'/%3E%3C/svg%3E");
}

body.sp-inhaber .sp-kacheln a[href*="ansicht=galerie"] {
	--spa-k: 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='M4 6h16v12H4z'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='M5 17l5-5 3.5 3.5L16 13l3.5 4'/%3E%3C/svg%3E");
}

body.sp-inhaber .sp-kacheln a[href*="ansicht=treueprogramm"] {
	--spa-k: 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='M12 3l2.7 5.5 6 .9-4.4 4.2 1 6-5.3-2.8-5.3 2.8 1-6L3.3 9.4l6-.9z'/%3E%3C/svg%3E");
}

body.sp-inhaber .sp-kacheln a[href*="ansicht=gaesteliste"] {
	--spa-k: 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%3Ccircle cx='9' cy='8.5' r='3'/%3E%3Cpath d='M3.5 19a5.5 5.5 0 0 1 11 0'/%3E%3Ccircle cx='17' cy='9.5' r='2.3'/%3E%3Cpath d='M15.5 14.5a4.5 4.5 0 0 1 5 4.5'/%3E%3C/svg%3E");
}

body.sp-inhaber .sp-kacheln a[href*="ansicht=buchungen"] {
	--spa-k: 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 6.5h11M9 12h11M9 17.5h11'/%3E%3Ccircle cx='5' cy='6.5' r='1.2'/%3E%3Ccircle cx='5' cy='12' r='1.2'/%3E%3Ccircle cx='5' cy='17.5' r='1.2'/%3E%3C/svg%3E");
}

body.sp-inhaber .sp-kacheln a[href*="ansicht=plaetze"] {
	--spa-k: 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='M4.5 6.5h15M3.5 9.5h17M6 9.5V19M18 9.5V19'/%3E%3C/svg%3E");
}

body.sp-inhaber .sp-kacheln a[href*="ansicht=auffaelligkeiten"] {
	--spa-k: 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%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5'/%3E%3C/svg%3E");
}

body.sp-inhaber .sp-kacheln a[href*="ansicht=monatsbericht"] {
	--spa-k: 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='M6 3.5h9l3.5 3.5v13.5H6z'/%3E%3Cpath d='M15 3.5V7h3.5M9.5 17v-3M12.5 17v-6M15.5 17v-4'/%3E%3C/svg%3E");
}

body.sp-inhaber .sp-kacheln a[href*="ansicht=aussehen"] {
	--spa-k: 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='M12 3.5a8.5 8.5 0 0 0 0 17c1.4 0 2-1 2-2s-.8-1.6-.8-2.6c0-1.1.9-1.9 2-1.9h2.2a3.1 3.1 0 0 0 3.1-3.1A7.6 7.6 0 0 0 12 3.5z'/%3E%3Ccircle cx='7.8' cy='11' r='1.2'/%3E%3Ccircle cx='10' cy='7.5' r='1.2'/%3E%3Ccircle cx='14.5' cy='7.5' r='1.2'/%3E%3C/svg%3E");
}
@media (min-width: 1024px) {
	body.sp-inhaber .spa-seite ~ .sp-inhalt .sp-kacheln {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Lange Woerter der Leiste (etwa "Reservierungen") mit Trennstrich statt hartem Umbruch (E2125). Seit 3.5.0 Teil 2 umgestellt (E2205,
   E2210): nie mehr im Wort getrennt - kurze Woerter der Leiste und eine gemeinsam eingepasste Schrift (app.js). */
body.sp-inhaber .spa-leiste .spa-leiste-punkt,
body.sp-personal .spa-leiste .spa-leiste-punkt {
	-webkit-hyphens: manual;
	hyphens: manual;
}

/* Die Streifen "Neu ..." (E2129): am Handy ueber der Leiste, am Rechner rechts vom Seitenmenue. */
@media (max-width: 1023.98px) {
	body.sp-inhaber .spa-seite ~ .sp-inhalt .sp-neues,
	body.sp-personal .spa-seite ~ .sp-neues {
		transform: translateY(-92px);
	}
}

@media (min-width: 1024px) {
	body.sp-inhaber .spa-seite ~ .sp-inhalt .sp-neues,
	body.sp-personal .spa-seite ~ .sp-neues {
		left: calc(var(--spa-breite) + 16px);
	}
}

/* Die Allgemeinen Einstellungen (E2127): eine ruhige Liste zum Ansehen. */
body.sp-inhaber .spa-allgemein {
	display: grid;
	margin: 0 0 20px;
	padding: 4px 16px;
	color: var(--spa-text);
	background-color: var(--spa-karte);
	border: 1px solid var(--spa-linie);
	border-radius: 18px;
}

.spa-allgemein-zeile {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 16px;
	padding: 12px 0;
}

.spa-allgemein-zeile + .spa-allgemein-zeile {
	border-top: 1px solid var(--spa-linie);
}

body.sp-inhaber .spa-allgemein dt {
	font-weight: 600;
	color: var(--spa-leise);
	--spd-auf: var(--spa-karte);
}

body.sp-inhaber .spa-allgemein dd {
	margin: 0;
	font-weight: 700;
	overflow-wrap: anywhere;
	color: var(--spa-text);
	--spd-auf: var(--spa-karte);
}

body.sp-inhaber .spa-allgemein .spa-allgemein-weg {
	margin-left: 8px;
	font-weight: 600;
	color: var(--spa-akzent);
	--spd-auf: var(--spa-karte);
}

/* ------------------------------------------------------------ 8 Dunkel (E2105) - die Zeichen; die ganzen Seiten in app-dunkel.css (Teil 2, E2113) */

html[data-sp-thema="dunkel"] {
	color-scheme: dark;
	--spa-text: #e5e7eb;
	--spa-leise: #a8b3c4;
	--spa-karte: #1e293b;
	--spa-grund: #0f172a;
	--spa-seite-grund: #111827;
	--spa-hover: #2a3443; /* Seit 3.5.0 Teil 2 (E2212): Hover ruhig grau (vorher #243044). */
	--spa-linie: #334155;
	--spa-akzent: #f59e0b;
	--spa-akzent-flaeche: #422006;
	--spa-knopf: #f59e0b;
	--spa-knopf-zeichen: #0f172a;
	--spa-rot: #fca5a5;
	--spa-schalter: #64748b;
	--spa-schatten: 0 10px 30px rgba(0, 0, 0, 0.5);
	/* Seit 3.5.0 Teil 2: Laufbalken (E2207), die Markierung grau mit fast weisser Schrift (E2212) - seit 3.9.0 Teil 4 nur noch fuer die Leiste unten. */
	--spa-balken: #475569;
	--spa-balken-ueber: #64748b;
	--spa-wahl: #334155;
	--spa-wahl-text: #f8fafc;
}

html[data-sp-thema="dunkel"] body.sp-team .spa-leiste .spa-leiste-punkt[aria-current="page"],
html[data-sp-thema="dunkel"] body.sp-inhaber .spa-leiste .spa-leiste-punkt[aria-current="page"],
html[data-sp-thema="dunkel"] body.sp-personal .spa-leiste .spa-leiste-punkt[aria-current="page"],
html[data-sp-thema="dunkel"] body.sp-gast .spa-leiste .spa-leiste-punkt[aria-current="page"],
html[data-sp-thema="dunkel"] body.sp-team .sp-menue[open] > summary.spa-menue-knopf,
html[data-sp-thema="dunkel"] body.sp-inhaber .sp-menue[open] > summary.spa-menue-knopf,
html[data-sp-thema="dunkel"] body.sp-personal .sp-menue[open] > summary.spa-menue-knopf,
html[data-sp-thema="dunkel"] body.sp-gast .sp-menue[open] > summary.spa-menue-knopf {
	color: var(--spa-wahl-text);
	background-color: var(--spa-wahl);
	background-image: linear-gradient(var(--spa-akzent), var(--spa-akzent));
	background-position: center bottom 4px;
	background-repeat: no-repeat;
	background-size: 18px 3px;
}

/* ------------------------------------------------------------ 10 Gast (seit 3.3.0, Schritt 41, E2145-E2157) */

/* Lange Woerter der Leiste mit Trennstrich statt hartem Umbruch (wie E2125) - nur auf Gastseiten. Seit 3.5.0 Teil 2 umgestellt (E2210): nie
   im Wort getrennt (wie oben). */
body.sp-gast:not(.sp-team):not(.sp-inhaber):not(.sp-personal) .spa-leiste .spa-leiste-punkt {
	-webkit-hyphens: manual;
	hyphens: manual;
}

/* Der Startbildschirm beim Betrieb (E2150): "Punkte sammeln" und "Punkte einloesen" - auch am Rechner zwei Spalten. */
@media (min-width: 1024px) {
	body.sp-gast .spa-seite ~ .sp-inhalt .spa-karten.sp-gast-start {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* "Ihre Meinung" direkt unter den Karten (E2150, E114): Google und "Reklamation oder Vorschlag" gleich gross nebeneinander, das Formular
   klappt darunter in voller Breite auf. Der Kasten von details liegt ueber beiden Spalten, faengt aber keinen Klick - nur seine Kinder. */
.sp-gast-start + .sp-meinung {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 12px;
	align-items: start;
	margin-top: 4px;
}

.sp-gast-start + .sp-meinung > * {
	grid-column: 1 / -1;
	min-width: 0;
}

.sp-gast-start + .sp-meinung > .sp-knopf-google {
	position: relative;
	z-index: 1;
	grid-column: 1;
	grid-row: 2;
	min-height: 64px;
	padding: 10px 12px;
	font-size: 15px;
}

.sp-gast-start + .sp-meinung > .sp-knopf-google + .sp-rueckmeldung {
	grid-row: 2;
	pointer-events: none;
}

.sp-gast-start + .sp-meinung > .sp-knopf-google + .sp-rueckmeldung > * {
	pointer-events: auto;
}

.sp-gast-start + .sp-meinung > .sp-knopf-google + .sp-rueckmeldung > summary.sp-knopf {
	width: calc(50% - 6px);
	min-height: 64px;
	margin-left: calc(50% + 6px);
	padding: 10px 12px;
	font-size: 15px;
}

/* White Label (E2154): der Rahmen in den Farben des Betriebs - nur Zeichen, deren Paare SiamPoints_Aussehen::PAARE sichert (Text und
   Nebentext auf Karte, Flaeche und Grund, Text auf dem hellen Ton der Hauptfarbe, Knopf-Text auf Knopf). Dunkel gibt es dort nicht. */
body.sp-gast.spw {
	--spa-text: var(--spw-text);
	--spa-leise: var(--spw-nebentext);
	--spa-karte: var(--spw-karte);
	--spa-grund: var(--spw-flaeche);
	--spa-seite-grund: var(--spw-grund);
	--spa-hover: var(--spw-flaeche);
	--spa-linie: var(--spw-linie);
	--spa-akzent: var(--spw-text);
	--spa-akzent-flaeche: var(--spw-haupt-hell);
	--spa-knopf: var(--spw-knopf);
	--spa-knopf-zeichen: var(--spw-knopf-text);
}

/* Mit White Label weicht unser Logo im Seitenmenue dem Logo des Betriebs im Kopf (E2051); der Kopf bleibt am Rechner ueber die Breite. */
body.sp-gast.spw .spa-seite .spa-seite-logo {
	display: none;
}

@media (min-width: 1024px) {
	body.sp-gast.spw .spa-seite ~ .sp-kopf .sp-kopf-innen {
		justify-content: space-between;
	}
}