/* =====================================================
   WARENKORB-TABELLE
   ===================================================== */

.wk-tabelle{
    width:100%;
    height:auto;
    margin:0 0 1.25rem;
    border-collapse:collapse;
    font-size:1rem;
    background:#fff;

    box-sizing:border-box;
}

.wk-tabelle caption{
    /*padding:.75rem 1rem;*/

    text-align:left;
    font-weight:600;
    color:#7f1d1d;
    font-size: 1.5em;

    background:#fef2f200;
    border:1px solid #e5e7eb;
    border-bottom:none;
}

.wk-tabelle th,
.wk-tabelle td{
    padding:.75rem 1rem;
    border:1px solid #e5e7eb;
    text-align:left;
}

.wk-tabelle thead th{
    background:#7f1d1d;
    color:#fff;
    font-weight:600;
}

.wk-tabelle tbody tr:nth-child(even){
    background:#f9fafb;
}

.wk-tabelle .wk-artnr{
    white-space:nowrap;
}

.wk-tabelle .wk-einzel,
.wk-tabelle .wk-end{
    text-align:right;
    white-space:nowrap;
}

.wk-menge-zelle{
    text-align:center;
}

.wk-menge{
    width:4.5rem;
    min-height:2.5rem;
    padding:.25rem .5rem;
    border:1px solid #9ca3af;
    border-radius:6px;
    font:inherit;
    text-align:center;
}

.wk-aktionen{
    text-align:center;
}

.wk-entfernen{
    min-height:2.5rem;
    padding:.4rem .7rem;
    border:1px solid #991b1b;
    border-radius:6px;
    background:#fff;
    color:#991b1b;
    font:inherit;
    font-weight:600;
    cursor:pointer;
}

.wk-entfernen:hover,
.wk-entfernen:focus-visible{
    background:#991b1b;
    color:#fff;
}

.wk-tabelle tfoot .wk-summe{
    background:#fef2f2;
    font-weight:600;
}

.wk-tabelle tfoot .wk-summe td{
    border-top:2px solid #7f1d1d;
}

.wk-leer{
    margin:0 0 1.5rem;
    padding:1rem;

    text-align:center;
    color:#8b1b1b;
    font-size: 2em;

    background:#ffffff00;
    border:1px solid #e5e7eb;
    border-radius:8px;
}

/* =====================================================
   MINDESTBESTELLWERT-HINWEIS
   ===================================================== */

.wk-hinweis{
    margin:0 0 1.25rem;
    padding:1rem 1.25rem;

    color:#7f1d1d;
    background:#fef2f2;
    border:1px solid #e5e7eb;
    border-left:4px solid #991b1b;
    border-right:4px solid #991b1b;
    border-radius:8px;

    font-size:1.05rem;
    line-height:1.55;
}

.wk-hinweis.versteckt{
    display:none !important;
}

/* =====================================================
   ERFOLGSMELDUNG
   ===================================================== */

.wk-erfolg{
    position:fixed;
    z-index:9999;
    inset:1rem;

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

    padding:1rem;
    background:rgba(17, 24, 39, .32);
    animation:wk-erfolg-einblenden .2s ease-out both;
}

.wk-erfolg-inhalt{
    width:min(100%, 32rem);
    padding:1.5rem;

    color:#fff;
    background:#7f1d1d;
    border:2px solid #fff;
    border-radius:12px;
    box-shadow:0 16px 40px rgba(0, 0, 0, .28);

    font-size:clamp(1.1rem, 4vw, 1.45rem);
    font-weight:600;
    line-height:1.4;
    text-align:center;
}

@keyframes wk-erfolg-einblenden{
    from{
        opacity:0;
        transform:translateY(8px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* =====================================================
   MOBILE: Tabelle als Karten
   ===================================================== */

@media (max-width:768px){

    .wk-tabelle{
        display:block;
        background-color: #efe0cf;
    }

    .wk-tabelle caption{
        display:block;
    }

    .wk-tabelle thead{
        display:none;
    }

    .wk-tabelle tbody{
        display:block;
        width:100%;
    }

    .wk-tabelle tbody tr{
        display:flex;
        flex-wrap:wrap;

        margin:0 0 .75rem;
        padding:.25rem .75rem;

        border:1px solid #e7d2b8;
        border-bottom:2px solid #8b0c13;
        border-radius:10px;
        overflow:hidden;
        background:#f2ece6;
    }

    .wk-tabelle tbody tr:nth-child(even){
        background:#f2ece6;
    }

    .wk-tabelle td{
        display:flex;
        border:none;
        padding:.6rem .25rem;
    }

    .wk-tabelle td::before{
        content:attr(data-label);

        font-weight:600;
        color:#826b4d;
        font-size:.85rem;
    }

    /* 1. Reihe: Artikelnummer links, Entfernen rechts */
    .wk-tabelle .wk-artnr{
        order:1;
        width:50%;

        justify-content:flex-start;
        align-items:center;
        white-space:nowrap;
        font-weight:600;
        color:#8b0c13;
    }

    .wk-tabelle .wk-artnr::before{
        content:none;
    }

    .wk-tabelle .wk-aktionen{
        order:2;
        width:50%;

        justify-content:flex-end;
        align-items:center;
    }

    .wk-tabelle .wk-aktionen::before{
        content:none;
    }

    /* 2. Reihe: Titel / Untertitel über die volle Breite */
    .wk-tabelle .wk-beschreibung{
        order:3;
        width:100%;

        border-top:1px solid #e7d2b8;

        font-size:1.1rem;
        font-weight:600;
        line-height:1.45;
        overflow-wrap:anywhere;
    }

    .wk-tabelle .wk-beschreibung::before{
        content:none;
    }

    /* 3. Reihe: Stückzahl / Einzelpreis / Endpreis */
    .wk-tabelle .wk-menge-zelle,
    .wk-tabelle .wk-einzel,
    .wk-tabelle .wk-end{
        order:4;
        width:33.333%;

        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:.35rem;
        text-align:center;
    }

    .wk-tabelle .wk-menge{
        width:4.5rem;
    }

    .wk-tabelle .wk-end{
        font-weight:700;
        color:#731112;
    }

    .wk-tabelle .wk-entfernen{
        min-height:2.25rem;
        padding:.35rem .6rem;
    }

    /* Summenzeile */
    .wk-tabelle tfoot{
        display:block;
        width:100%;
    }

    .wk-tabelle tfoot tr{
        display:flex;
        justify-content:flex-end;
        align-items:center;
        gap:.5rem;
        width:100%;
        box-sizing:border-box;

        margin-top:.5rem;
        overflow:hidden;
    }

    .wk-tabelle tfoot td{
        border:none;
        padding:.75rem 1rem;
    }

    .wk-tabelle tfoot td::before{
        content:none;
    }

    .wk-tabelle tfoot .wk-summe{
        background:#efe0cf;
    }

    .wk-tabelle tfoot .wk-summe td{
        border-top:none;
    }

    .wk-tabelle tfoot .wk-summe td:last-child{
        font-weight:700;
        color:#8b0c13;
        white-space:nowrap;
    }

}