/*
 * Grundregeln, die sich in theme.json nicht ausdrücken lassen.
 * Keine festen Farb- oder Schriftwerte: alles über die Voreinstellungen aus theme.json
 * (--wp--preset--…), damit eine Änderung unter „Stile“ überall greift.
 * Gilt auf der Website und im Editor.
 */

html { scroll-behavior: smooth; }

/* Kopfzeile bleibt oben stehen. Die Regel sitzt am Vorlagenteil selbst, nicht an der
   Gruppe darin: Eine klebende Gruppe innerhalb des Vorlagenteils hätte keinen Raum,
   in dem sie kleben könnte. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--wp--custom--kopf--hintergrund);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.admin-bar header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 0px); }
/* Sprungziele nicht unter der Kopfzeile verstecken */
:where([id]) { scroll-margin-top: 80px; }

/* Am Handy nur Logo und Knopf, wie im Entwurf */
@media (max-width: 760px) {
	.klw-kopf .wp-block-navigation { display: none; }
	.klw-kopf .wp-block-site-logo img { width: 150px !important; }
	.klw-kopf .wp-block-button__link { padding: 10px 14px; font-size: 14px; }
}

/* Anriss nicht zu breit laufen lassen */
.is-style-anriss { max-width: 34em; }
.has-text-align-center.is-style-anriss { margin-inline: auto; }

/* Im Beitext hebt Fett sich in Textfarbe ab */
.is-style-beitext strong { color: var(--wp--preset--color--anthrazit); }

/* Hervorhebung im Titel ohne Schrägstellung, Farbe kommt aus der Textfarbe im Editor */
h1 em, h2 em, h3 em { font-style: normal; }

/* Textfarbe aus dem Editor (Format „Textfarbe“) ohne die gelbe Standardhinterlegung des
   Browsers. Eine im Editor gewählte Hinterlegung steht direkt am Wort und gilt weiter. */
mark.has-inline-color { background-color: transparent; }

/*
 * Formularfelder, Richtung „Linien“ (Remy 19.09.2026), barrierearm nach WCAG 2.2:
 * - Linie unten in Anthrazit, 2 px: 17 : 1 gegen Weiß, das Feld ist als Feld erkennbar
 *   (1.4.11 verlangt 3 : 1; die frühere hellgraue Umrandung hatte nur 1,4 : 1).
 * - Fokus nicht nur über Farbe: Linie 3 px rot UND heller Hintergrund (2.4.7, 1.4.1).
 * - Fehler: rote Linie plus Satz in Worten (aria-invalid, 3.3.1).
 */
input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="hidden"]), textarea, select {
	font: inherit;
	font-size: 18px;
	line-height: 1.4;
	padding: 8px 4px 9px;
	border: 0;
	border-bottom: 2px solid var(--wp--preset--color--anthrazit);
	background: transparent;
	color: var(--wp--preset--color--anthrazit);
	border-radius: 0;
	transition: background-color .2s, border-color .2s;
}
textarea { min-height: 7rem; resize: vertical; }
/* Gleiche Gewichtung wie die Grundregel oben, sonst gewinnt diese. */
input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="hidden"]):focus,
textarea:focus, select:focus {
	outline: none;
	border-bottom: 3px solid var(--wp--preset--color--rot);
	padding-bottom: 8px;
	background: var(--wp--preset--color--flaeche);
}
[aria-invalid="true"] { border-bottom-color: var(--wp--preset--color--rot) !important; }
@media (forced-colors: active) {
	input:focus, textarea:focus, select:focus { outline: 3px solid CanvasText; }
}

/*
 * Knöpfe (Knopf-Block, Formular, Suche): Pfeil in Rot, beim Überfahren wird der ganze Knopf rot (Farben in theme.json).
 * Der Pfeil wird nicht vorgelesen (leerer Ersatztext nach dem Schrägstrich).
 */
.wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
	transition: background-color .3s, color .3s;
}
.wp-element-button::after {
	content: "↗";
	content: "↗" / "";
	color: var(--wp--preset--color--rot);
	transition: color .3s;
}
.wp-element-button:hover::after,
.wp-element-button:focus-visible::after { color: currentColor; }