/*
 * Der Spielerbereich.
 *
 * Er erbt alles von `/stil.css` -- Farben, Abschnitte, Karten, Knoepfe.
 * Hier steht nur, was es dort noch nicht gibt.
 */

.kopf__wer {
    color: var(--text-leise);
    font-size: 15px;
}

/* --- Charakterkarte ------------------------------------------------------- */

.figur__kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.figur__nummer {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 13px;
    color: var(--text-leise);
}

.figur__geld {
    display: flex;
    gap: 22px;
    margin: 14px 0 10px;
    flex-wrap: wrap;
}

.figur__posten {
    display: flex;
    flex-direction: column;
}

.figur__betrag {
    font-size: 21px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.figur__wofuer {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-leise);
}

.figur__zeile {
    margin: 0;
    color: var(--text-leise);
    font-size: 14px;
}

/* --- Listen --------------------------------------------------------------- */

.liste {
    overflow-x: auto;
}

.liste table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 15px;
}

.liste th, .liste td {
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid var(--linie);
    vertical-align: top;
}

.liste th {
    color: var(--text-leise);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.liste td.zahl {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.liste .klein {
    display: block;
    margin-top: 2px;
    color: var(--text-leise);
    font-size: 13px;
}

/* Ein Minusbetrag ist keine Warnung, nur eine Richtung -- deshalb
   gedaempft und nicht rot. Rot ist fuer etwas, das man tun muss. */
.minus { color: var(--text-leise); }

/* --- Marken --------------------------------------------------------------- */

.marke2 {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.marke2--gut      { background: rgba(63, 191, 127, 0.16); color: var(--gut); }
.marke2--warn     { background: rgba(232, 185, 63, 0.16); color: var(--warn); }
.marke2--schlecht { background: rgba(229, 72, 77, 0.16);  color: var(--schlecht); }
.marke2--leise    { background: rgba(151, 160, 174, 0.14); color: var(--text-leise); }

/* --- Der Kasten beim Abschlepphof ----------------------------------------- */

.ausloesen {
    margin-top: 6px;
    padding: 10px 12px;
    background: rgba(232, 185, 63, 0.10);
    border: 1px solid rgba(232, 185, 63, 0.35);
    border-radius: 8px;
    font-size: 14px;
}