/* ============================================================
   VEREIN UND KONTAKT (seit Schritt 22)

   Eigene Datei, damit seite.css unverändert aus base.html
   übernommen bleibt: Foto und Kontakt beim Vorstand, Meldungen
   und Dank des Kontaktformulars.
   ============================================================ */

.person-foto {
    display: block;
    width: 84px;
    height: 84px;
    margin: 0 auto 14px;
    border-radius: 50%;
    object-fit: cover;
}

.person .person-kontakt {
    display: grid;
    gap: 2px;
    margin-top: 8px;
    font-size: .82rem;
}

.person-kontakt a {
    color: var(--brand);
    overflow-wrap: anywhere;
}

/* Kontaktformular */
.kontakt-lock {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.kontakt-fehler {
    margin: 5px 0 0;
    font-size: .84rem;
    font-weight: 700;
    color: #b3261e;
}

.kontakt-meldung {
    margin: 0 0 14px;
    padding: 12px 16px;
    border-radius: var(--r-s, 12px);
    border: 1.5px solid rgba(179, 38, 30, .35);
    background: rgba(179, 38, 30, .07);
    color: #7a1a14;
    font-size: .92rem;
}

#kontaktFormular [aria-invalid="true"] {
    border-color: #b3261e;
}

.kontakt-danke {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px;
    border-radius: var(--r-m, 18px);
    background: rgba(47, 107, 42, .08);
    border: 1.5px solid rgba(47, 107, 42, .3);
    color: #1f451b;
}

.kontakt-danke p {
    margin: 0;
}

.kontakt-haken {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #2f6b2a;
    color: #fff;
    font-weight: 800;
}

/* Fehlerseite des Formulars: Abstand zur festen Navigation */
.kontakt-seite {
    padding-top: calc(var(--nav-h) + 10px);
}