/*
|--------------------------------------------------------------------------
| Produktkarten - Hover Effekt
|--------------------------------------------------------------------------
| Weiße Produktkarte bleibt unverändert.
| Oranger Hintergrund erscheint dahinter
| und dreht sich beim Hover.
|--------------------------------------------------------------------------
*/

.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);
}
        
        
        
/*
|--------------------------------------------------------------------------
| Produkt Grid Karten - Hover Effekt
|--------------------------------------------------------------------------
| Hover Effekt für die Rasteransicht.
| Zusätzlich wird das Bild leicht vergrößert
| und die Warenkorb-Aktion eingeblendet.
|--------------------------------------------------------------------------
*/

.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;
}   


/*
|--------------------------------------------------------------------------
| Kategorien - Aktive Kategorie Hervorhebung
|--------------------------------------------------------------------------
| Zeigt die aktuell ausgewählte Kategorie
| mit orangem Hintergrundrahmen.
|--------------------------------------------------------------------------
*/
.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;
}

/*
|--------------------------------------------------------------------------
| Animation - Lade Spinner
|--------------------------------------------------------------------------
| Drehende Animation für Ladeanzeigen.
|--------------------------------------------------------------------------
*/
        
.spin{
    display:inline-block;
    animation: spin 1s linear infinite;
}

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


/*
|--------------------------------------------------------------------------
| Layout - Abstand unter Header
|--------------------------------------------------------------------------
| Berechnet den Abstand für Seiteninhalte
| abhängig von der Headerhöhe.
|--------------------------------------------------------------------------
*/

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


/*
|--------------------------------------------------------------------------
| Checkout - Liefertage Auswahl
|--------------------------------------------------------------------------
| Darstellung der auswählbaren 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;
}
    

/*
|--------------------------------------------------------------------------
| Responsive Anpassungen - Tablet Ansicht
|--------------------------------------------------------------------------
| Anpassungen für Bildschirmgrößen
| zwischen Tablet und Desktop.
|--------------------------------------------------------------------------
*/
@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;
    }
}


/*
|--------------------------------------------------------------------------
| Bestellung - Artikel Auswahl Checkbox
|--------------------------------------------------------------------------
| Eigene Checkbox Darstellung für
| "Artikel aus Bestellung auswählen".
|--------------------------------------------------------------------------
*/
.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;
}




/*
|--------------------------------------------------------------------------
| Schnellbestellung - Layout
|--------------------------------------------------------------------------
| Eingabefelder für Artikelnummer,
| Artikelname und Menge.
|--------------------------------------------------------------------------
*/

.quick-order-line{
    display:flex;
    align-items:center;
    gap:15px;
}

.quick-order-line .artikelnummer{
    width:150px;
    flex-shrink:0;
}

.artikel-box{
    flex:1;
    height:42px;
    border:1px solid #d1d5db;
    border-radius:8px;
    display:flex;
    align-items:center;
    padding:0 15px;
    background:#f8f9fa;
}
    
.artikel-box-input{
    flex:1;
    height:42px;
    border:1px solid #d1d5db;
    border-radius:8px;
    display:flex;
    align-items:center;
    padding:0 15px;
    background:#fff;
}

.quantity-box{
    width:120px;
    height:42px;
    border:1px solid #d1d5db;
    border-radius:8px;
    display:flex;
    overflow:hidden;
    flex-shrink:0;
}

.quantity-box button{
    width:40px;
    border:0;
    background:#fff;
}

.quantity-box input{
    flex:1;
    border:0;
    text-align:center;
}
    
@media (max-width:768px){

    .quick-order-line{
        flex-direction:column;
        align-items:stretch;
    }

    .quick-order-line .artikelnummer,
    .artikel-box,
    .quantity-box{
        width:100%;
    }


    .quick-buttons{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;
    }

    .quick-buttons .btn{
        width:100%;
        height:40px;
        border-radius:12px;
    }

    .quick-buttons .btn:last-child{
        grid-column:1 / span 2;
    }

}


/*
|--------------------------------------------------------------------------
| Schnellbestellung - Mengenfeld
|--------------------------------------------------------------------------
| Plus / Minus Buttons und Mengenanzeige.
|--------------------------------------------------------------------------
*/    
.quantity-box{
    display:flex;
    align-items:center;
    border:1px solid #d1d5db;
    border-radius:8px;
    overflow:hidden;
    width:110px;
    flex-shrink:0;
}

.quantity-box .button-minus,
.quantity-box .button-plus{
    width:35px;
    height:38px;
    border:0;
    background:#fff;
    cursor:pointer;
}

.quantity-box .quantity-field{
    width:35px;
    text-align:center;
    border-left:1px solid #d1d5db;
    border-right:1px solid #d1d5db;
    background:transparent;
    outline:none;
}



/*
|--------------------------------------------------------------------------
| Upload - Dropzone Dateivorschau
|--------------------------------------------------------------------------
| Darstellung der hochgeladenen Dateien
| inklusive Fortschrittsanzeige.
|--------------------------------------------------------------------------
*/

.dropzone .dz-preview{
    display:inline-block;
    text-align:center;
}

/* Fortschrittsbalken direkt unter der Datei */
.dropzone .dz-preview .dz-progress{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;

    width:120px;
    height:20px;

    margin:12px auto 0 auto;

    background:#dbeafe;
    border-radius:20px;

    overflow:hidden;
    opacity:1 !important;
}

/* Blauer Fortschritt */
.dropzone .dz-preview .dz-upload{
    background:linear-gradient(
        90deg,
        #02b2d6,
        #f59e00
    ) !important;

    height:100%;
    width:0%;
}

/* Prozentzahl im Balken */
.dropzone .dz-preview .dz-progress::after{
    content: attr(data-progress) '%';
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;
    font-size:12px;
    font-weight:600;
}