/*
 * SP Startseite – gemeinsames Basis-CSS aller Blöcke (Stil „Sammelkarte“, Tim 23.10.2026).
 * Werte: Vault 00 Kontext/Branding.md, Abschnitt „Designsprache Sammelkarte“, Live-Referenz LSDB-Teaser 0.9.0.
 * Theme-Variablen (Twenty Twenty-Five + SP Global Styles), Hex nur als Fallback. Lädt keine Fonts.
 * Jeder Block trägt die Klasse .spst, Breakpoints per Container Query auf den Block (spst-block):
 * Desktop > 1000px, Tablet 700–1000px, Handy < 700px.
 */

.spst {
	--spst-kiste: #387be8;
	--spst-rahmen: var(--wp--preset--color--accent-1, #2a7de1);
	--spst-schein: 0 0 34px rgba(255, 255, 255, .14), 0 0 18px rgba(42, 125, 225, .55);
	--spst-panel: rgba(16, 17, 41, .72);
	--spst-rand-dezent: 2px solid rgba(74, 144, 226, .45);
	--spst-textbox: rgba(56, 123, 232, .72);
	--spst-knopf-dunkel: #163f86;
	--spst-gelb: var(--wp--preset--color--accent-2, #ffc000);
	--spst-kicker-blau: #e6efff;
	--spst-text: var(--wp--preset--color--contrast, #ededed);
	--spst-schrift: var(--wp--preset--font-family--barlow-condensed, "Barlow Condensed", sans-serif);
	--spst-radius-rahmen: 20px;
	--spst-radius-kiste: 16px;
	--spst-radius-panel: 18px;

	container-type: inline-size;
	container-name: spst-block;
	position: relative;
	box-sizing: border-box;
	font-family: var(--spst-schrift);
	font-weight: 400;
	color: var(--spst-text);
}
.spst *,
.spst *::before,
.spst *::after { box-sizing: border-box; }

/* ---------- Schrift ---------- */

/* Fließtext, Buttons, Kisten: 400 kursiv (künstliche Neigung wie die Karte) */
.spst-kursiv {
	font-style: italic;
	letter-spacing: .025em;
}
/* Block-Überschriften, Panel-Titel, senkrechte Titel: 700 Versalien */
.spst-titel {
	margin: 0;
	font-family: var(--spst-schrift);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--spst-text);
}
/* Kicker: 400 Versalien, weit gesperrt, orange (auf blauen Flächen hellblau) */
.spst-kicker {
	margin: 0;
	font-size: .8rem;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 1.44px;
	text-transform: uppercase;
	color: var(--spst-gelb);
}
.spst-textbox .spst-kicker,
.spst-kiste .spst-kicker { color: var(--spst-kicker-blau); }

/* ---------- Rahmen ---------- */

.spst-rahmen {
	border: 7px solid var(--spst-rahmen);
	border-radius: var(--spst-radius-rahmen);
	box-shadow: var(--spst-schein);
	overflow: hidden;
}
.spst-rahmen--klein {
	border-width: 5px;
	border-radius: var(--spst-radius-kiste);
}
.spst-panel {
	background: var(--spst-panel);
	border: var(--spst-rand-dezent);
	border-radius: var(--spst-radius-panel);
}

/* ---------- Textbox ---------- */

/* Über Foto (Desktop/Tablet): halbtransparent mit Unschärfe, kompakt */
.spst-textbox {
	color: #fff;
	background: var(--spst-textbox);
	-webkit-backdrop-filter: blur(6px) saturate(140%);
	backdrop-filter: blur(6px) saturate(140%);
	border-radius: var(--spst-radius-kiste);
}
/* Unter Foto (Handy): massiv */
.spst-textbox--massiv {
	background: var(--spst-kiste);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* ---------- Kiste ---------- */

/* Label links, Wert rechts, kursiv weiß. Links rund, rechts eckig und bündig über den Rand
   des umgebenden Elements (der Block setzt dafür einen negativen Außenabstand rechts). */
.spst-kiste {
	display: flex;
	align-items: baseline;
	gap: .6em;
	margin: 0;
	padding: 7px 16px 8px;
	list-style: none;
	font-style: italic;
	letter-spacing: .025em;
	color: #fff;
	background: var(--spst-kiste);
	border-radius: var(--spst-radius-kiste) 0 0 var(--spst-radius-kiste);
}
.spst-kiste__label {
	font-size: .95rem;
	line-height: 1.2;
}
.spst-kiste__wert {
	margin-left: auto;
	font-size: 1.7rem;
	line-height: 1;
}
/* Mehrere Werte in einer Kiste (Handy) mit Trennstrichen */
.spst-kiste--reihe { padding-left: 0; padding-right: 0; }
.spst-kiste--reihe > * {
	flex: 1;
	padding: 0 12px;
}
.spst-kiste--reihe > * + * { border-left: 1px solid rgba(255, 255, 255, .35); }

/* ---------- Buttons ---------- */

/* Glas-Pille wie „Buch uns“ im Header (Snippet sp-cta-glass), Werte aus dem LSDB-Teaser (.splt-glas) */
.spst .spst-glas {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45em;
	margin: 0;
	padding: .7em 1.8em;
	font-family: var(--spst-schrift);
	font-size: 1.05rem;
	font-style: italic;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: #fff;
	background: linear-gradient(135deg, rgba(42, 125, 225, .35) 0%, rgba(42, 125, 225, .15) 100%);
	-webkit-backdrop-filter: blur(10px) saturate(160%);
	backdrop-filter: blur(10px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 999px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .45),
		inset 0 -1px 6px rgba(42, 125, 225, .25),
		0 4px 18px rgba(0, 0, 0, .35);
	cursor: pointer;
	transition: all .25s ease;
}
.spst .spst-glas:hover,
.spst .spst-glas:focus-visible {
	color: #fff;
	background: linear-gradient(135deg, rgba(42, 125, 225, .55) 0%, rgba(42, 125, 225, .3) 100%);
	border-color: rgba(255, 255, 255, .55);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .55),
		0 0 22px rgba(42, 125, 225, .55),
		0 4px 20px rgba(0, 0, 0, .4);
	transform: translateY(-1px);
}
/* In blauen Textboxen dunklerer Grund, damit die Pille sich abhebt */
.spst .spst-textbox .spst-glas { background: var(--spst-knopf-dunkel); }
.spst .spst-textbox .spst-glas:hover,
.spst .spst-textbox .spst-glas:focus-visible { background: #1d4fa6; }

/* ---------- Badge ---------- */

.spst-badge {
	display: inline-block;
	padding: 3px 10px;
	font-size: .8rem;
	font-style: italic;
	line-height: 1.2;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #111;
	background: var(--spst-gelb);
	border-radius: 999px;
}

/* ---------- Fokus ---------- */

.spst a:focus-visible,
.spst button:focus-visible {
	outline: 2px solid var(--spst-rahmen);
	outline-offset: 3px;
}

.spst-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- Bewegung reduzieren ---------- */

@media (prefers-reduced-motion: reduce) {
	.spst *,
	.spst *::before,
	.spst *::after {
		animation: none !important;
		transition: none !important;
	}
	.spst .spst-glas:hover,
	.spst .spst-glas:focus-visible { transform: none; }
}