/**
 * Universal – Komponenten-CSS
 *
 * Ergänzt theme.json um Dinge, die dort nicht abbildbar sind.
 * Regel: hier KEINE festen Farben/Maße – nur Tokens aus theme.json verwenden
 * (--wp--preset--* und --wp--custom--*), damit jede Stil-Variante greift.
 */

/* ---------- Basis ---------- */

::selection {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

:where(h1, h2, h3, h4, .wp-block-post-title) {
	text-wrap: balance;
}

:where(p, li) {
	text-wrap: pretty;
}

:where(a, button, input, select, textarea, summary, .wp-element-button):focus-visible {
	outline: 2px solid var(--wp--custom--color--focus);
	outline-offset: 2px;
}

/* Header, Main und Footer schließen bündig aneinander an. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

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

:where(.wp-element-button, .wp-block-button__link) {
	box-shadow: var(--wp--custom--shadow--button);
	transition:
		background-color var(--wp--custom--motion--duration) ease,
		color var(--wp--custom--motion--duration) ease,
		transform var(--wp--custom--motion--duration) ease,
		box-shadow var(--wp--custom--motion--duration) ease;
}

:where(.wp-element-button, .wp-block-button__link):hover {
	transform: translateY(var(--wp--custom--motion--lift));
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--custom--color--primary-soft);
}

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

:where(
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="tel"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	input[type="date"],
	select,
	textarea
) {
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contrast);
	background: var(--wp--custom--color--card);
	border: max(var(--wp--custom--border--width), 1px) solid var(--wp--custom--color--border);
	border-radius: var(--wp--custom--radius--base);
	padding: calc(0.65rem * var(--wp--custom--density)) calc(0.9rem * var(--wp--custom--density));
	transition: border-color var(--wp--custom--motion--duration) ease, box-shadow var(--wp--custom--motion--duration) ease;
}

:where(input, select, textarea):focus {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px var(--wp--custom--color--primary-soft);
	outline: none;
}

.wp-block-search__input {
	border-radius: var(--wp--custom--radius--button);
}

/* ---------- Karten ---------- */

.is-style-card {
	transition:
		transform var(--wp--custom--motion--duration) ease,
		box-shadow var(--wp--custom--motion--duration) ease;
}

.wp-block-post-template .is-style-card {
	height: 100%;
	box-sizing: border-box;
}

.wp-block-post-template .is-style-card:hover,
.is-style-card.is-linked:hover {
	transform: translateY(var(--wp--custom--motion--lift));
	box-shadow: var(--wp--custom--shadow--lg);
}

.is-style-card > .wp-block-post-featured-image:first-child {
	margin-top: calc(var(--wp--preset--spacing--40) * -1);
	margin-left: calc(var(--wp--preset--spacing--40) * -1);
	margin-right: calc(var(--wp--preset--spacing--40) * -1);
}

.is-style-card > .wp-block-post-featured-image:first-child img {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-top-left-radius: calc(var(--wp--custom--radius--base) - var(--wp--custom--border--width));
	border-top-right-radius: calc(var(--wp--custom--radius--base) - var(--wp--custom--border--width));
}

/* ---------- Kategorien als Badges ---------- */

.wp-block-post-terms.is-style-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
}

.wp-block-post-terms.is-style-badges .wp-block-post-terms__separator {
	display: none;
}

.wp-block-post-terms.is-style-badges a {
	display: inline-block;
	padding: 0.2em 0.75em;
	border-radius: var(--wp--custom--radius--button);
	background: var(--wp--custom--color--primary-soft);
	color: var(--wp--custom--color--primary-text);
	font-size: 0.85em;
	text-decoration: none;
}

/* ---------- Navigation ---------- */

.wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--wp--custom--color--card) !important;
	color: var(--wp--preset--color--contrast) !important;
	border: var(--wp--custom--border--width) solid var(--wp--custom--color--border) !important;
	border-radius: var(--wp--custom--radius--base);
	box-shadow: var(--wp--custom--shadow--md);
	padding: var(--wp--preset--spacing--10);
}

.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
	padding: var(--wp--preset--spacing--40);
}

/* Sticky-Header: Klasse "universal-header--sticky" an die oberste Gruppe im Header-Part hängen. */
.wp-block-template-part:has(> .universal-header--sticky) {
	position: sticky;
	top: 0;
	z-index: 100;
}

.admin-bar .wp-block-template-part:has(> .universal-header--sticky) {
	top: var(--wp-admin--admin-bar--height, 0px);
}

.universal-header--sticky {
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	backdrop-filter: saturate(1.4) blur(12px);
}

/* ---------- Tabellen ---------- */

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table :where(th, td) {
	border: max(var(--wp--custom--border--width), 1px) solid var(--wp--custom--color--border);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

.wp-block-table thead {
	background: var(--wp--custom--color--surface);
	border-bottom: 0;
}

/* ---------- Details / FAQ ---------- */

.wp-block-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--large);
}

.wp-block-details[open] summary {
	margin-bottom: var(--wp--preset--spacing--20);
}

/* ---------- Reduzierte Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	:where(.wp-element-button, .wp-block-button__link):hover,
	.is-style-card:hover {
		transform: none !important;
	}
}