* {
    box-sizing: border-box;
}

:root {
    --bg-color: #1a1a1a;
    --container-bg: #2d2d2d;
    --text-color: #e0e0e0;
    --border-color: #404040;
    --input-bg: #3d3d3d;
    --accent-color: #4caf82;
    --accent-hover: #6fcea6;
    --error-color: #ff6b6b;
}

body {
    margin: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.container {
    max-width: 720px;
    margin: 0 auto;
    padding: 1.5rem;
}

@media (min-width: 900px) {
    .container {
        max-width: 1080px;
        padding: 2rem;
    }

    .card {
        padding: 1.75rem;
    }

    .header-flex,
    .nav-tabs {
        gap: 1rem;
    }

    /* Auf Desktop ist genug Breite da, um Name/Metadaten und Bedienelemente
       nebeneinander zu halten: Text darf schrumpfen/umbrechen, die
       Bedienelemente bleiben in voller Größe. Auf Mobile bleibt es beim
       Umbruch in zwei Zeilen (siehe .entity-item { flex-wrap: wrap }).
       Ausgenommen: .captaincy-row hat vier gleichrangige Segmente statt
       eines Text-/Aktions-Paars. */
    .entity-item:not(.captaincy-row) {
        flex-wrap: nowrap;
    }

    .entity-item:not(.captaincy-row) > :first-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    .entity-item:not(.captaincy-row) > :last-child {
        flex-shrink: 0;
    }
}

.header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

h1 {
    font-size: 1.5rem;
    margin: 0;
}

/* Themefarbe statt Browser-Standardblau für Links ohne eigene Klasse
   (z. B. "Einloggen"/"Zur Startseite", F-37). */
a {
    color: var(--accent-color);
}

a:hover {
    color: var(--accent-hover);
}

.card {
    background-color: var(--container-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.gap-1 {
    gap: 0.5rem;
}

.gap-2 {
    gap: 1rem;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.nav-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.nav-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
}

.nav-btn.active {
    background-color: var(--accent-color);
    color: #10201a;
    border-color: var(--accent-color);
}

input, select, textarea {
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 0.5rem;
    border-radius: 6px;
    font-size: 1rem;
}

textarea {
    width: 100%;
    min-height: 6rem;
    font-family: inherit;
    resize: vertical;
}

button {
    cursor: pointer;
    border-radius: 6px;
    padding: 0.5rem 0.9rem;
    font-size: 1rem;
    border: 1px solid var(--border-color);
    background-color: var(--input-bg);
    color: var(--text-color);
}

.icon {
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.18em;
    flex: 0 0 auto;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.45rem;
    line-height: 1;
}

.save-btn {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: #10201a;
}

.save-btn:hover {
    background-color: var(--accent-hover);
}

.btn-delete {
    color: var(--error-color);
    border-color: var(--error-color);
    background: none;
}

.secondary-btn {
    background: none;
}

.link-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--text-color);
    font-size: 1rem;
    text-align: left;
    text-decoration: underline;
}

.link-btn:hover {
    color: var(--accent-color);
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.add-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.add-form input {
    flex: 1;
}

.entity-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.entity-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-color);
}

.entity-item:last-child {
    border-bottom: none;
}

/* Feste Spaltenbreiten für Name/Team in der Mitgliederliste (F-25) – ohne
   das würde die Startposition von Team/Detail-Hinweis je nach Namenslänge
   springen und die Liste unruhig wirken. */
.member-info {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    flex: 1 1 auto;
    min-width: 0;
}

.member-info-name {
    flex: 0 0 11rem;
    min-width: 0;
}

.member-info-team {
    flex: 0 0 8rem;
    min-width: 0;
}

.member-info-detail {
    flex: 1 1 auto;
    min-width: 0;
}

/* Feste Spaltenbreiten für die Kapitän/Co-Kapitän-Zeile in der Teamliste
   (F-29) – ohne das verschiebt sich die Startposition des zweiten
   Dropdowns je nach Länge des aktuell gewählten Namens im ersten
   Dropdown (Selects sind sonst so breit wie ihr Inhalt). */
.captaincy-row {
    justify-content: flex-start;
}

.captaincy-label {
    flex: 0 0 6.5rem;
}

.captaincy-value {
    flex: 0 0 14rem;
    min-width: 0;
}

.captaincy-value select {
    width: 100%;
}

.entity-meta {
    color: #9aa0a6;
    font-size: 0.85rem;
}

.error-msg {
    color: var(--error-color);
}

.hint-text {
    color: #9aa0a6;
    font-size: 0.9rem;
}

.status-msg {
    color: #9aa0a6;
}

.login-form {
    max-width: 320px;
    margin: 2rem auto;
}

.login-form input {
    width: 100%;
    margin-bottom: 0.6rem;
}

.auth-switch {
    margin-top: 0.75rem;
    font-size: 0.9rem;
}

.auth-switch a {
    color: var(--accent-color);
    margin-left: 0.25rem;
}

.logout-btn {
    background: none;
}

.app-footer {
    text-align: center;
    color: #6b7280;
    font-size: 0.8rem;
    margin-top: 2rem;
}

/* Lesbarkeit der Vereinsdokumente (F-27, F-28): Überschriften (<h3>, "§…")
   ohne zusätzliche Einrückung, nummerierte Punkte leicht, gebuchstabte
   Unterpunkte stärker eingerückt – macht die Gliederung auf einen Blick
   erkennbar statt eines einzigen Fließtextblocks pro Paragraph. Gilt für
   alle drei Dokumente (Satzung, Beitragsordnung, Geschäftsordnung). */
.document-text h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.document-title {
    font-weight: 600;
}

.document-item {
    margin: 0.4rem 0 0.4rem 1rem;
}

.document-subitem {
    margin: 0.3rem 0 0.3rem 2.25rem;
    color: #c7c9cc;
}

.search-highlight {
    background-color: var(--accent-color);
    color: var(--bg-color);
    border-radius: 3px;
    padding: 0 0.1rem;
}

.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background-color: var(--border-color);
}

.calendar-cell {
    background-color: var(--bg-color);
    min-height: 4.5rem;
    padding: 0.3rem;
    font-size: 0.8rem;
}

.calendar-cell.empty {
    background-color: transparent;
}

.calendar-day-number {
    color: #9aa0a6;
    font-size: 0.75rem;
    margin-bottom: 0.2rem;
}

.calendar-fixture {
    line-height: 1.3;
}

/* Gleich breite Spalten für die Spielplan-Liste (F-33), Muster wie
   .member-info-* (F-25) – sonst springt die Startposition je nach
   Textlänge von Team/Gegner/Liga. */
.fixture-item {
    justify-content: flex-start;
}

/* Muss `.entity-item:not(.captaincy-row) > :first-child` (oben, Desktop-
   Media-Query) in der Spezifität schlagen, sonst wächst die Datumsspalte
   auf Kosten der nachfolgenden Spalten und die Startposition des
   Teamnamens springt je nach Datumstext-Breite. */
.entity-item.fixture-item > .fixture-info-date {
    flex: 0 0 9.5rem;
    min-width: 0;
}

.fixture-info-team {
    flex: 0 0 8rem;
}

.fixture-info-opponent {
    flex: 0 0 14rem;
}

.fixture-info-venue {
    flex: 0 0 5rem;
}

.fixture-info-league {
    flex: 0 0 7rem;
}

.fixture-info-extras {
    flex: 1 1 auto;
}

/* Heimspiele im Kalender hervorheben (F-33): normale Heimspiele leicht
   blau, rauchfreie Heimspiele leicht grün statt blau – Auswärtsspiele
   bleiben unauffällig. */
.calendar-fixture-home {
    background-color: rgba(66, 133, 244, 0.18);
    border-radius: 3px;
    padding: 0.1rem 0.2rem;
}

.calendar-fixture-home-smoke-free {
    background-color: rgba(52, 168, 83, 0.18);
    border-radius: 3px;
    padding: 0.1rem 0.2rem;
}

.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: #9aa0a6;
}

.calendar-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.calendar-legend-swatch {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 3px;
    border: 1px solid var(--border-color);
}

/* Landingpage (F-37): zentrierter Vereinsname als einziger Inhalt. */
.landing-page {
    text-align: center;
    padding: 4rem 1rem;
}

.landing-title {
    font-size: 2rem;
    margin: 0;
}

.impressum-view h3 {
    margin-top: 1.25rem;
    margin-bottom: 0.4rem;
}

.impressum-representatives {
    line-height: 1.6;
}

.impressum-copyright {
    margin-top: 1.5rem;
    color: #9aa0a6;
    font-size: 0.9rem;
}

.app-footer a {
    color: inherit;
}