/* =============== Widget-Button (mobil & desktop) =============== */
#barrierefrei-widget-toggle {
    position: fixed;
    right: 24px;
    bottom: 24px;
    left: auto;
    top: auto;
    transform: none;
    z-index: 2147483646;
    width: 66px;
    height: 66px;
    background: #b0b355;
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.18s cubic-bezier(.5,2,.1,1), box-shadow 0.16s;
    transform-origin: center;
}
#barrierefrei-widget-toggle:hover,
#barrierefrei-widget-toggle:focus-visible {
    box-shadow: 0 4px 14px rgba(176,179,85,0.28);
    outline: none;
    transform: scale(1.11);
}
#barrierefrei-widget-toggle:focus-visible {
    outline: 2px solid #222;
}
#barrierefrei-widget-toggle svg {
    pointer-events: none;
    color: #222;
    width: 56px;
    height: 56px;
    display: block;
    max-width: 90%;
    max-height: 90%;
    margin: auto;
    transition: none;
}

/* =============== Widget-Panel =============== */
#barrierefrei-widget-panel,
#barrierefrei-widget-panel *,
.bfw-panel-head h2,
#barrierefrei-widget-panel button {
    font-size: 16px !important;
    box-sizing: border-box;
}

#barrierefrei-widget-panel {
    position: fixed;
    right: 90px;
    bottom: 100px;
    left: auto;
    top: auto;
    transform: none;
    z-index: 2147483647;
    background: #fff;
    color: #222;
    border-radius: 14px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.13);
    padding: 18px 18px 20px 18px;
    min-width: 300px;
    max-width: 450px;
    display: none;
    max-height: 92vh;
    overflow-y: auto;
    overflow-x: hidden;
    transition: box-shadow 0.19s, border-radius 0.19s;
    text-align: left;
}
#barrierefrei-widget-panel.open {
    display: block;
}

/* =============== Panel-Header mit Schließen-Button =============== */
.bfw-panel-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    min-height: 48px;
}
.bfw-panel-head h2 {
    font-weight: 600;
    margin: 0;
    flex: 1;
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-align: left;
    color: #788331;
    font-size: 1.1em;
}
#bfw-panel-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    background: none !important;
    border: 1.5px solid #ffd700;
    border-radius: 12px;
    cursor: pointer;
    margin-left: 10px;
    color: #444;
    box-sizing: border-box;
    transition: background 0.13s, outline 0.14s;
    padding: 0 !important;
    font-size: 0;
}
#bfw-panel-close svg {
    width: 32px;
    height: 32px;
    display: block;
}
#bfw-panel-close:focus-visible,
#bfw-panel-close:hover {
    background: #f3f5e3 !important;
    outline: 2px solid #ffd700 !important;
}

/* =============== Switches (mit Beschreibungen NEU) =============== */
.bfw-switch {
    display: block;
    width: 100%;
    margin-bottom: 18px;
}
.bfw-switch-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}
.bfw-switch-row input[type="checkbox"] {
    margin-top: 2px;
    min-width: 22px;
    min-height: 22px;
    width: 22px;
    height: 22px;
    accent-color: #b0b355;
    flex-shrink: 0;
}
.bfw-switch-row label {
    font-weight: 500;
    font-size: 1em;
    line-height: 1.25;
    flex: 1;
    cursor: pointer;
    margin-bottom: 0;
    text-align: left;
}
#barrierefrei-widget-panel .bfw-desc {
    margin-left: 32px;
    margin-top: 2px;
    color: #666;
    font-size: 0.875em !important;
    line-height: 1.35;
    max-width: 92%;
}

/* ==== WICHTIG: Alte, störende Regeln entfernen ==== */
.bfw-switch label,
.bfw-switch input[type="checkbox"] {
    margin: 0 !important;
    float: none !important;
    display: initial !important;
    padding: 0 !important;
}

/* =============== Buttons =============== */
#barrierefrei-widget-panel button {
    display: block;
    width: 100%;
    margin: 14px 0 0 0;
    padding: 11px 0;
    background: #f7f7f7;
    border: 1px solid #dedeb0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.13s;
}
#barrierefrei-widget-panel button#bfw-panel-close {
    width: auto;
    padding: 0 6px;
    margin: 0 0 0 12px;
    display: inline;
    border: none;
    background: none;
    font-size: 1.5em;
}
#barrierefrei-widget-panel button:hover,
#barrierefrei-widget-panel button:focus-visible {
    background: #f3f5e3;
    outline: 2px solid #ffd700;
}
#bfw-reset {
    margin-top: 16px;
}
#bfw-speak {
    margin-top: 8px;
    background: #fafaf2;
    border: 1px solid #b0b355;
}
#bfw-speak:focus-visible {
    outline: 2px solid #b0b355;
}

/* =============== Fokusbalken für Konzentrationsmodus =============== */
#focusbar-overlay-top,
#focusbar-overlay-bottom {
    position: fixed;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.5);
    pointer-events: none;
    z-index: 2147483650;
    display: none;
    transition: top 0.1s, height 0.1s;
}
@media (max-width: 700px) {
  .bfw-focusbar-switch {
    display: none !important;
  }
}

/* =============== Barrierefrei-Modi =============== */
/* NICHT: body.bfw-epilepsy { filter: grayscale(1) } */

/* Stattdessen: Hauptcontainer ausgrauen */
body.bfw-epilepsy #content,
body.bfw-epilepsy .main,
body.bfw-epilepsy .page,
body.bfw-epilepsy .container,
body.bfw-epilepsy .jtl-shop,
body.bfw-epilepsy .panel,
body.bfw-epilepsy .product-list,
body.bfw-epilepsy .product-box,
body.bfw-epilepsy .product-detail,
body.bfw-epilepsy .box,
body.bfw-epilepsy .jtl-box,
body.bfw-epilepsy .widget,
body.bfw-epilepsy .sidebar,
body.bfw-epilepsy .footer,
body.bfw-epilepsy .header,
body.bfw-epilepsy .navbar,
body.bfw-epilepsy .nav,
body.bfw-epilepsy .dropdown-menu,
body.bfw-epilepsy .modal,
body.bfw-epilepsy .modal-content,
body.bfw-epilepsy .panel,
body.bfw-epilepsy .jtl-modal,
body.bfw-epilepsy .category-list,
body.bfw-epilepsy .stepper,
body.bfw-epilepsy .carousel,
body.bfw-epilepsy .slick-slider,
body.bfw-epilepsy .slider,
body.bfw-epilepsy .drop-container,
body.bfw-epilepsy [class*="drop-container"] {
  filter: grayscale(1) brightness(1.01) !important;
}

/* Widget-Button und Panel IMMER ausnehmen (auch im Graumodus sichtbar/bedienbar) */
#barrierefrei-widget-toggle,
#barrierefrei-widget-panel,
#barrierefrei-widget-root,
#focusbar-overlay-top,
#focusbar-overlay-bottom {
  filter: none !important;
  position: fixed !important;
  z-index: 2147483647 !important;
}


body.bfw-epilepsy #barrierefrei-widget-panel {
    position: fixed !important;
    top: auto !important;
    bottom: 100px !important;
    right: 90px !important;
    left: auto !important;
    z-index: 2147483647 !important;
    filter: none !important;
}

body.bfw-contrast,
body.bfw-contrast #content,
body.bfw-contrast .main,
body.bfw-contrast .content,
body.bfw-contrast .container,
body.bfw-contrast .page,
body.bfw-contrast .jtl-shop,
body.bfw-contrast .panel,
body.bfw-contrast .modal,
body.bfw-contrast .modal-content,
body.bfw-contrast .card,
body.bfw-contrast .product-list,
body.bfw-contrast .product-box,
body.bfw-contrast .product-detail,
body.bfw-contrast .box,
body.bfw-contrast .jtl-box,
body.bfw-contrast .widget,
body.bfw-contrast .sidebar,
body.bfw-contrast .footer,
body.bfw-contrast footer,
body.bfw-contrast .header,
body.bfw-contrast header,
body.bfw-contrast .navbar,
body.bfw-contrast .nav,
body.bfw-contrast .dropdown-menu,
body.bfw-contrast .breadcrumb,
body.bfw-contrast .pagination,
body.bfw-contrast .jtl-modal,
body.bfw-contrast .note,
body.bfw-contrast .alert,
body.bfw-contrast .info,
body.bfw-contrast .tab-content,
body.bfw-contrast .well,
body.bfw-contrast .category-list,
body.bfw-contrast .article-list,
body.bfw-contrast .jtl-banner,
body.bfw-contrast .jtl-header,
body.bfw-contrast .jtl-footer,
body.bfw-contrast .jtl-wizard,
body.bfw-contrast .jtl-search,
body.bfw-contrast .dropdown,
body.bfw-contrast .popup,
body.bfw-contrast .jtl-popup,
body.bfw-contrast .jtl-tooltip,
body.bfw-contrast .popover,
body.bfw-contrast .stepper,
body.bfw-contrast .carousel,
body.bfw-contrast .slick-slider,
body.bfw-contrast .slider,
body.bfw-contrast .jtl-tab {
    background: #181818 !important;
    color: #fff !important;
}

body.bfw-contrast h1,
body.bfw-contrast h2,
body.bfw-contrast h3,
body.bfw-contrast h4,
body.bfw-contrast h5,
body.bfw-contrast h6,
body.bfw-contrast .headline,
body.bfw-contrast .title,
body.bfw-contrast .jtl-heading {
    color: #fff !important;
}

body.bfw-contrast a,
body.bfw-contrast .link,
body.bfw-contrast .btn-link {
    color: #ffd700 !important;
    text-decoration: underline !important;
}

body.bfw-contrast .btn,
body.bfw-contrast [class*="btn-"],
body.bfw-contrast button {
    background: #232323 !important;
    color: #ffd700 !important;
    border-color: #ffd700 !important;
}

body.bfw-contrast .alert,
body.bfw-contrast .info,
body.bfw-contrast .note,
body.bfw-contrast .jtl-hint,
body.bfw-contrast .jtl-warning {
    background: #222 !important;
    color: #fff !important;
    border-color: #ffd700 !important;
}

/* Tabellenlinien kontrastreich machen */
body.bfw-contrast table,
body.bfw-contrast th,
body.bfw-contrast td {
    border-color: #ffd700 !important;
}
body.bfw-contrast table {
    background: #181818 !important;
    color: #fff !important;
}

/* Inputs/Felder */
body.bfw-contrast input,
body.bfw-contrast select,
body.bfw-contrast textarea,
body.bfw-contrast .form-control {
    background: #1e1e1e !important;
    color: #fff !important;
    border-color: #ffd700 !important;
}

/* Icons & SVG */
body.bfw-contrast .icon,
body.bfw-contrast .fa,
body.bfw-contrast .fas,
body.bfw-contrast .far,
body.bfw-contrast svg {
    color: #ffd700 !important;
    fill: #ffd700 !important;
}

/* Optional: Checkboxen und Radio Buttons */
body.bfw-contrast input[type="checkbox"],
body.bfw-contrast input[type="radio"] {
    accent-color: #ffd700 !important;
    border-color: #ffd700 !important;
}

/* Dropdown- und Select-Menüs */
body.bfw-contrast .dropdown-menu,
body.bfw-contrast .dropdown-content,
body.bfw-contrast .ui-menu {
    background: #232323 !important;
    color: #fff !important;
    border-color: #ffd700 !important;
}

body.bfw-noanim *, body.bfw-noanim *::before, body.bfw-noanim *::after {
    transition: none !important;
    animation: none !important;
}
/* Schrift größer: Gilt NICHT für das Panel */
body.bfw-fontlarge *:not(#barrierefrei-widget-panel):not(#barrierefrei-widget-panel *) {
    font-size: 1.03em !important;
}

/* =============== Tastatursteuerung: Fokusrahmen/Animation =============== */
body.bfw-keyboard.bfw-keyboard-focus a:focus,
body.bfw-keyboard.bfw-keyboard-focus input:focus,
body.bfw-keyboard.bfw-keyboard-focus textarea:focus,
body.bfw-keyboard.bfw-keyboard-focus select:focus,
body.bfw-keyboard.bfw-keyboard-focus [tabindex]:focus:not(.btn):not([class*="btn-"]):not(button) {
    outline: 3px solid #ffd700 !important;
    outline-offset: 0px !important;
    animation: digi-global-focus-flash 0.76s cubic-bezier(0.41,0.1,0.56,1.04);
    box-shadow: none;
    z-index: 999999 !important;
    transition: background 0.13s, box-shadow 0.14s, outline 0.14s;
}
/* 2. Für Buttons und Bootstrap-Buttons: KEINE Hintergrundanimation, NUR Outline */
body.bfw-keyboard.bfw-keyboard-focus button:focus:not(#barrierefrei-widget-toggle):not(.bfw-widget-toggle),
body.bfw-keyboard.bfw-keyboard-focus .btn:focus,
body.bfw-keyboard.bfw-keyboard-focus [class*="btn-"]:focus {
    outline: 3px solid #ffd700 !important;
    outline-offset: 0px !important;
    box-shadow: 0 0 0 5px #fffbe7;
    z-index: 999999 !important;
    transition: box-shadow 0.14s, outline 0.14s;
}

@keyframes digi-global-focus-flash {
  0% {
    background: rgba(255,215,0,0.82);
    outline: 3px solid #ffd700;
    box-shadow: 0 0 10px 2px #222;
  }
  35% {
    background: rgba(255,215,0,0.93);
    outline: 3px solid #ffd700;
    box-shadow: 0 0 13px 3px #222;
  }
  85% {
    background: rgba(255,215,0,0.10);
    outline: 3px solid #ffd700;
    box-shadow: 0 0 2px 0px #222;
  }
  100% {
    background: transparent;
    outline: 3px solid #ffd700;
    box-shadow: none;
  }
}

/* =============== Tastatursteuerung: Anmeldebutton =============== */
body.bfw-keyboard.bfw-keyboard-focus .custom-login-btn:focus,
body.bfw-keyboard.bfw-keyboard-focus .custom-login-btn:focus-visible {
    outline: 3px solid #ffd700 !important;
    outline-offset: 0px !important;
    animation: loginbtn-focus-flash 0.76s cubic-bezier(0.41,0.1,0.56,1.04);
    box-shadow: 0 0 0 5px #fffbe7;
    /* KEIN background hier! */
    color: #fff !important;
    z-index: 999999 !important;
}

@keyframes loginbtn-focus-flash {
  0% {
    background: #ffd700;
    color: #222;
  }
  75% {
    background: #ffd700;
    color: #222;
  }
  100% {
    background: #69772C;
    color: #fff;
  }
}

/* === Kognitive Einschränkungen: Links und Container hervorheben === */
body.bfw-linkhighlight a,
body.bfw-linkhighlight .link {
  outline: 2px solid #1976d2 !important;
  background: #e3f0ff !important;
  color: #1856b5 !important;
  border-radius: 3px;
  text-decoration: underline !important;
  padding: 0 2px;
  transition: outline 0.17s, background 0.18s;
}
body.bfw-linkhighlight .bfw-highlight-hover {
  outline: 2px solid #1976d2 !important;
  background: #f1f7fd !important;
  border-radius: 3px;
  transition: outline 0.17s, background 0.18s;
}

/* Fokus im Slider nur um den Artikelnamen */
.product-slider-wrapper .text-left a:focus .item-slider-desc {
  outline: 3px solid #ffd700 !important;
  outline-offset: 0;
  background: transparent;
  box-shadow: none;
  animation: digi-global-focus-flash 0.76s cubic-bezier(0.41,0.1,0.56,1.04);
  transition: background 0.13s, box-shadow 0.14s, outline 0.14s;
}
.consent-btn:focus,
.consent-btn:focus-visible {
  color: #435a6b !important;
}

/* =============== MOBILE =============== */
@media (max-width: 700px) {
  #barrierefrei-widget-toggle {
    left: auto;
    right: 16px;
    bottom: 24px;
    top: auto;
    transform: none;
    width: 56px;
    height: 56px;
  }
  #barrierefrei-widget-panel,
body.bfw-epilepsy #barrierefrei-widget-panel {
    width: 100vw !important;           /* 100vw für Mobile, damit sicher nicht breiter! */
    max-width: 100vw !important;
    min-width: unset !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;       /* Nur das Panel, nicht body! */
    padding: 14px 5vw 10px 5vw !important;
    display: none;
    z-index: 2147483647 !important;
}
#barrierefrei-widget-panel.open {
    display: block !important;
}
  .bfw-switch-row label, .bfw-desc {
    font-size: 1.1em !important;
  }
  #barrierefrei-widget-panel,
  #barrierefrei-widget-panel *,
  .bfw-panel-head h2 {
    font-size: 18px !important;
  }
  .bfw-panel-head {
    min-height: 54px;
    padding-right: 0;
  }
  .bfw-panel-head h2 {
    font-size: 19px !important;
    margin: 0;
    font-weight: 600;
    line-height: 1.1;
    flex: 1 1 auto;
    text-align: left;
  }
  #bfw-panel-close {
    position: absolute;
    right: 14px;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none !important;
    border: 1.5px solid #ffd700;
    border-radius: 13px;
    cursor: pointer;
    z-index: 100;
    padding: 0 !important;
    margin: 0 !important;
    color: #444;
    box-sizing: border-box;
    transition: background 0.13s, outline 0.14s;
    font-size: 0;
  }
  #bfw-panel-close svg {
    width: 32px;
    height: 32px;
    display: block;
  }
  #bfw-panel-close:focus-visible,
  #bfw-panel-close:hover {
    background: #f3f5e3 !important;
    outline: 2px solid #ffd700 !important;
  }
  #barrierefrei-widget-panel button {
    font-size: 17px !important;
    min-height: 46px !important;
    min-width: 46px !important;
    line-height: 1.1 !important;
    padding: 0.2em 0.4em !important;
    border-radius: 8px;
  }
  .bfw-switch-row {
    gap: 0.8em;
  }
  .bfw-desc {
    font-size: 1.03em;
    max-width: 94vw;
    margin-left: 2.7em;
  }
  .bfw-switch {
    min-height: 38px;
  }
  .bfw-switch-row input[type="checkbox"] {
    width: 28px;
    height: 28px;
  }
  .bfw-switch-row label {
    font-size: 18px !important;
    padding-left: 8px;
  }
  /* Accessibility-Felder ausblenden (z.B. Tastatursteuerung, Screenreader) */
  #bfw-keyboard,
  label[for="bfw-keyboard"],
  #bfw-keyboard-desc-text,
  #bfw-screenreader,
  label[for="bfw-screenreader"],
  #bfw-screenreader-desc-text {
      display: none !important;
  }
}

/* =============== Body scroll sperren, wenn Panel offen =============== */
#barrierefrei-widget-fab,
.barrierefrei-widget-fab {
    right: 18px !important;
    bottom: 18px !important;
    max-width: 96vw;
    max-height: 96vh;
    box-sizing: border-box;
}
#barrierefrei-widget-toggle:focus-visible,
#barrierefrei-widget-toggle:focus {
    outline: 3px solid #ffd700 !important;
    outline-offset: 0px !important;
    box-shadow: 0 0 0 5px #fffbe7;
}
body.bfw-epilepsy #barrierefrei-widget-panel,
body.bfw-epilepsy #barrierefrei-widget-panel * {
  pointer-events: auto !important;
}

body.bfw-epilepsy #bfw-panel-close {
  z-index: 2147483650 !important;
  position: relative !important;
  pointer-events: auto !important;
}
/* =============== Seiten-Schräg-Scrollen vermeiden =============== */
html {
    overflow-x: hidden !important;
    width: 100% !important;
}
body {
    width: 100% !important;
    /* Kein overflow-x oder -y, außer im Panel-Open-Zustand! */
}
body.bfw-panel-open {
    overflow: hidden !important;
    /* blockiert Scrollen komplett, NICHT nur y */
}

/* ==== KONTRASTMODUS KORREKTUR FÜR VERSANDSEITE ==== */
body.bfw-contrast .main-container,
body.bfw-contrast .frame,
body.bfw-contrast .frame .content,
body.bfw-contrast .shipping-category,
body.bfw-contrast .accordion-header,
body.bfw-contrast .accordion-content,
body.bfw-contrast .flex-item,
body.bfw-contrast .payment-category {
    background: #181818 !important;
    color: #fff !important;
    border-color: #ffd700 !important;
}

body.bfw-contrast .frame.deutschland,
body.bfw-contrast .frame.österreich,
body.bfw-contrast .frame.schweiz {
    background: #222 !important;
    color: #ffd700 !important;
    border-color: #ffd700 !important;
}

body.bfw-contrast .accordion-header {
    background: #232323 !important;
    color: #ffd700 !important;
}
body.bfw-contrast .accordion-header:focus,
body.bfw-contrast .accordion-header.active {
    background: #333 !important;
    color: #ffd700 !important;
}
body.bfw-contrast .accordion-header::after,
body.bfw-contrast .accordion-header.active::after {
    color: #ffd700 !important;
}
body.bfw-contrast a,
body.bfw-contrast a:link,
body.bfw-contrast a:visited {
    color: #ffd700 !important;
    text-decoration: underline !important;
}
body.bfw-contrast strong {
    color: #fffbe7 !important;
}

body.bfw-contrast h1,
body.bfw-contrast h2,
body.bfw-contrast h3 {
    color: #ffd700 !important;
}