/* ============================================================
   Vereins-Personen Manager – Frontend-Styles v3
   Anpassungen über Personen → Einstellungen → Eigenes CSS
   ============================================================ */

/* ── Liste ──────────────────────────────────────────────── */
.vp-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 1.5rem 0;
    padding: 0;
    list-style: none;
}

/* ── Standard-Karte ─────────────────────────────────────── */
.vp-karte {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;          /* Foto bündig mit den Kartenecken */
    width: 210px;
    box-shadow: none;
}

/* Foto – volle Breite, bündig oben, kein Kreis */
.vp-karte .vp-foto {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0;
    margin: 0;
    flex-shrink: 0;
}

/* Info-Block */
.vp-karte .vp-info {
    padding: 1rem 1rem .9rem;
    flex: 1;
}

.vp-karte .vp-name {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 .2rem;
    color: #1a202c;
    line-height: 1.3;
}

.vp-karte .vp-position {
    font-size: .82rem;
    color: #4a5568;
    margin: 0 0 .35rem;
    font-style: italic;
}

.vp-karte .vp-gruppe {
    display: inline-block;
    font-size: .72rem;
    background: #ebf4ff;
    color: #2b6cb0;
    border-radius: 99px;
    padding: .18rem .65rem;
    margin-bottom: .5rem;
    font-weight: 600;
    letter-spacing: .02em;
}

/* Einheitliche Feldliste (Kontakt + Weitere Felder) */
.vp-karte .vp-felder {
    list-style: none;
    margin: .45rem 0 0;
    padding: 0;
    font-size: .8rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.vp-karte .vp-felder li {
    display: flex;
    gap: .4rem;
    align-items: baseline;
    line-height: 1.4;
}

.vp-karte .vp-field-label {
    font-weight: 600;
    color: #4a5568;
    white-space: nowrap;
    flex-shrink: 0;
}

.vp-karte .vp-field-label::after {
    content: ":";
}

.vp-karte .vp-felder a {
    color: #3182ce;
    text-decoration: none;
    word-break: break-all;
}

.vp-karte .vp-felder a:hover {
    text-decoration: underline;
}


/* ── Plain-Karte ─────────────────────────────────────────
   Kein Rahmen, kein Schatten. Horizontales Listenformat.
   ─────────────────────────────────────────────────────── */
.vp-liste--plain {
    flex-direction: column;
    gap: 0;
}

.vp-karte--plain {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid #edf2f7;
    border-radius: 0;
    overflow: visible;
    padding: .85rem 0;
    width: 100%;
    box-shadow: none;
}

.vp-karte--plain:last-child {
    border-bottom: none;
}

/* Foto im Plain-Layout: kleines Rechteck, links */
.vp-karte--plain .vp-foto {
    width: 72px;
    height: 72px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    margin: 0;
}

.vp-karte--plain .vp-info {
    flex: 1;
    min-width: 0;
    padding: 0;
}

.vp-karte--plain .vp-name  { font-size: .95rem; margin-bottom: .15rem; }
.vp-karte--plain .vp-position { font-size: .8rem; margin-bottom: .2rem; }
.vp-karte--plain .vp-gruppe { font-size: .68rem; }

.vp-karte--plain .vp-felder { font-size: .78rem; gap: .18rem; }


/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 640px) {
    .vp-liste {
        flex-direction: column;
        align-items: center;
    }
    .vp-karte {
        width: 100%;
        max-width: 340px;
    }
    .vp-liste--plain {
        align-items: stretch;
    }
    .vp-karte--plain {
        max-width: 100%;
    }
}