/* --------------------------------------------------------------------------
   LEERZUSTAND DER OBJEKTLISTEN
   Suchliste und Angebotsliste zeigen denselben Leerzustand (`list-empty`):
   Kreis mit Symbol, Titel, Satz, optional Knöpfe. Die Regeln stehen hier und
   nicht in `accommodation-list-mobile.css`, weil die Angebotsliste jene Datei
   nicht lädt und der Leerzustand dort sonst ohne Gestaltung blieb (Symbol
   ungerahmt links über linksbündigem Text).
   -------------------------------------------------------------------------- */
.list-empty {
    grid-column: 1 / -1;
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    padding: var(--space-8) var(--space-4);
    text-align: center;
}

.list-empty__icon {
    display: inline-flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
    color: var(--color-primary);
}

.list-empty__icon .icon {
    display: block;
}

.list-empty .list-empty__title {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 500;
}

.list-empty__text {
    max-width: 340px;
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-muted);
}

.list-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
}

.list-empty__actions button.btn {
    --btn-bg: var(--btn-primary-bg);
    --btn-color: var(--btn-primary-text);
    --btn-border: var(--btn-primary-border);
}