/* ==========================================================================
   Accessibility
   Implementation of deficiencies from the "Accessibility Audit Report" dated 06.08.2026
   (Testing Center for Accessible IT Schleswig-Holstein / DIAS GmbH),
   Audit according to BITV 2.0 and EN 301 549 v3.2.1.

   Covered in this file:
     Priority 1 - 9.2.4.7 Focus visible
     Priority 2 - 9.2.1.1 Keyboard (making focused content visible)
                   9.1.4.13 Displayed content on hover or focus

   This file is loaded after style.css (see functions.php) and
   intentionally overrides its rules.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1) 9.2.4.7 - Focus indicator
   --------------------------------------------------------------------------
   Two-tone ring: white on the inside, dark blue on the outside. This ensures
   that the indicator meets the required 3.0:1 contrast on both light and dark
   backgrounds (the website uses e.g. #FFFFFF, #EDEDED, #003E59, #2382C3).
   -------------------------------------------------------------------------- */

:root {
	--a11y-focus-inner: #FFFFFF;
	--a11y-focus-outer: #003E59;
	--a11y-focus-width: 3px;
	--a11y-focus-ring: 6px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[contenteditable]:focus-visible {
	outline: var(--a11y-focus-width) solid var(--a11y-focus-inner) !important;
	outline-offset: 0 !important;
	box-shadow: 0 0 0 var(--a11y-focus-ring) var(--a11y-focus-outer) !important;
	position: relative;
	z-index: 20;
}

/* Fallback for browsers without :focus-visible support. */
@supports not selector(:focus-visible) {
	a:focus,
	button:focus,
	input:focus,
	select:focus,
	textarea:focus,
	[tabindex]:focus {
		outline: var(--a11y-focus-width) solid var(--a11y-focus-inner) !important;
		outline-offset: 0 !important;
		box-shadow: 0 0 0 var(--a11y-focus-ring) var(--a11y-focus-outer) !important;
	}
}


/* --------------------------------------------------------------------------
   1b) Targeted override of existing "outline: 0 !important" rules.
   --------------------------------------------------------------------------
   With !important, specificity decides, not order. The following selectors
   therefore mirror the original selectors from style.css and
   add :focus-visible to reliably override them.
   -------------------------------------------------------------------------- */

/* style.css: .lp-calculator-form-holder .gform_next_button, ... .gform_button.button */
.lp-calculator-form-holder .gform_next_button:focus-visible,
.lp-calculator-form-holder .gform_button.button:focus-visible,
/* style.css: .lp-calculator-form-holder .gform_previous_button */
.lp-calculator-form-holder .gform_previous_button:focus-visible,
/* style.css: .slider-people-holder .krempe-slider-persons input */
.slider-people-holder .krempe-slider-persons input:focus-visible,
/* style.css: .gform-theme--framework .gfield:where(...) .chosen-container-single .chosen-single */
.gform-theme--framework .gfield .chosen-container-single .chosen-single:focus-visible,
/* slick.min.css / jquery-ui.css also set outline: 0 */
.slick-slider .slick-arrow:focus-visible,
.slick-slider .slick-track:focus-visible,
.slick-slider .slick-list:focus-visible,
.slick-slide:focus-visible,
.ui-slider .ui-slider-handle:focus-visible,
.ui-state-focus:focus-visible {
	outline: var(--a11y-focus-width) solid var(--a11y-focus-inner) !important;
	outline-offset: 0 !important;
	box-shadow: 0 0 0 var(--a11y-focus-ring) var(--a11y-focus-outer) !important;
}

/* The slider handle is inside the track; place ring inward
   so it's not clipped. */
.ui-slider .ui-slider-handle:focus-visible {
	outline-offset: 2px !important;
}

/* Carousel arrows: ring must not be clipped by .slick-list (overflow: hidden)
   - the arrows are outside anyway. */
.slick-slider .slick-arrow:focus-visible {
	z-index: 30;
}


/* --------------------------------------------------------------------------
   1c) Selectric: the focusable element is a visually hidden
   <input class="selectric-input">. Focus must therefore be shown
   on the visible .selectric box.
   -------------------------------------------------------------------------- */

.selectric-wrapper .selectric-input:focus-visible {
	outline: 0 !important;
	box-shadow: none !important;
}

.selectric-wrapper.selectric-focus > .selectric,
.selectric-wrapper:focus-within > .selectric {
	outline: var(--a11y-focus-width) solid var(--a11y-focus-inner) !important;
	outline-offset: 0 !important;
	box-shadow: 0 0 0 var(--a11y-focus-ring) var(--a11y-focus-outer) !important;
	position: relative;
	z-index: 20;
}

/* Highlight the option referenced by aria-activedescendant. */
.selectric-items li.highlighted {
	outline: 2px solid var(--a11y-focus-outer);
	outline-offset: -2px;
}


/* --------------------------------------------------------------------------
   2) 9.2.1.1 - Content that was previously only visible on :hover
   must also be visible on keyboard focus.
   -------------------------------------------------------------------------- */

/* Main navigation: Flyout also opens via keyboard now.
   .submenu-open is set by js/accessibility.js (aria-expanded-sync,
   close with Escape - see 9.1.4.13). */
.main-menu li:focus-within > .submenu-holder,
.main-menu li.submenu-open > .submenu-holder {
	opacity: 1;
	visibility: visible;
	pointer-events: initial;
	z-index: 1;
}

/* Tiles "Wir powern Lebensqualität" (slider-infos-box):
   the revealed text and the links it contains would otherwise not
   be accessible for keyboard users. */
.each-slide-info:focus-within .each-slide-hidden,
.each-slide-info.is-revealed .each-slide-hidden {
	opacity: 1;
	visibility: visible;
	pointer-events: initial;
	max-height: none;
}

/* Side widget (location / email / phone): operable as disclosure.
   .active_floating is now also set via keyboard (accessibility.js). */
.floating-bar .floating-item:focus-within,
.floating-bar .floating-item.active_floating {
	pointer-events: initial;
}


/* --------------------------------------------------------------------------
   3) Elements that have been changed from <div role="button"> to <button>
   must appear visually unchanged (reset browser default).
   -------------------------------------------------------------------------- */

.search-holder.search-toggle,
.search-close,
.floating-item > .floating-disclosure,
.load--more--posts {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	text-align: inherit;
	cursor: pointer;
}

/* .load--more--posts previously had .button styling as <a>; as <button>
   browser defaults must not override this. */
button.button,
button.load--more--posts.button {
	display: inline-block;
	font-family: inherit;
	line-height: inherit;
}

/* The main menu search toggle was a <div>; as <button> it should still
   sit as a flex child as before. */
.main-menu button.search-holder.search-toggle {
	display: flex;
	align-items: center;
	padding: 0;
}

.top-search-bar button.search-close {
	display: block;
}


/* --------------------------------------------------------------------------
   4) Helper class: visually hidden, but readable for screen readers.
   -------------------------------------------------------------------------- */

.screen-reader-text,
.a11y-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Visible when focused (e.g. skip links). */
.screen-reader-text:focus,
.a11y-visually-hidden:focus {
	position: static !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	overflow: visible !important;
	clip: auto !important;
	white-space: normal !important;
}


/* --------------------------------------------------------------------------
   5) Respect reduced motion preference (additionally, not a requirement of the
   simplified monitoring, but a prerequisite for 9.2.2.2 conformance).
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* --------------------------------------------------------------------------
   6) Filter pills (.each-faq-filter) are now real <button> elements instead of
   <div role="button" tabindex="0">. The div gave a fake button that did not
   react to Enter and, where it wrapped a link, produced an empty tab stop.

   The pill styling stays in style.css; here only the user-agent button
   defaults are neutralised so the appearance is identical to before.
   -------------------------------------------------------------------------- */

button.each-faq-filter {
	font-family: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-align: center;
	text-transform: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: none;
	box-shadow: none;
	/* .each-faq-filter already sets font-size, font-weight, color, padding,
	   border, border-radius, background-color, margin and display. */
}

/* Firefox draws its own dotted inner ring; the shared focus indicator from
   section 1 of this file has to remain the only visible one. */
button.each-faq-filter::-moz-focus-inner {
	border: 0;
	padding: 0;
}