/*
 * Meldeportal – Styles. Farben und Größen kommen aus shared/nbbv.css (--nbbv-*),
 * damit Meldeportal, Admin und SR-Abrechnung gleich aussehen.
 * Schriftgrößen: Grundschrift aus shared/components.css, sonst nur die Stufen aus shared/nbbv.css
 * (--nbbv-fs-small, -lg, -title; -xs nur für Symbole).
 */

/* Immer Light Mode erzwingen – kein automatisches Dark Mode */
:root {
    color-scheme: light;
    /* Kopf (shared/header.css) so breit wie .input-container mit Rand von .full-width-container,
       damit Logo und Titel bündig mit den orangen Trennlinien stehen */
    --nbbv-header-max: calc(1200px + 2 * 12px);
}

/* ── Grundlayout ──────────────────────────────────────────────────────────── */
body {
    font-family: var(--nbbv-font);
    /* Grundschrift 16/15/14px kommt aus shared/components.css, Stufen aus shared/nbbv.css */
    color: var(--nbbv-text);
    /* Transparent, damit eingebettet (iFrame auf nbbv.de) der Verlauf der Website durchscheint.
       Direkt aufgerufen zeigt der Browser darunter seine weiße Standardfläche. */
    background: transparent;
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center;
    -webkit-text-size-adjust: 100%; /* Verhindert automatische Schriftgrößen-Anpassung bei iOS-Rotation */
    text-size-adjust: 100%;
}

.full-width-container {
    width: 100%;
    max-width: 1600px;
    margin: auto;
    padding: 0 12px;
    text-align: left;
}

p {
    margin: 5px 0;
}
p:first-child { margin-top: 0; }
p:last-child  { margin-bottom: 0; }

form {
    width: 100%;
}

h1 {
    font-size: var(--nbbv-fs-title);
    margin: 16px 8px 12px;
    color: var(--nbbv-navy);
}

h2 {
    font-size: var(--nbbv-fs-lg);
    text-align: center;
    margin: 0 0 12px;
    width: 100%;
    color: var(--nbbv-navy);
}

a {
    color: var(--nbbv-navy);
    font-weight: 600;
}
a:hover {
    color: var(--nbbv-orange);
}

/* ── Kennzahlen (Dashboard, Admin) ───────────────────────────────────────── */
.stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    gap: 8px 24px;
    padding: 14px 20px;
    background: var(--nbbv-soft);
    border-bottom: 3px solid var(--nbbv-orange);
    color: var(--nbbv-navy);
}
.stats strong {
    font-weight: 700;   /* Zahlen nur fett, gleiche Größe wie der Text */
}

.table-stats {
    font-size: var(--nbbv-fs-small);    /* dichte Tabellendaten im Dashboard */
}

/* ── Tabellen ─────────────────────────────────────────────────────────────── */
.table-container {
    width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 5px;
}

th, td {
    border: 1px solid var(--nbbv-line);
    padding: 4px;
    text-align: center;
}

th {
    background: var(--nbbv-soft);
    color: var(--nbbv-navy);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Felder in Tabellenzellen passen sich der Spaltenbreite an */
td > select,
td > input[type="text"] {
    width: 100%;
    min-width: 0;
}
td:has(> button) {
    width: 1%;
    white-space: nowrap;
}
td > button {
    min-width: 0;
    padding: 6px 10px;
}

/* ── Formularfelder ───────────────────────────────────────────────────────── */
label {
    font-weight: 600;
    margin-bottom: 5px;
    text-align: right;
}

/* Eingabefelder, Fehlerzustand und Checkboxen: shared/components.css */

.contact-hint {
    text-align: center;
    margin: -6px 0 12px;
}

/* ── Kontaktformular ─────────────────────────────────────────────────────── */
/* Volle Breite wie Kopf, Trennlinien und Tabelle (einheitliches Raster) */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 32px;
    width: 100%;
}

.contact-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
}

.contact-field label {
    text-align: left;
    margin-bottom: 0;
}

.contact-field input:not([type="checkbox"]),
.contact-field select {
    width: 100%;
}

.contact-field--full {
    grid-column: 1 / -1;
}

/* Tablet: HTML-Reihenfolge (mobile-optimiert) per order in 2 Spalten umsortieren */
@media (min-width: 601px) and (max-width: 900px) {
    .contact-field:nth-child(1) { order: 1; } /* Vorname   → Zeile 1, Spalte 1 */
    .contact-field:nth-child(2) { order: 3; } /* Nachname  → Zeile 2, Spalte 1 */
    .contact-field:nth-child(3) { order: 5; } /* E-Mail    → Zeile 3, Spalte 1 */
    .contact-field:nth-child(4) { order: 2; } /* Verein    → Zeile 1, Spalte 2 */
    .contact-field:nth-child(5) { order: 4; } /* Funktion  → Zeile 2, Spalte 2 */
    .contact-field:nth-child(6) { order: 6; } /* Code      → Zeile 3, Spalte 2 */
    .contact-field--full        { order: 7; } /* Datenschutz → volle Breite     */
}

/* Desktop: 3 Spalten in HTML-Reihenfolge – Person in Zeile 1, Verein/Funktion/Code in Zeile 2 */
@media (min-width: 901px) {
    .contact-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Checkbox für Datenschutz */
.checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 5px;
    margin-bottom: 10px;
}
.checkbox-container input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 2px;  /* optisch mit erster Textzeile ausrichten */
}
.checkbox-container label {
    font-weight: 400;
    text-align: left;
    margin-bottom: 0;
    flex: 1;
}

/* ── Buttons: Grundform und Farben in shared/components.css ─────────────── */

/* Dateiauswahl im gleichen Stil wie die Buttons */
input[type="file"] {
    width: 320px;
    max-width: 100%;
    font-size: var(--nbbv-fs-small);
    color: var(--nbbv-muted);
}
input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 9px 14px;
    border: 1px solid var(--nbbv-input-line);
    border-radius: var(--nbbv-radius);
    background: #fff;
    color: var(--nbbv-navy);
    font: 600 1rem var(--nbbv-font);
    cursor: pointer;
}
input[type="file"]::file-selector-button:hover {
    border-color: var(--nbbv-navy);
}

.button-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 10px;
    gap: 10px;
}

.inline-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
    color: var(--nbbv-text);
    cursor: pointer;
    user-select: none;
}

/* Aufklapp-Bereiche und Hinweisboxen nutzen hier die volle Inhaltsbreite
   (components.css begrenzt sie für die schmalere SR-Abrechnung auf 900px) */
.input-container > .collapsible-section,
.input-container > .info-box,
.input-container .collapsible-content .info-box {
    max-width: none;
}

.input-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-width: 1200px;
    margin: auto;
}

/* ── Hinweis-Boxen (.info-box in shared/components.css) ───────────────────── */

/* Meldefristen-Banner im NBBV-Orange-Ton */
.deadline-banner {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto 8px;
    background: var(--nbbv-note-bg);
    border: 1px solid var(--nbbv-note-line);
    border-left: 4px solid var(--nbbv-orange);
    border-radius: var(--nbbv-radius);
    padding: 10px 16px;
    color: var(--nbbv-text);
}

.deadline-title {
    font-weight: 700;
    font-size: var(--nbbv-fs-small);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--nbbv-note-text);
    margin-bottom: 6px;
}

.deadline-grid {
    columns: 2;
    column-gap: 48px;
    column-rule: 1px solid var(--nbbv-note-line);
    margin-bottom: 8px;
}

.deadline-entry {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    break-inside: avoid; /* Eintrag nie über Spaltenwechsel aufteilen */
    margin-bottom: 3px;
}

.deadline-label {
    font-weight: 600;
}

.deadline-date {
    white-space: nowrap;
    font-weight: 600;
    color: var(--nbbv-note-text);
    flex-shrink: 0;
}

.deadline-contact {
    font-size: var(--nbbv-fs-small);
    border-top: 1px solid var(--nbbv-note-line);
    padding-top: 6px;
    color: var(--nbbv-muted);
}

/* Status-Pill, z. B. abgelaufene Meldefrist oder Bestätigung im Dashboard */
.deadline-expired-badge,
.status-pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--nbbv-radius-pill);
    font-size: var(--nbbv-fs-small);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    vertical-align: middle;
    white-space: nowrap;
}
.deadline-expired-badge,
.status-pill.is-error {
    background: var(--nbbv-danger-bg);
    color: var(--nbbv-danger);
}
.status-pill.is-ok {
    background: var(--nbbv-ok-bg);
    color: var(--nbbv-ok);
}

/* ── Hauptteil-Abschnitte (Kontaktperson, Mannschaftsmeldungen) ──────────── */
.form-section {
    width: 100%;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 2px solid var(--nbbv-orange);
}

.resend-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.resend-form label {
    min-width: 120px;
    text-align: left;
    margin: 0;
}
.resend-form input,
.resend-form select,
.resend-form .combo {
    min-width: 260px;
    flex: 1;
}

/* ── Status- und Login-Seiten ───────────────────────────────────────────── */
.centered-page {
    padding: 40px 20px;
    text-align: center;
}

.login-box {
    background: #fff;
    padding: 30px 40px;
    border: 1px solid var(--nbbv-line);
    border-top: 3px solid var(--nbbv-orange);
    border-radius: var(--nbbv-radius);
    box-shadow: var(--nbbv-shadow);
    display: inline-block;
    width: 100%;
    max-width: 480px;
    text-align: center;
}

.login-box input[type="password"] {
    width: 100%;
    margin-top: 15px;
    margin-bottom: 12px;
}

/* Buttons und Action-Links innerhalb der Login-Box bekommen Abstand */
.login-box button,
.login-box .btn {
    margin-top: 10px;
}

.login-box .error {
    color: var(--nbbv-danger);
    font-size: var(--nbbv-fs-small);
}

/* Heading-Variante in der Login-Box (z.B. Lösch-Bestätigung mit rotem Titel) */
.login-box .heading-danger {
    color: var(--nbbv-danger);
}

/* Text und Listen auf Statusseiten (z. B. Löschen mit abgelaufener Meldefrist) */
.status-text {
    margin: 10px 0;
    line-height: 1.5;
}
.status-liste {
    display: inline-block;
    text-align: left;
    margin: 8px 0 12px;
    padding-left: 20px;
}

/* Status-Page Action-Buttons (z.B. "Löschen / Abbrechen" Paar) */
.status-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 16px;
}

/* ── Admin-Panel ─────────────────────────────────────────────────────────── */
.upload-container {
    background: var(--nbbv-soft);
    border: 1px solid var(--nbbv-line);
    border-radius: var(--nbbv-radius);
    padding: 18px;
}
.upload-container + .upload-container {
    margin-top: 20px;
}
.upload-container > strong {
    color: var(--nbbv-navy);
    font-size: var(--nbbv-fs-lg);
}
.upload-container p {
    margin-top: 10px;
}

/* Direkte Button-Kinder bekommen Abstand zum vorherigen Text (vermeidet "Kleben") */
.upload-container > button,
.upload-container > a.btn,
.upload-container > .inline-checkbox {
    margin-top: 12px;
}

/* Gefahr-Variante (z.B. Datenbank-Reset) */
.upload-container.is-danger {
    border: 2px solid var(--nbbv-danger);
    background: #fff;
}
.upload-container.is-danger > strong {
    color: var(--nbbv-danger);
}

/* Admin: schmalerer Inhalt mit Rand, Boxen einer Reihe gleich hoch */
.admin-container {
    max-width: 1200px;
    padding: 0 24px 40px;
}
.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}
.admin-grid > .upload-container {
    margin: 0;
}

/* Admin: Status der Dienste, eine Karte je Dienst mit farbiger Kante */
.dienst-status {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.dienst-karte {
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--nbbv-line);
    border-left: 4px solid var(--nbbv-line);
    border-radius: var(--nbbv-radius);
}
.dienst-karte.is-ok { border-left-color: var(--nbbv-ok); }
.dienst-karte.is-warn { border-left-color: var(--nbbv-orange); }
.dienst-karte.is-error { border-left-color: var(--nbbv-danger); }
.dienst-kopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.dienst-kopf a { color: var(--nbbv-navy); }
.dienst-karte ul {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    color: var(--nbbv-muted);
    font-size: var(--nbbv-fs-small);
}
.dienst-status-fuss {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0 4px;
}
.status-pill.is-warn {
    background: var(--nbbv-note-bg);
    color: var(--nbbv-note-text);
}

/* Admin: Tabellen in Karten (Meldefristen, System), linksbündig und klein */
.admin-tabelle {
    background: #fff;
    font-size: var(--nbbv-fs-small);
    margin-top: 10px;
}
.admin-tabelle th,
.admin-tabelle td {
    padding: 4px 8px;
    text-align: left;
    vertical-align: top;
}
.admin-tabelle th { position: static; }
.admin-tabelle td { overflow-wrap: break-word; }
/* Lange Dateinamen ohne Leerzeichen (var/) dürfen überall umbrechen */
.admin-tabelle .pfad { overflow-wrap: anywhere; }
/* Knöpfe in Tabellen: Schrift nicht noch einmal verkleinern (die Tabelle ist schon klein) */
.admin-tabelle td > .btn-small { font-size: inherit; }
.admin-container .btn-small { white-space: nowrap; }
@media (min-width: 601px) { .admin-tabelle td:has(> .btn-small) { white-space: nowrap; } }
/* Die Regel für die Meldungstabelle am Handy (min-width 600px, nowrap) gilt nicht im Admin */
.admin-container table { min-width: 0; }
.admin-container th,
.admin-container td { white-space: normal; }
.table-scroll { overflow-x: auto; }
.admin-details { margin-top: 12px; }
.admin-details summary { cursor: pointer; color: var(--nbbv-navy); font-weight: 600; }
.system-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.system-grid > .upload-container > p { font-size: var(--nbbv-fs-small); }

/* Admin: Wartungstext */
.wartung-label { display: block; margin-top: 14px; }
#wartungsText { width: 100%; margin-top: 4px; font: inherit; }

/* Admin: neuer Vereins-Schlüssel (nur einmal sichtbar) */
.key-neu {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--nbbv-note-bg);
    border: 1px solid var(--nbbv-note-line);
    border-radius: var(--nbbv-radius);
}
.key-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.key-zeile code { font-family: var(--nbbv-font-mono); word-break: break-all; }

/* Admin: SR-Abrechnung je Kalenderwoche, Säulen für PDFs (dunkel) und Vermerke (hell) */
.sr-verlauf {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 6px;
    margin-top: 16px;
    max-width: 640px;
}
.sr-woche { display: flex; flex-direction: column; align-items: center; font-size: var(--nbbv-fs-small); }
.sr-balken {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    width: 100%;
    height: 80px;
    background: #fff;
    border: 1px solid var(--nbbv-line);
    border-radius: var(--nbbv-radius);
    overflow: hidden;
}
.sr-balken .is-pdf { background: var(--nbbv-navy); }
.sr-balken .is-vermerk { background: var(--nbbv-orange); }
.sr-zahl { color: var(--nbbv-navy); font-weight: 600; }
.sr-kw { color: var(--nbbv-muted); }

/* Logout-Area oben rechts */
.logout-area {
    text-align: right;
    margin-bottom: 10px;
}
.logout-area .btn-secondary {
    font-size: var(--nbbv-fs-small);
    padding: 5px 12px;
    min-width: 0;
}

/* Status-Text unter Aktions-Buttons */
.action-status {
    margin-top: 8px;
    font-size: var(--nbbv-fs-small);
    color: var(--nbbv-muted);
}
.action-status.is-success { color: var(--nbbv-ok); }
.action-status.is-error   { color: var(--nbbv-danger); }
.action-status.is-bold    { font-weight: 700; font-size: inherit; }

/* Roter Warntext inline */
.text-warning {
    color: var(--nbbv-danger);
    font-weight: 700;
}

/* Nummerierte Schritte (z.B. Anleitung) */
.numbered-steps {
    margin: 6px 0 6px 20px;
    padding: 0;
    line-height: 1.8;
}

/* Grauer "deaktiviert"-Hinweis */
.text-muted {
    color: var(--nbbv-muted-2);
}

/* Kleine Form-Labels (kompakt) */
.field-label-small {
    display: block;
    font-size: var(--nbbv-fs-small);
    font-weight: 600;
    text-align: left;
    margin-bottom: 3px;
}

/* Download-Button (im Vereinslisten-Block) */
.btn-download {
    margin-top: 10px;
}

/* Deploy-Info-Banner (Admin) */
.deploy-info {
    margin-top: 20px;
    padding: 8px 12px;
    background: var(--nbbv-soft);
    border: 1px solid var(--nbbv-line);
    border-radius: var(--nbbv-radius);
    font-size: var(--nbbv-fs-small);
    color: var(--nbbv-muted);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}
.deploy-info code {
    background: var(--nbbv-soft-2);
    padding: 2px 6px;
    border-radius: var(--nbbv-radius);
    font-family: var(--nbbv-font-mono);
}
.deploy-info__time {
    color: var(--nbbv-muted-2);
    margin-left: auto;
}
.deploy-info a {
    text-decoration: none;
}
.deploy-info a:hover { text-decoration: underline; }

/* Branch-Label: farbiger Indikator je Branch (dev grün, main rot) */
.deploy-branch {
    padding: 2px 8px;
    border-radius: var(--nbbv-radius);
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--nbbv-fs-small);
    letter-spacing: 0.05em;
}
.deploy-branch--dev  { background: var(--nbbv-ok-bg); color: var(--nbbv-ok); }
.deploy-branch--main { background: var(--nbbv-danger-bg); color: var(--nbbv-danger); }

/* SMTP-Test-Ergebnisse */
.smtp-results {
    margin-top: 12px;
}
.smtp-result {
    padding: 7px 12px;
    border-radius: var(--nbbv-radius);
    font-size: var(--nbbv-fs-small);
    margin-bottom: 6px;
}
.smtp-result:last-child { margin-bottom: 0; }
.smtp-result.is-ok    { background: var(--nbbv-ok-bg); color: var(--nbbv-ok); }
.smtp-result.is-error { background: var(--nbbv-danger-bg); color: var(--nbbv-danger); }
.smtp-debug {
    margin: 6px 0 0;
    font-size: var(--nbbv-fs-small);
    white-space: pre-wrap;
    color: var(--nbbv-text);
    background: #fff;
    padding: 8px;
    border-radius: var(--nbbv-radius);
    max-height: 150px;
    overflow-y: auto;
}

/* CSV-Upload-Form (stacked file input + button) */
.upload-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: auto;
}

/* E-Mail-Update-Formular (Verein + neue Mail nebeneinander) */
.email-update-form {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
    margin-top: 10px;
}
.email-update-field {
    flex: 1 1 220px;
}
.email-update-field input,
.email-update-field select {
    width: 100%;
}

/* Abschnitts-Überschriften im Admin (Allgemein / Meldeportal / SR-Abrechnung) */
.admin-section-title {
    text-align: left;
    margin: 32px 0 12px;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--nbbv-orange);
    color: var(--nbbv-navy);
}

/* Buttons nebeneinander, bei Platzmangel umbrechen */
.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
}
.button-row .btn-download {
    margin-top: 0;
}
/* Links als Knopf haben in components.css höchstens 240px und brechen dann um; im Admin einzeilig wie <button> */
.admin-container a.btn-primary,
.admin-container a.btn-secondary,
.admin-container a.btn-danger {
    max-width: none;
}

/* Kleine Buttons (.btn-small, rot umrandet .btn-small.btn-danger): shared/components.css */

/* SR-Protokoll: Kennzahlen */
.sr-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 16px;
}
.sr-stat {
    background: #fff;
    border: 1px solid var(--nbbv-line);
    border-radius: var(--nbbv-radius);
    padding: 10px 12px;
}
.sr-stat span {
    display: block;
    font-size: var(--nbbv-fs-small);
    color: var(--nbbv-muted);
}
.sr-stat strong {
    font-size: var(--nbbv-fs-title);
    color: var(--nbbv-navy);
}
.sr-stats-tables {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin-top: 14px;
    align-items: start;
}
.sr-stats-tables table {
    background: #fff;
    font-size: var(--nbbv-fs-small);
}
.sr-stats-tables td:first-child {
    text-align: left;
}
.sr-stats-tables td:last-child {
    width: 70px;
    text-align: right;
}

/* SR-Sätze-Editor */
.saetze-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 14px;
}
.saetze-toolbar .field-label-small {
    margin: 0;
}
.saetze-toolbar select {
    min-width: 260px;
}
.saetze-form {
    margin-top: 14px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--nbbv-line);
    border-radius: var(--nbbv-radius);
}
.saetze-felder {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    align-items: end;
}
.saetze-feld input {
    width: 100%;
}
.saetze-feld.is-wide {
    grid-column: 1 / -1;
}
.saetze-sub {
    display: block;
    margin: 20px 0 8px;
    color: var(--nbbv-navy);
}
.saetze-gruppe {
    margin-bottom: 14px;
    padding: 10px;
    background: var(--nbbv-soft);
    border: 1px solid var(--nbbv-line);
    border-radius: var(--nbbv-radius);
}
.saetze-gruppe-kopf {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.saetze-gruppe-kopf .field-label-small {
    margin: 0;
}
.saetze-gruppe-kopf input {
    flex: 1 1 200px;
    max-width: 320px;
}
.saetze-tabelle {
    max-width: 640px;
    margin: 8px 0;
}
.saetze-tabelle {
    width: auto;
}
.saetze-tabelle th {
    position: static;
    font-size: var(--nbbv-fs-small);
    text-align: left;
    background: none;
    border: 0;
    padding: 0 6px 2px 0;
}
.saetze-tabelle td {
    border: 0;
    padding: 2px 6px 2px 0;
    text-align: left;
}
.saetze-tabelle td:last-child {
    width: 1%;
}
.saetze-tabelle td:first-child input {
    width: 320px;
    max-width: 100%;
}
.saetze-form .saetze-tabelle input.saetze-betrag {
    width: 110px;
    text-align: right;   /* Beträge rechtsbündig wie in der SR-Abrechnung */
}
/* Am Handy: Tabelle so breit wie der Kasten, Spielklasse nimmt den Rest */
@media (max-width: 600px) {
    .saetze-tabelle { width: 100%; }
    .saetze-tabelle td:first-child input { width: 100%; }
    .saetze-form .saetze-tabelle input.saetze-betrag { width: 80px; }
    .saetze-gruppe-kopf input { max-width: none; }
    .saetze-tabelle td > .btn-small { font-size: inherit; }   /* Zellen sind am Handy schon klein */
}

/* ── Responsive Design ───────────────────────────────────────────────────────

   Breakpoints:
   - ≤ 900px  : Tablet (iPad)
   - ≤ 600px  : Smartphone (iPhone)
*/

/* Tablet (≤ 900px) */
@media (max-width: 900px) {
    h1 {
        margin: 12px;
    }

    .deadline-banner {
        padding: 8px 12px;
    }

    table {
        font-size: var(--nbbv-fs-small);    /* Tabelle etwas kompakter als Fließtext */
    }

    th, td {
        padding: 4px 3px;
    }

    .button-container {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

}

/* Smartphone (≤ 600px) */
@media (max-width: 600px) {
    h1 {
        margin: 10px;
    }

    .full-width-container,
    .admin-container {
        padding: 0 8px;
    }

    .deadline-banner {
        padding: 8px 10px;
    }

    /* Meldefristenbanner: zweispaltig → einspaltig (linke Spalte zuerst, dann rechte) */
    .deadline-grid {
        columns: 1;
    }

    /* Kontaktformular: zweispaltig → einspaltig (order zurücksetzen → DOM-Reihenfolge) */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 0;
    }

    .contact-field:nth-child(n) { order: 0; }
    .contact-field--full        { order: 0; }

    /* Meldungstabelle: horizontal scrollbar */
    .form-section {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 600px;
    }

    th, td {
        padding: 3px 2px;
        white-space: nowrap;
    }

    .button-container {
        flex-wrap: wrap;
        justify-content: stretch;
        gap: 8px;
    }

    .button-container button,
    .button-container label.inline-checkbox {
        width: 100%;
        max-width: 100%;
        justify-content: center;
    }

    .inline-checkbox {
        justify-content: flex-start;
    }

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

    .resend-form label {
        min-width: unset;
    }

    .resend-form input,
    .resend-form select {
        min-width: unset;
        width: 100%;
    }

    .checkbox-container {
        text-align: left;
    }

    .login-box {
        padding: 16px;
        width: 90%;
    }
}

/* ── Meldungstabelle als Karten (Smartphone ≤ 600px) ─────────────────────────
   Jede Meldung wird eine Karte, die Spaltenüberschriften stehen als Label über
   den Feldern (data-label, per JS gesetzt). Zum Zurücknehmen genügt es, diesen
   Block und die labelCells()-Aufrufe zu entfernen. */
@media (max-width: 600px) {
    .form-section:has(.meldungen-tabelle) {
        overflow-x: visible;
    }

    .meldungen-tabelle,
    .meldungen-tabelle tbody {
        display: block;
        min-width: 0;
        counter-reset: mannschaft;
    }

    .meldungen-tabelle thead {
        display: none;
    }

    .meldungen-tabelle tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 12px;
        margin-bottom: 10px;
        padding: 10px 12px 12px;
        background: var(--nbbv-soft);
        border: 1px solid var(--nbbv-line);
        border-left: 4px solid var(--nbbv-navy);
        border-radius: var(--nbbv-radius);
        counter-increment: mannschaft;
    }

    .meldungen-tabelle tr::before {
        content: "Mannschaft " counter(mannschaft);
        grid-column: 1 / -1;
        font-weight: 700;
        color: var(--nbbv-navy);
    }

    .meldungen-tabelle td {
        display: flex;
        flex-direction: column;
        gap: 2px;
        width: auto;
        padding: 0;
        border: 0;
        text-align: left;
        white-space: normal;
    }

    .meldungen-tabelle td::before {
        content: attr(data-label);
        font-size: var(--nbbv-fs-small);
        font-weight: 600;
        color: var(--nbbv-navy);
    }

    /* Wettbewerb, Kommentar und Aktion über die volle Breite */
    .meldungen-tabelle td:nth-child(3),
    .meldungen-tabelle td:nth-child(7),
    .meldungen-tabelle td:last-child {
        grid-column: 1 / -1;
    }

    .meldungen-tabelle td:last-child::before {
        content: none;
    }

    .meldungen-tabelle td > button {
        width: 100%;
        max-width: none;
        padding: 8px 10px;
    }

    /* Entfernen als Umriss-Button, damit er die Karte nicht dominiert */
    .meldungen-tabelle td > button.btn-danger {
        background: #fff;
        border-color: var(--nbbv-danger);
        color: var(--nbbv-danger);
    }
}