/* ============================================================
       BF Modal – komplett unabhängig / namespaced / robust
       ============================================================ */

    :root{
      --bf-modal-maxw: 34.375rem; /* 550px */
      --bf-modal-top: 12rem;
      --bf-bg: rgba(255,255,255,0.97);
      --bf-shadow: 0 18px 40px rgba(0,0,0,0.25);
      --bf-green: #057652;
      --bf-badge: #59BE49;
      --bf-border: #c4c4c4;
      --bf-text: #111;
    }

    /* Demo-Seite (nur Beispiel) */


    /* -------- Modal Overlay -------- */
    .bf-modal{
      font-family: 'Droid-Serif', serif;
	  position: fixed !important;
      inset: 0 !important;
      z-index: 99999 !important;
      display: none !important;
	  
    }
    .bf-modal[open]{
      display: block !important;
    }

    .bf-modal__backdrop{
      position: absolute !important;
      inset: 0 !important;
      background: rgba(0,0,0,0.55) !important;
    }

    /* -------- Modal Panel -------- */
    .bf-modal__panel{
      position: relative !important;
      width: min(var(--bf-modal-maxw), calc(100vw - 2rem)) !important;
      margin: var(--bf-modal-top) auto 2rem !important;
      background: var(--bf-bg) !important;
      border-radius: 2.25rem !important; /* 36px */
      padding: clamp(1.5rem, 3vw, 2.5rem) !important;
      box-shadow: var(--bf-shadow) !important;
      color: var(--bf-text) !important;
    }

    /* Mobile: Abstand nach oben reduzieren, damit es nicht abgeschnitten wirkt */
    @media (max-width: 600px){
      .bf-modal__panel{
        margin: 2rem auto 2rem !important;
        border-radius: 1.5rem !important;
      }
    }

    /* -------- Header -------- */
    .bf-modal__header{
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 1rem !important;
      margin-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
    }

    .bf-modal__headerLeft{
      display: flex !important;
      align-items: center !important;
      gap: 1rem !important;
      min-width: 0 !important;
    }

    .bf-modal__title{
      font-family: 'OfficinaSanITC-Book-Bold', serif !important;
      font-size: clamp(1.8rem, 1.5rem + 1.4vw, 2.4rem) !important;
      line-height: clamp(2.1rem, 1.8rem + 1.6vw, 2.6rem) !important;
      margin: 0 !important;
      white-space: nowrap !important;
    }

    .bf-modal__actions{
      display: flex !important;
      align-items: center !important;
      gap: 1.25rem !important;
    }

    /* Icon Buttons */
    .bf-iconbtn{
      cursor: pointer !important;
      border: none !important;
      background: transparent !important;
      padding: 0 !important;
      width: 1.6rem !important;
      height: 1.6rem !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    .bf-iconbtn:focus-visible{
      outline: 3px solid var(--bf-green) !important;
      outline-offset: 3px !important;
    }

    .bf-iconbtn--share{
      background: url("../img/bf-img/icons/share-icon.svg") no-repeat center / contain !important;
    }
    .bf-iconbtn--close{
      background: url("../img/bf-img/icons/close-icon.svg") no-repeat center / contain !important;
    }

    /* Warenkorb-Icon + Badge */
    .bf-cart{
      position: relative !important;
      width: 2.3rem !important;
      height: 2.3rem !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex: 0 0 auto !important;
    }
    .bf-cart__icon{
      width: 2.3rem !important;
      height: 2.3rem !important;
      display: block !important;
      background: url("../img/bf-img/icons/shoppingcart.svg") no-repeat center / contain !important;
    }
    .bf-cart__badge{
      position: absolute !important;
      top: -0.6rem !important;
      right: -0.6rem !important;
      background: var(--bf-badge) !important;
      color: #fff !important;
      border-radius: 999px !important;
      padding: 0.15rem 0.5rem !important;
      font-size: 0.75rem !important;
      font-weight: 600 !important;
      line-height: 1 !important;
    }

    /* -------- Liste -------- */
    .bf-items{
      display: flex !important;
      flex-direction: column !important;
      gap: 1.75rem !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    .bf-item{
      padding-bottom: 1.25rem !important;
      border-bottom: 1px solid var(--bf-border) !important;
    }

    .bf-item__top{
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 1rem !important;
      margin-bottom: 0.4rem !important;
      flex-wrap: wrap !important;
    }

    .bf-item__code{
      font-size: 1.05rem !important;
    }

    .bf-item__title{
      font-size: clamp(1.1rem, 2vw, 1.4rem) !important;
      font-weight: 600 !important;
      line-height: 1.4 !important;
    }

    /* Menge */
    .bf-qty{
      display: inline-flex !important;
      align-items: center !important;
      gap: 0.6rem !important;
      border-radius: 999px !important;
      border: 1px solid #111 !important;
      padding: 0.25rem 0.9rem !important;
      font-size: 0.95rem !important;
      font-weight: 600 !important;
      white-space: nowrap !important;
    }

    .bf-qty__btn{
      border: 0 !important;
      background: transparent !important;
      padding: 0 !important;
      width: 1.4rem !important;
      height: 1.4rem !important;
      display: inline-grid !important;
      place-items: center !important;
      cursor: pointer !important;
      border-radius: 0.35rem !important;
      font: inherit !important;
      line-height: 1 !important;
    }
    .bf-qty__btn:focus-visible{
      outline: 2px solid var(--bf-green) !important;
      outline-offset: 2px !important;
    }

    .bf-qty__divider{
      width: 1px !important;
      height: 1.1em !important;
      background: #111 !important;
      opacity: 0.6 !important;
    }

    @media (max-width: 600px){
      .bf-modal__header{
        flex-direction: column !important;
        align-items: flex-start !important;
      }
      .bf-modal__actions{
        align-self: flex-end !important;
      }
      .bf-item__top{
        align-items: flex-start !important;
      }
    }