.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Wiederverwendbare Effekte */

/* Animationen */
.animate__fadeIn {
    animation-duration: 0.8s !important;
}


@media (max-width: 768px) {

}


/* =================================================================
   GRUNDLAGE UND HILFSKLASSEN
   Kam frueher aus MudBlazor. Bewusst klein gehalten: nur die Klassen,
   die im Portal tatsaechlich vorkommen, in der Stufung des
   Grundlagen-Blatts (4px-Raster).
   ================================================================= */

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

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

body {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--c-text);
    background: var(--c-fill-2);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; letter-spacing: -.012em; }
p { margin: 0; }
ul, ol { margin: 0; padding-left: 18px; }
button, input, select, textarea { font-family: inherit; }
a { color: var(--fvn); text-decoration: none; }
a:hover { text-decoration: underline; }
table { border-collapse: collapse; }
svg { display: inline-block; vertical-align: middle; }

/* --- Anordnung ---------------------------------------------------- */

.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-block { display: block; }
.d-none { display: none; }
.flex-column { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.align-baseline { align-items: baseline; }
.justify-center { justify-content: center; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-space-between { justify-content: space-between; }
.justify-space-around { justify-content: space-around; }

/* --- Abstaende: Stufe n = n * 4px --------------------------------- */

.ma-0{margin:0}.ma-1{margin:4px}.ma-2{margin:8px}.ma-3{margin:12px}.ma-4{margin:16px}.ma-5{margin:20px}.ma-6{margin:24px}.ma-8{margin:32px}
.mt-0{margin-top:0}.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-5{margin-top:20px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-5{margin-bottom:20px}.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}
.ml-0{margin-left:0}.ml-1{margin-left:4px}.ml-2{margin-left:8px}.ml-3{margin-left:12px}.ml-4{margin-left:16px}.ml-auto{margin-left:auto}
.mr-0{margin-right:0}.mr-1{margin-right:4px}.mr-2{margin-right:8px}.mr-3{margin-right:12px}.mr-4{margin-right:16px}.mr-auto{margin-right:auto}
.mx-1{margin-left:4px;margin-right:4px}.mx-2{margin-left:8px;margin-right:8px}.mx-3{margin-left:12px;margin-right:12px}.mx-4{margin-left:16px;margin-right:16px}.mx-auto{margin-left:auto;margin-right:auto}
.my-1{margin-top:4px;margin-bottom:4px}.my-2{margin-top:8px;margin-bottom:8px}.my-3{margin-top:12px;margin-bottom:12px}.my-4{margin-top:16px;margin-bottom:16px}.my-6{margin-top:24px;margin-bottom:24px}
.mt-n2{margin-top:-8px}

.pa-0{padding:0}.pa-1{padding:4px}.pa-2{padding:8px}.pa-3{padding:12px}.pa-4{padding:16px}.pa-5{padding:20px}.pa-6{padding:24px}.pa-8{padding:32px}
.pt-0{padding-top:0}.pt-1{padding-top:4px}.pt-2{padding-top:8px}.pt-3{padding-top:12px}.pt-4{padding-top:16px}.pt-6{padding-top:24px}
.pb-0{padding-bottom:0}.pb-1{padding-bottom:4px}.pb-2{padding-bottom:8px}.pb-3{padding-bottom:12px}.pb-4{padding-bottom:16px}.pb-6{padding-bottom:24px}
.pl-1{padding-left:4px}.pl-2{padding-left:8px}.pl-3{padding-left:12px}.pl-4{padding-left:16px}
.pr-1{padding-right:4px}.pr-2{padding-right:8px}.pr-3{padding-right:12px}.pr-4{padding-right:16px}
.px-1{padding-left:4px;padding-right:4px}.px-2{padding-left:8px;padding-right:8px}.px-3{padding-left:12px;padding-right:12px}.px-4{padding-left:16px;padding-right:16px}.px-6{padding-left:24px;padding-right:24px}.px-0{padding-left:0;padding-right:0}
.py-1{padding-top:4px;padding-bottom:4px}.py-2{padding-top:8px;padding-bottom:8px}.py-3{padding-top:12px;padding-bottom:12px}.py-4{padding-top:16px;padding-bottom:16px}.py-5{padding-top:20px;padding-bottom:20px}.py-8{padding-top:32px;padding-bottom:32px}

.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}

/* --- Text --------------------------------------------------------- */

.text-center { text-align: center; }
.text-start, .text-left { text-align: left; }
.text-end, .text-right { text-align: right; }
.text-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.text-error { color: var(--c-fehler); }
.text-success { color: var(--c-gut); }
.text-secondary { color: var(--c-text-2); }
.font-weight-bold { font-weight: 600; }
.font-weight-medium { font-weight: 500; }
.font-weight-regular { font-weight: 400; }

/* --- Masse und Sonstiges ------------------------------------------ */

.w-100 { width: 100%; }
.h-100 { height: 100%; }
.rounded { border-radius: var(--r); }
.overflow-hidden { overflow: hidden; }
.cursor-pointer { cursor: pointer; }

/* Erhebungen gab es frueher in zehn Stufen. Es gibt jetzt zwei Flaechen und
   keine Schatten im Inhalt - die Klassen bleiben wirkungslos erhalten, damit
   bestehendes Markup nicht angefasst werden muss. */
[class*="elevation-"] { box-shadow: none; }

/* =================================================================
   GESTALTUNGSRICHTUNG "A · WERKZEUG"
   Entwurf und Begruendung: design/system (Canvas "FVN Designsystem").

   Leitsaetze, an denen sich jede Ergaenzung messen lassen muss:
     1. Trennung durch Linien, nicht durch Ebenen. Schatten gibt es nur,
        wo etwas wirklich ueber dem Rest liegt: Dialog, Menue, Popover.
     2. Zwei Flaechen, mehr nicht. Weiss = Inhalt, --c-fill = eingelassen.
     3. Gruen fuehrt, es dekoriert nicht. Es gehoert auf die eine erzeugende
        Handlung und auf "erledigt" - nicht auf Ueberschriften und Rahmen.
     4. Dicht. Zeilen 36px, Bedienelemente 30px, Grundschrift 13px.
     5. Zahlen in Monospace mit Tabellenziffern, damit Spalten fluchten.
   ================================================================= */

/* Die Werte stammen aus dem Entwurfs-Kanvas (design/portal). Aendert sich
   dort etwas, wird es hier nachgezogen - und wirkt dann ueberall, weil die
   Komponenten ausschliesslich diese Namen verwenden. */
:root {
    /* --- Marke -------------------------------------------------------
       Das FVN-Gruen in einer Tonleiter. Die hellen Stufen tragen Flaechen
       (Plaketten, aktive Navigation), die dunklen Text und Knoepfe. */
    --fvn-50:  #f0f7ee;
    --fvn-100: #dcedd7;
    --fvn-200: #bcdcb2;
    --fvn-300: #8fc481;
    --fvn:     #3f8230;
    --fvn-600: #367028;
    --fvn-dunkel: #2c5c21;
    --fvn-hell: #52A13F;
    --fvn-ton:  var(--fvn-50);
    --fvn-rand: var(--fvn-200);
    --c-dunkel: #1f2328;

    /* --- Text --------------------------------------------------------- */
    --c-text:   #101828;
    --c-text-2: #475467;
    --c-text-3: #667085;
    --c-text-4: #98a2b3;

    /* --- Flaechen und Linien ------------------------------------------- */
    --c-flaeche: #ffffff;
    --c-fill:    #f9fafb;
    --c-fill-2:  #f4f5f7;           /* Seitengrund, neutral - der Gruenstich wirkte truebe */
    --c-nav:     #ffffff;
    --c-linie:         #e4e7ec;
    --c-linie-kraeftig:#d0d5dd;
    --c-linie-zart:    #f2f4f7;
    --c-schwebe:       #f9fafb;
    --c-neutral-ton:   #f2f4f7;

    /* --- Bedeutung: je Farbe ein Ton, ein Rand, ein Volton ------------- */
    --c-gut:    #3f8230;  --c-gut-ton:    #f0f7ee;  --c-gut-rand:    #bcdcb2;
    --c-warn:   #b54708;  --c-warn-ton:   #fffaeb;  --c-warn-rand:   #fedf89;
    --c-fehler: #b42318;  --c-fehler-ton: #fef3f2;  --c-fehler-rand: #fecdca;
    --c-blau:   #175cd3;  --c-blau-ton:   #eff8ff;  --c-blau-rand:   #b2ddff;

    /* --- Masse --------------------------------------------------------- */
    --r-s:  6px;
    --r:    8px;
    --r-l:  10px;
    --r-xl: 14px;
    --h-zeile:  50px;               /* Tabellenzeile */
    --h-ctl:    34px;               /* Knopf */
    --h-ctl-s:  28px;
    --h-feld:   32px;               /* Eingabe - eine Spur flacher als ein Knopf */
    --h-kopf:   52px;               /* Kopfleiste */
    --b-nav:    248px;              /* Seitennavigation */

    /* --- Erhebung: weich und flach, nie hart --------------------------- */
    --kante:   0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
    --kante-2: 0 2px 4px -1px rgba(16,24,40,.06), 0 10px 20px -6px rgba(16,24,40,.12);
    --schatten-pop:    0 12px 16px -4px rgba(16,24,40,.08), 0 4px 6px -2px rgba(16,24,40,.03);
    --schatten-dialog: 0 24px 48px -12px rgba(16,24,40,.18);

    --ease: cubic-bezier(.22,.61,.36,1);
}

/* --- Grundlage ---------------------------------------------------- */

html {
    /* Platz fuer den Rollbalken freihalten: sonst rueckt beim Wechsel auf eine
       kuerzere Seite alles um seine Breite zur Seite. */
    scrollbar-gutter: stable;
    background: var(--c-fill-2);
    background-image: none;         /* Punktraster raus: unruhig hinter dichten Listen */
}


/* Zahlen ueberall tabellarisch - Spalten fluchten, Werte springen beim
   Aktualisieren nicht in der Breite. */
.mono, .zahl, .data-row__amount, .stat-tile__value,
.position-grid-amount, .za-toolbar__count {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

/* --- Geruest: AppBar, Drawer, Navigation -------------------------- */


/* --- Flaechen ----------------------------------------------------- */


/* Kartenkopf im Material-Stil: getoente Leiste raus */

/* Seitenflaeche: eine weisse Ebene, auf der die Seite lebt */
.page-surface { background: transparent; border: 0; border-radius: 0; padding: 0; }

.page-title { font-size: 18px; font-weight: 600; letter-spacing: -.014em; color: var(--c-text); }
.section-spacer { height: 20px; }

/* Akzentkanten: aus Farbverlaeufen werden ruhige Haarlinien */
.border-t, .border-b, .border-l, .border-r { position: relative; }
.border-t { border-top: 2px solid var(--fvn); }
.border-b { border-bottom: 2px solid var(--fvn); }
.border-l { border-left: 2px solid var(--fvn); }
.border-r { border-right: 2px solid var(--fvn); }
.border-t::before, .border-b::before, .border-l::before, .border-r::before { content: none; }

.hover-effect {
    border: 1px solid var(--c-linie);
    border-radius: var(--r-l);
    background: var(--c-flaeche);
    transition: border-color .14s var(--ease), background .14s var(--ease);
}
.hover-effect:hover { background: var(--c-fill); border-color: var(--c-linie-kraeftig); box-shadow: none; }

/* --- Abschnittskopf ----------------------------------------------- */

/* Ausserhalb einer Karte traegt der Kopf keine Linie und keinen Einzug. */
.page-surface > .section-head,
.section-container > .section-head { margin: 0 0 11px; padding: 0; border-bottom: 0; min-height: 0; background: transparent; }

/* In der Karte sitzt der Abschnittskopf wie eine Kopfzeile. */


/* --- Tabellen ----------------------------------------------------- */


/* Flache Tabelle in Karten: kein zweiter Rahmen um eine schon gerahmte Flaeche */


/* --- Kennzahl ----------------------------------------------------- */


/* Die Bedeutung sitzt auf einer Kante links, nicht auf der Zahl allein. */

/* Die Zahl nimmt die Farbe ihrer Bedeutung an - das ist der Punkt, an dem der
   Blick ohnehin haengt, und spart eine zweite Erklaerung daneben. */
.stat-tile--primary .stat-tile__value,

/* Ein Hauch Ton hinter der Kante, damit die Kachel nicht nur weiss ist. */


/* Das Symbol in der Ecke war Rauschen neben der Zahl - die Kante traegt die Bedeutung. */
.stat-item { display: flex; flex-direction: column; gap: 1px; }

/* --- Datenzeile --------------------------------------------------- */

.data-row {
    display: flex; align-items: center; gap: 12px;
    padding: 0 14px; min-height: var(--h-zeile);
    border-bottom: 1px solid var(--c-linie-zart);
    transition: background .12s var(--ease);
}
.data-row:last-child { border-bottom: 0; }
.data-row:hover { background: var(--c-schwebe); }
.data-row.clickable { cursor: pointer; }
.data-row__main { flex: 1; min-width: 0; }
.data-row__title {
    font-size: 13px; font-weight: 500; color: var(--c-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.data-row__meta { font-size: 11.5px; color: var(--c-text-3); }
.data-row__amount {
    font-weight: 500; white-space: nowrap; color: var(--c-text); font-size: 13px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums;
}
/* Steht die Liste direkt in einer Karte, reicht sie bis an deren Kante. */

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

.stamm-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}
.stamm-tile {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 15px;
    border-radius: var(--r-l);
    background: var(--c-flaeche);
    border: 1px solid var(--c-linie);
    box-shadow: var(--kante);
    transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.stamm-tile:hover { border-color: var(--fvn-200); box-shadow: var(--kante-2); }
.stamm-tile__icon {
    width: 32px; height: 32px; flex: none; border-radius: var(--r);
    background: var(--fvn-50); color: var(--fvn);
    display: flex; align-items: center; justify-content: center;
}
.stamm-tile__icon .fvn-icon { width: 18px; height: 18px; }
.stamm-tile__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.stamm-tile__title {
    font-size: 14px; font-weight: 600; color: var(--c-text); letter-spacing: -.008em;
    overflow: hidden; text-overflow: ellipsis;
}
.stamm-tile__meta { font-size: 12.5px; color: var(--c-text-3); line-height: 1.45; }
.stamm-tile__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }

/* Die Werkzeuge stehen oben rechts und treten zurueck, solange der Zeiger
   woanders ist - sonst zieht jede Kachel den Blick auf zwei kleine Symbole
   statt auf ihren Namen. */
.stamm-tile__actions {
    display: flex; align-items: center; gap: 2px; flex: none;
    align-self: flex-start; opacity: .45;
    transition: opacity .14s var(--ease);
}
.stamm-tile:hover .stamm-tile__actions,
.stamm-tile:focus-within .stamm-tile__actions { opacity: 1; }

.stamm-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px; border-radius: 999px;
    font-size: 11.5px; font-weight: 500;
    background: var(--c-fill); border: 1px solid var(--c-linie);
    color: var(--c-text-2);
}
.stamm-chip .fvn-icon { width: 13px; height: 13px; }
.stamm-chip--warn { background: var(--c-warn-ton); border-color: var(--c-warn-rand); color: var(--c-warn); }
.stamm-danger { color: var(--c-fehler); }

/* --- Leisten ------------------------------------------------------ */

.za-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
/* Steht die Leiste in einer Karte, traegt sie deren Polsterung und trennt
   sich per Linie vom Inhalt - sonst klebt der Knopf an der Kartenkante. */
.fvn-card > .za-toolbar {
    margin: 0; padding: 11px 16px;
    border-bottom: 1px solid var(--c-linie);
}
.za-toolbar__spacer { margin-left: auto; }
.za-toolbar__count { font-size: 12px; color: var(--c-text-3); }

.filter-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 9px; margin-bottom: 12px;
    border-radius: var(--r);
    background: var(--c-fill);
    border: 1px solid var(--c-linie);
}
.filter-bar .filter-bar__icon { color: var(--c-text-3); flex-shrink: 0; font-size: 17px; }
.filter-bar .filter-bar__fields { flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* --- Kacheln fuer Belegarten und Schnellzugriffe ------------------ */

.belegarten-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.belegarten-list { display: flex; flex-direction: column; gap: 5px; }
.belegart-card, .belegart-item {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 13px;
    border-radius: var(--r-l);
    background: var(--c-flaeche);
    border: 1px solid var(--c-linie);
    cursor: pointer;
    transition: border-color .14s var(--ease), background .14s var(--ease);
}
.belegart-card:hover, .belegart-item:hover { background: var(--c-fill); border-color: var(--c-linie-kraeftig); }
.belegart-icon {
    width: 26px; height: 26px; flex: none; border-radius: var(--r);
    background: var(--c-linie-zart); color: var(--c-text-2);
    display: flex; align-items: center; justify-content: center;
}
.belegart-content, .belegart-info { flex: 1; min-width: 0; }

.quick-actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.action-button {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 13px;
    border-radius: var(--r-l);
    background: var(--c-flaeche);
    border: 1px solid var(--c-linie);
    cursor: pointer;
    transition: border-color .14s var(--ease), background .14s var(--ease);
}
.action-button:hover { background: var(--c-fill); border-color: var(--c-linie-kraeftig); }
.action-content { flex: 1; min-width: 0; }

.freigaben-list { display: flex; flex-direction: column; gap: 5px; }

.cta-box {
    display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
    padding: 13px 14px; min-width: 0;
    border-radius: var(--r-l);
    background: var(--c-fill);
    border: 1px solid var(--c-linie);
}
.cta-box > .fvn-text { flex: 1; min-width: 140px; }
.cta-box > .fvn-btn { flex: none; margin-left: auto; }

/* Die Haelften des Dashboards. __sub ist die Beschriftung darueber - sie war
   faelschlich als Spaltenbehaelter gesetzt, dadurch lief der Kasten darunter
   in den Text hinein. */
.dash-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.dash-split > div { min-width: 0; display: flex; flex-direction: column; }
.dash-split__sub {
    font-size: 11px; font-weight: 600; letter-spacing: .01em;
    color: var(--c-text-3); margin-bottom: 7px;
}
@media (max-width: 960px) { .dash-split { grid-template-columns: 1fr; } }

/* --- Belegpositionen ---------------------------------------------- */

.position-grid-item { display: flex; align-items: start; height: 100%; }
.position-grid-amount {
    display: flex; align-items: start; justify-content: flex-end; height: 100%;
    font-weight: 600; color: var(--c-text);
}
.zahl-rechts input { text-align: right; }

/* --- Hilfsklassen ------------------------------------------------- */

.h-100 { height: 100%; }
.text-end { text-align: end; }

/* --- Scrollbalken ------------------------------------------------- */

* { scrollbar-width: thin; scrollbar-color: var(--c-linie-kraeftig) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--c-linie-kraeftig); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--c-text-3); background-clip: content-box; }

/* =================================================================
   Vereinsauswahl (Rechnungsempfaenger)
   Trefferzeile, Statusabzeichen und Karte des gewaehlten Vereins.
   Die IBAN steht an fester Position in Monospace: Vereine sind in Sage
   teils doppelt angelegt und dann nur darueber unterscheidbar.
   ================================================================= */

/* --- Rechnung erneuern: was sich geaendert hat --------------------------
   Vorher und Nachher in einer Zeile. Der alte Wert bleibt lesbar, aber
   zurueckgenommen - durchgestrichen waere hier zu laut, es geht um eine
   Entscheidung, nicht um einen Fehler. */
.erneuern-liste { display: flex; flex-direction: column; gap: 1px; }
.erneuern-zeile {
    display: grid; grid-template-columns: 152px minmax(0, 1fr) 18px minmax(0, 1fr);
    gap: 10px; align-items: baseline;
    padding: 7px 10px; border-radius: var(--r);
}
.erneuern-zeile:nth-child(odd) { background: var(--c-fill); }
.erneuern-zeile__feld { font-size: 12.5px; font-weight: 500; color: var(--c-text-2); }
.erneuern-zeile__alt { font-size: 13px; color: var(--c-text-3); overflow-wrap: anywhere; }
.erneuern-zeile__pfeil { color: var(--c-text-4); align-self: center; }
.erneuern-zeile__neu { font-size: 13px; font-weight: 600; color: var(--c-text); overflow-wrap: anywhere; }

@media (max-width: 700px) {
    .erneuern-zeile { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .erneuern-zeile__pfeil { display: none; }
}

/* --- Teilnehmer-Dialog --------------------------------------------------
   Zwei Spalten: links die Person, rechts alles zur Zahlung. Die Haarlinie
   dazwischen ist eine eigene Rasterspalte - ein Rand an einer der beiden
   Haelften waere an der kuerzeren zu kurz. */
.tn-dialog {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    gap: 24px 28px;
}
.tn-dialog__linie { background: var(--c-linie); }
.tn-zahlung { display: flex; flex-direction: column; gap: 14px; }

/* Feste Beschriftungsspalte rechts: die Vereinssuche verschwindet, sobald ein
   Verein gewaehlt ist. Bemaesse sich die Spalte an ihrem laengsten Eintrag,
   ruecken in dem Moment alle Felder darunter um rund 50px zur Seite. */
.tn-zahlung .fvn-formular { grid-template-columns: 96px minmax(0, 1fr); }

@media (max-width: 900px) {
    .tn-zahlung .fvn-formular { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .tn-dialog { grid-template-columns: minmax(0, 1fr); }
    .tn-dialog__linie { display: none; }
}

/* --- Zwei Felder in einer Formularzeile ---------------------------------
   Etwa PLZ und Ort. Der Behaelter loest sich wie ein einzelnes Feld ins
   Raster auf: die Beschriftung nimmt Spalte eins, die beiden Felder teilen
   sich Spalte zwei. Die Kinder bringen deshalb keine eigene Beschriftung
   mit - und nur das erste greift die 9px nach links aus, sonst stuende das
   zweite gegenueber seinem Nachbarn versetzt. */
.fvn-formular > .fvn-paar { display: contents; }
.fvn-paar__reihe { display: flex; gap: 10px; min-width: 0; }
.fvn-paar__reihe > .fvn-feld { min-width: 0; }
.fvn-paar__reihe > .fvn-feld + .fvn-feld .fvn-feld__ctl { margin-left: 0; }
.fvn-paar__schmal { flex: none; width: 104px; }
.fvn-paar__breit  { flex: 1; min-width: 0; }

@media (max-width: 700px) {
    .fvn-paar__reihe { flex-wrap: wrap; }
    .fvn-paar__schmal { width: 100%; }
}

.verein-treffer { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-width: 0; }
.verein-treffer__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.verein-treffer__name {
    font-size: 13px; font-weight: 500; color: var(--c-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.verein-treffer__meta {
    font-size: 11.5px; color: var(--c-text-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.verein-treffer__iban {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11.5px; letter-spacing: .01em; color: var(--c-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.verein-treffer__iban--leer { color: var(--c-text-3); font-style: italic; }
.verein-treffer__rechts { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.verein-treffer__kto {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11px; color: var(--c-text-3);
}

.verein-badge {
    display: inline-flex; align-items: center; white-space: nowrap;
    padding: 1px 7px; border-radius: var(--r-s);
    font-size: 11px; font-weight: 500; line-height: 1.6;
}
.verein-badge--lastschrift  { background: var(--c-gut-ton);    color: var(--c-gut); }
.verein-badge--ueberweisung { background: var(--c-warn-ton);   color: var(--c-warn); }
.verein-badge--inaktiv      { background: var(--c-neutral-ton); color: var(--c-text-2); }

.verein-karte { border-radius: var(--r-l); background: var(--c-flaeche); overflow: hidden; border: 1px solid var(--c-linie-kraeftig); }
.verein-karte--lastschrift  { border-color: var(--c-gut-rand); }
.verein-karte--ueberweisung { border-color: var(--c-warn-rand); }

.verein-karte__kopf { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; }
.verein-karte__icon {
    flex: none; width: 28px; height: 28px; border-radius: var(--r);
    display: flex; align-items: center; justify-content: center;
}
.verein-karte--lastschrift  .verein-karte__icon { background: var(--c-gut-ton);  color: var(--c-gut); }
.verein-karte--ueberweisung .verein-karte__icon { background: var(--c-warn-ton); color: var(--c-warn); }
.verein-karte__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.verein-karte__name { font-size: 13.5px; font-weight: 600; letter-spacing: -.008em; }
.verein-karte__meta { font-size: 11.5px; color: var(--c-text-2); }
.verein-karte__kto { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; color: var(--c-text-3); }

.verein-zahlweg { display: flex; align-items: flex-start; gap: 9px; padding: 10px 13px; }
.verein-karte--lastschrift  .verein-zahlweg { background: var(--c-gut-ton);  border-top: 1px solid var(--c-gut-rand); }
.verein-karte--ueberweisung .verein-zahlweg { background: var(--c-warn-ton); border-top: 1px solid var(--c-warn-rand); }
.verein-zahlweg__titel { font-size: 12.5px; font-weight: 600; }
.verein-karte--lastschrift  .verein-zahlweg__titel { color: var(--c-gut); }
.verein-karte--ueberweisung .verein-zahlweg__titel { color: var(--c-warn); }
.verein-zahlweg__text { font-size: 11.5px; color: var(--c-text-2); line-height: 1.45; }
.verein-zahlweg__iban {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 12px; font-weight: 500; letter-spacing: .01em; margin-top: 1px;
}

/* MudBlazor legt max-height und overflow sowohl auf das Popover als auch auf die
   innere Liste - dadurch entstehen zwei Scrollbalken. Scrollen soll nur die Liste. */
.verein-popover { overflow: hidden !important; }

/* --- Anmeldung ----------------------------------------------------
   Freistehende Karte auf leerem Grund: hier ist eine leichte Erhebung
   richtig, weil nichts anderes den Bezug herstellt. */

/* Feld-Icons treten zurueck: sie orientieren, sie betonen nicht. */

/* --- Dev-Schnellanmeldung (nur Debug-Build) ----------------------- */

/* =================================================================
   EIGENE KOMPONENTEN (Components/Fvn)
   Ersetzen MudBlazor Stueck fuer Stueck. Die Klassen hier sind die
   einzige Quelle fuer das Aussehen - die Komponenten selbst enthalten
   keine Stile ausser dem, was aus Parametern berechnet wird.
   ================================================================= */

/* --- Typografie --------------------------------------------------- */

.fvn-text { display: block; color: inherit; }
.fvn-t-h5       { font-size: 18px;   font-weight: 600; letter-spacing: -.014em; line-height: 1.3; }
.fvn-t-h6       { font-size: 15px;   font-weight: 600; letter-spacing: -.011em; line-height: 1.35; }
.fvn-t-sub1     { font-size: 13px;   font-weight: 600; }
.fvn-t-sub2     { font-size: 12.5px; font-weight: 600; }
.fvn-t-body1    { font-size: 13px; }
.fvn-t-body2    { font-size: 12.5px; color: var(--c-text-2); }
.fvn-t-caption  { font-size: 11.5px; color: var(--c-text-3); }
.fvn-t-overline { font-size: 11.5px; font-weight: 600; letter-spacing: .01em; color: var(--c-text-3); }
.fvn-t-zahl     { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }

.fvn-c-primary   { color: var(--fvn); }
.fvn-c-secondary { color: var(--c-text-2); }
.fvn-c-success   { color: var(--c-gut); }
.fvn-c-warning   { color: var(--c-warn); }
.fvn-c-error     { color: var(--c-fehler); }
.fvn-c-info      { color: #2b6cb0; }
.fvn-c-dark      { color: var(--c-text); }
.fvn-c-inherit   { color: inherit; }

/* --- Icon --------------------------------------------------------- */

.fvn-icon {
    width: 18px; height: 18px; flex: none;
    fill: currentColor;
    vertical-align: text-bottom;
}
.fvn-icon.fvn-s-small { width: 15px; height: 15px; }
.fvn-icon.fvn-s-large { width: 22px; height: 22px; }

/* --- Stack -------------------------------------------------------- */

.fvn-stack { display: flex; min-width: 0; }

/* --- Karte -------------------------------------------------------- */

/* Kartenkopf: Titel links, Beiwerk rechts, darunter eine Haarlinie.
   Leicht eingelassen, damit die Karte eine Kopfzeile hat und nicht nur oben
   anfaengt - das gibt der Flaeche Halt, ohne einen Farbbalken zu brauchen. */

/* --- Schaltflaechen ----------------------------------------------- */


/* --- Chip --------------------------------------------------------- */

.fvn-chip {
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    padding: 1px 8px; border-radius: var(--r-s);
    font-size: 11.5px; font-weight: 500; line-height: 1.6;
    background: var(--c-neutral-ton); color: var(--c-text-2);
}
.fvn-chip--klickbar { cursor: pointer; }
.fvn-chip--primary { background: var(--fvn-ton);      color: var(--fvn); }
.fvn-chip--success { background: var(--c-gut-ton);    color: var(--c-gut); }
.fvn-chip--warning { background: var(--c-warn-ton);   color: var(--c-warn); }
.fvn-chip--error   { background: var(--c-fehler-ton); color: var(--c-fehler); }
.fvn-chip--info    { background: rgba(43,108,176,.10); color: #2b6cb0; }
.fvn-chip__punkt { width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: none; }
.fvn-chip--aus { opacity: .6; }
/* Das Kreuz zum Entfernen. Es traegt die Farbe des Chips und tritt erst
   hervor, wenn der Zeiger darauf steht. */
.fvn-chip__weg {
    display: flex; align-items: center; flex: none;
    margin: 0 -3px 0 1px; padding: 1px;
    border: 0; border-radius: var(--r-s);
    background: none; color: inherit; opacity: .6; cursor: pointer;
    transition: opacity .12s var(--ease), background .12s var(--ease);
}
.fvn-chip__weg:hover { opacity: 1; background: rgba(16,24,40,.08); }
.fvn-chip__weg .fvn-icon { width: 13px; height: 13px; }

/* --- Termine am Lehrgang ------------------------------------------- */
/* Datum und Knopf in einer Zeile: der Knopf stand vorher neben einem Feld
   mit Beschriftung darueber und damit schief. */
.termin-neu { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.termin-neu > .fvn-feld { flex: 1 1 220px; min-width: 0; }
.termin-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.termin-liste .fvn-chip { padding: 3px 9px; font-size: 12px; }

/* --- Hinweis ------------------------------------------------------ */

.fvn-alert {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 10px 12px; border-radius: var(--r);
    font-size: 12.5px; line-height: 1.5;
    background: var(--c-fill); border: 1px solid var(--c-linie); color: var(--c-text-2);
}
.fvn-alert--dicht { padding: 7px 10px; }
.fvn-alert__icon { margin-top: 1px; }
.fvn-alert__text { flex: 1; min-width: 0; }
.fvn-alert--success { background: var(--c-gut-ton);    border-color: var(--c-gut-rand); }
.fvn-alert--success .fvn-alert__icon { color: var(--c-gut); }
.fvn-alert--warning { background: var(--c-warn-ton);   border-color: var(--c-warn-rand); }
.fvn-alert--warning .fvn-alert__icon { color: var(--c-warn); }
.fvn-alert--error   { background: var(--c-fehler-ton); border-color: var(--c-fehler-rand); }
.fvn-alert--error .fvn-alert__icon { color: var(--c-fehler); }
.fvn-alert--info .fvn-alert__icon { color: var(--c-text-3); }

/* --- Trenner, Link, Tooltip --------------------------------------- */

.fvn-divider { border: 0; border-top: 1px solid var(--c-linie); margin: 0; }
.fvn-divider--vertikal { border-top: 0; border-left: 1px solid var(--c-linie); height: auto; align-self: stretch; }

.fvn-link { color: var(--fvn); text-decoration: none; cursor: pointer; }
.fvn-link:hover { text-decoration: underline; }

.fvn-tooltip { display: inline-flex; }

/* --- Raster ------------------------------------------------------- */

.fvn-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.fvn-grid > .fvn-item { grid-column: span var(--sp-xs, 12); min-width: 0; }
@media (min-width: 600px)  { .fvn-grid > .fvn-item { grid-column: span var(--sp-sm, var(--sp-xs, 12)); } }
@media (min-width: 960px)  { .fvn-grid > .fvn-item { grid-column: span var(--sp-md, var(--sp-sm, var(--sp-xs, 12))); } }
@media (min-width: 1280px) { .fvn-grid > .fvn-item { grid-column: span var(--sp-lg, var(--sp-md, var(--sp-sm, var(--sp-xs, 12)))); } }

/* Die Hoechstbreite kommt vom Aufrufer, nicht vom Behaelter - siehe
   FvnContainer. Ohne Angabe bleibt es bei der bisherigen Breite. */
.fvn-container { width: 100%; max-width: 1600px; margin: 0 auto; }
.fvn-container--xs   { max-width: 560px; }
.fvn-container--s    { max-width: 760px; }
.fvn-container--m    { max-width: 1040px; }
.fvn-container--l    { max-width: 1600px; }
.fvn-container--xl   { max-width: 1920px; }
.fvn-container--voll { max-width: none; }

/* --- Eingabefelder ------------------------------------------------
   Die Beschriftung steht ueber dem Feld statt darin zu schweben. Das ist der
   sichtbarste Bruch mit Material und haelt die Zeilenhoehe konstant, egal ob
   das Feld gefuellt ist. */

.fvn-feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fvn-feld__label { font-size: 13px; font-weight: 500; color: var(--c-text-2); }

/* Das Auswahlfeld bringt seinen Rahmen selbst mit - die Huelle darf dann keinen
   zweiten setzen, sonst liegen zwei Rahmen ineinander. */
.fvn-auswahl > .fvn-feld__ctl {
    min-height: 0; padding: 0; margin: 0;
    background: none; border: 0; box-shadow: none;
}
.fvn-feld__ctl {
    /* Ruhig getoent: man sieht, wo ein Feld anfaengt und aufhoert, ohne den
       vollen Kastenrahmen mit Schatten, der wie Bootstrap aussah. Unter dem
       Zeiger tritt die Linie hervor, im Fokus wird das Feld weiss. */
    position: relative; display: flex; align-items: center; gap: 9px;
    min-height: var(--h-feld); padding: 0 9px; margin-left: -9px;
    background: var(--c-fill);
    border: 1px solid var(--c-linie); border-radius: var(--r-s);
    font-size: 14px;
    transition: background .12s var(--ease), border-color .12s var(--ease);
}
.fvn-feld__ctl:hover { border-color: var(--c-linie-kraeftig); }
.fvn-feld__ctl:focus-within {
    background: var(--c-flaeche); border-color: var(--fvn-300);
    box-shadow: 0 0 0 3px var(--fvn-50);
}
.fvn-feld--fehler .fvn-feld__ctl { background: var(--c-fehler-ton); border-color: var(--c-fehler-rand); }
.fvn-feld--fehler .fvn-feld__ctl:focus-within {
    border-color: var(--c-fehler); box-shadow: 0 0 0 3px var(--c-fehler-ton);
}
.fvn-feld--aus .fvn-feld__ctl { color: var(--c-text-3); background: var(--c-linie-zart); }
.fvn-feld--aus .fvn-feld__ctl:hover { border-color: var(--c-linie); }
.fvn-feld--aus .fvn-feld__label { color: var(--c-text-3); }
.fvn-feld__adorn { color: var(--c-text-3); }
.fvn-feld__adorntext { font-size: 12px; color: var(--c-text-3); }
/* Das Kreuz zum Leeren eines Textfeldes - wie beim Suchfeld. */
.fvn-feld__weg {
    display: flex; align-items: center; flex: none;
    padding: 2px; border: 0; border-radius: var(--r-s);
    background: none; color: var(--c-text-3); cursor: pointer;
    transition: color .12s var(--ease), background .12s var(--ease);
}
.fvn-feld__weg:hover { color: var(--c-text); background: var(--c-neutral-ton); }
.fvn-feld__pfeil { position: absolute; right: 8px; color: var(--c-text-3); pointer-events: none; }
.fvn-feld__hilfe { font-size: 11px; color: var(--c-text-3); }
.fvn-feld__fehler { font-size: 11px; color: var(--c-fehler); font-weight: 500; }

.fvn-input {
    flex: 1; min-width: 0; width: 100%;
    border: 0; outline: 0; background: transparent;
    font: inherit; font-size: 13px; color: var(--c-text);
    padding: 6px 0; resize: vertical;
}
.fvn-input::placeholder { color: #b3bcc9; }
.fvn-input:disabled { color: var(--c-text-2); }
.fvn-input--zahl { text-align: right; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.fvn-input--select { appearance: none; cursor: pointer; padding-right: 18px; }

/* --- Haken und Schalter ------------------------------------------- */

.fvn-check, .fvn-switch {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    font-size: 13px; user-select: none;
}
.fvn-check input, .fvn-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.fvn-check__kasten {
    width: 16px; height: 16px; flex: none; border-radius: var(--r-s);
    border: 1px solid var(--c-linie-kraeftig); background: var(--c-flaeche);
    background-repeat: no-repeat; background-position: center; background-size: 11px;
    transition: background-color .12s var(--ease), border-color .12s var(--ease);
}
.fvn-check input:checked + .fvn-check__kasten {
    background-color: var(--fvn);
    border-color: var(--fvn);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12 6 6L20 6'/%3E%3C/svg%3E");
}
.fvn-check--aus, .fvn-switch--aus { opacity: .55; cursor: not-allowed; }

.fvn-switch__bahn {
    width: 32px; height: 18px; flex: none; border-radius: 999px;
    background: var(--c-linie-kraeftig); position: relative;
    transition: background .14s var(--ease);
}
.fvn-switch__knopf {
    position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
    border-radius: 999px; background: #fff;
    transition: left .14s var(--ease);
}
.fvn-switch input:checked + .fvn-switch__bahn { background: var(--fvn); }
.fvn-switch input:checked + .fvn-switch__bahn .fvn-switch__knopf { left: 16px; }

/* --- Tabelle ------------------------------------------------------ */

.fvn-center { text-align: center; }
.fvn-right  { text-align: right; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }

/* --- Dialog und Overlay ------------------------------------------- */

.fvn-overlay {
    position: fixed; inset: 0; z-index: 1400;
    background: rgba(13,17,23,.38);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 40px 20px; overflow: auto;
}
.fvn-dialog {
    background: var(--c-flaeche);
    border: 1px solid var(--c-linie-kraeftig); border-radius: var(--r-l);
    box-shadow: var(--schatten-dialog);
    width: 100%; max-width: 520px; max-height: calc(100vh - 80px);
    display: flex; flex-direction: column; overflow: hidden;
}

/* Breiten. Die Komponente setzt die Klasse aus DialogOptions.MaxWidth, damit
   ein Dialog nicht in jeder Datei seine eigene Breite mitbringt. */
.fvn-dialog--xs    { max-width: 400px; }
.fvn-dialog--s     { max-width: 520px; }
.fvn-dialog--m     { max-width: 760px; }
.fvn-dialog--l     { max-width: 1040px; }
.fvn-dialog--xl    { max-width: 1320px; }
.fvn-dialog--breit { max-width: 1040px; }
.fvn-dialog--frei  { max-width: none; }
.fvn-dialog--voll  { max-width: none; width: 100%; height: calc(100vh - 80px); }

.fvn-dialog__kopf {
    display: flex; align-items: center; gap: 10px; flex: none;
    min-height: 46px; padding: 0 16px;
    border-bottom: 1px solid var(--c-linie);
}
.fvn-dialog__titel {
    flex: 1; min-width: 0;
    font-size: 14px; font-weight: 600; letter-spacing: -.012em;
}
/* Ein Titel, der selbst Markup mitbringt, soll nicht zweimal fett werden. */
.fvn-dialog__titel .fvn-t-h6 { font-size: 14px; font-weight: 600; letter-spacing: -.012em; }

.fvn-dialog__inhalt { flex: 1; min-height: 0; padding: 16px; overflow: auto; background: var(--c-flaeche); }
.fvn-dialog__fuss {
    display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex: none;
    padding: 10px 16px; background: var(--c-fill);
    border-top: 1px solid var(--c-linie);
}

/* --- Reiter ------------------------------------------------------- */

.fvn-tabs__leiste { display: flex; gap: 16px; border-bottom: 1px solid var(--c-linie); }
.fvn-tabs__reiter {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 0 1px 9px; margin-bottom: -1px;
    border: 0; border-bottom: 2px solid transparent; background: none;
    font: inherit; font-size: 13px; color: var(--c-text-2); cursor: pointer;
    transition: color .12s var(--ease), border-color .12s var(--ease);
}
.fvn-tabs__reiter:hover { color: var(--c-text); }
.fvn-tabs__reiter--an { color: var(--c-text); font-weight: 600; border-bottom-color: var(--c-text); }
.fvn-tabs__reiter--aus { color: var(--c-linie-kraeftig); cursor: not-allowed; }
.fvn-tabs__zahl { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; color: var(--c-text-3); }
.fvn-tabs__inhalt { padding-top: 16px; }

/* --- Menue -------------------------------------------------------- */

.fvn-menu { position: relative; display: inline-flex; }
.fvn-menu__schirm { position: fixed; inset: 0; z-index: 1200; }

/* Der Ausloeser ist ein Knopf und muss deshalb ausgezogen werden - er soll
   aussehen wie das, was in ihm steckt, nicht wie eine Schaltflaeche. */
.fvn-menu__ausloeser {
    display: inline-flex; align-items: center;
    padding: 0; border: 0; border-radius: var(--r);
    background: none; font: inherit; color: inherit; cursor: pointer;
}
.fvn-menu__ausloeser:focus-visible { outline: 2px solid var(--fvn-300); outline-offset: 2px; }
.fvn-menu__liste {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 1201;
    min-width: 190px; padding: 4px;
    background: var(--c-flaeche);
    border: 1px solid var(--c-linie-kraeftig); border-radius: var(--r-l);
    box-shadow: var(--schatten-pop);
}
/* Fest im Fenster, Lage setzt fvnMenu.js beim Oeffnen - so schneidet keine
   scrollende Liste und kein overflow:hidden das Menue mehr ab. */
.fvn-menu__liste--fest { position: fixed; right: auto; overflow-y: auto; }
/* --- Benachrichtigungen ------------------------------------------------
   Lag vorher in einem <style> in der Komponente und war deshalb weder
   auffindbar noch an den Marken orientiert. */
.notif-menu { width: 400px; max-width: calc(100vw - 32px); padding: 0; }

.notif-kopf { display: flex; align-items: center; gap: 10px; padding: 10px 8px 0 14px; }
.notif-kopf__titel { flex: 1; font-size: 13.5px; font-weight: 600; letter-spacing: -.008em; }
.notif-kopf__knoepfe { display: inline-flex; align-items: center; gap: 2px; }

.notif-reiter { padding: 0 14px; }
.notif-reiter .reiter__i {
    border: 0; border-bottom: 2px solid transparent;
    padding: 9px 1px; margin-bottom: -1px;
    background: none; font: inherit; font-size: 13px; color: var(--c-text-2);
}
.notif-reiter .reiter__i--an { color: var(--c-text); font-weight: 600; border-bottom-color: var(--c-text); }
.notif-reiter .reiter__i:focus-visible { outline: 2px solid var(--fvn-300); outline-offset: 2px; border-radius: var(--r-s); }

.notif-liste {
    display: flex; flex-direction: column; gap: 1px;
    max-height: min(60vh, 520px); overflow-y: auto; padding: 4px;
}

/* Kein Symbolkaestchen: die Art steckt im farbigen Streifen links. Das gibt
   dem Satz rund 30px mehr Breite - bei 400px Fenster faellt das auf. */
.notif-eintrag {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start;
    padding: 9px 8px 9px 13px; border-radius: var(--r); cursor: pointer;
    transition: background .12s var(--ease);
}
.notif-eintrag::before {
    content: ""; position: absolute; left: 4px; top: 11px; bottom: 11px;
    width: 3px; border-radius: 999px; background: var(--c-linie-kraeftig);
}
.notif-eintrag--warnung::before { background: var(--c-warn); }
.notif-eintrag--fehler::before  { background: var(--c-fehler); }
.notif-eintrag--erfolg::before  { background: var(--c-gut); }
.notif-eintrag--info::before    { background: var(--c-blau); }

.notif-eintrag:hover { background: var(--c-fill); }
.notif-eintrag--neu { background: var(--fvn-50); }
.notif-eintrag--neu:hover { background: var(--fvn-100); }
.notif-eintrag--gelesen .notif-eintrag__titel { font-weight: 500; color: var(--c-text-2); }

.notif-eintrag__text { min-width: 0; }
.notif-eintrag__titel {
    font-size: 13px; font-weight: 600; color: var(--c-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notif-eintrag__satz {
    margin-top: 1px; font-size: 12px; line-height: 1.45; color: var(--c-text-2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notif-eintrag__zeit {
    margin-top: 4px; font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11px; color: var(--c-text-3);
}

/* Die Knoepfe erscheinen erst unter dem Zeiger - sonst stehen an jeder Zeile
   zwei graue Symbole, die mit der Meldung nichts zu tun haben. Beim Bedienen
   mit der Tastatur muessen sie trotzdem auftauchen. */
.notif-eintrag__knoepfe {
    display: inline-flex; align-items: center; flex: none;
    opacity: 0; transition: opacity .12s var(--ease);
}
.notif-eintrag:hover .notif-eintrag__knoepfe,
.notif-eintrag:focus-within .notif-eintrag__knoepfe { opacity: 1; }

.notif-leer { padding: 30px 24px; text-align: center; }
.notif-leer__kreis {
    width: 40px; height: 40px; margin: 0 auto 12px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 999px; background: var(--fvn-50); color: var(--fvn);
}
.notif-leer__satz { font-size: 13px; font-weight: 500; color: var(--c-text); }
.notif-leer__neben {
    margin: 4px auto 0; max-width: 30ch;
    font-size: 12px; line-height: 1.5; color: var(--c-text-3);
}

.fvn-menu__eintrag {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 0 9px; height: 30px; border: 0; border-radius: var(--r);
    background: none; font: inherit; font-size: 12.5px; color: var(--c-text);
    cursor: pointer; text-align: left;
}
.fvn-menu__eintrag:hover:not(:disabled) { background: var(--c-linie-zart); }
.fvn-menu__eintrag:disabled { color: var(--c-text-3); cursor: not-allowed; }

/* --- Navigation und Geruest --------------------------------------- */

/* Eine schmale Markenkante oben - die einzige grosse Farbflaeche der Anwendung. */
.fvn-layout > .fvn-appbar { position: sticky; }


/* --- Fortschritt -------------------------------------------------- */

.fvn-spinner {
    display: inline-block; width: 18px; height: 18px; flex: none;
    border: 2px solid var(--c-linie-kraeftig); border-top-color: currentColor;
    border-radius: 999px; animation: fvn-dreh .7s linear infinite;
}
.fvn-spinner.fvn-s-small { width: 14px; height: 14px; border-width: 1.5px; }
.fvn-spinner.fvn-s-large { width: 26px; height: 26px; }
@keyframes fvn-dreh { to { transform: rotate(360deg); } }

.fvn-balken { height: 3px; border-radius: 999px; background: var(--c-linie); overflow: hidden; }
.fvn-balken__fuellung { height: 100%; background: currentColor; transition: width .2s var(--ease); }

/* --- Avatar, Abzeichen, Bild -------------------------------------- */

.fvn-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: var(--r);
    background: var(--c-linie-zart); color: var(--c-text-2);
    font-size: 11.5px; font-weight: 600; flex: none;
}
.fvn-avatar.fvn-s-small { width: 22px; height: 22px; font-size: 10.5px; }
.fvn-avatar.fvn-s-large { width: 36px; height: 36px; font-size: 13px; }

.fvn-badge { position: relative; display: inline-flex; }
.fvn-badge__punkt {
    position: absolute; top: -4px; right: -6px;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 600; line-height: 1;
    background: var(--c-fehler); color: #fff;
}
.fvn-badge__punkt--klein { min-width: 8px; height: 8px; padding: 0; top: -2px; right: -2px; }
.fvn-badge__punkt--primary { background: var(--fvn); }
.fvn-badge__punkt--warning { background: var(--c-warn); }

.fvn-image { display: block; max-width: 100%; }

/* --- Meldungen ---------------------------------------------------- */

.fvn-snackbar {
    position: fixed; right: 18px; bottom: 18px; z-index: 1600;
    display: flex; flex-direction: column; gap: 7px; max-width: 380px;
}
.fvn-snackbar__eintrag {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 8px 9px 13px; border-radius: var(--r);
    background: var(--c-text); color: #fff;
    font-size: 12.5px; box-shadow: var(--schatten-pop);
}
.fvn-snackbar__eintrag .fvn-iconbtn { color: rgba(255,255,255,.65); }
.fvn-snackbar__eintrag .fvn-iconbtn:hover { background: rgba(255,255,255,.14); color: #fff; }
.fvn-snackbar__eintrag--success { background: var(--c-gut); }
.fvn-snackbar__eintrag--warning { background: var(--c-warn); }
.fvn-snackbar__eintrag--error   { background: var(--c-fehler); }

/* --- Formular ----------------------------------------------------- */

.fvn-form { display: flex; flex-direction: column; gap: 14px; }

/* --- Seitengeruest ------------------------------------------------
   Kopfleiste ueber die volle Breite, darunter Navigation und Inhalt
   nebeneinander. Als Raster statt Flex, damit die Kopfleiste beide
   Spalten ueberspannt, ohne dass jemand Breiten nachrechnen muss. */

.fvn-layout {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 100vh;
    background: var(--c-fill-2);
}
.fvn-layout > .fvn-appbar { grid-column: 1 / -1; grid-row: 1; position: sticky; top: 0; z-index: 100; }
.fvn-layout > .fvn-drawer { grid-column: 1; grid-row: 2; }
.fvn-layout > .fvn-main,
.fvn-layout > .fvn-main__inhalt { grid-column: 2; grid-row: 2; min-width: 0; }

/* Ohne Navigation (schmale Ansicht) nimmt der Inhalt beide Spalten */
.fvn-layout:not(:has(> .fvn-drawer)) > .fvn-main,
.fvn-layout:not(:has(> .fvn-drawer)) > .fvn-main__inhalt { grid-column: 1 / -1; }

.fvn-main, .fvn-main__inhalt { padding: 16px 18px 22px; overflow-x: hidden; }
.fvn-nav { display: flex; flex-direction: column; padding: 6px 0; }

/* --- Anmeldung und andere leere Seiten ---------------------------- */

.fvn-blank {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: var(--c-fill-2);
}

/* --- Karten-Zusatzteile ------------------------------------------- */


.fvn-list { display: flex; flex-direction: column; }
.fvn-list__eintrag {
    display: flex; align-items: center; gap: 9px;
    min-height: 32px; padding: 0 10px; border-radius: var(--r);
    font-size: 13px;
}
.fvn-list__eintrag--klickbar { cursor: pointer; }
.fvn-list__eintrag--klickbar:hover { background: var(--c-linie-zart); }

.fvn-laden { display: flex; align-items: center; gap: 9px; padding: 14px; color: var(--c-text-2); }
.fvn-chipset { display: flex; flex-wrap: wrap; gap: 5px; }
.fvn-skeleton {
    background: linear-gradient(90deg, var(--c-linie-zart) 25%, var(--c-linie) 37%, var(--c-linie-zart) 63%);
    background-size: 400% 100%; border-radius: var(--r);
    animation: fvn-schimmer 1.3s ease-in-out infinite;
}
@keyframes fvn-schimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.fvn-panels { display: flex; flex-direction: column; gap: 6px; }
.fvn-panel { border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-flaeche); }
.fvn-panel__kopf {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 14px; cursor: pointer; font-size: 13px; font-weight: 500;
    list-style: none;
}
.fvn-panel__kopf::-webkit-details-marker { display: none; }
.fvn-panel__pfeil { margin-left: auto; color: var(--c-text-3); transition: transform .15s var(--ease); }
.fvn-panel[open] .fvn-panel__pfeil { transform: rotate(180deg); }
.fvn-panel__inhalt { padding: 0 14px 14px; }

.fvn-fab {
    position: fixed; right: 20px; bottom: 20px; z-index: 200;
    width: 44px; height: 44px; border: 0; border-radius: var(--r-l);
    background: var(--fvn); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--schatten-pop);
}
.fvn-fab:hover { background: var(--fvn-dunkel); }

.fvn-sort {
    display: inline-flex; align-items: center; gap: 4px;
    border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 0;
}
.fvn-sort:hover { color: var(--c-text); }
.fvn-sort:disabled { cursor: default; }
/* Sortierte Spalte traegt den Pfeil und dunkleren Text; alle anderen zeigen ihn
   erst unter dem Zeiger - sonst steht in jeder Kopfzelle ein Pfeil. */
.fvn-sort--an { color: var(--c-text); font-weight: 600; }
.fvn-sort__pfeil { opacity: .85; }
.fvn-sort__pfeil--leise { opacity: 0; transition: opacity .12s var(--ease); }
.fvn-sort:hover .fvn-sort__pfeil--leise { opacity: .45; }

/* --- Blaetterwerk -------------------------------------------------- */

/* Das Dateifeld steht neben dem Ausloeser, nicht darin - siehe
   FvnFileUpload. Sichtbar ist nur der Ausloeser. */
.fvn-upload__feld { display: none; }
.fvn-upload { display: inline-flex; cursor: pointer; }
.fvn-upload--aus { opacity: .55; cursor: not-allowed; }
.fvn-upload--aus > * { pointer-events: none; }

/* Zeitraum als ein Bedienelement: zwei Datumsfelder in einer Huelle. Vorher
   waren es zwei vollstaendige Felder mit eigener Beschriftung uebereinander -
   in einer Filterleiste sah das aus wie ein halbes Formular. */
.fvn-zeitraum {
    display: flex; align-items: center; gap: 6px;
    min-height: var(--h-ctl); padding: 0 10px;
    background: var(--c-fill);
    border: 1px solid var(--c-linie); border-radius: var(--r);
    transition: background .12s var(--ease), border-color .12s var(--ease);
}
.fvn-zeitraum:hover { border-color: var(--c-linie-kraeftig); }
.fvn-zeitraum:focus-within {
    background: var(--c-flaeche);
    border-color: var(--fvn-300); box-shadow: 0 0 0 3px var(--fvn-50);
}
.fvn-zeitraum--aus { opacity: .6; }
.fvn-zeitraum__symbol { color: var(--c-text-3); flex: none; }
.fvn-zeitraum__ein {
    flex: 1; min-width: 0; width: 100%;
    border: 0; outline: 0; background: transparent;
    font: inherit; font-size: 13px; color: var(--c-text);
    font-variant-numeric: tabular-nums;
}
.fvn-zeitraum__ein::-webkit-calendar-picker-indicator { opacity: .45; cursor: pointer; }
.fvn-zeitraum__ein::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.fvn-zeitraum__bis { flex: none; color: var(--c-text-4); }
.fvn-zeitraum__weg {
    display: flex; flex: none; padding: 2px; border: 0; border-radius: var(--r-s);
    background: none; color: var(--c-text-3); cursor: pointer;
}
.fvn-zeitraum__weg:hover { color: var(--c-text); background: var(--c-neutral-ton); }

/* Ein Filter in der Leiste waechst mit, statt auf einer festen Breite zu
   sitzen und den Rest der Zeile leer zu lassen. */
.leiste-filter { flex: 1 1 190px; min-width: 170px; max-width: 300px; }
.leiste-filter--breit { flex: 1 1 250px; min-width: 220px; max-width: 380px; }

.fvn-chart__svg { width: 100%; height: 120px; fill: var(--fvn); }
.fvn-chart__achse { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--c-text-3); margin-top: 4px; }

/* Der Anker der Trefferliste ist die Feldhuelle - sie ist ohnehin relativ
   gesetzt. Die Liste selbst steht darueber wie bei der Auswahl. */
.fvn-ac__liste {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1201;
    max-height: 300px; overflow: auto;
    background: var(--c-flaeche);
    border: 1px solid var(--c-linie-kraeftig); border-radius: var(--r-l);
    box-shadow: var(--schatten-pop);
}
.fvn-ac__eintrag { padding: 8px 11px; cursor: pointer; border-bottom: 1px solid var(--c-linie-zart); }
.fvn-ac__eintrag:last-child { border-bottom: 0; }
.fvn-ac__eintrag:hover { background: var(--c-fill); }
.fvn-ac__hinweis { display: flex; align-items: center; gap: 8px; padding: 12px; font-size: 12.5px; color: var(--c-text-3); }

.fvn-hidden--smanddown { display: contents; }
@media (max-width: 959px) { .fvn-hidden--smanddown { display: none; } }
@media (min-width: 960px) { .fvn-hidden--mdandup { display: none; } }

/* =================================================================
   MUSTER DER ANWENDUNG
   Diese Klassen standen bisher in den <style>-Bloecken einzelner Seiten -
   .form-content in zwoelf, .section-container in sieben Dateien. Hier
   stehen sie einmal, damit eine Aenderung ueberall wirkt.
   ================================================================= */

/* --- Karte einer Uebersichtsseite --------------------------------- */

.card-header { background: transparent; color: var(--c-text); padding: 14px 16px 0; border-bottom: 0; }

/* --- Abschnitt innerhalb einer Seite oder eines Dialogs ------------ */

.section-container { display: flex; flex-direction: column; }
.section-container + .section-container { margin-top: 18px; }
.section-container:last-child { margin-bottom: 0; }
/* Ein Knopf in einem Abschnitt behaelt seine Breite - die Spalte streckt ihn
   sonst ueber den ganzen Dialog. */
.section-container > .fvn-btn { align-self: flex-start; }

/* --- Formular ------------------------------------------------------ */

.form-content { display: flex; flex-direction: column; gap: 14px; }
.form-content .fvn-grid { row-gap: 14px; }

/* --- Dialoghuelle --------------------------------------------------- */
/* Die Beschriftung, der Inhalt und die Fussleiste eines Dialogs sahen in jeder
   Datei etwas anders aus. Der Dialog bringt sein Aussehen jetzt selbst mit. */

.dialog-container { display: flex; flex-direction: column; gap: 16px; }

.fvn-dialog__kopf .fvn-icon { color: var(--c-text-3); }

/* --- Tabelle ohne Rahmen ------------------------------------------- */

.table-flat { border: 0; box-shadow: none; }
.table-flat thead th { background: transparent; padding-left: 0; padding-right: 0; }
.table-flat tbody td { padding-left: 0; padding-right: 0; }

/* --- Zahlen --------------------------------------------------------- */

.zahl-rechts input, .zahl-rechts .fvn-input { text-align: right; }
.zahlen-spalte, .position-grid-amount {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

/* --- Rubrik: Beschriftung eines Abschnitts ------------------------- */

/* Zwei Abschnitte hintereinander bekommen Luft, der erste keine oben. */
.section-container + .section-container > .fvn-rubrik { margin-top: 4px; }

/* Nur ein Abschnitt, der direkt im Dialogrumpf sitzt, zieht bis an die Kante.
   Steht er in einer Spalte oder einer Karte, bleibt er in seiner Spalte -
   sonst reisst die negative Marge das Raster auseinander. */
.fvn-dialog__inhalt > .fvn-rubrik,
.fvn-dialog__inhalt > .form-content > .fvn-rubrik {
    margin-left: -16px; margin-right: -16px;
    padding-left: 16px; padding-right: 16px;
}

/* Im Dialogfuss ist die bestaetigende Handlung dunkel, nicht gruen. Gruen
   fuehrt auf der erzeugenden Handlung der Seite, die den Dialog geoeffnet hat -
   zwei Gruens nebeneinander streiten um denselben Blick. */
.fvn-dialog__fuss .fvn-btn--filled.fvn-btn--primary {
    background: var(--c-dunkel); border-color: var(--c-dunkel);
}
.fvn-dialog__fuss .fvn-btn--filled.fvn-btn--primary:hover {
    background: var(--c-text); border-color: var(--c-text);
}
/* Der abbrechende Knopf traegt kein Symbol - er ist die leise Wahl. */
.fvn-dialog__fuss .fvn-btn:not(.fvn-btn--filled) .fvn-icon { display: none; }

/* Ein schwebender Knopf gehoert an den Bildschirmrand. Steht er in einem Dialog,
   ist er als gewoehnlicher Knopf gemeint - sonst klebt er am Fensterrand und
   streitet mit der bestaetigenden Handlung im Fuss. */
.fvn-dialog .fvn-fab {
    position: static; width: auto; height: var(--h-ctl-s);
    padding: 0 9px; border-radius: var(--r); box-shadow: none;
    font-size: 12px; gap: 6px;
}

/* =================================================================
   BAUSTEINE AUS DEN ENTWUERFEN
   ================================================================= */

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


/* --- Werkzeugleiste ------------------------------------------------- */

/* Steht sie am Fuss der Karte, sitzt die Linie oben. */
/* In der Leiste steht die Beschriftung neben dem Feld, nicht darueber - sonst
   waechst die Leiste auf drei Zeilen. */

/* --- Suchfeld -------------------------------------------------------- */


/* --- Zustand ---------------------------------------------------------- */


/* --- Dichte Tabellenzelle ---------------------------------------------- */
/* Der Entwurf haelt 36px Zeilenhoehe. Zweizeilige Zellen gibt es nur dort, wo
   die zweite Zeile wirklich etwas traegt - Name plus Kennung. */


/* --- Fortschrittsbalken in der Zeile ------------------------------------ */


/* --- Kuerzel-Gruppe (Funktionstraeger in einer Zeile) ------------------ */


/* --- Leerer Zustand ---------------------------------------------------- */


/* --- Hinweisleiste ------------------------------------------------------ */


/* --- Bento-Reihe des Dashboards ----------------------------------------- */
/* Die Karten liegen nebeneinander und werden gleich hoch. Vorher trug das
   12-Spalten-Raster sie, was bei drei Kacheln zu ungleichen Breiten fuehrte. */

.dash-raster {
    display: grid; gap: 16px; align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.dash-raster > * { min-width: 0; }

/* --- Freigaben ---------------------------------------------------------- */
/* Je Beleg eine eigene Karte: hier ist das richtig, weil jede Zeile eine
   Entscheidung traegt und nicht nur eine Auskunft. */

.fvn-freigaben { display: flex; flex-direction: column; gap: 10px; max-width: 1040px; }
.fvn-freigaben__leiste {
    border: 1px solid var(--c-linie); border-radius: var(--r-l);
    background: var(--c-flaeche); box-shadow: var(--kante);
}

.fvn-freigabe {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 13px 15px;
    background: var(--c-flaeche);
    border: 1px solid var(--c-linie); border-radius: var(--r-l);
    box-shadow: var(--kante);
    transition: border-color .14s var(--ease);
}
.fvn-freigabe:hover { border-color: var(--c-linie-kraeftig); }
.fvn-freigabe__text { flex: 1; min-width: 0; }
.fvn-freigabe__kopf { display: flex; align-items: baseline; gap: 9px; }
.fvn-freigabe__nr { font-size: 12px; color: var(--c-text-3); }
.fvn-freigabe__titel { font-size: 13.5px; font-weight: 600; letter-spacing: -.008em; }
.fvn-freigabe__meta { font-size: 12px; color: var(--c-text-3); margin-top: 2px; }
.fvn-freigabe__notiz {
    font-size: 12.5px; color: var(--c-text-2); margin-top: 7px; line-height: 1.5;
    padding-left: 9px; border-left: 2px solid var(--c-linie);
}
.fvn-freigabe__erledigt { display: flex; align-items: center; gap: 9px; margin-top: 8px; }
.fvn-freigabe__rechts {
    display: flex; flex-direction: column; align-items: flex-end; gap: 9px; flex: none;
}
.fvn-freigabe__betrag {
    font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums;
    font-size: 17px; font-weight: 500; letter-spacing: -.015em;
}
.fvn-freigabe__knoepfe { display: flex; align-items: center; gap: 7px; }

/* --- Handlungen am rechten Zeilenrand ----------------------------------- */
/* Erscheinen erst unter dem Zeiger - sonst flimmern in jeder Zeile zwei
   Symbole und ziehen den Blick von den Daten weg. */

.fvn-zeilenaktionen { display: flex; align-items: center; gap: 2px; opacity: .25; transition: opacity .12s var(--ease); }
tbody tr:hover .fvn-zeilenaktionen { opacity: 1; }
.fvn-zeilenaktionen:focus-within { opacity: 1; }

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

.anmeldung { width: 372px; margin: 0 auto; display: flex; flex-direction: column; }
.anmeldung__marke {
    display: flex; flex-direction: column; align-items: center; gap: 11px; margin-bottom: 22px;
}
.anmeldung__namen { text-align: center; }
.anmeldung__titel { font-size: 17px; font-weight: 600; letter-spacing: -.018em; }
.anmeldung__unter { font-size: 12.5px; color: var(--c-text-3); }
.anmeldung__karte { padding: 18px; }
.anmeldung__felder { display: flex; flex-direction: column; gap: 14px; }
.anmeldung__zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.anmeldung__vergessen { font-size: 11.5px; }
.anmeldung__fuss {
    text-align: center; margin-top: 18px; font-size: 11px; color: var(--c-text-3);
}

/* Der Entwicklerzugang ist bewusst als Fremdkoerper gezeichnet. */
.dev-login {
    display: flex; align-items: center; gap: 10px; margin-top: 12px;
    padding: 9px 12px; border-radius: var(--r);
    background: var(--c-warn-ton); border: 1px dashed var(--c-warn-rand);
}
.dev-login__marke {
    font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9.5px; font-weight: 600;
    letter-spacing: .08em; color: #6d4f06;
    border: 1px solid var(--c-warn-rand); border-radius: var(--r-s); padding: 1px 5px; flex: none;
}
.dev-login__text { flex: 1; min-width: 0; }
.dev-login__titel { font-size: 11.5px; font-weight: 600; color: #6d4f06; }
.dev-login__unter { font-size: 11px; color: #6d4f06; opacity: .85; }
.dev-login__knopf {
    height: var(--h-ctl-s); padding: 0 9px; flex: none;
    border: 1px solid var(--c-warn-rand); border-radius: var(--r);
    background: var(--c-flaeche); color: #6d4f06;
    font: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
}
.dev-login__knopf:hover { background: #fff8e6; }

/* --- Dialogkopf mit Reitern (Lehrgang-Dialog) --------------------------- */

/* Titel, Nummer und Zustand stehen in einer Zeile. Als Folge von Spannen
   umbrach der Zustand bei langen Titeln in die naechste Zeile, und zwischen
   Bezeichnung und Nummer fehlte jeder Abstand. */
.fvn-dialog__titel { display: flex; align-items: center; gap: 10px; }
.dlg-titel {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 14px; font-weight: 600; letter-spacing: -.012em;
}
.dlg-nr { flex: none; font-size: 12px; color: var(--c-text-3); }
.dlg-meta { flex: none; display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--c-text-2); }

/* Der Reiterstreifen sitzt direkt unter der Titelzeile und traegt die Linie. */
.fvn-dialog .reiter { padding: 0 16px; border-bottom: 1px solid var(--c-linie); background: var(--c-flaeche); }
.reiter { display: flex; gap: 18px; }
.reiter__i {
    display: flex; align-items: center; gap: 7px;
    padding: 9px 1px; margin-bottom: -1px;
    font-size: 13px; color: var(--c-text-2); cursor: pointer;
    border-bottom: 2px solid transparent; white-space: nowrap;
}
.reiter__i:hover { color: var(--c-text); }
.reiter__i--an { color: var(--c-text); font-weight: 600; border-bottom-color: var(--c-text); }
.reiter__i--aus { color: var(--c-text-3); cursor: not-allowed; }
.reiter__i--aus:hover { color: var(--c-text-3); }
.reiter__n {
    font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums;
    font-size: 11px; color: var(--c-text-3);
}

/* --- Gliederung mit senkrechter Navigation ------------------------------ */

.fvn-abschnitte {
    display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 28px;
    align-items: start;
}
/* Das Menue sitzt in einer eigenen Karte - so hoch wie seine Eintraege, mehr
   nicht. Kein position:sticky und kein Mitwachsen: beides haengt an Rollstand
   bzw. Inhaltshoehe, und genau daher kam das Huepfen beim Wechseln. */
.fvn-abschnitte__nav {
    display: flex; flex-direction: column; gap: 1px;
    align-self: start;
    padding: 8px;
    background: var(--c-flaeche);
    border: 1px solid var(--c-linie); border-radius: var(--r-l);
    box-shadow: var(--kante);
}
.fvn-abschnitte__nav::-webkit-scrollbar { width: 8px; }
.fvn-abschnitte__nav::-webkit-scrollbar-thumb {
    background: var(--c-linie-kraeftig); border-radius: 999px;
    border: 2px solid var(--c-flaeche);
}
.fvn-abschnitte__i {
    position: relative;
    display: flex; align-items: center; gap: 9px;
    height: 32px; padding: 0 10px; border: 0; border-radius: var(--r);
    flex: none;
    background: transparent; font: inherit; font-size: 12.5px;
    color: var(--c-text-2); cursor: pointer; text-align: left;
}
.fvn-abschnitte__i:hover { background: #eef1f4; color: var(--c-text); }
.fvn-abschnitte__i--an { background: var(--fvn-ton); color: var(--c-text); font-weight: 600; }
.fvn-abschnitte__i--an::before {
    content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
    width: 2px; border-radius: 0 2px 2px 0; background: var(--fvn);
}
.fvn-abschnitte__i .fvn-icon { color: var(--c-text-3); flex: none; }
.fvn-abschnitte__i--an .fvn-icon { color: var(--fvn); }
/* Nicht umbrechen: der gewaehlte Eintrag wird fett, und ein Wort, das dann
   in die zweite Zeile rutscht, schiebt alle Eintraege darunter nach unten -
   genau das Huepfen beim Wechseln. */
.fvn-abschnitte__text {
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fvn-abschnitte__zahl {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 10.5px; color: var(--c-text-3); font-weight: 400;
}
/* Keine Hoechstbreite: der Inhalt nimmt sich, was da ist. */
.fvn-abschnitte__inhalt {
    min-width: 0;
    display: flex; flex-direction: column; gap: 18px;
}
/* Der Bereich selbst ist nur eine Huelle - seine Karten sollen den Abstand
   der Spalte erben, nicht einen eigenen aufmachen. */
.fvn-abschnitt { display: contents; }
/* Einige Bereiche bringen noch einen eigenen Behaelter mit (die Einblendung).
   Der reicht den Abstand an seine Karten weiter, statt sie zu verkleben. */
/* Der Bereich loest sich per display:contents auf - im DOM steht er aber
   weiterhin dazwischen. Mit "> " traf die Regel deshalb nie, und auf der
   Sperrliste klebten die beiden Karten aneinander. */
.fvn-abschnitt > .animate__fadeIn {
    display: flex; flex-direction: column; gap: 18px;
}

@media (max-width: 860px) {
    .fvn-abschnitte { grid-template-columns: 1fr; }
    .fvn-abschnitte__nav { flex-direction: row; flex-wrap: wrap; position: static; }
}


/* =================================================================
   BAUSTEINE
   Masse und Anmutung nach der Vorlage: weiche Radien, getoente runde
   Symbolplaketten, Zustand als Pille, luftige Zeilen.
   ================================================================= */

/* --- Karte ---------------------------------------------------------- */

.fvn-card, .dashboard-card {
    background: var(--c-flaeche);
    border: 1px solid var(--c-linie);
    border-radius: var(--r-xl);
    box-shadow: var(--kante);
    overflow: hidden;
    transition: box-shadow .16s var(--ease), border-color .16s var(--ease);
}
.dashboard-card:hover { box-shadow: var(--kante-2); }
.fvn-card--flach { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.fvn-card--eingelassen { background: var(--c-fill); border-radius: var(--r); box-shadow: none; }
.fvn-card__inhalt { padding: 20px; }

/* Kartenkopf: runde Symbolplakette, Titel, darunter eine Zeile Erklaerung. */
.fvn-card__kopf, .section-head {
    display: flex; align-items: center; gap: 12px;
    min-height: 64px; padding: 16px 20px;
    border-bottom: 1px solid var(--c-linie);
}
.section-head { margin: 0; }
.page-surface > .section-head,
.section-container > .section-head {
    margin: 0 0 14px; padding: 0; border-bottom: 0; min-height: 0;
}

/* Die Plakette: getoenter Kreis, Symbol in der Marken- oder Bedeutungsfarbe. */
.section-icon, .fvn-plakette {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: none;
    border-radius: 999px;
    background: var(--fvn-50); color: var(--fvn);
}
.section-icon .fvn-icon, .fvn-plakette .fvn-icon { width: 18px; height: 18px; }
.fvn-plakette--warn  { background: var(--c-warn-ton);   color: var(--c-warn); }
.fvn-plakette--rot   { background: var(--c-fehler-ton); color: var(--c-fehler); }
.fvn-plakette--blau  { background: var(--c-blau-ton);   color: var(--c-blau); }
.fvn-plakette--grau  { background: var(--c-neutral-ton); color: var(--c-text-3); }

.section-title, .fvn-card__titel {
    font-size: 15px; font-weight: 600; letter-spacing: -.011em; color: var(--c-text);
}
.fvn-card__sub, .section-sub { font-size: 13px; color: var(--c-text-3); }
.section-spacer { flex: 1; height: auto; }

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

.fvn-seitenkopf {
    display: flex; align-items: flex-start; gap: 16px;
    margin-bottom: 20px; min-width: 0;
}
.fvn-seitenkopf__text { min-width: 0; }
.fvn-seitenkopf__titel {
    font-size: 28px; font-weight: 700; letter-spacing: -.025em;
    color: var(--c-text); line-height: 1.2;
}
.fvn-seitenkopf__unter { font-size: 14px; color: var(--c-text-3); margin-top: 4px; }
.fvn-seitenkopf__aktionen { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }

/* --- Kennzahl -------------------------------------------------------- */

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 16px; }

.stat-tile {
    position: relative;
    display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 14px; align-items: center;
    padding: 18px 20px;
    background: var(--c-flaeche);
    border: 1px solid var(--c-linie);
    border-radius: var(--r-xl);
    box-shadow: var(--kante);
    transition: box-shadow .16s var(--ease);
}
.stat-tile.clickable { cursor: pointer; }
.stat-tile.clickable:hover { box-shadow: var(--kante-2); }
.stat-tile.is-active { border-color: var(--fvn-300); }

/* Die Plakette links traegt die Bedeutung - das ersetzt die Akzentkante. */
.stat-tile__icon {
    display: inline-flex; align-items: center; justify-content: center;
    grid-row: 1; grid-column: 1;
    width: 38px; height: 38px; border-radius: 999px;
    background: var(--fvn-50); color: var(--fvn);
}
.stat-tile__icon .fvn-icon { width: 18px; height: 18px; }
.stat-tile--warning .stat-tile__icon { background: var(--c-warn-ton);   color: var(--c-warn); }
.stat-tile--error   .stat-tile__icon { background: var(--c-fehler-ton); color: var(--c-fehler); }
.stat-tile--info    .stat-tile__icon { background: var(--c-blau-ton);   color: var(--c-blau); }
.stat-tile--neutral .stat-tile__icon { background: var(--c-neutral-ton); color: var(--c-text-3); }

.stat-tile__body { grid-column: 2; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat-tile__label {
    font-size: 12px; font-weight: 600; letter-spacing: .01em;
    color: var(--c-text-3);
}
.stat-tile__value {
    font-size: 28px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15;
    color: var(--c-text);
}
.stat-tile__sub { font-size: 13px; color: var(--c-text-3); }
.stat-tile__badge {
    position: absolute; right: 16px; top: 14px;
    padding: 2px 8px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600;
    background: var(--c-fehler-ton); color: var(--c-fehler); border: 1px solid var(--c-fehler-rand);
}

/* --- Zustand als Pille ----------------------------------------------- */

.fvn-status, .fvn-marke {
    display: inline-flex; align-items: center; gap: 7px;
    height: 26px; padding: 0 11px; border-radius: 999px;
    font-size: 13px; font-weight: 500; white-space: nowrap;
    background: var(--c-neutral-ton); color: var(--c-text-2);
    border: 1px solid transparent;
}
.fvn-status__punkt { width: 7px; height: 7px; border-radius: 999px; flex: none; background: currentColor; }
.fvn-status__zusatz { color: inherit; opacity: .7; }

.fvn-status:has(.fvn-status__punkt--gruen),
.fvn-marke--gruen { background: var(--c-gut-ton);    color: var(--c-gut);    border-color: var(--c-gut-rand); }
.fvn-status:has(.fvn-status__punkt--warn),
.fvn-marke--warn  { background: var(--c-warn-ton);   color: var(--c-warn);   border-color: var(--c-warn-rand); }
.fvn-status:has(.fvn-status__punkt--rot),
.fvn-marke--rot   { background: var(--c-fehler-ton); color: var(--c-fehler); border-color: var(--c-fehler-rand); }
.fvn-status:has(.fvn-status__punkt--blau),
.fvn-marke--blau  { background: var(--c-blau-ton);   color: var(--c-blau);   border-color: var(--c-blau-rand); }
.fvn-status:has(.fvn-status__punkt--grau),
.fvn-marke--grau  { background: var(--c-neutral-ton); color: var(--c-text-2); border-color: var(--c-linie); }

/* --- Knoepfe ---------------------------------------------------------- */

.fvn-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: var(--h-ctl); padding: 0 16px;
    border: 1px solid var(--c-linie-kraeftig); border-radius: var(--r);
    font: inherit; font-size: 14px; font-weight: 500;
    color: var(--c-text); background: var(--c-flaeche);
    box-shadow: var(--kante); cursor: pointer; white-space: nowrap;
    transition: background .14s var(--ease), border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.fvn-btn:hover { background: var(--c-fill); }
.fvn-btn:disabled { color: var(--c-text-4); background: var(--c-fill); cursor: not-allowed; box-shadow: none; }
.fvn-btn.fvn-s-small { height: var(--h-ctl-s); padding: 0 12px; font-size: 13px; }
.fvn-btn.fvn-s-large { height: 44px; padding: 0 20px; font-size: 15px; }
/* Ein Knopf bleibt in seinem Behaelter. Ohne das lief "Beleg erfassen" aus
   seiner Rasterzelle heraus und stand halb ausserhalb der Karte. */
.fvn-btn { max-width: 100%; min-width: 0; }
.fvn-btn--voll { width: 100%; }

.fvn-btn--outlined { background: var(--c-flaeche); }
.fvn-btn--outlined.fvn-btn--primary { border-color: var(--fvn-300); color: var(--fvn); }
.fvn-btn--outlined.fvn-btn--error   { border-color: var(--c-fehler-rand); color: var(--c-fehler); }

/* Gefuellt heisst: dunkler Grund, weisse Schrift. Der Grund steht schon hier,
   damit eine Farbe ohne eigene Regel nicht weiss auf weiss ergibt - genau das
   passierte bei Color.Dark, und der Knopf war unsichtbar. */
.fvn-btn--filled {
    font-weight: 600; color: #fff; border-color: transparent;
    background: var(--c-dunkel);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16),
                0 1px 2px rgba(16,24,40,.16);
}
.fvn-btn--filled:hover { background: #000; }
.fvn-btn--filled.fvn-btn--dark    { background: var(--c-dunkel); border-color: var(--c-dunkel); }
.fvn-btn--filled.fvn-btn--dark:hover { background: #000; }
.fvn-btn--filled.fvn-btn--success { background: var(--c-gut); border-color: var(--c-gut); }
.fvn-btn--filled.fvn-btn--warning { background: var(--c-warn); border-color: var(--c-warn); }
.fvn-btn--filled.fvn-btn--info    { background: var(--c-blau); border-color: var(--c-blau); }
.fvn-btn--filled.fvn-btn--primary { background: var(--fvn); border-color: var(--fvn); }
.fvn-btn--filled.fvn-btn--primary:hover { background: var(--fvn-600); }
.fvn-btn--filled.fvn-btn--neutral { background: var(--c-dunkel); border-color: var(--c-dunkel); }
.fvn-btn--filled.fvn-btn--neutral:hover { background: #000; }
.fvn-btn--filled.fvn-btn--error { background: var(--c-fehler); border-color: var(--c-fehler); }
.fvn-btn--filled:disabled { background: var(--c-fill); border-color: var(--c-linie); color: var(--c-text-4); }

.fvn-btn--text { border-color: transparent; background: transparent; box-shadow: none; color: var(--c-text-2); }
.fvn-btn--text:hover { background: var(--c-fill); border-color: transparent; }
.fvn-btn--text.fvn-btn--primary { color: var(--fvn); }
.fvn-btn--text.fvn-btn--error { color: var(--c-fehler); }

.fvn-iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--h-ctl); height: var(--h-ctl); flex: none;
    border: 0; border-radius: var(--r); background: transparent;
    color: var(--c-text-3); cursor: pointer;
    transition: background .14s var(--ease), color .14s var(--ease);
}
.fvn-iconbtn:hover { background: var(--c-fill); color: var(--c-text); }
.fvn-iconbtn:disabled { color: var(--c-linie-kraeftig); cursor: not-allowed; background: transparent; }
.fvn-iconbtn.fvn-s-small { width: var(--h-ctl-s); height: var(--h-ctl-s); }
.fvn-iconbtn--primary { color: var(--fvn); }
.fvn-iconbtn--error:hover { background: var(--c-fehler-ton); color: var(--c-fehler); }

/* --- Werkzeugleiste und Suche ---------------------------------------- */

.fvn-leiste {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 16px 20px;
    border-bottom: 1px solid var(--c-linie);
}
.fvn-leiste--fuss { border-bottom: 0; border-top: 1px solid var(--c-linie); background: var(--c-fill); }
.fvn-leiste__rechts { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.fvn-leiste .fvn-feld { flex-direction: row; align-items: center; gap: 8px; }
.fvn-leiste .fvn-feld__label { font-size: 13px; font-weight: 400; color: var(--c-text-3); white-space: nowrap; }

.fvn-suche {
    /* Dieselbe Abstufung wie ein Eingabefeld: ruhig getoent, unter dem Zeiger
       tritt die Linie hervor, im Fokus wird es weiss. Vorher war es weiss mit
       kraeftigem Rahmen und Schatten und fiel aus der Reihe. */
    display: flex; align-items: center; gap: 10px;
    flex: 1 1 260px; min-width: 240px; max-width: 380px;
    height: var(--h-ctl); padding: 0 12px;
    background: var(--c-fill);
    border: 1px solid var(--c-linie); border-radius: var(--r);
    transition: background .12s var(--ease), border-color .12s var(--ease);
}
.fvn-suche:hover { border-color: var(--c-linie-kraeftig); }
.fvn-suche:focus-within {
    background: var(--c-flaeche);
    border-color: var(--fvn-300); box-shadow: 0 0 0 3px var(--fvn-50);
}
.fvn-suche__lupe { color: var(--c-text-3); flex: none; width: 17px; height: 17px; }
.fvn-suche__ein {
    flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
    font: inherit; font-size: 14px; color: var(--c-text);
}
.fvn-suche__ein::placeholder { color: var(--c-text-4); }
.fvn-suche__ein::-webkit-search-cancel-button { display: none; }
.fvn-suche__weg { border: 0; background: none; padding: 0; cursor: pointer; color: var(--c-text-3); display: flex; flex: none; }
.fvn-suche__weg:hover { color: var(--c-text); }

/* --- Tabelle ---------------------------------------------------------- */

.fvn-table { width: 100%; overflow: auto; }
.fvn-table table { width: 100%; border-collapse: collapse; }
.fvn-table thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--c-fill);
    border-bottom: 1px solid var(--c-linie-kraeftig);
    height: 40px; padding: 0 20px; text-align: left;
    font-size: 12px; font-weight: 600; letter-spacing: .02em;
    color: var(--c-text-2); white-space: nowrap;
}
.fvn-table tbody td {
    padding: 0 20px; height: var(--h-zeile);
    border-bottom: 1px solid var(--c-linie);
    font-size: 14px; vertical-align: middle; color: var(--c-text);
}
/* Jede zweite Zeile leicht getoent. Ohne das lagen alle Zeilen im selben
   Weiss und liessen sich beim Ueberfliegen nicht auseinanderhalten. */
.fvn-table tbody tr:nth-child(even) td { background: #fafbfc; }
.fvn-table tbody tr:last-child td { border-bottom: 0; }
.fvn-table--hover tbody tr:hover td { background: var(--c-neutral-ton); }
.fvn-table tbody tr.an td { background: var(--fvn-50); }
.fvn-table--dicht tbody td { height: 44px; }
/* Eine virtualisierte Tabelle braucht eine begrenzte Hoehe. Ohne sie spannt
   Virtualize einen Platzhalter ueber alle Zeilen auf - die Seite wurde 18.000px
   lang, und Zeilen tauchten mitten im Bild auf. */
.fvn-table--virtuell { max-height: calc(100vh - 330px); min-height: 320px; overflow-y: auto; }
.fvn-table__leer { padding: 32px 20px; text-align: center; }
.fvn-table__fuss { border-top: 1px solid var(--c-linie); background: var(--c-fill); }
/* Summe links, Blaetterwerk rechts - in allen Listen gleich. */
.fvn-table__fussleiste {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 8px 16px;
}
.fvn-table__fussleiste > .fvn-pager { margin-left: auto; }

/* --- Zelle mit zwei Zeilen -------------------------------------------- */

.fvn-zelle { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fvn-zelle__haupt {
    font-size: 14px; font-weight: 600; color: var(--c-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fvn-zelle__neben {
    font-size: 13px; color: var(--c-text-3); line-height: 1.4;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- Kuerzel und Kennungen -------------------------------------------- */

.fvn-kuerzel { display: flex; align-items: center; gap: 5px; }
.fvn-kuerzel__k {
    display: inline-flex; align-items: center; justify-content: center;
    height: 26px; min-width: 40px; padding: 0 9px;
    border-radius: var(--r-s); background: var(--c-neutral-ton);
    font-size: 12px; font-weight: 600; color: var(--c-text-2);
}
.fvn-kuerzel__mehr { font-size: 12.5px; color: var(--c-text-3); }

/* Eine Kennung sitzt in einer ruhigen Pille - so ist sie als Nummer erkennbar. */
.fvn-kennung {
    display: inline-flex; align-items: center;
    height: 28px; padding: 0 10px; border-radius: var(--r-s);
    background: var(--c-fill); border: 1px solid var(--c-linie);
    font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums;
    font-size: 12.5px; color: var(--c-text-2); white-space: nowrap;
}

/* --- Fortschritt ------------------------------------------------------- */

.fvn-fort { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fvn-fort__bahn {
    flex: 1; min-width: 60px; height: 8px; border-radius: 999px;
    background: var(--c-linie); overflow: hidden;
}
.fvn-fort__fuell { height: 100%; background: var(--fvn); border-radius: 999px; }
.fvn-fort__fuell--voll { background: var(--c-warn); }
.fvn-fort__text {
    font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums;
    font-size: 13px; color: var(--c-text-2); flex: none;
}

/* --- Blaetterwerk ------------------------------------------------------ */

.fvn-pager { display: flex; align-items: center; gap: 12px; justify-content: flex-end; padding: 14px 20px; }
.fvn-pager__text { font-size: 13px; color: var(--c-text-3); }
.fvn-pager__groesse { display: flex; align-items: center; gap: 8px; }
.fvn-pager__auswahl {
    height: var(--h-ctl-s); padding: 0 8px;
    border: 1px solid var(--c-linie-kraeftig); border-radius: var(--r);
    background: var(--c-flaeche); color: var(--c-text);
    font: inherit; font-size: 13px; cursor: pointer;
}

/* --- Leerer Zustand ---------------------------------------------------- */

.fvn-leer {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 56px 20px; text-align: center;
}
.fvn-leer__icon { width: 48px; height: 48px; color: var(--c-linie-kraeftig); }
.fvn-leer__titel { font-size: 16px; font-weight: 600; color: var(--c-text); }
.fvn-leer__text { font-size: 14px; color: var(--c-text-3); max-width: 380px; line-height: 1.6; }
.fvn-leer .fvn-btn { margin-top: 6px; }

/* --- Rubrik ------------------------------------------------------------ */

.fvn-rubrik {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 14px; padding-bottom: 10px;
    border-bottom: 1px solid var(--c-linie);
}
.fvn-rubrik__text {
    font-size: 15px; font-weight: 600; letter-spacing: -.011em; color: var(--c-text);
}
.fvn-rubrik__icon { color: var(--fvn); width: 17px; height: 17px; }
.fvn-rubrik__rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* --- Hinweisleiste ------------------------------------------------------ */

.fvn-hinweis {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px; border-radius: var(--r-l);
    border: 1px solid; font-size: 14px; line-height: 1.55;
}
.fvn-hinweis__icon { flex: none; margin-top: 1px; width: 18px; height: 18px; }
.fvn-hinweis__text { flex: 1; min-width: 0; }
.fvn-hinweis--warn  { background: var(--c-warn-ton);   border-color: var(--c-warn-rand);   color: #93370d; }
.fvn-hinweis--warn  .fvn-hinweis__icon { color: var(--c-warn); }
.fvn-hinweis--rot   { background: var(--c-fehler-ton); border-color: var(--c-fehler-rand); color: #912018; }
.fvn-hinweis--rot   .fvn-hinweis__icon { color: var(--c-fehler); }
.fvn-hinweis--blau  { background: var(--c-blau-ton);   border-color: var(--c-blau-rand);   color: #175cd3; }
.fvn-hinweis--blau  .fvn-hinweis__icon { color: var(--c-blau); }
.fvn-hinweis--gruen { background: var(--c-gut-ton);    border-color: var(--c-gut-rand);    color: var(--fvn-dunkel); }
.fvn-hinweis--gruen .fvn-hinweis__icon { color: var(--c-gut); }
.fvn-hinweis .fvn-btn { align-self: center; flex: none; }

/* --- Geruest: Kopfleiste und Navigation --------------------------------- */

.fvn-appbar {
    position: sticky;
    display: flex; align-items: center; gap: 16px;
    height: var(--h-kopf); padding: 0 20px;
    background: var(--c-flaeche); border-bottom: 1px solid var(--c-linie);
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.fvn-drawer {
    width: var(--b-nav); flex: none;
    background: var(--c-nav); border-right: 1px solid var(--c-linie);
    /* Bleibt beim Scrollen des Inhalts stehen und begrenzt sich selbst, damit
       die Linkliste darin scrollen kann statt die ganze Seite zu verlaengern. */
    position: sticky; top: var(--h-kopf);
    height: calc(100vh - var(--h-kopf));
    padding: 0; overflow: hidden;
}

/* Zugeklappt: Den Zustand "zu" gab es gar nicht - der Merker am Element sagte
   nur "offen", eine Gegenregel fehlte. Deshalb blieb der Knopf in der
   Kopfleiste wirkungslos. Die Spalte faellt auf Breite 0, das Raster zieht nach. */
/* Ausblenden statt auf Breite 0 setzen: die Rasterspalte ist "auto" und
   bemisst sich am Inhalt - eine Breite von 0 haette sie nicht schrumpfen
   lassen. */
.fvn-drawer:not(.fvn-drawer--offen) { display: none; }

/* --- Aufbau der Navigation ---------------------------------------------- */

.nav { display: flex; flex-direction: column; height: 100%; min-height: 0; }
/* Nur dieser Teil scrollt. */
.nav__liste { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; }
.nav__liste::-webkit-scrollbar { width: 10px; }
.nav__liste::-webkit-scrollbar-thumb {
    background: var(--c-linie-kraeftig); border-radius: 999px;
    border: 3px solid var(--c-nav);
}
.nav__liste::-webkit-scrollbar-thumb:hover { background: var(--c-text-4); }

.nav__fuss { flex: none; padding: 12px; border-top: 1px solid var(--c-linie); }
.nav__fuss form { margin: 0; }
.nav__abmelden {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: var(--h-ctl); padding: 0 14px;
    border: 1px solid var(--c-linie-kraeftig); border-radius: var(--r);
    background: var(--c-flaeche); color: var(--c-text-2);
    font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
    box-shadow: var(--kante);
    transition: background .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease);
}
.nav__abmelden:hover {
    background: var(--c-fehler-ton); border-color: var(--c-fehler-rand); color: var(--c-fehler);
}
.fvn-nav__link {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    min-height: 42px; margin: 2px 0; padding: 0 12px;
    border-radius: var(--r); text-decoration: none;
    font-size: 14px; font-weight: 500; color: var(--c-text-2);
    transition: background .14s var(--ease), color .14s var(--ease);
}
.fvn-nav__link:hover { background: var(--c-fill); color: var(--c-text); text-decoration: none; }
.fvn-nav__link.active { background: var(--fvn-50); color: var(--fvn-dunkel); font-weight: 600; }
.fvn-nav__icon { color: var(--c-text-3); flex: none; width: 19px; height: 19px; }
.fvn-nav__link.active .fvn-nav__icon { color: var(--fvn); }
.fvn-nav__text { flex: 1; min-width: 0; }
.nav-section {
    padding: 20px 12px 6px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
    color: var(--c-text-4);
}

/* --- Markenblock und Konto in der Kopfleiste ---------------------------- */

.marke {
    display: flex; align-items: center; gap: 12px; flex: none;
    width: calc(var(--b-nav) - 20px);
    text-decoration: none; color: inherit;
}
.marke:hover { text-decoration: none; }
.marke__text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.marke__name { font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--fvn); }
.marke__zusatz { font-size: 11.5px; color: var(--c-text-3); }

.page-title { font-size: 15px; font-weight: 600; letter-spacing: -.011em; color: var(--c-text); }

.konto {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 8px 4px 4px; border-radius: 999px; cursor: pointer;
    transition: background .14s var(--ease);
}
.konto:hover { background: var(--c-fill); }
.konto__kreis {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex: none; border-radius: 999px;
    background: var(--fvn); color: #fff;
    font-size: 13px; font-weight: 600; letter-spacing: .01em;
}
.konto__text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.konto__name { font-size: 14px; font-weight: 600; color: var(--c-text); white-space: nowrap; }
.konto__rolle { font-size: 12px; color: var(--c-text-3); white-space: nowrap; }
.konto__pfeil { color: var(--c-text-3); flex: none; }

/* Die Glocke steht in der Kopfleiste als eigene Flaeche, nicht als blasses
   Symbol daneben. Der weisse Ring an der Zahl trennt sie vom Symbol darunter. */
.fvn-appbar .fvn-menu__ausloeser .fvn-iconbtn {
    background: var(--c-fill); color: var(--c-text-2);
    transition: background .14s var(--ease), color .14s var(--ease);
}
.fvn-appbar .fvn-menu__ausloeser:hover .fvn-iconbtn { background: var(--c-neutral-ton); color: var(--c-text); }

/* Die Zahl an der Glocke war auf 10x10 gedeckelt und gruen - die Ziffer wurde
   abgeschnitten, und Gruen sagt "alles gut", wo etwas offen ist. */
.fvn-appbar .fvn-badge__punkt {
    top: -5px; right: -5px;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--c-fehler); border: 2px solid var(--c-flaeche);
    font-size: 10.5px; font-weight: 600;
}


/* Schliessen-Knopf fuer Dialoge ohne Kopfzeile. Schwebt oben rechts ueber dem
   Inhalt, damit auch ein reiner Inhaltsdialog einen Ausgang hat. */
.fvn-dialog__weg {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border: 1px solid var(--c-linie); border-radius: 999px;
    background: var(--c-flaeche); color: var(--c-text-3);
    box-shadow: var(--kante); cursor: pointer;
    transition: background .14s var(--ease), color .14s var(--ease);
}
.fvn-dialog__weg:hover { background: var(--c-fill); color: var(--c-text); }
/* Der Kasten muss positioniert sein, damit der Knopf sich daran ausrichtet. */
.fvn-dialog { position: relative; }
.fvn-dialog:focus, .fvn-dialog:focus-visible { outline: none; }

/* --- Kachel eines eigenen Lehrgangs ------------------------------------- */

.lg-raster {
    display: grid; gap: 14px; padding: 20px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.lg-kachel {
    display: flex; flex-direction: column; gap: 12px;
    padding: 16px;
    background: var(--c-flaeche);
    border: 1px solid var(--c-linie); border-radius: var(--r-l);
    box-shadow: var(--kante);
    transition: box-shadow .16s var(--ease);
}
.lg-kachel:hover { box-shadow: var(--kante-2); }
.lg-kachel__kopf { display: flex; align-items: flex-start; gap: 12px; }
.lg-kachel__namen { min-width: 0; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.lg-kachel__titel {
    font-size: 14.5px; font-weight: 600; letter-spacing: -.011em; color: var(--c-text);
    line-height: 1.35;
}

/* Beschriftung links, Wert rechts - liest sich als Datenblatt. */
.lg-kachel__daten {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px;
    margin: 0; padding: 12px 0 0; border-top: 1px solid var(--c-linie);
}
.lg-kachel__daten dt { font-size: 12.5px; color: var(--c-text-3); white-space: nowrap; }
.lg-kachel__daten dd {
    margin: 0; font-size: 13px; color: var(--c-text); text-align: right;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lg-kachel__fuss {
    display: flex; align-items: center; gap: 10px; margin-top: auto;
    padding-top: 12px; border-top: 1px solid var(--c-linie);
}
.lg-kachel__fuss .fvn-btn { margin-left: auto; }

/* --- Belegart waehlen ---------------------------------------------------- */
/* Die Beschreibung sitzt an der Belegart, nicht als Hilfetext unter einem
   Auswahlfeld - der machte das Feld hoeher als sein Nachbar und liess den
   Knopf schief in der Zeile sitzen. */

.belegart-wahl {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.belegart-wahl__k {
    display: flex; flex-direction: column; gap: 6px;
    padding: 14px 16px; cursor: pointer;
    background: var(--c-flaeche);
    border: 1px solid var(--c-linie); border-radius: var(--r-l);
    box-shadow: var(--kante);
    transition: border-color .14s var(--ease), background .14s var(--ease);
}
.belegart-wahl__k:hover { border-color: var(--c-linie-kraeftig); }
.belegart-wahl__k--an { background: var(--fvn-50); border-color: var(--fvn-200); }
.belegart-wahl__kopf { display: flex; align-items: center; gap: 10px; }
.belegart-wahl__name { font-size: 14px; font-weight: 600; color: var(--c-text); }
.belegart-wahl__haken { margin-left: auto; color: var(--fvn); flex: none; }
.belegart-wahl__text { font-size: 12.5px; color: var(--c-text-3); line-height: 1.5; }
.belegart-wahl__zahl { font-size: 12px; color: var(--c-text-4); }

/* --- Auswahlfeld --------------------------------------------------------- */
/* Ausloeser wie ein Eingabefeld, darunter eine Liste mit richtigen Zeilen.
   Ein <option> konnte nur Text tragen und liess sich nicht gestalten. */

.fvn-auswahl { position: relative; }

.fvn-auswahl__ausloeser {
    /* Die Huelle der Auswahl ist zurueckgesetzt, den Kasten bringt der
       Ausloeser selbst mit. Er muss deshalb dieselben 9px nach links
       ausgreifen wie ein Eingabefeld - und rechts genauso weit reichen,
       sonst steht er ein paar Pixel schmaler als die Felder darunter. */
    display: flex; align-items: center; gap: 9px; width: calc(100% + 9px);
    min-height: var(--h-feld); padding: 0 9px; margin-left: -9px;
    background: var(--c-fill);
    border: 1px solid var(--c-linie); border-radius: var(--r-s);
    font: inherit; font-size: 14px; color: var(--c-text);
    text-align: left; cursor: pointer;
    transition: background .12s var(--ease), border-color .12s var(--ease);
}
.fvn-auswahl__ausloeser:hover:not(:disabled) { border-color: var(--c-linie-kraeftig); }
.fvn-auswahl__ausloeser:focus-visible,
.fvn-auswahl__ausloeser:focus {
    outline: none; background: var(--c-flaeche);
    border-color: var(--fvn-300); box-shadow: 0 0 0 3px var(--fvn-50);
}
.fvn-auswahl__ausloeser:disabled {
    background: var(--c-linie-zart); color: var(--c-text-4); cursor: not-allowed;
}
.fvn-auswahl__wert { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fvn-auswahl__leer {
    flex: 1; min-width: 0; color: var(--c-text-4);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fvn-auswahl__adorn { color: var(--c-text-3); flex: none; }
.fvn-auswahl__pfeil { color: var(--c-text-3); flex: none; }
.fvn-auswahl__weg { display: flex; color: var(--c-text-3); flex: none; border-radius: var(--r-s); }
.fvn-auswahl__weg:hover { color: var(--c-text); }

/* Faengt den Klick daneben ab - ohne JavaScript. */
.fvn-auswahl__schirm { position: fixed; inset: 0; z-index: 1200; }

.fvn-auswahl__liste {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1201;
    max-height: 320px; overflow-y: auto; padding: 6px;
    background: var(--c-flaeche);
    border: 1px solid var(--c-linie); border-radius: var(--r-l);
    box-shadow: var(--schatten-pop);
}
.fvn-auswahl__zeile {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 11px; border: 0; border-radius: var(--r);
    background: transparent; font: inherit; font-size: 14px; color: var(--c-text);
    text-align: left; cursor: pointer;
}
.fvn-auswahl__zeile:hover { background: var(--c-fill); }
.fvn-auswahl__zeile--an { background: var(--fvn-50); color: var(--fvn-dunkel); }
/* Wo die Tastatur gerade steht. Bewusst anders als "gewaehlt": das eine
   ist der Wert, das andere nur der Zeiger. */
.fvn-auswahl__zeile--hell { background: var(--c-neutral-ton); }
.fvn-auswahl__zeile--hell.fvn-auswahl__zeile--an { background: var(--fvn-100); }
.fvn-auswahl__zeile--an:hover { background: var(--fvn-50); }
.fvn-auswahl__zeile--leer { color: var(--c-text-3); }
.fvn-auswahl__zeileninhalt { flex: 1; min-width: 0; }
.fvn-auswahl__haken { color: var(--fvn); flex: none; }

/* Zweizeilige Eintraege: Name oben, Kennung oder Beiwerk darunter. */
.fvn-auswahl__zeileninhalt .fvn-t-caption,
.fvn-auswahl__zeileninhalt .fvn-zelle__neben { display: block; margin-top: 1px; }

/* =================================================================
   FORMULAR: BESCHRIFTUNG LINKS, FELD RECHTS
   Die Beschriftungsspalte richtet sich an der laengsten Beschriftung aus -
   alle Felder beginnen dadurch auf derselben Kante. Das macht ein Raster mit
   zwei Spalten von allein; "display: contents" an der Feldhuelle sorgt dafuer,
   dass Beschriftung und Feld direkte Kinder dieses Rasters werden statt in
   ihrem eigenen Kaestchen zu sitzen.
   ================================================================= */

.fvn-formular {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px 20px;
    align-items: center;
}
.fvn-formular > .fvn-feld { display: contents; }
/* Ein Trenner laeuft immer ueber beide Spalten. */
.fvn-formular > .fvn-divider { grid-column: 1 / -1; margin: 2px 0; }
/* Chip-Auswahlen im Benutzerdialog: Titel wie eine Beschriftung, darunter
   die Marken. Vorher lag jede in einer eigenen Rasterzelle. */
.rollen-block__titel { font-size: 13px; font-weight: 500; color: var(--c-text-2); margin-bottom: 8px; }

/* Mehrere Schalter untereinander, jeder mit seiner eigenen Beschriftung. */
.fvn-schaltergruppe { display: flex; flex-direction: column; gap: 12px; }
/* Linksbuendig: die Beschriftungen stehen untereinander auf einer Kante und
   lassen sich von oben nach unten ueberfliegen. */
.fvn-formular .fvn-feld__label {
    justify-self: start; text-align: left;
    max-width: 240px; line-height: 1.35;
}
/* Hilfe- und Fehlertext gehoeren unter das Feld, nicht unter die Beschriftung. */
.fvn-formular .fvn-feld__hilfe,
.fvn-formular .fvn-formular__hinweis,
.fvn-formular .fvn-feld__fehler { grid-column: 2; margin-top: -8px; }

/* Etwas, das ueber die ganze Breite laeuft: Trenner, Hinweis, Rubrik. */
.fvn-formular > .fvn-formular__voll { grid-column: 1 / -1; }

/* Ein hohes Feld (mehrzeilig) zieht die Beschriftung nach oben. */
.fvn-formular > .fvn-feld--hoch { align-self: start; }
.fvn-formular .fvn-feld--hoch .fvn-feld__label { align-self: start; padding-top: 9px; }

/* Schmal: unter 640px stapelt es sich wieder, sonst bleibt fuer das Feld nichts. */
@media (max-width: 640px) {
    .fvn-formular { grid-template-columns: 1fr; gap: 4px; }
    .fvn-formular .fvn-feld__label { justify-self: start; text-align: left; }
    .fvn-formular .fvn-feld__hilfe,
    .fvn-formular .fvn-feld__fehler { grid-column: 1; margin-top: 0; }
    .fvn-formular > .fvn-feld + .fvn-feld { margin-top: 10px; }
}

/* --- Karteninhalt ------------------------------------------------------- */
/* Stand bisher nur als Style am Element und fehlte ueberall dort, wo eine
   Karte ihren Inhalt selbst mitbringt. */
.karte__koerper { padding: 18px 20px; }
.karte__koerper > :last-child { margin-bottom: 0; }

/* Eine Rubrik direkt in einer Karte traegt deren Polsterung - sonst klebt sie
   an der Kante. */
.fvn-card > .fvn-rubrik {
    margin: 0; padding: 14px 20px 12px;
}
/* Polstert die Karte schon selbst, faellt die Polsterung der Rubrik weg -
   sonst addieren sich beide und die Ueberschrift rueckt von der Kante ab. */
.fvn-card.pa-2 > .fvn-rubrik,
.fvn-card.pa-3 > .fvn-rubrik,
.fvn-card.pa-4 > .fvn-rubrik,
.fvn-card.pa-5 > .fvn-rubrik,
.fvn-card.pa-6 > .fvn-rubrik { padding: 0 0 10px; margin-bottom: 14px; }
.fvn-card > .fvn-rubrik + .karte__koerper { padding-top: 16px; }
/* Eine Tabelle direkt unter einer Rubrik braucht Luft: sonst stossen die
   Trennlinie der Rubrik und die der Kopfzeile aneinander, und die letzte
   Zeile klebt an der unteren Kartenkante. */
.fvn-card > .fvn-rubrik + .fvn-table { margin-top: 6px; }
.fvn-card > .fvn-table:last-child { padding-bottom: 10px; }

/* --- Beleg erfassen ----------------------------------------------------- */
/* Termine, Positionen und Anhaenge standen frueher lose auf dem Seitengrund.
   Jetzt liegt jeder Abschnitt in einer Karte; diese Klassen regeln nur noch,
   wie es darin aussieht. */

.beleg-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Die Summe schliesst die Positionskarte ab - eine eigene Leiste statt eines
   handgezogenen Strichs mitten im Inhalt. */
.beleg-summe {
    display: flex; align-items: center; justify-content: flex-end; gap: 14px;
    padding: 14px 20px;
    border-top: 1px solid var(--c-linie);
    background: var(--c-fill);
}
.beleg-summe__wort { font-size: 13px; font-weight: 500; color: var(--c-text-2); }
.beleg-summe__zahl {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 17px; font-weight: 600; color: var(--c-text);
}

.beleg-hinweis {
    background: var(--c-blau-ton);
    border: 1px solid var(--c-blau-rand) !important;
    border-radius: var(--r-l);
}

.beleg-abschluss {
    display: flex; justify-content: flex-end; gap: 10px;
    padding-bottom: 8px;
}

/* Ein mehrzeiliges Feld braucht seinen Rahmen auch im Ruhezustand: ohne ihn
   ist nicht zu sehen, wie viel Platz zum Schreiben da ist. (textarea-Feld) */
.fvn-feld__ctl:has(textarea) { align-items: stretch; padding: 8px 9px; }

/* --- Kartenfuss --------------------------------------------------------- */
/* Die Schaltflaechen einer Karte gehoeren an ihren Fuss, abgesetzt durch eine
   Linie - nicht mitten in den Inhalt gehaengt. */
.karte__fuss {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--c-linie);
    background: var(--c-fill);
}
.karte__fuss--links { justify-content: space-between; }
.karte__vorwort {
    margin: 0 0 16px; max-width: 68ch;
    font-size: 13px; line-height: 1.55; color: var(--c-text-2);
}

/* Schalter und Haken tragen ihre Beschriftung selbst - sie stehen deshalb in
   der Feldspalte und nicht in der Beschriftungsspalte. */
.fvn-formular > .fvn-switch,
.fvn-formular > .fvn-check { grid-column: 2; justify-self: start; }

/* Ein Formular liest sich in einer Spalte; ueber die volle Breite einer
   Karte gezogen laufen Beschriftung und Wert zu weit auseinander. */
.karte__koerper > .fvn-formular { max-width: 760px; }

/* --- Anklickbares Symbol am Feldrand ------------------------------------ */
/* Das Auge am Passwort, das Schloss an einem Wert: ein Knopf, kein Zierrat. */
.fvn-feld__adornknopf {
    display: flex; align-items: center; flex: none;
    padding: 2px; border: 0; border-radius: var(--r-s);
    background: none; color: var(--c-text-3); cursor: pointer;
    transition: color .12s var(--ease), background .12s var(--ease);
}
.fvn-feld__adornknopf:hover { color: var(--c-text); background: var(--c-neutral-ton); }
.fvn-feld__adornknopf:focus-visible { outline: 2px solid var(--fvn-300); outline-offset: 1px; }

/* --- Positionstypen einer Belegart -------------------------------------- */
/* Eine Kopfzeile fuer die ganze Liste, danach eine Zeile je Typ. Vorher trug
   jede Position ihre eigenen Beschriftungen - vier Beschriftungszeilen fuer
   drei Positionen, und keine Linie, die sagt, wo eine aufhoert. */

.postypen {
    border: 1px solid var(--c-linie); border-radius: var(--r-l);
    background: var(--c-flaeche); box-shadow: var(--kante);
    /* Nichts abschneiden: mit overflow wurde die Liste der Auswahl in der
       letzten Zeile weggeschnitten, und hinscrollen ging nicht. Zu schmale
       Fenster faengt der Dialog selbst ab, der ohnehin scrollt. */
    overflow: visible;
}
.postypen__kopf,
.postypen__zeile {
    display: grid;
    grid-template-columns: 34px minmax(0, 1.1fr) 148px minmax(0, 1.9fr) 88px 96px 36px;
    align-items: center; gap: 12px;
    min-width: 820px; padding: 0 14px;
}
.postypen__kopf {
    height: 40px;
    background: var(--c-fill);
    border-bottom: 1px solid var(--c-linie-kraeftig);
    font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--c-text-2);
}
.postypen__zeile {
    min-height: 52px;
    border-bottom: 1px solid var(--c-linie);
    transition: background .12s var(--ease);
}
.postypen__zeile:last-child { border-bottom: 0; }
.postypen__zeile:hover { background: var(--c-fill); }

.postypen__mitte { display: flex; align-items: center; justify-content: center; }
.postypen__nr {
    font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums;
    font-size: 12px; color: var(--c-text-4); text-align: center;
}
/* Der Haken traegt hier keine Beschriftung - die steht in der Kopfzeile. */
.postypen__haken { gap: 0; }
/* Der Papierkorb tritt zurueck, bis der Zeiger auf der Zeile steht. */
.postypen__weg { opacity: .45; transition: opacity .14s var(--ease); }
.postypen__zeile:hover .postypen__weg,
.postypen__zeile:focus-within .postypen__weg { opacity: 1; }

.postypen__fussnote {
    margin-top: 9px; max-width: 70ch;
    font-size: 11.5px; line-height: 1.5; color: var(--c-text-3);
}

/* Der Name traegt die Zeile, deshalb etwas mehr Gewicht. */
.postyp-name .fvn-input { font-weight: 600; }

.postyp-werte { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; min-width: 0; }
.postyp-wert { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* In der Zeile darf die Huelle nicht nach links ausgreifen: ihr Rahmen im
   Fokus legte sich sonst ueber das Wort davor. Der Ring im Fokus ist 4px
   breit - der Abstand daneben muss groesser sein, sonst ueberdeckt er es
   trotzdem. Dafuer polstert das Feld selbst enger. */
.postypen__zeile .fvn-feld__ctl { margin-left: 0; padding: 0 6px; }
.postyp-wert__wort { flex: none; font-size: 12px; color: var(--c-text-3); }
.postyp-zahl { flex: 0 1 108px; min-width: 0; }
/* Zahlen fluchten hier nicht in einer Spalte - linksbuendig steht der Wert
   direkt hinter seinem Wort. */
.postyp-zahl .fvn-input { text-align: left; }
.postyp-zahl--fest .fvn-feld__adornknopf { color: var(--fvn); }

/* --- Funktionen am Lehrgang --------------------------------------------- */
/* Eine Kopfzeile fuer die ganze Liste, danach eine Zeile je Person. Vorher
   sass jede in einer eigenen Karte mit einem gruenen Balken obendrauf - der
   trug keine Information, war aber das Lauteste auf der Seite. */

.funkzeilen {
    border: 1px solid var(--c-linie); border-radius: var(--r-l);
    background: var(--c-flaeche); box-shadow: var(--kante);
}
.funkzeilen__kopf,
.funkzeilen__zeile {
    display: grid;
    grid-template-columns: 40px minmax(0, 1.5fr) minmax(0, 1.1fr) 108px minmax(0, 1.2fr) 76px;
    align-items: center; gap: 14px;
    min-width: 720px; padding: 0 16px;
}
.funkzeilen__kopf {
    height: 40px;
    background: var(--c-fill);
    border-bottom: 1px solid var(--c-linie-kraeftig);
    border-radius: var(--r-l) var(--r-l) 0 0;
    font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--c-text-2);
}
.funkzeilen__zeile {
    min-height: 58px;
    border-bottom: 1px solid var(--c-linie);
    transition: background .12s var(--ease);
}
.funkzeilen__zeile:last-child { border-bottom: 0; }
.funkzeilen__zeile:hover { background: var(--c-fill); }

.funkzeilen__rolle { font-size: 13.5px; color: var(--c-text-2); }
.funkzeilen__rechts {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* Kein Wert: ein Strich haelt die Spalte, statt sie springen zu lassen. */
.funkzeilen__ohne { color: var(--c-text-4); }
.funkzeilen__marken { display: flex; flex-wrap: wrap; gap: 5px; }

/* Die Werkzeuge treten zurueck, bis der Zeiger auf der Zeile steht. */
.funkzeilen__werkzeuge {
    display: flex; align-items: center; justify-content: flex-end; gap: 2px;
    opacity: .45; transition: opacity .14s var(--ease);
}
.funkzeilen__zeile:hover .funkzeilen__werkzeuge,
.funkzeilen__zeile:focus-within .funkzeilen__werkzeuge { opacity: 1; }

/* Das Namenskuerzel als Kreis - in der Liste traegt es die Markenfarbe. */
.funkzeilen__zeile > .fvn-kuerzel__k {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; min-width: 0; padding: 0;
    border-radius: 999px; border: 0;
    background: var(--fvn-50); color: var(--fvn-dunkel);
    font-size: 11px; font-weight: 600;
}

/* --- Marken zum Anklicken (Belegarten, Rollen) -------------------------- */
/* Sie standen im Textfluss und richteten sich damit an der Schriftlinie aus.
   Eine Marke mit Haken hat eine andere Schriftlinie als eine ohne - deshalb
   sassen die gewaehlten eine Spur hoeher. Eine Flex-Zeile kennt keine
   Schriftlinie und stellt alle auf dieselbe Hoehe. */
.belegarten-selection,
.roles-selection {
    display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
}
.belegarten-selection > .fvn-chip,
.roles-selection > .fvn-chip { margin: 0; }

.belegart-selection-chip,
.role-selection-chip {
    min-height: 26px; padding: 3px 11px; border-radius: 999px;
    font-size: 12.5px; cursor: pointer;
    border: 1px solid var(--c-linie-kraeftig);
    transition: background .12s var(--ease), border-color .12s var(--ease);
}
.belegart-selection-chip:hover,
.role-selection-chip:hover { border-color: var(--c-text-4); }
/* Gewaehlt: Markenfarbe, Rand kraeftiger - der Haken allein reicht nicht. */
.belegart-selection-chip.fvn-chip--primary,
.role-selection-chip.fvn-chip--primary { border-color: var(--fvn-300); }

/* --- Teilnehmer am Lehrgang --------------------------------------------- */

/* Zaehler und Marken in der Rubrik. */
.tn-zaehler { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.stamm-chip--gut   { background: var(--c-gut-ton);    border-color: var(--c-gut-rand);    color: var(--c-gut); }
.stamm-chip--fehler{ background: var(--c-fehler-ton); border-color: var(--c-fehler-rand); color: var(--c-fehler); }

.tn-leiste {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    margin-bottom: 12px;
}

.tn-tabelle {
    border: 1px solid var(--c-linie); border-radius: var(--r-l);
    background: var(--c-flaeche); box-shadow: var(--kante);
    overflow: hidden;
}
.tn-tabelle .fvn-table thead th:first-child,
.tn-tabelle .fvn-table tbody td:first-child { padding-left: 16px; }
.tn-tabelle .fvn-table thead th:last-child,
.tn-tabelle .fvn-table tbody td:last-child { padding-right: 16px; }

.tn-name { display: flex; align-items: center; gap: 6px; }
.tn-mangel { font-size: 12px; color: var(--c-fehler); }

/* Fuenf feste Plaetze fuer die Statussymbole. Als einfache Reihe wanderten
   sie von Zeile zu Zeile, weil je Teilnehmer unterschiedlich viele davon
   erscheinen - das Memo nur mit Debitor. */
.tn-status {
    display: inline-grid;
    grid-template-columns: repeat(5, 26px);
    align-items: center; justify-items: center;
    gap: 2px;
}
.tn-status__leer { display: block; width: 26px; height: 1px; }

.tn-werkzeuge {
    display: flex; align-items: center; justify-content: flex-end; gap: 2px;
    opacity: .45; transition: opacity .14s var(--ease);
}
.fvn-table tbody tr:hover .tn-werkzeuge,
.fvn-table tbody tr:focus-within .tn-werkzeuge { opacity: 1; }

/* --- Belege am Lehrgang ------------------------------------------------- */
/* Vorher war jeder Beleg eine Karte mit vier Unterueberschriften samt Symbol
   fuer vier Werte, und der Zustand stand dreimal darin. */

.blg-streifen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 14px; }
.blg-zaehler {
    display: inline-flex; align-items: baseline; gap: 7px;
    padding: 6px 12px; border-radius: var(--r);
    background: var(--c-fill); border: 1px solid var(--c-linie);
}
.blg-zaehler--aus { opacity: .55; }
.blg-zaehler__zahl { font-size: 16px; font-weight: 600; }
.blg-zaehler__wort { font-size: 12px; color: var(--c-text-3); }

.blg-liste {
    border: 1px solid var(--c-linie); border-radius: var(--r-l);
    background: var(--c-flaeche); box-shadow: var(--kante);
    overflow-x: auto;
}
.blg-liste__kopf,
.blg-liste__zeile {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) 108px minmax(0, 1fr) 92px 116px 132px 44px;
    align-items: center; gap: 14px;
    min-width: 780px; padding: 0 16px;
}
.blg-liste__kopf {
    height: 40px;
    background: var(--c-fill);
    border-bottom: 1px solid var(--c-linie-kraeftig);
    font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--c-text-2);
}
.blg-liste__zeile {
    min-height: 52px;
    border-bottom: 1px solid var(--c-linie);
    transition: background .12s var(--ease);
}
.blg-liste__zeile:hover { background: var(--c-fill); }
/* Abgelehnt: blasser, und der Betrag durchgestrichen - er zaehlt nicht mit. */
.blg-liste__zeile--aus { color: var(--c-text-3); }
.blg-liste__zeile--aus .blg-name,
.blg-liste__zeile--aus .blg-neben { color: var(--c-text-3); }
.blg-liste__zeile--aus .blg-betrag { color: var(--c-text-3); text-decoration: line-through; }

.blg-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blg-neben { font-size: 13px; color: var(--c-text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blg-betrag { font-weight: 600; }
.blg-rechts { text-align: right; }
.blg-auge { display: flex; justify-content: center; }

.blg-liste__fuss {
    display: flex; align-items: center; justify-content: flex-end; gap: 14px;
    min-width: 780px; padding: 12px 16px;
    border-top: 1px solid var(--c-linie); background: var(--c-fill);
}
.blg-liste__fusswort { font-size: 13px; font-weight: 500; color: var(--c-text-2); }
.blg-liste__fusszahl { font-size: 16px; font-weight: 600; }

/* Der Zustand als Marke mit Punkt: Farbe allein reicht bei
   Farbfehlsichtigkeit nicht. */
.blg-stand {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 500;
    background: var(--c-fill); border: 1px solid var(--c-linie); color: var(--c-text-2);
}
.blg-stand__punkt { width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: none; }
.blg-stand--offen       { background: var(--c-warn-ton);   border-color: var(--c-warn-rand);   color: var(--c-warn); }
.blg-stand--frei        { background: var(--c-blau-ton);   border-color: var(--c-blau-rand);   color: var(--c-blau); }
.blg-stand--uebertragen { background: var(--c-neutral-ton); border-color: var(--c-linie-kraeftig); color: var(--c-text-2); }
.blg-stand--bezahlt     { background: var(--c-gut-ton);    border-color: var(--c-gut-rand);    color: var(--c-gut); }
.blg-stand--ab          { background: var(--c-fehler-ton); border-color: var(--c-fehler-rand); color: var(--c-fehler); }

/* Im Zaehlerstreifen faerbt dieselbe Klasse nur die Zahl. */
.blg-zaehler__zahl.blg-stand--offen       { background: none; border: 0; color: var(--c-warn); }
.blg-zaehler__zahl.blg-stand--frei        { background: none; border: 0; color: var(--c-blau); }
.blg-zaehler__zahl.blg-stand--uebertragen { background: none; border: 0; color: var(--c-text-2); }
.blg-zaehler__zahl.blg-stand--bezahlt     { background: none; border: 0; color: var(--c-gut); }
.blg-zaehler__zahl.blg-stand--ab          { background: none; border: 0; color: var(--c-fehler); }

/* --- Filterleiste ------------------------------------------------------- */
/* Zwei Ebenen: oben die Eingaben, darunter das Ergebnis. Vorher teilten sich
   fuenf Dinge eine umbrechende Zeile, und die Trefferzahl - die gar kein
   Filter ist, sondern das Ergebnis - stand mitten unter den Eingaben. */

.fvn-filter { border-bottom: 1px solid var(--c-linie); }

.fvn-filter__zeile {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 16px;
}
.fvn-filter__trenner { width: 1px; height: 22px; flex: none; background: var(--c-linie); }

/* In dieser Zeile teilen sich vier Bedienelemente die Breite. Ohne eigene
   Verhaeltnisse behielten sie ihre Hoechstbreiten und der Zeitraum rutschte
   in die naechste Reihe. */
.fvn-filter__zeile > .fvn-suche {
    flex: 1.4 1 200px; min-width: 180px; max-width: none;
}
.fvn-filter__zeile > .leiste-filter {
    flex: 1 1 160px; min-width: 150px; max-width: none;
}
.fvn-filter__zeile > .leiste-filter--breit { flex: 1.2 1 180px; }
.fvn-filter__zeile > .fvn-zeitraum { min-width: 190px; }

.fvn-filter__ergebnis {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 9px 16px;
    background: var(--c-fill); border-top: 1px solid var(--c-linie);
    font-size: 12.5px; color: var(--c-text-2);
}
.fvn-filter__ruhe { color: var(--c-text-3); }
.fvn-filter__summe { margin-left: auto; display: flex; align-items: baseline; gap: 7px; }
/* Die erzeugende Handlung steht rechts in der Eingabezeile. */
.fvn-filter__handlung { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
/* Ein Textfeld als Filter traegt dieselbe Hoehe wie die uebrigen. */
.fvn-filter__zeile > .leiste-filter > .fvn-feld__ctl { min-height: var(--h-ctl); margin-left: 0; padding: 0 11px; }
.leiste-filter--an > .fvn-feld__ctl {
    background: var(--fvn-50); border-color: var(--fvn-200); color: var(--fvn-dunkel);
}

/* Was gerade filtert, steht als Marke da und laesst sich einzeln wegklicken. */
.fvn-filter__marke {
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 280px; padding: 3px 9px;
    border: 1px solid var(--fvn-200); border-radius: 999px;
    background: var(--c-flaeche); color: var(--fvn-dunkel);
    font: inherit; font-size: 11.5px; font-weight: 500; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background .12s var(--ease), border-color .12s var(--ease);
}
.fvn-filter__marke:hover { background: var(--fvn-50); border-color: var(--fvn-300); }
.fvn-filter__marke .fvn-icon { width: 12px; height: 12px; opacity: .6; flex: none; }
.fvn-filter__marke:hover .fvn-icon { opacity: 1; }

.fvn-filter__alle {
    border: 0; background: none; padding: 0; cursor: pointer;
    font: inherit; font-size: 12.5px; color: var(--c-text-3);
    text-decoration: underline; text-underline-offset: 2px;
}
.fvn-filter__alle:hover { color: var(--c-text); }

/* Ein gesetzter Filter hebt sich ab. */
.leiste-filter--an > .fvn-feld__ctl > .fvn-auswahl__ausloeser,
.fvn-zeitraum.leiste-filter--an {
    background: var(--fvn-50); border-color: var(--fvn-200); color: var(--fvn-dunkel);
}
.leiste-filter--an > .fvn-feld__ctl > .fvn-auswahl__ausloeser .fvn-auswahl__pfeil,
.leiste-filter--an > .fvn-feld__ctl > .fvn-auswahl__ausloeser .fvn-auswahl__weg,
.fvn-zeitraum.leiste-filter--an .fvn-zeitraum__symbol,
.fvn-zeitraum.leiste-filter--an .fvn-zeitraum__weg { color: currentColor; }