/**
 * kleewein – zentrales Custom-CSS (Basis-Schicht)
 *
 * Enthält ausschließlich Regeln, die theme.json nicht abbilden kann
 * (Fokus-Sichtbarkeit, reduzierte Bewegung, Sektionsabstände, Header).
 * Farben, Typografie, Abstände und Radien kommen aus theme.json-Presets
 * und werden hier nur über var(--wp--...) referenziert – keine
 * hartkodierten Design-Werte.
 *
 * Button-System, Hero (kw-header-x01), Marquee (kw-banner-x01) und
 * Reveal-Motion liegen zentral in kw-motion.css (v2, verbindliche
 * Referenz: kleewein-hero-artdirection-v2.html).
 */

:where(a, button, input, textarea, select, summary):focus-visible {
	outline: var(--wp--custom--focus--outline-width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--outline-offset);
}

@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;
	}
}

/**
 * Reset für die native Gutenberg-Inline-Textfarbe: <mark> trägt browserseitig
 * einen gelben Hintergrund. Wir nutzen die Formatierung nur für Textfarbe,
 * nicht als Hervorhebung – Hintergrund daher neutralisiert.
 */
mark.has-inline-color {
	background-color: transparent;
}

/**
 * Einheitliche Sektionsabstände für kw-Content-Patterns. Patterns mit
 * eigener Abstands-Logik (Hero als vollflächiger Cover, Marquee-Band)
 * nutzen diese Klasse nicht.
 */
.kw-section {
	padding-top: var(--wp--preset--spacing--3xl);
	padding-bottom: var(--wp--preset--spacing--3xl);
}

@media (max-width: 782px) {
	.kw-section {
		padding-top: var(--wp--preset--spacing--xl);
		padding-bottom: var(--wp--preset--spacing--xl);
	}
}

.kw-eyebrow {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 600;
	margin-bottom: 14px;
}

/* ===== Header (Template-Part) =====
   Referenz: Logo links als Text in der Display-Schrift (Mono, klein),
   rechts ein Button aus dem zentralen Button-System, dort kleiner
   dimensioniert (.top .btn der Referenz: 12px 22px, .92rem). */

.kw-header .kw-logo {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: -0.02em;
	margin: 0;
}

.kw-header .kw-logo a {
	color: inherit;
	text-decoration: none;
}

.kw-header .wp-block-button__link {
	padding: 12px 22px;
	font-size: 0.92rem;
}