/** Shopify CDN: Minification failed

Line 32:0 All "@import" rules must come first

**/
/* ============================================

   DEINE VARIABLEN (Hier einfach die Zahlen ändern!)

   ============================================ */

:root {

  --text-size-title: clamp(3rem, 5.6vw, 3.5rem);

  --text-size-desc: 14px;

  --text-size-price: 2.0rem;

  --text-size-pills: 1.3rem;

  --size-pills-width: 100px;

  --size-pills-height: 48px;

}



/* ---- Bayon-Font laden ---- */

@import url('https://fonts.googleapis.com/css2?family=Bayon&display=swap');



/* ---- Überschriften: Bayon, uppercase ---- */

h1, h2, h3, h4, h5,

.h0, .h1, .h2, .h3, .h4, .h5,

.title,

.product__title > * {

  font-family: 'Bayon', sans-serif !important;

  font-weight: 400 !important;

  text-transform: uppercase;

  letter-spacing: 0;

  line-height: 1;

}



.product__title h1,

.product__title .h1 {

  font-size: var(--text-size-title) !important;

}



/* ---- Kleinere Labels/Menüs: uppercase ---- */

.header__menu-item,

.button,

button.button,

.link,

summary,

.product-form__submit,

.variant-option__button-label,

.facets__summary,

.pagination__item {

  text-transform: uppercase;

  letter-spacing: 0.03em;

}



/* ---- Keine Rundungen ---- */

.button,

button.button,

.card,

.card__inner,

input,

select,

textarea,

.field__input,

.select__select,

.quantity,

.cart-drawer,

.search-modal {

  border-radius: 0 !important;

}



/* ---- Bilder transparent & ohne Rahmen/Schatten ---- */

.media,

.product__media,

.product__media img,

.global-media-settings,

.global-media-settings img {

  border-radius: 0 !important;

  border: none !important;

  box-shadow: none !important;

  background: transparent !important;

  background-color: transparent !important;

}



/* ---- Buttons: schwarz, hart ---- */

.button--primary,

.product-form__submit {

  background-color: #000;

  color: #fff;

  box-shadow: none;

  border: 1px solid #000;

}



.button--primary:hover,

.product-form__submit:hover {

  background-color: #333;

}



.button--secondary {

  background: transparent;

  color: #000;

  border: 1px solid #000;

  box-shadow: none;

}



.button:after,

.shopify-payment-button__button:after {

  box-shadow: none !important;

}



/* ---- Steuer-/Versand-Hinweis ausblenden ---- */

.tax-note,

.product__tax {

  display: none !important;

}



/* ---- Größen-Pill Optik (Farbe, Rahmen, Rundung) ---- */

.product-form__input--pill input[type='radio'] + label {

  border: 1px solid rgba(0, 0, 0, 0.13);

  border-radius: 8px !important;

  background: #fff;

  color: #000;

  transition: border-color 0.15s ease, background 0.15s ease;

  font-size: var(--text-size-pills) !important;

}



.product-form__input--pill input[type='radio'] + label:hover {

  border-color: #000;

}



.product-form__input--pill input[type='radio']:checked + label {

  background: #fff !important;

  border-color: #000 !important;

  color: #000 !important;

  border-width: 2px !important;

}



/* Ausverkaufte Größen durchstreichen */

.product-form__input--pill input[type='radio'].disabled + label,

.product-form__input--pill input[type='radio']:disabled + label {

  text-decoration: line-through !important;

  opacity: 0.4 !important;

  background: #fafafa !important;

}



/* ---- Preis ---- */

.price {

  font-size: var(--text-size-price) !important;

  color: #000;

}



/* ---- Links ---- */

.link,

.underlined-link {

  text-decoration: none;

}



.link:hover,

.underlined-link:hover {

  color: rgba(0, 0, 0, 0.6);

}



/* ============================================

   PRODUKTSEITE — Bilder einspaltig (Desktop/Tablet)

   ============================================ */

@media screen and (min-width: 750px) {

  .product__media-list,

  .product-media-container .product__media-list {

    display: block !important;

  }



  .product__media-item {

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

  }



  .product__media-list .product__media-item + .product__media-item {

    margin-top: 0 !important;

  }



  .product__media-item .product__media,

  .product__media-item img {

    width: 100% !important;

    height: auto !important;

  }

}



/* Menge ausblenden */

.product-form__quantity,

.product-form__input--quantity {

  display: none !important;

}



/* ============================================

   PRODUKTSEITE — Dreispalten-Layout (Desktop)

   ============================================ */

@media screen and (min-width: 990px) {



  .product {

    display: grid !important;

    grid-template-columns: 0.85fr 1.3fr 1.15fr !important;

    gap: 4rem !important;

    align-items: start !important;

  }



  .product__media-wrapper {

    grid-column: 2 !important;

    order: 2 !important;

    max-width: 100% !important;

    width: 100% !important;

  }



  .product__info-wrapper {

    grid-column: 3 !important;

    order: 3 !important;

    padding-left: 0 !important;

    position: sticky !important;

    top: 4rem !important;

  }



  .custom-left-column {

    grid-column: 1 !important;

    order: 1 !important;

    position: sticky !important;

    top: 4rem !important;

    display: flex !important;

    flex-direction: column !important;

  }



 .custom-left-column .product__description {

    font-size: var(--text-size-desc) !important;

    line-height: 1.6 !important;

    color: var(--opt-desc-color) !important;

    margin-top: 0 !important;

  }

}



/* ============================================

   HEADER — dünn, ohne Linie, Lupe & Account aus

   ============================================ */

.header-wrapper {

  border-bottom: none !important;

  box-shadow: none !important;

}



.header {

  border-bottom: none !important;

}



.header__search,

.header__icon--search,

details-modal.header__search {

  display: none !important;

}



.header__icon--account {

  display: none !important;

}



@media screen and (max-width: 749px) {

  .header {

    padding-top: 8px !important;

    padding-bottom: 8px !important;

    min-height: 0 !important;

  }



  .header__heading-logo {

    max-width: 42px !important;

    width: 42px !important;

  }

}



/* ============================================

   PRODUKTSEITE — Back-Button

   ============================================ */

.opt-back-btn {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  font-size: 1.3rem;

  font-weight: 500;

  text-decoration: none;

  color: #000;

  margin-bottom: 1.5rem;

  cursor: pointer;

  transition: opacity 0.15s ease;

}



.opt-back-btn:hover {

  opacity: 0.55;

}



.opt-back-btn svg {

  display: block;

  width: 8px;

  height: 12px;

}



/* ============================================

   PRODUKTSEITE — Preis fett

   ============================================ */

.price,

.price .price-item,

.price__regular .price-item {

  font-weight: 700 !important;

}



/* ============================================

   PRODUKTSEITE — Add to cart / Sold out Button

   ============================================ */

.product-form__submit,

button.product-form__submit {

  border-radius: 10px !important;

  background-color: var(--opt-btn-bg) !important;

  color: var(--opt-btn-text) !important;

  border: none !important;

  text-transform: none !important;

  letter-spacing: 0.02em !important;

  font-weight: 500 !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 10px !important;

  padding: 1.5rem 2rem !important;

  overflow: hidden !important;

}



.product-form__submit::after,

button.product-form__submit::after {

  border-radius: 10px !important;

}



.product-form__submit[disabled],

.product-form__submit.disabled,

.product-form__submit:disabled,

button.product-form__submit[disabled] {

  border-radius: 10px !important;

  background-color: #000 !important;

  color: #fff !important;

  border: none !important;

  opacity: 1 !important;

  cursor: not-allowed !important;

}



.product-form__submit:not([disabled]):not(.disabled):not(:disabled) > span::before {

  content: "";

  display: inline-block;

  width: 17px;

  height: 17px;

  margin-right: 8px;

  vertical-align: -3px;

  background-color: currentColor;

  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/></svg>") no-repeat center;

  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/></svg>") no-repeat center;

  -webkit-mask-size: contain;

  mask-size: contain;

}



/* ============================================

   PRODUKTSEITE — Zoom-Lupe ausblenden

   ============================================ */

.product__media-toggle .svg-wrapper,

.product__media-toggle svg,

.product__media-icon {

  display: none !important;

}



.product__media-toggle {

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

  pointer-events: none !important;

}



/* ============================================

   PRODUKTSEITE — eigene Karussell-Punkte (Mobil)

   ============================================ */

.opt-dots {

  display: none;

}



@media screen and (max-width: 749px) {

  .slider-buttons .slider-button {

    display: none !important;

  }



  .slider-buttons {

    justify-content: center !important;

  }



  .slider-counter--current,

  .slider-counter--total,

  .slider-counter [aria-hidden="true"] {

    display: none !important;

  }



  .opt-dots {

    display: flex;

    justify-content: center;

    gap: 7px;

    margin: 1rem 0 0.5rem;

  }



  .opt-dot {

    width: 8px;

    height: 8px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.25);

    cursor: pointer;

    transition: background 0.2s ease;

  }



  .opt-dot--active {

    background: #000;

  }

}



/* ============================================

   GRÖSSEN-BUTTONS — Grundlayout (alle Geräte)

   ============================================ */

variant-selects,

variant-radios {

  display: block !important;

}



.product-form__input--pill {

  display: flex !important;

  flex-flow: row wrap !important;

  gap: 0.8rem !important;

  align-items: center !important;

  border: none !important;

  padding: 0 !important;

  margin: 0 0 2rem 0 !important;

}



.product-form__input--pill > legend,

.product-form__input--pill > .form__label {

  flex: 0 0 100% !important;

  width: 100% !important;

  margin-bottom: 0.6rem !important;

}



.product-form__input--pill input[type='radio'] {

  position: absolute !important;

  width: 1px !important;

  height: 1px !important;

  opacity: 0 !important;

  pointer-events: none !important;

}



.product-form__input--pill input[type='radio'] + label {

  height: var(--size-pills-height) !important;

  margin: 0 !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  float: none !important;

}



/* ============================================

   PRODUKTSEITE — Ränder (Inhalt weiter außen)

   ============================================ */

@media screen and (min-width: 990px) {

  .product .page-width,

  #MainContent .page-width,

  .product-component .page-width {

    max-width: none !important;

    width: 100% !important;

    padding-left: 15rem !important;

    padding-right: 15rem !important;

  }

}



/* ============================================

   FINAL — Layout: linke Spalte / Bild mittig / rechte Spalte

   ============================================ */

@media screen and (min-width: 990px) {



  .product {

    display: flex !important;

    justify-content: space-between !important;

    align-items: flex-start !important; 

    position: relative !important;

    /* NEU: Schafft generell etwas Luft zum nächsten Abschnitt ("You may also like") */

    padding-bottom: 8rem !important; 

  }



  /* LINKE Spalte */

  .custom-left-column {

    order: 1 !important;

    position: sticky !important;

    top: 35rem !important; 

    padding-top: 5rem !important; 

    margin-top: 0 !important; 

    /* HIER ÄNDERN: Bestimmt, wie weit VOR dem Boden der Text zu kleben aufhört */

    margin-bottom: 40rem !important; 

    width: 26% !important;

  }



  /* RECHTE Spalte */

  .product__info-wrapper {

    order: 3 !important;

    position: sticky !important;

    top: 35rem !important; 

    padding-top: 5rem !important; 

    margin-top: 0 !important; 

    /* HIER ÄNDERN: Bestimmt, wie weit VOR dem Boden der Text zu kleben aufhört */

    margin-bottom: 40rem !important; 

    width: 26% !important;

  }



  /* Mittlere Spalte (Bilder) */

  .product__media-wrapper {

    order: 2 !important;

  }



  /* Button füllt rechte Spalte */

  .product-form__buttons,

  .product-form__submit,

  button.product-form__submit {

    width: 100% !important;

    max-width: 100% !important;

  }

}

/* ============================================

   BILD — Größe & Höhe (EINZIGE Stelle, hier steuern)

   ============================================ */

@media screen and (min-width: 990px) {

  .product__media-wrapper {

    width: 44% !important;          /* GRÖSSE: hier ändern */

    max-width: 44% !important;      /* muss gleich sein wie oben */

    margin-left: auto !important;

    margin-right: auto !important;

    margin-top: 0rem !important;    /* HÖHE: negativ = hoch, positiv = runter */

  }



  /* Dawns feste Bildhöhe aufheben, damit es mitskaliert */

  .product__media-wrapper .product__media {

    width: 100% !important;

    padding-top: 0 !important;

    height: auto !important;

  }



  .product__media-wrapper .product__media img,

  .product__media-wrapper img.image-magnify-lightbox {

    width: 100% !important;

    height: auto !important;

    position: static !important;

  }

}



/* ============================================

   GRÖSSEN-PILLS — teilen sich die Zeile gleichmäßig (Desktop)

   ============================================ */

@media screen and (min-width: 990px) {

  fieldset.product-form__input--pill {

    display: grid !important;

    grid-template-columns: repeat(5, 1fr) !important;

    gap: 1rem !important;

    width: 100% !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

  }



  fieldset.product-form__input--pill > legend,

  fieldset.product-form__input--pill > .form__label {

    grid-column: 1 / -1 !important;

  }



  fieldset.product-form__input--pill input[type='radio'] + label {

    width: 100% !important;

    min-width: 0 !important;

    flex: none !important;

    padding: 0 !important;

    height: var(--size-pills-height) !important;

  }



  variant-selects,

  variant-radios,

  .product-form__input {

    width: 100% !important;

    max-width: 100% !important;

    display: block !important;

  }

}

/* Beschreibung fest weiß */

.product__description.rte,

.product__description.rte *,

.product__description.rte ul,

.product__description.rte li,

.product__description.rte p {

  color: #000000ff !important;

}

/* ============================================

   HEADER: Volle Breite, Transparenz & Milchglas

   ============================================ */



/* ============================================

   HEADER: Transparenz oben, Milchglas beim Scrollen

   ============================================ */



/* 1. Standardzustand (ganz oben): Komplett durchsichtig, kein Blur */

.shopify-section-header, 

.header-wrapper,

sticky-header {

  background-color: transparent !important;

  backdrop-filter: none !important; 

  -webkit-backdrop-filter: none !important;

  border-bottom: none !important;

  box-shadow: none !important;

  transition: background-color 0.4s ease, backdrop-filter 0.4s ease !important; /* Weicher Übergang */

}



/* 2. Gescrollter Zustand: Blur & Milchglas aktivieren */

.scrolled-past-header sticky-header,

.shopify-section-header-sticky sticky-header,

.scrolled-past-header .header-wrapper,

.shopify-section-header-sticky .header-wrapper {

  background-color: rgba(255, 255, 255, 0.6) !important; /* 60% Weiß */

  backdrop-filter: blur(15px) !important; 

  -webkit-backdrop-filter: blur(15px) !important;

}







/* ============================================

   LOGO: Animation (0.5 Sekunden)

   ============================================ */

.header__heading-logo {

  transition: opacity 0.5s ease, transform 0.5s ease !important;

}



/* Der Effekt, wenn man mit der Maus drüberfährt */

.header__heading-link:hover .header__heading-logo {

  opacity: 0.5 !important; /* Wird zu 50% durchsichtig */

  transform: scale(0.95) !important; /* Wird minimal kleiner */

}



/* ============================================

   STICKY HEADER FIX - ANIMATION GEFIXT

   ============================================ */



/* 1. Grundzustand: Wenn Sticky aktiv wird, ist er direkt unsichtbar (ohne Animation, kein Flackern) */

.section-header.shopify-section-header-sticky {

  position: fixed !important;

  top: 0 !important;

  left: 0 !important;

  width: 100% !important;

  z-index: 9999 !important;

  transform: translateY(-100%) !important; 

  transition: none !important; 

}



/* 2. Beim Hochschollen: Shopify aktiviert "animate" -> Header gleitet butterweich ins Bild */

.section-header.shopify-section-header-sticky.animate {

  transform: translateY(0) !important;

  transition: transform 0.3s ease-out !important;

}



/* 3. Beim Runterscrollen: Header fährt sanft wieder nach oben weg */

.section-header.shopify-section-header-hidden {

  transform: translateY(-100%) !important;

  transition: transform 0.3s ease-out !important;

}



/* ============================================

   PERFEKTER STICKY HEADER (Anti-Flacker Fix)

   ============================================ */



/* 1. Ganz oben: Unsichtbar mit weichem 0.5s Fade-Out */

.section-header {

  background-color: transparent !important;

  background-image: none !important;

  border: none !important;

  backdrop-filter: blur(0px) !important;

  -webkit-backdrop-filter: blur(0px) !important;

  transition: background-color 0.5s ease, backdrop-filter 0.5s ease, -webkit-backdrop-filter 0.5s ease !important;

}



.header-wrapper, 

.header, 

sticky-header {

  background-color: transparent !important;

  background-image: none !important;

  border: none !important;

  box-shadow: none !important;

}



/* 2. GRUNDZUSTAND STICKY: Farbe und Milchglas laden */

.section-header.shopify-section-header-sticky {

  position: fixed !important;

  top: 0 !important;

  width: 100% !important;

  background-color: var(--header-blur-bg) !important;

  backdrop-filter: blur(var(--header-blur-amount)) !important; 

  -webkit-backdrop-filter: blur(var(--header-blur-amount)) !important;

}



/* 3. ALLERERSTES SCROLLEN: Sofort unsichtbar parken (Verhindert das "Rausspringen") */

.section-header.shopify-section-header-hidden {

  transform: translateY(-100%) !important;

  transition: none !important; /* Wichtig: Keine Animation hier! */

}



/* 4. HOCHSCROLLEN: Header fährt geschmeidig nach unten rein */

.section-header.shopify-section-header-sticky.animate {

  transform: translateY(0) !important;

  transition: transform 0.3s ease-out !important; 

}



/* 5. WIEDER RUNTERSCROLLEN: Wenn er offen war, fährt er weich nach oben weg */

.section-header.shopify-section-header-sticky.shopify-section-header-hidden.animate {

  transform: translateY(-100%) !important;

  transition: transform 0.3s ease-out !important; 

}



/* 6. INNERE ELEMENTE LEEREN (Gegen Doppel-Blur) */

.section-header.shopify-section-header-sticky .header-wrapper,

.section-header.shopify-section-header-sticky .header,

.section-header.shopify-section-header-sticky sticky-header {

  background-color: transparent !important;

  background-image: none !important;

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

  box-shadow: none !important;

}



/* ============================================

   MENÜS & HEADER BEIM ÖFFNEN (BLUR-FIX & SCHNELLES SCHLIESSEN)

   ============================================ */



/* 1. Tötet die graue Abdunkelungs-Folie von Shopify */

.menu-drawer-container details[open] > summary::before,

details[open] > summary::before {

  display: none !important;

  content: none !important;

}



/* 2. HEADER: Schaltet "transform" ab, damit das Menü den Hintergrund unscharf machen darf! */

.section-header:has(details[open].menu-opening) {

  transform: none !important; /* SPRENGT DEN KÄFIG AUF */

  background: var(--header-blur-bg) !important;

  background-color: var(--header-blur-bg) !important;

  backdrop-filter: blur(var(--header-blur-amount)) !important;

  -webkit-backdrop-filter: blur(var(--header-blur-amount)) !important;

  transition: background-color 0.3s ease, backdrop-filter 0.3s ease !important;

}



/* 3. MENÜ: Bekommt Farbe und erzwingt das Blur auf der Grafikkarte (für Safari/Apple) */

.menu-drawer,

.header__submenu,

.mega-menu__content {

  background: var(--header-blur-bg) !important;

  background-color: var(--header-blur-bg) !important;

  background-image: none !important; 

  backdrop-filter: blur(var(--header-blur-amount)) !important;

  -webkit-backdrop-filter: blur(var(--header-blur-amount)) !important;

  

  /* Zwingt den Browser, den Blur auch während der Animation zu zeigen */

  -webkit-backface-visibility: hidden !important; 

  backface-visibility: hidden !important; 

  

  box-shadow: none !important;

  border: none !important;

}



/* 4. Vernichtet restlos ALLE anderen Dawn-Farben und Grauschleier im Menü */

.menu-drawer__inner-container,

.menu-drawer__navigation-container,

.menu-drawer__navigation,

.menu-drawer__menu,

.menu-drawer__utility-links,

.header__submenu .header__menu-item,

.menu-drawer__menu-item,

.menu-drawer__menu-item--active,

.list-menu__item,

.menu-drawer summary,

.menu-drawer a,

.menu-drawer li {

  background: transparent !important;

  background-color: transparent !important;

  background-image: none !important; 

  box-shadow: none !important;

  border: none !important;

}



/* 5. Versteckte Schatten-Effekte von Dawn töten */

.menu-drawer::before,

.menu-drawer::after,

.menu-drawer__inner-container::before,

.menu-drawer__inner-container::after {

  display: none !important;

  content: none !important;

}

/* ============================================

   HAMBURGER (3 STRICHE) & X (SCHLIESSEN) IMMER WEISS

   ============================================ */



/* 1. Zwingt die Buttons selbst auf Weiß (egal ob offen, geschlossen oder beim Hovern) */

.header__icon,

.header__icon--menu,

.header__icon-summary,

details[open] > .header__icon--menu,

.menu-drawer__close-button {

  color: #000000ff !important;

}



/* 2. Zwingt das SVG-Bild auf Weiß */

.icon-hamburger,

.icon-close,

.header__icon svg,

.menu-drawer__close-button svg {

  color: #000000ff !important;

}



/* 3. DER FIX FÜR DIE 3 STRICHE: Spricht jetzt Pfade (path) UND Rechtecke (rect) an! */

.icon-hamburger path,

.icon-hamburger rect,

.icon-close path,

.icon-close rect,

.header__icon svg path,

.header__icon svg rect {

  fill: #000000ff !important;

  stroke: transparent !important; /* Verhindert komische Ränder */

}

/* ============================================

   ULTIMATIVER SPRENGUNG-EFFECT FÜR DEN BLUR

   ============================================ */



/* Wenn das Menü offen ist, brechen wir alle Begrenzungen des Headers auf */

.section-header:has(details[open]),

.header-wrapper:has(details[open]),

sticky-header:has(details[open]) {

  overflow: visible !important;

  clip-path: none !important;

  contain: none !important;

}



/* Erlaubt dem Menü-Kasten selbst, optisch aus seinem Container auszubrechen */

.menu-drawer-container,

details[open] > .menu-drawer {

  overflow: visible !important;

  contain: none !important;

}



/* WICHTIG FÜR SAFARI (iPhones): Der Filter braucht eine feste Ebene */

.menu-drawer {

  will-change: backdrop-filter, -webkit-backdrop-filter !important;

}



/* Header-Blur-Variablen definieren */

:root {

  --header-blur-bg: rgba(20, 20, 20, 0.6);   /* Farbe des Milchglases (dunkelgrau, 60%) */

  --header-blur-amount: 15px;                 /* Stärke des Blurs */

}

/* Seitenmenü: Blur wirklich erzwingen (transform-Problem umgehen) */

.menu-drawer {

  background-color: transparent !important;

}



/* Der innere Container darf den Blur NICHT wegnehmen */

.menu-drawer__inner-container {

  background-color: transparent !important;

  -webkit-backdrop-filter: none !important;

  backdrop-filter: none !important;

}

.menu-drawer::before {

  content: "" !important;

  display: block !important;

  position: fixed !important;

  inset: 0 !important;

  z-index: -1 !important;

  -webkit-backdrop-filter: blur(var(--header-blur-amount)) !important;

  backdrop-filter: blur(var(--header-blur-amount)) !important;

  background-color: var(--header-blur-bg) !important;

}



/* ============================================

   NUR STARTSEITE — Icons & Logo weiß erzwingen

   ============================================ */



/* 1. Die Icons (Lupe, Warenkorb, Menü) */

body.template-index .header__icon,

body.template-index .header__icon--menu,

body.template-index .header__icon-summary,

body.template-index .header__icon svg {

  color: #ffffff !important;

}



/* 2. Die Pfade der Icons direkt ansprechen */

body.template-index .icon-hamburger path,

body.template-index .icon-hamburger rect,

body.template-index .icon-close path,

body.template-index .icon-close rect,

body.template-index .header__icon svg path,

body.template-index .header__icon svg rect,

body.template-index .header__icon--cart svg path,

body.template-index .header__icon--search svg path {

  fill: #ffffff !important;

  stroke: transparent !important;

}
/* Collapsible-Section: allen oberen Abstand entfernen */
.collapsible-content .collapsible-content__wrapper,
.collapsible-content__wrapper.section-padding {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.collapsible-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Erste aufklappbare Zeile: kein Abstand oben */
.collapsible-content .accordion:first-child {
  margin-top: 0 !important;
}
/* Nur Abstand UNTER dem Button weg, nicht das innere Padding */
.product-form__buttons,
.product-form {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Button selbst behält sein inneres Padding! */
.product-form__submit,
button.product-form__submit {
  margin-bottom: 0 !important;
}