/**
 * Sitewide Barrierefreiheits-Toolbar (Schriftgroesse + Kontrastmodus).
 *
 * Uebernommen aus der Startseiten-Vorlage (assets/startseite.css, Abschnitt
 * "Accessibility bar"), aber bewusst in eine eigene, sitewide geladene Datei
 * ausgelagert (siehe functions.php, Hook education_zone_pro_before_header),
 * damit die Toolbar auf JEDER Seite erscheint, nicht nur auf der Startseite.
 *
 * Farben sind bewusst als feste Hex-Werte statt CSS-Variablen eingetragen
 * (--green-950/--rust-600 aus startseite.css), damit diese Datei unabhaengig
 * von der Startseiten-Vorlage funktioniert und auch dann korrekt aussieht,
 * wenn startseite.css auf einer normalen Unterseite gar nicht geladen ist.
 */
.thr-a11y-bar {
	background: #2b3111; /* == --green-950 */
	color: #fff;
	font-size: 0.82rem;
	position: relative;
	z-index: 1000;
}
.thr-a11y-row {
	max-width: 1180px;
	margin: 0 auto;
	padding: 8px 24px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 18px;
}
.thr-a11y-group {
	display: flex;
	align-items: center;
	gap: 6px;
}
.thr-a11y-label {
	color: rgba(255, 255, 255, 0.65);
	margin-right: 2px;
}
.thr-a11y-btn {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 8px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	font-weight: 700;
	font-size: 0.85rem;
	font-family: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
}
.thr-a11y-btn:hover {
	background: rgba(255, 255, 255, 0.24);
}
.thr-a11y-btn[aria-pressed="true"] {
	background: #a4522f; /* == --rust-600 */
	border-color: #a4522f;
}
.thr-a11y-contrast-btn {
	width: auto;
	padding: 0 12px;
}
/* .thr-a11y-link-btn: der "Leichte Sprache"-Link in der Toolbar ist ein <a>-Tag
   statt <button> (echte Navigation zu einer eigenen Seite, kein JS-Toggle) -
   braucht deshalb explizit text-decoration:none, da Links sonst standardmaessig
   unterstrichen waeren; alle anderen .thr-a11y-btn-Eigenschaften (Farbe, Rahmen,
   Hover) gelten bereits automatisch mit, da dieselbe Klasse verwendet wird. */
.thr-a11y-link-btn {
	text-decoration: none;
}
@media (max-width: 640px) {
	.thr-a11y-row {
		justify-content: center;
		flex-wrap: wrap;
	}
}

/**
 * Kontrastmodus, sitewide.
 *
 * Anders als im urspruenglichen Homepage-Mockup (das nur eigene CSS-Variablen
 * wie --bg/--ink umdefiniert hat, die AUSSERHALB der Startseite gar nicht
 * verwendet werden) braucht es fuer echte sitewide-Wirkung generische,
 * breite Selektoren: erzwingt schwarzen Text auf weissem Grund und
 * unterstrichene Links ueberall im Hauptinhalt, unabhaengig vom Theme.
 * Bewusst NICHT auf Bilder/SVG/Icons angewendet (koennte deren eigene
 * Gestaltung/Lesbarkeit verschlechtern), nur auf Text- und Formularelemente.
 */
html.thr-contrast body {
	background: #ffffff !important;
	color: #000000 !important;
}
html.thr-contrast p,
html.thr-contrast li,
html.thr-contrast span,
html.thr-contrast label,
html.thr-contrast td,
html.thr-contrast th,
html.thr-contrast h1,
html.thr-contrast h2,
html.thr-contrast h3,
html.thr-contrast h4,
html.thr-contrast h5,
html.thr-contrast h6 {
	color: #000000 !important;
}
html.thr-contrast a {
	color: #000000 !important;
	text-decoration: underline !important;
}
html.thr-contrast input,
html.thr-contrast textarea,
html.thr-contrast select {
	border: 2px solid #000000 !important;
}
html.thr-contrast :focus-visible {
	outline: 3px solid #a4522f !important;
	outline-offset: 3px !important;
}