/* ═══════════════════════════════════════════════════════════════════
   Barrierefreiheit – globale Regeln (WCAG 2.1 AA / BFSG)
   Wird nach allen anderen Theme-Styles geladen (functions.php).
   Regeln für einzelne Bereiche stehen bei den jeweiligen Bereichen.
   ═══════════════════════════════════════════════════════════════════ */

/* Sichtbarer Fokusrahmen nur bei Tastaturbedienung – Mausklicks sehen aus wie bisher.
   Überstimmt das globale ":focus { outline: none }" aus assets/css/style.css. */
:focus-visible {
  outline: 3px solid #0b57d0 !important;
  outline-offset: 2px !important;
}
/* auf dunklen Flächen ist Blau zu schwach → weißer Rahmen */
.ip-topbar :focus-visible,
.et-footer :focus-visible,
.ip-mm-cta a:focus-visible,
.et-page-label-link:focus-visible {
  outline-color: #fff !important;
}
.ip-mm-cta a:focus-visible,
.et-page-label-link:focus-visible {
  box-shadow: 0 0 0 5px #0b57d0;
}

/* Sprunglink: erst bei Tastaturfokus sichtbar */
.ip-skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100001;
  padding: 12px 18px;
  background: #fff;
  color: #111;
  font-family: 'Futura', 'Century Gothic', 'Trebuchet MS', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid #111;
  border-radius: 8px;
  transform: translateY(-200%);
}
.ip-skip-link:focus { transform: none; }

/* Sprungziel (h1/main) soll beim Anspringen keinen Rahmen zeigen */
h1[tabindex="-1"]:focus,
h2[tabindex="-1"]:focus,
main[tabindex="-1"]:focus { outline: 0 !important; }

/* Wer reduzierte Bewegung eingestellt hat, bekommt keine Animationen und kein weiches Scrollen */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Kontraste
   Das Customizer-CSS (Datenbank, Design → Zusätzliches CSS) setzt einige Farben mit
   !important. Die Selektoren hier sind absichtlich spezifischer, damit sie dort gewinnen.
   ═══════════════════════════════════════════════════════════════════ */

/* Sale-Preis, durchgestrichener Preis, "Angebot!"-Badge (vorher #FF6961 / #999).
   #content (das <main>) macht die Regeln spezifischer als die im Customizer. */
#content .price ins,
#content .price ins * { color: #c3504a !important; }
#content .price del,
#content .price del * { color: #6b6b6b !important; }
#content .onsale { background-color: #c3504a !important; }

/* Mini-Warenkorb-Button (Customizer-CSS: #3da434 mit weißer Schrift) */
html body .xoo-wsc-footer-b .et-cart-link { background: #2d7a28; }

/* Links im Fließtext brauchen mehr als nur eine andere Farbe */
.inside-column-jake-4 a { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════
   Akkordeons (FAQ): a11y.js setzt einen Button in die Überschrift.
   Der Button soll genauso aussehen wie die bisherige Überschrift.
   ═══════════════════════════════════════════════════════════════════ */
.ip-acc-btn {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  line-height: inherit;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.ip-acc-btn:focus-visible { outline: 0 !important; }
.et-accordion__title:has(.ip-acc-btn:focus-visible) {
  outline: 3px solid #0b57d0 !important;
  outline-offset: -3px !important;
}

/* Packungsgröße (Produktseite): Auswahl per Tastatur zeigt denselben Rahmen wie bisher "selected" */
.variation-card:focus-visible { outline-offset: 3px !important; }

/* Mini-Warenkorb (Side-Cart): geschlossen = nicht per Tab/Screenreader erreichbar.
   Die vorhandene "transition: all" blendet erst nach dem Hinausgleiten aus. */
.xoo-wsc-modal:not(.xoo-wsc-active) .xoo-wsc-container { visibility: hidden; }
.xoo-wsc-close:focus-visible,
.xoo-wsc-basket:focus-visible { outline-offset: 2px !important; }

/* Links im Fließtext (Blog, Seiten): zusätzlich zur Farbe unterstrichen (WCAG 1.4.1) */
#content p a:not([class]),
#content li > a:not([class]):not(:only-child),
.entry-content a:not([class]),
.ip-b2b-hinweis a { text-decoration: underline; }

/* Startseite: USP-Texte auf gelben/hellen Kacheln */
.et-category-icons__item .usp-box .sub-text { color: #595959; }

/* Warenkorb: "N Artikel" (Quelle des Grau liegt nicht im Repo) */
#content .entry-div .child-one p { color: #6b6b6b !important; }

/* Startseiten-Hero: der dekorative Hintergrund ragt über den Rand und erzeugt seitliches Scrollen.
   "clip" schneidet nur ab (kein Scroll-Container, Sticky bleibt intakt). Nur dieser Abschnitt, bewusst nicht die ganze Seite. */
.main-section-traditional,
.et-benefit-section { overflow-x: clip; }

/* FAQ-Beschriftung (mu-plugin) und Landingpages mit Variable aus dem Seiteninhalt: Grün mit ausreichendem Kontrast */
.ip-faq-section .ip-faq-eyebrow,
.ip-faq-section .ip-faq-title em { color: #2d7a28 !important; }
.ip-lp-page { --ip-primary-darker: #0a7a3d !important; }

/* Warenkorb: Versandkosten-Hinweis (grüner Text auf hellgrünem Grund) */
.et-cart-shipping-text, .et-cart-shipping-text * { color: #14561b !important; }