/*
 * Gewerker – ergänzende Struktur- & Barrierefreiheitsregeln.
 * Die visuelle Identität (Farben, Typo, Spacing) lebt in theme.json.
 * Hier nur, was theme.json nicht sauber abbildet.
 */

/* Sichtbarer Tastatur-Fokus (D-41, Barrierefreiheit). */
:where(a, button, input, textarea, select, summary, .wp-element-button, .wp-block-navigation-item__content):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #1d4e6b);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Kopfbereich: Rhythmus + Trennlinie. */
.gw-site-header {
	padding-block: var(--wp--preset--spacing--40, 1rem);
	border-bottom: 1px solid var(--wp--preset--color--border, #d8dde3);
}

/* Fußbereich: großzügiger Abstand, Links erben die helle Textfarbe. */
.gw-site-footer {
	padding-block: var(--wp--preset--spacing--70, 3rem);
}
.gw-site-footer a {
	color: inherit;
}

/* Vertikaler Rhythmus des Inhaltsbereichs; hält kurze Seiten optisch stabil. */
.gw-main {
	padding-block: var(--wp--preset--spacing--70, 3rem) var(--wp--preset--spacing--80, 4rem);
	min-height: 40vh;
}

/* Hero-Block auf der Startseite (Grundgerüst – Patterns folgen in 03.2). */
.gw-hero {
	background: var(--wp--preset--color--surface, #fff);
	border: 1px solid var(--wp--preset--color--border, #d8dde3);
	border-radius: 0.5rem;
	padding: var(--wp--preset--spacing--80, 4rem) var(--wp--preset--spacing--60, 2rem);
}

/* Eyebrow-Zeile (kleines Label über der Überschrift). */
.gw-eyebrow {
	margin-bottom: 0;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
}

/* Beitrags-Karten in Listen (index/archive/suche). */
.gw-post-card {
	padding-block: var(--wp--preset--spacing--50, 1.5rem);
	border-bottom: 1px solid var(--wp--preset--color--border, #d8dde3);
}

/* Meta-Zeile eines Beitrags (Datum · Autor · Kategorie). */
.gw-post-meta {
	color: var(--wp--preset--color--contrast-soft, #4a525c);
	gap: var(--wp--preset--spacing--40, 1rem);
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
}

/* Bilder nie über ihren Container hinaus. */
img,
.wp-block-image img {
	max-width: 100%;
	height: auto;
}

/* Reduzierte Bewegung respektieren (Hygiene – das Theme animiert nicht). */
@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;
	}
}

/* ============================================================
 * AP-03.2 – Bausteine für Block-Patterns
 * Nur Struktur/Rhythmus. Farben, Radius und Typo kommen aus
 * theme.json bzw. den Style Variations (über Slot-Variablen),
 * damit alle vier Variations denselben Aufbau tragen.
 * ============================================================ */

/* Abschnitts-Rhythmus. Patterns sind durchgängig breit (wideSize 1280),
 * Fließtext bleibt über contentSize (820) schmal. */
.gw-section {
	padding-block: var(--wp--preset--spacing--80, 4rem);
}

/* Getönte Abschnitte (backgroundColor gesetzt) bekommen Innenabstand und
 * Rundung passend zur aktiven Variation. */
.gw-section.has-background {
	padding-inline: clamp(var(--wp--preset--spacing--50, 1.5rem), 4vw, var(--wp--preset--spacing--70, 3rem));
	border-radius: var(--wp--custom--radius--card, 0.625rem);
}

/* Karten (Leistungen, Über-uns-Eckdaten, Referenzen …). */
.gw-card {
	background: var(--wp--preset--color--surface, #fff);
	border: 1px solid var(--wp--preset--color--border, #d8dde3);
	border-radius: var(--wp--custom--radius--card, 0.625rem);
	padding: var(--wp--preset--spacing--50, 1.5rem);
	box-shadow: var(--wp--preset--shadow--soft);
	height: 100%;
}

/* Neutraler Medien-/Bildplatzhalter – keine Stockfotos (D-41). */
.gw-media-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 240px;
	padding: var(--wp--preset--spacing--50, 1.5rem);
	background: var(--wp--preset--color--surface-alt, #eceff3);
	border: 1px dashed var(--wp--preset--color--border, #d8dde3);
	border-radius: var(--wp--custom--radius--media, 0.625rem);
	color: var(--wp--preset--color--contrast-soft, #4a525c);
	text-align: center;
}
.gw-media-ph p {
	margin: 0;
}

/* Einbindungsstelle Konfigurator – neutraler Platzhalter, solange das
 * Konfigurator-Plugin (AP-04) nicht aktiv ist. */
.gw-configurator {
	background: var(--wp--preset--color--surface, #fff);
	border: 1px solid var(--wp--preset--color--border, #d8dde3);
	border-left: 4px solid var(--wp--preset--color--primary, #1d4e6b);
	border-radius: var(--wp--custom--radius--card, 0.625rem);
	padding: var(--wp--preset--spacing--60, 2rem);
	color: var(--wp--preset--color--contrast-soft, #4a525c);
}
.gw-configurator__label {
	margin: 0 0 var(--wp--preset--spacing--20, 0.5rem);
	font-size: var(--wp--preset--font-size--x-small, 0.8125rem);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	color: var(--wp--preset--color--primary, #1d4e6b);
}
.gw-configurator p:last-child {
	margin-bottom: 0;
}

/* Kennzahlen (Referenzen). */
.gw-stat .wp-block-heading {
	margin: 0;
	line-height: 1;
}
.gw-stat p {
	margin: var(--wp--preset--spacing--20, 0.5rem) 0 0;
}

/* Ablauf-/Schrittzeilen (Leistungen-Alternative). */
.gw-step__num {
	margin: 0;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.gw-step + .gw-step {
	margin-top: var(--wp--preset--spacing--50, 1.5rem);
}

/* Eckdaten-Liste in „Über uns“. */
.gw-facts {
	list-style: none;
	margin: 0;
	padding: 0;
}
.gw-facts li + li {
	margin-top: var(--wp--preset--spacing--30, 0.75rem);
}

/* Outline-Buttons an das Farbschema binden, statt der Core-Vorgabe zu folgen.
 * So bleibt der Kontrast in allen vier Variations (inkl. Dunkel) AA-konform. */
.wp-block-button.is-style-outline a.wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--primary, #1d4e6b);
	border: 1px solid var(--wp--preset--color--primary, #1d4e6b);
}
.wp-block-button.is-style-outline a.wp-block-button__link:hover,
.wp-block-button.is-style-outline a.wp-block-button__link:focus {
	background-color: var(--wp--preset--color--primary, #1d4e6b);
	color: var(--wp--preset--color--surface, #fff);
	border-color: var(--wp--preset--color--primary, #1d4e6b);
}