/* ---- Sichtbarer Fokus fuer Tastaturbedienung ------------------------
   :focus-visible greift nur bei Tastatur, nicht beim Mausklick -
   fuer Mausnutzer aendert sich dadurch nichts. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid #2CA870;
	outline-offset: 2px;
	border-radius: 2px;
}

/* Auf dunklem Grund braucht der Rahmen Weiss, sonst verschwindet das Gruen. */
.wp-block-cover a:focus-visible,
.wp-block-cover button:focus-visible {
	outline-color: #FFFFFF;
}

/* ---- Trefferflaechen auf mindestens 44 px ---------------------------
   Vergroessert wird der klickbare Bereich, nicht das Symbol. */

/* Menue oeffnen und schliessen (war 24 x 24) */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	padding: 10px;
	margin: -10px;
}

/* Untermenue-Pfeil (war 9 x 9) */
.wp-block-navigation-submenu__toggle {
	padding: 16px;
	margin: -16px;
}

/* Instagram und WhatsApp in der Fusszeile (waren 20 x 20) */
.wp-block-social-link a,
.wp-block-social-link__link {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Navigations- und Fusszeilenlinks: 17 px hoch -> 44 px Trefferflaeche */
.wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* ---- Bewegung nur, wenn gewuenscht ----------------------------------
   Greift, sobald das GIF durch ein Video ersetzt ist. */
@media (prefers-reduced-motion: reduce) {
	video[autoplay] { animation-play-state: paused; }
}

/* ---- Nachbesserung: zwei Faelle, die oben nicht griffen -------------- */

/* Untermenue-Pfeil war 9 x 9 und hat eine feste Groesse. Statt ihn zu
   vergroessern - was die Navigation umbrechen liesse - wird nur die
   unsichtbare Trefferflaeche darum herum aufgezogen. Optisch aendert
   sich nichts. */
.wp-block-navigation-submenu__toggle {
	position: relative;
}
.wp-block-navigation-submenu__toggle::after {
	content: "";
	position: absolute;
	inset: -17px;
}

/* Fusszeilenlinks sind einfache Absatz-Links (18 px hoch). Nur auf
   Geraeten mit Finger statt Maus vergroessern - am Rechner bleibt die
   Fusszeile dadurch unveraendert kompakt. */
@media (pointer: coarse) {
	footer .wp-block-paragraph a,
	footer .wp-block-site-title a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/* ---- Cover-Abschnitt: lesbar auch ohne Hintergrundbild --------------
   Auf der Startseite steht weisse Schrift ueber einem Bild, abgedunkelt
   durch ein Overlay. Solange das Bild laedt, fehlt der dunkle Grund -
   die Schrift steht dann weiss auf hell und ist unlesbar. Eine
   Hintergrundfarbe darunter loest das.
   Gilt nur fuer Cover MIT Overlay, also die mit heller Schrift; die
   uebrigen Cover der Website bleiben unberuehrt. */
.wp-block-cover:has(> .wp-block-cover__background) {
	background-color: #1E1E1E;
}

/* ---- Kontrast der Kategorie-Labels auf den Fachseiten ---------------
   Die kleinen Grossbuchstaben-Labels ("Basis", "Zahlen", "Pruefung")
   standen in #5CB595 auf Weiss - Kontrastverhaeltnis 2,47 bei 12 px.
   WCAG verlangt 4,5 fuer Text dieser Groesse; gemessen auf 11 von 17
   Seiten. Geaendert wird nur die Variable, und nur innerhalb des
   Landingpage-Bereichs: --green faerbt dort ausschliesslich diese
   Labels, sonst nichts. Der Wert bleibt in derselben Farbfamilie,
   nur dunkler. */
.ek-lp {
	--green: #1F7A52;
}

/* Die Danke-Seite kodiert dieselbe Farbe fest, statt --green zu nutzen.
   Der Body-Praefix hebt die Spezifitaet an: der Seitenstil steht im
   Inhalt und damit hinter diesem hier - ohne das gewinnt er. */
body .ek-lp .eyebrow {
	color: #1F7A52;
}