/* ================================================================
   Zusatzbeitrag-Änderungen – Frontend-Liste
   ================================================================ */

.wwg-zba {
    display: flex;
    flex-direction: column;
    gap: var(--wwg-space-4);
    font-family: var(--wwg-font);
}

.wwg-zba__leer {
    color: var(--wwg-color-text-muted);
    font-size: var(--wwg-font-size-base);
    margin: 0;
}

.wwg-zba__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--wwg-space-5);
    background: var(--wwg-color-surface);
    border: 1px solid var(--wwg-color-border-soft);
    border-radius: var(--wwg-radius-lg);
    padding: var(--wwg-space-5) var(--wwg-space-6);
}

.wwg-zba__info {
    flex: 1 1 200px;
    min-width: 180px;
}

.wwg-zba__name-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--wwg-space-2);
}

.wwg-zba__name {
    font-size: var(--wwg-font-size-md);
    font-weight: var(--wwg-font-weight-bold);
    color: var(--wwg-color-navy);
}

.wwg-zba__badge {
    font-size: var(--wwg-font-size-xs);
    font-weight: var(--wwg-font-weight-semibold);
    padding: 3px 10px;
    border-radius: var(--wwg-radius-pill);
    white-space: nowrap;
}

.wwg-zba__region {
    margin: 6px 0 0;
    font-size: var(--wwg-font-size-sm);
    color: var(--wwg-color-text-muted);
}

.wwg-zba__werte {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--wwg-space-3);
}

.wwg-zba__wert-spalte {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 64px;
}

.wwg-zba__wert-label {
    font-size: var(--wwg-font-size-xs);
    color: var(--wwg-color-text-soft);
}

.wwg-zba__wert {
    font-size: var(--wwg-font-size-md);
    font-weight: var(--wwg-font-weight-bold);
}

.wwg-zba__wert--alt {
    color: var(--wwg-color-text-soft);
    text-decoration: line-through;
    font-weight: var(--wwg-font-weight-semibold);
}

.wwg-zba__wert--erhoeht {
    color: var(--wwg-color-navy);
}

.wwg-zba__wert--gesenkt {
    color: var(--wwg-color-success);
}

.wwg-zba__pfeil {
    color: var(--wwg-color-text-soft);
    font-size: var(--wwg-font-size-md);
    align-self: flex-end;
    margin-bottom: 2px;
}

.wwg-zba__zeitbox {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--wwg-color-surface-soft);
    border-radius: var(--wwg-radius);
    padding: var(--wwg-space-2) var(--wwg-space-4);
    min-width: 140px;
}

.wwg-zba__zeitbox-label {
    font-size: var(--wwg-font-size-xs);
    color: var(--wwg-color-text-soft);
}

.wwg-zba__zeitbox-datum {
    font-size: var(--wwg-font-size-base);
    font-weight: var(--wwg-font-weight-bold);
    color: var(--wwg-color-navy);
}

.wwg-zba__zeitbox-tage {
    font-size: var(--wwg-font-size-xs);
    color: var(--wwg-color-text-muted);
}

.wwg-zba__skr {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--wwg-space-2) var(--wwg-space-3);
    background: var(--wwg-color-surface-soft);
    border: 1px solid var(--wwg-color-border-soft);
    border-radius: var(--wwg-radius);
    padding: var(--wwg-space-2) var(--wwg-space-4);
    font-size: var(--wwg-font-size-sm);
}

.wwg-zba__skr-label {
    font-weight: var(--wwg-font-weight-semibold);
    color: var(--wwg-color-navy);
}

.wwg-zba__skr-status {
    color: var(--wwg-color-text-muted);
}

.wwg-zba__skr--abgelaufen .wwg-zba__skr-status {
    color: var(--wwg-color-text-soft);
}

.wwg-zba__skr-link {
    margin-left: auto;
    font-weight: var(--wwg-font-weight-semibold);
    color: var(--wwg-color-primary-dark);
    text-decoration: none;
}

.wwg-zba__skr-link:hover {
    text-decoration: underline;
}

.wwg-zba__actions {
    flex: 0 0 auto;
    display: flex;
    gap: var(--wwg-space-3);
    margin-left: auto;
}

@media (max-width: 782px) {
    .wwg-zba__row {
        flex-direction: column;
        align-items: stretch;
    }

    .wwg-zba__werte,
    .wwg-zba__zeitbox,
    .wwg-zba__actions {
        margin-left: 0;
        width: 100%;
    }

    .wwg-zba__actions {
        flex-direction: column;
    }

    .wwg-zba__actions .wwg-btn {
        width: 100%;
    }
}

/* ================================================================
   Zusatzbeitrag-Änderungen – kompakte Sidebar-/Widget-Variante
   ================================================================ */

.wwg-zba-k {
    display: flex;
    flex-direction: column;
    gap: var(--wwg-space-3);
    font-family: var(--wwg-font);
}

.wwg-zba-k__titel {
    margin: 0;
    font-size: var(--wwg-font-size-base);
    font-weight: var(--wwg-font-weight-bold);
    color: var(--wwg-color-navy);
}

.wwg-zba-k__leer {
    margin: 0;
    font-size: var(--wwg-font-size-sm);
    color: var(--wwg-color-text-muted);
}

.wwg-zba-k__liste {
    display: flex;
    flex-direction: column;
    gap: var(--wwg-space-2);
}

.wwg-zba-k__item {
    background: var(--wwg-color-surface);
    border: 1px solid var(--wwg-color-border-soft);
    border-radius: var(--wwg-radius);
    padding: var(--wwg-space-3) var(--wwg-space-4);
}

.wwg-zba-k__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--wwg-space-2);
}

.wwg-zba-k__name {
    font-size: var(--wwg-font-size-sm);
    font-weight: var(--wwg-font-weight-bold);
    color: var(--wwg-color-navy);
}

.wwg-zba-k__badge {
    font-size: 10px;
    font-weight: var(--wwg-font-weight-semibold);
    padding: 2px 8px;
    border-radius: var(--wwg-radius-pill);
    white-space: nowrap;
}

.wwg-zba-k__mitglieder {
    margin: 4px 0 0;
    font-size: var(--wwg-font-size-xs);
    color: var(--wwg-color-text-soft);
}

.wwg-zba-k__werte {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
    font-size: var(--wwg-font-size-sm);
}

.wwg-zba-k__alt {
    color: var(--wwg-color-text-soft);
    text-decoration: line-through;
}

.wwg-zba-k__pfeil {
    color: var(--wwg-color-text-soft);
}

.wwg-zba-k__neu {
    font-weight: var(--wwg-font-weight-bold);
}

.wwg-zba-k__neu--erhoeht {
    color: var(--wwg-color-navy);
}

.wwg-zba-k__neu--gesenkt {
    color: var(--wwg-color-success);
}

.wwg-zba-k__datum {
    margin-left: auto;
    font-size: var(--wwg-font-size-xs);
    color: var(--wwg-color-text-soft);
}

.wwg-zba-k__skr {
    margin: 6px 0 0;
    font-size: var(--wwg-font-size-xs);
    color: var(--wwg-color-text-muted);
}

.wwg-zba-k__skr--abgelaufen {
    color: var(--wwg-color-text-soft);
}

.wwg-zba-k__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wwg-space-3);
    margin-top: 6px;
}

.wwg-zba-k__link {
    font-size: var(--wwg-font-size-xs);
    font-weight: var(--wwg-font-weight-semibold);
    color: var(--wwg-color-primary-dark);
    text-decoration: none;
}

.wwg-zba-k__link:hover {
    text-decoration: underline;
}