/* Accessibility (iuno/accessibility + -button + -modal) – Frontend-Chrome der
   Bedienleiste, aus blocks.css hierher ausgelagert. Die eng gekoppelten Regeln der
   drei Blöcke liegen bewusst zusammen im Container-Block. Die .is-dark-mode/
   .no-transitions/.has-…-reading-mask-Selektoren stylen nur das An/Aus-Bild der
   Switches; die seitenweiten Effekte selbst liegen in frontend.css. */

.wp-block-iuno-accessibility												{	padding: 1rem 1rem 0.25rem 1rem; }
@media (min-width: calc(992px + 2rem)) {
	.wp-block-iuno-accessibility											{	padding: 1rem calc((100vw - 992px) / 2) 0.25rem calc((100vw - 992px) / 2); }
}
.is-style-iuno-accessibility-section										{	padding-top: 1rem; padding-bottom: 0.25rem; }
.iuno-accessibility-modal													{	display: inline-flex; flex-flow: row nowrap; }
.iuno-accessibility-modal svg												{	width: calc(1rem - 2px); height: calc(1rem - 2px); margin: 0 0 0 0.25rem; fill: var(--iuno-black); }

/* Masse des An/Aus-Schalters an einer Stelle: die Kontrast-Zeile hat keinen Schalter
   und rueckt ihre Beschriftung um dessen Aussenbreite (Breite + beide Randstaerken,
   die Pille ist content-box) plus Abstand ein, damit alle Beschriftungen der
   Bedienleiste auf einer Fluchtlinie stehen. */
.wp-block-iuno-accessibility-button							{	--iuno-schalter-breite: 2rem; --iuno-schalter-rand: 1px; --iuno-schalter-abstand: 1rem; }
.wp-block-iuno-accessibility-button[class*="iuno-access-control-"] 			{	display: inline-flex; flex-flow: row nowrap; }
.wp-block-iuno-accessibility-button.iuno-button								{	position: relative; color: inherit; background-color: transparent; z-index: +2;
																				height: 1.5rem; margin: 0; padding: 0 !important; cursor: pointer; border: 0 !important;
																				display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; column-gap: 0.5rem;
																				font-size: 0.75rem; font-weight: 500; line-height: 1.5rem; text-transform: uppercase; }
																				
																				
																				
																				
.wp-block-iuno-accessibility-button.iuno-switch								{	position: relative; color: inherit; background-color: transparent;
																				height: 1.5rem; margin: 0; padding: 0 !important; cursor: pointer; border: 0 !important;
																				display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; column-gap: var(--iuno-schalter-abstand);
																				font-size: 0.75rem; font-weight: 500; line-height: 1.5rem; text-transform: uppercase; }
.wp-block-iuno-accessibility-button.iuno-switch span 						{	position: relative; width: var(--iuno-schalter-breite); height: calc(0.75rem - 2px); margin: 0 0 0 .25rem; vertical-align: top; cursor: pointer;
																				border-radius: 2rem; transition: background-position .15s ease-in-out;
																				background-color: var(--iuno-white); background-position: left center; background-repeat: no-repeat; background-size: contain; border: 1px solid var(--iuno-black);
																				background-image: var(--icon-switch-off); }
.wp-block-iuno-accessibility-button.iuno-switch span::before,
.wp-block-iuno-accessibility-button.iuno-switch span::after					{	position: absolute; top: 0; transition: opacity .15s ease-in-out;
																				font-size: 0.5rem; line-height: 0.7rem; text-transform: uppercase; color: var(--iuno-black); }

.iuno-access-control-animations.iuno-switch span,
.iuno-access-control-transparency.iuno-switch span							{	background-color: var(--iuno-white); background-position: right center; background-repeat: no-repeat; background-size: contain; border: 1px solid var(--iuno-black);
																				background-image: var(--icon-switch-on); }

.is-dark-mode .iuno-access-control-dark-mode.iuno-switch span				{	background-position: right center; background-image: var(--icon-switch-on); }
.iuno-access-control-dark-mode.iuno-switch span::before						{	opacity: 0; content: var(--description-on); left: 0.25rem; }
.is-dark-mode .iuno-access-control-dark-mode.iuno-switch span::before		{	opacity: 1; }
.iuno-access-control-dark-mode.iuno-switch span::after						{	opacity: 1; content: var(--description-off); right: 0.2rem; }
.is-dark-mode .iuno-access-control-dark-mode.iuno-switch span::after		{	opacity: 0; }

.no-transitions .iuno-access-control-animations.iuno-switch span			{	background-position: left center; background-image: var(--icon-switch-off); }
.iuno-access-control-animations.iuno-switch span::before					{	opacity: 0; content: var(--description-off); right: 0.2rem; }
.no-transitions .iuno-access-control-animations.iuno-switch span::before	{	opacity: 1; }
.iuno-access-control-animations.iuno-switch span::after						{	opacity: 1; content: var(--description-on); left: 0.25rem; }
.no-transitions .iuno-access-control-animations.iuno-switch span::after		{	opacity: 0; }

.no-transparency .iuno-access-control-transparency.iuno-switch span			{	background-position: left center; background-image: var(--icon-switch-off); }
.iuno-access-control-transparency.iuno-switch span::before					{	opacity: 0; content: var(--description-off); right: 0.2rem; }
.no-transparency .iuno-access-control-transparency.iuno-switch span::before {	opacity: 1; }
.iuno-access-control-transparency.iuno-switch span::after					{	opacity: 1; content: var(--description-on); left: 0.25rem; }
.no-transparency .iuno-access-control-transparency.iuno-switch span::after	{	opacity: 0; }

.is-max-contrast .iuno-access-control-max-contrast.iuno-switch span			{	background-position: right center; background-image: var(--icon-switch-on); }
.iuno-access-control-max-contrast.iuno-switch span::before					{	opacity: 0; content: var(--description-on); left: 0.25rem; }
.is-max-contrast .iuno-access-control-max-contrast.iuno-switch span::before	{	opacity: 1; }
.iuno-access-control-max-contrast.iuno-switch span::after					{	opacity: 1; content: var(--description-off); right: 0.2rem; }
.is-max-contrast .iuno-access-control-max-contrast.iuno-switch span::after	{	opacity: 0; }

.has-iuno-access-reading-mask .iuno-access-control-reading-mask.iuno-switch span		{	background-position: right center; background-image: var(--icon-switch-on); }
.iuno-access-control-reading-mask.iuno-switch span::before								{	opacity: 0; content: var(--description-on); left: 0.2rem; }
.has-iuno-access-reading-mask .iuno-access-control-reading-mask.iuno-switch span::before{	opacity: 1; }
.iuno-access-control-reading-mask.iuno-switch span::after								{	opacity: 1; content: var(--description-off); right: 0.2rem; }
.has-iuno-access-reading-mask .iuno-access-control-reading-mask.iuno-switch span::after	{	opacity: 0; }

/* Kontrast-Zeile — Variante 'contrast' von iuno/accessibility-button:
   Beschriftung · − · Prozentwert · +. Ersetzt die beiden frueheren Einzel-Buttons
   „Kontrast +“ / „Kontrast −“.
   Hier steht nur Anordnung, keine Gestaltung der beiden Knoepfe — die kommt mit dem
   Neuentwurf der Buttondarstellung. Der Prozentwert bekommt eine feste Mindestbreite
   und Tabellenziffern, damit die Zeile beim Wechsel 100% → 90% nicht springt. Die
   Beschriftung haelt Abstand wie Schalter und Beschriftung in den Zeilen darueber.
   grid-column: 1 / -1 — im Modal stehen die Schalter in einem Grid; ohne die volle
   Breite bricht „Kon-trast“ um. Ausserhalb eines Grids ist die Angabe wirkungslos.
   flex-wrap braucht den doppelten Klassen-Selektor (0,2,0): die Sammelregel oben
   setzt flex-flow: row nowrap. Ohne Umbrechen laeuft die Zeile auf schmalen Schirmen
   ueber und der Modal-Body bekommt eine Querscroll-Leiste. */
.wp-block-iuno-accessibility-button.iuno-access-control-contrast			{	align-items: center; column-gap: 0.5rem; row-gap: 0.5rem;
																flex-wrap: wrap; grid-column: 1 / -1; }
.iuno-access-control-contrast__label,
.iuno-access-control-contrast__value						{	font-size: 0.75rem; font-weight: 500; line-height: 1.5rem; text-transform: uppercase; color: inherit; }
.iuno-access-control-contrast__label						{	white-space: nowrap; margin-left: calc(var(--iuno-schalter-breite) + 2 * var(--iuno-schalter-rand) + var(--iuno-schalter-abstand) - 0.5rem); }
.iuno-access-control-contrast__value						{	min-width: 2.5rem; text-align: center; font-variant-numeric: tabular-nums; }

/* Der Backdrop des Barrierefreiheits-Modals bleibt durchsichtig: dort stellt man
   Kontrast, Dunkelmodus und Transparenz ein und muss die Wirkung auf der Seite
   dahinter sehen. Nur die Deckkraft faellt weg, das Element bleibt — es faengt
   weiterhin den Klick daneben ab und haelt die Seite gesperrt. Die Klasse setzt
   frontend.js am Backdrop selbst.
   Das !important ist noetig, nicht kosmetisch: frontend.css setzt fuer „Maximaler
   Kontrast“ und „Transparenz aus“ pauschal html.is-max-contrast * { opacity: 1
   !important }. Der doppelte Klassen-Selektor (0,2,0) schlaegt dessen (0,1,1). */
.modal-backdrop.modal-backdrop--durchsichtig						{	opacity: 0 !important; }

/* Fusszeile: die beiden Knoepfe stehen per justify-content: space-between an den
   Enden (frontend.css). gap ist dabei der Mindestabstand — wird die Zeile zu schmal,
   greift flex-wrap und der zweite Knopf rutscht unter den ersten. */
.wp-block-iuno-accessibility-modal > .modal-footer					{	flex-wrap: wrap; gap: 0.5rem; }
.wp-block-iuno-accessibility .iuno-access-control-reset						{	display: inline-block; padding: 0.5rem 1rem; font-weight: 700; border-radius: 0; text-decoration: none; white-space: nowrap; margin: 0; border: 0; }

/* Knoepfe im Fenster wie die Steuerknoepfe des Buchungskalenders
   (.iuno-buchung__steuer in blocks/buchung/style.css): ohne Rahmen und Flaeche,
   rund, beim Hover leicht in der Akzentfarbe. Die beiden Textknoepfe der
   Fusszeile sind Pillen derselben Hoehe, beschriftet wie die Schalter. Minus und
   Plus etwas kleiner, damit die Kontrast-Zeile nicht hoeher wird als noetig. */
.wp-block-iuno-accessibility-modal .btn-close,
.wp-block-iuno-accessibility-modal .modal-footer button,
.iuno-access-control-contrast > button										{	display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
																				box-sizing: border-box; width: 2.5rem; height: 2.5rem; margin: 0; padding: 0;
																				border: 0; border-radius: 1.25rem; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.wp-block-iuno-accessibility-modal .modal-footer button						{	width: auto; padding: 0 1rem; white-space: nowrap;
																				font-size: 0.75rem; font-weight: 500; line-height: 1.5rem; text-transform: uppercase; }
.iuno-access-control-contrast > button										{	width: 2rem; height: 2rem; }
.wp-block-iuno-accessibility-modal .btn-close svg,
.iuno-access-control-contrast > button svg									{	width: 1.25rem; height: 1.25rem; }
.wp-block-iuno-accessibility-modal .btn-close:hover,
.wp-block-iuno-accessibility-modal .modal-footer button:hover,
.iuno-access-control-contrast > button:hover								{	background: color-mix(in srgb, var(--iuno-accent) 18%, transparent); }
.wp-block-iuno-accessibility-modal .btn-close:focus-visible,
.wp-block-iuno-accessibility-modal .modal-footer button:focus-visible,
.iuno-access-control-contrast > button:focus-visible						{	outline: 2px solid currentColor; outline-offset: -3px; }

nav.wp-block-iuno-accessibility												{	display: flex; flex-wrap: wrap; column-gap: 1rem; justify-content: end; }
nav.wp-block-iuno-accessibility ul											{	list-style: none outside none; display: inline; padding: 0; margin: 0; }
nav.wp-block-iuno-accessibility ul, nav.wp-block-iuno-accessibility button	{	flex: 0 0 auto; width: auto; }
nav.wp-block-iuno-accessibility a											{	display: block; font-size: 0.75rem; font-weight: 500; line-height: 1.5rem; text-transform: uppercase; text-decoration: none; }
nav.wp-block-iuno-accessibility button.iuno-accessibility-modal::after		{	content: ""; display: block; width: 0.9rem; height: 0.9rem; margin: 0; speak: never; background-color: currentColor;
																				-webkit-mask-image: var(--icon-accessibility); mask-image: var(--icon-accessibility);
																				-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
nav.wp-block-iuno-accessibility button.iuno-access-control-dark-mode 		{	display: none; }
@media (min-width: 170px) {
	nav.wp-block-iuno-accessibility button.iuno-access-control-dark-mode 	{	display: flex; }
}


.has-toffee-color .wp-block-iuno-accessibility-button path						{	fill: var(--iuno-toffee) }
.has-toffee-color .wp-block-iuno-accessibility-button span						{	border-color: var(--iuno-toffee) }