/* ==========================================================================
   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;
}


/* --------------------------------------------------------------------------
   7) 9.2.4.1 - Skip link "Zum Inhalt springen".
   --------------------------------------------------------------------------
   First focusable element of the page (header.php). It uses .screen-reader-text
   from section 4 and only becomes visible on focus. The header is
   position: fixed, therefore the link is placed above it explicitly.
   -------------------------------------------------------------------------- */

.skip-link:focus {
	position: fixed !important;
	top: 0;
	left: 0;
	z-index: 1000;
	display: block;
	padding: 14px 24px 12px;
	background-color: #FFFFFF;
	color: #003C5A;
	font-size: 15px;
	font-weight: 700;
	text-decoration: underline;
}

.admin-bar .skip-link:focus {
	top: 32px;
}


/* --------------------------------------------------------------------------
   8) 9.2.1.1 - Main navigation flyout also opens on keyboard focus.
   --------------------------------------------------------------------------
   style.css opens .submenu-holder only via :hover and the current-page
   classes, so keyboard users never saw the submenu even though
   accessibility.js sets aria-expanded correctly. The class .submenu-open is
   toggled there via Enter/Space.
   -------------------------------------------------------------------------- */

.main-menu li:focus-within .submenu-holder,
.main-menu li.submenu-open .submenu-holder {
	opacity: 1;
	visibility: visible;
	pointer-events: initial;
}


/* --------------------------------------------------------------------------
   9) 9.2.1.1 / 9.2.4.3 - Search in the header.
   --------------------------------------------------------------------------
   The toggle and the close control are real <button> elements now, so the
   keyboard logic in accessibility.js (open, move focus into the field,
   Escape, return focus) binds for the first time. Two things follow from
   that and are handled here:

   a) User-agent button defaults must not disturb the existing layout.
      .search-close keeps its blue background from style.css - deliberately
      not overridden here.
   b) While the bar is collapsed (max-height: 0) its fields stayed reachable
      with Tab. visibility: hidden takes them out of the tab order; the open
      state restores it.
   -------------------------------------------------------------------------- */

button.search-holder,
button.search-close {
	font: inherit;
	line-height: inherit;
	color: inherit;
	border: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

button.search-holder {
	background-color: transparent;
}

button.search-holder::-moz-focus-inner,
button.search-close::-moz-focus-inner {
	border: 0;
	padding: 0;
}

.top-search-bar {
	visibility: hidden;
}

.open-search .top-search-bar {
	visibility: visible;
}

/* DOM order is now input -> submit button (9.2.4.3). The magnifier keeps its
   place to the left of the field, therefore flexbox instead of float. */
.top-search-bar form {
	display: flex;
	align-items: center;
}

.top-search-bar .search-holder {
	float: none;
	order: -1;
	padding: 0;
	flex: 0 0 auto;
}

.top-search-bar .search-holder button {
	display: block;
	padding: 3px 48px 2px 0;
}

#top-search {
	flex: 1 1 auto;
	width: auto;
}


/* --------------------------------------------------------------------------
   10) 9.2.1.1 - "Mehr News laden" is a real <button> instead of
   <a role="button" tabindex="0">.
   --------------------------------------------------------------------------
   The pill styling comes from .button in style.css; only the user-agent
   defaults of the button element are neutralised here.
   -------------------------------------------------------------------------- */

button.button {
	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;
}

button.button::-moz-focus-inner {
	border: 0;
	padding: 0;
}


/* --------------------------------------------------------------------------
   11) 9.2.2.2 - Pause control for autoplaying videos.
   --------------------------------------------------------------------------
   The button is injected by accessibility.js (section 12) next to the video.
   .a11y-video-parent only supplies the containing block; .video-gif-media is
   position: relative already, the wrapper of box-floating-content is not.
   -------------------------------------------------------------------------- */

.a11y-video-parent {
	position: relative;
}

.a11y-video-toggle {
	position: absolute;
	right: 20px;
	bottom: 20px;
	z-index: 5;
	margin: 0;
	padding: 10px 18px 8px;
	border: 1px solid #003C5A;
	border-radius: 25px;
	background-color: #FFFFFF;
	color: #003C5A;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.a11y-video-toggle:hover {
	background-color: #003C5A;
	color: #FFFFFF;
}

.a11y-video-toggle::-moz-focus-inner {
	border: 0;
	padding: 0;
}

@media only screen and (max-width: 767px) {
	.a11y-video-toggle {
		right: 12px;
		bottom: 12px;
		padding: 8px 14px 6px;
		font-size: 12px;
	}
}


/* --------------------------------------------------------------------------
   12) 9.1.3.1 / 9.3.3.2 / 9.1.4.1 - Tariff calculator.
   --------------------------------------------------------------------------
   a) The ZIP and kWh fields only had a placeholder. Placeholders disappear on
      typing and are not a substitute for a label, so form-infos-box.php now
      renders a visible <label for>. The styling follows the existing form
      labels of the theme: small, uppercase, in the tile's own text colour.
   b) The active tab was distinguished from the inactive one by background
      colour alone (#003E59 vs. #2382C3). An additional underline inside the
      pill supplies a second, non-colour cue.
   -------------------------------------------------------------------------- */

.tab-content .calc-label {
	display: block;
	margin-bottom: 6px;
	font-family: 'Spartan', sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.15px;
	text-transform: uppercase;
	/* Inherits the tile's text colour, so the label works on every
	   background variant of .form-infos-left. */
	color: inherit;
}

/* The field kept the 25px gap that used to sit below the previous field;
   the label now occupies part of it. */
.tab-content .calc-label + .form-control {
	margin-bottom: 18px;
}


.accesibility-on .nav.nav-tabs li.active a {
	box-shadow: inset 0 -3px 0 #FFFFFF;
}