/* ---------- Fonts (selbst gehostet, siehe public/fonts/) ---------- */
@font-face {
    font-family: 'Lato';
    src: url('/fonts/lato-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lato';
    src: url('/fonts/lato-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/montserrat-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/montserrat-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/montserrat-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---------- Farben & Grundwerte (angelehnt an tvbazenheid.ch) ---------- */
:root {
    --farbe-primaer: #6B8F00;
    --farbe-primaer-hell: #84AD00;
    --farbe-primaer-dunkel: #55720A;
    --farbe-akzent-dunkel: #0B2621;
    --farbe-akzent-dunkel-hell: #163832;
    --farbe-text: #1f2328;
    --farbe-text-schwach: #5b6470;
    --farbe-hintergrund: #F7F6F1;
    --farbe-flaeche: #ffffff;
    --farbe-rand: #e2e2df;
    --farbe-erfolg: #2f7d3c;
    --farbe-fehler: #b3261e;
    --farbe-zebra: #F7F6F1;
    --radius: 6px;
    --radius-gross: 12px;
    --schrift-titel: 'Montserrat', system-ui, -apple-system, "Segoe UI", sans-serif;
    --schrift-text: 'Lato', system-ui, -apple-system, "Segoe UI", sans-serif;
    --sidebar-breite: 250px;
    --topbar-hoehe: 56px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--schrift-text);
    color: var(--farbe-text);
    background: var(--farbe-hintergrund);
    line-height: 1.5;
}

h1, h2, h3, h4 {
    font-family: var(--schrift-titel);
    font-weight: 600;
}

a {
    color: var(--farbe-primaer);
}

.icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ---------- App-Grundgerüst: Topbar + Sidebar + Inhalt ---------- */
.app {
    min-height: 100vh;
    display: flex;
}

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-hoehe);
    background: var(--farbe-akzent-dunkel);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    z-index: 30;
}

.topbar-links {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.topbar-titel {
    font-family: var(--schrift-titel);
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-titel small {
    display: block;
    font-family: var(--schrift-text);
    font-weight: 400;
    font-size: 0.7rem;
    opacity: 0.75;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.hamburger-button {
    background: transparent;
    border: none;
    color: #fff;
    padding: 0.4rem;
    border-radius: var(--radius);
    cursor: pointer;
    display: none;
    align-items: center;
}

.hamburger-button:hover {
    background: rgba(255, 255, 255, 0.12);
}

.topbar-benutzer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
}

.topbar-benutzer .button-schlicht {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.sidebar {
    position: fixed;
    top: var(--topbar-hoehe);
    left: 0;
    bottom: 0;
    width: var(--sidebar-breite);
    background: var(--farbe-akzent-dunkel);
    color: #eef2ee;
    overflow-y: auto;
    padding: 1rem 0 2rem;
    z-index: 25;
}

.sidebar-gruppe {
    margin-bottom: 1.25rem;
}

.sidebar-gruppentitel {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(238, 242, 238, 0.55);
    padding: 0 1.1rem;
    margin-bottom: 0.4rem;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 1.1rem;
    color: #eef2ee;
    text-decoration: none;
    font-size: 0.92rem;
    border-left: 3px solid transparent;
}

.sidebar-link:hover {
    background: rgba(255, 255, 255, 0.08);
}

.sidebar-link.aktiv {
    background: rgba(132, 173, 0, 0.18);
    border-left-color: var(--farbe-primaer-hell);
    font-weight: 600;
}

.sidebar-untergruppe {
    margin-left: 1rem;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar-untergruppe .sidebar-link {
    padding-top: 0.42rem;
    padding-bottom: 0.42rem;
    font-size: 0.85rem;
}

.inhalt-wrapper {
    margin-left: var(--sidebar-breite);
    margin-top: var(--topbar-hoehe);
    width: calc(100% - var(--sidebar-breite));
    min-height: calc(100vh - var(--topbar-hoehe));
}

.inhalt {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.75rem;
    overflow-x: auto;
}

.sidebar-hintergrund {
    display: none;
}

.fuss {
    text-align: center;
    padding: 1.5rem;
    color: var(--farbe-text-schwach);
    font-size: 0.85rem;
}

h2 {
    margin-top: 0;
}

.hinweis {
    color: var(--farbe-text-schwach);
}

/* ---------- Meldungen ---------- */
.meldung {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

.meldung-erfolg {
    background: #e6f4ea;
    color: var(--farbe-erfolg);
}

.meldung-fehler {
    background: #fce8e6;
    color: var(--farbe-fehler);
}

.schnell-bereits-erfasst:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Der generische Button-Selektor (siehe oben) gewinnt hier trotz korrekter Spezifität
   gegen [hidden] – daher hoch-spezifisch erzwungen, nur für diesen einen Button. */
#button-schnell-ueberschreiben[hidden] {
    display: none !important;
}

/* ---------- Statische Tabellen (Ranglisten etc.) ---------- */
.tabelle {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    background: var(--farbe-flaeche);
    border-radius: var(--radius-gross);
    overflow: hidden;
    border: 1px solid var(--farbe-rand);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.tabelle th,
.tabelle td {
    text-align: left;
    padding: 0.75rem 1.1rem;
    font-size: 0.92rem;
    overflow-wrap: break-word;
}

.tabelle th {
    background: var(--farbe-hintergrund);
    color: var(--farbe-text-schwach);
    font-weight: 600;
    font-family: var(--schrift-titel);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--farbe-rand);
    white-space: nowrap;
}

.tabelle tbody tr:nth-child(even) {
    background: var(--farbe-zebra);
}

.tabelle tbody tr {
    transition: background-color 120ms ease;
    border-top: 1px solid var(--farbe-rand);
}

.tabelle tbody tr:first-child {
    border-top: none;
}

.tabelle tbody tr:hover {
    background: #f2f7e6;
}

.tabelle tr.zeile-aktiv {
    background: #f2f7e6;
}

.zeile-versteckt,
.abschnitt-versteckt {
    display: none;
}

.rangliste-suche {
    margin-bottom: 1rem;
}

.tabelle-kompakt th,
.tabelle-kompakt td {
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
}

.tabelle-kompakt input,
.tabelle-kompakt select {
    width: 100%;
    padding: 0.2rem 0.3rem;
    border: 1px solid var(--farbe-rand);
    border-radius: 4px;
}

.zeile-gruppe td {
    background: #fafaf7;
    padding-top: 1rem;
}

/* ---------- Formulare ---------- */
.formular {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: end;
    background: var(--farbe-flaeche);
    padding: 1rem;
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    margin-top: 0.75rem;
}

.formular label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9rem;
    color: var(--farbe-text-schwach);
}

/* Kurzer Zusatzhinweis unter einem Feld (z.B. automatisch vergebene Startnummer) */
.formular label .feld-hinweis {
    font-size: 0.78rem;
}

/* Versteckte Labels (z.B. Familienname bei Einzelperson) müssen display:none behalten –
   ein ID-Selektor ist nötig, damit dies unabhängig von der Spezifität anderer .formular
   label-Regeln (z.B. Geschlecht-/Auswahl-Buttons) immer gewinnt. */
#feld-reg-familienname-label[hidden] {
    display: none;
}

.formular input,
.formular select {
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-family: inherit;
}

.formular input:focus,
.formular select:focus {
    outline: 2px solid var(--farbe-primaer-hell);
    outline-offset: 1px;
}

.formular input.feld-ungueltig,
.formular select.feld-ungueltig {
    border-color: var(--farbe-fehler);
}

.formular input.feld-ungueltig:focus,
.formular select.feld-ungueltig:focus {
    outline-color: var(--farbe-fehler);
}

.inline-form {
    display: inline;
    margin-left: 0.5rem;
}

.formular-schmal {
    max-width: 420px;
}

.formular-block {
    flex-direction: column;
    align-items: stretch;
    max-width: 420px;
}

.formular-block label {
    width: 100%;
}

.formular-aktionen {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.formular-inline {
    margin-top: 0;
}

.formular-zeile {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.checkbox-label {
    flex-direction: row !important;
    align-items: center;
    gap: 0.4rem !important;
}

.feld-fehler {
    color: var(--farbe-fehler);
    font-size: 0.8rem;
}

.feld-gruppe {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.feld-gruppe-label {
    font-size: 0.9rem;
    color: var(--farbe-text-schwach);
}

.geschlecht-auswahl {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.geschlecht-auswahl .geschlecht-option {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--farbe-text);
    background: var(--farbe-flaeche);
}

.geschlecht-auswahl .geschlecht-option input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.geschlecht-auswahl .geschlecht-option:has(input:checked) {
    border-color: var(--farbe-primaer);
    background: var(--farbe-primaer);
    color: #fff;
}

.geschlecht-auswahl .geschlecht-option:has(input:focus-visible) {
    outline: 2px solid var(--farbe-primaer-hell);
    outline-offset: 1px;
}

.geschlecht-auswahl.feld-ungueltig .geschlecht-option {
    border-color: var(--farbe-fehler);
}

.geschlecht-auswahl .feld-fehler {
    flex-basis: 100%;
}

/* ---------- Buttons ---------- */
button,
.formular button {
    background: var(--farbe-primaer);
    color: #fff;
    border: none;
    padding: 0.55rem 1rem;
    border-radius: var(--radius);
    font-size: 0.95rem;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

button:hover {
    background: var(--farbe-primaer-dunkel);
}

.button-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--farbe-primaer);
    color: #fff;
    text-decoration: none;
    padding: 0.55rem 1rem;
    border-radius: var(--radius);
    font-size: 0.95rem;
}

.button-link:hover {
    background: var(--farbe-primaer-dunkel);
}

.button-link.button-link-sekundaer {
    background: transparent;
    color: var(--farbe-text);
    border: 1px solid var(--farbe-rand);
}

.button-link.button-link-sekundaer:hover {
    background: var(--farbe-hintergrund);
    color: var(--farbe-text);
}

.button-schlicht {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #fff;
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
}

.button-schlicht:hover {
    background: rgba(255, 255, 255, 0.15);
}

button.button-sekundaer {
    background: transparent;
    color: var(--farbe-text);
    border: 1px solid var(--farbe-rand);
}

button.button-sekundaer:hover {
    background: var(--farbe-hintergrund);
    color: var(--farbe-text);
}

button.button-gefahr {
    background: var(--farbe-fehler);
}

button.button-gefahr:hover {
    background: #8f1e18;
}

button.button-symbol {
    background: transparent;
    color: var(--farbe-text-schwach);
    padding: 0.3rem;
    border-radius: var(--radius);
}

button.button-symbol:hover {
    background: var(--farbe-hintergrund);
    color: var(--farbe-text);
}

/* ---------- Modals (natives <dialog>) ---------- */
dialog.modal {
    border: none;
    border-radius: var(--radius);
    padding: 0;
    width: min(480px, 92vw);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

dialog.modal::backdrop {
    background: rgba(11, 38, 33, 0.55);
}

.modal-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--farbe-rand);
}

.modal-kopf h3 {
    margin: 0;
    font-size: 1.05rem;
}

.modal-inhalt {
    padding: 1.25rem;
}

.modal-inhalt .formular {
    box-shadow: none;
    padding: 0;
    margin-top: 0;
    flex-direction: column;
    align-items: stretch;
}

.modal-inhalt .formular label {
    width: 100%;
}

.modal-inhalt .formular.formular-zeile {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: end;
}

.modal-inhalt .formular.formular-zeile label,
.modal-inhalt .formular.formular-zeile .familie-such-feld {
    width: auto;
    min-width: 0;
}

.modal-inhalt .formular.formular-zeile button {
    flex-shrink: 0;
}

.modal-aktionen {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

/* Bestaetigung nach dem Erfassen: die vergebene Startnummer soll ueber den Tisch hinweg
   ablesbar sein, damit sie direkt notiert bzw. zugerufen werden kann. */
.startnummer-anzeige {
    text-align: center;
}

.startnummer-person {
    margin: 0;
    font-family: var(--schrift-titel);
    font-size: 1.1rem;
    font-weight: 600;
}

.startnummer-label {
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--farbe-text-schwach);
}

.startnummer-gross {
    margin: 0.1rem 0 1rem;
    font-family: var(--schrift-titel);
    font-size: 5.5rem;
    font-weight: 700;
    line-height: 1.05;
    color: var(--farbe-primaer-dunkel);
}

.startnummer-anzeige .modal-aktionen {
    justify-content: center;
}

/* ---------- Tabellen-Toolbar (Tabulator-Wrapper) ---------- */
.tabelle-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.tabelle-toolbar-links {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}

.tabelle-suche {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius);
    padding: 0.4rem 0.6rem;
    color: var(--farbe-text-schwach);
}

.tabelle-suche input {
    border: none;
    outline: none;
    font-size: 0.9rem;
    font-family: inherit;
    min-width: 180px;
}

.tabelle-gruppieren {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.85rem;
    background: var(--farbe-flaeche);
}

.datentabelle-container {
    background: var(--farbe-flaeche);
    border-radius: var(--radius-gross);
    border: 1px solid var(--farbe-rand);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.tabelle-zelle-aktionen {
    display: flex;
    gap: 0.3rem;
}

.mitglieder-liste {
    margin-bottom: 1rem;
    max-height: 300px;
    overflow-y: auto;
}

.mitglied-zeile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--farbe-rand);
    gap: 1rem;
}

.mitglied-zeile form {
    margin: 0;
}

.mitglied-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.9rem;
    color: var(--farbe-text-schwach);
}

.mitglied-info strong {
    color: var(--farbe-text);
    font-size: 1rem;
}

.familie-such-feld {
    flex: 1 1 auto;
    position: relative;
}

.familie-zeit-label {
    flex: 1 1 auto;
}

.suche-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.25rem;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    max-height: 220px;
    overflow-y: auto;
    z-index: 20;
}

.suche-ergebnis {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.95rem;
}

.suche-ergebnis:hover {
    background: var(--farbe-primaer);
    color: #fff;
}

/* ---------- Tabulator-Theme-Anpassung an das Design-System ----------
   Ersetzt das altbackene Standard-Grid-Theme (graue Fläche, Zellrahmen auf
   jeder Seite, 4px-Padding) durch das App-Design: randlose Zeilen, dezentes
   Zebra-Muster statt Gitternetz, grosszügigerer Zeilenabstand. */
.tabulator {
    font-family: var(--schrift-text);
    font-size: 0.9rem;
    color: var(--farbe-text);
}

.tabulator .tabulator-header {
    background: var(--farbe-hintergrund);
    border-bottom: 1px solid var(--farbe-rand);
    color: var(--farbe-text-schwach);
    font-family: var(--schrift-titel);
}

.tabulator .tabulator-header .tabulator-col,
.tabulator .tabulator-header .tabulator-col-content {
    background: transparent;
    border-right: none;
}

.tabulator .tabulator-header .tabulator-col {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.15rem 0;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-title {
    padding: 0.65rem 0.2rem;
}

.tabulator .tabulator-col-sorter {
    color: var(--farbe-rand);
}

.tabulator .tabulator-col-sorter .tabulator-arrow {
    border-bottom-color: currentColor;
    opacity: 0.6;
}

.tabulator .tabulator-col.tabulator-sortable:hover .tabulator-col-sorter,
.tabulator .tabulator-col.tabulator-col-sorter-element[aria-sort="ascending"] .tabulator-col-sorter,
.tabulator .tabulator-col.tabulator-col-sorter-element[aria-sort="descending"] .tabulator-col-sorter {
    color: var(--farbe-primaer);
}

.tabulator-row {
    background: var(--farbe-flaeche);
    border: none;
    transition: background-color 120ms ease;
}

.tabulator-row.tabulator-row-even {
    background: var(--farbe-zebra);
}

.tabulator-row:hover {
    background: #f2f7e6;
}

.tabulator-row.tabulator-row-klickbar:hover {
    background: #eaf1da;
}

.tabulator-row .tabulator-cell {
    padding: 0.65rem 1rem;
    border-right: none;
    font-size: 0.88rem;
}

.tabulator-row-klickbar {
    cursor: pointer;
}

.tabulator .tabulator-footer {
    background: var(--farbe-hintergrund);
    border-top: 1px solid var(--farbe-rand);
    color: var(--farbe-text-schwach);
}

.tabulator-row .tabulator-responsive-collapse {
    border-top: 1px solid var(--farbe-rand);
    padding: 0.5rem 1rem;
    background: var(--farbe-hintergrund);
}

.tabulator-row .tabulator-responsive-collapse table td {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}

.tabulator-responsive-collapse-toggle {
    background: var(--farbe-hintergrund);
    color: var(--farbe-text-schwach);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tabulator-responsive-collapse-toggle:hover {
    background: var(--farbe-rand);
    color: var(--farbe-text);
}

/* Gruppierungs-Kopfzeilen (z.B. Teilnehmer nach Status/Wohnort gruppiert) */
.tabulator-row.tabulator-group {
    background: var(--farbe-hintergrund);
    border-bottom: 1px solid var(--farbe-rand);
    font-family: var(--schrift-titel);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--farbe-text);
    padding: 0.5rem 1rem;
}

/* Gruppen-Kopf mit Aktions-Button (z.B. "Freigeben" pro Familie in den Registrierungen) */
.tabelle-gruppenkopf-mit-aktion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 1rem;
}

.button-tabelle-zeile {
    padding: 0.3rem 0.75rem;
    font-size: 0.82rem;
}

.tabulator-row.tabulator-group:hover {
    background: var(--farbe-rand);
}

.tabulator-row.tabulator-group .tabulator-group-count {
    color: var(--farbe-text-schwach);
    font-weight: 400;
}

.tabulator .tabulator-placeholder {
    color: var(--farbe-text-schwach);
}

.tabulator .tabulator-placeholder .tabulator-placeholder-contents {
    padding: 2.5rem 1rem;
    font-size: 0.95rem;
}

/* ---------- Sonstige bestehende Komponenten ---------- */
.linkliste {
    padding-left: 1.2rem;
    line-height: 1.9;
}

.sprungnavigation {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0.75rem 0;
    font-size: 0.9rem;
}

.sprungnavigation a {
    color: var(--farbe-primaer-dunkel);
    text-decoration: none;
}

.sprungnavigation a.aktiv {
    font-weight: 700;
    text-decoration: underline;
}

.sprungnavigation .inaktiv {
    color: #c7c7c3;
}

.text-warnung {
    color: var(--farbe-fehler);
}

.login-seite {
    max-width: 360px;
    margin: 4rem auto;
    padding: 2rem;
    background: var(--farbe-flaeche);
    border-radius: var(--radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.kachel-reihe {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.kachel {
    background: var(--farbe-flaeche);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    padding: 1rem 1.25rem;
    min-width: 140px;
    flex: 1 1 140px;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    border-top: 3px solid var(--farbe-primaer);
}

.kachel-zahl {
    font-family: var(--schrift-titel);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--farbe-akzent-dunkel);
}

.kachel-label {
    font-size: 0.8rem;
    color: var(--farbe-text-schwach);
}

/* ---------- Dashboard-Diagramme ---------- */
.diagramm-reihe {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    align-items: stretch;
}

.diagramm-karte {
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-gross);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 1.25rem;
    flex: 1 1 280px;
}

.diagramm-karte-breit {
    flex-basis: 100%;
}

.diagramm-titel {
    font-family: var(--schrift-titel);
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0 0 0.85rem;
    color: var(--farbe-text);
}

/* ---------- Übersichtsseiten mit Kacheln (Ranglisten, Teilnehmerlisten) ---------- */
.uebersicht-kacheln {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.uebersicht-kachel {
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-gross);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 1.25rem;
    flex: 1 1 280px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.uebersicht-kachel-titel {
    font-family: var(--schrift-titel);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--farbe-text);
}

.uebersicht-kachel-beschreibung {
    color: var(--farbe-text-schwach);
    font-size: 0.85rem;
    flex-grow: 1;
}

.uebersicht-kachel-aktionen {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.balken-legende {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: var(--farbe-text-schwach);
    margin-bottom: 0.5rem;
}

.balken-legende-punkt {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 0.35rem;
}

.balken-legende-punkt.ist-primaer {
    background: var(--farbe-primaer);
}

.balken-legende-punkt.ist-neutral {
    background: var(--farbe-text-schwach);
}

.balken-legende-punkt.ist-kritisch {
    background: var(--farbe-fehler);
}

.balken-teile {
    display: flex;
    height: 26px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--farbe-hintergrund);
    gap: 2px;
}

.balken-segment {
    height: 100%;
}

.balken-segment.ist-primaer {
    background: var(--farbe-primaer);
}

.balken-segment.ist-neutral {
    background: var(--farbe-text-schwach);
}

.balken-segment.ist-kritisch {
    background: var(--farbe-fehler);
}

.balkendiagramm-zeile {
    display: grid;
    grid-template-columns: 13rem 1fr 2.5rem;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
    font-size: 0.83rem;
}

.balkendiagramm-label {
    color: var(--farbe-text-schwach);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.balkendiagramm-spur {
    background: var(--farbe-hintergrund);
    border-radius: 4px;
    height: 12px;
    display: flex;
    overflow: hidden;
    gap: 2px;
}

.balkendiagramm-balken {
    background: var(--farbe-primaer);
    height: 100%;
    min-width: 2px;
}

.balkendiagramm-balken.ist-primaer {
    background: var(--farbe-primaer);
}

.balkendiagramm-balken.ist-neutral {
    background: var(--farbe-text-schwach);
}

.balkendiagramm-wert {
    text-align: right;
    color: var(--farbe-text);
    font-weight: 600;
}

/* ---------- Responsive: Tablet (<1024px) & Mobile (<768px) ---------- */
@media (max-width: 1023px) {
    .hamburger-button {
        display: inline-flex;
    }

    .sidebar {
        display: none;
        width: min(var(--sidebar-breite), 82vw);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
    }

    body.menu-offen .sidebar {
        display: block;
    }

    body.menu-offen .sidebar-hintergrund {
        display: block;
        position: fixed;
        inset: var(--topbar-hoehe) 0 0 0;
        background: rgba(11, 38, 33, 0.45);
        z-index: 20;
    }

    .inhalt-wrapper {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .inhalt {
        padding: 1rem;
    }

    .topbar {
        padding: 0 0.75rem;
    }

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

    .formular-zeile {
        flex-direction: column;
    }

    .kachel {
        min-width: 45%;
    }

    .tabelle-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .balkendiagramm-zeile {
        grid-template-columns: 1fr;
        gap: 0.2rem;
        margin-bottom: 0.7rem;
    }

    .balkendiagramm-wert {
        text-align: left;
    }
}

/* ---------- Personen-Tabellen auf schmalen Bildschirmen als Karten ----------
   Bei ~375px Breite bleiben in einer klassischen Tabellenzeile nur noch
   abgeschnittene Namen uebrig. Diese Regeln brechen die Zeilen deshalb um:
   Name/Vorname als Titel, Geschlecht und Jahrgang als Meta-Angabe daneben,
   die von Tabulator eingeklappten Restfelder klein darunter. Die Spalten-
   breiten setzt Tabulator per Inline-Style, deshalb hier die !important.
   Bewusst auf .tabelle-personen beschraenkt (Teilnehmer + Registrierungen),
   damit Tabellen mit Drag&Drop- oder Aktionsspalten unveraendert bleiben. */
@media (max-width: 767px) {
    .tabelle-personen .tabulator-header {
        display: none;
    }

    .tabelle-personen .tabulator-tableholder {
        overflow-x: hidden;
    }

    /* Tabulator dimensioniert die Tabelle nach der Summe der Spaltenbreiten und
       schiebt damit Gruppenkopf und Aktions-Button ueber den Rand hinaus. In der
       Kartenansicht bestimmen die Karten selbst die Breite. */
    .tabelle-personen .tabulator-table {
        width: 100% !important;
        min-width: 0 !important;
    }

    .tabelle-personen .tabulator-row {
        width: 100% !important;
        min-width: 0 !important;
    }

    .tabelle-personen .tabelle-gruppenkopf-mit-aktion {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .tabelle-personen .tabulator-row {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 0.5rem;
        padding: 0.6rem 0.9rem;
        border-bottom: 1px solid var(--farbe-rand);
    }

    .tabelle-personen .tabulator-row .tabulator-cell {
        width: auto !important;
        height: auto !important;
        padding: 0;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    /* Ohne Kopfzeile haben die Spalten-Trenngriffe keine Funktion mehr */
    .tabelle-personen .tabulator-col-resize-handle {
        display: none;
    }

    .tabelle-personen .tabulator-cell[tabulator-field="name"],
    .tabelle-personen .tabulator-cell[tabulator-field="nachname"],
    .tabelle-personen .tabulator-cell[tabulator-field="vorname"] {
        font-family: var(--schrift-titel);
        font-size: 1rem;
        font-weight: 600;
    }

    /* Beschriftungen, weil die Kopfzeile als Erklaerung wegfaellt */
    .tabelle-personen .tabulator-cell[tabulator-field="geschlecht"],
    .tabelle-personen .tabulator-cell[tabulator-field="jahrgang"],
    .tabelle-personen .tabulator-cell[tabulator-field="startnummer"] {
        color: var(--farbe-text-schwach);
        font-size: 0.82rem;
    }

    .tabelle-personen .tabulator-cell[tabulator-field="jahrgang"]::before {
        content: 'JG ';
    }

    .tabelle-personen .tabulator-cell[tabulator-field="startnummer"]::before {
        content: 'Nr. ';
    }

    /* Eingeklappte Restfelder: volle Breite unter der Karte, kompakt */
    .tabelle-personen .tabulator-row .tabulator-responsive-collapse {
        flex-basis: 100%;
        min-width: 0;
        margin-top: 0.45rem;
        padding: 0.4rem 0 0;
        border-top: 1px dashed var(--farbe-rand);
        background: transparent;
        /* Tabulator setzt fuer Tabellenzellen nowrap - hier soll umbrochen werden */
        white-space: normal;
    }

    /* Die Restfelder als fortlaufende Zeile statt als Label/Wert-Tabelle, damit
       eine Karte drei statt sieben Zeilen hoch ist. Tabulator erzeugt hier ein
       festes <table>-Markup, das laesst sich nur ueber display umbiegen. */
    .tabelle-personen .tabulator-row .tabulator-responsive-collapse table,
    .tabelle-personen .tabulator-row .tabulator-responsive-collapse tbody {
        display: block;
    }

    .tabelle-personen .tabulator-row .tabulator-responsive-collapse tr {
        display: inline;
    }

    .tabelle-personen .tabulator-row .tabulator-responsive-collapse tr:not(:last-child)::after {
        content: ' · ';
        color: var(--farbe-rand);
    }

    .tabelle-personen .tabulator-row .tabulator-responsive-collapse td {
        display: inline;
        padding: 0;
        font-size: 0.8rem;
        color: var(--farbe-text-schwach);
    }

    /* Im Markup steht kein Leerzeichen zwischen Beschriftung und Wert */
    .tabelle-personen .tabulator-row .tabulator-responsive-collapse td + td::before {
        content: '\00a0';
    }

    /* Aktions-Button ("Freigeben" bei den Registrierungen) rechts abgesetzt */
    .tabelle-personen .tabulator-cell[tabulator-field="anmeldung_id"] {
        margin-left: auto;
    }
}

/* ---------- Öffentliche Anmeldemaske (kein Login, eigenes schlankes Layout) ---------- */
.oeffentlich-wrapper {
    max-width: 640px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.oeffentlich-kopf {
    text-align: center;
    margin-bottom: 1.5rem;
}

.oeffentlich-logos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.oeffentlich-logo {
    max-width: 160px;
    max-height: 100px;
    height: auto;
}

.oeffentlich-kopf h1 {
    margin: 0;
    color: var(--farbe-akzent-dunkel);
}

.oeffentlich-fuss {
    text-align: center;
    color: var(--farbe-text-schwach);
    font-size: 0.85rem;
    margin-top: 2rem;
}

/* Formular-Box soll die gleiche Breite wie die Logo-Zeile einnehmen (nicht schmaler,
   linksbündig mit viel Leerraum daneben). */
.oeffentlich-inhalt .formular-block {
    max-width: none;
}

/* Mehr Abstand zwischen den einzelnen Feldern in der öffentlichen Anmeldemaske. Die
   Felder stecken in Wrapper-Divs (zum Ein-/Ausblenden Einzelperson/Familie), die selbst
   keine Flex-Kinder von .formular sind – daher hier zusätzlich als eigene Flex-Spalte.
   :not([hidden]) ist nötig, da die ID-Selektoren sonst spezifischer sind als die
   [hidden]-Regel des Browsers und das Ein-/Ausblenden aushebeln würden. */
.oeffentlich-inhalt .formular {
    gap: 1.25rem;
}

.oeffentlich-inhalt #bereich-einzel:not([hidden]),
.oeffentlich-inhalt #bereich-familie:not([hidden]),
.oeffentlich-inhalt #anmeldung-mitglied-formular:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.anmeldung-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

.anmeldung-mitglied-formular {
    border-top: 1px solid var(--farbe-rand);
    margin-top: 1rem;
    padding-top: 1rem;
}

.anmeldung-mitglied-formular h3 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    color: var(--farbe-text-schwach);
}

/* ---------- Registrierungen (interne Freigabe-Ansicht) ---------- */
.anmeldung-karte {
    background: var(--farbe-flaeche);
    padding: 1rem;
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    margin-top: 0.75rem;
}

.anmeldung-karte-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.anmeldung-karte .modal-aktionen form {
    margin: 0;
}

/* ---------- Zeiten-Schnellerfassung ---------- */
.protokoll-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.protokoll-liste li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--farbe-rand);
    gap: 1rem;
}

.meldung-fehler-text {
    color: var(--farbe-fehler);
}

kbd {
    background: var(--farbe-hintergrund);
    border: 1px solid var(--farbe-rand);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    font-size: 0.85em;
    font-family: monospace;
}

/* ---------- CSS-Toggle-Switch (z.B. DNF in der Final-Schnellerfassung) ---------- */
.toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}

.toggle-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.toggle-switch-track {
    position: relative;
    width: 46px;
    height: 26px;
    flex-shrink: 0;
    background: var(--farbe-rand);
    border-radius: 999px;
    transition: background-color 150ms ease;
}

.toggle-switch-track::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: transform 150ms ease;
}

.toggle-switch input:checked + .toggle-switch-track {
    background: var(--farbe-fehler);
}

.toggle-switch input:checked + .toggle-switch-track::before {
    transform: translateX(20px);
}

.toggle-switch input:focus-visible + .toggle-switch-track {
    outline: 2px solid var(--farbe-primaer-hell);
    outline-offset: 2px;
}

.toggle-switch-text {
    font-size: 0.9rem;
    color: var(--farbe-text-schwach);
    font-weight: 600;
}

/* ---------- Zeiten-Schnellerfassung Final ---------- */
.schnell-final-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.schnell-final-nav h3 {
    margin: 0;
    text-align: center;
}

select.schnell-final-kategorie-auswahl {
    background: transparent;
    color: var(--farbe-text);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius);
    padding: 0.55rem 1rem;
    font-size: 0.95rem;
    font-family: inherit;
    font-weight: 700;
    text-align: center;
    text-align-last: center;
    flex: 1 1 auto;
    max-width: 20rem;
}

.schnell-final-zeile {
    justify-content: flex-start;
    align-items: center;
    margin-top: 0.75rem;
}

.schnell-final-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 220px;
}

.schnell-final-info strong {
    font-size: 1.05rem;
}

.feld-final-zeit2.ist-gueltig {
    background: #e6f4e8;
    border-color: var(--farbe-erfolg);
}