/* ==========================================================================
   WKBV Vereinsportal – modernes, eigenständiges Stylesheet
   ========================================================================== */
:root {
    --blue:      #163a8a;
    --blue-dark: #0f2a66;
    --red:       #c8102e;
    --ink:       #1f2733;
    --muted:     #5a6675;
    --line:      #e3e8ef;
    --bg:        #eef1f6;
    --card:      #ffffff;
    --ok:        #1d7a46;
    --ok-bg:     #e7f5ee;
    --err:       #b3261e;
    --err-bg:    #fdecea;
    --warn:      #8a5a00;
    --warn-bg:   #fff4e0;
    --info-bg:   #e9f0fb;
    --radius:    14px;
    --shadow:    0 6px 24px rgba(20, 40, 90, .08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.55;
}

a { color: var(--blue); }

/* ---------- Kopfbereich oben fixieren ---------- */
.site-top { position: sticky; top: 0; z-index: 100; }

/* ---------- Top-Leiste (Datum/Uhrzeit) ---------- */
.topbar {
    background: var(--blue-dark);
    color: #fff;
    font-size: .78rem;
    letter-spacing: .02em;
}
.topbar__inner {
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding: 5px 20px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.topbar__version { white-space: nowrap; opacity: .85; }

/* Testbetrieb: bewusst laut und quer über die volle Breite. Eine Testsitzung
   darf sich nie wie der Echtbetrieb anfühlen – sonst wundert man sich später,
   warum eine "echte" Meldung nirgends auftaucht. */
.testbar {
    background: repeating-linear-gradient(
        45deg, #b45309, #b45309 12px, #92400e 12px, #92400e 24px);
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    padding: 7px 20px;
    letter-spacing: .02em;
}

/* ---------- Header ---------- */
.site-header {
    background: var(--card);
    border-bottom: 3px solid var(--blue);
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.site-header__inner {
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.site-header__brand {
    display: flex; align-items: center; gap: 14px;
    text-decoration: none; color: var(--ink);
}
.site-header__brand:hover .site-header__title { color: var(--blue); }
.site-header__logo { height: 52px; width: auto; display: block; }
.site-header__title { font-weight: 700; font-size: 1.15rem; line-height: 1.1; }
.site-header__title small { font-weight: 500; color: var(--muted); font-size: .72rem; }
.site-header__nav { display: flex; align-items: center; gap: 14px; font-size: .9rem; }
.site-header__verein { font-weight: 600; color: var(--blue); }
.site-header__mail { font-weight: 400; color: var(--muted); }

/* ---------- Linkleiste des Vereinsportals (eigene Zeile im Header) ---------- */
/* Sie steht INNERHALB von .site-header, damit sie zusammen mit ihm oben kleben
   bleibt und der blaue Balken darunter die Kopfzeile als Ganzes abschließt.
   Die dünne Linie oben trennt sie von Logo und Vereinsname. */
.site-nav { border-top: 1px solid var(--line); background: var(--card); }
.site-nav__inner {
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: .9rem;
}
/* Ein Ziel, das ohne gewählten Club nicht funktioniert: sichtbar, aber
   erkennbar nicht anklickbar. Der Grund steht im title-Attribut. */
.navlink--gesperrt { color: var(--muted); cursor: not-allowed; }
.navlink--gesperrt:hover { border-bottom-color: transparent; }

/* Ein Ziel AUSSERHALB des aktuellen Bereichs (Admin -> Vereinsportal).
   Rückt nach rechts und ist gedämpft: Es gehört nicht zu den Seiten, zwischen
   denen man hier hin- und herwechselt, soll aber erreichbar bleiben. */
.navlink--extern { margin-left: auto; color: var(--muted); }
.navlink--extern:hover { color: var(--blue); }

/* Nur die Position, ohne Dämpfung: für ein Ziel, das sehr wohl zum Bereich
   gehört, aber am rechten Rand besser aufgehoben ist – die Hilfe. Dort liegt
   sie immer an derselben Stelle, auch wenn Menüpunkte dazukommen. */
.navlink--rechts { margin-left: auto; }

/* ---------- Admin-Navigation: Gruppen mit Klappmenü ---------- */
.navlink {
    color: var(--blue); text-decoration: none; white-space: nowrap;
    padding: 3px 0; border-bottom: 2px solid transparent;
}
.navlink:hover { border-bottom-color: var(--line); }
.navlink--aktiv { font-weight: 600; border-bottom-color: var(--red); }

.navgroup { position: relative; }
/* Der Pfeil ersetzt das Standard-Dreieck von <details>. */
.navgroup > summary { cursor: pointer; list-style: none; user-select: none; }
.navgroup > summary::-webkit-details-marker { display: none; }
.navgroup > summary::after { content: ' \25BE'; font-size: .8em; }
.navgroup[open] > summary::after { content: ' \25B4'; }

.navgroup__menu {
    position: absolute; top: 100%; left: -12px; margin-top: 8px; z-index: 110;
    min-width: 190px; padding: 6px;
    background: var(--card); border: 1px solid var(--line);
    border-radius: 10px; box-shadow: var(--shadow);
}
.navgroup__menu a {
    display: block; padding: 7px 11px; border-radius: 7px;
    color: var(--ink); text-decoration: none; white-space: nowrap;
}
.navgroup__menu a:hover { background: var(--info-bg); color: var(--blue); }
.navgroup__menu a.is-aktiv { background: var(--info-bg); color: var(--blue); font-weight: 600; }

@media (max-width: 860px) {
    .site-header__nav { flex-wrap: wrap; gap: 10px 14px; }
    .site-nav__inner { gap: 6px 14px; font-size: .85rem; }
    .navgroup__menu { left: 0; }
}

/* ---------- Layout ---------- */
/* EINE Breite fuer alle drei Bereiche (seit Build 0.155). Vorher war das
   Vereinsportal 920px breit und nur der Admin-Bereich 1300px – wer zwischen
   den Bereichen wechselte, sah die Spalte springen. Die Sonderregel
   ".admin-wide" fuer die Breite ist damit entfallen; die Klasse bleibt, weil
   an ihr noch die Kachelaufteilung des Dashboards haengt. */
.container { max-width: 1320px; width: 100%; margin: 28px auto; padding: 0 20px; }

.card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px 30px;
    margin-bottom: 22px;
}
.card--narrow { max-width: 440px; margin-left: auto; margin-right: auto; }

h1 { font-size: 1.55rem; margin: 0 0 4px; }
h2 { font-size: 1.15rem; margin: 26px 0 12px; color: var(--blue-dark); }
h2:first-child { margin-top: 0; }
.lead { color: var(--muted); margin-top: 0; }
.section-hint { color: var(--muted); font-size: .9rem; }
hr { border: none; border-top: 1px solid var(--line); margin: 22px 0; }

.deadline {
    display: inline-block;
    background: var(--err-bg); color: var(--err);
    font-weight: 600; font-size: .9rem;
    padding: 6px 12px; border-radius: 8px; margin: 4px 0 6px;
}

/* Inaktivitäts-Countdown */
.session-timer {
    display: block; text-align: center;
    background: var(--warn-bg); color: var(--warn);
    border-bottom: 1px solid #f1d39a;
    font-size: .9rem; padding: 8px 12px;
}
.session-timer strong { font-variant-numeric: tabular-nums; }
.session-timer--warn {
    background: var(--err-bg); color: var(--err); border-color: var(--err);
}

/* ---------- Formulare ---------- */
.field { margin-bottom: 16px; }
.field > label { display: block; font-weight: 600; margin-bottom: 5px; font-size: .92rem; }
.field .hint { font-weight: 400; color: var(--muted); font-size: .82rem; }

/* ---------- Datei-Ablagezone (Drag & Drop) ---------- */
/* Das echte <input type=file> liegt darüber und wird nur ausgeblendet, wenn
   JavaScript aktiv ist – ohne Skript bleibt der normale Auswahlknopf sichtbar. */
.dropzone {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; text-align: center;
    padding: 22px 18px;
    border: 2px dashed var(--line); border-radius: 12px;
    background: #f8fafd; color: var(--muted);
    transition: border-color .15s, background .15s;
}
/* Die auffällige Ablage-Optik und das Ausblenden des rohen Datei-Felds greifen
   erst, wenn das Skript die Zone als „bereit“ markiert. Ohne JavaScript bleibt
   der native „Datei auswählen“-Knopf sichtbar und voll nutzbar. */
.dropzone--js { min-height: 96px; cursor: pointer; }
.dropzone--js input[type=file] {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
}
.dropzone--js:hover { border-color: var(--blue); background: var(--info-bg); }
.dropzone--aktiv {
    border-color: var(--blue); background: var(--info-bg);
    box-shadow: inset 0 0 0 3px rgba(22, 58, 138, .12);
}
.dropzone--gefuellt { border-style: solid; border-color: var(--blue); background: var(--info-bg); }
.dropzone__hint strong { color: var(--blue-dark); }
.dropzone__hint .hint { display: block; margin-top: 4px; font-size: .82rem; }
.dropzone__file { font-weight: 600; color: var(--blue-dark); word-break: break-all; }

input[type=text], input[type=password], input[type=email], input[type=number],
select, textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    font: inherit;
    background: #fff;
    color: var(--ink);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(22,58,138,.15);
}
input[readonly], input:disabled, select:disabled {
    background: #f4f6fa; color: var(--muted);
}
textarea { resize: vertical; min-height: 84px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 14px; }
.grid-plz { display: grid; grid-template-columns: 90px 1fr 1.4fr; gap: 14px; }
@media (max-width: 720px) { .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .grid-2, .grid-3, .grid-4, .grid-plz { grid-template-columns: 1fr; } }

.check { display: flex; gap: 10px; align-items: flex-start; }
.check input { width: auto; margin-top: 4px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 6px 0 4px; }
.checks .check { flex: 0 0 auto; }

/* Passwort-Vorgaben (Live-Checkliste) */
.pwd-rules { list-style: none; padding: 0; margin: 8px 0 16px; font-size: .88rem; }
.pwd-rules li { color: var(--muted); position: relative; padding-left: 24px; line-height: 1.8; }
.pwd-rules li::before {
    content: '\2717'; /* ✕ */
    position: absolute; left: 2px; color: var(--err); font-weight: 700;
}
.pwd-rules li.ok { color: var(--ok); }
.pwd-rules li.ok::before { content: '\2713'; color: var(--ok); } /* ✓ */

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    background: var(--blue); color: #fff;
    border: none; border-radius: 9px;
    padding: 11px 20px; font: inherit; font-weight: 600;
    cursor: pointer; text-decoration: none; text-align: center;
    transition: background .15s ease;
}
.btn:hover { background: var(--blue-dark); }
.btn--block { display: block; width: 100%; }
.btn--ghost { background: transparent; color: var(--blue); border: 1px solid var(--blue); }
.btn--ghost:hover { background: var(--info-bg); }
.btn--sm { padding: 7px 14px; font-size: .85rem; }
.btn--danger { background: var(--red); }
.btn--danger:hover { background: #9c0c23; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; align-items: center; }
.btn-row--split { justify-content: space-between; }
/* Blätter-Schaltflächen am Anfang/Ende der Liste – gleiche Logik wie .action */
.btn[aria-disabled=true] { opacity: .45; pointer-events: none; }

/* ---------- Alerts ---------- */
.alert { padding: 13px 16px; border-radius: 10px; margin-bottom: 18px; font-size: .93rem; }
.alert--info    { background: var(--info-bg); }
.alert--success { background: var(--ok-bg);  color: var(--ok); }
.alert--error   { background: var(--err-bg); color: var(--err); }
.alert--warn    { background: var(--warn-bg);color: var(--warn); }
.alert a { color: inherit; font-weight: 600; }

/* ---------- Dashboard-Karten ---------- */
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 8px; }
@media (max-width: 560px) { .actions { grid-template-columns: 1fr; } }
/* Im Admin-Dashboard stehen je nach Gruppe zwei oder drei Kacheln nebeneinander. */
.admin-wide .actions { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
/* Kompakte Kachel (Build 0.155): Symbol und Beschriftung nebeneinander statt
   untereinander, Innenabstand 15px statt 22px. Aus drei Zeilen wird eine – so
   passen alle Ziele eines Bereichs ohne Scrollen auf den Schirm.
   position: relative traegt den Tooltip (.action__tip). */
.action {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    text-decoration: none; color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 15px; transition: border-color .15s, box-shadow .15s, transform .1s;
}
.action:hover { border-color: var(--blue); box-shadow: var(--shadow); transform: translateY(-2px); }
.action[aria-disabled=true] { opacity: .5; pointer-events: none; }
.action__icon { font-size: 1.35rem; line-height: 1.2; flex: none; }
.action__title { font-weight: 700; font-size: 1rem; margin: 0; color: var(--blue-dark); line-height: 1.3; }

/* Eine Kachel MIT Statuszeile (Vereinsportal: "Meldeschluss war am …",
   "Es fehlt noch: …"). Dann stehen Symbol und Text nicht mehr nebeneinander,
   sondern der Status kommt darunter – er ist der Grund, warum eine Kachel grau
   ist, und darf nirgends verschwinden. */
.action--status { flex-direction: column; align-items: flex-start; gap: 5px; }
.action--status .action__kopf { display: flex; align-items: center; gap: 12px; }
.action__desc { color: var(--muted); font-size: .88rem; margin: 0; }

/* ---------- Erklaerung als Mouseover ----------
   Die frueheren Erklaerungstexte unter jeder Kachel sind seit Build 0.155
   nicht mehr sichtbar, sondern erscheinen beim Zeigen. Bewusst NICHT ueber das
   title-Attribut geloest: Der Browser-Tooltip kommt erst nach einer Sekunde,
   sieht auf jedem System anders aus und laesst sich nicht gestalten.

   :focus-within statt :focus – der Tooltip haengt IM Link, und wer mit der
   Tastatur durchtabbt, soll die Erklaerung genauso bekommen.

   Was hier NICHT hineingehoert: alles, was den Zustand einer Kachel erklaert
   ("Meldeschluss war am …", "Es fehlt noch: …"). Das bleibt als .action__desc
   sichtbar, sonst weiss niemand mehr, warum eine Kachel grau ist. */
.action__tip {
    position: absolute; left: 0; top: calc(100% + 9px); z-index: 5;
    width: max-content; max-width: 460px;
    background: #10151d; color: #fff;
    font-size: .88rem; line-height: 1.5; font-weight: 400;
    padding: 11px 15px; border-radius: 9px;
    box-shadow: 0 10px 30px rgba(10, 20, 45, .35);
    opacity: 0; visibility: hidden; transition: opacity .12s;
    pointer-events: none;
}
.action__tip::before {
    content: ""; position: absolute; left: 18px; top: -5px;
    border-left: 6px solid transparent; border-right: 6px solid transparent;
    border-bottom: 6px solid #10151d;
}

/* DIE ENTSCHEIDENDE ZEILE. Jede Kachel steht auf position:relative (das braucht
   der Tooltip), und gleichrangige Elemente malt der Browser in der Reihenfolge,
   in der sie im Dokument stehen – die Kachel RECHTS kommt spaeter und lag damit
   ueber dem Tooltip der Kachel links. Der Text schien durch, die Erklaerung war
   unlesbar. Beim Zeigen wird deshalb die Kachel selbst nach vorn geholt; ihr
   Tooltip steigt mit. */
.action:hover { z-index: 40; }

.action:hover .action__tip,
.action:focus-within .action__tip { opacity: 1; visibility: visible; }

/* Die letzte Kachelreihe wuerde ihren Tooltip aus dem Kasten schieben –
   dort klappt er nach oben. */
.actions--letzte .action__tip { top: auto; bottom: calc(100% + 8px); }
.actions--letzte .action__tip::before {
    top: auto; bottom: -5px;
    border-bottom: none; border-top: 6px solid var(--ink);
}

/* Auf Touch-Geraeten gibt es kein Zeigen. Statt eines Tooltips, der nie
   erscheint, bleibt dort schlicht nichts – die Beschriftung muss fuer sich
   stehen. Deshalb sind die Kacheltexte durchweg selbsterklaerend benannt. */
@media (hover: none) {
    .action__tip { display: none; }
}

/* ---------- Kachelgruppen im Admin-Bereich (aufklappbar) ----------
   Der Admin-Bereich hat rund zwanzig Ziele. Alle gleichzeitig offen waeren
   eine Wand; deshalb je Menuegruppe ein Block, der sich zuklappen laesst.
   Nach dem Anmelden ist alles zu (kein "open" im Markup) – aufgeklappt wird,
   was gebraucht wird. */
.kachelgruppe {
    background: var(--card); border-radius: var(--radius);
    box-shadow: var(--shadow); margin-bottom: 12px; overflow: visible;
}
.kachelgruppe > summary {
    cursor: pointer; list-style: none; user-select: none;
    padding: 13px 18px; font-weight: 700; font-size: 1.05rem;
    color: var(--blue-dark);
    display: flex; align-items: center; gap: 10px;
    border-radius: var(--radius);
}
.kachelgruppe > summary::-webkit-details-marker { display: none; }
.kachelgruppe > summary::after {
    content: '\25BE'; margin-left: auto; color: var(--muted); font-size: .8em;
}
.kachelgruppe[open] > summary::after { content: '\25B4'; }
.kachelgruppe > summary:hover { background: var(--info-bg); }
.kachelgruppe > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.kachelgruppe__zahl {
    font-size: .74rem; font-weight: 600; color: var(--muted);
    background: var(--bg); border-radius: 10px; padding: 2px 9px;
}
.kachelgruppe__inhalt { padding: 0 14px 14px; }

/* Export und Hilfe sind im Menue keine Gruppen, sondern einzelne Punkte.
   Deshalb bekommen sie auch keinen Klappkopf und keine Zahl, sondern stehen
   als schlichter Abschluss unter den Gruppen – immer sichtbar. */
.kachelabschluss {
    background: var(--card); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 14px; margin-bottom: 12px;
}

/* ---------- Tabellen ---------- */
.table { width: 100%; border-collapse: collapse; margin: 10px 0 6px; }
.table th, .table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.table tbody tr:hover { background: #fafbfe; }
.table--compact th, .table--compact td { padding: 6px 8px; font-size: .9rem; }
.table input[type=text] { padding: 7px 9px; }

/* Spalte optisch von den Personendaten abtrennen (durchgehende schwarze Linie) */
.table .col-divider { border-left: 2px solid var(--ink); padding-left: 18px; }

/* Vorsaison-Altdaten: Spalten "Alte Liga" und "Status" zentriert */
.table .status-cell,
.table .liga-cell { text-align: center; }
/* Status-Farbe: x = wieder angemeldet (grün), a = abgemeldet (rot) */
.status-x { background: var(--ok-bg); }
.status-a { background: var(--err-bg); }

/* Neumitglieder-Erfassung */
.neu-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px 14px; }
@media (max-width: 480px) { .neu-grid { grid-template-columns: 1fr; } }
.neu-row { padding-top: 12px; margin-top: 6px; border-top: 1px solid var(--ink); }
.neu-row:first-child { border-top: none; margin-top: 0; }
.neu-row__title { font-weight: 600; color: var(--blue-dark); margin: 10px 0 6px; }

.rlk-status { display: flex; gap: 14px; flex-wrap: wrap; }
.rlk-status label { display: inline-flex; align-items: center; gap: 5px; font-size: .85rem; }
.rlk-status input { width: auto; }

/* ---------- Review / Zusammenfassung ---------- */
.summary { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.summary dl { display: grid; grid-template-columns: 200px 1fr; margin: 0; }
.summary dt { padding: 9px 14px; background: #f6f8fc; font-weight: 600; border-bottom: 1px solid var(--line); }
.summary dt::after { content: ':'; }
.summary dd { padding: 9px 14px; margin: 0; border-bottom: 1px solid var(--line); }
.summary--wide dl { grid-template-columns: 270px 1fr; }
.summary--wide dt { white-space: nowrap; }
@media (max-width: 560px) { .summary dl, .summary--wide dl { grid-template-columns: 1fr; } .summary dt { border-bottom: none; } }

/* ---------- Steps ---------- */
.steps { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 22px; flex-wrap: wrap; }
.steps li { display: flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--muted); }
.steps__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--line); color: var(--muted); font-weight: 700; font-size: .78rem;
}
.steps li.is-active { color: var(--blue); font-weight: 600; }
.steps li.is-active .steps__num { background: var(--blue); color: #fff; }
.steps li.is-done .steps__num { background: var(--ok); color: #fff; }

/* ---------- Footer ---------- */
.site-footer { text-align: center; color: var(--muted); font-size: 1rem; padding: 24px 20px 40px; }
.site-footer a { color: var(--muted); }

/* ---------- Profil: zweispaltig mit Sprungmenü ---------- */
.profile-layout { display: grid; grid-template-columns: 210px 1fr; gap: 22px; align-items: start; }
.profile-nav { padding: 12px 10px; position: sticky; top: 116px; }
.profile-nav ul { list-style: none; margin: 0; padding: 0; }
.profile-nav a { display: block; padding: 9px 12px; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: .95rem; }
.profile-nav a:hover { background: var(--info-bg); color: var(--blue); }
.profile-nav hr { border: none; border-top: 1px solid var(--line); margin: 6px 8px; }
.profile-content .card { margin-bottom: 22px; }
.profile-content .card:last-child { margin-bottom: 0; }
.profile-section { scroll-margin-top: 116px; }
@media (max-width: 720px) {
    .profile-layout { grid-template-columns: 1fr; }
    .profile-nav { position: static; }
}

/* Die Bahnverteilung bringt ihr eigenes Stylesheet mit (assets/bahnverteilung.css) –
   sie setzt @page auf Querformat, und das ließe sich hier nicht auf eine Seite begrenzen. */

/* Filterleiste über Listen: alle Felder in einer Zeile, kleiner als ein
   normales Formular – sie soll der Liste darunter nicht die Höhe wegnehmen. */
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.filter-bar .field { flex: 1 1 140px; min-width: 120px; margin-bottom: 0; }
.filter-bar .field > label {
    font-size: .76rem; font-weight: 500; color: var(--muted); margin-bottom: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.filter-bar input[type=text], .filter-bar select { padding: 7px 10px; font-size: .9rem; border-radius: 7px; }
.filter-bar__actions { display: flex; gap: 8px; flex: 0 0 auto; }
@media (max-width: 700px) { .filter-bar .field { flex-basis: 100%; } }

/* Schaltfläche mit reinem Symbol (z. B. Stift zum Bearbeiten in Listen) */
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 7px;
    border: 1px solid var(--line); color: var(--blue); background: #fff;
    text-decoration: none; cursor: pointer;
    transition: border-color .15s, background .15s;
}
.icon-btn:hover { border-color: var(--blue); background: var(--info-bg); }
.icon-btn svg {
    width: 15px; height: 15px; display: block;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}

/* Sortierbarer Spaltenkopf */
.sortkopf { color: inherit; text-decoration: none; white-space: nowrap; }
.sortkopf:hover { color: var(--blue); text-decoration: underline; }
.sortkopf--aktiv { color: var(--blue); font-weight: 700; }

.text-muted { color: var(--muted); }
.text-center { text-align: center; }
.text-ok { color: var(--ok); }
.mt-0 { margin-top: 0; }

/* ---------- Portal-Zugänge: einzeilige Aktionen ---------- */
/* Jede Aktion der Bearbeiten-Karte steht auf EINER Zeile: Bezeichnung links,
   Eingabe/Text dehnbar in der Mitte, Schaltflächen rechts. Die Maske wird oft
   hintereinander für mehrere Einträge benutzt – gestapelte Blöcke kosteten dabei
   nur Bildschirmhöhe und Scrollen. */
.pz-zeile {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}
.pz-zeile:last-child { border-bottom: none; padding-bottom: 0; }
.pz-titel {
    flex: 0 0 130px;
    font-weight: 600;
    font-size: .92rem;
}
/* Nimmt den freien Platz und schiebt die Schaltflächen nach rechts. */
.pz-dehnbar { flex: 1 1 240px; min-width: 0; }
/* E-Mail-Adressen werden klein gespeichert - die Eingabe soll das sofort
   zeigen, damit niemand die Gross-Schreibung fuer uebernommen haelt. Der
   Platzhalter behaelt seine Schreibweise. */
.pz-mail { text-transform: lowercase; }
.pz-mail::placeholder { text-transform: none; }
.pz-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .92rem;
}
.pz-check input[type=checkbox] { flex: none; }
/* Schmale Anzeigen: Bezeichnung über die volle Breite, darunter der Rest. */
@media (max-width: 620px) {
    .pz-titel { flex: 0 0 100%; }
}

/* ---------- Club-Dashboard: was über den Verein läuft ---------- */
/* Drei Zeilen mit eigener Abstufung: Überschrift, die Aufzählung, die
   Begründung. Bewusst KEINE ausgegrauten Kacheln – ausgegraut heißt im Portal
   sonst „geht gerade nicht" (Frist zu, keine Mannschaft eingeteilt), hier
   heißt es „macht jemand anders". */
.ueber-verein {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
/* Nur der obere Abstand pauschal - ein pauschales margin:0 wuerde als
   Klasse+Element die Abstaende der Kindklassen darunter ueberstimmen. */
.ueber-verein p { margin-top: 0; }
/* Beschriftung und Aufzählung auf EINER Zeile, danach eine Leerzeile: Die
   Aufzählung gehört zur Beschriftung, die Begründung darunter ist ein eigener
   Gedanke. */
.ueber-verein__zeile {
    font-size: 1.02rem;
    color: var(--ink);
    margin-bottom: 14px;
}
.ueber-verein__zeile strong { color: var(--blue-dark); }
.ueber-verein__hinweis { font-size: .95rem; margin-bottom: 0; }

/* ---------- Hilfe: gewandelte Handbücher ---------- */
/* Der Inhalt kommt aus Markdown (inc/hilfe.php) und besteht deshalb aus
   nackten h2/h3/p/ul/table ohne Klassen. Alles Nötige hängt daher am
   Elternelement .hilfe. Lesetext, kein Formular: begrenzte Zeilenlänge und
   mehr Zeilenabstand als im Rest des Portals. */
/* Keine eigene Breitenbegrenzung mehr (Build 0.155, so entschieden): Die
   Hilfe laeuft wie jede andere Seite ueber die volle Spaltenbreite. Sollte
   sich der Fliesstext dort als zu breit erweisen, genuegt hier wieder ein
   max-width – der Rest des Portals bleibt davon unberuehrt. */
.hilfe { line-height: 1.65; }
.hilfe h2 {
    /* Sprungziel: Ohne den Abstand landet die angesprungene Überschrift hinter
       der stehenden Kopfleiste – man klickt und sieht mitten im Absatz. */
    scroll-margin-top: calc(var(--hilfe-kopf) + 16px);
    margin-top: 34px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.hilfe h3 { font-size: 1.02rem; color: var(--blue-dark); margin: 22px 0 8px; }
/* Die Trennlinien der Markdown-Quelle stehen jeweils VOR einer Überschrift,
   die ihre eigene Linie mitbringt – zwei Striche übereinander. */
.hilfe hr { display: none; }
.hilfe ul, .hilfe ol { padding-left: 22px; }
.hilfe li { margin-bottom: 7px; }
.hilfe li > ul, .hilfe li > ol { margin-top: 7px; }
.hilfe code {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 1px 5px;
    font-size: .88em;
}
.hilfe blockquote {
    margin: 16px 0;
    padding: 12px 16px;
    background: var(--info-bg);
    border-left: 4px solid var(--blue);
    border-radius: 0 8px 8px 0;
}
.hilfe blockquote p { margin: 0; }
/* Breite Tabellen dürfen scrollen statt die Seite auseinanderzuziehen. */
.hilfe-tabelle { overflow-x: auto; margin: 12px 0 18px; }
.hilfe-tabelle .table { min-width: 22rem; }
.hilfe-tabelle .table td { vertical-align: top; }
/* ---------- Hilfe: Navigation links neben dem Text ---------- */
/* Ein Handbuch wird nachgeschlagen, nicht von vorn gelesen. Das Verzeichnis
   gehört deshalb dauerhaft danebengestellt und nicht an den Anfang, wo man es
   nach dem ersten Sprung nie wiedersieht. Die Abschnitte baut
   hilfe_seite() aus den Überschriften – hier ist nichts nachzupflegen. */
/* Höhe der stehenden Kopfleiste (.site-top ist sticky, top:0). Die Navigation
   und die Sprungziele müssen darunter beginnen, sonst verschwinden sie hinter
   ihr. Der Wert hier ist nur die Rückfallebene – die tatsächliche Höhe misst
   das Skript in inc/hilfe.php, denn sie schwankt: Testbetrieb-Leiste,
   Wartungs- oder Übernahme-Leiste, Inaktivitätszähler, Umbruch auf schmalen
   Anzeigen.

   Der Rückfallwert ist bewusst großzügig: Ist er zu klein, verschwinden
   Einträge und Überschriften hinter der Leiste – ist er zu groß, steht nur
   etwas mehr Luft da. Die Richtung des Irrtums ist damit die harmlose. */
:root { --hilfe-kopf: 140px; }

.hilfe-layout { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 60.01rem) {
    .hilfe-layout {
        grid-template-columns: 15rem minmax(0, 1fr);
        gap: 30px;
        align-items: start;
    }
    /* Die Karte bringt ihren eigenen Abstand mit; in der Spalte daneben stört er. */
    .hilfe-layout .card { margin-bottom: 0; }
}

.hilfe-nav ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.hilfe-nav a {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: 4px;
    padding: 6px 8px;
    border-radius: 7px;
    border-left: 2px solid transparent;
    font-size: .88rem;
    line-height: 1.35;
    color: var(--muted);
    text-decoration: none;
}
/* Die Nummer ist eine Ordnungshilfe, kein Schmuck: gedämpft, aber lesbar.
   In var(--line) war sie auf dem hellen Grund praktisch unsichtbar und tauchte
   erst auf der weißen Fläche des angesteuerten Eintrags auf. */
.hilfe-nav__nr {
    color: var(--muted);
    opacity: .72;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.hilfe-nav a:hover { color: var(--ink); background: var(--card); }
.hilfe-nav a:hover .hilfe-nav__nr { opacity: 1; }
/* Der gerade gelesene Abschnitt (siehe Beobachter in inc/hilfe.php). */
.hilfe-nav a[aria-current="true"] {
    color: var(--blue);
    font-weight: 600;
    background: var(--card);
    border-left-color: var(--blue);
}
.hilfe-nav a[aria-current="true"] .hilfe-nav__nr { color: var(--blue); opacity: 1; }
.hilfe-nav__titel {
    margin: 0 0 10px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

@media (min-width: 60.01rem) {
    /* Mitscrollen: Das Verzeichnis bleibt stehen, der Text läuft daran vorbei.
       Eigenes Scrollen, falls die Liste einmal länger wird als der Bildschirm. */
    .hilfe-nav {
        position: sticky;
        top: calc(var(--hilfe-kopf) + 14px);
        /* Wird die Liste länger als der freie Platz, scrollt sie in sich
           selbst – abgeschnittene Einträge gäbe es sonst am unteren Rand. */
        max-height: calc(100vh - var(--hilfe-kopf) - 28px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 4px 0;
    }
    .hilfe-nav__schalter { display: none; }
}
/* Schmale Anzeigen: ein Klappkasten über dem Text statt einer langen Liste,
   durch die man erst scrollen müsste, um zum Handbuch zu kommen. */
@media (max-width: 60rem) {
    .hilfe-nav__box {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 2px 16px;
    }
    .hilfe-nav__schalter {
        cursor: pointer;
        list-style: none;
        padding: 12px 0;
        font-size: .76rem;
        font-weight: 600;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--blue);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .hilfe-nav__schalter::-webkit-details-marker { display: none; }
    .hilfe-nav__schalter::after { content: "▾"; }
    .hilfe-nav__box[open] .hilfe-nav__schalter::after { content: "▴"; }
    .hilfe-nav__titel { display: none; }
    .hilfe-nav ol { padding-bottom: 12px; }
}

/* Ligaspieltage im Admin: Vorschau vor der Uebernahme in die Rangliste */
.spta-details { margin: 0 0 16px; padding-left: 20px; font-size: .9rem; color: var(--muted); }
.table tr.is-gewaehlt { background: var(--info-bg); }
.table tr.ist-dublette { opacity: .55; }

/* ---------- Kompakte Formularzeilen (Build 0.155) ----------
   Beschriftung, Feld und Knopf in EINER Zeile. Fuer Formulare mit genau einem
   kurzen Feld – uebereinander gestellt sind das drei Zeilen, ohne dass die
   zusaetzliche Hoehe irgendetwas erklaert. Bricht auf schmalen Schirmen
   von selbst um. */
.feldzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.feldzeile > label { font-weight: 600; font-size: .92rem; white-space: nowrap; margin: 0; }
.feldzeile > input { flex: 1 1 260px; min-width: 0; }

/* Zwei Felder nebeneinander, die zusammengehoeren (neues Passwort + Wiederholung). */
.feldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; max-width: 640px; }
@media (max-width: 560px) { .feldpaar { grid-template-columns: 1fr; } }

/* Die Passwortkriterien nebeneinander statt untereinander: fuenf kurze Punkte,
   die als Liste den Knopf aus dem Bild schieben. */
.pwd-reihe .pwd-rules { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 14px; }

/* Zweispaltige Zusammenfassung – sechs Zeilen mit kurzen Werten ergeben sonst
   eine lange schmale Spalte. */
.dl-zwei { display: grid; grid-template-columns: max-content 1fr max-content 1fr; gap: 6px 18px; }
@media (max-width: 700px) { .dl-zwei { grid-template-columns: max-content 1fr; } }

/* ---------- Rechte-Haken je Gruppe (Admin > Zugaenge, Build 0.156) ----------
   Seit der feinen Rechtevergabe sind es rund zwanzig Haken. In einer Reihe
   waeren sie beim Anlegen eines Kontos nicht zu ueberblicken; die Gruppen sind
   dieselben wie im Menue. */
.rechte {
    border: 1px solid var(--line); border-radius: 10px;
    padding: 10px 14px 12px; margin: 0 0 12px;
}
.rechte > legend {
    font-weight: 600; font-size: .92rem; color: var(--blue-dark);
    padding: 0 6px; display: flex; align-items: center; gap: 10px;
}
.rechte__alle {
    font: inherit; font-size: .74rem; font-weight: 600;
    padding: 2px 9px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--line); background: var(--bg); color: var(--muted);
}
.rechte__alle:hover { border-color: var(--blue); color: var(--blue); }