* {
    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;
    flex-wrap: wrap;
    gap: 0.5rem;
    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;
}

/* Auf schmalen Bildschirmen passen die inzwischen acht/neun Tabs nicht mehr
   in eine Zeile (F-40). Statt umzubrechen (frisst viel vertikale Höhe)
   wird die Leiste horizontal scrollbar – ein Muster, das von mobilen
   Tab-Leisten bekannt ist. Auf Desktop passt ohnehin alles in eine Zeile,
   daher ist hier nichts sichtbar anders. */
.nav-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.nav-tabs::-webkit-scrollbar {
    display: none;
}

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

.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;
}

/* Mehrfeldrige Formulare (Suche/Filter, Neuanlage) laufen auf schmalen
   Bildschirmen sonst über den Kartenrand hinaus statt umzubrechen (F-40) –
   z. B. das Auditlog-Filterformular mit Textsuche + Aktions-Dropdown +
   zwei Datumsfeldern + zwei Buttons in einer Zeile. */
.add-form {
    display: flex;
    flex-wrap: wrap;
    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;
}

/* Formular des Schwarzen Bretts (F-39) – Kategorie/Text/Datum stehen
   untereinander statt wie sonst bei `.add-form` nebeneinander, weil das
   Textfeld mehrzeilig ist. */
.board-add-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.board-add-form textarea {
    width: 100%;
    min-height: 4rem;
    resize: vertical;
    font-family: inherit;
}

.board-entry {
    align-items: flex-start;
}

.board-entry-info {
    flex: 1 1 auto;
    min-width: 0;
}

.board-entry-category {
    font-weight: 600;
}

.board-entry-message {
    margin: 0.3rem 0;
    white-space: pre-wrap;
}

/* Rollenübersicht der Hilfeseite (F-38) – ein Kartenblock pro Rolle. */
.help-role-card {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.help-role-card:last-child {
    margin-bottom: 0;
}

.help-role-card h3 {
    margin-top: 0;
}

.help-permission-list {
    margin: 0.5rem 0 0 1.25rem;
    padding: 0;
}

.help-permission-list li {
    margin: 0.3rem 0;
}

.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;
}

/* Phone-Optimierung (F-40): Spalten mit fester rem-Breite (Name/Team in der
   Mitgliederliste F-25, Kapitän/Co-Kapitän-Zeile F-29, Spielplan-Spalten
   F-33) sind auf Tablet/Desktop bewusst gleich breit, damit die
   Startposition nicht je nach Textlänge springt. Auf einem Telefon reicht
   die Breite dafür nicht mehr – `flex-shrink: 0` verhindert dort ein
   Schrumpfen und die Zeile läuft über den Kartenrand hinaus. Unterhalb
   dieser Breite stapeln sich die Spalten stattdessen einzeln volle Breite.
   Formularfelder (`.add-form`) bekommen aus demselben Grund je eine eigene
   Zeile statt nebeneinander gequetscht zu werden, und Icon-Buttons werden
   etwas größer für Touch-Bedienung. Bewusst als letzter Block: die
   überschriebenen Regeln (`.member-info-name` usw.) sind einfache
   Ein-Klassen-Selektoren ohne erhöhte Spezifität, gewinnen bei Gleichstand
   also nur, wer im Stylesheet zuletzt steht. */
@media (max-width: 480px) {
    .container {
        padding: 1rem;
    }

    .add-form input,
    .add-form select,
    .add-form textarea,
    .add-form button {
        flex: 1 1 100%;
    }

    .member-info-name,
    .member-info-team,
    .captaincy-label,
    .captaincy-value,
    .entity-item.fixture-item > .fixture-info-date,
    .fixture-info-team,
    .fixture-info-opponent,
    .fixture-info-venue,
    .fixture-info-league {
        flex: 1 1 100%;
    }

    .icon-btn {
        padding: 0.45rem 0.6rem;
    }
}