/* Hemer.tippt – Gestaltung Block 1 (UI-Konzept 28.10.2026).
   Reihenfolge: Token, Basis, Layout, Navigation, Formulare, Knöpfe, Meldungen, Tabellen, Hilfsklassen, Breakpoints. */

/* ---------- Token ---------- */
:root {
    --c-bg: #ffffff;
    --c-page: #f4f4f4;
    --c-text: #5e5e5e;
    --c-text-soft: #7a7a7a;
    --c-accent: #c30000;
    --c-accent-dark: #a30000;
    --c-input-bg: #ffe6cc;
    --c-input-text: #c30000;
    --c-th: #e0e0e0;
    --c-row-alt: #e9e9e9;
    --c-best: #80ff80;
    --c-worst: #ebb3b3;
    --c-text-on-worst: #3d3d3d;
    --c-ok-bg: #e8f5e9;
    --c-ok: #2e7d32;
    --c-err-bg: #fdecec;
    --c-err: #c30000;
    --c-err-text: #a30000;
    --c-info-bg: #f4f4f4;
    --c-info: #7a7a7a;
    --c-focus: #a30000;
    --c-ok-bar: #2e7d32;

    --font: Verdana, Geneva, "DejaVu Sans", Arial, sans-serif;
    --fs-base: 1rem;
    --fs-small: 0.875rem;
    --fs-h1: 1.5rem;
    --fs-h2: 1.25rem;
    --lh: 1.5;

    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --gutter: 16px;
    --radius: 4px;
    --tap: 44px;
    --w-content: 72rem;
    --w-narrow: 28rem;
    --bg-image: none;
}

/* ---------- Basis ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* `hidden` muss auch gegen Klassen mit eigenem display (z. B. .btn) gewinnen. */
[hidden] {
    display: none !important;
}

html {
    -webkit-text-size-adjust: 100%;
    color-scheme: light;
}

body {
    margin: 0;
    background: var(--c-page) var(--bg-image);
    color: var(--c-text);
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: var(--lh);
    overflow-wrap: break-word;
}

h1,
h2 {
    color: var(--c-text-soft);
    line-height: 1.25;
    margin: 0 0 var(--sp-4);
}

h1 {
    font-size: var(--fs-h1);
}

h2 {
    font-size: var(--fs-h2);
    margin-top: var(--sp-5);
}

p {
    margin: 0 0 var(--sp-4);
}

a {
    color: var(--c-accent);
    text-decoration: underline;
}

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

img {
    max-width: 100%;
    height: auto;
}

small,
.small {
    font-size: var(--fs-small);
}

:focus-visible {
    outline: 3px solid var(--c-focus);
    outline-offset: 2px;
}

/* ---------- Layout ---------- */
.page {
    max-width: var(--w-content);
    margin: 0 auto;
    background: var(--c-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-main {
    flex: 1 0 auto;
    padding: var(--sp-5) var(--gutter);
}

.site-main:focus {
    outline: none;
}

.test-banner {
    background: var(--c-accent);
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    padding: var(--sp-2) var(--gutter);
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--gutter);
    border-bottom: 1px solid var(--c-th);
}

.brand {
    display: inline-block;
    color: var(--c-text);
    font-size: 1.375rem;
    font-weight: bold;
    text-decoration: none;
    min-height: var(--tap);
    line-height: var(--tap);
}

.brand:hover {
    color: var(--c-text);
}

.brand .dot {
    color: var(--c-accent);
}

.brand img {
    display: block;
    max-height: 56px;
    width: auto;
}

.header-user {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
}

.user-name {
    display: none;
    min-width: 0;
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.logout-form {
    margin: 0;
}

.site-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--c-th);
    padding: var(--sp-4) var(--gutter);
    font-size: var(--fs-small);
    color: var(--c-text);
}

.site-footer p {
    margin: 0 0 var(--sp-1);
}

.site-footer a {
    display: inline-block;
    padding: var(--sp-2) 0;
}

.skip-link {
    position: absolute;
    left: var(--sp-2);
    top: -100px;
    z-index: 10;
    background: var(--c-bg);
    color: var(--c-accent);
    padding: var(--sp-3) var(--sp-4);
    border: 2px solid var(--c-accent);
}

.skip-link:focus {
    top: var(--sp-2);
}

.narrow {
    max-width: var(--w-narrow);
}

.lead {
    max-width: 40rem;
}

.facts {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-1) var(--sp-4);
    margin: 0 0 var(--sp-4);
}

.facts dt {
    font-weight: bold;
}

.facts dd {
    margin: 0 0 var(--sp-2);
}

.error-id {
    display: inline-block;
    font-family: "DejaVu Sans Mono", Consolas, "Courier New", monospace;
    font-size: 1.25rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    padding: var(--sp-1) var(--sp-3);
    background: var(--c-th);
    border-radius: var(--radius);
    user-select: all;
}

/* ---------- Navigation ---------- */
.site-nav {
    border-bottom: 1px solid var(--c-th);
}

.site-nav ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap);
    padding: var(--sp-2);
    color: var(--c-text);
    text-align: center;
    text-decoration: none;
    border-bottom: 3px solid transparent;
}

.site-nav a:hover {
    color: var(--c-accent);
    background: var(--c-page);
}

.site-nav a[aria-current="page"] {
    font-weight: bold;
    color: var(--c-accent);
    border-bottom-color: var(--c-accent);
}

/* ---------- Formulare ---------- */
.form {
    max-width: var(--w-narrow);
}

.field {
    margin: 0 0 var(--sp-4);
}

.field label,
.field .label {
    display: block;
    font-weight: bold;
    margin-bottom: var(--sp-1);
}

.field-hint {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-small);
    color: var(--c-text);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    display: block;
    width: 100%;
    max-width: var(--w-narrow);
    min-height: var(--tap);
    padding: 10px 12px;
    background: var(--c-input-bg);
    color: var(--c-input-text);
    border: 1px solid var(--c-text-soft);
    border-radius: var(--radius);
    font: inherit;
    font-size: 1rem;
}

input[aria-invalid="true"] {
    border: 2px solid var(--c-accent-dark);
}

.field-error {
    margin: var(--sp-1) 0 0;
    font-weight: bold;
    color: var(--c-err-text);
}

.field-checkbox label {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--tap);
    font-weight: bold;
}

input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    margin: 0;
    accent-color: var(--c-accent);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin: var(--sp-5) 0 var(--sp-4);
}

.actions > form {
    margin: 0;
}

.error-summary {
    max-width: var(--w-narrow);
}

.error-summary ul {
    margin: var(--sp-2) 0 0;
    padding-left: var(--sp-5);
}

/* ---------- Knöpfe ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap);
    padding: 10px var(--sp-5);
    border: 2px solid var(--c-accent);
    border-radius: var(--radius);
    background: var(--c-accent);
    color: #ffffff;
    font: inherit;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.btn:hover {
    background: var(--c-accent-dark);
    border-color: var(--c-accent-dark);
    color: #ffffff;
}

.btn-secondary {
    background: var(--c-bg);
    color: var(--c-accent);
}

.btn-secondary:hover {
    background: var(--c-err-bg);
    color: var(--c-accent-dark);
    border-color: var(--c-accent-dark);
}

.btn-small {
    padding: 6px var(--sp-3);
    font-size: var(--fs-small);
}

.form .btn,
.actions .btn {
    width: 100%;
}

.actions > form .btn {
    width: 100%;
}

.actions > form {
    width: 100%;
}

/* ---------- Meldungen ---------- */
.msg {
    margin: 0 0 var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border-left: 4px solid var(--c-info);
    background: var(--c-info-bg);
    max-width: 40rem;
}

.msg > p:last-child,
.msg > ul:last-child {
    margin-bottom: 0;
}

.msg strong {
    font-weight: bold;
}

.msg-ok {
    background: var(--c-ok-bg);
    border-left-color: var(--c-ok);
}

.msg-error {
    background: var(--c-err-bg);
    border-left-color: var(--c-err);
    color: var(--c-err-text);
}

.msg-error a {
    color: var(--c-err-text);
}

.msg-info {
    background: var(--c-info-bg);
    border-left-color: var(--c-info);
}

/* ---------- Tabellen ---------- */
.table-wrap {
    /* Bezugsrahmen für unsichtbare Hilfstexte (.visually-hidden), sonst ragen sie über die Seite hinaus (B-03) */
    position: relative;
    overflow-x: auto;
    max-width: 100%;
    margin: 0 0 var(--sp-4);
}

.table {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--fs-small);
}

.table caption {
    text-align: left;
    font-weight: bold;
    padding: var(--sp-2) 0;
}

.table th,
.table td {
    padding: var(--sp-2);
    text-align: left;
}

.table th {
    background: var(--c-th);
    font-weight: bold;
}

.table tbody tr:nth-child(even) {
    background: var(--c-row-alt);
}

.table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.table .is-best {
    background: var(--c-best);
}

.table .is-worst {
    background: var(--c-worst);
    color: var(--c-text-on-worst);
}

/* ---------- Hilfsklassen ---------- */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.text-soft {
    color: var(--c-text-soft);
}

.mt-0 {
    margin-top: 0;
}

/* ---------- Spielleitung: Personenliste ---------- */
.subnav ul {
    list-style: none;
    margin: 0 0 var(--sp-4);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2);
}

.subnav a {
    display: block;
    min-height: var(--tap);
    padding: var(--sp-2) var(--sp-3);
    text-align: center;
    text-decoration: none;
    color: var(--c-text);
    background: var(--c-row-alt);
    border-radius: var(--radius);
    font: inherit;
}

.subnav a:hover {
    background: var(--c-input-bg);
}

.subnav a[aria-current="page"] {
    font-weight: bold;
    box-shadow: inset 0 -3px 0 var(--c-accent);
}

.person-list {
    list-style: none;
    margin: 0 0 var(--sp-4);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.person-card {
    border: 1px solid var(--c-th);
    border-radius: var(--radius);
    background: var(--c-bg);
}

.person-card:nth-child(even) {
    background: var(--c-row-alt);
}

/* Die ganze Karte ist der Link zur Bearbeitung. */
.person-card > a {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    min-height: var(--tap);
    padding: var(--sp-3) var(--sp-4);
    color: var(--c-text);
    text-decoration: none;
}

.person-name {
    color: var(--c-accent);
    font-size: var(--fs-h2);
}

.person-card > a:hover .person-name {
    text-decoration: underline;
}

.person-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-2);
}

.person-meta span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius);
    font-size: var(--fs-small);
    font-weight: bold;
    border: 1px solid transparent;
    white-space: nowrap;
}

.badge-ok {
    background: var(--c-ok-bg);
    color: var(--c-ok);
    border-color: var(--c-ok-bar);
}

.badge-off {
    background: var(--c-err-bg);
    color: var(--c-err-text);
    border-color: var(--c-err);
}

.badge-wait {
    background: var(--c-info-bg);
    color: var(--c-text);
    border-color: var(--c-text);
}

.badge-neu {
    background: var(--c-ok-bg);
    color: var(--c-ok);
    border-color: var(--c-ok-bar);
}

.badge-vorhanden {
    background: var(--c-info-bg);
    color: var(--c-text);
    border-color: var(--c-text);
}

.badge-fehlerhaft {
    background: var(--c-err-bg);
    color: var(--c-err-text);
    border-color: var(--c-err);
}

/* Feld und Knopf: am Handy untereinander, ab 600 px nebeneinander. */
.copy-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    max-width: var(--w-narrow);
    margin: 0 0 var(--sp-2);
}

.copy-field input {
    margin: 0;
}

@media (min-width: 600px) {
    .copy-field {
        flex-direction: row;
        align-items: center;
    }

    .copy-field input {
        flex: 1 1 auto;
        min-width: 0;
    }

    .copy-field .btn {
        flex: 0 0 auto;
    }
}

.copy-status {
    display: block;
    min-height: var(--sp-3);
    margin: var(--sp-1) 0 0;
    font-size: var(--fs-small);
    color: var(--c-ok-bar);
}

.textarea-wrap {
    margin: 0 0 var(--sp-4);
}

.textarea-wrap label,
.textarea-wrap .label {
    display: block;
    font-weight: bold;
    margin-bottom: var(--sp-1);
}

.textarea-wrap textarea {
    display: block;
    width: 100%;
    max-width: var(--w-narrow);
    min-height: var(--tap);
    padding: 10px 12px;
    background: var(--c-input-bg);
    color: var(--c-input-text);
    border: 1px solid var(--c-text-soft);
    border-radius: var(--radius);
    font: inherit;
    font-size: 1rem;
}

.fieldset {
    margin: 0 0 var(--sp-4);
    border: 0;
}

.fieldset legend {
    font-weight: bold;
    padding: 0;
    margin-bottom: var(--sp-1);
}

.fieldset .choice {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--tap);
}

.fieldset label {
    font-weight: bold;
    cursor: pointer;
}

.fieldset input {
    width: 1.25rem;
    height: 1.25rem;
}

/* ---------- Spielleitung: Personenliste ---------- */
.person-table {
    display: none;
}

/* ---------- Spielleitung: Import ---------- */
.import-cards {
    list-style: none;
    margin: 0 0 var(--sp-4);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.import-card {
    border: 1px solid var(--c-th);
    border-radius: var(--radius);
    background: var(--c-bg);
    padding: var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.import-card:nth-child(even) {
    background: var(--c-row-alt);
}

.import-table {
    display: none;
}

@media (min-width: 600px) {
    .person-list {
        display: none;
    }

    .person-table {
        display: block;
    }

    .import-cards {
        display: none;
    }

    .import-table {
        display: block;
    }

    .subnav ul {
        display: flex;
        gap: 24px;
        justify-content: flex-start;
    }

    .subnav li {
        flex: 0 0 auto;
    }

    .subnav a {
        padding: 0;
        background: none;
        text-align: left;
        border-radius: 0;
        box-shadow: none;
        border-bottom: 3px solid transparent;
    }

    .subnav a:hover {
        border-bottom-color: var(--c-text-soft);
    }

    .subnav a[aria-current="page"] {
        border-bottom-color: var(--c-accent);
    }
}

/* ---------- Breakpoints ---------- */
@media (min-width: 600px) {
    .user-name {
        display: inline;
    }

    .site-nav ul {
        display: flex;
    }

    .site-nav li {
        flex: 1 1 0;
    }

    .form .btn,
    .actions .btn,
    .actions > form,
    .actions > form .btn {
        width: auto;
    }

    .facts {
        grid-template-columns: max-content 1fr;
    }

    .facts dd {
        margin-bottom: 0;
    }
}

@media (min-width: 1024px) {
    :root {
        --gutter: 24px;
    }

    .site-main {
        padding-top: var(--sp-6);
        padding-bottom: var(--sp-6);
    }
}
/* ========== Block 3: Bausteine (Tippen, Spieltag) ========== */
/* .panel: Rahmen für Informationskästen */
.panel {
    border: 1px solid var(--c-th);
    padding: var(--sp-4);
    background: var(--c-bg);
}

/* .pager: Navigationsbuttons "Zurück/Weiter" */
.pager {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.pager a {
    flex: 1 1 40%;
    min-width: 0;
    min-height: var(--tap);
    padding: var(--sp-2);
    text-align: center;
}

/* .match-list: Liste der Spiele */
.match-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

/* .match: Einzelner Spiel-Karten- oder Grid-Element */
.match {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--sp-2);
    align-items: center;
    padding: var(--sp-3);
    border: 1px solid var(--c-th);
    border-radius: var(--radius);
    background: var(--c-bg);
    list-style: none;
}

.match-list {
    list-style: none;
    margin: 0 0 var(--sp-4);
    padding: 0;
}

.match__head {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    gap: var(--sp-2);
    font-weight: bold;
}

.match__home {
    grid-column: 1;
    text-align: right;
    overflow-wrap: anywhere;
}

.match__sep {
    grid-column: 2;
    text-align: center;
}

.match__away {
    grid-column: 3;
    overflow-wrap: anywhere;
}

.match__tip {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--sp-2);
}

.match__joker,
.match__state {
    grid-column: 1 / -1;
}

.match__state {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-2);
    align-items: center;
}

.match__state .small,
.match__state .field-error {
    flex: 1 1 100%;
}

.panel + .hint,
.hint {
    margin: var(--sp-3) 0;
}

.panel {
    margin-bottom: var(--sp-4);
}

.panel progress {
    width: 100%;
}

.joker-set {
    border: 0;
    margin: var(--sp-3) 0 0;
    padding: 0;
}

.joker-set legend {
    font-weight: bold;
    padding: 0;
}

.joker-choice input {
    width: 1.25rem;
    height: 1.25rem;
}

.pager-choose {
    margin: var(--sp-3) 0;
}

.pager-choose summary {
    min-height: var(--tap);
    display: flex;
    align-items: center;
    cursor: pointer;
}

.tip-details summary {
    min-height: var(--tap);
    padding: var(--sp-2) 0;
    cursor: pointer;
}

.spieltag-grid small {
    display: block;
    font-size: 0.7rem;
}

.cross-table th,
.cross-table td {
    white-space: nowrap;
}

/* .match--gesperrt: Gesperrte Spiele (nur Text, keine Felder) */
.match--gesperrt {
    background: var(--c-page);
}

/* Joker: gewählt 3px Rahmen, Standard 1px gestrichelt */
.match--joker {
    border: 3px solid var(--c-accent);
}

.match--joker-standard {
    border: 1px dashed var(--c-accent);
}

/* .match__teams: Anzeige von Heim/Gast-Teams */
.match__teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--sp-2);
}

/* .score: Eingabefeld für Tore mit Input-Optik */
.score {
    width: 4rem;
    font-weight: bold;
    text-align: center;
    background: var(--c-input-bg);
    color: var(--c-input-text);
    border: 1px solid var(--c-text-soft);
    border-radius: var(--radius);
    font-size: 1.5rem;
    height: 56px;
    padding: 0;
}

/* .joker-choice: Joker-Optionen mit Label und Radio */
.joker-choice {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--tap);
}

/* .spieltag-grid: Grid für Spieltags-Nummern */
.spieltag-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--sp-2);
}

.spieltag-grid a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap);
    min-height: var(--tap);
}

/* .cross-table: Tabellen mit sticky erster Spalte */
.cross-table th:first-child,
.cross-table td:first-child {
    position: sticky;
    left: 0;
    background: var(--c-bg);
}

/* .row-list: Formularliste, Handy Karten, ab 600 px Spalten */
.row-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.row-list > li {
    border: 1px solid var(--c-th);
    padding: var(--sp-3);
    margin-bottom: var(--sp-2);
}

/* Datum und Uhrzeit in Eingabe-Optik */
input[type="date"],
input[type="time"] {
    background: var(--c-input-bg);
    color: var(--c-input-text);
    border: 1px solid var(--c-text-soft);
    border-radius: var(--radius);
    min-height: var(--tap);
    padding: 0 var(--sp-2);
    font: inherit;
}

/* Nur schmal / nur breit (reine Anzeige) */
@media (min-width: 1024px) {
    .only-narrow {
        display: none;
    }
}

@media (max-width: 1023.98px) {
    .only-wide {
        display: none;
    }
}

/* ========== Block 4: Bausteine (Tabellen, Wertung) ========== */
/* .rank-table: Wertungstabelle mit Platz, Namen, Punkten */
.rank-table {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--fs-small);
}

.rank-table th,
.rank-table td {
    padding: var(--sp-2);
    text-align: left;
}

.rank-table .rank-table__place {
    width: 2.5rem;
    text-align: right;
}

.rank-table .rank-table__name {
    overflow-wrap: anywhere;
}

.rank-table .rank-table__points {
    width: 4.5rem;
    text-align: right;
}

/* .rank-list: Liste der Tipper mit Details */
.rank-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rank-list li {
    margin-bottom: var(--sp-3);
}

.rank-list li details {
    display: block;
}

.rank-list li details summary {
    font-weight: bold;
    min-height: var(--tap);
    padding: var(--sp-2);
}

/* .is-me: Eigene Zeile in Tabellen */
.is-me {
    font-weight: bold;
}

.is-me td:first-child,
.is-me th:first-child {
    box-shadow: inset 3px 0 0 var(--c-accent);
}

/* .is-best/.is-worst: Farbmarkierung für beste/schlechteste Spieltage */
.is-best {
    background: var(--c-best);
}

.is-worst {
    background: var(--c-worst);
    color: var(--c-text-on-worst);
}

/* .flag: Kennzeichen für Joker/Außenseiter */
.flag {
    display: inline-block;
    font-weight: bold;
    margin-left: var(--sp-1);
}

/* .view-switch / .round-switch: Umschalter (Ansicht, Hin-/Rückrunde) */
.view-switch,
.round-switch {
    display: flex;
    gap: var(--sp-3);
}

.view-switch a,
.round-switch a {
    flex: 1 1 50%;
    min-width: 0;
    min-height: var(--tap);
    padding: var(--sp-2);
    text-align: center;
}

.view-switch a[aria-current="page"],
.round-switch a[aria-current="page"] {
    border: 2px solid var(--c-accent);
    font-weight: bold;
}

/* .version-card: Karte für Änderungsprotokoll */
.version-card {
    border: 1px solid var(--c-th);
    padding: var(--sp-3);
    margin-bottom: var(--sp-3);
}

/* .cell-tip/.cell-pts: Zellformatierung für Tipp und Punkte */
.cell-tip {
    display: block;
}

.cell-pts {
    font-weight: bold;
}

@media (min-width: 600px) {
    /* Spiel als Zeile: Nr | Anstoß | Heim | Tipp | Gast | Joker | Stand */
    .match {
        grid-template-columns: 4.5rem 11rem 1fr auto 1fr 5rem 12rem;
        gap: var(--sp-3);
    }

    .match__head {
        display: contents;
    }

    .match__home,
    .match__sep,
    .match__away,
    .match__tip,
    .match__joker,
    .match__state {
        grid-column: auto;
    }

    .match__sep {
        display: none;
    }

    .match__state {
        flex-direction: column;
        align-items: flex-start;
    }

    .match-list .match:nth-child(even):not(.match--gesperrt) {
        background: var(--c-row-alt);
    }

    .match__home {
        text-align: right;
    }

    .row-list > li {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
        gap: var(--sp-3);
        align-items: center;
    }
}

@media (min-width: 1024px) {
    .spieltag-grid {
        grid-template-columns: repeat(17, 1fr);
    }
}

/* ========== Block 4, Teil 2: Tabellen, Kreuztabelle, Startseite ========== */
/* Der Name in der Wertungstabelle ist eine Zeilenüberschrift, soll aber nicht wie ein Spaltenkopf aussehen. */
.rank-table tbody th,
.cross-table tbody th {
    background: transparent;
    font-weight: inherit;
}

.rank-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.rank-table .rank-table__points {
    font-variant-numeric: tabular-nums;
}

.rank-table a,
.cross-table a {
    overflow-wrap: anywhere;
}

/* Kreuztabelle: Platz und Name bleiben beim seitlichen Blättern stehen. */
.cross-table--rank th:nth-child(2),
.cross-table--rank td:nth-child(2) {
    position: sticky;
    left: 3rem;
    background: var(--c-bg);
}

.cross-table--rank th:first-child,
.cross-table--rank td:first-child {
    min-width: 3rem;
    z-index: 1;
}

.cross-table--rank th:nth-child(2),
.cross-table--rank td:nth-child(2) {
    z-index: 1;
    min-width: 8rem;
}

.cross-table--rank tbody tr:nth-child(even) th:nth-child(2),
.cross-table--rank tbody tr:nth-child(even) td:first-child {
    background: var(--c-row-alt);
}

.cross-table--rank td {
    white-space: nowrap;
}

.cross-table--rank .is-best {
    background: var(--c-best);
}

.cross-table--rank .is-worst {
    background: var(--c-worst);
    color: var(--c-text-on-worst);
}

.rank-list summary.is-me {
    border-left: 3px solid var(--c-accent);
}

.rank-list .table {
    margin-top: var(--sp-2);
}

.view-switch {
    margin: var(--sp-3) 0;
}

/* Startseite: zwei Kästen, am Handy untereinander. */
.home-boxes {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    margin-top: var(--sp-4);
}

.place-big {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 0 var(--sp-2);
}

@media (min-width: 1024px) {
    .home-boxes {
        grid-template-columns: 1fr 1fr;
    }
}

/* Tabellen in aufklappbaren Bereichen (Handy-Ansichten der Spieltagswertung): lange Vereinsnamen umbrechen,
   notfalls scrollt nur der umschließende .table-wrap, nie die ganze Seite. */
.rank-list details .table td,
.rank-list details .table th,
.tip-details .table td,
.tip-details .table th {
    overflow-wrap: anywhere;
}

/* Kreuztabelle: Spieltagspunkte bleiben am rechten Rand sichtbar, auch wenn die Spiele seitlich scrollen. */
.cross-table--rank th:last-child,
.cross-table--rank td:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
    box-shadow: inset 1px 0 0 var(--c-th);
}

.cross-table--rank th:last-child,
.cross-table--rank td:last-child:not(.is-best):not(.is-worst) {
    background: var(--c-bg);
}

/* Hilfsklassen „nur schmal/nur breit“ gewinnen immer gegen Bausteine mit eigenem display (z. B. .view-switch). */
@media (min-width: 1024px) {
    .only-narrow {
        display: none !important;
    }
}

@media (max-width: 1023.98px) {
    .only-wide {
        display: none !important;
    }
}

/* ========== Block 7: Verlauf, Formkurve, Statistiken, Archiv ========== */
.place-chart,
.form-curve-chart {
    display: block;
    width: 100%;
    max-width: 48rem;
    height: auto;
    margin: var(--sp-3) 0;
}

.chart-wrap {
    width: 100%;
    overflow-x: hidden;
}

.tabellen-nav {
    margin-bottom: var(--sp-3);
    flex-wrap: wrap;
}

.tabellen-nav a {
    flex: 1 1 40%;
}

@media (min-width: 768px) {
    .tabellen-nav a {
        flex: 1 1 0;
    }
}
/* ---------- Block 5: Geld, Kontostand, Abrechnung ---------- */

.money {
    text-align: right;
    white-space: nowrap;
}

.money-neg {
    color: var(--c-accent);
    font-weight: bold;
}

.money-table th.money,
.money-table td.money {
    text-align: right;
    white-space: nowrap;
}

.money-word {
    display: block;
    font-size: var(--fs-small);
    font-weight: normal;
    color: var(--c-text);
}

.summary-list {
    margin: 0 0 var(--sp-4);
}

.summary-list dt {
    font-weight: bold;
    color: var(--c-text-soft);
    margin-top: var(--sp-2);
}

.summary-list dd {
    margin: 0 0 var(--sp-2) var(--sp-3);
}

@media (min-width: 640px) {
    .summary-list {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: var(--sp-2) var(--sp-4);
        align-items: baseline;
    }

    .summary-list dt {
        margin: 0;
    }

    .summary-list dd {
        margin: 0;
    }
}

.checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sp-4);
}

.checklist li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--c-th);
    gap: var(--sp-3);
}

.checklist-text {
    flex: 1 1 auto;
}

.checklist-status {
    flex: 0 0 auto;
}

.confirm-box {
    border: 2px solid var(--c-accent);
    padding: var(--sp-4);
    border-radius: var(--radius);
    margin-bottom: var(--sp-4);
    background: var(--c-bg);
}

.account-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sp-4);
}

.account-list details {
    border: 1px solid var(--c-th);
    border-radius: var(--radius);
    margin-bottom: var(--sp-2);
    padding: var(--sp-2);
    background: var(--c-bg);
}

.account-list summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: var(--tap);
    cursor: pointer;
    font-weight: bold;
}

.account-list summary:focus-visible {
    outline: 2px solid var(--c-focus);
}

.range-block {
    border: 1px solid var(--c-th);
    border-radius: var(--radius);
    padding: var(--sp-3);
    margin-bottom: var(--sp-4);
    background: var(--c-bg);
}

.range-block.is-current {
    border-left: 3px solid var(--c-accent);
}

.rank-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
    min-height: var(--tap);
    flex-wrap: wrap;
}

.form-actions {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-top: var(--sp-4);
}

.form-actions .btn {
    min-height: var(--tap);
}

@media (max-width: 599px) {
    .form-actions .btn {
        width: 100%;
        text-align: center;
    }
}

@media print {
    .site-nav,
    .subnav,
    .round-switch,
    .btn,
    .actions,
    .form-actions,
    form {
        display: none !important;
    }

    details,
    details[open] {
        display: block !important;
    }

    details summary {
        display: none !important;
    }

    .table {
        border-collapse: collapse;
        width: 100%;
    }

    .table tr:nth-child(even) {
        background: transparent !important;
    }

    .table th,
    .table td {
        border-bottom: 1px solid #000;
    }
}


/* Hilfsklassen aus früheren Inline-Styles (CSP style-src 'self' erlaubt keine style-Attribute). */
.u-0c35f7 { margin-left: 1.5rem; margin-top: var(--sp-1); }
.u-0d59a3 { margin: 0; padding: 0; }
.u-0f1003 { font-weight: bold; border-top: 2px solid var(--c-border); }
.u-126e1a { color: var(--c-text); margin-top: var(--sp-2); margin-bottom: 0; }
.u-13cbe0 { text-align: right; }
.u-1b6d8d { cursor: pointer; font-weight: bold; padding: var(--sp-1) 0; }
.u-2186fa { font-weight: bold; display: block; }
.u-225e6d { max-width: 12rem; }
.u-29c793 { display: flex; gap: var(--sp-2); align-items: flex-end; flex-wrap: wrap; }
.u-2bb79c { border-top: 2px solid var(--c-border); font-weight: bold; }
.u-2cc2f8 { display: flex; align-items: center; gap: var(--sp-1); cursor: pointer; }
.u-3073b6 { display: flex; gap: var(--sp-1); }
.u-35d2cd { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.u-38d02f { display: block; font-weight: bold; }
.u-40b0f0 { display: flex; align-items: center; gap: var(--sp-2); }
.u-4261c6 { margin-top: var(--sp-2); display: flex; gap: var(--sp-1); }
.u-43d637 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
.u-4b8619 { margin-top: var(--sp-2); color: var(--c-text); }
.u-4d2edc { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.u-530a30 { margin-top: var(--sp-1); margin-bottom: 0; }
.u-53288b { margin-top: var(--sp-1); }
.u-575fbc { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.u-59725c { margin-bottom: var(--sp-3); }
.u-5bb21d { display: flex; align-items: center; gap: var(--sp-1); cursor: pointer; font-weight: bold; }
.u-5c619c { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.u-5cfff6 { max-width: 24rem; }
.u-5eda18 { margin-top: var(--sp-3); border: 1px solid var(--c-border); padding: var(--sp-2); border-radius: var(--radius); }
.u-60cc94 { color: var(--c-text); margin-bottom: var(--sp-2); }
.u-634dfc { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-1); }
.u-64d429 { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-top: var(--sp-2); }
.u-670200 { overflow-wrap: anywhere;<?= $isMe ? ' font-weight: bold;' : '' ?>; }
.u-7111ce { display: flex; justify-content: space-between; gap: var(--sp-2);<?= $isMe ? ' font-weight: bold;' : '' ?>; }
.u-78d7af { font-weight: bold; }
.u-7b3a56 { max-width: 16rem; }
.u-7f910f { position: absolute; left: -9999px; width: 1px; height: 1px; }
.u-81bcf3 { padding: 0 var(--sp-1); font-weight: bold; }
.u-83f3b2 { background-color: var(--c-accent); }
.u-87dbc3 { margin-top: var(--sp-2); }
.u-8d71be { margin-top: var(--sp-1); margin-left: var(--sp-2); }
.u-92af6b { border-top: 2px solid var(--c-text); }
.u-93c6e1 { white-space: nowrap; }
.u-98c0a0 { margin-bottom: var(--sp-2); padding: var(--sp-1); border-bottom: 1px solid var(--c-border); }
.u-99433b { font-weight: normal; color: var(--c-text); }
.u-9b833f { display: flex; align-items: center; gap: var(--sp-1); }
.u-a4db27 { display: flex; align-items: baseline; gap: var(--sp-1); }
.u-a825f1 { font-size: 1.5rem; font-weight: bold; margin-bottom: var(--sp-1); }
.u-a85eab { color: var(--c-text); width: 7rem; text-align: right; }
.u-b43429 { max-width: 28rem; }
.u-c31228 { margin-top: 0; }
.u-c93711 { margin-top: var(--sp-3); display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.u-ca3227 { color: var(--c-text); margin-top: var(--sp-1); }
.u-d18ca0 { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; }
.u-d370b7 { font-weight: bold; padding: 0 var(--sp-1); }
.u-d4e7f5 { <?= $isMe ? 'font-weight: bold;' : '' ?>; }
.u-d8fbd7 { color: var(--c-text); margin-top: var(--sp-2); }
.u-dcc775 { margin-bottom: var(--sp-2); }
.u-df8fd7 { min-height: 44px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.u-e86fec { margin-top: var(--sp-3); border-top: 1px solid var(--c-border); padding-top: var(--sp-2); }
.u-f00bb8 { cursor: pointer; font-weight: bold; }
.u-f80b65 { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2); }
.u-faf59c { margin-top: var(--sp-3); }
.u-fd40a7 { margin-top: var(--sp-2); margin-bottom: 0; }
.u-fecfda { overflow-wrap: anywhere; }
.u-ff227d { margin: 0; }
.u-ff3d46 { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
.u-ffa984 { color: var(--c-text); }
.u-bcd03b { max-width: 14rem; }
.u-e86e90 { width: 4rem; }
.u-077132 { width: 6rem; text-align: right; }
.u-980a63 { margin-bottom: var(--sp-2); display: flex; gap: var(--sp-2); align-items: flex-end; flex-wrap: wrap; }
.u-f0b24e { margin-bottom: 1.5rem; }
.u-e662b7 { max-width: 8rem; }
.u-cee5c5 { margin-top: 2rem; }
.u-d4f753 { margin-top: 1.5rem; }
.u-5ad39a { text-align: right; width: 6rem; }
.u-785a9a { white-space: pre-wrap; margin-bottom: var(--sp-3); font-size: 1rem; margin-top: var(--sp-5); }
.u-86d7fc { margin-top: var(--sp-3); }
.u-9ec6b1 { max-width: var(--w-narrow); }
.team-logo { display: inline-block; vertical-align: middle; width: 24px; height: 24px; object-fit: contain; }
.team-logo-preview { display: inline-block; vertical-align: middle; width: 40px; height: 40px; object-fit: contain; }
.logo-placeholder { display: inline-block; vertical-align: middle; width: 40px; height: 40px; line-height: 40px; text-align: center; background-color: var(--color-bg-alt, #f0f0f0); color: var(--color-muted, #888); font-size: 0.75rem; border-radius: 4px; }