/* Verein-Seite ist ein reiner Hub: eine Liste von "Balken", die zu den
   einzelnen Vereins-/Mitglieder-Features führen (Vereinsdokumente,
   Mitglieder, künftig Trainings-Anmeldung) - kein eigener Inhalt mehr auf
   dieser Seite selbst. Jeder Balken ist eine eigene .glass-card (nicht
   eine gemeinsame Box mit Trennlinien) - dadurch greift beim Hover ganz
   normal der bestehende .glass-card-Hebe-Effekt (siehe components.css)
   statt eines eigenen, unschönen Hervorhebungs-Hacks innerhalb einer
   gemeinsamen Box. */
.hub-list {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hub-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    color: var(--text-primary);
}

a.hub-row,
.hub-row[role="button"] {
    cursor: pointer;
}

.hub-row-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    background-color: var(--aurora-red);
}

.hub-row-title {
    flex: 1;
    font-weight: 700;
}

/* Gleiches Pfeil-SVG wie beim bestehenden .back-to-top-Button, nur um 90°
   gedreht (zeigt dort nach oben, hier nach rechts zur verlinkten Seite). */
.hub-row-arrow {
    display: block;
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    transform: rotate(90deg);
    flex-shrink: 0;
}

.hub-row-arrow svg {
    width: 100%;
    height: 100%;
}

.hub-row-hint {
    font-size: 0.82rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Gesperrt (ausgeloggt, aber grundsaetzlich ein echtes Feature - bleibt
   klickbar, oeffnet das Login-Modal) und "in Vorbereitung" (Feature
   existiert noch gar nicht, unabhaengig vom Login-Status) sehen sich
   bewusst aehnlich (gedaempftes Icon), bleiben aber unterschiedlich
   interaktiv: .hub-row-locked hat role="button" und reagiert auf Hover,
   .hub-row-pending nicht. */
.hub-row-locked .hub-row-icon,
.hub-row-pending .hub-row-icon {
    background-color: var(--text-muted);
}