.banner-wrapper {
    display: flex;
    gap: 20px;
    width: 100%;
    /*align-items: stretch; /* Banner & Produkte gleich hoch */
}

/* Banner links */
.banner-left {
    flex: 0 0 20%;
    display: flex;
    flex-direction: column;
}

.banner-image {
    position: relative;
}

.banner-image img {
    width: 100%;
    display: block;
}

.banner-button {
    position: absolute;
    top: 50px;        /* Abstand vom oberen Rand */
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    background: #fff;
    color: #000;
    border: none;
    cursor: pointer;
    font-size: 16px;
    z-index: 2;
    opacity: 0.9;
}

.banner-btn:hover {
    opacity: 1;
}

/* Jede Produktreihe */
.product-row {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    align-items: stretch;
    flex: 1 1 auto;  /* gleichmäßige Verteilung */
}

/* Einzelnes Produkt */
.product-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
}

/* Produktbild skalieren nach der Bannerhöhe */
.product-item img {
    width: 100%;
    height: auto;
    max-height: 100%;   /* nie größer als Banner */
    object-fit: contain; /* proportional skalieren */
}

/* Abstände um den Preis reduzieren */
.product-item .price-box {
    display: flex;
    justify-content: center;
    margin-top: 5px;
    margin-bottom: 5px;
}

.product-item .product-top {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.product-price-wrapper {
    display: inline-flex; 
    justify-content: center;
    font-size: 16px;
}

.product-price-wrapper > div {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.product-price-wrapper .star-icon {
    display: inline-block; /* sicherstellen, dass es neben dem Preis steht */
    margin-left: 2px;
    margin-top: 2px;
}

.product-item .price-details {
    display: none;
}

/* Alle Buttons in einer Reihe */
.product-actions-wrapper {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: auto;
    align-items: center;
}

.product-actions-wrapper form[data-role="tocart-form"] {
    margin: 0;
}

.product-actions-wrapper .actions-secondary {
    display: flex;
    gap: 5px;
    align-items: center;
}

/* Wishlist Icon hinzufügen */
.action.towishlist::before {
    content: '\e600';  /* Wishlist Icon-Code */
    font-family: 'luma-icons';
    font-size: 16px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

/* Text verstecken */
.action.towishlist span {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/* #custom-information soll den gleichen Abstand wie .banner-left haben */
#custom-information {
    margin-top: 20px;
    padding-top: 10px;
    width: auto;                /* Gleiche Breite wie .banner-left */
    margin-left: 20px;         /* Gleicher Abstand wie .banner-left */
    display: flex;
    flex-direction: column;    /* Elemente untereinander anordnen */
    align-items: flex-start;   /* Links ausrichten */
    /*align-items: center;     /* Zentriert die Elemente */
    gap: 10px;                 /* Abstand zwischen den Elementen */
    text-align: left;          /* Text linksbündig */
}

#custom-information h2 {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;          /* Abstand zwischen Linie und Links */
    padding-bottom: 5px;          /* Abstand zwischen Text und Linie */
    border-bottom: 1px solid #333; /* horizontale Linie */
}

/* Gleicher Stil für alle Links in #custom-information */
#custom-information a,
#custom-payment a {
    font-size: 14px;
    color: #333;           /* gleiche Farbe wie Kauf auf Rechnung */
    text-decoration: none; /* keine Unterstreichung */
    display: inline-block; /* optional für besseres Layout */
    margin-bottom: 5px;    /* kleiner Abstand zwischen Links */
}

/* Optional: Hover-Effekt wie bei PUI */
#custom-information a:hover,
#custom-payment a:hover {
    text-decoration: underline; /* nur bei Hover */
    color: #333;
}

/* #custom-payment wird zentriert */
#custom-payment {
    width: 20%;              /* Breite wie banner-left */
    margin: 20px auto 0;     /* Horizontal zentrieren */
    display: flex;
    flex-direction: column;  /* Elemente untereinander anordnen */
    align-items: center;     /* Zentriert die Elemente */
    gap: 10px;               /* Abstand zwischen den Elementen */
    text-align: center;      /* Text zentrieren */
}

/* Bilder innerhalb der Container */
#custom-information img,
#custom-payment img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Logos untereinander */
.payment-banner {
    display: flex;
    flex-direction: column;  /* Logos untereinander */
    gap: 20px;
    align-items: center;
}

/* Die Links sollen unter den Logos erscheinen und zentriert sein */
.payment-banner a:last-child {
    width: auto; /* Kein Umbruch der Links */
    text-align: center; /* Links zentrieren */
}

/* Alle Links unterhalb der Logos */
.payment-banner a {
    display: inline-block; /* Macht die Links Block-Elemente */
    width: auto;           /* Verhindert, dass sie 100% der Breite einnehmen */
    text-align: center;    /* Zentriert den Text der Links */
}

/* Produkte rechts */
.products-right {
    flex: 1 1 auto;       /* nimmt den restlichen Platz */
    display: flex;
    flex-direction: column;
    height: 100%;          /* zwingt Stretch */
}