/*
 * TWI Kadence Child — globale Styles
 *
 * Buttons, Karten, Container, Fokus-States, Body-Typografie, Tap-Ziele,
 * reduced-motion. Nutzt durchgehend die von theme.json generierten
 * CSS-Variablen (--wp--preset--color--*, --wp--preset--font-*), damit
 * Palette und Skala die einzige Quelle der Wahrheit bleiben.
 *
 * Handoff §4: Buttons Radius 8px / Padding 0.7rem 1.4rem / Source Sans 3 600;
 * Karten Radius 12px / 1px border / BG surface; Container narrow ~720 / boxed ~1100.
 * §3: Fokus-Ring 2px solid primary + 3px Halo, outline-offset 2px, nie outline:none.
 */

:root {
	/* Bequeme Aliase auf die theme.json-Presets (mit Fallback). */
	--twi-primary: var(--wp--preset--color--primary, #2C5E7A);
	--twi-accent: var(--wp--preset--color--accent, #B5611B);
	--twi-background: var(--wp--preset--color--background, #FAF7F1);
	--twi-surface: var(--wp--preset--color--surface, #FFFFFF);
	--twi-surface-alt: var(--wp--preset--color--surface-alt, #EFEAE0);
	--twi-text: var(--wp--preset--color--text, #2B2A28);
	--twi-muted: var(--wp--preset--color--muted, #5C574F);
	--twi-border: var(--wp--preset--color--border, #E0D9CC);
	--twi-success: var(--wp--preset--color--success, #237018);
	--twi-warning: var(--wp--preset--color--warning, #9A5A12);
	--twi-danger: var(--wp--preset--color--danger, #8B1616);

	--twi-font-headings: var(--wp--preset--font-family--headings, "Spectral", Georgia, serif);
	--twi-font-body: var(--wp--preset--font-family--body, "Source Sans 3", system-ui, sans-serif);

	--twi-radius-button: 8px;
	--twi-radius-card: 12px;
	--twi-tap-min: 44px;

	/* Fokus: halbtransparenter Halo aus der Primärfarbe. */
	--twi-focus-ring: var(--twi-primary);
	--twi-focus-halo: rgba(44, 94, 122, 0.35);
}

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

body {
	font-family: var(--twi-font-body);
	/* Body min. 1.0625rem (≈17px) — Pflichtminimum (Handoff §1). */
	font-size: var(--wp--preset--font-size--body, 1.0625rem);
	line-height: 1.65;
	color: var(--twi-text);
	background-color: var(--twi-background);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--twi-font-headings);
}

/* --------------------------- Fokus-States ---------------------------- */
/*
 * Sichtbarer Ring für alle interaktiven Elemente. :focus-visible bevorzugt,
 * damit Mausklicks keinen Ring zeigen, Tastatur aber schon. Nie outline:none
 * ohne Ersatz (WCAG 2.1 / Handoff §3).
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.wp-block-button__link:focus-visible,
.twi-btn:focus-visible {
	outline: 2px solid var(--twi-focus-ring);
	outline-offset: 2px;
	box-shadow: 0 0 0 3px var(--twi-focus-halo);
	border-radius: var(--twi-radius-button);
}

/* Fallback für Browser ohne :focus-visible. */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
	outline-color: var(--twi-focus-ring);
}

/* ----------------------------- Buttons ------------------------------ */
/*
 * Drei Varianten:
 *  .twi-btn / .twi-btn--primary  → Petrol-Fläche, weißer Text
 *  .twi-btn--cta                 → Akzent-Fläche, weißer Text
 *  .twi-btn--secondary           → Outline primary
 * Greift zusätzlich auf die nativen Kadence/Gutenberg-Button-Klassen,
 * damit Standard-Buttons ohne Sonderklasse die CI-Form erhalten.
 */
.twi-btn,
.wp-block-button__link,
.wp-element-button,
button.button,
input[type="submit"],
.kadence-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	min-height: var(--twi-tap-min);
	padding: 0.7rem 1.4rem;
	border-radius: var(--twi-radius-button);
	border: 2px solid transparent;
	font-family: var(--twi-font-body);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--button, 1rem);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Primär = primary / weiß */
.twi-btn,
.twi-btn--primary {
	background-color: var(--twi-primary);
	color: #fff;
}
.twi-btn:hover,
.twi-btn--primary:hover {
	background-color: #244c63; /* primary ~10% dunkler */
	color: #fff;
}

/* CTA = accent / weiß */
.twi-btn--cta {
	background-color: var(--twi-accent);
	color: #fff;
}
.twi-btn--cta:hover {
	background-color: #964f16; /* accent ~10% dunkler */
	color: #fff;
}

/* Sekundär = Outline primary */
.twi-btn--secondary {
	background-color: transparent;
	color: var(--twi-primary);
	border-color: var(--twi-primary);
}
.twi-btn--secondary:hover {
	background-color: var(--twi-primary);
	color: #fff;
}

/* ------------------------------ Karten ------------------------------ */
.twi-card {
	background-color: var(--twi-surface);
	border: 1px solid var(--twi-border);
	border-radius: var(--twi-radius-card);
	padding: 1.25rem 1.5rem;
}

/* ---------------------------- Container ----------------------------- */
/*
 * narrow ~720px für Lesetexte, boxed ~1100px für Übersichten.
 * Spiegelt theme.json layout (contentSize/wideSize) als nutzbare Klassen.
 */
.twi-container--narrow {
	max-width: 720px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}
.twi-container--boxed {
	max-width: 1100px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

/* --------------------------- Tap-Ziele ------------------------------ */
/* Mindestgröße 44px (Ziel 48px) für berührungsbedienbare Elemente. */
a.button,
.menu a,
.wp-block-navigation-item__content,
.twi-tap {
	min-height: var(--twi-tap-min);
	display: inline-flex;
	align-items: center;
}

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

/* ---------------------- Logo ----------------------
 * Wortmarken-SVG ist quadratisch (864×825) -> ueber die Hoehe begrenzen,
 * sonst sprengt es den Header. Breite folgt automatisch.
 */
.site-header .site-branding img.custom-logo,
.site-header .site-logo-anchor img,
.site-branding a.brand img {
	max-height: 52px;
	width: auto;
}
@media (max-width: 767px) {
	.site-header .site-branding img.custom-logo,
	.site-header .site-logo-anchor img,
	.site-branding a.brand img {
		max-height: 40px;
	}
}