/* ==========================================================
   GR21 MENU SPLIT LINK PATCH
   Hauptkategorie bleibt Link, kleiner Pfeil öffnet Dropdown.
   Datei in /includes/templates/DEIN_TEMPLATE/css/ ablegen.
   ========================================================== */

/* Desktop Kategorien-Topbar */
#topCategoriesBar .gr21-topbar-item {
  position: relative;
}

#topCategoriesBar .gr21-topbar-split {
  display: flex;
  align-items: stretch;
}

#topCategoriesBar .gr21-topbar-main-link {
  display: inline-flex;
  align-items: center;
  padding-right: .35rem;
}

#topCategoriesBar .gr21-topbar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: .45rem .55rem;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  line-height: 1;
}

#topCategoriesBar .gr21-topbar-toggle::after {
  display: none !important;
}

#topCategoriesBar .gr21-topbar-toggle span {
  font-size: .9rem;
  line-height: 1;
}

#topCategoriesBar .gr21-topbar-split > .dropdown-menu {
  top: 100%;
  left: 0;
  margin-top: 0;
}

/* Desktop: Hover darf weiter komfortabel öffnen; Klick auf Text navigiert trotzdem. */
@media (min-width: 992px) {
  #topCategoriesBar .gr21-topbar-split:hover > .dropdown-menu {
    display: block;
  }
}

/* Dropdown: Hauptkategorie oben, Unterkategorien eingerückt, nur bei vielen Links "Alle anzeigen" */
#topCategoriesBar .gr21-dropdown-main-category {
  color: inherit;
  font-weight: 850;
  padding-left: .75rem;
  border-bottom: 1px solid rgba(0,0,0,.08);
  margin-bottom: .25rem;
}

#topCategoriesBar .gr21-dropdown-subcategory {
  padding-left: 1.45rem;
}

#topCategoriesBar .gr21-dropdown-show-all {
  color: inherit;
  font-weight: 800;
  padding-left: 1.45rem;
  border-top: 1px solid rgba(0,0,0,.08);
  margin-top: .25rem;
}

/* Mobile Offcanvas: Kategorie-Link + Toggle-Button */
.gr21-mobile-submenu-row {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.gr21-mobile-main-link {
  flex: 1 1 auto;
  min-width: 0;
}

.gr21-mobile-submenu-toggle {
  flex: 0 0 44px;
  width: 44px;
  min-height: 40px;
  border: 0;
  border-left: 1px solid #e9ecef;
  background: transparent;
  cursor: pointer;
  line-height: 1;
}

.gr21-mobile-submenu-toggle span {
  display: inline-block;
  transition: transform .16s ease;
}

.dropdown-submenu.open > .gr21-mobile-submenu-row .gr21-mobile-submenu-toggle span {
  transform: rotate(90deg);
}

/* Mobile: Hauptkategorie im Untermenü oben, Unterkategorien eingerückt */
.gr21-mobile-menu-main-category {
  color: inherit;
  font-weight: 850;
  padding-left: 14px !important;
  border-bottom: 1px solid #e9ecef;
  margin-bottom: .2rem;
}

.gr21-mobile-subcategory {
  padding-left: 30px !important;
}

.gr21-mobile-show-all {
  color: inherit;
  font-weight: 800;
  padding-left: 30px !important;
  border-top: 1px solid #e9ecef;
  margin-top: .2rem;
}


/* ==========================================================
   GR21 V2 No-Blue-Fix
   Keine blaue Bootstrap-Markierung für aktive/angeklickte Kategorien.
   ========================================================== */
#topCategoriesBar .nav-link.active,
#topCategoriesBar .dropdown-item.active,
#topCategoriesBar .dropdown-item:active,
#topCategoriesBar .nav-link:active {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
}

#topCategoriesBar .dropdown-item:focus,
#topCategoriesBar .nav-link:focus {
  background-color: transparent !important;
  color: inherit !important;
}

#navbarSupportedContent .dropdown-item.active,
#navbarSupportedContent .dropdown-item:active,
#navbarSupportedContent .nav-link.active,
#navbarSupportedContent .nav-link:active {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
}

#navbarSupportedContent .dropdown-item:focus,
#navbarSupportedContent .nav-link:focus {
  background-color: transparent !important;
  color: inherit !important;
}

/* ==========================================================
   GR21 MOBILE DIRECT NAV PATCH
   Kategorien erscheinen direkt im Hamburger-Menü statt unter
   einem zusätzlichen „Shop/Kategorien“-Dropdown.
   ========================================================== */
@media (max-width: 991.98px) {
  #navbarSupportedContent .gr21-mobile-direct-item {
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,.14);
  }

  #navbarSupportedContent .gr21-mobile-direct-row {
    display: flex;
    align-items: stretch;
    width: 100%;
  }

  #navbarSupportedContent .gr21-mobile-direct-link {
    display: block;
    width: 100%;
    padding: .72rem 1rem !important;
    font-weight: 700;
    line-height: 1.25;
    color: inherit !important;
    text-decoration: none !important;
  }

  #navbarSupportedContent .gr21-mobile-direct-main-link {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }

  #navbarSupportedContent .gr21-mobile-direct-toggle {
    flex: 0 0 48px;
    width: 48px;
    min-height: 44px;
    border: 0;
    border-left: 1px solid rgba(255,255,255,.16);
    background: transparent;
    color: inherit;
    cursor: pointer;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #navbarSupportedContent .gr21-mobile-chevron {
    display: inline-block;
    font-size: 1.3rem;
    font-weight: 800;
    transition: transform .16s ease;
  }

  #navbarSupportedContent .gr21-mobile-direct-toggle[aria-expanded="true"] .gr21-mobile-chevron {
    transform: rotate(90deg);
  }

  #navbarSupportedContent .gr21-mobile-direct-submenu {
    list-style: none;
    margin: 0;
    padding: .2rem 0 .35rem;
    background: rgba(255,255,255,.06);
    border-top: 1px solid rgba(255,255,255,.12);
  }

  #navbarSupportedContent .gr21-mobile-direct-subitem {
    display: block;
    width: 100%;
  }

  #navbarSupportedContent .gr21-mobile-direct-subcategory {
    padding: .52rem 1rem .52rem 2rem !important;
    font-weight: 600;
    opacity: .96;
  }

  #navbarSupportedContent .gr21-mobile-direct-show-all {
    margin: .25rem .75rem .15rem 1.35rem;
    padding: .55rem .75rem !important;
    border-radius: .45rem;
    border: 1px solid rgba(255,255,255,.18);
    font-weight: 800;
    background: rgba(255,255,255,.08);
  }

  #navbarSupportedContent .gr21-mobile-documents-item {
    margin-top: .35rem;
    border-top: 1px solid rgba(255,255,255,.2);
  }

  #navbarSupportedContent .gr21-mobile-documents-link::before {
    content: "📄";
    display: inline-block;
    margin-right: .45rem;
  }
}

/* ==========================================================
   GR21 MOBILE NAV DESIGN FIX
   - Blaues Dropdown-Panel auf weiß/grün umstellen
   - Hauptkategorien und Unterkategorien klarer trennen
   - Startseite-Doppelung wird zusätzlich in PHP entfernt
   ========================================================== */
@media (max-width: 991.98px) {
  #navbarSupportedContent {
    margin-top: .7rem;
    padding: .75rem .75rem 1rem !important;
    border-radius: 18px;
    background: #ffffff !important;
    color: #123b20 !important;
    box-shadow: 0 18px 36px rgba(0,0,0,.18);
    border: 1px solid rgba(3,104,17,.14);
  }

  #navbarSupportedContent .navbar-nav {
    width: 100%;
  }

  #navbarSupportedContent .nav-item,
  #navbarSupportedContent .gr21-mobile-direct-item {
    border-bottom: 1px solid #e5eee8 !important;
  }

  #navbarSupportedContent .nav-link,
  #navbarSupportedContent .dropdown-item,
  #navbarSupportedContent .gr21-mobile-direct-link {
    color: #123b20 !important;
  }

  #navbarSupportedContent #nav-home .nav-link,
  #navbarSupportedContent .nav-item[title] > .nav-link {
    font-weight: 850;
  }

  #navbarSupportedContent .gr21-mobile-direct-row {
    min-height: 48px;
    background: linear-gradient(90deg, #ffffff 0%, #f7fbf8 100%);
  }

  #navbarSupportedContent .gr21-mobile-direct-main-link {
    position: relative;
    padding-left: 1.05rem !important;
    font-weight: 900 !important;
    letter-spacing: .01em;
  }

  #navbarSupportedContent .gr21-mobile-direct-main-link::before {
    content: "";
    position: absolute;
    left: .35rem;
    top: 50%;
    width: 4px;
    height: 58%;
    border-radius: 999px;
    background: #036811;
    transform: translateY(-50%);
    opacity: .85;
  }

  #navbarSupportedContent .gr21-mobile-direct-toggle {
    flex-basis: 52px;
    width: 52px;
    min-height: 48px;
    border-left: 1px solid #dbe9df !important;
    background: #eef8f1 !important;
    color: #036811 !important;
  }

  #navbarSupportedContent .gr21-mobile-direct-toggle:hover,
  #navbarSupportedContent .gr21-mobile-direct-toggle:focus {
    background: #dff2e5 !important;
    outline: none;
  }

  #navbarSupportedContent .gr21-mobile-direct-toggle[aria-expanded="true"] {
    background: #036811 !important;
    color: #ffffff !important;
  }

  #navbarSupportedContent .gr21-mobile-direct-submenu {
    margin: 0 0 .35rem !important;
    padding: .45rem .55rem .55rem !important;
    background: #eef8f1 !important;
    border-top: 1px solid #cfe7d5 !important;
    border-left: 4px solid #036811;
    border-radius: 0 0 14px 14px;
  }

  #navbarSupportedContent .gr21-mobile-direct-subcategory {
    display: block;
    margin: .18rem 0 .18rem .55rem;
    padding: .58rem .75rem !important;
    border-radius: 12px;
    background: #ffffff;
    color: #263b2d !important;
    font-weight: 750 !important;
    box-shadow: inset 0 0 0 1px rgba(3,104,17,.08);
  }

  #navbarSupportedContent .gr21-mobile-direct-subcategory:hover,
  #navbarSupportedContent .gr21-mobile-direct-subcategory:focus {
    background: #f8fcf9 !important;
    color: #036811 !important;
    text-decoration: none !important;
  }

  #navbarSupportedContent .gr21-mobile-direct-show-all {
    display: block;
    margin: .5rem .05rem .05rem .55rem !important;
    padding: .65rem .8rem !important;
    border-radius: 12px !important;
    border: 1px solid #036811 !important;
    background: #036811 !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    text-align: center;
  }

  #navbarSupportedContent .gr21-mobile-direct-show-all::after {
    content: " →";
  }

  #navbarSupportedContent .gr21-mobile-documents-item {
    margin-top: .45rem !important;
    border-top: 2px solid #dbe9df !important;
  }

  #navbarSupportedContent .dropdown-menu {
    border: 1px solid #dbe9df !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.10);
  }
}

/* ==========================================================
   GR21 MOBILE NAV SOFT CONTRAST OVERRIDE
   - zurück näher an das blaue Mobile-Menü
   - mehr Kontrast: weiße Hauptlinks statt dunkel auf blau
   - Unterkategorien klarer getrennt, aber ohne schwere grüne Optik
   ========================================================== */
@media (max-width: 991.98px) {
  #navbarSupportedContent {
    margin-top: .55rem !important;
    padding: .35rem .55rem .75rem !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  #navbarSupportedContent .navbar-nav {
    width: 100% !important;
  }

  #navbarSupportedContent .nav-item,
  #navbarSupportedContent .gr21-mobile-direct-item {
    width: 100% !important;
    border-bottom: 1px solid rgba(255,255,255,.18) !important;
  }

  #navbarSupportedContent .nav-link,
  #navbarSupportedContent .dropdown-item,
  #navbarSupportedContent .gr21-mobile-direct-link,
  #navbarSupportedContent #nav-home .nav-link,
  #navbarSupportedContent .nav-item[title] > .nav-link {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-decoration: none !important;
  }

  #navbarSupportedContent .gr21-mobile-direct-row {
    min-height: 48px !important;
    background: transparent !important;
  }

  #navbarSupportedContent .gr21-mobile-direct-main-link {
    padding: .72rem .85rem !important;
    color: #ffffff !important;
    font-weight: 850 !important;
    letter-spacing: .01em !important;
  }

  #navbarSupportedContent .gr21-mobile-direct-main-link::before {
    display: none !important;
    content: none !important;
  }

  #navbarSupportedContent .gr21-mobile-direct-toggle {
    flex: 0 0 48px !important;
    width: 48px !important;
    min-height: 48px !important;
    border-left: 1px solid rgba(255,255,255,.18) !important;
    background: rgba(255,255,255,.10) !important;
    color: #ffffff !important;
  }

  #navbarSupportedContent .gr21-mobile-direct-toggle:hover,
  #navbarSupportedContent .gr21-mobile-direct-toggle:focus,
  #navbarSupportedContent .gr21-mobile-direct-toggle[aria-expanded="true"] {
    background: rgba(255,255,255,.20) !important;
    color: #ffffff !important;
    outline: none !important;
  }

  #navbarSupportedContent .gr21-mobile-chevron {
    color: #ffffff !important;
    font-size: 1.25rem !important;
    font-weight: 900 !important;
  }

  #navbarSupportedContent .gr21-mobile-direct-submenu {
    margin: 0 0 .38rem .55rem !important;
    padding: .32rem .45rem .45rem !important;
    background: rgba(255,255,255,.10) !important;
    border: 0 !important;
    border-top: 1px solid rgba(255,255,255,.16) !important;
    border-left: 3px solid rgba(255,255,255,.42) !important;
    border-radius: 0 0 10px 10px !important;
  }

  #navbarSupportedContent .gr21-mobile-direct-subcategory {
    display: block !important;
    margin: .16rem 0 !important;
    padding: .52rem .65rem .52rem 1rem !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.09) !important;
    color: #ffffff !important;
    font-weight: 650 !important;
    box-shadow: none !important;
  }

  #navbarSupportedContent .gr21-mobile-direct-subcategory:hover,
  #navbarSupportedContent .gr21-mobile-direct-subcategory:focus {
    background: rgba(255,255,255,.16) !important;
    color: #ffffff !important;
    text-decoration: none !important;
  }

  #navbarSupportedContent .gr21-mobile-direct-show-all {
    display: block !important;
    margin: .42rem 0 .08rem 0 !important;
    padding: .58rem .75rem !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    background: rgba(255,255,255,.18) !important;
    color: #ffffff !important;
    font-weight: 850 !important;
    text-align: left !important;
  }

  #navbarSupportedContent .gr21-mobile-direct-show-all:hover,
  #navbarSupportedContent .gr21-mobile-direct-show-all:focus {
    background: rgba(255,255,255,.25) !important;
    color: #ffffff !important;
    text-decoration: none !important;
  }

  #navbarSupportedContent .gr21-mobile-documents-item {
    margin-top: .25rem !important;
    border-top: 1px solid rgba(255,255,255,.20) !important;
  }

  #navbarSupportedContent .dropdown-menu {
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 10px !important;
    background: rgba(0,0,0,.10) !important;
    box-shadow: none !important;
  }
}

/* ==========================================================
   GR21 MOBILE UTILITY ROW
   Startseite / Login-Konto / Suche als eigene Schnellnavigation
   oberhalb der Kategorien im Hamburger-Menü.
   ========================================================== */
@media (max-width: 991.98px) {
  #navbarSupportedContent .gr21-mobile-utility-row {
    display: flex !important;
    align-items: center !important;
    gap: .45rem !important;
    width: 100% !important;
    margin: .1rem 0 .55rem !important;
    padding: .15rem 0 .62rem !important;
    border-bottom: 1px solid rgba(255,255,255,.22) !important;
  }

  #navbarSupportedContent .gr21-mobile-utility-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .38rem !important;
    min-height: 40px !important;
    padding: .55rem .72rem !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    background: rgba(255,255,255,.11) !important;
    color: #ffffff !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  #navbarSupportedContent .gr21-mobile-utility-link:hover,
  #navbarSupportedContent .gr21-mobile-utility-link:focus {
    background: rgba(255,255,255,.20) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    outline: none !important;
  }

  #navbarSupportedContent .gr21-mobile-utility-link i {
    font-size: 1rem !important;
    line-height: 1 !important;
  }

  #navbarSupportedContent .gr21-mobile-utility-search {
    margin-left: auto !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #navbarSupportedContent .gr21-mobile-utility-row + .navbar-nav {
    margin-top: 0 !important;
  }

  #navbarSupportedContent .gr21-mobile-utility-search {
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
  }

  /* Abstand unten, damit das Livechat-Icon den letzten Menüpunkt nicht überdeckt. */
  #navbarSupportedContent {
    padding-bottom: 5.75rem !important;
  }

  #navbarSupportedContent .navbar-nav {
    padding-bottom: 5.75rem !important;
  }

  #navbarSupportedContent .navbar-nav > li:last-child {
    margin-bottom: 1.25rem !important;
  }
}

@media (max-width: 370px) {
  #navbarSupportedContent .gr21-mobile-utility-link {
    padding-left: .55rem !important;
    padding-right: .55rem !important;
    font-size: .92rem !important;
  }

  #navbarSupportedContent .gr21-mobile-utility-search {
    flex-basis: 40px !important;
    width: 40px !important;
  }
}

/* ==========================================================
   GR21 MOBILE SEARCH MODAL
   Search icon opens a normal quick-search popup on mobile.
   ========================================================== */
@media (max-width: 991.98px) {
  body.gr21-mobile-search-open {
    overflow: hidden !important;
  }

  .gr21-mobile-search-modal[hidden] {
    display: none !important;
  }

  .gr21-mobile-search-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 5.25rem 1rem 1rem !important;
  }

  .gr21-mobile-search-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0,0,0,.45) !important;
  }

  .gr21-mobile-search-panel {
    position: relative !important;
    z-index: 1 !important;
    width: min(100%, 520px) !important;
    padding: 1rem !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    color: #053817 !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.28) !important;
  }

  .gr21-mobile-search-close {
    position: absolute !important;
    top: .65rem !important;
    right: .65rem !important;
    width: 38px !important;
    height: 38px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #eef7f0 !important;
    color: #053817 !important;
    font-size: 1.65rem !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    cursor: pointer !important;
  }

  .gr21-mobile-search-panel h2 {
    margin: 0 2.7rem .25rem 0 !important;
    color: #053817 !important;
    font-size: 1.35rem !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
  }

  .gr21-mobile-search-help {
    margin: 0 2.7rem .85rem 0 !important;
    color: #506159 !important;
    font-size: .95rem !important;
  }

  .gr21-mobile-search-form {
    margin: 0 !important;
  }

  .gr21-mobile-search-input-row {
    display: flex !important;
    gap: .55rem !important;
    align-items: stretch !important;
  }

  .gr21-mobile-search-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 48px !important;
    padding: 0 .85rem !important;
    border: 1px solid #cfe1d4 !important;
    border-radius: 12px !important;
    background: #f8fcf9 !important;
    color: #102d1b !important;
    font-size: 1rem !important;
    outline: none !important;
  }

  .gr21-mobile-search-input:focus {
    border-color: #036811 !important;
    box-shadow: 0 0 0 .18rem rgba(3,104,17,.12) !important;
    background: #ffffff !important;
  }

  .gr21-mobile-search-submit {
    flex: 0 0 auto !important;
    min-width: 52px !important;
    height: 48px !important;
    padding: 0 .9rem !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #036811 !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .4rem !important;
  }
}