/* SV Greven 2021: Türkis, Blau, Orange; JV bleibt links als persönliche Marke. */

/* Zentrale Farbwerte: Änderungen wirken über die CSS-Variablen auf die gesamte Oberfläche. */
:root { color-scheme:light; --bg:#f2f8fa; --panel:#ffffff; --line:#d2e2e8; --text:#18334d; --muted:#526c7a; --accent:#004fc4; --turquoise:#00dfdf; --orange:#ff8200; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:var(--accent); text-underline-offset:4px; }
a:hover { color:#003a92; }

/* Gemeinsamer Seitenkopf mit JV- und Vereinslogo. */
.brand { background:#fff; border-bottom:4px solid var(--turquoise); }
.brand-inner { max-width:1320px; margin:auto; padding:20px 24px; display:flex; align-items:center; gap:28px; }
.brand-logo { display:block; width:94px; height:94px; object-fit:contain; }
.brand-link { flex-shrink:0; border-radius:8px; text-decoration:none; text-align:center; }
.brand-credit { display:block; margin-top:5px; font-size:.68rem; font-weight:650; color:var(--muted); }
.brand-copy { flex:1; }
.brand-club-link { flex-shrink:0; margin-left:auto; }
.brand-club-logo { display:block; width:380px; max-width:100%; height:auto; }
.brand-kicker { margin:0 0 8px; color:var(--accent); font-size:.75rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; }
.brand-title { margin:0; font-size:clamp(1.7rem,3vw,2.8rem); font-weight:850; letter-spacing:-.04em; line-height:1.1; }
.brand-subtitle { margin:12px 0 0; color:var(--muted); font-size:.95rem; }

/* Begrenzt die Inhaltsbreite und hält Abstand zum Fensterrand. */
main { max-width:1320px; margin:auto; padding:24px; }

/* Navigation: Links umbrechen auf kleinen Bildschirmen automatisch. */
nav { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0 0 30px; }
nav a { display:inline-block; border:1px solid var(--line); border-radius:8px; padding:9px 14px; color:#18334d; text-decoration:none; font-size:.88rem; font-weight:600; }
nav a:hover,nav a.aktiv { border-color:var(--accent); color:var(--accent); background:#e3fafa; }
h1 { margin:0 0 10px; font-size:clamp(1.8rem,3vw,2.5rem); letter-spacing:-.04em; line-height:1.15; }
h2 { margin:0 0 18px; font-size:1.35rem; letter-spacing:-.025em; line-height:1.3; }
h3 { margin:30px 0 14px; }
header>p { color:var(--muted); margin-bottom:28px; }

/* Wiederverwendbare Inhaltskarten für Spielpläne, Formulare und Tabellen. */
.karte,article { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:24px; margin:24px 0; box-shadow:0 8px 30px #0002; }
.karte h2 { padding-left:14px; border-left:4px solid var(--accent); }
.kennzahlen { display:flex; gap:32px; flex-wrap:wrap; margin-bottom:24px; color:var(--muted); }
.kennzahlen strong { display:block; color:var(--accent); font-size:1.7rem; }

/* Gemeinsames Aussehen der Aktionsknöpfe; eigene Regeln ergänzen Hover- und Fokuszustände. */
button { border:1px solid transparent; border-radius:8px; background:var(--accent); color:#fff; padding:12px 18px; font:inherit; font-weight:750; cursor:pointer; transition:background .15s; }
button:hover { background:#003f9e; }
button:disabled { opacity:.6; cursor:wait; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #ff8200; outline-offset:3px; }

/* Formularfelder mit einheitlichen Rahmen, Schriftgrößen und Abständen. */
input,select { border:1px solid #9ab5c3; border-radius:5px; background:#fff; color:var(--text); padding:8px 7px; font:inherit; font-size:.9rem; }
select { max-width:260px; }
input[type=number] { min-height:39px; }
.hinweis,.rueckspiel { color:var(--muted); }
.rueckspiel { font-size:.8rem; }
.meldung { border-left:4px solid var(--accent); }
.meldung.success { background:#e8f8f4; border-color:#9bcfc4; border-left-color:var(--accent); }
.meldung.error { background:#fff0ef; border-color:#efb5af; border-left-color:#c7372f; color:#8c211d; }
.warnung { color:#9c4500; }
.status { display:inline-block; padding:5px 12px; border-radius:30px; background:#fff1df; color:#8e4500; font-size:.8rem; font-weight:750; margin-bottom:16px; }
.status.gespeichert { background:#def8f4; color:#006d68; }

/* Breite Tabellen können auf kleinen Bildschirmen seitlich gescrollt werden. */
.tabelle { overflow-x:auto; scrollbar-color:#95b9c4 #edf6f8; }
table { width:100%; border-collapse:collapse; white-space:nowrap; font-variant-numeric:tabular-nums; font-size:.92rem; }
caption { text-align:left; font-size:1.15rem; font-weight:750; padding-bottom:14px; }
th,td { padding:13px 11px; text-align:left; border-bottom:1px solid #d2e2e8; }
th { background:#e5f4f6; color:#214b69; font-size:.74rem; letter-spacing:.035em; text-transform:uppercase; }
tbody tr:nth-child(even) { background:#f5fafc; }
tbody tr:hover { background:#e2f6f8; }
td strong { color:var(--accent); }
td button { padding:7px 11px; }
.druckwert { display:none; }

/* Regeln für kleine Bildschirme: kompaktere Logos und geringere Außenabstände. */
@media(max-width:650px) {
 .brand-inner { padding:10px 16px; gap:12px; }
 .brand-inner { flex-wrap:wrap; }
 .brand-logo { width:64px; height:64px; }
 .brand-club-logo { width:min(62vw,260px); }
 .brand-copy { order:3; flex-basis:100%; }
 .brand-credit { font-size:.6rem; }
 .brand-title { font-size:1.6rem; }
 .brand-subtitle { font-size:.8rem; margin-top:7px; }
 .brand-kicker { font-size:.62rem; letter-spacing:.1em; }
 main { padding:20px 14px; }
 .karte,article { padding:17px; margin:18px 0; }
 nav { gap:7px; margin-bottom:24px; }
 nav a { padding:8px 10px; font-size:.8rem; }
 .kennzahlen { gap:18px; }
 button { max-width:100%; }
}

/* Druckausgabe: Bedienknöpfe verbergen, Papierhintergrund weiß halten und Tabellenüberschriften wiederholen. */
@media print {
 :root { color-scheme:light; }
 .bedienung,.meldung,.brand-copy { display:none!important; }
 body { background:white!important; color:black!important; font-size:10pt; }
 .brand { background:white; border-color:#555; }
 .brand-inner { padding:0; }
 .brand-logo { width:52px; height:52px; }
 .brand-club-logo { width:220px; }
 .brand-credit { font-size:8pt; }
 main { max-width:none; padding:0; }
 .karte,article { border:0; padding:0; box-shadow:none; background:white; color:black; }
 .karte h2 { border-left:0; padding-left:0; }
 .tabelle { overflow:visible; }
 table { white-space:normal; font-size:9pt; }
 th,td { padding:7px; color:black!important; border-color:#bbb; }
 th,tbody tr:nth-child(even) { background:#eee; }
 thead { display:table-header-group; }
 tr { break-inside:avoid; }
 .druckwert { display:inline!important; }
 td strong,.warnung,.status,.status.gespeichert { color:black!important; }
 .status { background:white!important; border:1px solid #999; }
 tbody tr:hover { background:white; }
 .hinweis,.rueckspiel,header>p,.kennzahlen,.kennzahlen strong { color:#333; }
}

.rundenkopf { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.rundenkopf h2 { margin-bottom:0; }
button.sekundar { background:transparent; color:var(--accent); border-color:#91b8c6; font-size:.85rem; padding:8px 12px; }
button.sekundar:hover { background:#e2f6f8; }
dialog { width:min(520px,calc(100% - 32px)); padding:28px; background:var(--panel); color:var(--text); border:1px solid var(--accent); border-radius:14px; }
dialog::backdrop { background:#000b; }
dialog label { display:block; margin-bottom:8px; }
dialog input[type=text] { width:100%; }
.dialogaktionen { display:flex; gap:12px; justify-content:flex-end; margin-top:24px; }
#titelfehler { color:#9c4500; }
@media print { dialog { display:none!important; } }

.noch-offen { color:var(--muted); }
.noch-offen input:disabled,.noch-offen select:disabled { opacity:.45; cursor:not-allowed; }
.spielbaumliste td:nth-child(2) { white-space:normal; min-width:130px; max-width:200px; }
.spielbaumliste td:nth-child(5),.spielbaumliste td:nth-child(7) { white-space:normal; min-width:120px; }

summary { cursor:pointer; font-weight:700; color:var(--accent); }
details[open]>summary { margin-bottom:20px; }

.vereinslogo{width:34px;height:34px;object-fit:contain;vertical-align:middle;margin-right:8px;background:#fff;border-radius:5px;padding:3px;flex-shrink:0}
.nur-screenreader{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#teilnehmerliste input.vereinsname{min-width:15em;width:100%}
#teilnehmerliste input[type=file]{max-width:22em}

.anlage-felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px 24px;margin-bottom:20px}.anlage-felder p{margin:0}.anlage-felder label{display:block;margin-bottom:6px}.anlage-felder input:not([type=checkbox]){width:100%;max-width:100%}#anlagenamen input.vereinsname{width:100%;min-width:16em}


/* Das HTML-Attribut hidden muss Elemente unabhängig von sonstigen Layoutregeln ausblenden. */
[hidden]{display:none!important}.ansicht-auswahl{display:flex;flex-wrap:wrap;gap:14px 24px;margin-top:16px}.ansicht-auswahl label{display:flex;align-items:center;gap:8px}.ansicht-filter{display:flex;align-items:end;flex-wrap:wrap;gap:14px}.ansicht-filter label{display:flex;flex-direction:column;gap:5px}summary{cursor:pointer;font-weight:700}


/* Checkbox-Liste der zentralen Freigaben in der geschützten Turnierverwaltung. */
.eltern-freigaben{display:grid;gap:16px;margin:24px 0}.eltern-freigaben label{display:flex;align-items:center;gap:10px}.eltern-freigaben input{width:20px;height:20px}