/*
 * Ergaenzungen zum uebernommenen Design-System des Tickettools.
 * Verwendet ausschliesslich die Variablen aus design-tokens.css, damit
 * helles und dunkles Design ohne Sonderfaelle funktionieren.
 */

/* ---------------------------------------------------------------- Anmeldung */

.gast-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    padding: var(--space-6);
    background: var(--color-bg);
}

.gast-karte {
    width: 100%;
    max-width: 26rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--space-8);
    text-align: center;
}

.gast-marke {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-6);
}

/* Ueber die Hoehe begrenzt, nicht ueber die Breite: die mitgelieferte Marke
   ist quadratisch, ein eigenes Logo mit Schriftzug dagegen breit. Beides
   soll ohne Sonderregel passen. */
.gast-logo {
    max-height: 5rem;
    max-width: 100%;
    width: auto;
    height: auto;
}

.gast-titel {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    line-height: var(--text-2xl-line);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.gast-text {
    font-size: var(--text-sm);
    line-height: var(--text-sm-line);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
}

.gast-hinweis {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-xs);
    line-height: var(--text-xs-line);
    color: var(--color-text-muted);
}

.gast-fuss {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-align: center;
}

.ms-anmelden {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.ms-anmelden:hover {
    background: var(--color-accent-subtle);
    border-color: var(--color-accent);
}

.ms-anmelden:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ Sidebar */

.brand-lockup {
    gap: var(--space-3);
}

.brand-name {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    line-height: var(--text-sm-line);
    font-weight: 600;
    color: var(--color-text-primary);
    hyphens: auto;
}

.sidebar-link.is-aktiv {
    background: var(--color-accent-subtle);
    color: var(--color-accent);
    font-weight: 600;
}

.user-rolle {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.user-name {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.abmelden-button {
    width: 100%;
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out);
}

.abmelden-button:hover {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-border);
    color: var(--color-danger-text);
}

/* ----------------------------------------------------------------- Kacheln */

.kachel-reihe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.kachel {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.kachel-wert {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    line-height: var(--text-3xl-line);
    font-weight: 700;
    color: var(--color-text-primary);
    /* Ziffern gleich breit, damit die Werte in der Reihe nicht springen. */
    font-variant-numeric: tabular-nums;
}

.kachel-label {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.hinweis-karte {
    padding: var(--space-6);
    background: var(--color-info-bg);
    border: 1px solid var(--color-info-border);
    border-radius: var(--radius-lg);
    color: var(--color-info-text);
}

.hinweis-karte h2 {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.hinweis-karte p {
    font-size: var(--text-sm);
    line-height: var(--text-sm-line);
}

/* ------------------------------------------------- Formularelemente */

.feld {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    line-height: var(--text-sm-line);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-primary);
}

.feld-suche {
    flex: 1 1 18rem;
    min-width: 12rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: var(--text-sm-line);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
    /* .btn wird auch auf <a> verwendet (z.B. "Zurücksetzen"). */
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.btn-primary {
    background: var(--color-accent);
    color: var(--color-accent-ink);
}

.btn-primary:hover {
    background: var(--color-accent-hover);
}

.btn-still {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

.btn-still:hover {
    background: var(--color-surface-raised);
}

.btn:focus-visible,
.feld:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.alert-warning {
    border-color: var(--color-warning-border);
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

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

/* ------------------------------------------------------ Seitenkopf */

.seiten-kopf {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.treffer-zahl {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.filterleiste,
.neu-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.neu-zeile {
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.neu-zeile-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
}

.leer-hinweis {
    padding: var(--space-8);
    text-align: center;
    color: var(--color-text-muted);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
}

/* ------------------------------------------------------------ Grid */

.grid-huelle {
    overflow: auto;
    max-height: calc(100vh - 20rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

/* Festes Layout: die Spaltenbreiten stehen im Tabellenkopf und gelten fuer
   alle Zeilen. Ohne das wuerde ein langer Wert eine Spalte aufblaehen und
   das Raster beim Scrollen springen lassen. */
.datengitter {
    table-layout: fixed;
    width: max-content;
    min-width: 100%;
    font-size: var(--text-sm);
    line-height: var(--text-sm-line);
}

.datengitter th,
.datengitter td {
    padding: 0;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
}

.datengitter thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    white-space: nowrap;
}

.spalten-sortierung {
    color: inherit;
    text-decoration: none;
}

.spalten-sortierung:hover {
    color: var(--color-accent);
}

.spalten-sortierung.ist-aktiv {
    color: var(--color-accent);
}

/* Dezente Zebrastreifen: kraeftiger wuerden sie bei 19 Spalten unruhig
   wirken und mit der Markierung der aktiven Zelle konkurrieren. */
.datengitter tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--color-border) 14%, transparent);
}

.datengitter tbody tr:hover {
    background: var(--color-accent-subtle);
}

/* Ausgetretene bleiben lesbar, treten aber zurueck. */
.datengitter tbody tr.ist-ausgetreten .zelle-text {
    color: var(--color-text-muted);
    font-style: italic;
}

.datengitter tbody tr.ist-neu {
    animation: neuHervorheben 2.5s var(--ease-out);
}

@keyframes neuHervorheben {
    from { background: var(--color-success-bg); }
    to { background: transparent; }
}

.zelle {
    position: relative;
}

.zelle-text {
    display: block;
    padding: var(--space-2) var(--space-3);
    min-height: 2.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zelle-berechnet {
    background: color-mix(in srgb, var(--color-border) 22%, transparent);
}

.zelle-berechnet .zelle-text {
    color: var(--color-text-muted);
}

.spalte-aktion {
    width: 3rem;
    text-align: center;
}

.btn-zeile-loeschen {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.btn-zeile-loeschen:hover {
    color: var(--color-danger-text);
    background: var(--color-danger-bg);
}

.grid-hilfe {
    margin-top: var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.grid-hilfe kbd {
    padding: 0.05rem 0.35rem;
    font-family: inherit;
    font-size: 0.9em;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-raised);
}


/* --------------------------------------------------- Import und Karten */

.kopf-aktionen {
    display: flex;
    gap: var(--space-2);
    margin-left: auto;
}

.karte {
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.karte-titel {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
}

.karte-text {
    max-width: 60ch;
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    line-height: var(--text-sm-line);
    color: var(--color-text-secondary);
}

.import-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: flex-start;
    max-width: 34rem;
}

.feld-gruppe {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
}

.feld-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.feld-hinweis {
    font-size: var(--text-xs);
    line-height: var(--text-xs-line);
    color: var(--color-text-muted);
}

.abschnitt-titel {
    margin: var(--space-8) 0 var(--space-3);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-primary);
}

.aktionsleiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.pflicht-stern {
    color: var(--color-danger);
    font-weight: 700;
}

.zuordnung-auswahl {
    width: 100%;
    margin: var(--space-1) var(--space-2);
}

.beispiel-werte {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.fehler-liste {
    max-height: 24rem;
}

/* ------------------------------------------------------ Detailansicht */

.zelle-link {
    color: var(--color-accent);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.zelle-link:hover {
    text-decoration: underline;
}

.kachel-reihe-schmal {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 14rem));
    margin-bottom: var(--space-6);
}

.kachel-wert-klein {
    font-size: var(--text-lg);
    line-height: var(--text-lg-line);
}

.merkmal {
    display: inline-block;
    padding: 0.1rem var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
    background: var(--color-accent-subtle);
    color: var(--color-accent);
}

.merkmal-still {
    background: color-mix(in srgb, var(--color-border) 40%, transparent);
    color: var(--color-text-muted);
}

/* Volle Breite. Die Obergrenze verhindert nur, dass Beschriftung und Feld
   auf sehr breiten Bildschirmen weit auseinanderlaufen. */
.detail-form {
    max-width: 108rem;
}

.detail-block {
    margin-bottom: var(--space-6);
    padding: var(--space-4) var(--space-6) var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.detail-block legend {
    padding: 0 var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Bei Lesezugriff sind die Felder gesperrt — das muss sichtbar sein. */
.detail-block:disabled .feld,
.detail-block[disabled] .feld {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Felder in einer umbrechenden Reihe statt in festen Spalten.
   Vorher war es ein Raster mit fester Spaltenzahl. Dabei ging keine Zeile
   auf: "Ort" blieb allein stehen, waehrend daneben Platz frei war. Ein
   Raster laesst sich nur ausbalancieren, solange die Feldzahl je Block zur
   Spaltenzahl passt — bei fuenf Feldern in vier Spalten hilft kein Wert.

   Umbrechende Felder loesen das von selbst: sie fuellen die Zeile bis zum
   Rand und der Rest rutscht in die naechste, wo er wieder aufgeht. Die
   Grundbreite sagt, wie viel Platz ein Feld braucht — eine Hausnummer
   weniger als eine Strasse.

   Nebenbei entfaellt damit die Unterscheidung zwischen Detailseite und
   Dialog: die Felder richten sich nach dem Platz, den sie tatsaechlich
   vorfinden, ohne dass die Fensterbreite abgefragt werden muss. */
.detail-raster {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-4) var(--space-6);
}

/* Die Grundbreite ist der Wunsch, die Mindestbreite die Grenze. Dazwischen
   schrumpfen die Felder, statt umzubrechen — sonst genuegt ein Dialog, der
   ein paar Pixel schmaler ist, und ein Feld steht wieder allein. */
.feld-gruppe { flex: 1 1 14rem; min-width: 9rem; }
.feld-gruppe-schmal { flex: 1 1 7rem; min-width: 5.5rem; }
.feld-gruppe-breit { flex: 2 1 20rem; min-width: 12rem; }
.feld-gruppe-weit { flex: 3 1 26rem; min-width: 14rem; }

/* Ohne das traegt das Eingabefeld seine eigene Wunschbreite bei und
   verhindert das Schrumpfen des Feldes darum herum. */
.detail-raster .feld {
    width: 100%;
    min-width: 0;
}

/* Schmal: alles untereinander. Auch die kurzen Felder — eine halbe Zeile
   fuer die Hausnummer ist auf dem Telefon nicht bedienbar. */
@media (max-width: 30rem) {
    .feld-gruppe,
    .feld-gruppe-schmal,
    .feld-gruppe-breit,
    .feld-gruppe-weit {
        flex: 1 1 100%;
    }
}

.feld-fehler {
    font-size: var(--text-xs);
    color: var(--color-danger-text);
}

.delegierten-liste {
    list-style: none;
    max-width: 40rem;
    margin-bottom: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.delegierten-liste li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
}

.delegierten-liste li + li {
    border-top: 1px solid var(--color-border);
}

.delegierten-liste a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-primary);
    text-decoration: none;
    font-weight: 600;
}

.delegierten-liste a:hover {
    color: var(--color-accent);
}

.delegierten-mail {
    margin-left: auto;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* -------------------------------------------------------- Historie */

.historie {
    list-style: none;
    max-width: 62rem;
    counter-reset: none;
}

.historie-eintrag {
    padding: var(--space-3) var(--space-4);
    border-left: 2px solid var(--color-border);
    margin-left: var(--space-2);
}

.historie-eintrag:first-child {
    border-left-color: var(--color-accent);
}

.historie-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-3);
}

.historie-aktion {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.historie-wer {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.historie-felder {
    list-style: none;
    margin-top: var(--space-2);
}

.historie-felder li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    font-size: var(--text-sm);
}

.historie-feld {
    min-width: 10rem;
    color: var(--color-text-secondary);
}

.historie-alt {
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.historie-pfeil {
    color: var(--color-text-muted);
}

.historie-neu {
    color: var(--color-text-primary);
    font-weight: 600;
}

/* --------------------------------------------- Filter und Listenaktionen */

.filterleiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.filterleiste .feld {
    min-width: 9rem;
}

/* Beschriftete Filter (Protokoll): Label ueber dem Feld. .feld-gruppe ist
   fuer Formularraster gedacht und dort 100 % breit — in einer Leiste wuerde
   damit jedes Feld eine eigene Zeile beanspruchen. */
.filterleiste .feld-gruppe {
    gap: var(--space-1);
    width: auto;
    flex: 0 1 12rem;
}

.filterleiste .feld-gruppe-breit {
    flex: 1 1 20rem;
}

.filterleiste .feld-label {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-text-muted);
}

/* ----------------------------------------- Gespeicherte Filteransichten */

.ansichten-leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.ansichten-titel {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ansicht-band {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
}

.ansicht-band.is-aktiv {
    border-color: var(--color-primary);
}

.ansicht-name {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    color: inherit;
    text-decoration: none;
}

.ansicht-name:hover {
    text-decoration: underline;
}


.ansicht-weg {
    padding: 0 var(--space-2) 0 0;
    border: 0;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    line-height: 1;
}

.ansicht-weg:hover {
    color: var(--color-danger-text, inherit);
}

/* Steht rechts und weicht bei schmalem Fenster in die naechste Zeile. */
.ansicht-speichern {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.feld-schmal {
    min-width: 14rem;
}

.filter-aktionen {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    margin-left: auto;
}

/* Zweite Zeile in einer Tabellenzelle — E-Mail unter dem Namen, geaenderte
   Felder unter dem Datensatz. */
.zelle-neben {
    display: block;
    padding: 0 var(--space-3) var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Vorgaenge, bei denen Daten die Anwendung verlassen. Bewusst nur ein
   Streifen am Zeilenanfang statt flaechiger Farbe: an einem normalen
   Bueroalltag ist das die Mehrheit der Zeilen, und eine durchgehend
   eingefaerbte Seite hebt nichts mehr hervor. */
.zeile-hervor > .zelle:first-child {
    box-shadow: inset 3px 0 0 var(--color-warning-border);
}

.merkmal-warnung {
    border-color: var(--color-warning-border);
    color: var(--color-warning-text);
}

.zeilen-aktionen {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1);
    padding: 0 var(--space-2);
}

.btn-zeile {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
    color: var(--color-accent);
    background: var(--color-accent-subtle);
    border-radius: var(--radius-md);
    text-decoration: none;
}

.btn-zeile:hover {
    background: var(--color-accent);
    color: var(--color-accent-ink);
}

/* Die Aktionsspalte bleibt rechts stehen.
   Ohne das rutscht "Bearbeiten" bei vielen Spalten aus dem Bild und wirkt,
   als gaebe es den Knopf gar nicht — genau so ist es bei den
   Jugendvertretungen aufgefallen. */
.spalte-aktion {
    width: 8.5rem;
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--color-surface);
    border-left: 2px solid var(--color-border-strong);
}

.datengitter thead th.spalte-aktion {
    z-index: 3;
    background: var(--color-surface-raised);
}

.datengitter tbody tr:nth-child(even) td.spalte-aktion {
    background: color-mix(in srgb, var(--color-border) 14%, var(--color-surface));
}

.datengitter tbody tr:hover td.spalte-aktion {
    background: color-mix(in srgb, var(--color-accent-subtle) 92%, var(--color-surface));
}

/* Fixierte Spalten: ohne sie waere beim Scrollen nach rechts nicht mehr
   erkennbar, zu welchem Datensatz eine Zeile gehoert. */
.datengitter th.ist-fixiert,
.datengitter td.ist-fixiert {
    position: sticky;
    z-index: 1;
    background: var(--color-surface);
}

.datengitter thead th.ist-fixiert {
    /* Ueber den Datenzellen UND ueber dem normalen Spaltenkopf. */
    z-index: 3;
    background: var(--color-surface-raised);
}

/* Zebrastreifen wuerden unter der fixierten Spalte durchscheinen. */
.datengitter tbody tr:nth-child(even) td.ist-fixiert {
    background: color-mix(in srgb, var(--color-border) 14%, var(--color-surface));
}

.datengitter tbody tr:hover td.ist-fixiert {
    background: color-mix(in srgb, var(--color-accent-subtle) 92%, var(--color-surface));
}

/* Kante zum scrollenden Bereich sichtbar machen. */
.datengitter th.ist-fixiert:last-of-type,
.datengitter td.ist-fixiert + td:not(.ist-fixiert) {
    border-left: 2px solid var(--color-border-strong);
}

/* ---------------------------------------------------------- Dialoge */

.dialog {
    width: min(56rem, calc(100vw - 2rem));
    max-height: calc(100vh - 4rem);
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-lg);
}

.dialog::backdrop {
    background: rgb(0 0 0 / 0.55);
}

.dialog-form {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 4rem);
}

.dialog-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.dialog-kopf h2 {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 600;
}

/* Nur der Inhalt scrollt — Kopf und Fussleiste bleiben sichtbar, damit
   "Anlegen" bei einem langen Formular nicht ausser Reichweite geraet. */
.dialog-inhalt {
    overflow-y: auto;
    padding: var(--space-6) var(--space-6) var(--space-2);
}

.dialog-fuss {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.vorschau-ersatz {
    max-width: 42ch;
    margin: 0;
    text-align: center;
    color: var(--color-text-muted);
}

/* Steht rechts neben den Knoepfen und weicht bei schmalem Fenster als Erstes. */
.dialog-hinweis {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    min-width: 0;
}

.aktionsleiste-eng {
    margin-top: 0;
    margin-bottom: var(--space-4);
}

/* -------------------------------------------------------- Dokumente */

.dokument-liste {
    list-style: none;
    max-width: 48rem;
    margin-bottom: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.dokument-liste li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
}

.dokument-liste li + li {
    border-top: 1px solid var(--color-border);
}

.dokument-name {
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
}

.dokument-name:hover {
    text-decoration: underline;
}

.dokument-meta {
    margin-left: auto;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.dokument-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 48rem;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.dokument-form-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
}

.dokument-form .feld-gruppe {
    flex: 1 1 14rem;
    width: auto;
}

/* Ablageflaeche fuer Dateien.
   Der gestrichelte Rand sagt "hier ablegen", der Knopf darin bleibt der
   verlaessliche Weg — ohne JavaScript ist er der einzige. */
.ablage-flaeche {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-4);
    border: 2px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    text-align: center;
    transition: border-color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
}

/* Waehrend eine Datei darueber schwebt. */
.ablage-flaeche.ist-bereit {
    border-color: var(--color-accent);
    background: var(--color-accent-subtle);
}

.ablage-text {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.ablage-oder {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Das Dateifeld liegt unsichtbar im Label — geklickt wird der Knopf. */
.ablage-knopf {
    cursor: pointer;
}

.ablage-knopf:focus-within {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.ablage-name {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

/* Nummer-Freigabe im Papierkorb: bewusst als eigene Auswahl neben dem
   Loeschknopf, damit sie nicht versehentlich mitgeklickt wird. */
.nummer-freigeben {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-right: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
    cursor: pointer;
}

.nummer-freigeben input {
    accent-color: var(--color-danger);
}

/* Kontrollkästchen mit Beschriftung in einer Zeile — ohne diese Regel steht
   die Box unausgerichtet neben dem Text und ist kaum als Checkbox erkennbar. */
.kontroll-zeile {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    cursor: pointer;
}

.kontroll-zeile input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    flex: none;
    accent-color: var(--color-accent);
    cursor: pointer;
}

/* -------------------------------------------------- Pflicht-Checkbox */

/* Ohne eigene Regeln stand hier nur eine nackte Checkbox ohne Bezug zum
   Text — sie war kaum als solche zu erkennen. */
.kontroll-zeile {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    cursor: pointer;
}

.kontroll-zeile input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-accent);
    cursor: pointer;
}

/* ------------------------------------------------ Dokumentvorschau */

.dokument-liste li {
    flex-wrap: wrap;
}

.dokument-kopf {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 14rem;
    flex: 1 1 20rem;
}

.dokument-name {
    font-weight: 600;
    color: var(--color-text-primary);
}

.dokument-meta {
    margin-left: 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.dokument-aktionen {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.dialog-breit {
    width: min(72rem, calc(100vw - 2rem));
}

.vorschau-flaeche {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: min(70vh, 40rem);
    padding: var(--space-4);
    background: var(--color-bg-subtle);
}

.vorschau-rahmen {
    width: 100%;
    height: min(70vh, 40rem);
    border: 0;
    background: #ffffff;
}

.vorschau-bild {
    max-width: 100%;
    max-height: min(70vh, 40rem);
    object-fit: contain;
}

/* ------------------------------------------------- Rechtliche Hinweise */

/* Die Seite selbst scrollt nicht — nur der Inhaltsbereich.
   ------------------------------------------------------------------
   Die Seitenleiste ist fest positioniert, die Kopfleiste klebend. Solange
   das Fenster als Ganzes scrollt, ziehen beide beim Gummiband-Effekt von
   macOS mit und wirken verschoben. Ausserdem war der Abmelden-Knopf bei
   562 Pixeln Fensterhoehe nicht erreichbar: der Inhalt der Leiste ist dort
   577 Pixel hoch, und ein festes Element scrollt nicht mit.

   Deshalb bekommt die Huelle genau Fensterhoehe und der Inhaltsbereich
   scrollt in sich. Damit gibt es kein Fensterscrollen mehr, an dem etwas
   haengen bleiben koennte.

   dvh statt vh: auf Mobilgeraeten aendert sich die sichtbare Hoehe, wenn
   die Adressleiste ein- und ausfaehrt. vh bleibt als Rueckfall stehen. */
html,
body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

.app-shell {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
}

.app-frame {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
}

.page-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* In der Leiste weicht nur die Navigation aus; Marke und Fuss bleiben. */
.app-sidebar {
    overflow: hidden;
}

.sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Ohne das zieht das Grid seine Zeilen auf die volle Hoehe auseinander,
       sobald es als Flex-Kind waechst — die Eintraege standen dann weit
       verstreut. */
    align-content: start;
}

/* Klein unter dem Abmelden-Knopf. */
.sidebar-bottom .rechtliches {
    justify-content: center;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Eingeklappt bleibt nur Platz fuer Symbole — die Verweise treten dann
   zurueck, wie die uebrigen Beschriftungen auch. Erreichbar bleiben sie
   ueber das Ausklappen und ueber die Anmeldeseite. */
html[data-sidebar="collapsed"] .sidebar-bottom .rechtliches {
    display: none;
}

.rechtliches {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.rechtliches a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.rechtliches a:hover {
    color: var(--color-accent);
}

.rechtliches a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ----------------------------------------------------------- Übersicht */

/* Anklickbare Kennzahl: fuehrt in die Liste, aus der sie stammt. */
.kachel-link {
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.kachel-link:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.kachel-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.karte-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.karte-text-gut {
    color: var(--color-success-text, var(--color-text-secondary));
}

/* Zwei Tafeln nebeneinander, untereinander sobald es eng wird. */
.tafel-reihe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.tafel-reihe > .tafel {
    flex: 1 1 22rem;
    margin-bottom: 0;
}

.tafel {
    margin-bottom: var(--space-6);
    padding: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.tafel-titel {
    margin-bottom: var(--space-4);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Balken je Bezirk. Bewusst ohne Diagrammbibliothek: sieben Werte
   nebeneinander brauchen keine 200 KB JavaScript, und die
   Content-Security-Policy laesst ohnehin keine Fremdquelle zu. */
.balken-liste,
.verlauf-liste,
.aufgaben-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.balken-zeile {
    display: grid;
    grid-template-columns: 9rem 1fr 3rem;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-1) 0;
}

.balken-name {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.balken-name:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

.balken-spur {
    height: 0.6rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-border) 45%, transparent);
    overflow: hidden;
}

.balken-fuellung {
    display: block;
    height: 100%;
    border-radius: var(--radius-sm);
    background: var(--color-accent);
}

.balken-wert {
    font-size: var(--text-sm);
    font-weight: 600;
    text-align: right;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.verlauf-liste li {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
}

.verlauf-liste li:last-child {
    border-bottom: 0;
}

.verlauf-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    text-decoration: none;
}

.verlauf-name:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

.verlauf-meta {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Offene Luecken. Die Zahl steht vorn, damit auf einen Blick klar ist,
   wie gross die Aufgabe ist. */
.aufgabe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}

.aufgabe:last-child {
    border-bottom: 0;
}

.aufgabe-zahl {
    min-width: 2.5rem;
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-warning-text);
    font-variant-numeric: tabular-nums;
}

.aufgabe-text {
    flex: 1 1 20rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: var(--text-sm);
    color: var(--color-text-primary);
}

.aufgabe-zusatz {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* -------------------------------------------------- Symbole der Leiste */

/* Eingeklappt blendet die Seitenleiste alle Beschriftungen aus. Ohne
   Symbol blieb ein leeres Kaestchen stehen — die Navigation war dann nicht
   mehr bedienbar. currentColor uebernimmt die Farbe des Links, damit gelten
   aktiver und Hover-Zustand automatisch mit. */
.sidebar-symbol {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
}

/* Der Abmelden-Knopf traegt Symbol und Text nebeneinander. */
.abmelden-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

html[data-sidebar="collapsed"] .abmelden-text {
    display: none;
}

/* Eingeklappt sitzt alles mittig und nichts laeuft ueber den Rand. */
html[data-sidebar="collapsed"] .abmelden-button {
    padding: var(--space-2);
}

/* Kein overflow: hidden auf den Links — der Tooltip liegt als ::after
   rechts ausserhalb und wuerde abgeschnitten. Damit waere ausgerechnet die
   Hilfe weg, die den eingeklappten Zustand erst bedienbar macht. Die
   Beschriftungen blendet das Design-System ohnehin selbst aus. */
html[data-sidebar="collapsed"] .abmelden-button {
    white-space: nowrap;
}

/* Dieselbe Behandlung im schmalen Fenster, wo die Leiste ebenfalls auf
   5rem geht — dort greift data-sidebar nicht. */
@media (max-width: 900px) {
    .abmelden-text {
        display: none;
    }

    .abmelden-button {
        padding: var(--space-2);
    }
}