/*
 * Gestaltung der Konto-Seite ([sv_konto]): Anmelden, Konto beantragen, Profil.
 * Die Formularbausteine (.sv-form, .sv-gruppe, .sv-feld, .sv-hinweis, .sv-knopf ...) und die Masse (--sv-linie, --sv-radius, --sv-primaer-tint)
 * stehen in sv-basis/assets/portal.css. Farben der Marke als Variablen; die Werte nach dem Komma sind nur Rueckfall.
 * Keine fremden Schriften oder Bilder. Klassen beginnen mit sv-.
 */
.sv-konto {
    max-width: 40rem;
    margin: 1rem 0;
}
.sv-konto-kopf {
    margin: 0 0 1.25rem;
}
.sv-konto-knopfzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.25rem;
}
/* Aufklappbare Bereiche (ohne JavaScript): "Konto beantragen", "Weiteren Verein anfragen", "Konto loeschen" */
.sv-konto-neu {
    margin: 0 0 1.25rem;
    padding: .8rem 1.15rem;
    background: #fff;
    border: 1px solid var(--sv-linie, rgba(0, 0, 0, .08));
    border-radius: var(--sv-radius, 12px);
}
.sv-konto-neu summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--sv-primaer-text, #7a1b3c);
}
.sv-konto-neu[open] > summary {
    margin-bottom: 1rem;
}
/* Das Formular steckt in dieser Karte: die inneren Gruppen brauchen keine zweite Umrandung */
.sv-konto-neu .sv-gruppe {
    padding: .5rem 0 0;
    border: 0;
    background: none;
}
.sv-konto-neu .sv-gruppe legend {
    padding: 0;
}
/* Liste der Vereine zum Ankreuzen: scrollt, wenn es viele sind */
.sv-konto-vereinewahl {
    max-height: 16rem;
    overflow: auto;
    margin: 0 0 .75rem;
    padding: .25rem .85rem;
    background: #fff;
    border: 1px solid var(--sv-linie, rgba(0, 0, 0, .08));
    border-radius: var(--sv-radius-klein, 8px);
}
/* "Mein Bereich": Wege zu Beitrag, Termin und Vereinseintrag */
.sv-konto-links {
    display: grid;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sv-konto-links li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .75rem;
}
.sv-konto-links .sv-knopf {
    max-width: 100%;
    white-space: normal;   /* lange Vereinsnamen brechen um, statt den Rand zu sprengen */
    overflow-wrap: anywhere;
    text-align: center;
}
.sv-konto-links .sv-hilfe {
    margin: 0;
}

/* ---- Bereiche in "Mein Bereich": Beitrag schreiben, Termin eintragen ... (inc/bereiche.php) ---- */
.sv-konto-bereiche {
    display: grid;
    gap: .6rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}
.sv-konto-bereich-karte {
    display: block;
    min-height: 3.5rem;
    padding: .8rem 1rem;
    color: inherit;
    text-decoration: none;
    background: var(--sv-primaer-tint, #f6eef1);
    border: 1px solid var(--sv-primaer-tint-rand, rgba(122, 27, 60, .2));
    border-radius: var(--sv-radius, 12px);
}
.sv-konto-bereich-karte:hover,
.sv-konto-bereich-karte:focus-visible {
    border-color: var(--sv-primaer-text, #7a1b3c);
}
.sv-konto-bereich-karte strong {
    display: block;
    font-size: 1.05rem;
    color: var(--sv-primaer-text, #7a1b3c);
}
.sv-konto-bereich-karte span {
    display: block;
    margin-top: .15rem;
    font-size: .875rem;
    opacity: .85;
}
.sv-konto-zurueck {
    margin: 0 0 .5rem;
}
.sv-konto-bereich-titel {
    margin: 0 0 1rem;
}
/* Eintraege eines Bereichs ("Meine Beitraege", "Zur Freigabe") */
.sv-bereich-liste {
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}
.sv-bereich-liste li {
    padding: .6rem 0;
    border-bottom: 1px solid var(--sv-linie, rgba(0, 0, 0, .08));
}
.sv-bereich-liste .sv-bereich-meta {
    display: block;
    font-size: .875rem;
    opacity: .8;
}
.sv-bereich-liste form {
    display: inline;
}
.sv-bildfeld-aktuell {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 .5rem;
}
.sv-bildfeld-vorschau {
    max-width: 8rem;
    height: auto;
    border-radius: var(--sv-radius-klein, 8px);
}
.sv-knopfzeile {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 0 0 1rem;
}