/* Gemeinsame technische Barrierefreiheit fuer alle Frontend-Themes. */
.contrast-toggle {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 12000;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 9px 13px;
	border: 2px solid #111;
	border-radius: 999px;
	background: #fff;
	color: #111;
	font: 700 14px/1 system-ui, sans-serif;
	box-shadow: 0 3px 16px rgba(0, 0, 0, .18);
	cursor: pointer;
}

.contrast-toggle__icon {
	display: block;
	width: 20px;
	height: 20px;
	border: 2px solid currentColor;
	border-radius: 50%;
	background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}

.contrast-toggle:hover { transform: translateY(-1px); }
.contrast-toggle[aria-pressed="true"] {
	border-color: #000;
	background: #ffed00;
	color: #000;
}

.skip-link {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 20000;
	max-width: calc(100vw - 20px);
	padding: 11px 16px;
	border: 2px solid #fff;
	border-radius: 8px;
	background: #111;
	color: #fff !important;
	font: 700 16px/1.25 system-ui, sans-serif;
	text-decoration: none;
	box-shadow: 0 0 0 3px #111;
	transform: translateY(-180%);
	transition: transform .16s ease;
}

.skip-link:focus { transform: translateY(0); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 3px solid #1677c8 !important;
	outline-offset: 3px !important;
}

:where(input, textarea, select)[aria-invalid="true"] {
	border-color: #b42318 !important;
	box-shadow: 0 0 0 3px rgba(180, 35, 24, .14) !important;
}

.contactform-error,
.contactform-error-summary,
.contactform_error_message {
	color: #9f1c13;
	font-weight: 650;
}

.contactform-error-summary {
	margin: 0 0 18px;
	padding: 12px 14px;
	border-left: 4px solid #b42318;
	background: #fff4f2;
}

.contactform-v2 fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.contactform-v2 legend {
	margin-bottom: 7px;
	padding: 0;
	font-weight: 600;
}

.hero-slider__pause,
.media-gallery__pause {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255,255,255,.62);
	border-radius: 50%;
	background: rgba(20,31,37,.58);
	color: #fff;
	font: 700 14px/1 system-ui, sans-serif;
	cursor: pointer;
	backdrop-filter: blur(6px);
}

.hero-slider__pause {
	position: absolute;
	right: 64px;
	bottom: 18px;
	z-index: 6;
}

.media-gallery__pause {
	position: absolute;
	right: 12px;
	top: 12px;
	z-index: 6;
	pointer-events: auto;
}

@media (max-width: 700px) {
	.hero-slider__pause { right: 18px; bottom: 15px; }
	.contrast-toggle {
		left: 10px;
		bottom: 10px;
		width: 44px;
		padding: 0;
		justify-content: center;
	}
	.contrast-toggle__text {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.skip-link { transition: none; }
	.contrast-toggle:hover { transform: none; }
}

/* Bewusst theme-unabhaengig: Der Kontrastmodus ueberstimmt rein dekorative Farben. */
html[data-high-contrast] {
	color-scheme: light;
}

html[data-high-contrast] body,
html[data-high-contrast] #outer,
html[data-high-contrast] #page,
html[data-high-contrast] #container,
html[data-high-contrast] #main,
html[data-high-contrast] .site-shell,
html[data-high-contrast] .site-page,
html[data-high-contrast] .site-container,
html[data-high-contrast] .site-main,
html[data-high-contrast] .site-header,
html[data-high-contrast] header,
html[data-high-contrast] footer,
html[data-high-contrast] #footer {
	background-color: #fff !important;
	color: #000 !important;
}

html[data-high-contrast] :where(
	p, li, dt, dd, address, blockquote, figcaption,
	h1, h2, h3, h4, h5, h6, label, legend, th, td
) {
	color: #000 !important;
	text-shadow: none !important;
}

html[data-high-contrast] a:not(.skip-link):not(.contrast-toggle) {
	color: #003f9e !important;
	text-decoration: underline !important;
	text-decoration-thickness: .12em !important;
	text-underline-offset: .16em;
}

html[data-high-contrast] :where(input, textarea, select) {
	border: 2px solid #000 !important;
	background: #fff !important;
	color: #000 !important;
	box-shadow: none !important;
}

html[data-high-contrast] :where(input, textarea)::placeholder {
	color: #3a3a3a !important;
	opacity: 1;
}

html[data-high-contrast] :where(button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"]):not(.contrast-toggle) {
	border: 2px solid #000 !important;
	background-color: #000 !important;
	background-image: none !important;
	color: #fff !important;
	box-shadow: none !important;
}

html[data-high-contrast] :where(.site-navigation, #nav, .footernav, .mobile-account-nav, .cookie-consent-box) {
	background-color: #fff !important;
	color: #000 !important;
}

html[data-high-contrast] :where(.cms-grid, .cms-grid-columns, .cms-grid-column, .cms-content-element) {
	background-color: #fff !important;
	background-image: none !important;
	color: #000 !important;
}

html[data-high-contrast] .cms-grid::before,
html[data-high-contrast] .cms-grid::after {
	display: none !important;
}

html[data-high-contrast] :where(.hero-slider__content, .banner-text, .caption, .galerie-caption) {
	background: rgba(0, 0, 0, .9) !important;
	color: #fff !important;
	text-shadow: none !important;
}

html[data-high-contrast] :where(.hero-slider__content, .banner-text, .caption, .galerie-caption) :where(h1, h2, h3, h4, h5, h6, p, a, span) {
	color: #fff !important;
}

html[data-high-contrast] :where(hr, table, th, td, fieldset) {
	border-color: #000 !important;
}

html[data-high-contrast] :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 4px solid #ffed00 !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 6px #000 !important;
}

@media (forced-colors: active) {
	.contrast-toggle {
		forced-color-adjust: auto;
		border: 2px solid ButtonText;
	}
}