/* ============================================================
   NutriPur Barrierefreiheit — konsolidiertes CSS
   [46] vormals WPCodeBox 'A11y Skip-Links + Focus CSS' + Follow-up 07/2026
   ============================================================ */

/* ---------- [46] Skip-Links + globaler :focus-visible ---------- */
.skip-link{position:absolute;top:-100%;left:0;z-index:100000;padding:8px 16px;background:var(--darkgreen);color:#fff}.skip-link:focus{top:0;outline:3px solid var(--green)}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[role=button]:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--darkgreen,#29594A)!important;outline-offset:2px!important}.elementor-item:focus-visible,.elementor-sub-item:focus-visible{outline:3px solid var(--darkgreen,#29594A)!important;outline-offset:2px!important}.kubi-menu-account a:focus-visible,.kubi-menu-wishlist a:focus-visible,#kubi-menu-cart-btn:focus-visible{outline:3px solid var(--darkgreen,#29594A)!important;outline-offset:2px!important;border-radius:4px}.single_add_to_cart_button:focus-visible,.add_to_cart_button:focus-visible,.kubi-variable-add-to-cart-button:focus-visible,.button:focus-visible{outline:3px solid var(--darkgreen,#29594A)!important;outline-offset:2px!important}.kubi-wishlist-button:focus-visible{outline:3px solid var(--darkgreen,#29594A)!important;outline-offset:2px!important}input[type=text]:focus-visible,input[type=email]:focus-visible,input[type=password]:focus-visible,input[type=number]:focus-visible,input[type=search]:focus-visible,input[type=tel]:focus-visible,input[type=submit]:focus-visible,input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:3px solid var(--darkgreen,#29594A)!important;outline-offset:2px!important}.select2-container--default .select2-selection--single:focus-visible,.select2-container--focus .select2-selection--single{outline:3px solid var(--darkgreen,#29594A)!important;outline-offset:2px!important}.flickity-button:focus-visible,.slick-prev:focus-visible,.slick-next:focus-visible,.slick-dots li button:focus-visible{outline:3px solid var(--darkgreen,#29594A)!important;outline-offset:2px!important}.mfp-close:focus-visible,.mfp-arrow:focus-visible{outline:3px solid #fff!important;outline-offset:2px!important}.woocommerce-message:focus-visible,.woocommerce-error:focus-visible,.woocommerce-info:focus-visible{outline:3px solid var(--darkgreen,#29594A)!important;outline-offset:2px!important}.wpb_accordion .wpb_accordion_header:focus-visible,.vc_toggle_title:focus-visible{outline:3px solid var(--darkgreen,#29594A)!important;outline-offset:2px!important}#kubi-cart-panel a:focus-visible,#kubi-cart-panel button:focus-visible{outline:3px solid var(--darkgreen,#29594A)!important;outline-offset:2px!important}.widget_price_filter .ui-slider-handle:focus-visible{outline:3px solid var(--darkgreen,#29594A)!important;outline-offset:2px!important}.kubi-shop-loop-attribute-link:focus-visible{outline:3px solid var(--darkgreen,#29594A)!important;outline-offset:2px!important}.elementor-button:focus-visible{outline:3px solid var(--darkgreen,#29594A)!important;outline-offset:2px!important}.sib-default-btn:focus-visible{outline:3px solid var(--darkgreen,#29594A)!important;outline-offset:2px!important}


/* ---------- [Follow-up 07/2026] ---------- */
/* ============================================================
   A11y Follow-up 07/2026 — CSS   (neues WPCodeBox-CSS-Snippet)
   Auf Staging verifiziert. Fokus greift nur per Tastatur (:focus-visible).
   ============================================================ */

/* --- Slide 4D: dunkler Footer -> Dunkelgrün-Outline (Snippet 46) unsichtbar.
   Longhand + hohe Spezifität (html body ...), weil das Theme outline-width per
   Reset/Transition auf 0 setzt; box-shadow als robuster Fallback; transition:none,
   weil .elementor-item eine 0.4s-Transition hat (Ring sonst eingeblendet). --- */
/* NUR dunkler Elementor-Footer! #kubi-footer (klassisch, z.B. .se) ist HELL ->
   dort greift bewusst das dunkelgruene Standard-Outline aus [46]. */
html body footer[data-elementor-type="footer"] a:focus-visible,
html body footer[data-elementor-type="footer"] button:focus-visible,
html body footer[data-elementor-type="footer"] [role="button"]:focus-visible,
html body footer[data-elementor-type="footer"] [tabindex]:focus-visible {
  outline-style: solid !important;
  outline-width: 3px !important;
  outline-color: #ffffff !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px rgba(0,0,0,.55) !important;
  border-radius: 2px;
  transition: none !important;
}

/* --- Slide 6: Express-Checkout-Buttons (Google Pay / „Zahlen mit link").
   Kräftiges Outline + weißer Zwischenring, damit es auf schwarzem UND grünem Button greift. --- */
.wc-stripe-payment-request-wrapper:focus-within,
#wc-stripe-payment-request-button:focus-visible,
.wc-block-components-express-payment button:focus-visible,
.wc-stripe-express-checkout-element:focus-within {
  outline: 3px solid var(--darkgreen, #29594A) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px #fff !important;
  border-radius: 6px;
}

/* --- Skip-Link (WCAG 2.4.1): [46] setzt background:var(--darkgreen) OHNE Fallback.
   Auf .se (und ggf. weiteren Locales) ist --darkgreen NICHT definiert -> Hintergrund
   transparent, weisser Text auf weissem Grund = unsichtbar. Harte Fallbacks: --- */
.skip-link {
  background: var(--darkgreen, #29594A) !important;
  color: #ffffff !important;
  text-decoration: underline;
}
.skip-link:focus,
.skip-link:focus-visible {
  outline: 3px solid #ffffff !important;
  outline-offset: -3px !important;
}

/* --- Skip-Link muss bei Tastaturfokus SICHTBAR werden.
   Die Klasse .screen-reader-text klippt ihn auf 1x1px (clip/clip-path/overflow)
   und hebt das bei :focus nicht auf -> er war nur fuer Screenreader nutzbar.
   Hier wird die Klippung bei Fokus zurueckgenommen. --- */
.skip-link:focus,
.skip-link:focus-visible {
  clip: auto !important;
  clip-path: none !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  padding: 12px 20px !important;
  top: 0 !important;
  left: 0 !important;
  white-space: nowrap;
  font-size: 1rem !important;
  line-height: 1.4 !important;
}

/* --- Slide 4A: aktiven Menuepunkt sichtbar kennzeichnen. aria-current="page" ist
   bereits vom Theme gesetzt; hier nur die visuelle Hervorhebung (Unterstreichung),
   damit sehende Tastaturnutzer ihre Position im Menue erkennen. --- */
.kubi-main-menu a[aria-current="page"],
.kubi-right-menu a[aria-current="page"],
.kubi-mobile-menu a[aria-current="page"],
.elementor-nav-menu a[aria-current="page"] {
  text-decoration: underline !important;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  font-weight: 700;
}

/* --- Slide 1: Galerie-Thumbnails sind jetzt role="button" (per JS) -> Mauszeiger
   signalisiert Klickbarkeit, aktives Bild leicht hervorgehoben. Fokusring kommt
   generisch aus [tabindex]:focus-visible (Snippet 46). --- */
.woocommerce-product-gallery ol.flex-control-thumbs > li {
  cursor: pointer;
}
.woocommerce-product-gallery ol.flex-control-thumbs > li[aria-current="true"] {
  outline: 2px solid var(--darkgreen, #29594A);
  outline-offset: 1px;
}

/* --- Slide 7: Steuerbutton fuer Autoplay-Deko-Videos (WCAG 2.2.2). Dezent, aber
   permanent sichtbar, 44x44px (Zielgroesse), tastaturbedienbar. --- */
.nutripur-video-toggle {
  position: absolute; bottom: 12px; right: 12px; z-index: 100;
  /* !important gegen Theme-Button-Regeln (.elementor-kit-* button { padding:16px 64px }) */
  width: 44px !important; height: 44px !important; min-width: 0 !important; max-width: 44px !important;
  padding: 0 !important; margin: 0 !important;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  background: rgba(0, 0, 0, .6); color: #fff;
  font-size: 18px; line-height: 1; cursor: pointer;
}
.nutripur-video-toggle:hover { background: rgba(0, 0, 0, .8); }
.nutripur-video-toggle:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(0, 0, 0, .5) !important;
}
/* Sicherheitsnetz: Elementor-Hintergrundvideo bei reduced-motion sofort ausblenden,
   bevor das JS greift -> das Fallback-Bild des Wrappers wird sichtbar.
   Der Play-Button setzt bei Bedarf opacity:1 !important und schlaegt diese Regel. */
@media (prefers-reduced-motion: reduce) {
  video.elementor-background-video-hosted { opacity: 0; }
}