/* ==========================================
   Hover-Effekt wie im Screenshot
   - Die Vordergrundkarte bleibt immer komplett weiß
   - Dahinter erscheint ein größerer orangefarbener Hintergrund
   - Nur der Hintergrund dreht sich
   ========================================== */

.card-product {
    position: relative;
    z-index: 2;
    background-color: #ffffff !important; /* Vorderseite immer weiß */
    border-radius: 0.5rem;                /* rounded-lg */
    overflow: visible;
}

/* Sicherstellen, dass auch alle inneren Bereiche weiß bleiben */
.card-product > * {
    position: relative;
    z-index: 2;
    background-color: #ffffff;
    border-radius: inherit;
}

/* Orange Hintergrund hinter der Karte */
.card-product::before {
    content: "";
    position: absolute;

    /* etwas größer als die weiße Karte */
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;

    background: #f7931e;   /* Orange */
    border-radius: 0.75rem;
    z-index: 1;            /* hinter dem Inhalt, vor dem Seitenhintergrund */

    opacity: 0;
    transform: rotate(0deg);
    transition: all 0.5s ease;
}

/* Nur der Hintergrund wird sichtbar und gedreht */
.card-product:hover::before {
    opacity: 1;
    transform: rotate(0.7deg);
}

/* Vordergrund bleibt unverändert weiß */
.card-product:hover {
    background-color: #ffffff !important;
    transform: none;
}

/* Optional: Bild leicht zoomen */
.card-product img {
    transition: transform 0.5s ease;
}

.card-product:hover img {
    transform: scale(1.08);
}
        
        
        
/* ==========================================
   Hover-Effekt wie im Screenshot
   - Die Vordergrundkarte bleibt immer komplett weiß
   - Dahinter erscheint ein größerer orangefarbener Hintergrund
   - Nur der Hintergrund dreht sich
   ========================================== */

.card-product-grid {
    position: relative;
    z-index: 2;
    background-color: #ffffff !important; /* Vorderseite immer weiß */
    border-radius: 0.5rem;                /* rounded-lg */
    overflow: visible;
}

/* Sicherstellen, dass auch alle inneren Bereiche weiß bleiben */
.card-product-grid > * {
    position: relative;
    z-index: 2;
    background-color: #ffffff;
    border-radius: inherit;
}

/* Orange Hintergrund hinter der Karte */
.card-product-grid::before {
    content: "";
    position: absolute;

    /* etwas größer als die weiße Karte */
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;

    background: #f7931e;   /* Orange */
    border-radius: 0.75rem;
    z-index: 1;            /* hinter dem Inhalt, vor dem Seitenhintergrund */

    opacity: 0;
    transform: rotate(0deg);
    transition: all 0.5s ease;
}

/* Nur der Hintergrund wird sichtbar und gedreht */
.card-product-grid:hover::before {
    opacity: 1;
    transform: rotate(1.2deg);
}

/* Vordergrund bleibt unverändert weiß */
.card-product-grid:hover {
    background-color: #ffffff !important;
    transform: none;
}

/* Optional: Bild leicht zoomen */
.card-product-grid img {
    transition: transform 0.5s ease;
}

.card-product-grid:hover img {
    transform: scale(1.08);
}  
        
.card-product-grid:hover .card-product-action {
    opacity: 1 !important;
}

.card-product-action {
    opacity: 0.5;
}   


/* Aktive Kategorie */
.card-kategorie.active-category {
    position: relative;
    z-index: 2;
    border: none !important;
    background: transparent !important;
    overflow: visible;
}

.card-kategorie.active-category::before {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;

    background: #f7931e;
    border-radius: 0.75rem;
    z-index: 0;

    transform: rotate(1.2deg);
}

/* Die eigentliche Karte bleibt weiß */
.card-kategorie.active-category .card-kategorie-inner {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 0.5rem;
}

.card-kategorie .card-image {
    background: transparent !important;
    box-shadow: none !important;
}

.card-kategorie .card-image img {
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
}

.card-kategorie:hover .card-image img,
.card-kategorie.active-category .card-image img {
    transform: none !important;
    box-shadow: none !important;
}
        
.spin{
    display:inline-block;
    animation: spin 1s linear infinite;
}

@keyframes spin{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

/*
.content-offset {
    padding-top: 180px;
}

.content-offset-einkaufsliste {
        padding-top: 180px;
}

.content-offset-checkout {
        padding-top: 100px;
}

*/
        
/* Tablet 
@media (max-width: 1023px) {
    .content-offset {
        padding-top: 130px;
    }
    .content-offset-einkaufsliste {
        padding-top: 70px;
    }

    .content-offset-checkout {
        padding-top: 20px;
    }


}*/
        
/* Handy 
@media (max-width: 575px) {
    .content-offset {
        padding-top: 270px;
    }

    .content-offset-einkaufsliste {
        padding-top: 120px;
    }

   .content-offset-checkout {
        padding-top: 70px;
    }

}   

.content-offset-einkaufsliste,
.content-offset-account,
.content-offset-checkout {
    --header-height: 80px;
}
 
*/


.content-offset,
.content-offset-einkaufsliste,
.content-offset-account,
.content-offset-checkout {
    padding-top: calc(var(--header-height) + 0px);
}

/* Liefertage 

.nav-pills-light .nav-item .nav-link.liefertag {
    background: #f59e00;
    color: #fff;
    border: 1px solid #f59e00;
}*/

/* Ausgewählter Liefertag */

.nav-pills-light .nav-item .nav-link.liefertag.active {
    background: #18b6d9;
    color: #fff;
    border: 1px solid #18b6d9;
}

/* Hover auf Liefertagen */

.nav-pills-light .nav-item .nav-link.liefertag:hover {
    background: #18b6d9;
    border: 1px solid #18b6d9;
    color: #fff;
}
    

@media (min-width: 992px) and (max-width: 1023.98px) {

    .lg\:hidden {
        display: none !important;
    }

    .lg\:block {
        display: block !important;
    }

    .lg\:flex {
        display: flex !important;
    }

    .lg\:w-1\/6 {
        width: 16.666667% !important;
    }

    .lg\:w-1\/2 {
        width: 50% !important;
    }

    .lg\:w-1\/3 {
        width: 33.333333% !important;
    }

    .lg\:items-center {
        align-items: center !important;
    }
}


.order-checkbox-btn{
    width:34px;
    height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid #f7931e;   /* kräftigere Umrandung */
    border-radius:8px;
    background:#ffffff;
    color:transparent;          /* Haken unsichtbar */
    box-shadow:0 .125rem .25rem rgba(0,0,0,.075);
    transition:.2s;
}

.order-checkbox-btn:hover{
    background:#f7931e;
}

.order-checkbox-btn.selected{
    background:#f7931e !important;
    color:#ffffff;
}

.order-checkbox-btn svg{
    opacity:0;
    visibility:hidden;
    transition:opacity .2s;
}

.order-checkbox-btn.selected svg{
    opacity:1;
    visibility:visible;
}