/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
 #header{ background: #ffffff !important; }

/***********************************************
 * Varianten nebeneinander – funktioniert sicher
 ***********************************************/
#product .product-variants {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  align-items: flex-start !important;
}

/* alle Varianten-Boxen gleich breit */
#product .product-variants > .product-variants-item,
#product .product-variants > .clearfix.product-variants-item {
  float: none !important;
  clear: none !important;
  width: calc(50% - 12px) !important;
  max-width: calc(50% - 12px) !important;
  flex: 0 0 calc(50% - 12px) !important;
  display: block !important;
}

/* Pseudo-Clearfix entfernen */
#product .product-variants > .product-variants-item::after,
#product .product-variants > .clearfix.product-variants-item::after,
#product .product-variants > .product-variants-item::before,
#product .product-variants > .clearfix.product-variants-item::before {
  content: none !important;
  display: none !important;
}

/* Auf Handy einspaltig */
@media (max-width: 767px) {
  #product .product-variants {
    display: block !important;
  }

  #product .product-variants > .product-variants-item,
  #product .product-variants > .clearfix.product-variants-item {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/****************************************************
 * Varianten nebeneinander – Clearfix neutralisieren
 * und 2 Spalten ab 768px erzwingen
 ****************************************************/

/* Ab Tablet/Desktop: 2 Spalten */
@media (min-width: 768px) {

  /* Container als Flex */
  #product .product-variants {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;     /* Abstand */
    align-items: flex-start !important;
  }

  /* WICHTIG: Clearfix auf den Items deaktivieren,
     sonst räumt sich jede Box selbst nach unten */
  #product .product-variants > .clearfix.product-variants-item {
    clear: none !important;
  }
  #product .product-variants > .clearfix.product-variants-item::after,
  #product .product-variants > .clearfix.product-variants-item::before {
    content: none !important;
    display: none !important;
  }

  /* Jede Varianten-Box: halbe Breite */
  #product .product-variants > .product-variants-item,
  #product .product-variants > .clearfix.product-variants-item {
    float: none !important;
    width: calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
    flex: 0 0 calc(50% - 12px) !important;
    display: block !important;
  }
}

/* Unter 768 px wieder einspaltig */
@media (max-width: 767.98px) {
  #product .product-variants {
    display: block !important;
  }
  #product .product-variants > .product-variants-item,
  #product .product-variants > .clearfix.product-variants-item {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}
/****************************************************
 * Varianten nebeneinander – Clearfix neutralisieren
 * und 2 Spalten ab 768px erzwingen
 ****************************************************/
@media (min-width: 768px) {

  /* Container als Flex */
  #product .product-variants {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    align-items: flex-start !important;
  }

  /* Clearfix der Items neutralisieren */
  #product .product-variants > .clearfix.product-variants-item {
    clear: none !important;
  }
  #product .product-variants > .clearfix.product-variants-item::after,
  #product .product-variants > .clearfix.product-variants-item::before {
    content: none !important;
    display: none !important;
  }

  /* Jede Box halbbreit */
  #product .product-variants > .product-variants-item,
  #product .product-variants > .clearfix.product-variants-item {
    float: none !important;
    width: calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
    flex: 0 0 calc(50% - 12px) !important;
    display: block !important;
  }
}

/* Unter 768px einspaltig */
@media (max-width: 767.98px) {
  #product .product-variants { display: block !important; }
  #product .product-variants > .product-variants-item,
  #product .product-variants > .clearfix.product-variants-item {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}