/* A&B-Tiefen-Design (v2.30): nur bei aktivem Theme "A&B Schulungen" geladen.
   Die neutrale Basis assets/frontend.css bleibt der WordPress-Standardlook;
   dieses Blatt legt die Familien-Tiefenebene darueber - versetzte harte
   Schatten statt weicher, 2px-Konturen, Anheben bei Maus und Tastatur - und
   bringt das dunkle Design mit.

   Diese Datei wird nach der Basis geladen (Abhaengigkeit vom Handle
   stm-frontend). Deshalb genuegen gleich spezifische, einklassige Selektoren:
   sie ueberschreiben die Basis ueber die Reihenfolge und ohne !important - und
   das Theme "A&B Schulungen" kann sie auf Theme-Seiten weiter ueberschreiben. */

.stm-materials,
.stm-account {
	--stm-depth-outline: #1d2327;
	--stm-depth-shadow: 7px 7px 0 rgba(29, 35, 39, 0.18);
	--stm-depth-shadow-hover: 11px 11px 0 rgba(29, 35, 39, 0.18);
	--stm-depth-lift: translate(-4px, -4px);
}

.stm-material-card {
	border: 2px solid var(--stm-depth-outline);
	border-radius: 4px;
	box-shadow: var(--stm-depth-shadow);
	transition:
		transform 160ms ease,
		box-shadow 160ms ease,
		border-color 160ms ease;
}

/* Tastaturbedienung hebt die Karte genauso an wie die Maus. */
.stm-material-card:focus-within {
	border-color: #2271b1;
	box-shadow: var(--stm-depth-shadow-hover);
	transform: var(--stm-depth-lift);
}

.stm-material-card:focus-within h4,
.stm-material-card:focus-within h4 a {
	color: #135e96;
}

/* Wo der Browser es kann, hebt sich die Karte nur bei Tastaturbedienung an.
   Nach einem Mausklick auf den Titel bliebe sie sonst angehoben stehen. */
@supports selector(:has(:focus-visible)) {
	.stm-material-card:focus-within {
		border-color: var(--stm-depth-outline);
		box-shadow: var(--stm-depth-shadow);
		transform: none;
	}

	.stm-material-card:has(:focus-visible) {
		border-color: #2271b1;
		box-shadow: var(--stm-depth-shadow-hover);
		transform: var(--stm-depth-lift);
	}
}

@media (hover: hover) {
	.stm-material-card:hover {
		border-color: #2271b1;
		box-shadow: var(--stm-depth-shadow-hover);
		transform: var(--stm-depth-lift);
	}

	.stm-material-card:hover h4,
	.stm-material-card:hover h4 a {
		color: #135e96;
	}
}

/* Schaltflaechen: 4px Radius statt der 3px der Basis, dazu die kleine Ebene. */
.stm-download-button,
.stm-button {
	border-radius: 4px;
	box-shadow: 3px 3px 0 rgba(29, 35, 39, 0.28);
	transition:
		transform 120ms ease,
		box-shadow 120ms ease,
		background-color 150ms ease,
		border-color 150ms ease,
		color 150ms ease;
}

/* Tastaturfokus hebt die Schaltflaeche ebenso an wie der Mauszeiger. */
.stm-download-button:focus-visible,
.stm-button:focus-visible,
.stm-account-actions .button:focus-visible {
	box-shadow: 5px 5px 0 rgba(29, 35, 39, 0.24);
	transform: translate(-1px, -1px);
}

@media (hover: hover) {
	.stm-download-button:hover,
	.stm-button:hover,
	.stm-account-actions .button:hover {
		box-shadow: 5px 5px 0 rgba(29, 35, 39, 0.24);
		transform: translate(-1px, -1px);
	}
}

.stm-account-actions .button {
	box-shadow: 3px 3px 0 rgba(29, 35, 39, 0.28);
	transition:
		transform 120ms ease,
		box-shadow 120ms ease,
		background-color 150ms ease,
		border-color 150ms ease,
		color 150ms ease;
}

.stm-empty,
.stm-login-required {
	border: 2px solid var(--stm-depth-outline);
	box-shadow: var(--stm-depth-shadow);
}

.stm-account-intro {
	border: 2px solid var(--stm-depth-outline);
	box-shadow: var(--stm-depth-shadow);
}

.stm-account-card {
	border: 2px solid var(--stm-depth-outline);
	border-radius: 4px;
	box-shadow: var(--stm-depth-shadow);
	transition:
		transform 160ms ease,
		box-shadow 160ms ease,
		border-color 160ms ease;
}

.stm-account-card:focus-within {
	border-color: #2271b1;
	box-shadow: var(--stm-depth-shadow-hover);
	transform: var(--stm-depth-lift);
}

/* Auch hier: angehoben nur bei Tastaturbedienung, nicht nach einem Mausklick. */
@supports selector(:has(:focus-visible)) {
	.stm-account-card:focus-within {
		border-color: var(--stm-depth-outline);
		box-shadow: var(--stm-depth-shadow);
		transform: none;
	}

	.stm-account-card:has(:focus-visible) {
		border-color: #2271b1;
		box-shadow: var(--stm-depth-shadow-hover);
		transform: var(--stm-depth-lift);
	}
}

@media (hover: hover) {
	.stm-account-card:hover {
		border-color: #2271b1;
		box-shadow: var(--stm-depth-shadow-hover);
		transform: var(--stm-depth-lift);
	}
}

/* Hinweisboxen im Familien-Muster: 8px Radius statt der 4px der Basis. */
.stm-account-notice {
	border-radius: 8px;
}

/* v3.0: Das Dateisymbol folgt in der Basis dem Familienstandard 4px; im
   A&B-Design bleibt es beim weicheren 8px-Radius der Tiefenebene. */
.stm-file-icon {
	border-radius: 8px;
}

/* Auf schmalen Displays ist die Ebene flacher, damit sie nicht drueckt. */
@media (max-width: 700px) {
	.stm-materials,
	.stm-account {
		--stm-depth-shadow: 5px 5px 0 rgba(29, 35, 39, 0.18);
		--stm-depth-shadow-hover: 7px 7px 0 rgba(29, 35, 39, 0.18);
	}
}

/* Nutzereinstellung "weniger Bewegung": keine Uebergaenge, kein Anheben. */
@media (prefers-reduced-motion: reduce) {
	.stm-material-card,
	.stm-account-card,
	.stm-download-button,
	.stm-button,
	.stm-account-actions .button {
		transition: none;
	}

	.stm-material-card:hover,
	.stm-material-card:focus-within,
	.stm-account-card:hover,
	.stm-account-card:focus-within,
	.stm-download-button:hover,
	.stm-download-button:focus-visible,
	.stm-button:hover,
	.stm-button:focus-visible,
	.stm-account-actions .button:hover,
	.stm-account-actions .button:focus-visible {
		transform: none;
	}
}

/* Kontrastmodus: die Kontur traegt die Tiefe, nicht der Schatten. */
@media (forced-colors: active) {
	.stm-material-card,
	.stm-account-card,
	.stm-account-intro,
	.stm-empty,
	.stm-login-required,
	.stm-download-button,
	.stm-button,
	.stm-account-actions .button {
		box-shadow: none;
	}

	.stm-material-card,
	.stm-account-card,
	.stm-account-intro,
	.stm-empty,
	.stm-login-required {
		border: 2px solid CanvasText;
	}

	.stm-material-card:hover,
	.stm-material-card:focus-within,
	.stm-account-card:hover,
	.stm-account-card:focus-within {
		border-color: Highlight;
		box-shadow: none;
	}
}

/* Dunkles Design (v2.29, seit v2.30 nur mit A&B-Theme): die Werte sind exakt
   die des Schulungsanmeldungs-Plugins (ab-training-registration), damit Plugin
   und Theme zusammenpassen: Grund #0b1c21, Karten #11282e, kraeftigere Flaeche
   #16343b, Text #dbe9eb, Sekundaertext #a8c4c9, Linien #274a52, Feldkante
   #6f8f97, Akzenttext #72aee6. Alle Selektoren bleiben einklassig, damit das
   Theme "A&B Schulungen" sie auf Theme-Seiten weiter ueberschreiben kann. */
@media (prefers-color-scheme: dark) {
    /*
     * Fokusrahmen auf dunklem Grund. #005fcc aus frontend.css misst hier je
     * nach Flaeche nur 2,2 bis 2,9:1 und verfehlt die von WCAG 1.4.11
     * geforderten 3:1. #7fb3ff erreicht 6,2 bis 9,3:1. Geaendert wird nur die
     * Farbe — Staerke und Abstand bleiben, wie sie sind.
     *
     * Gelesen wird zuerst das Theme-Token --ab-focus; nur wenn das Theme
     * keines setzt, greift der Rueckfall #7fb3ff. Damit wirkt die Korrektur
     * auch unter fremden dunklen Themes, und ein Theme der Familie kann sie
     * mit einer einzigen Deklaration steuern.
     *
     * Der Wert steht ausschliesslich hier: auf hellem Grund waere er mit
     * 2,14:1 gegen Weiss selbst ein Fehler, und diese Datei laedt nur bei
     * gesetzter Designweiche.
     */
    /* Sichtbarer Fokusrahmen (WCAG 2.4.7 / 1.4.1): nicht nur Farbwechsel,
    sondern ein Umriss mit ~6:1 Kontrast auf allen fokussierbaren Elementen. Nur :focus-visible: so erscheint der Rahmen bei Tastaturbedienung,
    bleibt aber nach einem Mausklick oder einem per JavaScript gesetzten Fokus nicht stehen. Die :focus-Regeln als Rueckfallebene stehen am Dateiende im @supports-Block. Beides gehoert in die Basis: Barrierefreiheit gilt in jedem Theme. */ .stm-materials a:focus-visible,
    .stm-materials button:focus-visible,
    .stm-materials input:focus-visible,
    .stm-materials select:focus-visible,
    .stm-materials textarea:focus-visible,
    .stm-account a:focus-visible,
    .stm-account button:focus-visible,
    .stm-account input:focus-visible,
    .stm-account select:focus-visible,
    .stm-account textarea:focus-visible,
    .stm-button:focus-visible,
    .stm-download-button:focus-visible,
    .stm-materials a:focus,
    .stm-materials button:focus,
    .stm-materials input:focus,
    .stm-materials select:focus,
    .stm-materials textarea:focus,
    .stm-account a:focus,
    .stm-account button:focus,
    .stm-account input:focus,
    .stm-account select:focus,
    .stm-account textarea:focus,
    .stm-button:focus,
    .stm-download-button:focus {
        outline-color: var(--ab-focus, #7fb3ff);
    }

	.stm-materials,
	.stm-account {
		color: #dbe9eb;
		background: #0b1c21;
	}

	/* Auf dunklem Grund traegt eine hellere Kontur die Tiefe, nicht der Schatten:
	   das fast schwarze #1d2327 waere hier unsichtbar. */
	.stm-materials,
	.stm-account {
		--stm-depth-outline: #274a52;
		--stm-depth-shadow: 7px 7px 0 rgba(0, 0, 0, 0.55);
		--stm-depth-shadow-hover: 11px 11px 0 rgba(0, 0, 0, 0.55);
	}

	/* Karten und Kacheln: statt #fff die Kartenflaeche. */
	.stm-material-card,
	.stm-account-card,
	.stm-account-intro,
	.stm-empty,
	.stm-login-required {
		color: #dbe9eb;
		background: #11282e;
	}

	/* Sekundaertext: #53606f traegt auf dunklem Grund nicht. */
	.stm-material-filters span,
	.stm-material-meta,
	.stm-account-trust-links,
	.stm-account .description {
		color: #a8c4c9;
	}

	/* Eingabefelder: hellere Feldkante gegen die dunkle Flaeche. */
	.stm-material-filters input,
	.stm-material-filters select,
	.stm-account-card input[type="text"],
	.stm-account-card input[type="email"],
	.stm-account-card input[type="password"] {
		color: #dbe9eb;
		background: #11282e;
		border: 1px solid #6f8f97;
	}

	.stm-material-filters input:focus,
	.stm-material-filters select:focus,
	.stm-material-filters input:focus-visible,
	.stm-material-filters select:focus-visible,
	.stm-account-card input:focus,
	.stm-account-card input:focus-visible {
		border-color: #72aee6;
	}

	/* Fokusumriss: #005fcc verschwindet auf #0b1c21, der Akzentton traegt. */
	.stm-materials a:focus-visible,
	.stm-materials button:focus-visible,
	.stm-materials input:focus-visible,
	.stm-materials select:focus-visible,
	.stm-materials textarea:focus-visible,
	.stm-account a:focus-visible,
	.stm-account button:focus-visible,
	.stm-account input:focus-visible,
	.stm-account select:focus-visible,
	.stm-account textarea:focus-visible,
	.stm-button:focus-visible,
	.stm-download-button:focus-visible {
		outline-color: #72aee6;
	}

	/* Angehobene Karte: der Akzentrahmen wird zum hellen #72aee6. */
	.stm-material-card:focus-within,
	.stm-account-card:focus-within {
		border-color: #72aee6;
	}

	.stm-material-card:focus-within h4,
	.stm-material-card:focus-within h4 a {
		color: #72aee6;
	}

	@supports selector(:has(:focus-visible)) {
		.stm-material-card:focus-within,
		.stm-account-card:focus-within {
			border-color: var(--stm-depth-outline);
		}

		.stm-material-card:has(:focus-visible),
		.stm-account-card:has(:focus-visible) {
			border-color: #72aee6;
		}
	}

	/* Dateisymbol: statt #f6f7f7 / #c3c4c7 / #dcdcde die dunklen Gegenstuecke. */
	.stm-file-icon {
		color: #dbe9eb;
		background: #16343b;
		border-color: #274a52;
	}

	.stm-file-icon::before {
		border-top-color: #274a52;
	}

	/* Das Abzeichen "neu" nimmt das Erfolgspaar des dunklen Designs. */
	.stm-new-badge {
		color: #7ddba8;
		background: #12301f;
	}

	/* Der versetzte Schatten der Schaltflaechen wird ebenfalls dunkler. */
	.stm-download-button,
	.stm-button,
	.stm-account-actions .button {
		box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
	}

	.stm-download-button:focus-visible,
	.stm-button:focus-visible,
	.stm-account-actions .button:focus-visible {
		box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.55);
	}

	/* Die Schaltflaechenflaeche #2271b1 traegt weisse Schrift mit 5,2:1 - sie bleibt. */
	.stm-button {
		color: #72aee6;
		background: #11282e;
		border-color: #6f8f97;
	}

	.stm-button:hover,
	.stm-button:active {
		color: #dbe9eb;
		background: #16343b;
		border-color: #72aee6;
	}

	/* Statusfarben des Themes, damit Plugin und Theme zusammenpassen. */
	.stm-account-notice {
		color: #dbe9eb;
		background: #16343b;
		border-color: #6f8f97;
	}

	.stm-account-notice-success {
		color: #7ddba8;
		background: #12301f;
		border-color: #7ddba8;
	}

	.stm-account-notice-error {
		color: #ff9b9b;
		background: #3a1a1a;
		border-color: #ff9b9b;
	}

	.stm-account-notice-warning {
		color: #f0c674;
		background: #33280f;
		border-color: #f0c674;
	}
}

/* Auf schmalen Displays bleibt die Ebene auch im dunklen Design flacher. */
@media (prefers-color-scheme: dark) and (max-width: 700px) {
	.stm-materials,
	.stm-account {
		--stm-depth-shadow: 5px 5px 0 rgba(0, 0, 0, 0.55);
		--stm-depth-shadow-hover: 7px 7px 0 rgba(0, 0, 0, 0.55);
	}
}

/* Im dunklen Design folgt der Mauszeiger denselben Flaechen wie die Tastatur. */
@media (prefers-color-scheme: dark) and (hover: hover) {
	.stm-material-card:hover,
	.stm-account-card:hover {
		border-color: #72aee6;
	}

	.stm-material-card:hover h4,
	.stm-material-card:hover h4 a {
		color: #72aee6;
	}

	.stm-download-button:hover,
	.stm-button:hover,
	.stm-account-actions .button:hover {
		box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.55);
	}
}

/* Rueckfallebene fuer Browser ohne :focus-visible: dort hebt :focus an.
   Den Fokusumriss selbst setzt die Basis. */
@supports not selector(:focus-visible) {
	.stm-download-button:focus,
	.stm-button:focus,
	.stm-account-actions .button:focus {
		box-shadow: 5px 5px 0 rgba(29, 35, 39, 0.24);
		transform: translate(-1px, -1px);
	}
}