/* ==========================================================
   BT HEADER – DESKTOP CSS (>= 769px)
   Phase 1: unveränderter Desktop-Stand aus bt-header.css.
   ========================================================== */

/* ==========================================================
   BT HEADER SSOT – CSS
   Zweck: Header + Topbar + Main-Navigation (GeneratePress) inkl. Sticky/UI
   Warum: Lesbarkeit + spätere Splits (kritisch / non-kritisch) ohne Gefrickel
   Hinweis: KEINE Designänderung – nur Struktur/Kommentare

   SUBSYSTEM: HEADER TOPBAR
   SUBSYSTEM: HEADER LAYOUT
   SUBSYSTEM: NAVIGATION
   SUBSYSTEM: STICKY SYSTEM
   FINAL OVERRIDES
   ========================================================== */

/* EVENT MEGA – INITIAL SAFETY Default: Mega Markup darf niemals im normalen Flow sichtbar sein */
@media (min-width: 769px) {
  .bt-event-mega,
  .bt-shop-mega {
    display: none !important;
  }

  /* Nur der jeweilige Mega-Trigger darf sein eigenes Mega sichtbar machen */
  .main-navigation
    .main-nav
    > ul
    > li.bt-mega--event.bt-mega-open
    > .bt-event-mega,
  .main-navigation
    .main-nav
    > ul
    > li.bt-mega--shop.bt-mega-open
    > .bt-shop-mega,
  .main-navigation
    .main-nav
    > ul
    > li.bt-mega--event:focus-within
    > .bt-event-mega,
  .main-navigation
    .main-nav
    > ul
    > li.bt-mega--shop:focus-within
    > .bt-shop-mega,
  .main-navigation
    .main-nav
    > ul
    > li.bt-nav-more
    .bt-nav-more-menu
    > li.bt-mega--event:hover
    > .bt-event-mega,
  .main-navigation
    .main-nav
    > ul
    > li.bt-nav-more
    .bt-nav-more-menu
    > li.bt-mega--shop:hover
    > .bt-shop-mega,
  .main-navigation
    .main-nav
    > ul
    > li.bt-nav-more
    .bt-nav-more-menu
    > li.bt-mega--event:focus-within
    > .bt-event-mega,
  .main-navigation
    .main-nav
    > ul
    > li.bt-nav-more
    .bt-nav-more-menu
    > li.bt-mega--shop:focus-within
    > .bt-shop-mega {
    display: block !important;
  }
}

/* ==========================================================
   SECTION: Navigation – Cart Item (Header Menu)
   ========================================================== */

/* header cart */
.main-navigation .menu-item-cart > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.main-navigation .menu-cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;
  background: rgba(0, 0, 0, 0.08);
}

.main-navigation .menu-bar-item > a {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-right: 0;
  margin-left: 60px;
}

/* ==========================================================
   SUBSYSTEM: HEADER TOPBAR
   Datei später: bt-header-topbar.css

   Enthält:
   - Topbar Layout
   - Icon Logic
   - Mobile Kontakt Dropdown
   - Mobile Konto Dropdown
   ========================================================== */

#bt-topbar {
  position: sticky;
  top: 0;
  z-index: 700;

  height: 31px;
  padding: 0;
  box-sizing: border-box;

  background: #80566d;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  color: #f4f5f4 !important;
}

#bt-topbar .bt-topbar-inner {
  max-width: 1465px;
  height: 30px;
  margin: 0 auto;
  padding: 16px 15px;
  box-sizing: border-box;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;

  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.2px;
}

#bt-topbar .bt-topbar__label {
  opacity: 0.85;
  color: #f4f5f4;
}

#bt-topbar .bt-topbar__value {
  text-decoration: none;
  color: #f4f5f4;
}

#bt-topbar .bt-topbar-left .bt-topbar__value {
  font-weight: 600;
}

/* ==========================================================
   SECTION: Topbar – Responsive Icon-Logik
   ========================================================== */

/* ==========================================================
   Responsive Topbar Icon-Logik
   Zweck:
   - >660px: Nur Text (Premium clean)
   - ≤660px: Icons + Werte, Labels aus
   ========================================================== */

/* Desktop default: Icons komplett aus */
#bt-topbar .bt-topbar__icon {
  display: none;
}

/* ==========================================================
   GLOBAL   ===>   GP Mobile Menu
   ========================================================== */

#site-navigation.toggled .inside-navigation.grid-container {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
}

/* GP Mobile Menu – Help Panel (unter Menü-Items)
   ============================================= */
.bt-mobile-menu-help {
  display: none;
}

@media (max-width: 768px) {
  #site-navigation.toggled .bt-mobile-menu-help {
    display: block;

    /* bündig im Drawer */
    padding: 14px 0 18px;
    margin: 14px 0 0;

    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }

  #site-navigation.toggled .bt-mobile-menu-help-inner {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  #site-navigation.toggled .bt-mobile-menu-help-inner a {
    display: flex;
    align-items: center;

    min-height: 48px;
    line-height: 1.2;

    padding: 10px 12px;
    border-radius: 10px;

    text-decoration: none;
    color: #414544;

    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.7);
  }

  #site-navigation.toggled .bt-mobile-menu-help-meta {
    font-size: 12.5px;
    opacity: 0.7;
  }
}
@media (max-width: 768px) {
  /* ==========================================================
     PATCH 2026-03-04
     Mobile Drawer Header Layout – Cart stabil im Header
     Warum:
     Absolute Positioning driftete je nach Breakpoint, weil
     GP im toggled Zustand eigene Layout-Container erzeugt.
     Lösung:
     Header-Zeile bleibt Flex-Layout → Cart rechts via margin.
     ========================================================== */

  /* Header-Zeile stabil halten */
  #site-navigation.toggled .inside-navigation {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap !important;
    padding: 12px 16px !important; /* macht „nicht oben klebend“ */
    min-height: 56px; /* stabile Header-Zeilenhöhe */

    position: relative; /* z-index wirksam */
    z-index: 1001; /* über .main-nav */
  }

  /* Cart nach rechts schieben */
  #site-navigation.toggled .menu-bar-items {
    position: static;
    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 10px;
    z-index: 999999; /* Cart wirklich oben */
  }

  #site-navigation.toggled .menu-bar-item.menu-item-cart {
    display: flex;
    margin: 0;
  }

  #site-navigation.toggled .menu-item-cart > a {
    padding: 6px 8px;
  }

  /* Trennlinie im Header-Row (immer volle Breite, kann nicht “unterbrochen” werden) */
  #site-navigation.toggled .inside-navigation::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    pointer-events: none;
  }
}

@media (max-width: 480px) {
  #bt-topbar .bt-topbar-left,
  #bt-topbar .bt-topbar-right {
    font-size: 13px;
  }
}

/* ==========================================================
   SUBSYSTEM: HEADER LAYOUT
   Datei später: bt-header-layout.css

   Enthält:
   - Logo
   - Search
   - Header Actions
   ========================================================== */

/* HAUPT-HEADER */
.bt-container {
  max-width: 1465px;
  margin: 0 auto;
  padding: 0 20px;
}

.bt-header {
  padding: 40px 0; /* weniger vertikale Wucht */
}

.bt-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.bt-header__logo {
  order: 1;
  flex: 0 0 auto;
  margin-right: 16px;
  padding-right: 6px;
}

.bt-header__logo img {
  width: clamp(160px, 18vw, 335px);
  max-width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================
   Tagline / Untertitel unter dem Logo (GeneratePress Free)
   Zweck: kurzer Service-Satz unter Logo, premium-clean
   ========================================================== */
.bt-header__tagline {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.2;
  font-style: italic;
  color: #414544 !important;
  text-align: center;
  opacity: 0.9;
  white-space: nowrap;
}

/* ==========================================================
   SECTION: Header – Search (SSOT)
   ========================================================== */

/* SEARCH */
.bt-header__search--desktop {
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
}

/* ==========================================================
   Search SSOT (Desktop + Mobile)
   ========================================================== */
.bt-header__search input[type="search"],
.bt-header__search input.search-field,
.bt-header__search input[name="s"] {
  box-sizing: border-box;

  padding: 10px 16px 10px 44px; /* schlanker */

  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 4px;

  background-color: #ffffff;

  font-size: 15px;
  color: #414544;

  transition: border-color 0.2s ease;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 18px center;
  background-size: 18px 18px;

  padding-left: 48px;
}

.bt-header__search input[type="search"]:focus,
.bt-header__search input.search-field:focus,
.bt-header__search input[name="s"]:focus {
  outline: none;
  box-shadow: none;
}

.bt-header__search--desktop input[type="search"]:focus {
  outline: none;
  border-color: rgba(65, 69, 68, 0.45);
  background-color: #ffffff;
  box-shadow: none;
}

.bt-header__search--desktop .bt-search-cat:hover,
.bt-sidebar-product-search .bt-search-cat:hover {
  background-color: #765064;
  border-color: #765064;
}

.bt-header__search--desktop .bt-search-inline input.search-field:hover,
.bt-sidebar-product-search input.search-field:hover {
  border-color: rgba(0, 0, 0, 0.18);
}

.bt-header__search input[type="search"]::placeholder {
  color: #9aa0a0;
  font-size: 15px;
  font-weight: 400;
}
/* ==========================================================
   PATCH 2026-03-15
   Header Search: Kategorie-Selector
   Zweck:
   - Kategorie und Suchfeld als zusammengehörige Einheit
   - nur 2px Abstand
   - Rundungen ausschließlich an den äußeren Kanten
   - keine Border an den beiden inneren Kanten
   - eigener Select-Pfeil bleibt erhalten
   ========================================================== */

.bt-search-inline {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.bt-header__search .bt-search-cat,
.bt-sidebar-product-search .bt-search-cat {
  border: 1px solid #80566d;

  background-color: #80566d;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 16px 16px;

  padding: 2px 38px 0 12px;

  color: #fff;
  font-size: 14px;
  line-height: 1.2;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.bt-header__search .bt-search-cat {
  flex: 0 0 auto;
  min-width: 140px;
  max-width: 190px;

  border-radius: 8px 0 0 8px;
  background-position: right 12px center;
  background-size: 20px 20px;
}

.bt-header__search .bt-search-cat option,
.bt-sidebar-product-search .bt-search-cat option {
  background-color: #fff;
  color: #414544;
}

.bt-header__search .bt-search-inline input.search-field {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0 8px 8px 0;
}

.bt-header__search .bt-search-cat:focus,
.bt-header__search .bt-search-cat:focus-visible,
.bt-sidebar-product-search .bt-search-cat:focus,
.bt-sidebar-product-search .bt-search-cat:focus-visible {
  outline: none;
  box-shadow: none;
  background-color: #80566d;
  border-color: #80566d;
}

.bt-search-inline button[type="submit"] {
  border-radius: 0 8px 8px 0;
}

@media (max-width: 768px) {
  .bt-header__search .bt-search-cat {
    min-width: 120px;
    max-width: 150px;
    padding: 0 34px 0 10px;
    background-position: right 10px center;
    font-size: 13px;
  }
}

/* ==========================================================
   SECTION: Header – Actions (Contact-Bar)
   ========================================================== */

/* CONTACT-BAR */
/***************/
.bt-header__actions {
  order: 3;
  display: flex;
  align-items: center;
  gap: 22px;
  white-space: nowrap;
}

.bt-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  font-size: 15px;
  color: #414544;
  opacity: 0.75;
  text-decoration: none;
  transition:
    opacity 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

/* FAQ & Kontakt bewusst ruhiger */
.bt-header__actions a:not(.bt-action--checkout):not(.bt-action--faq) {
  opacity: 0.75;
}

.bt-header__actions a:not(.bt-action--checkout):not(.bt-action--faq):hover {
  opacity: 1;
}

/* ==========================================================
   SECTION: Header – Account (Desktop) / FAQ Button
   ========================================================== */

/* Icon vor Summary (Dropdown) Zweck: Icon wieder sichtbar nach Umstellung Link -> <details><summary>.*/
#bt-header details.bt-action--account-dd > summary.bt-action__summary::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-right: 6px;
  display: inline-block;
  vertical-align: middle;

  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  opacity: 0.8;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23414544' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M5.5 21a6.5 6.5 0 0 1 13 0'/%3E%3C/svg%3E");
}

/* ==========================================================
   FAQ Button – Hover/Fokus SSOT (immer Pink, nie Theme-Dark)
   ========================================================== */
#bt-header .bt-header__actions a.bt-action--faq {
  padding: 6px 12px;
  border-radius: 6px;

  background: #ffffff;
  border: 1px solid #80566d;

  color: #80566d !important;
  opacity: 1;

  text-transform: none;
  letter-spacing: 0;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

#bt-header .bt-header__actions a.bt-action--faq:hover,
#bt-header .bt-header__actions a.bt-action--faq:focus,
#bt-header .bt-header__actions a.bt-action--faq:focus-visible {
  color: #80566d !important;
  background: rgba(228, 44, 140, 0.06);
  border-color: #80566d;
  outline: none;
}

/* ==========================================================
   SECTION: Header – Mobile Search (Desktop Off)
   ========================================================== */

/* Desktop: Mobile-Search gibt es nicht */
@media (min-width: 901px) {
  #bt-mobile-search {
    display: none !important;
  }
}

/* ==========================================================
   SUBSYSTEM: HEADER NAVIGATION
   Datei später: bt-header-navigation.css

   Enthält:
   - Main Navigation
   - Hover Lines
   - Home Icon
   - Menu Styling
   ========================================================== */
.main-navigation .main-nav {
  margin-left: 0;
  transition: margin-left 0.35s ease;
  /* will-change: margin-left; besser=will-change: auto; noch besser loeschen*/

  flex: 1 1 auto;
  min-width: 0;
}

.main-navigation.bt-is-sticky .main-nav {
  margin-left: var(--bt-sticky-logo-space);
  transform: none;
}

/* ==========================================================
   SECTION: Breakpoints – Header kompakter / Actions wrap
   ========================================================== */

/* BREAKPOINT 537px – kompakter Modus */
@media (max-width: 537px) {
  .bt-header__logo img {
    width: 160px;
    max-width: 100%;
    height: auto;
    max-height: none;
  }

  .bt-header__tagline {
    margin-top: 4px;
    font-size: 11.5px;
    white-space: normal;
    text-align: left;
  }

  .bt-header__actions {
    gap: 12px;
    font-size: 13px;
  }
}

/* ganz kleine Screens: Actions umbrechen dürfen */
@media (max-width: 520px) {
  .bt-header__logo img {
    width: 145px;
  }

  .bt-header__actions {
    flex-wrap: wrap;
    row-gap: 10px;
  }
}

/* ==========================================================
   SUBSYSTEM: HEADER STICKY SYSTEM
   Datei später: bt-header-sticky.css

   Enthält:
   - Sticky Navigation Container
   - Sticky Logo
   - Navigation Shift
   ========================================================== */

:root {
  --bt-sticky-logo-space: 80px;
}

.main-navigation {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 31px);
  z-index: 9;

  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.main-navigation.bt-is-sticky {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.main-navigation .inside-navigation {
  max-width: 1465px;
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  padding: 0px 15px 0px 15px !important;
}

@media (max-width: 800) {
  /* ==========================================================
     PATCH 2026-03-16
     BREAKPOINT ≤920 (SSOT)
     Zweck:
     Header im Tablet-Bereich strikt auf 2 Zeilen aufteilen:
     - Zeile 1: Logo links, Actions rechts
     - Zeile 2: Suche mittig
     Warum:
     Das DOM ist Logo > Suche > Actions.
     Mit Flex-Wrap kippt deshalb die Suche/Actions-Reihenfolge instabil.
     Grid erzwingt die gewünschte Struktur deterministisch.
     ========================================================== */
  #bt-header.bt-header {
    padding: 40px 0 10px;
  }
  /* ==========================================================
     PATCH 2026-03-26
     Header Grid ≤920px: Logo + Actions oben, Suche allein unten
     Warum:
     - grid-template-areas erzwingt deterministisch Zeile 1 = Logo/Actions,
       Zeile 2 = Suche allein – unabhängig von DOM-Reihenfolge.
     ========================================================== */
  #bt-header .bt-header__inner {
    display: grid !important;
    grid-template-columns: minmax(0, auto) 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "logo actions"
      "search search";
    align-items: center;
    column-gap: 14px;
    row-gap: 12px;
  }

  #bt-header .bt-header__logo {
    grid-area: logo;
    min-width: 0;
    margin-right: 0;
    padding-right: 0;
  }

  #bt-header .bt-header__actions {
    grid-area: actions;
    justify-self: end;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap !important;
    gap: 10px;

    width: auto !important;
    min-width: 0;
    margin-left: 0;
    white-space: nowrap;
  }

  #bt-header .bt-header__search--desktop {
    grid-area: search;

    display: flex !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 0 !important;
  }

  #bt-header .bt-header__search--desktop form,
  #bt-header .bt-header__search--desktop form.woocommerce-product-search,
  #bt-header .bt-header__search--desktop .woocommerce-product-search {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  #bt-header .bt-header__search--desktop .bt-search-inline {
    width: 100%;
    min-width: 0;
  }

  /* Tablet leicht kompakter, damit Actions sicher oben bleiben */
  #bt-header .bt-header__logo img {
    max-height: 84px;
  }

  #bt-header .bt-header__actions .bt-action,
  #bt-header .bt-header__actions .bt-action__summary {
    font-size: 13px;
  }

  #bt-header .bt-header__actions a.bt-action--faq {
    padding: 5px 10px;
  }

  .main-navigation .main-nav > ul > li > a {
    padding: 7px 14px;
    letter-spacing: 0.5px;
  }
}

/* Burger-Phase (≤768): Actions wirklich aus
   Warum: ab hier übernimmt Mobile Menu, Actions würden doppeln/sprengen. */

/* @media (max-width: 768px) {
  #bt-header .bt-header__actions {
    display: none !important; 
  }
} */

/* ==========================================================
   PATCH 2026-02-28
   Sticky Menü – SSOT: nur EIN Shift-System (kein Transform)
   Warum: transform-shift + Desktop-Overrides -> Drift/Snap bei ~900px.
   Fix: global KEIN Shift; Desktop ≥901 verschiebt per margin-left (Layout). 
   ========================================================== */

.main-navigation .bt-sticky-logo {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-40px, -50%);
  opacity: 0;
  pointer-events: none;

  display: inline-flex !important;
  align-items: center !important;
  min-width: 120px;

  transition:
    transform 0.35s ease,
    opacity 0.2s ease;
  transition-delay: 0s;
  will-change: transform, opacity;
}

.main-navigation.bt-is-sticky .bt-sticky-logo {
  transform: translate(
    10px,
    -50%
  ); /* PATCH 2026-02-28: Auto 40px weiter rein */
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.14s;
}

.main-navigation .bt-sticky-logo img {
  max-height: 33px;
  width: auto;
  height: auto;
  display: block;
}

/* ==========================================================
   NAVIGATION VISUALS – Hover & Active (nicht Sticky)
   Zweck: reine UI-Visuals, keine Layout-Logik.
   ========================================================== */

/* ==========================================================
   PATCH 2026-03-07
   Premium Main Navigation Hover & Active – stabiler SSOT Stand
   Warum:
   - Linien animieren sauber von der Mitte
   - kein translateY
   - kein letter-spacing auf dem echten <a>, weil das Layout-Zittern erzeugt
   - Mega- und normale Kategorien behalten getrennte Längenregler
   ========================================================== */
.bt-nav-text {
  display: inline-block;
}

.main-navigation .main-nav > ul > li:not(.bt-nav-more) > a {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;

  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
  color: #414544;

  transition: color 0.2s ease;
  padding: 0 10px 0 5px !important;
  min-width: max-content;
}

.menu-item-has-children .dropdown-menu-toggle {
  padding-right: 10px;
  padding-left: 4px;
}

.main-navigation .main-nav > ul > li:not(.bt-nav-more) > a::before,
.main-navigation .main-nav > ul > li:not(.bt-nav-more) > a::after {
  content: "";
  position: absolute;
  height: 1px;
  background: #e42c8c;
  opacity: 0;
  transform: scaleX(0.08);
  transform-origin: center;
  transition:
    transform 0.48s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.22s ease;
  pointer-events: none;
}

.main-navigation .main-nav > ul > li:not(.bt-nav-more) > a::after {
  transition-delay: 0.04s;
}

/* Feineinstellung Länge normale Shop-Kategorien inkl. Home */
.main-navigation
  .main-nav
  > ul
  > li:not(.bt-nav-more):not(.bt-mega--event):not(.bt-mega--shop)
  > a::before,
.main-navigation
  .main-nav
  > ul
  > li:not(.bt-nav-more):not(.bt-mega--event):not(.bt-mega--shop)
  > a::after {
  left: 5px;
  right: 9px;
}

/* Feineinstellung Länge Mega-Kategorien */
.main-navigation .main-nav > ul > li.bt-mega--event > a::before,
.main-navigation .main-nav > ul > li.bt-mega--event > a::after,
.main-navigation .main-nav > ul > li.bt-mega--shop > a::before,
.main-navigation .main-nav > ul > li.bt-mega--shop > a::after {
  left: 6px;
  right: 20px;
}

/* Feineinstellung Höhe / vertikale Balance */
.main-navigation .main-nav > ul > li:not(.bt-nav-more) > a::before {
  top: 8px;
}

.main-navigation .main-nav > ul > li:not(.bt-nav-more) > a::after {
  bottom: 8px;
}

.main-navigation .main-nav > ul > li:not(.bt-nav-more) > a:hover,
.main-navigation .main-nav > ul > li:not(.bt-nav-more) > a:focus,
.main-navigation .main-nav > ul > li:not(.bt-nav-more) > a:focus-visible,
.main-navigation .main-nav > ul > li:not(.bt-nav-more).current-menu-item > a,
.main-navigation
  .main-nav
  > ul
  > li:not(.bt-nav-more).current-menu-ancestor
  > a,
.main-navigation .main-nav > ul > li:not(.bt-nav-more):focus-within > a,
.main-navigation .main-nav > ul > li:not(.bt-nav-more).bt-mega-open > a {
  color: #e42c8c !important;
  text-decoration: none;
  background: transparent !important;
  box-shadow: none !important;
}

.main-navigation .main-nav > ul > li:not(.bt-nav-more) > a:hover::before,
.main-navigation .main-nav > ul > li:not(.bt-nav-more) > a:hover::after,
.main-navigation .main-nav > ul > li:not(.bt-nav-more) > a:focus::before,
.main-navigation .main-nav > ul > li:not(.bt-nav-more) > a:focus::after,
.main-navigation
  .main-nav
  > ul
  > li:not(.bt-nav-more)
  > a:focus-visible::before,
.main-navigation .main-nav > ul > li:not(.bt-nav-more) > a:focus-visible::after,
.main-navigation
  .main-nav
  > ul
  > li:not(.bt-nav-more).current-menu-item
  > a::before,
.main-navigation
  .main-nav
  > ul
  > li:not(.bt-nav-more).current-menu-item
  > a::after,
.main-navigation
  .main-nav
  > ul
  > li:not(.bt-nav-more).current-menu-ancestor
  > a::before,
.main-navigation
  .main-nav
  > ul
  > li:not(.bt-nav-more).current-menu-ancestor
  > a::after,
.main-navigation .main-nav > ul > li:not(.bt-nav-more):focus-within > a::before,
.main-navigation .main-nav > ul > li:not(.bt-nav-more):focus-within > a::after,
.main-navigation .main-nav > ul > li:not(.bt-nav-more).bt-mega-open > a::before,
.main-navigation .main-nav > ul > li:not(.bt-nav-more).bt-mega-open > a::after {
  opacity: 1;
  height: 1px;
  transform: scaleX(1);
}

/* ==========================================================
   NAVIGATION – DROPDOWN- UND HOCHZEITEN-PFEILE
   ========================================================== */

.main-navigation .gp-icon.icon-arrow svg,
.main-navigation
  .main-nav
  > ul
  > #menu-item-6502
  > a
  .bt-nav-static-mega-arrow
  svg {
  width: 18px;
  height: 18px;

  transform: rotate(0deg);
  transform-origin: center;
  transition: transform 0.34s ease;
}

.main-navigation
  .main-nav
  > ul
  > #menu-item-6502
  > a
  .bt-nav-static-mega-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;
  margin-left: 4px;
  margin-right: 10px;

  flex: 0 0 18px;
  line-height: 1;

  transform: translateY(2px);
}

/* Normale GeneratePress-Pfeile */
.main-navigation .main-nav > ul > li:hover > a .gp-icon.icon-arrow svg,
.main-navigation .main-nav > ul > li:focus-within > a .gp-icon.icon-arrow svg,
.main-navigation .main-nav > ul > li.bt-mega-open > a .gp-icon.icon-arrow svg {
  transform: rotate(180deg) translateY(1px) scale(1.18);
}

/* Hochzeiten: sofort bei Hover drehen und im offenen Zustand halten */
.main-navigation
  .main-nav
  > ul
  > #menu-item-6502:hover
  > a
  .bt-nav-static-mega-arrow
  svg,
.main-navigation
  .main-nav
  > ul
  > #menu-item-6502:focus-within
  > a
  .bt-nav-static-mega-arrow
  svg,
.main-navigation
  .main-nav
  > ul
  > #menu-item-6502.bt-shop-mega-v2-open
  > a
  .bt-nav-static-mega-arrow
  svg {
  transform: rotate(180deg) translateY(1px) scale(1.18);
}

/* ==========================================================
   ==========================================================
   FINAL OVERRIDES – ABSOLUTE PRIORITY ZONE (SSOT)
   ==========================================================
   Regeln hier:
   - dürfen bewusst Base/Breakpoint übersteuern
   - enthalten !important nur wenn technisch nötig
   - sind NICHT für Layout-Definition gedacht
   - sind nicht splitten ohne komplette Prüfung
   ========================================================== */

#bt-header .bt-header__search--desktop form,
#bt-header .bt-header__search--desktop form.woocommerce-product-search,
#bt-header .bt-header__search--desktop .woocommerce-product-search {
  display: flex;
  width: 100%;
  max-width: 480px; /* ← Desktop Wunschbreite */
  margin: 0 auto;
}

#bt-header .bt-header__search--desktop input[type="search"],
#bt-header .bt-header__search--desktop input.search-field,
#bt-header .bt-header__search--desktop input[name="s"] {
  flex: 1 1 auto !important;
  max-width: none !important;
  min-width: 0 !important;
  font-size: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* ----------------------------
   (1) DESKTOP SEARCH: nicht mini
   ---------------------------- */
#bt-header .bt-header__search--desktop {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

/* ----------------------------
   (2) TOPBAR: Desktop Dropdowns AUS (SSOT)
   Warum: Kontakt + Konto nur Mobile sichtbar (≤460 / ≤365).
   ---------------------------- */
#bt-topbar .bt-topbar-contact,
#bt-topbar .bt-topbar-account {
  display: none !important;
}

/* ==========================================================
   HEADER KOMPAKTMODUS ≤920px
   Zweck:
   - Hotline und E-Mail ausblenden
   - Kontakt und Mein Konto in die Topbar verschieben
   - Kontakt und Mein Konto aus den Header-Actions entfernen
   - kein separater Icon-Zwischenzustand
   ========================================================== */
@media (max-width: 1050px) {
  #bt-topbar .bt-topbar-left,
  #bt-topbar .bt-topbar-right {
    display: none !important;
  }

  #bt-header .bt-header__actions a.bt-action[href="/kontakt/"],
  #bt-header .bt-header__actions a.bt-action--account {
    display: none !important;
  }

  #bt-header .bt-action--account-dd > summary {
    display: none !important;
  }

  #bt-header .bt-header__actions {
    gap: 12px;
  }

  #bt-topbar .bt-topbar-inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 8px !important;
    padding: 0 15px !important;

    line-height: 1 !important;
  }

  #bt-topbar .bt-topbar-contact,
  #bt-topbar .bt-topbar-account {
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;

    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap !important;
    line-height: 1 !important;
  }

  #bt-topbar .bt-topbar-account {
    margin-left: auto !important;
  }

  #bt-topbar .bt-topbar-contact__summary,
  #bt-topbar .bt-topbar-account__summary {
    display: inline-flex !important;
    align-items: center !important;

    list-style: none;
    cursor: pointer;

    padding: 2px 7px !important;

    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    color: #f4f5f4 !important;
    border: 1px solid rgba(244, 245, 244, 0.45) !important;
    border-radius: 5px !important;
    background: rgba(255, 255, 255, 0.06) !important;

    white-space: nowrap !important;
  }

  #bt-topbar .bt-topbar-contact__summary::-webkit-details-marker,
  #bt-topbar .bt-topbar-account__summary::-webkit-details-marker {
    display: none;
  }

  #bt-topbar .bt-topbar-contact__panel,
  #bt-topbar .bt-topbar-account__panel {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    z-index: 9999 !important;

    margin: 0 !important;
    padding: 10px !important;

    min-width: 260px !important;
    max-width: calc(100vw - 30px) !important;

    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18) !important;

    box-sizing: border-box !important;
  }

  #bt-topbar .bt-topbar-contact__panel {
    left: 0 !important;
    right: auto !important;
  }

  #bt-topbar .bt-topbar-account__panel {
    right: 0 !important;
    left: auto !important;

    min-width: 140px !important;
    max-width: 180px !important;
  }

  #bt-topbar .bt-topbar-contact__item,
  #bt-topbar .bt-topbar-account__item {
    display: block;

    padding: 8px 6px;

    text-decoration: none;
    white-space: nowrap;

    color: #414544;
    font-size: 14px;
    line-height: 1.2;
  }

  #bt-topbar .bt-topbar-account__item {
    text-align: left;
  }

  #bt-topbar .bt-topbar-contact__item + .bt-topbar-contact__item,
  #bt-topbar .bt-topbar-account__item + .bt-topbar-account__item {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }
}

/* ----------------------------
   (3) TOPBAR ≤460: Tel/Mail weg, Kontakt an, Panel als Overlay
   ---------------------------- */
/* ----------------------------
   (3) TOPBAR ≤460: Tel/Mail weg, Kontakt an, Panel als Overlay
   SSOT: Kontakt komplett sauber; Konto kommt erst ≤365
   ---------------------------- */
@media (max-width: 460px) {
  /* Topbar Basis */
  #bt-topbar {
    background: #e42c8c !important;
    color: #f4f5f4 !important;
    padding: 0 !important;
  }

  /* Tel + Mail weg */
  #bt-topbar .bt-topbar-left,
  #bt-topbar .bt-topbar-right {
    display: none !important;
  }

  /* Kontakt Wrapper (Anchor fürs Overlay) */
  #bt-topbar .bt-topbar-contact {
    display: inline-block !important;
    position: relative !important;
    margin-right: auto !important;

    white-space: nowrap !important;
    line-height: 1 !important;
  }

  /* Topbar Layout stabil */
  #bt-topbar .bt-topbar-inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    padding: 0 12px !important; /* SSOT */
    gap: 8px !important;

    line-height: 1 !important;
    min-height: 40px !important;

    align-items: center !important;
    justify-content: flex-start !important;
  }

  /* Kontakt Button (≤460 SSOT) */
  #bt-topbar .bt-topbar-contact__summary {
    display: inline-flex !important;
    align-items: center !important;

    list-style: none;
    cursor: pointer;

    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    padding: 3px 8px !important;

    color: #f4f5f4 !important;
    border: 1px solid rgba(244, 245, 244, 0.45) !important;
    border-radius: 5px !important;
    background: rgba(255, 255, 255, 0.06) !important;

    white-space: nowrap !important;
  }

  #bt-topbar .bt-topbar-contact__summary::-webkit-details-marker {
    display: none;
  }

  /* Kontakt Panel (Overlay, kein Höhen-Sprung) */
  #bt-topbar .bt-topbar-contact__panel {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    z-index: 9999 !important;

    margin: 0 !important; /* killt Flow-Spacing */
    padding: 10px 10px !important;

    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18) !important;

    min-width: 260px !important;
    max-width: 78vw !important;
    box-sizing: border-box !important;
  }

  #bt-topbar .bt-topbar-contact__item {
    display: block;
    padding: 8px 6px;

    text-decoration: none;
    color: #414544;

    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
  }

  #bt-topbar .bt-topbar-contact__item + .bt-topbar-contact__item {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }

  /* Header: Kontakt-Link ausblenden (weil Service oben gebündelt ist) */
  #bt-header .bt-header__actions a.bt-action[href="/kontakt/"] {
    display: none !important;
  }

  #bt-header .bt-header__actions {
    gap: 12px;
  }
}


/* ==========================================================
   SECTION: Account Dropdown (Desktop) – Panel
   ========================================================== */

/* ==========================================================
   Desktop Account Dropdown (Header Actions) – SSOT
   Zweck: "Mein Konto" als natives <details> Dropdown, clean.
   ========================================================== */
#bt-header .bt-action--account-dd {
  position: relative;
  display: inline-block; /* wichtig */
}
#bt-header .bt-action--account-dd > summary {
  list-style: none;
  cursor: pointer;
}
#bt-header .bt-action--account-dd > summary::-webkit-details-marker {
  display: none;
}

#bt-header .bt-action--account-dd .bt-action__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 9999;

  min-width: 140px;
  max-width: 180px;
  padding: 10px 10px;

  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
}

#bt-header .bt-action--account-dd .bt-action__item {
  display: block;
  padding: 8px 6px;

  text-decoration: none;
  color: #414544;
  font-size: 14px;
  line-height: 1.2;
}

#bt-header .bt-action--account-dd .bt-action__item + .bt-action__item {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* PATCH 2026-02-26: Desktop Account Dropdown – zentriert unter Trigger */
#bt-header details.bt-action--account-dd {
  position: relative;
}
#bt-header details.bt-action--account-dd .bt-action__panel {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

/* ==========================================================
   PATCH 2026-04-05
   Navigation – Home Icon Altlast entfernt
   Zweck:
   - kein Sonderstyling mehr für das erste Menüitem
   - Home läuft vollständig über die normale Top-Level-SSOT
   Warum:
   - der alte Block hat Home-After deaktiviert und Before als Icon-Rest behandelt
   ========================================================== */

/* ==========================================================
   PATCH 2026-03-07
   Overflow-Menü "Mehr" – konsolidierter Final-Block
   Zweck:
   - ein sauberer, widerspruchsfreier CSS-Block für das "Mehr"-Menü
   - kompakte Floating Pills
   - Flyout nach links
   - smoother Hover/Fokus
   - maximal 1 Flyout-Ebene sichtbar
   ========================================================== */

/* ==========================================================
   MEHR-TRIGGER
   ========================================================== */
.main-navigation .main-nav > ul > li.bt-nav-more {
  position: relative;
}

.main-navigation .main-nav > ul > li.bt-nav-more > a {
  color: #414544 !important;
  text-decoration: none;
  letter-spacing: 0;
}

.main-navigation .main-nav > ul > li.bt-nav-more:hover > a,
.main-navigation .main-nav > ul > li.bt-nav-more:focus-within > a {
  color: #e42c8c !important;
  letter-spacing: 0;
}

/* ==========================================================
   PANEL-BASIS
   ========================================================== */
.main-navigation .main-nav > ul > li.bt-nav-more > .bt-nav-more-menu {
  right: 0;
  left: auto;
  min-width: 280px;
  padding: 15px 8px 15px 8px;
  background: rgba(255, 255, 255, 0.01);
  border: 0;
  border-radius: 16px;
  box-shadow: none;
  overflow: visible;

  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transform-origin: top right;
  pointer-events: none;

  transition:
    opacity 0.18s ease,
    transform 0.22s ease,
    visibility 0s linear 0.22s;
}

.main-navigation .main-nav > ul > li.bt-nav-more:hover > .bt-nav-more-menu,
.main-navigation
  .main-nav
  > ul
  > li.bt-nav-more:focus-within
  > .bt-nav-more-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    opacity 0.18s ease,
    transform 0.22s ease,
    visibility 0s linear 0s;
}

.main-navigation .main-nav > ul > li.bt-nav-more .bt-nav-more-menu li {
  position: relative;
}

/* ==========================================================
   BUTTONS – EBENE 1 + FLYOUT-EBENE
   ========================================================== */
.main-navigation .main-nav > ul > li.bt-nav-more .bt-nav-more-menu > li > a,
.main-navigation
  .main-nav
  > ul
  > li.bt-nav-more
  .bt-nav-more-menu
  > li
  > .sub-menu
  > li
  > a {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 8px;
  padding: 11px 16px;

  background: #ffffff;
  color: #e42c8c !important;
  border: 1px solid #e42c8c;
  border-radius: 12px;

  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.2px;
  text-decoration: none;

  box-shadow: none;
  transform: translateY(0);

  transition:
    background-color 0.34s ease,
    color 0.34s ease,
    border-color 0.34s ease,
    letter-spacing 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.34s ease,
    box-shadow 0.34s ease;
}

/* letzter Button ohne Zusatzabstand */
.main-navigation
  .main-nav
  > ul
  > li.bt-nav-more
  .bt-nav-more-menu
  > li:last-child
  > a,
.main-navigation
  .main-nav
  > ul
  > li.bt-nav-more
  .bt-nav-more-menu
  > li
  > .sub-menu
  > li:last-child
  > a {
  margin-bottom: 0;
}

/* ==========================================================
   HOVER / FOKUS
   ========================================================== */
.main-navigation
  .main-nav
  > ul
  > li.bt-nav-more
  .bt-nav-more-menu
  > li
  > a:hover,
.main-navigation
  .main-nav
  > ul
  > li.bt-nav-more
  .bt-nav-more-menu
  > li
  > a:focus,
.main-navigation
  .main-nav
  > ul
  > li.bt-nav-more
  .bt-nav-more-menu
  > li:hover
  > a,
.main-navigation
  .main-nav
  > ul
  > li.bt-nav-more
  .bt-nav-more-menu
  > li:focus-within
  > a,
.main-navigation
  .main-nav
  > ul
  > li.bt-nav-more
  .bt-nav-more-menu
  > li
  > .sub-menu
  > li
  > a:hover,
.main-navigation
  .main-nav
  > ul
  > li.bt-nav-more
  .bt-nav-more-menu
  > li
  > .sub-menu
  > li
  > a:focus,
.main-navigation
  .main-nav
  > ul
  > li.bt-nav-more
  .bt-nav-more-menu
  > li
  > .sub-menu
  > li:hover
  > a,
.main-navigation
  .main-nav
  > ul
  > li.bt-nav-more
  .bt-nav-more-menu
  > li
  > .sub-menu
  > li:focus-within
  > a {
  background: #e42c8c;
  color: #ffffff !important;
  border-color: #e42c8c;
  letter-spacing: 0.5px;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(228, 44, 140, 0.18);
}

/* ==========================================================
   PFEILE
   ========================================================== */
.main-navigation .main-nav > ul > li.bt-nav-more .dropdown-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  opacity: 1;
  transform: scale(0.95);
  transition:
    transform 0.34s ease,
    opacity 0.34s ease,
    color 0.34s ease;
}

.main-navigation
  .main-nav
  > ul
  > li.bt-nav-more
  .bt-nav-more-menu
  li
  > a:hover
  .dropdown-menu-toggle,
.main-navigation
  .main-nav
  > ul
  > li.bt-nav-more
  .bt-nav-more-menu
  li
  > a:focus
  .dropdown-menu-toggle,
.main-navigation
  .main-nav
  > ul
  > li.bt-nav-more
  .bt-nav-more-menu
  li:hover
  > a
  .dropdown-menu-toggle,
.main-navigation
  .main-nav
  > ul
  > li.bt-nav-more
  .bt-nav-more-menu
  li:focus-within
  > a
  .dropdown-menu-toggle {
  transform: scale(1);
}

/* ==========================================================
   FLYOUT NACH LINKS
   ========================================================== */
.main-navigation
  .main-nav
  > ul
  > li.bt-nav-more
  .bt-nav-more-menu
  > li
  > .sub-menu {
  top: 0;
  right: 100%;
  left: auto !important;
  min-width: 260px;
  padding: 8px;
  margin: 0;
  background: rgba(255, 255, 255, 0.01);
  border: 0;
  border-radius: 16px;
  box-shadow: none;
  overflow: hidden;

  opacity: 0;
  visibility: hidden;
  transform: translateX(10px);
  transform-origin: top right;
  pointer-events: none;

  transition:
    opacity 0.18s ease,
    transform 0.22s ease,
    visibility 0s linear 0.22s;
}

.main-navigation
  .main-nav
  > ul
  > li.bt-nav-more
  .bt-nav-more-menu
  li:hover
  > .sub-menu,
.main-navigation
  .main-nav
  > ul
  > li.bt-nav-more
  .bt-nav-more-menu
  li:focus-within
  > .sub-menu {
  right: 100%;
  left: auto !important;

  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;

  transition:
    opacity 0.18s ease,
    transform 0.22s ease,
    visibility 0s linear 0s;
}

/* ==========================================================
   DRITTE EBENE AUS
   ========================================================== */
.main-navigation
  .main-nav
  > ul
  > li.bt-nav-more
  .bt-nav-more-menu
  > li
  > .sub-menu
  .sub-menu {
  display: none !important;
}

.main-navigation
  .main-nav
  > ul
  > li.bt-nav-more
  .bt-nav-more-menu
  > li
  > .sub-menu
  .dropdown-menu-toggle {
  display: none !important;
}

/* ==========================================================
      END OF FILE – BT HEADER SSOT
      Alles darunter wäre ein Fehler.
      ========================================================== */

/* ==========================================================
      PATCH 2026-03-04: Mega Menu – Critical Hide Stub (anti FOUC)
      Zweck:
      - verhindert "Mega blitzt kurz auf" bevor bt-mega-menu.css geladen ist
      Warum:
      - bt-mega-menu.css wird non-blocking geladen -> CSS greift evtl. erst nach First Paint
      Hinweis:
      - nur Hide-by-default + Open-State sichtbar
      - Detail-Design bleibt in bt-mega-menu.css
      ========================================================== */

/* ==========================================================
   NAV OVERFLOW – Anti-FOUC Pending State (@media (min-width: 769px))
   Zweck: Versteckt die Desktop-Hauptnavigation nur so lange, bis der
   Overflow-Algorithmus die überzähligen Items sauber in "Mehr"
   verschoben hat.

   Warum:   Ohne diesen Pending-State blitzen die später verschobenen
   Menüpunkte beim Reload kurz im Horizontal-Flow auf.
   ========================================================== */
/* ==========================================================
   NAV OVERFLOW – Progressive Enhancement + No-JS-Fallback

   Grundzustand:
   - sofort sichtbar
   - mehrzeilig erlaubt
   - funktioniert ohne Header-JS

   JS-Zustand:
   - "pending" hält das Menü während der Berechnung einzeilig
     und unsichtbar
   - "ready" zeigt das berechnete Overflow-Menü
   ========================================================== */

.main-navigation .main-nav > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

@media (min-width: 769px) {
  html[data-bt-nav-overflow="pending"] .main-navigation .main-nav > ul {
    flex-wrap: nowrap;
    visibility: hidden;
    opacity: 0;
  }

  html[data-bt-nav-overflow="ready"] .main-navigation .main-nav > ul {
    flex-wrap: nowrap;
    visibility: visible;
    opacity: 1;
    transition: opacity 0.16s ease;
  }
}

/* ==========================================================
   Overflow Menü – keine Submenus
   ========================================================== */

/* PATCH 2026-03-24
   Overflow "Mehr" = eigenes System
   Warum:
   - Im Overflow laufen Mega-Items als leichte Surrogates
   - echte Mega-Container bleiben dort aus
   - das native direkte Submenu des Surrogates wird als Flyout genutzt
*/
.bt-nav-more-menu .sub-menu {
  display: block;
}

/* Echte Mega-Container im Overflow vollständig aus */
.bt-nav-more-menu > li.bt-in-more > .bt-shop-mega,
.bt-nav-more-menu > li.bt-in-more > .bt-event-mega {
  display: none !important;
}

/* Direkte native Untermenüs im Overflow als Flyout-Basis */
.bt-nav-more-menu > li.bt-in-more > ul.sub-menu {
  display: block !important;
}

/* Dropdown-Toggles im Overflow normal sichtbar lassen */
.bt-nav-more-menu .menu-item-has-children > a .dropdown-menu-toggle {
  display: inline-flex;
}

/* ==========================================================
   PATCH 2026-03-24
   Overflow-Surrogates: direktes Submenu sauber als Flyout
   Warum:
   - Nach dem JS-Schnitt lebt im "Mehr" nur noch Link + natives Submenu
   - dieses direkte Submenu braucht jetzt wieder eine klare Flyout-Regel
   ========================================================== */
.bt-nav-more-menu > li.bt-more-surrogate {
  position: relative;
}

/* PATCH 2026-03-28: GP .main-navigation ul ul setzt left:-99999px + height:0 + opacity:0
   Das Surrogate-Submenu muss alle GP-Werte hart überschreiben */
.bt-nav-more-menu > li.bt-more-surrogate > ul.sub-menu {
  position: absolute !important;
  top: 0 !important;
  right: 100% !important;
  left: auto !important;
  height: auto !important;
  min-width: 260px;
  padding: 8px;
  margin: 0;
  background: transparent;
  border: 0;
  box-shadow: none;

  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(10px) scale(0.985);
  transform-origin: top right;

  transition:
    opacity 0.18s ease,
    transform 0.22s ease,
    visibility 0s linear 0.22s;
}

/* PATCH 2026-03-28: height:auto !important nötig – GP setzt height:0 auf ul ul */
@media (hover: hover) and (pointer: fine) {
  .bt-nav-more-menu > li.bt-more-surrogate:hover > ul.sub-menu {
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    clip: auto !important;
    transform: translateX(0) scale(1) !important;

    transition:
      opacity 0.18s ease,
      transform 0.22s ease,
      visibility 0s linear 0s;
  }
}

/* PATCH 2026-03-28: Keyboard-Fokus zeigt Flyout links, GP-Werte überschreiben */
.bt-nav-more-menu > li.bt-more-surrogate:focus-within > ul.sub-menu {
  position: absolute !important;
  top: 0 !important;
  right: 100% !important;
  left: auto !important;
  height: auto !important;
  transform: translateX(0) scale(1) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  min-width: 260px;
  padding: 8px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
}
/* ==========================================================
   Nav Hover Stabilizer, verhindert Flex-Reflow beim Hover
   ========================================================== */

.main-navigation .main-nav > ul > li {
  position: relative;
  flex: 0 0 auto;
}

/* ==========================================================
   PATCH 2026-04-05
   Home – Abstand nach rechts ohne größeren Hover-Bereich
   Zweck:
   - etwas Luft zwischen Home und dem nächsten Menüpunkt
   - kein zusätzliches Padding am Link, damit Hover/Active-Fläche
     nicht künstlich breiter wird
   Warum:
   - die übrigen Menüpunkte wirken durch ihre Toggle-/Arrow-Struktur
     optisch luftiger; Home braucht deshalb nur einen kleinen äußeren Abstand
   ========================================================== */
.main-navigation
  .main-nav.bt-nav-two-level
  > ul:not(.bt-nav-secondary-menu)
  > #menu-item-1593 {
  margin-right: 13px;
  margin-left: 20px;
}

/*
 * Erster Menüpunkt in Zeile 2:
 * gleiche innere Startkante wie Event-Dekoration beziehungsweise
 * im Sticky-Zustand wie Startseite.
 */
.main-navigation
  .main-nav.bt-nav-two-level
  > ul.bt-nav-secondary-menu
  > li:first-child
  > a {
  padding-left: 5px !important;
}

.main-navigation .main-nav > ul > li:not(.bt-nav-more) > a {
  min-width: max-content;
}

.bt-nav-more > a {
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 10px;
  line-height: 1;
  opacity: 0.7;
}

/* ==========================================================
   PATCH 2026-03-08
   Event Mega Trigger – dunkler Hover/Active State
   Warum:
   Event-Dekoration soll farblich zur dunklen Mega-Bühne passen.
   Gepatcht werden nur Text + Linien, nicht das Home-Icon.
   ========================================================== */
.main-navigation .main-nav > ul > li.bt-mega-event:hover > a,
.main-navigation .main-nav > ul > li.bt-mega-event:focus-within > a,
.main-navigation .main-nav > ul > li.bt-mega-event.current-menu-item > a,
.main-navigation .main-nav > ul > li.bt-mega-event.current-menu-ancestor > a,
.main-navigation .main-nav > ul > li.bt-mega-event.bt-mega-open > a {
  color: #2b2b31 !important;
}

.main-navigation .main-nav > ul > li.bt-mega-event:hover > a::before,
.main-navigation .main-nav > ul > li.bt-mega-event:hover > a::after,
.main-navigation .main-nav > ul > li.bt-mega-event:focus-within > a::before,
.main-navigation .main-nav > ul > li.bt-mega-event:focus-within > a::after,
.main-navigation
  .main-nav
  > ul
  > li.bt-mega-event.current-menu-item
  > a::before,
.main-navigation .main-nav > ul > li.bt-mega-event.current-menu-item > a::after,
.main-navigation
  .main-nav
  > ul
  > li.bt-mega-event.current-menu-ancestor
  > a::before,
.main-navigation
  .main-nav
  > ul
  > li.bt-mega-event.current-menu-ancestor
  > a::after,
.main-navigation .main-nav > ul > li.bt-mega-event.bt-mega-open > a::before,
.main-navigation .main-nav > ul > li.bt-mega-event.bt-mega-open > a::after {
  background: #2b2b31 !important;
}

/* Header / Mega / Buttons default neutral halten */
.bt-event-mega a:focus-visible,
.bt-shop-mega a:focus-visible,
.main-navigation button:focus-visible,
.bt-event-mega button:focus-visible,
.bt-shop-mega button:focus-visible,
[role="button"]:focus-visible {
  outline: none;
  background: transparent;
  box-shadow: none;
}

/* Header-Actions: Fokus nicht auf Text kleben lassen,
   sondern als eigener Layer hinter dem Element darstellen */
#bt-header .bt-header__actions a,
#bt-header .bt-header__actions summary,
#bt-header .bt-header__actions button {
  position: relative;
  z-index: 1;
}

/* Fokusziel selbst bleibt clean */
#bt-header .bt-header__actions a:focus-visible,
#bt-header .bt-header__actions summary:focus-visible,
#bt-header .bt-header__actions button:focus-visible {
  outline: none;
  background: transparent !important;
  box-shadow: none !important;
  color: #e42c8c !important;
}

/* Weicher Fokus-Layer ohne Layout-Shift */
#bt-header .bt-header__actions a:focus-visible::after,
#bt-header .bt-header__actions summary:focus-visible::after,
#bt-header .bt-header__actions button:focus-visible::after {
  content: "";
  position: absolute;
  inset: -6px -10px;
  border-radius: 10px;
  background: rgba(228, 44, 140, 0.08);
  z-index: -1;
  pointer-events: none;
}

/* Desktop Account Summary etwas sauberer als Focus-Ziel */
#bt-header .bt-action--account-dd > summary:focus-visible {
  color: #e42c8c !important;
}

/* Search-Feld: eigener ruhiger Fokus */
.bt-header input:focus-visible,
.bt-header select:focus-visible,
.bt-header textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(228, 44, 140, 0.22);
}

/* Skip-Link / "Zum Inhalt springen" nicht künstlich stylen */
.skip-link:focus-visible,
.screen-reader-text:focus-visible {
  outline: none;
  box-shadow: none;
  background: inherit;
}

/* ==========================================================
   PATCH 2026-03-25
   Skip-Link ("Zum Inhalt springen") optisch an BT UI anpassen
   Zweck:
   - Accessibility-Link sichtbar lassen
   - aber nicht wie Fremdkörper/Browser-Default aussehen
   Warum:
   - First-Tab zeigt den Skip-Link korrekt an
   - er soll visuell zur bestehenden BT-Button-/Panel-Sprache passen
   ========================================================== */

.skip-link,
.screen-reader-text.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
}

.skip-link:focus,
.skip-link:focus-visible,
.screen-reader-text.skip-link:focus,
.screen-reader-text.skip-link:focus-visible {
  position: fixed !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 100000 !important;

  display: inline-flex !important;
  align-items: center !important;

  margin: 0 !important;
  min-width: 260px !important;
  max-width: calc(100vw - 24px) !important;
  padding: 10px 14px !important;

  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18) !important;
  box-sizing: border-box !important;

  color: #414544 !important;
  text-decoration: none !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  outline: none !important;
}

/* ==========================================================
   DESKTOP NO-JS FALLBACK – GENERATEPRESS SUBMENUS

   Normalbetrieb:
   - unverändert
   - Custom-Megas + Header-JS

   Fallback:
   - Custom-Megas ausgeblendet
   - native GeneratePress-Untermenüs per Hover/Fokus
   ========================================================== */

@media (min-width: 769px) {
  body.bt-header-js-disabled .bt-event-mega,
  body.bt-header-js-disabled .bt-shop-mega-v2 {
    display: none !important;
  }

  body.bt-header-js-disabled
    .main-navigation
    .main-nav
    > ul
    > li.bt-mega--event
    > ul.sub-menu,
  body.bt-header-js-disabled
    .main-navigation
    .main-nav
    > ul
    > li.bt-mega--event
    > ul.children,
  body.bt-header-js-disabled
    .main-navigation
    .main-nav
    > ul
    > li.bt-mega--shop
    > ul.sub-menu,
  body.bt-header-js-disabled
    .main-navigation
    .main-nav
    > ul
    > li.bt-mega--shop
    > ul.children {
    display: none !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  body.bt-header-js-disabled
    .main-navigation
    .main-nav
    > ul
    > li.bt-mega--event:hover
    > ul.sub-menu,
  body.bt-header-js-disabled
    .main-navigation
    .main-nav
    > ul
    > li.bt-mega--event:hover
    > ul.children,
  body.bt-header-js-disabled
    .main-navigation
    .main-nav
    > ul
    > li.bt-mega--event:focus-within
    > ul.sub-menu,
  body.bt-header-js-disabled
    .main-navigation
    .main-nav
    > ul
    > li.bt-mega--event:focus-within
    > ul.children,
  body.bt-header-js-disabled
    .main-navigation
    .main-nav
    > ul
    > li.bt-mega--shop:hover
    > ul.sub-menu,
  body.bt-header-js-disabled
    .main-navigation
    .main-nav
    > ul
    > li.bt-mega--shop:hover
    > ul.children,
  body.bt-header-js-disabled
    .main-navigation
    .main-nav
    > ul
    > li.bt-mega--shop:focus-within
    > ul.sub-menu,
  body.bt-header-js-disabled
    .main-navigation
    .main-nav
    > ul
    > li.bt-mega--shop:focus-within
    > ul.children {
    display: block !important;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
}

/* ==========================================================
   PATCH 2026-07-31
   DESKTOP NAVIGATION – HAUPTZEILE + ZWEITE ZEILE PER KLICK

   Zweck:
   - Hauptnavigation bleibt geschlossen exakt einzeilig.
   - "Mehr" öffnet eine echte zweite Navigationszeile.
   - Originale Mega-Trigger bleiben erhalten.
   - Mobile bis 768 px bleibt vollständig unverändert.
   ========================================================== */
@media (min-width: 769px) {
  /* ----------------------------------------------------------
     Hauptcontainer:
     Hauptzeile und zweite Zeile liegen untereinander.
     ---------------------------------------------------------- */
  .main-navigation .main-nav.bt-nav-two-level {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    min-width: 0;
    width: 100%;
    overflow: visible;
  }

  /* ----------------------------------------------------------
     Hauptzeile:
     immer exakt einzeilig, kein Browser-Umbruch.
     ---------------------------------------------------------- */
  .main-navigation .main-nav.bt-nav-two-level > ul:not(.bt-nav-secondary-menu) {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;

    min-width: 0;
    width: 100%;
    overflow: hidden;
  }

  .main-navigation
    .main-nav.bt-nav-two-level
    > ul:not(.bt-nav-secondary-menu)
    > li {
    flex: 0 0 auto;
  }

  /* ----------------------------------------------------------
     Mehr-Button:
     echte Button-Ausgabe statt altem Hover-Link.
     ---------------------------------------------------------- */
  .main-navigation
    .main-nav.bt-nav-two-level
    > ul
    > li.bt-nav-more--secondary-toggle {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
  }

  .main-navigation .main-nav.bt-nav-two-level .bt-nav-more-button {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 89px;
    min-height: 23px;
    margin: 0;
    padding: 4px 0px 4px 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    background: #f7f7f7;
    box-shadow: none;
    color: #414544;
    font: inherit;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
  }

  .main-navigation
    .main-nav.bt-nav-two-level
    .bt-nav-more-button
    .bt-nav-more-label {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;

    font-size: inherit;
    line-height: inherit;
    opacity: 1;
  }

  .main-navigation .main-nav.bt-nav-two-level .bt-nav-more-button:hover,
  .main-navigation .main-nav.bt-nav-two-level .bt-nav-more-button:focus-visible,
  .main-navigation.bt-nav-secondary-open
    .main-nav.bt-nav-two-level
    .bt-nav-more-button {
    color: #e42c8c;
    outline: none;
  }

  .main-navigation .main-nav.bt-nav-two-level .bt-nav-more-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 12px;

    width: 12px;
    height: 12px;
    line-height: 0;

    transform: rotate(0deg);
    transform-origin: 50% 50%;
    transition: transform 0.16s ease;
  }

  .main-navigation .main-nav.bt-nav-two-level .bt-nav-more-arrow svg {
    display: block;
    width: 9px;
    height: 7px;
  }

  .main-navigation.bt-nav-secondary-open
    .main-nav.bt-nav-two-level
    .bt-nav-more-arrow {
    transform: rotate(180deg);
  }

  /* ----------------------------------------------------------
     Zweite Zeile:
     dezent ein- und ausklappen statt hartem display:none.
     ---------------------------------------------------------- */
  .main-navigation .main-nav.bt-nav-two-level > ul.bt-nav-secondary-menu {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;

    min-width: 0;
    width: 100%;
    max-width: 100%;
    max-height: 0;

    margin: 0;
    padding: 0 0 0 var(--bt-secondary-start, 0px);
    box-sizing: border-box;

    list-style: none;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;

transition:
  max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
  opacity 0.30s ease,
  padding-left 0.55s cubic-bezier(0.22, 1, 0.36, 1),
  visibility 0s linear 0.55s;
  }

  .main-navigation.bt-nav-secondary-open
    .main-nav.bt-nav-two-level
    > ul.bt-nav-secondary-menu {
    max-height: 34px;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    overflow-x: auto;
    overflow-y: visible;
    
transition:
  max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
  opacity 0.30s ease,
  padding-left 0.55s cubic-bezier(0.22, 1, 0.36, 1),
  visibility 0s;
  }

.main-navigation.bt-is-sticky
  .main-nav.bt-nav-two-level
  > ul.bt-nav-secondary-menu:not([hidden]) {
  padding-left: calc(
    var(
        --bt-secondary-start-sticky,
        var(--bt-secondary-start, 0px)
      ) + var(--bt-sticky-logo-space)
  );
}

  .main-navigation .main-nav.bt-nav-two-level > ul.bt-nav-secondary-menu {
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .main-navigation .main-nav.bt-nav-two-level > ul.bt-nav-secondary-menu > li {
    flex: 0 0 auto;
  }

  /* Zweite Zeile optisch bewusst kompakter und einheitlich */
  .main-navigation
    .main-nav.bt-nav-two-level
    > ul.bt-nav-secondary-menu
    > li
    > a {
    display: inline-flex;
    align-items: center;

    height: 34px;
    min-height: 0;
    padding: 0 8px !important;
    box-sizing: border-box;

    color: rgba(65, 69, 68, 0.82);
    font-size: 15px;
    line-height: 1;
    white-space: nowrap;
  }

  .main-navigation
    .main-nav.bt-nav-two-level
    > ul.bt-nav-secondary-menu
    > li
    > a
    > .bt-nav-text {
    display: inline-flex;
    align-items: center;
    line-height: 1;
  }

  /* Mega-Pfeil in Zeile 2 kompakt halten */
  .main-navigation
    .main-nav.bt-nav-two-level
    > ul.bt-nav-secondary-menu
    > li
    > a
    .dropdown-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    align-self: center;
    height: auto;
    margin: 0;
    padding: 0 0 0 5px;
    line-height: 1;
  }

  /* Sichtbare SVG-Grafik in Zeile 2 wie in Zeile 1 ausrichten */
  .main-navigation
    .main-nav.bt-nav-two-level
    > ul.bt-nav-secondary-menu
    > li
    > a
    .dropdown-menu-toggle
    svg {
    position: relative;
    top: -1px;
  }

  /* Zeile 2 besitzt bewusst kompaktere Hover-Linien als Zeile 1 */
  .main-navigation
    .main-nav.bt-nav-two-level
    > ul.bt-nav-secondary-menu
    > li:not(.bt-nav-more)
    > a::before,
  .main-navigation
    .main-nav.bt-nav-two-level
    > ul.bt-nav-secondary-menu
    > li:not(.bt-nav-more)
    > a::after {
    left: 7px;
    right: 7px;
  }

  .main-navigation
    .main-nav.bt-nav-two-level
    > ul.bt-nav-secondary-menu
    > li:not(.bt-nav-more)
    > a::before {
    top: 1px;
  }

  .main-navigation
    .main-nav.bt-nav-two-level
    > ul.bt-nav-secondary-menu
    > li:not(.bt-nav-more)
    > a::after {
    bottom: 2px;
  }

  .main-navigation
    .main-nav.bt-nav-two-level
    > ul.bt-nav-secondary-menu
    > li:first-child {
    margin-left: 0;
    margin-right: 0;
  }

  .main-navigation
    .main-nav.bt-nav-two-level
    > ul.bt-nav-secondary-menu
    > li:hover
    > a,
  .main-navigation
    .main-nav.bt-nav-two-level
    > ul.bt-nav-secondary-menu
    > li:focus-within
    > a,
  .main-navigation
    .main-nav.bt-nav-two-level
    > ul.bt-nav-secondary-menu
    > li.current-menu-item
    > a,
  .main-navigation
    .main-nav.bt-nav-two-level
    > ul.bt-nav-secondary-menu
    > li.current-product-ancestor
    > a,
  .main-navigation
    .main-nav.bt-nav-two-level
    > ul.bt-nav-secondary-menu
    > li.bt-mega-open
    > a,
  .main-navigation
    .main-nav.bt-nav-two-level
    > ul.bt-nav-secondary-menu
    > li.bt-shop-mega-v2-open
    > a {
    color: #414544;
  }

  /* ----------------------------------------------------------
   Warenkorb:
   bei geöffneter Navigation an Zeile 1 halten.
   ---------------------------------------------------------- */
  .main-navigation.bt-nav-secondary-open .menu-bar-items {
    align-self: flex-start;
    margin-top: 0;
  }

  /* ----------------------------------------------------------
   Sticky-Logo:
   bei geöffneter zweiter Zeile dauerhaft an der gemessenen
   Mitte von Zeile 1 ausrichten – auch während es ausfährt.
   ---------------------------------------------------------- */
.main-navigation .main-nav.bt-nav-two-level ~ .bt-sticky-logo,
.main-navigation:has(.main-nav.bt-nav-two-level) .bt-sticky-logo {
  top: var(--bt-primary-row-center, 50%);
}
}







/* ==========================================================
   TEMP TEST – Sticky Shift Hauptzeile via Padding
   Zweck:
   - .main-nav bleibt unbewegt
   - Mega-Bezugskontext bleibt unverändert
   - Hauptzeile fährt weich nach rechts
   ========================================================== */

.main-navigation .main-nav {
  margin-left: 0 !important;
  transform: none !important;
}

.main-navigation
  .main-nav.bt-nav-two-level
  > ul:not(.bt-nav-secondary-menu) {
  padding-left: 0;
  box-sizing: border-box;
  transition: padding-left 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.main-navigation.bt-is-sticky
  .main-nav.bt-nav-two-level
  > ul:not(.bt-nav-secondary-menu) {
  padding-left: var(--bt-sticky-logo-space);
}