/* =====================================================
   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;
}

/* =====================================================
   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;
    }

    .wk-tabelle caption{
        display:block;
    }

    .wk-tabelle thead{
        display:none;
    }

    .wk-tabelle,
    .wk-tabelle tbody,
    .wk-tabelle tr,
    .wk-tabelle td{
        display:block;
        width:100%;
        box-sizing:border-box;
    }

    .wk-tabelle tbody tr{
        margin-bottom:.5rem;
        border:1px solid #e5e7eb;
        border-radius:8px;
        overflow:hidden;
    }

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

    .wk-tabelle td{
        display:grid;
        grid-template-columns:minmax(7.5rem, 38%) minmax(0, 1fr);
        align-items:center;
        gap:.75rem;

        border:none;
        border-bottom:1px solid #f3f4f6;
    }

    .wk-tabelle td:last-child{
        border-bottom:none;
    }

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

        font-weight:600;
        color:#6b7280;
        font-size:.95rem;
    }

    .wk-tabelle .wk-beschreibung{
        align-items:start;
        line-height:1.45;
        overflow-wrap:anywhere;
    }

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

    .wk-tabelle .wk-menge-zelle,
    .wk-tabelle .wk-aktionen{
        text-align:right;
    }

    .wk-tabelle .wk-menge{
        justify-self:end;
    }

    .wk-tabelle .wk-entfernen{
        justify-self:end;
    }

    .wk-tabelle tfoot tr{
        display:grid;
        grid-template-columns:1fr auto;

        margin-top:.5rem;
        border:1px solid #e5e7eb;
        border-radius:8px;
        overflow:hidden;
    }

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

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

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

}