/*
 * Basis (alle Seiten und Editor): Seitengrund, Fokus, Block-Stile „Dachzeile“ und Buttons.
 * Farben, Schriften und Größen kommen aus theme.json (Website-Editor → Stile). Hier steht nur,
 * was theme.json nicht ausdrücken kann (Linie der Dachzeile, Hover, Übergänge, Icons in Buttons).
 * Grundwerte stehen in :where(), damit Änderungen unter „Stile“ Vorrang haben.
 */

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
.wp-site-blocks > * { margin-block-start: 0; }
:where(.wp-site-blocks) *, :where(.wp-site-blocks) *::before, :where(.wp-site-blocks) *::after { box-sizing: border-box; }
:where(img) { max-width: 100%; height: auto; }
::selection { background: var(--sonne-200); color: var(--fels-950); }
:focus-visible { outline: 2px solid var(--sonne-500); outline-offset: 2px; }
svg.ps-i { flex: none; display: inline-block; vertical-align: middle; }

/* ---------- Dachzeile (Block-Stil „Dachzeile“ und Klasse ps-eyebrow-text) ---------- */
.is-style-ps-dachzeile,
.ps-eyebrow-text {
	display: flex;
	align-items: center;
	gap: 12px;
}
.ps-eyebrow-text {
	font: 600 var(--fs-eyebrow)/1.2 var(--font-sans);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--text-accent);
}
.is-style-ps-dachzeile::before {
	content: "";
	flex: none;
	width: 28px;
	height: 1px;
	background: currentColor;
}
.is-style-ps-dachzeile.has-text-align-center { justify-content: center; }
.is-style-ps-dachzeile:empty { display: none; }

/* ---------- Buttons ---------- */
.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast);
}
.wp-block-button__link:active { transform: translateY(1px); }
:where(.wp-block-buttons) { gap: 12px; }

.is-style-ps-akzent .wp-block-button__link:hover,
.is-style-ps-akzent .wp-block-button__link:focus-visible { background-color: var(--sonne-400); color: var(--fels-950); }
.is-style-ps-primaer .wp-block-button__link:hover { background-color: var(--tanne-800); color: var(--schnee); }
.is-style-ps-umriss .wp-block-button__link:hover { background-color: var(--tanne-50); color: var(--tanne-800); border-color: var(--tanne-800); }
.is-style-ps-hell .wp-block-button__link:hover { background-color: rgba(252, 250, 245, .14); color: var(--schnee); border-color: var(--schnee); }
.is-style-ps-textlink .wp-block-button__link { min-height: 0; border-bottom: 1px solid currentColor; }
.is-style-ps-textlink .wp-block-button__link:hover { background-color: transparent; color: var(--sonne-700); }

.ps-gross .wp-block-button__link { min-height: 56px; padding-left: 32px; padding-right: 32px; font-size: 14px; }
.ps-klein .wp-block-button__link { min-height: 36px; padding: 0 16px; font-size: 12px; }
.ps-pfeil-icon { transition: transform var(--dur-base) var(--ease-out); }
.wp-block-button__link:hover .ps-pfeil-icon { transform: translateX(3px); }

/* ---------- Bilder: ruhiger Zoom in Karten ---------- */
.ps-karte img, .ps-kachel img { transition: transform var(--dur-image) var(--ease-out); }

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Lange Button-Texte (z. B. Italienisch) auf schmalen Bildschirmen umbrechen statt seitlich überstehen */
@media (max-width: 599px) {
	.wp-block-button .wp-block-button__link { white-space: normal; text-align: center; }
}