/* ============================================================
   Tabellen
   ============================================================ */


/* ------------------------------------------------------------
   Tabellen-Container
   ------------------------------------------------------------ */

.tabelle-wrapper {
    width: 100%;
    overflow-x: auto;

    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius-gross);

    background-color: var(--farbe-oberflaeche);
}


/* ------------------------------------------------------------
   Grundlegende Tabelle
   ------------------------------------------------------------ */

.tabelle {
    width: 100%;
    min-width: 700px;

    border-collapse: collapse;

    background-color: var(--farbe-oberflaeche);
}


/* ------------------------------------------------------------
   Tabellenkopf
   ------------------------------------------------------------ */

.tabelle thead {
    background-color: var(--farbe-oberflaeche-dezent);
}


.tabelle th {
    padding:
        var(--abstand-3) var(--abstand-4);

    border-bottom: 1px solid var(--farbe-rahmen);

    color: var(--farbe-text-sekundaer);

    font-size: 0.8125rem;
    font-weight: 700;

    text-align: left;
    white-space: nowrap;
}


/* ------------------------------------------------------------
   Tabellenzellen
   ------------------------------------------------------------ */

.tabelle td {
    padding:
        var(--abstand-3) var(--abstand-4);

    border-bottom: 1px solid var(--farbe-rahmen);

    color: var(--farbe-text);

    vertical-align: middle;
}


/* ------------------------------------------------------------
   Letzte Zeile
   ------------------------------------------------------------ */

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


/* ------------------------------------------------------------
   Hover
   ------------------------------------------------------------ */

.tabelle tbody tr {
    transition: background-color 150ms ease;
}


.tabelle tbody tr:hover {
    background-color: var(--gruen-50);
}

/* ------------------------------------------------------------
   Kompakte Tabelle
   ------------------------------------------------------------ */

.tabelle-kompakt {
    min-width: 0;
}


.tabelle-kompakt ths,
.tabelle-kompakt td {
    padding:
        var(--abstand-2) var(--abstand-3);
}

/* ------------------------------------------------------------
   Tabellenaktionen
   ------------------------------------------------------------ */

.tabellen-aktionen {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: var(--abstand-2);
}

.tabelle .text-rechts {
    text-align: right;
}


.tabelle .text-zentriert {
    text-align: center;
}