/** Shopify CDN: Minification failed

Line 304:1 Expected "}" to go with "{"

**/
/* ==== 1. HEADER & LOGO OPTIMIERUNG ==== */
img[src*="logoweiss.png"] {
  height: 100px !important;
  width: auto !important;
  max-height: none !important;
}

.header, .site-header, .header-wrapper, .header .header-inner, .site-header .header-inner {
  min-height: 110px !important;
  height: 110px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  display: flex !important;
  align-items: center !important;
}

@media (max-width: 767px) {
  img[src*="logoweiss.png"] { height: 50px !important; }
  .header, .site-header, .header-wrapper { min-height: 70px !important; height: 70px !important; }
}

/* ==== 2. BUTTON-FIX: SCHRIFT IMMER SICHTBAR (SCHWARZ) ==== */
/* Wir zwingen alle Buttons auf der Startseite zu schwarzer Schrift */
.template-index .button, 
.template-index .btn,
.template-index .image-banner__content .button,
.template-index .section-gallery .button,
.template-index .image-with-text-overlay .button,
.template-index .newsletter-form__button,
.template-index .button--primary,
.template-index .button--secondary {
  color: #000000 !important; /* Schriftfarbe Schwarz */
  background-color: #ffffff !important; /* Hintergrund Weiß */
  opacity: 1 !important;
  visibility: visible !important;
  border: 1px solid #000000 !important;
  text-transform: uppercase;
}

/* WICHTIG: Auch für alle Unterelemente im Button (Span, Text, Icons) */
.template-index .button *, 
.template-index .btn *,
.template-index a.button,
.template-index button.button {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

/* Hover-Effekt (optional): Kehrt die Farben um, wenn man drübergeht */
.template-index .button:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
}
.template-index .button:hover * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ==== 3. SUCHFELD OPTIK ==== */
.search-field {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
  padding: 10px !important;
  border-radius: 5px !important;
}

/* ==== 4. QUICK-VIEW & BADGES ENTFERNEN ==== */
.product-card .badge, .card-wrapper .badge, .product-grid-item .badge {
  background: transparent !important;
}

.product-card__quick-view, [data-open-quick-view], .quick-add, [class*="quick"], [class*="Quick"], .product-card [class*="search"] {
  display: none !important;
  pointer-events: none !important;
}

/* ==== 5. WARENKORB DRAWER (WHITE MODE) ==== */
.cart-drawer, .drawer__inner, .drawer__footer, .cart-items, .side-panel-inner {
  background: #ffffff !important;
  color: #000000 !important;
}

.drawer__footer button, .drawer__footer a {
  background: #000000 !important;
  color: #ffffff !important;
  border-radius: 30px !important;
}

.drawer__footer button *, .drawer__footer a * {
  color: #ffffff !important;
}

/* ==== 6. TEXTE AUF STARTSEITE (PRODUKTE) ==== */
.template-index .price, .template-index .price *, 
.template-index .card__heading a, .template-index .product-card__title a, 
.template-index .product-card .vendor, .template-index .product-card .title {
  color: #000000 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Hardcode-Fix für alle Produktlinks auf der Index-Seite */
.template-index a[href*="/products/"] {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}
/* ==== MOBILE GRID: 2 PRODUKTE NEBENEINANDER ==== */
@media (max-width: 767px) {
  /* Erzwingt zwei Spalten im Grid auf dem Handy */
  .products.row, 
  .product-grid, 
  .collection-matrix,
  #product-grid,
  .featured-collection__inner .flickity-viewport + .row,
  .template-index .products.row {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
  }

  /* Setzt die Breite der einzelnen Produktkarten auf ca. 50% */
  .template-index .products.row .columns,
  .product-grid .columns,
  #product-grid .columns,
  .collection-matrix .columns,
  .small-12.columns.product-card-wrapper {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 5px !important; /* Etwas Abstand zwischen den Produkten */
  }

  /* Deaktiviert den Slider-Modus, falls dieser aktiv ist, um das Grid zu zeigen */
  .flickity-enabled.flickity-viewport {
    height: auto !important;
  }
  
  /* Produkttitel und Preise auf Mobile etwas kleiner, damit es sauber aussieht */
  .product-card .product-card-title, 
  .product-card .price {
    font-size: 0.9rem !important;
  }
}
/* ==== RECOMMENDATIONS / EMPFEHLUNGEN: 2 PRODUKTE NEBENEINANDER ==== */
@media (max-width: 767px) {
  /* Zielt auf die Empfehlungs-Sektion und ähnliche Grids ab */
  .product-recommendations .products.row,
  .product-recommendations .product-grid,
  .related-products .products.row,
  .related-products .product-grid,
  [data-section-type="product-recommendations"] .row {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
  }

  /* Setzt die Spaltenbreite auf 50% für Empfehlungen */
  .product-recommendations .columns,
  .related-products .columns,
  [data-section-type="product-recommendations"] .columns {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 8px 5px !important; /* Etwas Luft zu den Seiten */
  }

  /* Verkleinert die Bilder und Texte leicht für das 2er-Grid */
  .product-recommendations .product-card-title,
  .product-recommendations .price {
    font-size: 0.85rem !important;
    line-height: 1.2 !important;
  }
/* ==== TRUST BADGES: ICON + TITEL + UNTERTEXT (MOBILE 3-SPALTIG) ==== */
@media (max-width: 767px) {
  /* Container auf volle Breite und Flex-Reihe */
  .text-with-icons .row,
  .text-with-icons__inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 4px !important;
    padding: 10px 5px !important;
  }

  /* Spalten-Setup */
  .text-with-icons .columns,
  .text-with-icons__block {
    flex: 0 0 33.33% !important;
    max-width: 33.33% !important;
    padding: 0 !important;
    text-align: center !important;
  }

  /* Icons sehr klein, um Platz für Text zu schaffen */
  .text-with-icons img, 
  .text-with-icons svg,
  .text-with-icons .text-with-icons__icon {
    width: 22px !important;
    height: 22px !important;
    margin: 0 auto 4px auto !important;
  }

  /* Haupt-Überschrift (z.B. Made in Germany) */
  .text-with-icons h3,
  .text-with-icons__heading {
    font-size: 9px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    margin-bottom: 2px !important;
    text-transform: uppercase;
  }

  /* DER UNTERTEXT (wieder eingeblendet) */
  .text-with-icons .text-with-icons__content,
  .text-with-icons p {
    display: block !important; /* Wieder sichtbar */
    font-size: 7.5px !important; /* Extrem klein, damit es passt */
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 2px !important;
    color: #444 !important;
  }

  /* Abstände in der Sektion reduzieren */
  .text-with-icons {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}/* ==== FIX: EINHEITLICHE HÖHE FÜR TITEL & UNTERTEXT ==== */
@media (max-width: 767px) {
  /* 1. Die Überschriften (Made in Germany, Laborgeprüft etc.) */
  .text-with-icons h3,
  .text-with-icons__heading {
    display: flex !important;
    align-items: center !important; /* Zentriert den Text vertikal in der Box */
    justify-content: center !important;
    min-height: 30px !important;    /* Erzwingt Platz für 2 Zeilen bei allen */
    font-size: 9px !important;
    line-height: 1.1 !important;
    margin-bottom: 5px !important;
    text-align: center !important;
  }

  /* 2. Der Untertext startet jetzt bei allen auf derselben Linie */
  .text-with-icons .text-with-icons__content,
  .text-with-icons p {
    display: block !important;
    font-size: 7.5px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 2px !important;
    min-height: 40px !important; /* Gibt auch dem Untertext eine einheitliche Box */
  }

  /* 3. Icon-Abstand feinjustieren */
  .text-with-icons img, 
  .text-with-icons svg {
    margin-bottom: 8px !important;
  }
}
/* ==== MOBILE NAVIGATION DRAWER: FARBEN FIX ==== */
/* Wir zwingen den Hintergrund auf Weiß und die Schrift auf Schwarz */
.menu-drawer,
.mobile-menu,
.menu-drawer__inner,
.menu-drawer__navigation,
.menu-drawer__menu-item {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* Links im mobilen Menü */
.menu-drawer__menu-item,
.menu-drawer__menu-item a,
.mobile-menu a,
.mobile-menu__link {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important; /* Force Schwarz für iOS */
}

/* Icons im Menü (Pfeile etc.) */
.menu-drawer__menu-item svg {
  fill: #000000 !important;
  stroke: #000000 !important;
}

/* Untermenüs (falls vorhanden) */
.menu-drawer__submenu,
.menu-drawer__submenu-inner {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* Schließen-Button im Menü */
.menu-drawer__close-button,
.menu-drawer__close-button svg {
  color: #000000 !important;
  fill: #000000 !important;
}