:root {
  --wf-bafocus-color: #1473e6;
}

/* =========================================
   1) Fokus-Handling (barrierefrei & robust)
   ========================================= */

/* Default: keine Outline */
:focus {
  outline: none;
}

/* Browser-Standard: Fokus nur bei Tastatur */
:focus-visible {
  outline: 2px solid var(--wf-bafocus-color);
  outline-offset: 3px;
}

/* Optional: dein data-focus System (überschreibt focus-visible nicht kaputt) */
html[data-focus="pointer"] :focus-visible {
  outline: none;
}

html[data-focus="keyboard"] :focus-visible {
  outline: 2px solid var(--wf-bafocus-color);
  outline-offset: 3px;
}

/* Für Fälle, wo du Fokus per JS erzwingst (Skip-Link / Sprungmarken) */
.force-focus {
  outline: 2px solid var(--wf-bafocus-color) !important;
  outline-offset: 4px !important;
  transition: outline 0.2s ease-in-out;
}

/* =========================================
   2) Skip-Links (oben)
   ========================================= */

.skip-sr-only {
  position: absolute;
  left: 15px;
  top: 15px;
  transform: translateY(-200%);
  background: #000;
  color: #fff;
  padding: 0.95rem 1.25rem 0.95rem 3.5rem;
  z-index: 1000;
  text-decoration: none;
  font-weight: 500;
  line-height: 15px;
  display: inline-block;

  /* keine Outline im versteckten Zustand */
  outline: none;
}

/* Sichtbar + Fokus-Outline nur bei Fokus (Tastatur) */
.skip-sr-only:focus,
.skip-sr-only:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--wf-bafocus-color);
  outline-offset: 3px;
}

/* Wenn du data-focus nutzt: Skip-Link bei Pointer-Fokus keine Outline */
html[data-focus="pointer"] .skip-sr-only:focus-visible {
  outline: none;
}

/* =========================================
   3) Skip-Link (Footer)
   ========================================= */

.skip-footer-sr-only {
  position: absolute;
  left: -9999px;
  top: auto;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  z-index: 1000;
  text-decoration: none;
  font-weight: bold;
  outline: none;
}

.skip-footer-sr-only:focus,
.skip-footer-sr-only:focus-visible {
  left: 50%;
  top: -4rem;
  transform: translateX(-50%);
  outline: 2px solid var(--wf-bafocus-color);
  outline-offset: 3px;
}

/* =========================================
   4) SR-only Helper
   ========================================= */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* =========================================
   5) Icon-Prefixe bei Skip-Buttons
   ========================================= */

.skip-btn-1:before,
.skip-btn-2:before,
.skip-btn-3:before,
.skip-btn-4:before,
.skip-btn-5:before,
.skip-btn-6:before {
  font-family: 'icon-barrierfree';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1px;
  font-size: 32px;
  margin-right: 0.75rem;
  position: absolute;
  top: 1.40rem;
  left: 0.75rem;
}

.skip-btn-1:before { content: "\e90b"; }
.skip-btn-2:before { content: "\e908"; }
.skip-btn-3:before { content: "\e909"; }
.skip-btn-4:before { content: "\e90a"; }
.skip-btn-5:before { content: "\e90d"; }
.skip-btn-6:before { content: "\e902"; }

/* =========================================
   6) Spezifische Fokus-Targets auf der Seite
   ========================================= */



/* Falls du page-start NIE umranden willst */
#page-start:focus-visible {
  outline: none;
}

/* Footer Skip Target */
#footer-skip-content:focus,
#footer-skip-content:focus-visible {
  outline: 2px solid var(--wf-bafocus-color);
  outline-offset: 4px;
}

/* =========================================
   7) Accessibility Buttons Container
   ========================================= */

.accessibility-buttons {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  position: fixed;
  top: 50px;
  left: 10px;
  background: #fff;
  border: 2px solid black;
  padding: 10px;
  z-index: 9999;
}

/* Sobald ein Kind Fokus hat → sichtbar */
.accessibility-buttons:focus-within {
  visibility: visible;
  opacity: 1;
}

.accessibility-buttons button {
  display: block;
  margin: 5px 0;
}

/* Container selbst bekommt Fokus i.d.R. nicht,
   aber falls doch (tabindex) */
.accessibility-buttons:focus-visible {
  outline: 3px solid var(--wf-bafocus-color);
  outline-offset: 3px;
}

/* =========================================
   8) Hamburger / Navigation Fokus
   ========================================= */

#hamburgerToggle:focus-visible {
  background-color: transparent;
  outline: 2px dotted var(--wf-bafocus-color);
  outline-offset: 3px;
}

/* Fokus auf Links und Buttons im Menü */
#hamburgerToggle .navigation-link:focus-visible,
#hamburgerToggle .submenu-icon:focus-visible {
  outline: 2px solid var(--wf-bafocus-color) !important;
  outline-offset: -2px !important;
}

/* Fokus auf Links und Buttons im Menü */
#hamburgerToggle .navigation-dropdown-link:focus-visible {
  outline: 2px solid var(--wf-bafocus-color) !important;
  outline-offset: -2px !important;
}


/* =========================================
   9) Motion reduzieren
   ========================================= */

@media (prefers-reduced-motion: reduce) {
  .form-control {
    transition: none;
  }

  .skip-sr-only,
  .skip-footer-sr-only {
    transition: none;
  }
}

/* (Dein vorhandenes .form-control bleibt erhalten) */
.form-control {
  display: block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  background-color: #f4f4f3;
  background-clip: padding-box;
}

.skip-sr-only:focus,
.skip-sr-only:focus-visible {
  outline: 2px solid var(--wf-bafocus-color) !important;
  outline-offset: 3px !important;
}

/* Diese Elemente sollen Fokus sichtbar zeigen */
a.wf-btn-display:focus-visible,
.wf-weather-title:focus-visible,
.wf-status-title:focus-visible,
.sectionfocus:focus-visible,
.XXowl-item:focus-visible {
  outline: 2px solid var(--wf-bafocus-color) !important;
  outline-offset: 3px !important;
}

.mk-18-aside-image:focus-visible {
   outline-offset: -50px !important; 
}

.mk-18-aside-image:focus-visible::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 25;
    border: 2px solid var(--wf-bafocus-color);
    box-sizing: border-box;
    pointer-events: none;
}

.wf-footer-logos-flex a:focus-visible  {
  outline: 2px solid var(--wf-bafocus-color) !important;
  outline-offset: 3px !important;
  display: inline-block;
  box-sizing: border-box;
}

.wf-btn-header:focus-visible,
.address a:focus-visible,
.wf-footer-nav li a:focus-visible  {
  outline: 2px solid var(--wf-bafocus-color) !important;
  outline-offset: 3px !important;
}