input[type="search"] {
font-size: 16px !important;
}





@media (max-width: 767px) {
    #mobile_contact.contact-mob {
        background: #fff !important;
        box-shadow:
        0 -1px 2px rgba(0,0,0,0.04),
        0 -4px 12px rgba(0,0,0,0.06) !important;
    }
#sp-header.header-sticky {
    box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 4px 12px rgba(0,0,0,0.06);
}
  
}


@media (max-width: 767px) {
    .easystore-metadata-key {
        color: #000;
        font-weight: 400;
        display: flex;
        align-items: center;
        font-size: 12px !important;
        gap: 4px;
    }
}

@media (max-width: 767.98px) {
    #sppb-addon-ad34f945-1ea9-4114-9a42-ecc60ad333cc {
padding-top: 20px !important;
    }
}

@media (min-width: 911.98px) {
    #sppb-addon-ad34f945-1ea9-4114-9a42-ecc60ad333cc {
padding-top: 15px !important;
    }
}

@media (max-width: 767.98px) {
    #sppb-addon-wrapper-d9b353e3-44d0-4ce6-becc-63ff7741d9f2 {
        left: 92%;
        padding-top: 6px !important;
    }
}

@media (min-width: 911.98px) {
    #sppb-addon-wrapper-d9b353e3-44d0-4ce6-becc-63ff7741d9f2 {
        left: 92%;
        padding-top: 6px !important;
    }
}


#sppb-addon-wrapper-d9b353e3-44d0-4ce6-becc-63ff7741d9f2 {
    position: fixed;
    left: 95%;
    top: 18px !important;
    z-index: 1000;
}


.easystore-cart-icon {
    display: inline-block;
    font-size: 28px !important;
    line-height: 1;
    position: relative;
}
#sppb-addon-wrapper-d9b353e3-44d0-4ce6-becc-63ff7741d9f2 {
    top: 15px !important;

}




#sppb-addon-41232711-2dbb-48f1-893f-329e4b1c4923 {
    padding-top: 3px !important;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
}

#sppb-addon-wrapper-79e28dd5-11c0-4bdc-9ba8-b284db785ff3 {
    margin-top: -3px !important;
    margin-right: 0px;
    margin-bottom: 10px;
    margin-left: 0px;
    position: fixed;
    left: 75%;
    top: 15px;
}




#sppb-addon-41232711-2dbb-48f1-893f-329e4b1c4923 .sppb-icon-inner i {
    font-size: 24px !important;
}
#sppb-addon-79e28dd5-11c0-4bdc-9ba8-b284db785ff3 .sppb-icon-inner i {
    font-size: 28px !important;
}
#sppb-addon-79e28dd5-11c0-4bdc-9ba8-b284db785ff3 {
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 8px !important;
}


#sppb-addon-wrapper-79e28dd5-11c0-4bdc-9ba8-b284db785ff3 {
    margin-top: 0px;
    
    left: 78% !important;
    top: 15px;
}

.sp-page-builder .page-content #section-id-773ac553-fbed-4cf2-92fe-3f76124f4884 {
    background-color: #fff !important;
    box-shadow: 0 0 0 0 #FFFFFF ;
}


.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span, .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
    font-family: 'Inter', sans-serif;
    font-size: 16px !important;
    font-weight: 400;
     line-height: 18px !important;
}


.sp-page-title .sp-page-title-sub-heading {
    font-weight: 400 !important;
font-size: 18px !important;
font-family: 'Inter', sans-serif !important;
line-height: 25px !important;
}


li.item-101.menu_item.item-header {
margin-bottom: -30px !important;
}

.easystore-mini-cart-item .easystore-metadata-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.easystore-mini-cart-item .esku {
    display: block !important;
    width: 100%;
margin-top: -10px !important;
}


media (max-width: 767px) {
    .easystore-metadata-key {
        color: #333 !important;
        font-weight: 400  !important;
        display: flex;
        align-items: center;
        font-size: 12px  !important;
        gap: 4px;
    }
}




/* Clear Cart Button orange */
.easystore-drawer .easystore-cart-clear.btn,
.easystore-drawer .easystore-cart-clear.btn.btn-danger,
.easystore-drawer-footer .easystore-cart-clear,
button.easystore-cart-clear {
    background: #F08130 !important;
    background-image: none !important;
    border: 1px solid #F08130 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* Hover */
.easystore-drawer .easystore-cart-clear.btn:hover,
.easystore-drawer .easystore-cart-clear.btn.btn-danger:hover,
button.easystore-cart-clear:hover {
    background: #F08130 !important;
    border-color: #F08130 !important;
    color: #ffffff !important;
}


.sppb-collection-item .easystore-btn-add-to-cart  {
    display:none ;
}


/* ===============================
   MOBILE VARIANT BUTTON SETTINGS
   Werte hier einfach anpassen
================================ */
@media (max-width: 767px) {
#easystore-modal.active .easystore-quick-cart-actions {
    padding-bottom: 40px !important;   /* HIER ändern */
    margin-bottom: 70px !important;    /* HIER ändern */
  }

  #easystore-modal.active .easystore-quick-cart-actions .btn {
    margin-bottom: 20px !important;    /* HIER ändern */
  }



  /* normale Variantenbuttons */
  #easystore-modal.active .easystore-variant-option-card > label,
  #easystore-modal.active .easystore-variant-option-value {
    min-height: 30px !important;      /* Höhe */
    height: 30px !important;
    padding: 6px 1px !important;     /* innen oben/unten | links/rechts */
    border-radius: 20px !important;   /* Rundung */
    font-size: 13px !important;       /* Schriftgröße */
    line-height: 1.1 !important;
  }

  /* "individuelle Menge eingeben" Button */
  #easystore-modal.active .easystore-variant-option-trigger {
    min-height: 20px !important;
    height: 20px !important;
    padding: 6px 1px !important;
    font-size: 13px !important;
    border-radius: 20px !important;
  }

  /* Abstand zwischen Buttons */
  #easystore-modal.active .easystore-variant-options-grouped {
    gap: 4px !important;
  }

  /* Block-Innenabstand */
  #easystore-modal.active .easystore-variant-group {
    padding: 5px !important;
  }
.easystore-quick-cart-content {
    padding: 2px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 16px;
}
 /* Produktbild */
  #easystore-modal .easystore-product-image {
    display: block !important;
    width: 100% !important;
    max-width: 420px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto 20px auto !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    padding: 0 !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {

  /* Modal Größe */
  #easystore-modal .modal-container.center-center {
    width: calc(100vw - 40px) !important;
    max-width: 980px !important;
    max-height: 90vh !important;
    overflow: hidden !important;
    padding: 20px !important;
  }

  #easystore-modal .modal-content {
    max-height: calc(90vh - 40px) !important;
    overflow-y: auto !important;
    padding: 0 !important;
  }

  /* Bootstrap Row neutralisieren */
  #easystore-modal .easystore-quick-cart .row {
    display: block !important;
    margin: 0 !important;
  }

  #easystore-modal .easystore-quick-cart .col-lg-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
  }

  /* Produktbild */
  #easystore-modal .easystore-product-image {
    display: block !important;
    width: 100% !important;
    max-width: 420px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto 20px auto !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    padding: 0 !important;
  }

  #easystore-modal .easystore-product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Content kompakter */
  #easystore-modal .easystore-quick-cart-content {
    padding: 0 !important;
  }

  #easystore-modal .easystore-product-title {
    margin-bottom: 6px !important;
  }

  #easystore-modal .easystore-product-price {
    margin-bottom: 10px !important;
  }

  /* Varianten Layout */
  #easystore-modal .easystore-product-variant-list {
    display: grid !important;
    grid-template-columns: minmax(280px, 0.9fr) minmax(380px, 1.1fr) !important;
    gap: 14px !important;
    align-items: start !important;
    margin-top: 14px !important;
  }

  #easystore-modal .easystore-variant-group-bigbag {
    grid-column: 1 !important;
  }

  #easystore-modal .easystore-variant-group-lose {
    grid-column: 2 !important;
  }

  #easystore-modal .easystore-variant-group-sack {
    grid-column: 1 / -1 !important;
  }

  /* Box Styling */
  #easystore-modal .easystore-variant-group {
    margin: 0 !important;
    padding: 14px !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 16px !important;
    background: #fff !important;
  }

  /* Buttons */
  #easystore-modal .easystore-variant-options-grouped {
    gap: 8px !important;
  }

  #easystore-modal .easystore-variant-option-value {
    min-height: 36px !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
    border-radius: 20px !important;
  }

  /* CTA */
  #easystore-modal .easystore-quick-cart-actions {
    margin-top: 20px !important;
    padding-bottom: 20px !important;
  }
}

@media (max-width: 767px) {

  html.easystore-modal-open,
  body.easystore-modal-open {
    overflow: hidden !important;
    height: 100% !important;
  }

  #easystore-modal.active {
    position: fixed !important;
    inset: 0 !important;
    overflow: hidden !important;
    z-index: 99999 !important;
  }

  #easystore-modal.active .modal-container.center-center {
    width: calc(100vw - 20px) !important;
    height: calc(100vh - 20px) !important;
    max-height: calc(100vh - 20px) !important;
    margin: 10px !important;
    padding: 16px !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #easystore-modal.active .modal-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 40px !important;
  }

  #easystore-modal.active .easystore-quick-cart-actions {
    padding-bottom: 30px !important;
  }
}





/* Quick-Cart Modal: Varianten-Gruppen als Boxen */
#easystore-modal .easystore-variant-group {
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 14px;
  background: #fff;
}

/* Gruppentitel */
#easystore-modal .easystore-variant-group-title {
  font-weight: 700;
  margin-bottom: 10px;
}

/* Optionen innerhalb der Gruppe sauber ausrichten */
#easystore-modal .easystore-variant-options-grouped {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Buttons im Modal */
#easystore-modal .easystore-variant-option-value {
  border: 1px solid #111;
  border-radius: 999px;
  padding: 10px 18px;
  background: #fff;
  color: #111;
}

/* Aktiv */
#easystore-modal input[type="radio"]:checked + .easystore-variant-option-value {
  background: #fc7800 !important;
  border-color: #fc7800 !important;
  color: #fff !important;
}

#easystore-modal .lks-modal-sku {
  display: inline-block;
  margin-left: 10px;
  font-size: 14px;
  font-weight: 400;
  color: #777;
}


.ms-2 {
    margin-left: .5rem !important;
    display: none;
}

#easystore-modal .easystore-variant-option input[type="radio"]:checked + .easystore-variant-option-value {
    border-color: #fc7800;
    color: #fff;
    background-color: #fc7800;
}

#easystore-modal .modal-container.center-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    border-radius: 30px;
    padding: 20px;
    background: #fff;
}

.easystore-product-image {
    position: relative;
    overflow: hidden;
    padding-bottom: 100% !important;
border-radius: 30px;
}
#easystore-modal .easystore-quick-cart .easystore-product-price {
    font-size: 18px;
    line-height: 21px;
    display: none;
}
#easystore-modal .easystore-quantity-container {
    margin-bottom: 5px;
   display: none;
}

.easystore-ratings-container {
    gap: 8px;
  display: none;
}

.sp-group-title { 
margin-bottom: 30px !important;
margin-top: 60px;
}



/* Auswahl Stück */
.easystore-product-variants .easystore-variant-option-value {
    min-width: 40px;
    min-height: 40px;
    width: 100% !important;
    height: 40px;
    border-radius: 20px !important;
}


/* Container ist die Bezugsebene */
.sp-page-title {
  position: relative;
  z-index: 0; /* eigener Stacking-Context */
}

/* Schwarzes Overlay */
.sp-page-title::before {
  content: "";
 position:absolute;
background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 60%);
  inset: 0;                 /* top/right/bottom/left: 0 */

  z-index: 0;               /* UNTER dem Text */
  pointer-events: none;     /* keine Klicks blockieren */
}

/* Text + Breadcrumbs sicher DARÜBER */
.sp-page-title .container,
.sp-page-title .sp-page-title-heading,
.sp-page-title .breadcrumb,
.sp-page-title nav,
.sp-page-title h1,
.sp-page-title h2 {
 margin-left: 10px;
  z-index: 1 !important;
}





.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
    margin-top: -70px;
    z-index: 900;
    position: fixed;
    width: 98%;
    border-radius: 20px;
}

#sp-header {
    position: relative;
    background: transparent;
    z-index: 901 !important;
    margin-bottom: calc(var(--logo-size) * -0.35);
}

#sp-topicons {
    z-index: 901 !important;
}


#sp-header.header-sticky {
    z-index: 901;
   background: #fff;
}








#sp-bottom4 {
    background: #fff !important;
    z-index: 999999;
    padding-top: 5px;
    position: fixed;
    bottom: 0px;
    left: 0px;
}


.sp-megamenu-wrapper {
    top: 50px;
    position: absolute;
    left: 35px;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item>a:hover {
    color: #fc7800;
}





.mod-breadcrumbs__wrapper {
display:none;
}


/* Nur im Inhaltsbereich volle Breite, Header bleibt unbeeinflusst */
#sp-main-body .container,
#sp-main-body .container-sm,
#sp-main-body .container-md,
#sp-main-body .container-lg,
#sp-main-body .container-xl,
#sp-main-body .container-xxl,
#sp-main-body .sp-page-builder .sppb-container,
#sp-main-body .sp-page-builder .sppb-row-container {
  max-width: 100% !important;
  width: 100% !important;
}
#sp-header .container, #sp-header .container-inner { max-width: 100% !important; width: 100% !important; }

#sp-footer .container, #sp-footer .container-inner { max-width: 100% !important; width: 100% !important; }

.sppb-row-container > .sppb-row > div {
    padding-left: -15px;
    padding-right: -15px;
}

.layout-boxed .body-innerwrapper {

    margin: 0 auto;
    box-shadow: none !important;
}
.sp-page-title .sp-page-title-heading {
    font-size: 30px;
    line-height: 1;

}

/* Page-Title: Basis (deine Werte) */
.sp-page-title {
  background-repeat: no-repeat !important;
  background-position: 50% 50% !important;
  background-size: cover !important;
  background-attachment: scroll;
  text-align: left;
 margin-bottom: 10px;
  margin-left: 30px;
  margin-right: 30px;
  margin-top: 0 !important;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

/* Textblock unten links fixieren – unabhängig von Inhaltshöhe */
.sp-page-title > .container,
.sp-page-title > .container-fluid {
  position: absolute;
  inset: 0;                 /* top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;   /* Überschrift über Subheading */
  justify-content: flex-end;/* vertikal nach unten */
  align-items: flex-start;  /* horizontal nach links */
  padding: clamp(16px, 3vw, 32px);
  z-index: 1;
}

/* Abstände der Zeilen konsistent halten */
.sp-page-title .sp-page-title-heading{
  margin: 0 0 8px 0;
}
.sp-page-title .sp-page-title-sub-heading{
  margin: 0;
}

/* –– deine bestehenden Höhen/Ratio-Queries –– */
/* ≥ 1400px: fixe Höhe 500px */
@media (min-width: 1400px){
  .sp-page-title{ height: 700px; }
}

/* ≤ 1399px: 16:9 Rechteck */
@media (max-width: 1399.98px){
  .sp-page-title{
    height: auto !important;
    aspect-ratio: 16 / 9;
    min-height: 420px;
  }
}

/* ≤ 991px (Tablet): 4:3 */
@media (max-width: 991.98px){
  .sp-page-title{
    aspect-ratio: 4 / 3;
    min-height: 360px;
    margin-left: 24px;
    margin-right: 24px;
  }
}

/* ≤ 575px (Phone) */
@media (max-width: 575.98px) and (orientation: portrait){
  .sp-page-title{
    aspect-ratio: 4 / 4;
    min-height: 320px;
    margin-left: 16px;
    margin-right: 16px;
    border-radius: 16px;
    margin-bottom: 0px;
  }
}
@media (max-width: 575.98px) and (orientation: landscape){
  .sp-page-title{
    aspect-ratio: 16 / 9;
    min-height: 260px;
    margin-left: 16px;
    margin-right: 16px;
    border-radius: 16px;
  }

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 80% !important;
}

}


/* --- Produktbild-Quadrat (deins, unverändert) ---------------------------- */
.easystore-product-image{
  position: relative;
  overflow: hidden;
  padding-bottom: 100% !important;
}

/* Helix Pfeil entfernen / neutralisieren (optional) */
body.ltr .sp-megamenu-parent > li.sp-has-child > a::after,
body.ltr .sp-megamenu-parent > li.sp-has-child > span::after{
  content: "";
  margin-left: 0;
}

/* --- Burger-Icon auf li.menu-burger > a ---------------------------------- */
.sp-megamenu-parent > li.menu-burger > a{
  position: relative;
  display: inline-block;
  width: 40px;              /* Breite des Icons */
  height: 12px;             /* Abstand der Linien */
  top:-30px;
  padding: 0 !important;
  text-indent: -9999px;     /* Titel verstecken */
  overflow: hidden;
}

/* zwei Linien permanent sichtbar */
.sp-megamenu-parent > li.menu-burger > a::before,
.sp-megamenu-parent > li.menu-burger > a::after{
  content: "";
  position: absolute;
  left: 0; right: 0;        /* volle Breite */
  height: 2px;
  background: #000;
  border-radius: 2px;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none;
  transition: transform .25s ease, top .25s ease, bottom .25s ease;
top:8px;
}

/* Ausgangspositionen */
.sp-megamenu-parent > li.menu-burger > a::before{ top: 0; }
.sp-megamenu-parent > li.menu-burger > a::after { bottom: 0; }

/* Hover/Offen: Linien kreuzen (X) */
.sp-megamenu-parent > li.menu-burger:hover > a::before,
.sp-megamenu-parent > li.menu-burger.force-open > a::before{
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.sp-megamenu-parent > li.menu-burger:hover > a::after,
.sp-megamenu-parent > li.menu-burger.force-open > a::after{
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

body {
  margin-left:15px;
    margin-right: 15px;
}




/* ========= Header transparent + Überlappung ========= */
#sp-header{
  position: relative;
  background: #fff;
  z-index: 901;
  margin-bottom: calc(var(--logo-size) * -0.35); /* Logo etwas in den Bereich darunter ziehen */
}
#sp-page-title{    /* Bereich "Page Title" für die Suche */
  background: #ffffff;
  padding-top: calc(var(--logo-size) * 0.45);
  padding-bottom: 0;
}

/* ========= Logo in runder Badge, zentriert ========= */
#sp-logo .logo{
  position: relative;
  width: var(--logo-size);
  height: var(--logo-size);
  border-radius: var(--radius-xxl);
  background: #fff;
  box-shadow: var(--elev-2);
  display: grid;
  place-items: center;
  margin-inline: auto;               /* zentriert in der mittleren Spalte */
  transform: translateY(18%);        /* etwas nach unten überlappen lassen */
  z-index: 25;
}
#sp-logo .logo img{
  
  height: auto;
  display: block;
}

#sp-header .logo {
    margin-top: -12px;
}


/* ≤ 991px (Tablet): 4:3 */
@media (max-width: 991.98px){
#sp-header .logo {
    margin-top: -12px;
    position: absolute;
    top: 0px;
    left: 40%;
    right: 40%;
   width: 120px;
}
}


/* ≤ 575px (Phone) */
@media (max-width: 575.98px) and (orientation: portrait){
#sp-header .logo {
 
    position: absolute;
    top: 10px;
    left: 40%;
    right: 40%;
    width: 85px;
    background: none;
}


.sppb-row-container > .sppb-row > div {
    padding-left: 0px;
    padding-right: 0px;
}

.qv-img {
    width: 300px !important;
    max-width: 460px;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
}

}

/* ========= zentrale Variablen zum Feintuning ========= */
:root{
  --logo-size:   clamp(8px, 9vw, 145px);       /* Durchmesser der Logo-Badge */
  --search-w:    clamp(520px, 64vw, 980px);    /* max. Breite der Suche */
  --search-pad:  clamp(10px, 1.4vw, 16px);     /* Innenabstand der Suche */
  --radius-xxl:  9999px;
  --elev-1: 0 8px 30px rgba(0,0,0,.12);
  --elev-2: 0 16px 40px rgba(0,0,0,.16);
}


* 3) Suche im top2: Icon + Input zentrieren */


 .easystore-search-container{
  position: absolute;
  display: flex;
  align-items: center;               /* vertikal mittig */
  margin-top:30px;
}
.easystore-search-container > span{
  position: absolute;
  left: 12px;

  transform: translateY(-50%);       /* Icon exakt mittig */
  pointer-events: none;
}
.easystore-search-container .form-control{
  margin-top:10px;
height: 40px;                      /* fixe, angenehme Höhe */
  line-height: 30px;
  padding: 0 14px 0 38px;            /* Platz fürs Icon links */
  border-radius: 9999px;             /* pill-form (optional) */
}

#sp-main-body {
    padding: 100px 0;
    margin-top: -12px;
}

#sp-header {
    box-shadow: none;
}





/* EasyStore Offcanvas-Cart: "Warenkorb anzeigen" ausblenden */
.easystore-drawer .easystore-drawer-footer a.easystore-cart-visit {
  display: none !important;
}
/* EasyStore: Footer-Buttons im Cart je 50% Breite */
.easystore-drawer .easystore-drawer-footer {
  display: flex;
  gap: 12px;                 /* Abstand zwischen den Buttons */
  align-items: stretch;
}

.easystore-drawer .easystore-drawer-footer .easystore-cart-clear,
.easystore-drawer .easystore-drawer-footer .easystore-cart-checkout {
  flex: 1 1 50%;
  max-width: 50%;
  display: block;
}

.easystore-drawer .easystore-drawer-footer .btn {
  width: 100%;               /* Button füllt seine Hälfte */
  text-align: center;
}


.easystore-drawer {
    z-index: 999999 !important;
}

/* Ersetze fa-searchengin durch fa-search (Lupe) */

/* Für Font Awesome 4 */
.fa-searchengin:before {
  font-family: "FontAwesome";   /* FA4 */
  content: "\f002";             /* fa-search */
  font-style: normal;
  font-weight: normal;
}

/* Für Font Awesome 5/6 */
.fa-searchengin {
  font-family: "Font Awesome 5 Free"; /* FA5/6 */
  font-weight: 900;                   /* solid */
}
.fa-searchengin:before {
  content: "\f002";                   /* fa-search */
}

/* Facebook Icon als Outline */
.fa-facebook-f {
  color: transparent;              /* Füllung entfernen */
  -webkit-text-stroke: 0.07em #fc7800;   /* Outline-Farbe + Stärke */
  text-stroke: 1px #fc7800;           /* Fallback */
  
}


/* Phone Icon als Outline */
.fa-phone {
  color: transparent;              /* Füllung entfernen */
  -webkit-text-stroke: 0.07em #fc7800;   /* Outline-Farbe + Stärke */
  text-stroke: 1px #fc7800;           /* Fallback */
  
}



/* Suche Icon als Outline */
.fa-searchengin {
  color: transparent;              /* Füllung entfernen */
  -webkit-text-stroke: 0.07em #fc7800 ;   /* Outline-Farbe + Stärke */
  text-stroke: 1px #fc7800 ;           /* Fallback */
  
}


/* Quickview / Produkt: Varianten & Optionen sicher sichtbar */
.easystore-product-options,
.easystore-product-variants,
.product-options,
.product-variants,
.es-product-options,
.es-product-variants{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}

/* ===== Layout Mitte ===== */
.espr-center {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: calc(100vh - 180px);
}

/* ===== Box ===== */
.espr-success-card {
    max-width: 720px;
    width: 100%;
    text-align: center;
    padding: 50px 35px;
    border-radius: 20px;
    border: 1px solid #e5e5e5;
    background: #fff;

    opacity: 0;
    transform: translateY(20px);
    animation: esprFadeIn 0.6s ease forwards;
}

/* Logo oben */
.espr-success-logo {
    width: 90px;
    margin: 0 auto 20px;
}

/* Titel */
.espr-success-card h2 {
    font-size: 2.1rem;
    margin-bottom: 15px;
}

/* Text */
.espr-success-card p {
    font-size: 1.05rem;
    color: #555;
}

/* ===== Buttons ===== */
.espr-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
}

/* Primary (orange) */
.espr-btn-primary {
    background: #f28c00;
    color: #111;
    border-radius: 12px;
    min-height: 56px;
    padding: 0 28px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-size: 1.1rem;
}

.espr-btn-primary:hover {
    background: #d97700;
    transform: translateY(-2px);
}

/* Secondary (Outline) */
.espr-btn-secondary {
    border: 1px solid #111;
    border-radius: 999px;
    min-height: 56px;
    padding: 0 28px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #111;
}

.espr-btn-secondary:hover {
    background: #111;
    color: #fff;
}

/* Animation */
@keyframes esprFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


button.is-disabled,
input.is-disabled,
button:disabled,
input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}





@media (max-width: 768px) {

  .lks-touch-scroll {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 0px;
    padding: 0 0px 10px;

    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    scrollbar-width: none;
  }

  .lks-touch-scroll::-webkit-scrollbar {
    display: none;
  }

  .lks-touch-scroll .sppb-collection-item {
    flex: 0 0 140px !important;
    width: 140px !important;
    float: none !important;
  }

  .lks-touch-scroll img,
  .lks-touch-scroll a {
    touch-action: pan-x pan-y;
  }

  .bx-controls,
  .bx-prev,
  .bx-next {
    display: none !important;
  }
}

/* =========================
   LKS MOBILE MENU FINAL
========================= */

/* Hamburger ohne Hintergrund */
#offcanvas-toggler,
#offcanvas-toggler:hover,
#offcanvas-toggler:focus,
#sp-logo #offcanvas-toggler,
body.ltr #offcanvas-toggler.offcanvas-toggler-left {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Menü volle Breite von oben */
.offcanvas-menu {
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    right: 0 !important;

    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(100vh - 70px) !important;

    background: #fff !important;
    z-index: 900 !important;

    transform: translateY(-110%) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    overflow-y: auto !important;
    transition: transform .35s ease, opacity .25s ease;
}

/* Menü offen */
body.offcanvas-active .offcanvas-menu,
.offcanvas-menu.show,
.offcanvas-menu.active,
.offcanvas-menu.open {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Kein Blur / Overlay */
.offcanvas-overlay,
.offcanvas-backdrop {
    display: none !important;
}

/* Innenbereich */
.offcanvas-inner {
    background: #fff !important;
    padding: 50px 0px 100px !important;
}

/* Listen reset */
.offcanvas-menu ul.menu,
.offcanvas-menu ul.menu-child {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* "all" ausblenden */
.offcanvas-menu ul.menu > li.item-768 > a,
.offcanvas-menu ul.menu > li.item-768 > span {
    display: none !important;
}

/* Kinder von "all" anzeigen */
.offcanvas-menu ul.menu > li.item-768 > ul.menu-child {
    display: block !important;
}

/* Menüpunkte */
.offcanvas-menu .menu li a,
.offcanvas-menu .menu li span {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    min-height: 58px !important;
    padding: 0 0 0 0 !important;

    color: #222 !important;
    background: transparent !important;

    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;

    border-bottom: 1px solid #d9d9d9 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Hover / aktiv */
.offcanvas-menu .menu li a:hover,
.offcanvas-menu .menu li.active > a {
    color: #fc7800 !important;
    background: transparent !important;
}

/* Untermenüs */
.offcanvas-menu ul.menu-child {
    padding-left: 14px !important;
}

.offcanvas-menu ul.menu-child li a {
    font-size: 16px !important;
}

/* Pfeil-Toggler: nur links/rechts Linie */
.offcanvas-menu .menu-toggler {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 50px !important;
    min-width: 50px !important;
    height: 58px !important;

    border-left: 1px solid #d9d9d9 !important;
    border-right: 1px solid #d9d9d9 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;

    background: transparent !important;
    border-radius: 0 !important;

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

/* Original Icon aus */
.offcanvas-menu .menu-toggler-icon {
    display: none !important;
}

/* Eigenes Pfeilsymbol */
.offcanvas-menu .menu-toggler::before {
    content: "›";
    font-size: 32px !important;
    line-height: 1 !important;
    color: #333 !important;
}

/* Home Icon entfernen */
.offcanvas-menu span.pe-2.home_button {
    display: none !important;
}

/* Close Button */
.offcanvas-menu .close-offcanvas,
.offcanvas-menu .offcanvas-close {
    color: #111 !important;
    font-size: 40px !important;
    opacity: 1 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    top: 20px !important;
    right: 20px !important;
}

/* Hamburger Position */
body.ltr #offcanvas-toggler.offcanvas-toggler-left {
    float: left;
    position: fixed;
    top: 4px !important;
    left: 0px !important;
    margin-right: 0 !important;
}


#sp-logo #offcanvas-toggler {
    width: 135px !important;
   
}

/* Pfeil mittig setzen */
.offcanvas-menu .menu-toggler {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.offcanvas-menu .menu-toggler::before {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;

    transform: rotate(0deg) !important;
    transform-origin: center center !important;
    transition: transform .25s ease !important;
}

/* Pfeil drehen wenn Untermenü offen ist */
.offcanvas-menu li.menu-parent-open > a > .menu-toggler::before,
.offcanvas-menu li.menu-parent-open > span > .menu-toggler::before {
    transform: rotate(90deg) !important;
}

/* Doppelten Pfeil entfernen */
.offcanvas-menu .menu-toggler::after {
    content: none !important;
    display: none !important;
}

/* Nur unseren Pfeil behalten */
.offcanvas-menu .menu-toggler::before {
    content: "›" !important;
}

/* Close-X im Offcanvas selbst ausblenden */
.offcanvas-menu .close-offcanvas,
.offcanvas-menu .offcanvas-close {
    display: none !important;
}


/* Offcanvas Close-X links oben wie Hamburger positionieren */
.offcanvas-menu .close-offcanvas,
.offcanvas-menu .offcanvas-close {
    display: flex !important;
    position: fixed !important;

    top: 28px !important;
    left: 35px !important;
    right: auto !important;

    width: 39px !important;
    height: 39px !important;

    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    color: #111 !important;
    font-size: 38px !important;
    z-index: 1300 !important;
}

body.offcanvas-active #offcanvas-toggler {
    visibility: hidden !important;
}

/* Sticky-Header Optik nur wenn Offcanvas-Menü offen ist */
body.offcanvas-active #sp-header {
    background: #fff !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    border-bottom: 1px solid #e5e5e5 !important;
    z-index: 1000 !important;
}

/* Menü darunter beginnen lassen */
body.offcanvas-active .offcanvas-menu {
    top: 70px !important;
    height: calc(100vh - 70px) !important;
}