.woocommerce-product-gallery__image,
.woocommerce-loop-product__link,
.wc-block-grid__product-image {
    position: relative;
}

.custom-badge-wrapper {
    position: absolute;
    top: calc(((100vw - 48px - 4px) /4) - 42px);
    left: 15px;
    transform: 
    translateY(-50%)  /* Vertikale Zentrierung */
    rotate(-90deg);
    transform-origin: left center;  /* Drehpunkt links mittig */
    white-space: nowrap;  /* Verhindert Zeilenumbrüche */
    z-index: 10;
}

.custom-badge {
    display: inline-block;
    padding: 5px 10px;
    background-color: var(--secondary-color);
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    background-size: cover;
    background-position: center;  
}
/* 
.reduziert-10-25 {
    transform: rotate(90deg);
    background-color: unset;
    font-size: 40px;
    position: absolute;
    top: -20px;
    left: 90px;
    width: 100px;
    height: 100px;
}

.page-id-563 .reduziert-10-25 {
    transform: rotate(90deg);
    background-color: unset;
    font-size: 40px;
    position: absolute;
    top: -20px;
    left: 150px;
    width: 100px;
    height: 100px;
} 


@media (max-width: 1200px) {

    .page-id-563 .reduziert-10-25 {
        top: -10px;
        left: 100px;
        width: 80px;
        height: 80px;
        font-size: 30px;
    }
}
*/

@media (max-width: 912px) {
    .custom-badge-wrapper {
        top: calc(((100vw - 48px - 4px) /3) - 20px);
    }
/* 
    .page-id-563 .reduziert-10-25 {
        top: -10px;
        left: 80px;
        width: 70px;
        height: 70px;
        font-size: 35px;
    } */
}

@media (max-width: 544px) {
    .custom-badge-wrapper {
        top: calc(((100vw - 48px - 4px) /2) - 10px);
    }
/* 
    .page-id-563 .reduziert-10-25 {
        top: -25px;
        left: 90px;
        width: 60px;
        height: 60px;
        font-size: 20px;
    } */
}
/* 
@media (max-width: 374px) {

    .page-id-563 .reduziert-10-25 {
        top: -25px;
        left: 60px;
        width: 60px;
        height: 60px;
        font-size: 20px;
    }
} */

.page-id-666 .custom-badge-wrapper {
    position: absolute;
    top: 148px;
    /* left: 0px; */
    transform:
    translateY(-50%)  /* Vertikale Zentrierung */
    rotate(-90deg);
    transform-origin: left center;  /* Drehpunkt links mittig */
    white-space: nowrap;  /* Verhindert Zeilenumbrüche */
    z-index: 10;
}

.single-product .custom-badge-wrapper {
    position: absolute;
    top: 300px;
    left: 24px;
    transform:
    translateY(-50%)  /* Vertikale Zentrierung */
    rotate(-90deg)
    scale(1.5);
    transform-origin: left center;  /* Drehpunkt links mittig */
    white-space: nowrap;  /* Verhindert Zeilenumbrüche */
    z-index: 10;
}

.related.products .custom-badge-wrapper{
    position: absolute;
    top: 148px;
    left: 14px;
    transform:
    translateY(-50%)  /* Vertikale Zentrierung */
    rotate(-90deg);
    transform-origin: left center;  /* Drehpunkt links mittig */
    white-space: nowrap;  /* Verhindert Zeilenumbrüche */
    z-index: 10;
}

/* .woocommerce .products .custom-badge-wrapper {    
        left: 10px;
        top: calc(((100vw - 48px - 4px) /4) - 42px);
    } */

    /* .related.products .reduziert-10-25{
        left: 56px;
    } */


    /* === REDUZIERT-10-25 STÖRER: OBEN LINKS, RESPONSIV === */

.custom-badge-wrapper-2 {
    position: relative;
}

/* Basis-Störer für .page-id-563 - oben links in der Ecke */
.page-id-563 .custom-badge-2.reduziert-10-25 {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 20 !important;
    
    /* Styling zurücksetzen */
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
    color: transparent !important;
    line-height: 0 !important;
    
    /* Abstand zur Ecke */
    transform: translate(12px, 12px) !important;
    
    /* Responsive Größe: 4-Spalten (Desktop) */
    /* Spaltenbreite: (100vw - 48px) / 4 */
    width: clamp(42px, calc((100vw - 48px) / 4 * 0.25), 100px) !important;
    height: clamp(42px, calc((100vw - 48px) / 4 * 0.25), 100px) !important;
    
    /* Hintergrundbild-Eigenschaften */
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    aspect-ratio: 1 / 1 !important;
}

/* 3-Spalten Layout (ab 922px) */
@media (max-width: 922px) {
    .page-id-563 .custom-badge-2.reduziert-10-25 {
        /* Spaltenbreite: (100vw - 48px) / 3 */
        width: clamp(38px, calc((100vw - 48px) / 3 * 0.22), 85px) !important;
        height: clamp(38px, calc((100vw - 48px) / 3 * 0.22), 85px) !important;
        transform: translate(10px, 10px) !important;
    }
}

/* 2-Spalten Layout (ab 544px) */
@media (max-width: 544px) {
    .page-id-563 .custom-badge-2.reduziert-10-25 {
        /* Spaltenbreite: (100vw - 48px) / 2 */
        width: clamp(32px, calc((100vw - 48px) / 2 * 0.20), 90px) !important;
        height: clamp(32px, calc((100vw - 48px) / 2 * 0.20), 90px) !important;
        transform: translate(8px, 8px) !important;
    }
}

/* === EINZELPRODUKTSEITEN: GRÖßER UND MEHR ABSTAND === */
.single-product .custom-badge-2.reduziert-10-25 {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 20 !important;
    
    /* Styling zurücksetzen */
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
    color: transparent !important;
    line-height: 0 !important;
    
    /* Mehr Abstand zur Ecke auf Einzelseiten */
    transform: translate(20px, 20px) !important;
    
    /* Größer auf Einzelseiten - ca. 15% der Bildbreite */
    width: clamp(60px, 15vw, 120px) !important;
    height: clamp(60px, 15vw, 120px) !important;
    
    /* Hintergrundbild-Eigenschaften */
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    aspect-ratio: 1 / 1 !important;
}

/* Tablet-Anpassung für Einzelseiten */
@media (max-width: 922px) {
    .single-product .custom-badge-2.reduziert-10-25 {
        width: clamp(55px, 12vw, 100px) !important;
        height: clamp(55px, 12vw, 100px) !important;
        transform: translate(18px, 18px) !important;
    }
}

/* Mobile-Anpassung für Einzelseiten */
@media (max-width: 544px) {
    .single-product .custom-badge-2.reduziert-10-25 {
        width: clamp(45px, 18vw, 85px) !important;
        height: clamp(45px, 18vw, 85px) !important;
        transform: translate(15px, 15px) !important;
    }
}

/* === FALLBACK FÜR ANDERE SEITEN (falls .reduziert-10-25 woanders verwendet wird) === */
.custom-badge-2.reduziert-10-25:not(.page-id-563 *):not(.single-product *) {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 20 !important;
    
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
    color: transparent !important;
    line-height: 0 !important;
    
    transform: translate(10px, 10px) !important;
    width: clamp(35px, 8vw, 70px) !important;
    height: clamp(35px, 8vw, 70px) !important;
    
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    aspect-ratio: 1 / 1 !important;
}