.mb-accessibility__trigger {
	box-sizing: border-box;
	display: inline-flex;
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	align-items: center;
	justify-content: center;
	margin: 0 0 0 12px !important;
	padding: 7px;
	border: 1px solid #005695;
	border-radius: 7px;
	background: #fff;
	color: #005695;
	cursor: pointer;
}

.mb-accessibility__trigger img {
	display: block;
	width: 35px;
	height: 35px;
	object-fit: contain;
}

body .mb-accessibility__trigger:is(:hover, :focus-visible) {
	background: #005695;
	color: #fff !important;
}

/* Das als Bild geladene SVG uebernimmt die Textfarbe des Buttons nicht. */
.mb-accessibility__trigger:is(:hover, :focus-visible) img {
	filter: brightness(0) invert(1);
}

.mb-accessibility__trigger[hidden],
.mb-accessibility[hidden] {
	display: none !important;
}

.mb-accessibility {
	position: fixed;
	z-index: 100001;
	inset: 0;
	margin: 0;
	color: #111;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
}

.mb-accessibility *,
.mb-accessibility *::before,
.mb-accessibility *::after {
	box-sizing: border-box;
}

.mb-accessibility__backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(0, 0, 0, 0.45);
	cursor: default;
}

.mb-accessibility__panel {
	position: absolute;
	top: 0;
	right: 0;
	width: min(420px, 100%);
	height: 100%;
	margin: 0;
	padding: 72px 32px 32px;
	overflow-y: auto;
	background: #fff;
	color: #111;
	box-shadow: -8px 0 28px rgba(0, 0, 0, 0.2);
	animation: mb-accessibility-enter 220ms ease-out;
}

.mb-accessibility__panel h2 {
	margin: 0 0 30px;
	color: inherit;
	font-size: 1.5rem;
}

.mb-accessibility__panel p {
	margin: 0 0 12px;
	color: inherit;
	font-weight: 600;
}

.mb-accessibility__close {
	position: absolute;
	top: 20px;
	right: 24px;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.mb-accessibility__close::before,
.mb-accessibility__close::after {
	position: absolute;
	top: 19px;
	left: 3px;
	width: 34px;
	height: 2px;
	background: currentColor;
	content: "";
}

.mb-accessibility__close::before {
	transform: rotate(45deg);
}

.mb-accessibility__close::after {
	transform: rotate(-45deg);
}

.mb-accessibility__darkmode {
	width: 100%;
	min-height: 48px;
	padding: 10px 16px;
	border: 1px solid #005695;
	border-radius: 7px;
	background: #fff;
	color: #005695;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.mb-accessibility__darkmode:hover,
.mb-accessibility__darkmode:focus-visible {
	background: #005695;
	color: #fff;
}

.mb-accessibility-open {
	overflow: hidden;
}

@keyframes mb-accessibility-enter {
	from {
		transform: translateX(100%);
	}
	to {
		transform: translateX(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mb-accessibility__panel {
		animation: none;
	}
}

:root.mb-accessibility-dark {
	color-scheme: dark;
}

:root.mb-accessibility-dark body {
	background-color: #292929 !important;
	color: #fff !important;
}

:root.mb-accessibility-dark body :where(
	header,
	main,
	footer,
	article,
	.wp-site-blocks,
	.wp-block-group,
	.wp-block-column,
	.wp-block-columns,
	.wp-block-cover,
	.wp-block-media-text,
	.wp-block-query,
	.wp-block-post,
	.wp-block-post-template,
	.wp-block-table,
	.wp-block-search
) {
	background-color: #303030 !important;
	color: #fff !important;
}

:root.mb-accessibility-dark body :where(
	h1, h2, h3, h4, h5, h6, p, li, span, strong, em, small, label,
	figcaption, blockquote, dt, dd, th, td, .wp-block-post-title,
	.wp-block-navigation-item__content
) {
	color: #fff !important;
}

:root.mb-accessibility-dark body :where(a, button, input, select, textarea) {
	color: #fff !important;
	border-color: #888 !important;
}

:root.mb-accessibility-dark body a:hover {
	color: #d3eaff !important;
}

:root.mb-accessibility-dark body input,
:root.mb-accessibility-dark body textarea,
:root.mb-accessibility-dark body select {
	background-color: #383838 !important;
}

:root.mb-accessibility-dark body .wp-block-search__button,
:root.mb-accessibility-dark body .wp-block-navigation__container > .wp-block-navigation-item:first-child > .wp-block-navigation-item__content {
	background-color: #005695 !important;
}

:root.mb-accessibility-dark body .mb-accessibility__panel {
	background-color: #303030 !important;
	color: #fff !important;
}

:root.mb-accessibility-dark body .mb-accessibility__darkmode {
	background-color: #303030 !important;
	color: #fff !important;
}

:root.mb-accessibility-dark body .mb-accessibility__darkmode:hover,
:root.mb-accessibility-dark body .mb-accessibility__darkmode:focus-visible {
	background-color: #005695 !important;
}

/* Eigene Komponenten haben helle Flaechen ausserhalb der WordPress-Bloecke. */
:root.mb-accessibility-dark body :is(
	.mb-slider__panel,
	.mb-cards,
	.mb-cards__card,
	.mb-contact-card,
	.mb-floating-navigation,
	.mb-burger-menu__panel,
	.mb-burger-menu__section-link,
	.mb-burger-menu__back,
	.mb-burger-menu__level-title,
	.mb-footer-legal__popup,
	.mb-footer-legal__button,
	.wp-block-navigation__submenu-container,
	.wp-block-navigation__responsive-container.is-menu-open
) {
	background-color: #303030 !important;
	color: #fff !important;
}

/* Nur die abgerundete Karte faerben, nicht den aeusseren Slide-Artikel. */
:root.mb-accessibility-dark body .mb-slider__slide {
	background-color: transparent !important;
}

/* Die schwebende Navigation zeichnet ihre Flaechen mit Pseudoelementen. */
:root.mb-accessibility-dark body .mb-floating-navigation .wp-block-navigation-item__content::before {
	background-color: #303030;
}

:root.mb-accessibility-dark body .mb-floating-navigation .wp-block-navigation-item__content:hover::before,
:root.mb-accessibility-dark body .mb-floating-navigation .mb-floating-navigation__active > .wp-block-navigation-item__content::before {
	background-color: #005695;
}

:root.mb-accessibility-dark body :is(
	.mb-slider__button,
	.mb-cards__button,
	.button-michaelsbund,
	.wp-block-button__link,
	.mb-burger-menu__trigger,
	.mb-accessibility__trigger
) {
	background-color: #383838 !important;
	color: #fff !important;
	border-color: #aaa !important;
}

:root.mb-accessibility-dark body :is(
	.mb-slider__button,
	.mb-cards__button,
	.button-michaelsbund,
	.wp-block-button__link,
	.mb-burger-menu__trigger,
	.mb-accessibility__trigger,
	.mb-burger-menu__section-link,
	.mb-burger-menu__back,
	.mb-burger-menu__next,
	.mb-footer-legal__button
):is(:hover, :focus-visible),
:root.mb-accessibility-dark body .mb-burger-menu__section-link--active {
	background-color: #005695 !important;
	color: #fff !important;
}

:root.mb-accessibility-dark body .mb-accessibility__trigger img {
	filter: brightness(0) invert(1);
}

:root.mb-accessibility-dark body input::placeholder {
	color: #ccc !important;
	opacity: 1;
}

:root.mb-accessibility-dark body :is(.mb-slider__control, .mb-back-to-top) {
	opacity: 1;
}

:root.mb-accessibility-dark body .mb-slider__controls .mb-slider__control {
	background-color: #383838 !important;
	border: 1px solid #fff !important;
	color: #fff !important;
}

:root.mb-accessibility-dark body .mb-slider__dot {
	border-color: #fff !important;
}

:root.mb-accessibility-dark body .mb-slider__dot[aria-current="true"] {
	background-color: #fff;
}

/* Radio-Programm: eigene Flaechen und Statusfarben an den Darkmode anpassen. */
:root.mb-accessibility-dark body .mb-radio-program {
	background-color: #303030 !important;
	color: #fff !important;
	border: solid 1px #ddd !important;
}

:root.mb-accessibility-dark body .mb-radio-program__card {
	background-color: #383838 !important;
	color: #fff !important;
}

:root.mb-accessibility-dark body .mb-radio-program__image {
	background-color: #454545 !important;
}

:root.mb-accessibility-dark body .mb-radio-program__time {
	border-color: #777 !important;
}

:root.mb-accessibility-dark body .mb-radio-program__card.is-current {
	border-color: #a6d5ff !important;
}

:root.mb-accessibility-dark body .mb-radio-program__progress {
	background-color: #666 !important;
}

:root.mb-accessibility-dark body .mb-radio-program__progress span {
	background-color: #a6d5ff !important;
}

:root.mb-accessibility-dark body .mb-radio-program__title a {
	color: #a6d5ff !important;
}

:root.mb-accessibility-dark body .mb-radio-program__title a:is(:hover, :focus-visible) {
	color: #fff !important;
}

:root.mb-accessibility-dark body .mb-radio-program__controls button,
:root.mb-accessibility-dark body .mb-radio-program__remaining {
	background-color: #005695 !important;
	color: #fff !important;
}

:root.mb-accessibility-dark body .mb-radio-program__controls button:is(:hover, :focus-visible) {
	background-color: #006db3 !important;
}

:root.mb-accessibility-dark body .mb-radio-program :is(a, button):focus-visible {
	outline: 3px solid #f2a900;
	outline-offset: 3px;
}

@media (max-width: 600px) {
	.mb-accessibility__trigger {
		width: 40px;
		height: 40px;
		flex-basis: 40px;
		margin-left: 8px !important;
	}

	.mb-accessibility__trigger img {
		width: 26px;
		height: 26px;
	}

	.mb-accessibility__panel {
		padding-right: 24px;
		padding-left: 24px;
	}
}

/* Auch breite Inhalte duerfen den rechten Innenrand nicht verdraengen. */
.mb-accessibility__panel { box-sizing: border-box; min-width: 0; overflow-wrap: anywhere; }
.mb-accessibility__panel > * { min-width: 0; max-width: 100%; }
.mb-accessibility__panel :is(button, input, select, textarea) { box-sizing: border-box; max-width: 100%; }
