/* Custom */
html {
	background-color: #F6F5F0;
	scroll-padding-top: 150px;
}

body {
  max-width: 1920px;
  margin-inline: auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.10);
  overflow-x: hidden;
}

ol, ul {
    margin: 15px 0;
}

ol li ul, 
ol li ol, 
ul li ul, 
ul li ol {
    margin: 0;
}



.elementor-widget-n-menu .e-n-menu-content>.e-con {
  max-width: 1920px !important;
  margin-inline: auto;
}

/* Salben mega menu: once it contains six links, split the Elementor menu
   into two balanced reading columns. Keep the compact mobile menu single-column. */
@media (min-width: 768px) {
  .salben-menu:has(.elementor-widget-nav-menu li:nth-child(6))
  .elementor-widget-nav-menu .elementor-nav-menu {
    column-gap: 40px;
    columns: 2;
    display: block !important;
  }

  .salben-menu .elementor-widget-nav-menu li {
    break-inside: avoid;
  }
}




/* Mini Cart im Header: Button-Design entfernen */

#elementor-menu-cart__toggle_button.elementor-button {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
	color: #000!important;
}

/* Cart counter: use one centring system at every breakpoint. Elementor's
   default line-height centres the glyph differently on desktop and mobile. */
header #elementor-menu-cart__toggle_button .elementor-button-icon-qty {
  box-sizing: border-box;
  color: transparent !important;
  display: grid !important;
  font-family: Arial, sans-serif;
  font-size: 10px !important;
  font-weight: 700;
  height: 16px;
  line-height: 1 !important;
  min-width: 16px;
  padding: 0 !important;
  place-items: center;
  text-align: center;
  text-indent: 0 !important;
  width: 16px;
}

header #elementor-menu-cart__toggle_button .elementor-button-icon-qty::after {
  align-items: center;
  color: #fff !important;
  content: attr(data-counter) !important;
  display: flex !important;
  font-family: Arial, sans-serif;
  font-size: 10px !important;
  font-weight: 700;
  grid-area: 1 / 1;
  height: 100%;
  justify-content: center;
  line-height: 1 !important;
  transform: translate(1.35px, 3px);
  width: 100%;
}

/* 
#elementor-menu-cart__toggle_button .elementor-button-text,
#elementor-menu-cart__toggle_button .elementor-menu-cart__toggle .elementor-button {
    background-color: transparent !important;
}

#elementor-menu-cart__toggle_button a.elementor-button:hover {
    background: none !important;
	color: rgba(0,0,0,.7) !important;
}*/
header .elementor-sticky {
	min-height: 0!important;
	height: 80px!important;
	transition: all 0.6s ease;
    box-shadow: 0 4px 4px rgba(0,0,0,.08);
}
header .elementor-sticky.elementor-sticky--active {
	height: 50px!important;
	box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
header .elementor-sticky #logo img {
	width: 160px!important;
	transition: width 0.6s ease;
}
header .elementor-sticky.elementor-sticky--active #logo img {
	width: 100px!important;
}

/* Elementor adds the menu-panel offset below the navigation item. In the
   compact sticky header that offset would leave a visible seam, so let the
   mega menu meet the header edge exactly. */
@media (min-width: 768px) {
  header .elementor-sticky.elementor-sticky--active .elementor-widget-n-menu {
    --n-menu-title-distance-from-content: 5px !important;
  }
}



.blur-box {
  position: relative;
  z-index: 1;
}

.blur-box::after {
  content: "";
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.05); /* Farbe anpassen */
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);

  z-index: -1;
}

@supports not ((backdrop-filter: blur(1px))) {
  .blur-box::after {
    backdrop-filter: none;
    background: rgba(0, 0, 0, 0.25);
  }
}

/* Glasfläche für Elementor-Container: Klasse "sapura-glass" unter
   Erweitert > CSS-Klassen eintragen. Der Effekt wird auf Bild- oder
   Farbflächen hinter dem Container sichtbar. */
.sapura-glass {
  background: rgba(255, 255, 255, 0.74) !important;
  border: 1px solid rgba(255, 255, 255, 0.56) !important;
  border-radius: 20px;
  box-shadow: 0 18px 36px rgba(47, 44, 41, 0.16);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
}

@supports not ((backdrop-filter: blur(1px))) {
  .sapura-glass {
    background: rgba(255, 255, 255, 0.92) !important;
  }
}


@media (max-width: 1024px) {
  .elementor-element,
  .e-con {
    background-attachment: scroll !important;
  }
}

/* Alle Touchgeräte (iOS + Android) */
@media (hover: none) and (pointer: coarse) {
  .elementor-element,
  .e-con {
    background-attachment: scroll !important;
  }
}

/* Keep the payment-method HTML widget at its content height on mobile. */
@media (max-width: 767px) {
  .elementor-location-footer .elementor-element-9d234bf {
	align-self: stretch !important;
	width: 100% !important;
    height: fit-content !important;
    min-height: 0 !important;
  }

  /* Keep the shared "Darum wir" carousel controls inside the mobile viewport. */
  .elementor-1404 .elementor-widget-n-carousel {
    overflow-x: clip;
  }

  .elementor-1404 .elementor-widget-n-carousel .elementor-swiper-button-prev {
    left: 8px !important;
    margin-left: 0 !important;
  }

  .elementor-1404 .elementor-widget-n-carousel .elementor-swiper-button-next {
    right: 8px !important;
    left: auto !important;
    margin-right: 0 !important;
  }

  /* The home-page embed follows the same 30px mobile container inset as the sections above it. */
  body.home .elementor-1404 .elementor-widget-n-carousel {
    width: calc(100% - 60px);
    margin-inline: auto;
  }

  body.home .elementor-1404 .elementor-widget-n-carousel .elementor-swiper-button {
    display: none !important;
  }

  /* Header menu: generous rows and touch targets instead of the desktop-sized dropdown. */
  header .elementor-widget-n-menu .e-n-menu-toggle {
    align-items: center;
    border: 0 !important;
    display: flex;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
    background: transparent !important;
    transform: none !important;
    transition: none !important;
  }

  header .elementor-widget-n-menu .e-n-menu-toggle[aria-expanded="true"],
  header .elementor-widget-n-menu .e-n-menu-toggle:hover,
  header .elementor-widget-n-menu .e-n-menu-toggle:active,
  header .elementor-widget-n-menu .e-n-menu-toggle:focus,
  header .elementor-widget-n-menu .e-n-menu-toggle:focus-visible {
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  header .elementor-widget-n-menu .e-n-menu-toggle-icon,
  header .elementor-widget-n-menu .e-n-menu-toggle-icon svg {
    color: #4b4a49 !important;
    fill: #4b4a49 !important;
    background: transparent !important;
  }

  /* Elementor renders the open and close SVGs at different intrinsic sizes.
     Give both icons the same visible box while keeping the 44px touch target. */
  header .elementor-widget-n-menu .e-n-menu-toggle-icon {
    align-items: center;
    display: flex !important;
    flex: 0 0 21px;
    height: 21px !important;
    justify-content: center;
    width: 21px !important;
  }

  header .elementor-widget-n-menu .e-n-menu-toggle-icon svg {
    display: block;
    height: 21px !important;
    max-width: none !important;
    width: 21px !important;
  }

  /* Elementor absolutely positions the close state at the button's top-left. */
  header .elementor-widget-n-menu .e-n-menu-toggle-icon.e-close {
    left: 50% !important;
    position: absolute !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  header .elementor-widget-n-menu .e-n-menu-toggle-icon.e-close svg {
    height: 16px !important;
    width: 16px !important;
  }

  header .elementor-widget-n-menu .e-n-menu-toggle-icon.e-open {
    flex-basis: 24px;
    height: 24px !important;
    width: 24px !important;
  }

  header .elementor-widget-n-menu .e-n-menu-toggle-icon.e-open svg {
    height: 24px !important;
    width: 24px !important;
  }

  /* Use the same compact icon scale for menu, search and mini cart. */
  header .elementor-widget-icon .elementor-icon-wrapper,
  header .elementor-widget-icon .elementor-icon,
  header .elementor-widget-icon .elementor-icon svg,
  header #elementor-menu-cart__toggle_button,
  header #elementor-menu-cart__toggle_button .elementor-button-icon,
  header #elementor-menu-cart__toggle_button .e-font-icon-svg {
    align-items: center;
    display: flex;
    height: 21px !important;
    justify-content: center;
    width: 21px !important;
  }

  header #elementor-menu-cart__toggle_button .elementor-button-icon {
    position: relative;
  }

  /* The search glyph needs a slightly calmer optical size than menu and cart. */
  header .elementor-widget-icon .elementor-icon-wrapper,
  header .elementor-widget-icon .elementor-icon,
  header .elementor-widget-icon .elementor-icon svg {
    height: 20px !important;
    width: 20px !important;
  }

  /* Align the cart glyph with the menu and search glyphs. */
  header #elementor-menu-cart__toggle_button {
    transform: translateY(1px);
  }

  header .elementor-widget-n-menu .e-n-menu-heading {
    display: block !important;
  }

  header .elementor-widget-n-menu .e-n-menu-item {
    min-height: 56px;
  }

  header .elementor-widget-n-menu .e-n-menu-title {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100% !important;
    min-height: 56px;
    padding: 0 30px;
  }

  /* The header uses a 30px mobile gutter. Keep the menu panel and every
     expanded submenu on the same vertical grid instead of Elementor's
     different default insets for each menu level. */
  header .elementor-widget-n-menu .e-n-menu-item > .e-n-menu-content > .e-con {
    padding-inline: 30px !important;
  }

  /* Soften the page behind the open mobile navigation without dimming the
     header or the menu itself. The layer never intercepts taps. */
  body::after {
    background: rgba(35, 34, 32, 0.26);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    content: "";
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    visibility: hidden;
    z-index: 2147483000;
  }

  body:has(header .elementor-widget-n-menu .e-n-menu-toggle[aria-expanded="true"])::after {
    opacity: 1;
    visibility: visible;
  }

  body:has(header .elementor-widget-n-menu .e-n-menu-toggle[aria-expanded="true"]) header {
    position: relative;
    z-index: 2147483001;
  }

  /* Keep Elementor's expanded mobile menu above product and hero visuals. */
  body:has(header .elementor-widget-n-menu .e-n-menu-toggle[aria-expanded="true"]) header .elementor-sticky,
  body:has(header .elementor-widget-n-menu .e-n-menu-toggle[aria-expanded="true"]) header .elementor-widget-n-menu {
    z-index: 2147483002 !important;
  }

  body:has(header .elementor-widget-n-menu .e-n-menu-toggle[aria-expanded="true"]) header .elementor-widget-n-menu .e-n-menu-heading {
    position: relative !important;
    z-index: 2147483003 !important;
  }

  /* The fixed contact buttons belong to the header, but must not float over the menu backdrop. */
  body:has(header .elementor-widget-n-menu .e-n-menu-toggle[aria-expanded="true"]) header .floating-actions {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  header .elementor-widget-n-menu .e-n-menu-title-text {
    font-size: 18px !important;
    line-height: 1.3;
  }

  header .elementor-widget-n-menu .e-n-menu-dropdown-icon {
    width: 44px !important;
    height: 44px !important;
    padding: 12px;
  }
}


/* Reusable "Darum wir" template: wide embeds sit side by side, narrow embeds stack. */
.elementor-1404 {
  container-type: inline-size;
}

body.single-product .elementor-1404 {
  margin: 60px 0 !important;
}

.elementor-1404 .elementor-element-c5ab04c {
  padding-block: 40px 60px !important;
}

@container (min-width: 900px) {
  .elementor-1404 .elementor-element-c5ab04c {
    border-radius: 0 !important;
    padding-inline: 0 !important;
    padding-block: 120px !important;
  }

  .elementor-1404 .elementor-element-373d1da {
    margin-inline: auto !important;
    max-width: none !important;
    width: min(1272px, calc(100% - 60px)) !important;
  }

  .elementor-1404 .elementor-element-373d1da .elementor-swiper-button-prev {
    left: 0 !important;
  }

  .elementor-1404 .elementor-element-373d1da .elementor-swiper-button-next {
    right: 0 !important;
  }

  .elementor-1404 .elementor-element-6808663,
  .elementor-1404 .elementor-element-ef6be1c,
  .elementor-1404 .elementor-element-043a8b7,
  .elementor-1404 .elementor-element-6808663 > .e-con-inner,
  .elementor-1404 .elementor-element-ef6be1c > .e-con-inner,
  .elementor-1404 .elementor-element-043a8b7 > .e-con-inner {
    flex-direction: row !important;
  }

  .elementor-1404 .elementor-element-24f7342,
  .elementor-1404 .elementor-element-4f48b86,
  .elementor-1404 .elementor-element-2be2208,
  .elementor-1404 .elementor-element-bf163a1,
  .elementor-1404 .elementor-element-c77c866,
  .elementor-1404 .elementor-element-bf30695 {
    flex: 1 1 0 !important;
    width: auto !important;
  }
}