/* Guthabenanzeige im Kundenkonto.
   Bewusst zurueckhaltend gehalten und ohne feste Farben ausser den
   semantischen Akzenten, damit es sich in NOVA/Evo und eigene
   Child-Themes einfuegt. */

.kramm-guthaben__verfuegbar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.kramm-guthaben__label {
    font-weight: 600;
}

.kramm-guthaben__betrag {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: 600;
}

.kramm-guthaben__betrag--aktiv {
    font-size: 1.35rem;
}

.kramm-guthaben__betrag--geplant {
    opacity: .75;
    font-weight: 500;
}

.kramm-guthaben__hinweis {
    margin-top: .35rem;
}

.kramm-guthaben__zeile {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .4rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}

.kramm-guthaben__zeile:last-child {
    border-bottom: 0;
}

.kramm-guthaben__jahr {
    font-weight: 600;
    min-width: 3.5rem;
}

.kramm-guthaben__ab {
    flex: 1 1 auto;
    font-size: .875rem;
}

.kramm-guthaben__summe {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-top: .5rem;
    border-top: 2px solid rgba(0, 0, 0, .12);
    font-weight: 600;
}

/* Auf schmalen Displays Betrag umbrechen lassen statt quetschen */
@media (max-width: 480px) {
    .kramm-guthaben__zeile {
        flex-wrap: wrap;
    }

    .kramm-guthaben__ab {
        flex: 1 0 100%;
        order: 3;
    }
}