/* ===========================================================================
   „Einladungen" — Freigaben, die auf eine Antwort warten (Topf C, C-3)

   Markup:    templates/einladungen/einladungen.html
   Verhalten: src/features/creator/einladungen.js

   Der Abschnitt steht ÜBER „Mit mir geteilt": Er verlangt eine Handlung, das
   andere ist Bestand. Er ist auch der einzige Abschnitt auf der Seite, der
   sich versteckt, wenn er leer ist — eine leere Aufforderung ist keine
   Information, sondern Rauschen (anders als bei „Mit mir geteilt", wo der
   Leerzustand erklärt, dass es die Funktion überhaupt gibt).

   Alle Farben über die Variablen aus `variables.css`.
   =========================================================================== */

.einladungen-abschnitt {
    margin-top: 2.5rem;
    border: 1px solid var(--color-primary);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem 1.25rem;
    background: var(--color-info-light);
}

.einladungen-titel {
    font-size: 1.1rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Die Zahl steht im Titel, nicht als Punkt am Rand: Sie beantwortet die Frage
   „wie viel liegt hier für mich?" ohne dass man zählen muss. */
.einladungen-zahl {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
}

.einladungen-erklaerung {
    margin: 0.5rem 0 1rem 0;
    font-size: 0.875rem;
    color: var(--color-text-light);
}

/* --- Eine Einladung ----------------------------------------------------- */

.einladung {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}

.einladung + .einladung {
    margin-top: 0.5rem;
}

.einladung-text {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}

.einladung-art {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-light);
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    padding: 0.1rem 0.4rem;
    white-space: nowrap;
}

.einladung-name {
    overflow-wrap: anywhere;
}

.einladung-von {
    color: var(--color-text-light);
}

/* Die Knöpfe brechen nicht um und kleben nicht aneinander — Peters Rückmeldung
   zum Papierkorb („sehr gequetscht") galt genau dieser Sorte Zeile. */
.einladung-knoepfe {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}