/* ============================================================
   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 per JS role="button" -> Mauszeiger
   signalisiert Klickbarkeit.
   Der Fokusring sitzt bewusst auf dem <img> und nicht auf dem <li>: das li ist
   10px breiter (padding: 0 5px) und hat keine Eckenrundung, waehrend das Bild
   border-radius 8px hat. Ein Ring auf dem li saesse seitlich versetzt und eckig
   um ein rundes Bild. Dafuer wird der generische [tabindex]:focus-visible aus
   [46] hier abgeschaltet - gleiche !important-Stufe, hoehere Spezifitaet gewinnt.
   KEIN dauerhafter Rahmen am aktiven Bild (Gestaltungsentscheidung 27.07.2026);
   aria-current bleibt im JS gesetzt, damit Screenreader den Zustand weiter
   erhalten. Fuer sehende Mausnutzer kennzeichnet nur noch die Theme-Deckkraft
   (img.flex-active { opacity:.3 }) das aktive Bild. --- */
.woocommerce-product-gallery ol.flex-control-thumbs > li {
  cursor: pointer;
}
.woocommerce-product-gallery ol.flex-control-thumbs > li:focus-visible {
  outline: none !important;
}
.woocommerce-product-gallery ol.flex-control-thumbs > li:focus-visible img {
  outline: 3px solid var(--darkgreen, #29594A);
  outline-offset: 2px;
}

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

/* --- Fokusring auf WooCommerce-Statusmeldungen nur bei Tastaturnutzung.

   Befund 22.10.2026: WooCommerce selbst setzt nach jedem Warenkorb-Update per
   JS den Fokus auf die Meldung ($.scroll_to_notices in woocommerce.min.js).
   Chrome/Firefox werten programmatisch gesetzten Fokus korrekt NICHT als
   :focus-visible — Safari (iOS/macOS) schon. Folge: auf dem iPhone sah JEDER
   Nutzer nach "Warenkorb aktualisiert." den dunkelgruenen 3px-Ring. Da die
   Meldung seitenbreit ist, waren davon nur die beiden waagerechten Kanten
   quer ueber die Seite zu sehen.

   Die Meldung ist kein Bedienelement und per Tab nicht erreichbar
   (tabindex="-1") — der Ring ist nur sinnvoll, wenn wirklich per Tastatur
   navigiert wird. Screenreader bekommen die Meldung ueber role="alert",
   unabhaengig vom Ring. data-a11y-nav="keyboard" setzt das Inline-Skript aus
   nutripur-a11y.php (gesetzt bei Tab, geloescht bei Maus/Touch). --- */
html:not([data-a11y-nav="keyboard"]) .woocommerce-message:focus,
html:not([data-a11y-nav="keyboard"]) .woocommerce-error:focus,
html:not([data-a11y-nav="keyboard"]) .woocommerce-info:focus,
html:not([data-a11y-nav="keyboard"]) .woocommerce-message:focus-visible,
html:not([data-a11y-nav="keyboard"]) .woocommerce-error:focus-visible,
html:not([data-a11y-nav="keyboard"]) .woocommerce-info:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* --- Fokusring in Texteingabefeldern nur bei Tastaturnutzung.

   Wunsch 02.11.2026 (Kubilay): Klick ins Header-Suchfeld zeigte den 3px-Ring.
   Ursache: Bei Texteingabefeldern werten ALLE Browser auch einen Mausklick
   bzw. Tap als :focus-visible (Spezifikations-Heuristik: das Feld erwartet
   Tastatureingabe). Die Regel aus [46] (input[type=text]:focus-visible …)
   greift deshalb auch bei Klick.

   Ohne data-a11y-nav="keyboard" (gesetzt bei Tab, geloescht bei Maus/Touch,
   siehe nutripur-a11y.php) wird der Ring unterdrueckt. Wer per Tab ins Feld
   kommt, sieht ihn weiterhin (WCAG 2.4.7). Ein Mausnutzer erkennt das aktive
   Feld an der blinkenden Einfuegemarke.
   select2 (Laenderwahl Kasse) haengt den Ring an :focus statt :focus-visible
   und zeigt ihn deshalb ebenfalls bei Klick — gleiche Behandlung. --- */
html:not([data-a11y-nav="keyboard"]) input:not([type]):focus-visible,
html:not([data-a11y-nav="keyboard"]) input[type=text]:focus-visible,
html:not([data-a11y-nav="keyboard"]) input[type=search]:focus-visible,
html:not([data-a11y-nav="keyboard"]) input[type=email]:focus-visible,
html:not([data-a11y-nav="keyboard"]) input[type=password]:focus-visible,
html:not([data-a11y-nav="keyboard"]) input[type=number]:focus-visible,
html:not([data-a11y-nav="keyboard"]) input[type=tel]:focus-visible,
html:not([data-a11y-nav="keyboard"]) input[type=url]:focus-visible,
html:not([data-a11y-nav="keyboard"]) textarea:focus-visible,
html:not([data-a11y-nav="keyboard"]) .select2-container--focus .select2-selection--single {
  outline: none !important;
}

/* ============================================================
   Fokusringe an der sichtbaren Form ausrichten (02.11.2026)
   Befund per TAB-Durchlauf Startseite .eu (Desktop 1440/1000px, Mobile 390px):
   Ringe sassen auf unsichtbaren Boxen (inneres Suchfeld statt Pille),
   wurden von overflow:hidden abgeschnitten (Produktbild: komplett
   unsichtbar, Hero, Top-Bar) oder waren je Icon unterschiedlich gross.
   Farbe/Staerke bleiben wie in [46] (3px Dunkelgruen, im Footer weiss).
   ============================================================ */

/* --- 1) Suchleiste (Desktop .qb--search und mobile Theme-Suche): Ring auf der
   grauen Pille statt eckig ums innere Eingabefeld. Innen (-3px), weil die
   mobile Pille randlos in #kubi-header-search (overflow:hidden) liegt.
   Nur mit Tastatur-Flag, passend zu 1.3 (Klick zeigt keinen Ring). --- */
html[data-a11y-nav="keyboard"] .kubi-header-search-wrap:focus-within {
  outline: 3px solid var(--darkgreen, #29594A);
  outline-offset: -3px;
}
html .kubi-header-search-wrap input:focus-visible {
  outline: none !important;
}

/* --- 2) Header-Icons: einheitlich 38px hoher, runder Ring um das Symbol statt
   um die unterschiedlich hohen Link-Boxen (Warenkorb 31x49, Suche 39x47,
   Konto 32x32). Der Ring der Box ragte mobil in Logo bzw. ueber den
   Bildschirmrand (Menue-Button). Kreis: 38 = Symbolgroesse + 2 x Offset +
   2 x 3px. Wunschliste/Warenkorb: Der Zaehler klebt rechts oben am Symbol,
   ein Kreis schnitte ihn -> Pille per ::after um Symbol UND Zaehler. --- */
html #kubi-header #kubi-menu-search-btn:focus-visible,
html #kubi-header #kubi-menu-account-btn:focus-visible,
html #kubi-header .kubi-menu-wishlist a:focus-visible,
html #kubi-header #kubi-menu-cart-btn:focus-visible,
html #kubi-header #kubi-mobile-menu-button:focus-visible {
  outline: none !important;
}
#kubi-menu-search-btn:focus-visible > i,
#kubi-menu-account-btn:focus-visible > i,
.kubi-menu-wishlist a:focus-visible > i,
#kubi-menu-cart-btn:focus-visible > i,
#kubi-mobile-menu-button:focus-visible > .kubi-menu-icon {
  outline: 3px solid var(--darkgreen, #29594A);
  border-radius: 50%;
}
#kubi-menu-account-btn:focus-visible > i { outline-offset: 0; }   /* 32px */
#kubi-menu-search-btn:focus-visible > i,
#kubi-mobile-menu-button:focus-visible > .kubi-menu-icon { outline-offset: 8px; } /* 15-16px */
.kubi-menu-wishlist a:focus-visible > i,
#kubi-menu-cart-btn:focus-visible > i {                              /* 24px + Zaehler */
  outline: none;
  position: relative;
}
.kubi-menu-wishlist a:focus-visible > i::after,
#kubi-menu-cart-btn:focus-visible > i::after {
  content: "";
  position: absolute;
  top: -7px; bottom: -7px; left: -7px; right: -19px;
  border: 3px solid var(--darkgreen, #29594A);
  border-radius: 19px;
  pointer-events: none;
}

/* --- 3) Hauptmenue Desktop: Der Link ist 51px hoch (Padding 24/12 aus
   WPCodeBox 42), der Text sitzt unten. Der Ring der Box stiess an Logo und
   Hero und sass asymmetrisch. Stattdessen ein Rahmen per ::after, der den
   Text mit 3px Abstand umschliesst (li ist position:relative, a hat kein
   ::after). Nur Ebene 1; Untermenues behalten [46]. --- */
html #kubi-main-menu-ul > li > a:focus-visible {
  outline: none !important;
}
#kubi-main-menu-ul > li > a:focus-visible::after {
  content: "";
  position: absolute;
  top: 18px; bottom: 6px; left: 8px; right: 8px;
  border: 3px solid var(--darkgreen, #29594A);
  border-radius: 6px;
  pointer-events: none;
}

/* --- 4) Abgeschnittene Ringe nach innen legen:
   - Produktbild-Link: .kubi-shop-loop-thumbnail hat overflow:hidden -> der
     Ring war KOMPLETT unsichtbar (WCAG 2.4.7 verletzt).
   - Bild-Links in Elementor (Hero 1440px randlos): nur die Unterkante sichtbar.
   - Top-Bar-Links: .kubi-top-bar-text overflow:hidden, nur rechte Kante sichtbar.
   Footer-Bild-Links (Social-Icons) behalten ihren Ring aus dem Footer-Block
   (hoehere Spezifitaet). --- */
html .kubi-shop-loop-thumbnail-link:focus-visible,
html .elementor-widget-image a:focus-visible,
html .kubi-top-bar-text a:focus-visible {
  outline-offset: -3px !important;
}
html .kubi-top-bar-text a:focus-visible { border-radius: 4px; }

/* --- 5) Herz auf der Produktkachel: runder Ring wie beim Schnellkauf-Button. --- */
.kubi-wishlist-button:focus-visible { border-radius: 50%; }

/* --- 6) Footer: Der Block "Slide 4D" setzt border-radius:2px fuer alle
   fokussierten Elemente. Der Button "Vertrag widerrufen" ist eine Pille
   (Kit-Radius 32px) und wurde beim Fokus eckig. --- */
html body footer[data-elementor-type="footer"] .elementor-button:focus-visible {
  border-radius: 32px;
}