/**
 * Designsystem 1.0 – Ergänzendes Child-Theme-CSS.
 *
 * Enthält AUSSCHLIESSLICH das, was über theme.json und den Astra-Customizer
 * nicht sinnvoll abbildbar ist (siehe docs/designsystem.md und
 * docs/entscheidungen.md im Doku-Projekt für die vollständige Begründung
 * je Wert). Farben/Schriftgrößen/-familien werden bewusst NICHT hier noch
 * einmal definiert, sondern per var(--wp--preset--…) referenziert bzw.
 * bleiben Astra-Customizer-Zuständigkeit, um doppelte Definitionen zu
 * vermeiden.
 *
 * Astra-Breakpoints (unverändert): Tablet ≤ 921px, Mobile ≤ 544px.
 */

/* ------------------------------------------------------------------ */
/* Layoutsystem: horizontaler Seitenabstand (Astra bietet hierfür keine */
/* eigene Customizer-Option – .ast-container hat sonst pauschal 20px). */
/* ------------------------------------------------------------------ */

.ast-container,
.ast-container-fluid {
	padding-left: 20px;
	padding-right: 20px;
}

@media (min-width: 545px) {
	.ast-container,
	.ast-container-fluid {
		padding-left: 28px;
		padding-right: 28px;
	}
}

@media (min-width: 922px) {
	.ast-container,
	.ast-container-fluid {
		padding-left: 32px;
		padding-right: 32px;
	}
}

/* ------------------------------------------------------------------ */
/* Cards (kein natives Astra-Konzept, daher eigenes Component-CSS).     */
/* Größen referenzieren die theme.json-Spacing-Presets, keine erneute   */
/* Zahlendefinition hier.                                               */
/* ------------------------------------------------------------------ */

:root {
	--tp-card-gap: var(--wp--preset--spacing--md); /* 24px */
	--tp-color-focus: var(--ast-global-color-1); /* Primary Green */
}

.tp-card {
	background-color: var(--ast-global-color-8); /* White */
	border-radius: 12px;
	border: 1px solid rgba(38, 61, 37, 0.08);
	box-shadow: 0 1px 3px rgba(38, 61, 37, 0.06), 0 1px 2px rgba(38, 61, 37, 0.04);
	padding: var(--wp--preset--spacing--md); /* 24px */
	transition: box-shadow 200ms ease, transform 200ms ease;
}

@media (min-width: 545px) {
	.tp-card {
		padding: var(--wp--preset--spacing--lg); /* 32px */
	}
}

.tp-card--soft {
	background-color: var(--ast-global-color-5); /* Soft Green */
	box-shadow: none;
}

.tp-card:hover {
	box-shadow: 0 4px 12px rgba(38, 61, 37, 0.1), 0 2px 4px rgba(38, 61, 37, 0.06);
	transform: translateY(-2px);
}

.tp-card img,
.tp-card .tp-card__image {
	border-radius: 12px;
}

/* ------------------------------------------------------------------ */
/* Fokus-Zustand: deutlich sichtbar, dunkelgrün, für Tastaturnavigation. */
/* Astra bietet dafür keine eigene, globale Customizer-Option.          */
/* ------------------------------------------------------------------ */

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

/* ------------------------------------------------------------------ */
/* Formulare: nur Basis-Tokens vorbereitet, wie beauftragt – es werden  */
/* an dieser Stelle noch KEINE Formulare gebaut. Generische Selektoren, */
/* damit sie unabhängig vom später gewählten Formular-System greifen.  */
/* ------------------------------------------------------------------ */

.tp-field,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="search"],
textarea,
select {
	min-height: 48px;
	border-radius: 7px;
	border: 1px solid var(--ast-global-color-6); /* Sand */
	padding: 0 14px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
}

textarea {
	min-height: 120px;
	padding-top: 12px;
	padding-bottom: 12px;
}

.tp-field-label,
label {
	display: block;
	margin-bottom: 6px;
}

/* Fehlerzustände (Vorbereitung): niemals nur über Farbe kommunizieren – */
/* Icon/Text-Kennzeichnung erfolgt, sobald reale Formulare gebaut werden. */
.tp-field--error {
	border-color: var(--ast-global-color-7); /* Ochre, nicht Rot – vorläufiger Platzhalter */
}