:root {
    --club-blue: #0C4579;
    --club-blue-dark: #08355f;
    --club-light: #70B7E2;
    --club-red: #E50D42;
    --club-bg: #F5F9FD;
    --white: #ffffff;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--club-bg);
    color: #222;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px 60px;
}

/* Header: Logo + Titel + Nav, blauer Vereinshintergrund über die volle Breite */
.kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--club-blue);
    color: var(--white);
    margin: 0 -20px 24px;
    padding: 20px 20px;
}

.kopf-titel {
    display: flex;
    align-items: center;
    gap: 14px;
}

.kopf-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
}

.kopf h1 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--white);
}

nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-size: 0.95rem;
}

nav a {
    color: var(--white);
    text-decoration: none;
    font-weight: 600;
}

nav a:hover {
    text-decoration: underline;
}

nav button,
button {
    background: var(--club-red);
    color: var(--white);
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 0.9rem;
    cursor: pointer;
}

nav button:hover,
button:hover {
    background: #b80a35;
}

.benutzer-info {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
}

/* "Stammdaten"-Untermenü im Nav (Spieler/Gruppen/Turniere) - öffnet per Klick/Tastatur (Fokus) oder
   Hover auf den Auslöser-Button, da der Trigger keine eigene Seite ist. */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-trigger {
    background: transparent;
    color: var(--white);
    border: none;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0;
    cursor: pointer;
}

.nav-dropdown-trigger:hover {
    background: transparent;
    text-decoration: underline;
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 10px;
    background: var(--club-blue-dark);
    border-radius: 8px;
    padding: 6px;
    min-width: 160px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    z-index: 20;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-dropdown-menu a {
    padding: 8px 10px;
    border-radius: 5px;
    white-space: nowrap;
}

.nav-dropdown-menu a:hover {
    background: rgba(255, 255, 255, 0.14);
    text-decoration: none;
}

/* Trennt "Stammdaten"-Links (Spieler/Gruppen/Turniere/Spielstätten) optisch von den
   Import/Export-Einträgen im selben Menü. */
.nav-dropdown-trenner {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin: 4px 2px;
}

/* Nested "Master data" submenu inside the "Administration" nav dropdown - opens a second flyout
   menu to the right, same open-on-hover/focus behavior as the outer .nav-dropdown. */
.nav-dropdown-submenu {
    position: relative;
}

.nav-dropdown-submenu-trigger {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    color: var(--white);
    border: none;
    padding: 8px 10px;
    border-radius: 5px;
    font-size: 0.95rem;
    font-weight: normal;
    cursor: pointer;
    white-space: nowrap;
}

.nav-dropdown-submenu-trigger:hover {
    background: rgba(255, 255, 255, 0.14);
}

.nav-dropdown-submenu-menu {
    display: none;
    position: absolute;
    top: -6px;
    left: 100%;
    margin-left: 6px;
    background: var(--club-blue-dark);
    border-radius: 8px;
    padding: 6px;
    min-width: 160px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    z-index: 21;
}

.nav-dropdown-submenu:hover .nav-dropdown-submenu-menu,
.nav-dropdown-submenu:focus-within .nav-dropdown-submenu-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-dropdown-submenu-menu a {
    padding: 8px 10px;
    border-radius: 5px;
    white-space: nowrap;
}

.nav-dropdown-submenu-menu a:hover {
    background: rgba(255, 255, 255, 0.14);
    text-decoration: none;
}

.hinweis {
    min-height: 1.2em;
    color: #444;
    margin-bottom: 16px;
}

/* Rich-text editor on news.php (assets/news.js) - a small toolbar plus a contenteditable surface,
   built on the browser's own execCommand/queryCommandState APIs (no external editor library). */
.editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 6px;
    border: 1px solid #d9e4ef;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: #f5f9fd;
}

.editor-toolbar button {
    background: var(--white);
    color: #333;
    border: 1px solid #d9e4ef;
    border-radius: 5px;
    padding: 4px 10px;
    font-size: 0.85rem;
    line-height: 1.4;
    min-width: 30px;
}

.editor-toolbar button:hover {
    background: #eef4fa;
}

.editor-toolbar button.active {
    background: var(--club-blue);
    color: var(--white);
    border-color: var(--club-blue);
}

.editor-toolbar-sep {
    width: 1px;
    align-self: stretch;
    background: #d9e4ef;
    margin: 2px 4px;
}

.news-editor-surface {
    width: 100%;
    box-sizing: border-box;
    min-height: 260px;
    padding: 10px 12px;
    border: 1px solid #d9e4ef;
    border-radius: 0 0 8px 8px;
    font-size: 0.95rem;
    line-height: 1.5;
    background: var(--white);
    overflow-y: auto;
}

.news-editor-surface:focus {
    outline: none;
    border-color: var(--club-blue);
}

.news-editor-surface h3 {
    margin: 0.6em 0 0.3em;
}

.news-editor-surface p {
    margin: 0 0 0.6em;
}

.hinweis.fehler {
    color: var(--club-red);
    font-weight: 600;
}

.klein {
    font-size: 0.85rem;
    color: #555;
    max-width: 900px;
    line-height: 1.5;
}

/* Login */
.login-container {
    max-width: 380px;
    margin: 60px auto 0;
    background: var(--white);
    padding: 32px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.login-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    margin-bottom: 12px;
}

.login-container h1 {
    color: var(--club-blue);
}

.login-form,
.neu-benutzer-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
}

.login-form label,
.neu-benutzer-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.9rem;
    color: #333;
}

.login-form input,
.neu-benutzer-form input,
.neu-benutzer-form select {
    padding: 8px 10px;
    border: 1px solid #d9e4ef;
    border-radius: 6px;
    font-size: 0.95rem;
}

.login-form button {
    background: var(--club-blue);
}

.login-form button:hover {
    background: var(--club-blue-dark);
}

.neu-benutzer-form {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    background: var(--white);
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.neu-benutzer-form label {
    min-width: 140px;
}

/* Generische Tabellen (spieler.php, benutzer.php, import_csv.php) */
table.tabelle,
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
}

table.tabelle th,
table.tabelle td,
table th,
table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #E3EAF2;
    font-size: 0.9rem;
}

table.tabelle thead th,
table thead th {
    background: var(--club-blue);
    color: var(--white);
    font-weight: 600;
}

table.tabelle tbody tr:hover,
table tbody tr:hover {
    background: #F0F7FC;
}

table.tabelle tbody tr:nth-child(even),
table tbody tr:nth-child(even) {
    background: #FAFCFE;
}

/* Die Spielertabelle enthält Turnier-Dropdowns (siehe .turniere-dropdown-menu unten), die über den
   unteren Tabellenrand hinausragen können (z.B. bei den letzten Zeilen) - das generische
   "overflow: hidden" von table.tabelle würde solche Dropdowns abschneiden, deshalb hier gezielt
   wieder aufgehoben (betrifft nur diese eine Tabelle, andere Tabellen bleiben unverändert). */
#spieler-tabelle {
    overflow: visible;
}

/* Spaltenfilter über der Spielerliste (spieler.php), wie bei Excel: pro Spalte ein Filterfeld */
.filter-zeile th {
    background: #EEF6FC !important;
    padding: 6px 8px !important;
}

.filter-feld {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 7px;
    border: 1px solid #d9e4ef;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 400;
    color: #333;
    background: var(--white);
}

#filter-zuruecksetzen-btn {
    background: transparent;
    color: var(--club-blue);
    border: 1px solid #d9e4ef;
    border-radius: 5px;
    padding: 4px 9px;
    font-size: 0.9rem;
    line-height: 1;
    width: 100%;
}

#filter-zuruecksetzen-btn:hover {
    background: var(--club-bg);
}

/* Gruppen verwalten (spieler.php) - mehrspaltig statt einer einzelnen schmalen Tabelle */
.gruppen-liste {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.gruppe-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    background: var(--white);
    border-radius: 8px;
    padding: 8px 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.gruppe-zeile .gruppe-name-feld {
    flex: 1;
    min-width: 60px;
    order: 1;
}

.gruppe-zeile .loeschen-btn {
    font-size: 0.78rem;
    padding: 6px 10px;
    white-space: nowrap;
    order: 2;
}

/* "Hide schedule from the public" checkbox per group row (groups.php) - like the tournament
   registration checkbox below, it's a long label that doesn't fit next to the name field and
   delete button in the narrow 3-column grid, so it gets its own full-width line underneath them
   (flex-basis: 100% forces the wrap; order places it after the name field/button instead of
   between them). */
.gruppe-zeile .gruppe-verstecken-feld {
    flex-basis: 100%;
    order: 3;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
}

.gruppe-zeile .gruppe-verstecken-feld input {
    width: auto;
}

/* "Open for registration" checkbox next to the name field on tournaments.php - unchecking it hides
   the tournament from the public registration form (registration.php) without touching anything
   else (schedule, groups, already registered participants). */
.tournament-registration-open-feld {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    white-space: nowrap;
    cursor: pointer;
}

/* Bracket wizard (playoffs.php): one fieldset per slot, laid out in a responsive grid instead of a
   single long row (up to 8 slots for a quarter-final bracket) - each fieldset mirrors the
   "Player 1"/"Player 2" source fields of the single-match form above it. */
.bracket-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.bracket-slot-feld {
    border: 1px solid #d9e4ef;
    border-radius: 6px;
    padding: 10px 14px;
    background: var(--white);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bracket-slot-feld label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
    color: #333;
}

.bracket-slot-feld select,
.bracket-slot-feld input {
    padding: 6px 8px;
    border: 1px solid #d9e4ef;
    border-radius: 6px;
    font-size: 0.9rem;
}

/* Aktions-Links/-Buttons je Turnier (turniere.php): "Gruppen verwalten"/"Spielplan/Übersicht" springen
   direkt in den Kontext dieses Turniers (echte <a href>-Links), "Anmeldelink"/"Teilnehmerliste"
   kopieren stattdessen einen Link zum öffentlichen Anmeldeformular bzw. zur öffentlichen
   Teilnehmerliste in die Zwischenablage (Buttons, kein Seitenwechsel). Bewusst alle blau statt rot
   (--club-red ist für destruktive Aktionen wie "Löschen" reserviert). */
.anmeldelink-btn,
.anmeldelink-kopieren-btn,
.teilnehmerlink-btn {
    display: inline-block;
    background: var(--club-blue);
    color: var(--white);
    text-decoration: none;
    font-size: 0.78rem;
    padding: 6px 10px;
    white-space: nowrap;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.anmeldelink-btn:hover,
.anmeldelink-kopieren-btn:hover,
.teilnehmerlink-btn:hover {
    background: var(--club-blue-dark);
    text-decoration: none;
}

/* "Export als CSV"-Link auf spieler.php - optisch wie ein Button, technisch aber ein normaler
   <a href>, damit der Browser den Download nativ übernimmt (kein JS/Fetch nötig). */
.export-link-btn {
    display: inline-block;
    background: var(--club-blue);
    color: var(--white);
    text-decoration: none;
    font-weight: 600;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 0.9rem;
    margin-left: 8px;
}

.export-link-btn:hover {
    background: var(--club-blue-dark);
    text-decoration: none;
}

/* Öffentliches Anmeldeformular (anmeldung.php) - eigenständiges, "einladendes" Kartenlayout statt
   der kompakten Admin-Formulare (.neu-benutzer-form), da hier Teilnehmer:innen ohne Vorkenntnis der
   Seite ein Formular ausfüllen sollen. */
.honeypot-feld {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.anmeldung-karte {
    max-width: 640px;
    margin: 0 auto 40px;
    background: var(--white);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(12, 69, 121, 0.1);
    padding: 32px 36px 36px;
}

.anmeldung-intro {
    margin: 0 0 24px;
    color: #444;
    line-height: 1.5;
}

.anmeldung-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.anmeldung-abschnitt {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.anmeldung-abschnitt-titel {
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--club-bg);
    font-size: 1.05rem;
    color: var(--club-blue);
}

.anmeldung-pflicht {
    color: var(--club-red);
    margin-left: 2px;
}

.anmeldung-feldgruppe {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.anmeldung-feld {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.9rem;
    color: #333;
    min-width: 0;
}

.anmeldung-feld input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #d9e4ef;
    border-radius: 8px;
    font-size: 0.98rem;
}

.anmeldung-feld input:focus {
    outline: none;
    border-color: var(--club-light);
    box-shadow: 0 0 0 3px rgba(112, 183, 226, 0.3);
}

.anmeldung-feld-schmal {
    max-width: 160px;
}

/* Einspaltig statt Grid: Turniernamen können beliebig lang sein (z.B. "Clubmeisterschaften 2027") -
   ein starres mehrspaltiges Raster führt dann zu umgebrochenem, gequetschtem Text, der teilweise
   über den Rand hinausragt. Untereinander gestapelt hat jede Option immer die volle Breite. */
.anmeldung-turniere-liste {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.turnier-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #d9e4ef;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.turnier-option:hover {
    border-color: var(--club-light);
}

.turnier-option.ausgewaehlt {
    border-color: var(--club-blue);
    background: #EAF3FB;
}

.turnier-option input.an-turnier-checkbox {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--club-blue);
    flex-shrink: 0;
}

.turnier-option-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: #333;
    min-width: 0;
    overflow-wrap: break-word;
}

.anmeldung-zustimmung {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.85rem;
    color: #444;
    background: var(--club-bg);
    border-radius: 8px;
    padding: 12px 14px;
}

.anmeldung-zustimmung input {
    margin-top: 3px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--club-blue);
}

.anmeldung-submit-btn {
    align-self: flex-start;
    background: var(--club-blue);
    padding: 12px 28px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
}

.anmeldung-submit-btn:hover {
    background: var(--club-blue-dark);
}

@media (max-width: 560px) {
    .anmeldung-karte {
        padding: 24px 20px 28px;
    }

    .anmeldung-feldgruppe {
        grid-template-columns: 1fr;
    }

    .anmeldung-feld-schmal {
        max-width: none;
    }

    .anmeldung-submit-btn {
        align-self: stretch;
    }
}

/* Danke-Popup nach erfolgreicher Anmeldung (anmeldung.php) - abgedunkelter Hintergrund mit
   zentrierter Karte, per [hidden] ein-/ausgeblendet (siehe assets/anmeldung.js).
   WICHTIG: "display: none" muss hier explizit als Standard gesetzt werden - eine eigene Regel wie
   ".modal-overlay { display: flex }" würde sonst das (unspezifische) [hidden]-Verhalten des Browsers
   überstimmen, da Autoren-CSS grundsätzlich Vorrang vor dem User-Agent-Stylesheet hat. Ohne dieses
   ":not([hidden])" wäre das Popup dauerhaft sichtbar, auch beim ersten Laden der Seite. */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(8, 30, 53, 0.55);
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 100;
}

.modal-overlay:not([hidden]) {
    display: flex;
}

.modal-karte {
    background: var(--white);
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    padding: 32px 36px;
    max-width: 420px;
    text-align: center;
}

.modal-karte h2 {
    margin: 0 0 12px;
    color: var(--club-blue);
}

.modal-karte p {
    margin: 0 0 24px;
    color: #333;
    line-height: 1.5;
}

.modal-karte .anmeldung-submit-btn {
    align-self: center;
}

/* Öffentliche Willkommensseite (willkommen.php) - drei Einstiegs-Kärtchen zu den öffentlichen
   Bereichen (Anmeldung, Übersicht, Teilnehmerliste). */
.willkommen-karten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 8px;
}

.willkommen-karte {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 18px 20px;
    border: 1px solid #d9e4ef;
    border-radius: 10px;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}

.willkommen-karte:hover {
    border-color: var(--club-blue);
    background: #EAF3FB;
    text-decoration: none;
}

.willkommen-karte-titel {
    font-weight: 600;
    color: var(--club-blue);
    font-size: 1.02rem;
}

.willkommen-karte-text {
    font-size: 0.88rem;
    color: #555;
    line-height: 1.4;
}

/* News/announcements section on the welcome page (welcome.php), content managed on news.php. */
.news-ueberschrift {
    margin: 32px 0 12px;
    color: var(--club-blue);
    border-bottom: 3px solid var(--club-light);
    padding-bottom: 6px;
}

.news-liste {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.news-eintrag {
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 20px 24px;
}

.news-titel {
    margin: 0 0 4px;
    color: var(--club-blue);
}

.news-datum {
    margin: 0 0 12px;
    font-size: 0.8rem;
    color: #888;
}

.news-inhalt {
    line-height: 1.6;
}

.news-inhalt img {
    max-width: 100%;
    border-radius: 8px;
    margin: 8px 0;
}

.news-inhalt p:first-child {
    margin-top: 0;
}

/* Turnier-Mehrfachauswahl als kompaktes Dropdown (wie ein Excel-Filter): in der
   Stammdaten-Tabelle (spieler.php) je Zeile sowie im "Neuer Spieler"-Formular. Öffnet wie das
   Nav-Dropdown per Klick/Fokus auf den Auslöser-Button (siehe .nav-dropdown weiter oben), zeigt im
   geschlossenen Zustand eine Zusammenfassung der aktuell ausgewählten Turniere. */
.turniere-dropdown {
    position: relative;
    display: inline-block;
    min-width: 160px;
}

.turniere-dropdown-trigger {
    display: block;
    width: 100%;
    max-width: 220px;
    background: var(--white);
    color: #333;
    border: 1px solid #d9e4ef;
    border-radius: 5px;
    padding: 6px 10px;
    font-size: 0.82rem;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.turniere-dropdown-trigger:hover {
    background: var(--club-bg);
}

.turniere-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: var(--white);
    border: 1px solid #d9e4ef;
    border-radius: 6px;
    padding: 8px 10px;
    min-width: 180px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    z-index: 30;
}

.turniere-dropdown:hover .turniere-dropdown-menu,
.turniere-dropdown:focus-within .turniere-dropdown-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.turnier-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    white-space: nowrap;
    cursor: pointer;
}

.turnier-checkbox-label input.turnier-checkbox {
    margin: 0;
}

.turniere-checkboxen-feld {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-self: flex-start;
}

.turniere-checkboxen-label {
    font-size: 0.85rem;
    color: #555;
}

/* Gruppe-je-Turnier-Liste (spieler.php): für jedes ausgewählte Turnier eine eigene Zeile
   "Turniername: [Gruppe ▾]" - in der Spielertabelle als eigene Spalte, im "Neuer Spieler"-Formular
   als eigener Block unter den Turnier-Checkboxen. Baut sich live neu auf, sobald sich die
   Turnier-Auswahl im selben Zeilen-/Formular-Kontext ändert (siehe assets/spieler.js). */
.gruppen-je-turnier-liste {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gruppe-je-turnier-zeile {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gruppe-je-turnier-label {
    font-size: 0.78rem;
    color: #555;
    white-space: nowrap;
}

.gruppe-je-turnier-select {
    max-width: 160px;
    padding: 4px 6px;
    border: 1px solid #d9e4ef;
    border-radius: 5px;
    font-size: 0.8rem;
}

.gruppen-je-turnier-feld {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-self: flex-start;
}

@media (max-width: 900px) {
    .gruppen-liste {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .gruppen-liste {
        grid-template-columns: 1fr;
    }
}

.gruppe-input,
input.feld-vorname,
input.feld-nachname,
input.feld-email,
input.feld-telefon,
input.feld-passwort,
select.feld-rolle {
    padding: 6px 8px;
    border: 1px solid #d9e4ef;
    border-radius: 5px;
    font-size: 0.85rem;
    width: 100%;
}

.speichern-btn {
    padding: 6px 12px;
    font-size: 0.85rem;
    background: var(--club-blue);
}

.speichern-btn:hover {
    background: var(--club-blue-dark);
}

/* Aktionen-Spalte einer Spiel-/Playoff-Zeile (Speichern + ggf. Ergebnis löschen) */
.zeile-aktionen {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
}

.zeile-aktionen .loeschen-btn {
    font-size: 0.78rem;
    padding: 4px 8px;
    white-space: nowrap;
}

/* Admin-Aktion "Alle Ergebnisse löschen" - bewusst deutlich als Gefahren-Aktion markiert */
.gefahr-btn {
    background: transparent !important;
    color: var(--club-red) !important;
    border: 2px solid var(--club-red) !important;
    font-weight: 700;
}

.gefahr-btn:hover {
    background: var(--club-red) !important;
    color: var(--white) !important;
}

/* Reiter/Filter oben auf der Turnierübersicht (Alle / Gruppe X / Playoffs) */
.reiter-leiste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.reiter-btn {
    background: var(--white);
    color: var(--club-blue);
    border: 2px solid var(--club-light);
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 0.9rem;
    font-weight: 600;
}

.reiter-btn:hover {
    background: var(--club-bg);
}

.reiter-btn.aktiv {
    background: var(--club-blue);
    color: var(--white);
    border-color: var(--club-blue);
}

/* Öffentliche Gruppenübersicht */
.gruppen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 16px;
}

.gruppen-box {
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.gruppen-box h2 {
    margin: 0;
    padding: 10px 14px;
    background: var(--club-blue);
    color: var(--white);
    font-size: 1.02rem;
}

.gruppen-box h3 {
    margin: 12px 14px 6px;
    font-size: 0.88rem;
    color: #333;
}

.gruppen-box .spielplan,
.gruppen-box table.tabelle-tabelle {
    margin-left: 14px;
    margin-right: 14px;
    width: calc(100% - 28px);
}

table.tabelle-tabelle {
    border-collapse: collapse;
    margin-bottom: 12px;
}

table.tabelle-tabelle th,
table.tabelle-tabelle td {
    padding: 5px 6px;
    text-align: center;
    font-size: 0.78rem;
    border-bottom: 1px solid #E3EAF2;
}

table.tabelle-tabelle th:first-child,
table.tabelle-tabelle td:first-child {
    text-align: left;
}

table.tabelle-tabelle thead th {
    background: #EEF6FC;
    color: var(--club-blue);
}

/* "In anderes Turnier übernehmen" (assets/app.js, oeffneUebernahmeDialog) - Button je Tabellenzeile
   plus die sich darunter aufklappende Inline-Zeile mit Turnier-/Gruppen-Auswahl. Nur mit Rolle
   spielerverwaltung sichtbar (window.DARF_SPIELER_UEBERNEHMEN, nur auf index.php gesetzt). */
table.tabelle-tabelle .uebernehmen-btn {
    font-size: 0.72rem;
    padding: 3px 8px;
    white-space: nowrap;
}

.uebernahme-zeile td {
    text-align: left;
    background: #F4F9FD;
}

.uebernahme-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 4px 2px;
}

.uebernahme-status {
    color: var(--club-blue);
}

/* Spielplan */
.spielplan {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 12px;
}

.spiel-zeile {
    display: grid;
    grid-template-columns: minmax(60px, 1fr) auto minmax(60px, 1fr) auto;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: #F0F7FC;
    border-radius: 6px;
    border-left: 3px solid var(--club-blue);
}

.spiel-zeile.lesend {
    grid-template-columns: minmax(60px, 1fr) auto minmax(60px, 1fr);
}

/* Editierbare Zeile (Satz-Eingaben + Speichern/Löschen): flexibel statt starres Grid, damit in den
   kompakten Gruppen-Boxen nichts abgeschnitten wird, sondern bei Bedarf umbricht (Namen oben,
   Satz-Eingaben darunter, Aktionen-Buttons zuunterst). */
.spiel-zeile.bearbeitbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 10px;
}

.spiel-zeile.bearbeitbar .name-links,
.spiel-zeile.bearbeitbar .name-rechts {
    flex: 1 1 100px;
    min-width: 70px;
}

.spiel-zeile.bearbeitbar .name-links {
    order: 1;
}

.spiel-zeile.bearbeitbar .name-rechts {
    order: 2;
}

.spiel-zeile.bearbeitbar .satz-eingaben {
    order: 3;
    flex: 1 1 100%;
}

.spiel-zeile.bearbeitbar .zeile-aktionen {
    order: 4;
    flex: 1 1 100%;
    flex-direction: row;
    justify-content: center;
}

.spiel-zeile.bearbeitbar .zeile-aktionen button {
    white-space: nowrap;
}

.spieler-name {
    font-weight: 600;
    font-size: 0.8rem;
    word-break: break-word;
    color: var(--club-blue);
}

/* Name links linksbündig, Name rechts rechtsbündig - Ergebnis bleibt mittig dazwischen */
.spieler-name.name-links {
    text-align: left;
}

.spieler-name.name-rechts {
    text-align: right;
}

/* Bei bereits gespielten Partien: Sieger fett hervorgehoben, Verlierer blasser */
.spieler-name.sieger-name {
    font-weight: 800;
    color: var(--club-blue-dark);
}

.spieler-name.verlierer-name {
    font-weight: 500;
    color: #8a99a8;
}

.satz-eingaben {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.satz-gruppe {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--white);
    border-radius: 6px;
    padding: 3px 6px;
    border: 1px solid #d9e4ef;
}

.satz-label {
    font-size: 0.72rem;
    color: #666;
    margin-right: 4px;
    white-space: nowrap;
}

.satz-input {
    width: 42px;
    padding: 4px;
    text-align: center;
    border: 1px solid #d9e4ef;
    border-radius: 4px;
    font-size: 0.9rem;
}

.satz-anzeige-text {
    text-align: center;
    font-weight: 600;
    color: var(--club-blue);
    font-size: 0.8rem;
}

/* Termin/Kalender je Partie - direkt unter der jeweiligen Spiel-/Playoff-Zeile */
.spiel-eintrag {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.termin-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: #FAFCFE;
    border-radius: 6px;
    font-size: 0.82rem;
    color: #444;
}

.termin-anzeige {
    font-weight: 600;
}

.termin-anzeige.offen {
    color: var(--club-red);
    font-weight: bold;
}

.termin-input,
.ort-select {
    padding: 4px 6px;
    border: 1px solid #d9e4ef;
    border-radius: 5px;
    font-size: 0.82rem;
}

.termin-speichern-btn,
.termin-loeschen-btn {
    font-size: 0.78rem;
    padding: 4px 10px;
}

/* Playoffs / Kreuzpaarungen (Halbfinale, Spiel um Platz 3, Finale, ...) */
.playoff-ueberschrift {
    margin: 28px 0 12px;
    color: var(--club-blue);
    border-bottom: 3px solid var(--club-light);
    padding-bottom: 6px;
}

.playoff-zeile {
    grid-template-columns: minmax(90px, auto) minmax(60px, 1fr) auto minmax(60px, 1fr) auto;
}

.playoff-zeile.lesend {
    grid-template-columns: minmax(90px, auto) minmax(60px, 1fr) auto minmax(60px, 1fr);
}

.playoff-bezeichnung {
    font-weight: 700;
    color: var(--club-red);
    font-size: 0.8rem;
}

.playoff-zeile.bearbeitbar .playoff-bezeichnung {
    order: 0;
    flex: 1 1 100%;
}

@media (max-width: 700px) {
    .playoff-zeile,
    .playoff-zeile.lesend {
        grid-template-columns: 1fr;
        text-align: center;
    }

    /* Bei einspaltigem Stapel (Mobile) linksbündig/rechtsbündig wieder aufheben - sonst kleben
       die Namen an den Bildschirmrändern statt untereinander zentriert zu stehen. */
    .spieler-name.name-links,
    .spieler-name.name-rechts {
        text-align: center;
    }
}

/* Badges / Hinweise im Vereinsstil (z.B. "offen"/ausstehende Ergebnisse) */
.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--club-blue);
    color: var(--white);
    font-size: 0.85rem;
}

.offen {
    color: var(--club-red);
    font-weight: bold;
}

@media (max-width: 700px) {
    .kopf {
        padding: 16px;
    }

    .gruppen-grid {
        grid-template-columns: 1fr;
    }

    .neu-benutzer-form {
        flex-direction: column;
        align-items: stretch;
    }

    .neu-benutzer-form label {
        min-width: unset;
    }
}

/* Footer mit Impressum/Datenschutz-Links (index.php, uebersicht.php, login.php) */
.footer {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid #E3EAF2;
    text-align: center;
    font-size: 0.8rem;
    color: #777;
}

.footer a {
    color: #777;
    text-decoration: underline;
}

.footer a:hover {
    color: var(--club-blue);
}

/* Export-Leiste (Drucken/PDF, CSV, Excel) auf index.php - direkt unter der Turnier-Auswahl.
   Bewusst zurückhaltend/klein gehalten (reine Text-Links statt auffälliger blauer Buttons wie beim
   CSV-Export auf spieler.php), damit sie neben der Turnier-Auswahl nicht zu viel Gewicht bekommt. */
.export-leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 0 0 12px;
}

.export-leiste .export-link-btn {
    margin-left: 0;
    border: none;
    background: none;
    color: var(--club-blue);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 400;
    text-decoration: underline;
    padding: 2px 4px;
    border-radius: 4px;
}

.export-leiste .export-link-btn:hover {
    background: none;
    color: var(--club-blue-dark);
}

.export-leiste .export-trenner {
    color: #999;
    font-size: 0.78rem;
}

.export-leiste .drucken-hinweis {
    flex-basis: 100%;
    color: #888;
}

/* Druckansicht ("Drucken / Als PDF speichern") für index.php: blendet Navigation, Formular-/
   Bearbeitungselemente und alles Interaktive aus. Zeigt bewusst NUR das, was gerade über die
   Reiterleiste ausgewählt ist ("Alle" = komplettes Turnier, eine einzelne Gruppe = nur diese) - so
   lässt sich wahlweise das komplette Turnier oder gezielt eine einzelne Gruppe drucken (die dann
   eher auf ein A4-Blatt passt). Die von app.js per Inline-Style gesetzten "display:none" der gerade
   NICHT ausgewählten Gruppen/des Playoff-Bereichs bleiben deshalb unangetastet (kein !important-
   Override mehr auf .gruppen-box/#playoff-bereich). */
@media print {
    @page {
        size: A4;
        margin: 12mm 10mm;
    }

    header.kopf nav,
    .export-leiste,
    #reiter,
    #status,
    .footer,
    #turnier-auswahl,
    label:has(#turnier-auswahl),
    .zeile-aktionen,
    .termin-input,
    .termin-speichern-btn,
    .termin-loeschen-btn,
    .ort-select,
    .satz-eingaben {
        display: none !important;
    }

    .gruppen-box {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Kompaktere Abstände/Schrift beim Drucken, damit eine einzelne Gruppe (Tabelle + Spielplan)
       eher komplett auf eine A4-Seite passt. */
    .gruppen-box h2 {
        margin: 4px 0;
        font-size: 1.05rem;
    }

    .gruppen-box h3 {
        margin: 6px 0 4px;
        font-size: 0.9rem;
    }

    table.tabelle-tabelle th,
    table.tabelle-tabelle td {
        padding: 3px 5px;
        font-size: 0.72rem;
    }

    .spielplan {
        gap: 2px;
        padding-bottom: 4px;
    }

    .spiel-eintrag {
        margin-bottom: 2px;
    }

    .spiel-zeile {
        padding: 3px 6px;
        font-size: 0.78rem;
    }

    .termin-zeile {
        font-size: 0.7rem;
        padding: 1px 6px;
    }

    body {
        background: var(--white);
    }

    .container {
        max-width: none;
        box-shadow: none;
    }
}