@charset "UTF-8";
/*
 * FMFlow Akte – basis.css · Gestaltung „Registratur mit Sicherheitszeichen" (SPEC §6)
 *
 * Papier-Signale nur in der Struktur (Blattnummern, Stempel, Reiter, Plakette, Lochmarken),
 * keine Texturen. Signalfarben tragen ausschließlich Bedeutung. Status nie nur über Farbe.
 * CSP: keine Inline-Stile – Gestaltung nur über Klassen in Dateien. Module ergänzen in
 * assets/css/modul/<modul>.css. Referenz: /_muster und docs/BAUTEILE.md.
 *
 *  1 Tokens → tokens.css, Kategorien      9 Tabellen, Verzeichnis
 *  2 Grundlagen, Typografie, Helfer        10 Chips, Kategorien, Anlagennr., Zähler
 *  3 Rahmen: Register-Leiste, Kopf, Inhalt  11 Ampel, Stempel, Plakette, Siegel, Konfidenz
 *  4 Schlichtes Layout, Anmeldung, Fehler  12 Reiter, Laufzettel, Kette, Kettenglyphe
 *  5 Seitenkopf, Abschnitt                  13 Akte: Deckblatt, Feldraster, Blatt, Fächer
 *  6 Karten                                 14 Lage, Wiedervorlage, Eingang, Kartei, Lineal, Lebenslinie
 *  7 Knöpfe                                 15 Leer, Dialog, Palette, Dropzone, Meldungen, Toast
 *  8 Formulare, Vorschlag, Schalter,        16 htmx, Skelett, Bewegung, Mobil
 *    Folgezeile
 */

/* =================================================================== 1 Tokens
 * Farben, Schrift, Abstände, Radien, Bewegung und Schatten stehen in tokens.css (lädt vorher, UMSTIEG §4 Phase 3).
 * Hier nur die Kategorie-Klassen, die die Tokens anwenden. */

/* Kategorie-Klassen setzen nur --kat; Bauteile entscheiden, wo die Farbe erscheint. */
.kat-1 { --kat: var(--kat-1); } .kat-2 { --kat: var(--kat-2); } .kat-3 { --kat: var(--kat-3); }
.kat-4 { --kat: var(--kat-4); } .kat-5 { --kat: var(--kat-5); } .kat-6 { --kat: var(--kat-6); }
.kat-7 { --kat: var(--kat-7); } .kat-8 { --kat: var(--kat-8); } .kat-9 { --kat: var(--kat-9); }
.kat-10 { --kat: var(--kat-10); }
.kat-text { color: var(--kat, var(--tinte-2)); }
.kat-band { box-shadow: inset 4px 0 0 var(--kat, var(--linie-stark)); }

/* =================================================================== 2 Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background: var(--papier);
    scroll-padding-top: 4.5rem;
}

body {
    margin: 0;
    font: 400 .9375rem/1.5 var(--schrift);
    color: var(--tinte);
    background: var(--papier);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.25; font-weight: 650; letter-spacing: -.005em; }
h1 { font-size: 1.65rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }
h4 { font-size: .95rem; }
p { margin: 0 0 .75em; }
ul, ol { margin: 0 0 .75em; padding-left: 1.25rem; }
small { font-size: .8125rem; }
strong, b { font-weight: 650; }
hr { border: 0; border-top: 1px solid var(--linie); margin: 1.25rem 0; }
img, svg, video { max-width: 100%; }
table { border-collapse: collapse; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
address { font-style: normal; }

a { color: var(--aktenblau); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--aktenblau); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--aktenblau) 26%, transparent); }

code, kbd, samp, pre, .mono { font-family: var(--schrift-mono); font-variant-numeric: tabular-nums; }
code { font-size: .875em; padding: .05em .3em; background: var(--karton-hell); border-radius: var(--radius); }
pre { overflow-x: auto; font-size: .8125rem; line-height: 1.45; }
pre code { padding: 0; background: none; }
kbd {
    display: inline-block; min-width: 1.4em; padding: .05rem .35rem; font-size: .72rem; line-height: 1.4;
    color: var(--tinte-2); text-align: center; background: var(--blatt);
    border: 1px solid var(--linie-stark); border-bottom-width: 2px; border-radius: 3px;
}
time, .datum, .zahl, td.zahl, .betrag, .tabular { font-variant-numeric: tabular-nums; }
.datum, .betrag, .pruefsumme, .blattnr { font-family: var(--schrift-mono); font-size: .92em; white-space: nowrap; }
.datum--leer, .betrag--leer, .pruefsumme--leer { color: var(--tinte-3); }
.pruefsumme { letter-spacing: .02em; color: var(--tinte-2); }
.blattnr { color: var(--tinte-2); }

/* Icons aus dem Sprite: Linien in currentColor */
.icon {
    width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em;
    fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
    overflow: visible;
}
.icon--gross { width: 1.6em; height: 1.6em; }

/* Helfer */
.unsichtbar {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.text-2 { color: var(--tinte-2); }
.text-3 { color: var(--tinte-3); }
.klein { font-size: .8125rem; }
.kicker {
    font: 600 .7rem/1.3 var(--schrift-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-2);
}
.reihe { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.reihe--weit { gap: 1rem; }
.reihe--zwischen { justify-content: space-between; }
.stapel { display: grid; gap: .75rem; }
.stapel--eng { gap: .35rem; }
.raster { display: grid; gap: var(--abstand); }
.raster--zwei { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); align-items: start; }
.raster--drei { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); align-items: start; }
.raster--seite { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
.raster > .karte, .raster > .blatt { margin-bottom: 0; }
.nur-druck { display: none !important; }
html.js .ohne-js { display: none !important; }
html:not(.js) .nur-js { display: none !important; }
.trenner { color: var(--tinte-3); padding: 0 .15rem; }

.sprunglink {
    position: absolute; left: .75rem; top: -4rem; z-index: 100; padding: .6rem 1rem;
    background: var(--tinte); color: var(--papier); font-weight: 600; border-radius: var(--radius);
}
.sprunglink:focus { top: .75rem; }

/* =================================================================== 3 Rahmen (angemeldet) */
.seite--app {
    display: grid;
    grid-template-columns: var(--leiste-breite) minmax(0, 1fr);
    min-height: 100vh;
}

/* Register-Leiste links: Kartonrücken mit herausgezogenem Reiter für den aktiven Bereich */
.register {
    grid-column: 1; grid-row: 1;
    position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden;   /* aktiver Reiter ragt 1 px über die Kante – kein Querbalken */
    display: flex; flex-direction: column;
    background: var(--karton);
    border-right: 1px solid var(--linie);
}
.arbeitsflaeche { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; min-width: 0; }
.seite--ohne-leiste { grid-template-columns: minmax(0, 1fr); }
.seite--ohne-leiste .arbeitsflaeche { grid-column: 1; }

.marke { display: flex; align-items: center; gap: .65rem; color: var(--tinte); text-decoration: none; min-width: 0; }
.marke:hover .marke__name { text-decoration: underline; text-decoration-thickness: 1px; }
.marke__zeichen { width: 2.1rem; height: 2.1rem; flex: none; display: block; }
.marke__flaeche { fill: var(--aktenblau); }
.marke__blatt { fill: var(--papier); }
.marke__loch { fill: var(--aktenblau); }
.marke__zeile { fill: var(--tinte); }
.marke__signal { fill: var(--signalgelb); }
.marke__text { display: grid; line-height: 1.15; min-width: 0; }
.marke__name { font-weight: 700; font-size: 1rem; letter-spacing: -.01em; white-space: nowrap; }
.marke__name em { font-style: normal; color: var(--aktenblau); }
.marke__mandant { font: 600 .66rem/1.3 var(--schrift-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.register > .marke { padding: 1.1rem 1rem 1.15rem 1.1rem; border-bottom: 1px solid var(--linie); }

.leiste { flex: 1; padding: .9rem 0 1rem; }
.leiste__liste { list-style: none; margin: 0; padding: 0; }
.leiste__punkt--trenner { margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed var(--linie-stark); margin-left: 1rem; margin-right: 1rem; }
.leiste__punkt--trenner .leiste__link { margin-left: -.25rem; }
.leiste__link {
    position: relative;
    display: grid; grid-template-columns: 1.55rem 1.2rem minmax(0, 1fr); align-items: center; gap: .55rem;
    margin: 0 0 2px .75rem; padding: .5rem .8rem .5rem .55rem;
    color: var(--tinte-2); font-weight: 550; text-decoration: none;
    border: 1px solid transparent; border-right: 0; border-radius: var(--radius-gross) 0 0 var(--radius-gross);
    transition: background-color var(--bewegung-kurz), color var(--bewegung-kurz);
}
.leiste__link:hover { color: var(--tinte); background: color-mix(in srgb, var(--papier) 55%, transparent); }
.leiste__nr { font: 600 .68rem/1 var(--schrift-mono); letter-spacing: .04em; color: var(--tinte-2); opacity: .8; }
.leiste__icon { width: 1.2rem; height: 1.2rem; }
.leiste__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leiste__zahl { margin-left: auto; }
.leiste__link--aktiv {
    z-index: 1; margin-right: -1px;
    color: var(--tinte); font-weight: 650;
    background: var(--papier); border-color: var(--linie);
}
.leiste__link--aktiv::before {
    content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px;
    background: var(--aktenblau); border-radius: var(--radius-gross) 0 0 var(--radius-gross);
}
.leiste__link--aktiv .leiste__icon, .leiste__link--aktiv .leiste__nr { color: var(--aktenblau); opacity: 1; }
.register__fuss { padding: .85rem 1.1rem 1rem; border-top: 1px solid var(--linie); font-size: .75rem; line-height: 1.45; color: var(--tinte-2); }
.register__fuss p { margin: 0; }

/* Kopf: Sprungfeld, Schnellknöpfe, Benutzer */
.kopf {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: .75rem;
    min-height: 3.6rem; padding: .55rem clamp(1rem, 2.6vw, 2rem);
    background: color-mix(in srgb, var(--papier) 90%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--linie);
}
.kopf__marke { display: none; }

.sprung { position: relative; flex: 1 1 18rem; min-width: 0; max-width: 34rem; display: flex; align-items: center; margin: 0; }
.sprung__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.sprung__icon { position: absolute; left: .7rem; color: var(--tinte-2); pointer-events: none; }
.sprung__feld {
    width: 100%; min-height: 2.4rem; padding: .4rem 4.6rem .4rem 2.3rem;
    background: var(--blatt); border: 1px solid var(--linie-stark); border-radius: var(--radius-gross);
}
.sprung__feld::placeholder { color: var(--tinte-2); opacity: .85; }
.sprung__feld:focus { border-color: var(--aktenblau); }
.sprung__taste { position: absolute; right: .55rem; pointer-events: none; }

.schnellknoepfe { display: flex; gap: .5rem; flex: none; }

.benutzermenue { position: relative; margin-left: auto; flex: none; }
.benutzermenue__knopf {
    display: flex; align-items: center; gap: .55rem; padding: .25rem .45rem .25rem .25rem;
    list-style: none; cursor: pointer; border: 1px solid transparent; border-radius: var(--radius-gross);
}
.benutzermenue__knopf::-webkit-details-marker { display: none; }
.benutzermenue__knopf:hover, .benutzermenue[open] .benutzermenue__knopf { border-color: var(--linie-stark); background: var(--blatt); }
.benutzermenue__kuerzel {
    display: grid; place-items: center; width: 2rem; height: 2rem;
    font: 700 .78rem/1 var(--schrift-mono); color: var(--tinte); background: var(--karton);
    border: 1px solid var(--linie-stark); border-radius: var(--radius);
}
.benutzermenue__name { font-weight: 600; font-size: .875rem; max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.benutzermenue__pfeil { color: var(--tinte-2); transition: transform var(--bewegung); }
.benutzermenue[open] .benutzermenue__pfeil { transform: rotate(180deg); }
.benutzermenue__inhalt {
    position: absolute; right: 0; top: calc(100% + .45rem); z-index: 30;
    width: 17rem; padding: .4rem;
    background: var(--blatt); border: 1px solid var(--linie); border-radius: var(--radius-gross);
    box-shadow: var(--schatten-hoch);
}
.benutzermenue__wer { padding: .55rem .65rem .65rem; border-bottom: 1px solid var(--linie); margin-bottom: .3rem; }
.benutzermenue__wer strong { display: block; }
.benutzermenue__rolle { font-size: .78rem; color: var(--tinte-2); }
.menue__liste { list-style: none; margin: 0; padding: 0; }
.menue__eintrag {
    display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .65rem;
    color: var(--tinte); text-decoration: none; background: none; border: 0; border-radius: var(--radius);
    font-size: .875rem; text-align: left; cursor: pointer;
}
.menue__eintrag:hover { background: var(--karton-hell); }
.menue__eintrag .icon { color: var(--tinte-2); }
.menue__trenner { height: 1px; margin: .3rem 0; background: var(--linie); }

.theme-wahl { margin: 0; padding: .45rem .65rem .55rem; border: 0; }
.theme-wahl__titel { display: block; margin-bottom: .35rem; padding: 0; font-size: .72rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-2); }
.theme-wahl__knoepfe { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--linie-stark); border-radius: var(--radius); overflow: hidden; }
.theme-wahl__knopf {
    display: flex; align-items: center; justify-content: center; gap: .3rem; padding: .35rem .3rem;
    font-size: .78rem; font-weight: 600; background: var(--blatt); color: var(--tinte-2);
    border: 0; border-right: 1px solid var(--linie); cursor: pointer;
}
.theme-wahl__knopf:last-child { border-right: 0; }
.theme-wahl__knopf[aria-pressed="true"] { background: var(--tinte); color: var(--blatt); }

/* Inhalt */
.inhalt { flex: 1; width: 100%; max-width: 80rem; margin: 0 auto; padding: 1.6rem clamp(1rem, 2.6vw, 2rem) 3rem; }
.inhalt--breit { max-width: none; }
.inhalt:focus { outline: none; }

.krumen { margin: 0 0 .9rem; }
.krumen__liste { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .4rem; list-style: none; margin: 0; padding: 0; font-size: .8125rem; color: var(--tinte-2); }
.krumen__punkt { display: inline-flex; align-items: center; gap: .4rem; }
.krumen__punkt + .krumen__punkt::before { content: "›"; color: var(--tinte-3); }
.krumen a { color: var(--tinte-2); text-decoration: none; }
.krumen a:hover { color: var(--aktenblau); text-decoration: underline; }
.krumen [aria-current] { color: var(--tinte); font-weight: 600; }

.fuss {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem;
    padding: .9rem clamp(1rem, 2.6vw, 2rem) 1.1rem; border-top: 1px solid var(--linie);
    color: var(--tinte-2); font-size: .78rem;
}
.fuss__text { margin: 0; }
.fuss__recht { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.fuss__link { color: var(--tinte-2); text-decoration: none; }
.fuss__link:hover, .fuss__link:focus-visible { color: var(--aktenblau); text-decoration: underline; }
.fuss--bare { justify-content: center; border-top: 0; }

/* =================================================================== 4 Schlichtes Layout */
.seite--bare { min-height: 100vh; display: flex; flex-direction: column; }
.bare { width: 100%; max-width: 58rem; margin: auto; padding: clamp(1.5rem, 6vh, 4rem) var(--abstand); }
.bare--breit { max-width: 72rem; }
.bare .meldungen { max-width: 34rem; margin-left: auto; margin-right: auto; }

.anmeldung {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    background: var(--blatt); border: 1px solid var(--linie); border-radius: var(--radius-gross);
    overflow: hidden;
}
.anmeldung__deckel {
    position: relative; display: flex; flex-direction: column; gap: 1.25rem;
    padding: 2rem 2rem 1.75rem; background: var(--karton); border-right: 1px solid var(--linie);
}
.anmeldung__deckel .marke__zeichen { width: 2.6rem; height: 2.6rem; }
.anmeldung__deckel .marke__name { font-size: 1.2rem; }
.anmeldung__leitsatz { margin: 0; font-size: 1.25rem; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; }
.anmeldung__leitsatz span { color: var(--aktenblau); }
.anmeldung__probe { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.1rem; margin-top: auto; padding-top: 1rem; border-top: 1px dashed var(--linie-stark); }
.anmeldung__haftung { margin: 0; font-size: .75rem; color: var(--tinte-2); }
.anmeldung__blatt { position: relative; padding: 2rem 2.25rem 1.75rem 3.25rem; }
.anmeldung__blatt::before, .anmeldung__blatt::after { content: ""; position: absolute; left: 1.25rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--papier); border: 1px solid var(--linie-stark); }
.anmeldung__blatt::before { top: 2.3rem; }
.anmeldung__blatt::after { bottom: 2.3rem; }
.anmeldung__titel { font-size: 1.35rem; margin-bottom: .2rem; }
.anmeldung__unterzeile { color: var(--tinte-2); margin-bottom: 1.25rem; font-size: .875rem; }

.fehlerseite {
    position: relative; max-width: 36rem; margin: 0 auto; padding: 2rem 2rem 1.75rem 3.25rem;
    background: var(--blatt); border: 1px solid var(--linie); border-radius: var(--radius);
}
.fehlerseite::before, .fehlerseite::after { content: ""; position: absolute; left: 1.25rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--papier); border: 1px solid var(--linie-stark); }
.fehlerseite::before { top: 2.2rem; }
.fehlerseite::after { bottom: 2.2rem; }
.fehlerseite__kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .75rem; margin-bottom: 1rem; border-bottom: 1px dashed var(--linie-stark); }
.fehlerseite__code { margin: 0; font: 700 .8rem var(--schrift-mono); letter-spacing: .1em; color: var(--tinte-2); }
.fehlerseite__titel { font-size: 1.45rem; }
.fehlerseite__text { color: var(--tinte-2); }
.fehlerseite .knopfreihe { margin-top: 1.25rem; }

/* =================================================================== 5 Seitenkopf, Abschnitt */
.seitenkopf {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem;
    padding-bottom: .85rem; margin-bottom: 1.5rem; border-bottom: 2px solid var(--tinte);
}
.seitenkopf__text { min-width: 0; flex: 1 1 22rem; }
.seitenkopf__kicker { margin: 0 0 .25rem; font: 600 .7rem/1.3 var(--schrift-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-2); }
.seitenkopf__titel { margin: 0; font-size: 1.7rem; line-height: 1.2; font-weight: 680; letter-spacing: -.015em; }
.seitenkopf__satz { margin: .35rem 0 0; color: var(--tinte-2); max-width: 46rem; }
.seitenkopf__aktionen { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.abschnitt { margin: 0 0 2rem; }
.abschnitt__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .8rem; padding-bottom: .4rem; border-bottom: 1px solid var(--linie); }
.abschnitt__titel { display: flex; align-items: center; gap: .55rem; margin: 0; font-size: 1.05rem; }
.abschnitt__marke {
    display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem;
    font: 700 .72rem/1 var(--schrift-mono); color: var(--tinte); background: var(--karton);
    border: 1px solid var(--linie-stark); border-radius: var(--radius);
}
.abschnitt__zusatz { font-size: .8125rem; color: var(--tinte-2); }

/* =================================================================== 6 Karten */
.karte {
    background: var(--blatt); border: 1px solid var(--linie); border-radius: var(--radius);
    padding: 1.1rem 1.25rem; margin-bottom: 1rem; min-width: 0;
}
.karte__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .35rem 1rem; margin-bottom: .8rem; }
.karte__titel { margin: 0; font-size: 1rem; font-weight: 650; }
.karte__zusatz { font-size: .8125rem; color: var(--tinte-2); }
.karte__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--linie); }
.karte > :last-child { margin-bottom: 0; }
.karte--karton { background: var(--karton); }
.karte--flach { background: transparent; }
.karte--hinweis { border-left: 3px solid var(--warn); }
.karte--stop { border-left: 3px solid var(--stop); }
.karte--ok { border-left: 3px solid var(--ok); }
.karte--blau { border-left: 3px solid var(--aktenblau); }
.karte--vorschlag { border-left: 3px solid var(--vorschlag); }

.angaben { margin: 0 0 1rem; }
.angaben__zeile { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: .75rem; padding: .4rem 0; border-bottom: 1px solid var(--linie); }
.angaben__zeile:last-child { border-bottom: 0; }
.angaben dt { color: var(--tinte-2); font-size: .875rem; }
.angaben dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* =================================================================== 7 Knöpfe */
.knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    min-height: 2.4rem; padding: .4rem .95rem;
    font: 600 .875rem/1.2 var(--schrift); color: var(--tinte); text-decoration: none; white-space: nowrap;
    background: var(--blatt); border: 1px solid var(--linie-stark); border-radius: var(--radius);
    cursor: pointer; user-select: none;
    transition: background-color var(--bewegung-kurz), border-color var(--bewegung-kurz), color var(--bewegung-kurz), transform var(--bewegung-kurz);
}
.knopf:hover { border-color: var(--tinte-2); background: var(--karton-hell); }
.knopf:active { transform: translateY(1px); }
.knopf .icon { width: 1.05rem; height: 1.05rem; }
.knopf--primaer { color: var(--auf-aktenblau); background: var(--aktenblau); border-color: var(--aktenblau); }
.knopf--primaer:hover { background: color-mix(in srgb, var(--aktenblau) 85%, var(--tinte)); border-color: color-mix(in srgb, var(--aktenblau) 85%, var(--tinte)); }
.knopf--leise { color: var(--aktenblau); background: transparent; border-color: transparent; }
.knopf--leise:hover { background: var(--blau-grund); border-color: transparent; }
.knopf--gefahr { color: var(--stop); border-color: color-mix(in srgb, var(--stop) 55%, var(--linie)); }
.knopf--gefahr:hover { background: var(--stop-grund); border-color: var(--stop); }
.knopf--gefahr-voll { color: var(--blatt); background: var(--stop); border-color: var(--stop); }
.knopf--gefahr-voll:hover { background: color-mix(in srgb, var(--stop) 85%, var(--tinte)); }
.knopf--stoerung .icon { color: var(--stop); }
.knopf--pruefung .icon { color: var(--aktenblau); }
.knopf--klein { min-height: 1.9rem; padding: .22rem .6rem; font-size: .8125rem; gap: .35rem; }
.knopf--gross { min-height: 3.25rem; padding: .7rem 1.4rem; font-size: 1rem; }
.knopf--block { width: 100%; }
.knopf--icon { width: 2.4rem; padding: 0; }
.knopf--icon.knopf--klein { width: 1.9rem; }
.knopf[disabled], .knopf[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.knopf.htmx-request { cursor: progress; opacity: .75; }
.knopfreihe { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.knopfreihe--rechts { justify-content: flex-end; }
.knopfgruppe { display: inline-flex; }
.knopfgruppe > .knopf { border-radius: 0; margin-left: -1px; }
.knopfgruppe > .knopf:first-child { border-radius: var(--radius) 0 0 var(--radius); margin-left: 0; }
.knopfgruppe > .knopf:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.knopfgruppe > .knopf[aria-current], .knopfgruppe > .knopf[aria-pressed="true"] { position: relative; color: var(--blatt); background: var(--tinte); border-color: var(--tinte); }
.chipreihe .chip[aria-current] { color: var(--blatt); background: var(--tinte); border-color: var(--tinte); }
.chipreihe .chip[aria-current] .chip__kuerzel { color: inherit; }

/* Runder [+] an Lücken */
.knopf-plus, .glied__plus {
    display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: none;
    color: var(--aktenblau); background: var(--blatt); border: 1.5px solid var(--aktenblau); border-radius: 50%;
    text-decoration: none; cursor: pointer;
    transition: background-color var(--bewegung-kurz), color var(--bewegung-kurz);
}
.knopf-plus:hover, .glied__plus:hover { color: var(--auf-aktenblau); background: var(--aktenblau); }
.knopf-plus .icon, .glied__plus .icon { width: 1rem; height: 1rem; stroke-width: 2.4; }

/* Textlink-Knopf (z. B. „nachtragen", „kopieren") */
.verweis {
    display: inline-flex; align-items: center; gap: .3rem; padding: 0; font: inherit; font-size: .8125rem; font-weight: 600;
    color: var(--aktenblau); background: none; border: 0; cursor: pointer; text-decoration: none;
}
.verweis:hover { text-decoration: underline; }
.verweis .icon { width: .95rem; height: .95rem; }

/* =================================================================== 8 Formulare */
.formular { display: grid; gap: 1rem; margin: 0 0 1rem; }
.formular__reihe { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); align-items: start; }
.formular__aktionen { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding-top: .25rem; }
.formular__aktionen--trenner { padding-top: 1rem; border-top: 1px solid var(--linie); }
.formular__hinweis { margin: 0; font-size: .8125rem; color: var(--tinte-2); }

.feld { display: grid; gap: .3rem; min-width: 0; align-content: start; }
.feld__label { font-weight: 600; font-size: .875rem; }
.feld__pflicht { color: var(--stop); margin-left: .15rem; }
.feld__hilfe { margin: 0; font-size: .8rem; color: var(--tinte-2); }
.feld__fehler { display: flex; align-items: center; gap: .3rem; margin: 0; font-size: .8rem; font-weight: 600; color: var(--stop); }
.feld__fehler .icon { width: .9rem; height: .9rem; }
.feld__zeile { display: flex; gap: .5rem; align-items: center; }
.feld__zeile > input, .feld__zeile > select { flex: 1; min-width: 0; }

input:where([type="text"], [type="search"], [type="email"], [type="password"], [type="date"], [type="number"], [type="tel"], [type="url"], [type="month"], [type="time"], :not([type])),
select, textarea, .eingabe {
    width: 100%; min-height: 2.4rem; padding: .42rem .65rem;
    color: var(--tinte); background: var(--blatt);
    border: 1px solid var(--linie-stark); border-radius: var(--radius);
    transition: border-color var(--bewegung-kurz), box-shadow var(--bewegung-kurz), background-color var(--bewegung);
}
input:where([type="date"], [type="month"], [type="time"], [type="number"]), .eingabe--mono { font-family: var(--schrift-mono); font-variant-numeric: tabular-nums; }
input[type="date"] { max-width: 12rem; }
input:hover, select:hover, textarea:hover { border-color: var(--tinte-2); }
input:focus, select:focus, textarea:focus { border-color: var(--aktenblau); }
input::placeholder, textarea::placeholder { color: var(--tinte-3); }
input[readonly], textarea[readonly] { background: var(--karton-hell); }
input:disabled, select:disabled, textarea:disabled { opacity: .6; cursor: not-allowed; }
textarea { min-height: 5.5rem; resize: vertical; line-height: 1.45; }
select {
    appearance: none; padding-right: 2rem; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555C66' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .55rem center; background-size: 1rem;
}
:root[data-theme="dark"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8AEB7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8AEB7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
}
select[multiple] { background-image: none; padding-right: .65rem; min-height: 6rem; }
.eingabe--kurz { max-width: 9rem; }
.eingabe--mittel { max-width: 18rem; }
.feld--fehler input, .feld--fehler select, .feld--fehler textarea { border-color: var(--stop); box-shadow: inset 3px 0 0 var(--stop); }
input[type="checkbox"], input[type="radio"] { width: 1.05rem; height: 1.05rem; margin: .15rem 0 0; accent-color: var(--aktenblau); flex: none; cursor: pointer; }

.auswahl { display: flex; align-items: flex-start; gap: .55rem; cursor: pointer; line-height: 1.4; }
.auswahl__zusatz { display: block; font-size: .8rem; color: var(--tinte-2); }
.auswahlliste { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }

.gruppe { min-width: 0; margin: 0; padding: .8rem 1rem 1rem; border: 1px solid var(--linie); border-radius: var(--radius); }
.gruppe > legend { padding: 0 .35rem; font-weight: 650; font-size: .875rem; }

/* Vorschlagsfeld: violett, bis der Mensch bestätigt oder ändert (akte.js entfernt .feld--vorschlag) */
.feld--vorschlag input:not([type="radio"]):not([type="checkbox"]), .feld--vorschlag select, .feld--vorschlag textarea, .eingabe--vorschlag {
    color: var(--tinte); background-color: var(--vorschlag-grund);
    border-color: var(--vorschlag); box-shadow: inset 3px 0 0 var(--vorschlag);
}
.feld__vorschlag { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin: 0; font-size: .78rem; color: var(--vorschlag); }
.feld:not(.feld--vorschlag) > .feld__vorschlag, .schalter:not(.feld--vorschlag) > .feld__vorschlag { display: none; }
.vorschlag-marke {
    display: inline-flex; align-items: center; gap: .3rem;
    font: 700 .66rem/1.2 var(--schrift); letter-spacing: .09em; text-transform: uppercase; color: var(--vorschlag);
}
.vorschlag-marke::before { content: ""; width: .5rem; height: .5rem; background: var(--vorschlag); transform: rotate(45deg); border-radius: 1px; }
.feld__grund { color: var(--tinte-2); }
.feld__bestaetigen {
    display: inline-flex; align-items: center; gap: .25rem; margin-left: auto; padding: .1rem .45rem;
    font-size: .74rem; font-weight: 650; color: var(--vorschlag); background: var(--blatt);
    border: 1px solid var(--vorschlag); border-radius: var(--radius); cursor: pointer;
}
.feld__bestaetigen:hover { color: var(--blatt); background: var(--vorschlag); }
.feld__bestaetigen .icon { width: .85rem; height: .85rem; stroke-width: 2.4; }
.feld--bestaetigt input, .feld--bestaetigt select, .feld--bestaetigt textarea { border-color: var(--ok); }
.vorschlag-text { color: var(--vorschlag); background: var(--vorschlag-grund); padding: 0 .2em; border-radius: var(--radius); }

/* Segment-Schalter (Radio): Ergebnis, Aufbewahrung, Auswirkung */
.schalter { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: .35rem; }
.schalter__titel { padding: 0; margin-bottom: .3rem; font-weight: 600; font-size: .875rem; }
.schalter__optionen { display: inline-flex; flex-wrap: wrap; max-width: 100%; border: 1px solid var(--linie-stark); border-radius: var(--radius); background: var(--blatt); }
.schalter__option { position: relative; display: flex; }
.schalter__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.schalter__text {
    display: flex; align-items: center; gap: .4rem; padding: .45rem .9rem;
    font-weight: 600; font-size: .875rem; color: var(--tinte-2);
    border-right: 1px solid var(--linie); transition: background-color var(--bewegung-kurz), color var(--bewegung-kurz);
}
.schalter__option:last-child .schalter__text { border-right: 0; }
.schalter__option:hover .schalter__text { color: var(--tinte); background: var(--karton-hell); }
.schalter__symbol { font-size: .8em; }
.schalter__input:checked + .schalter__text { color: var(--blatt); background: var(--tinte); }
.schalter__option--ok .schalter__input:checked + .schalter__text { background: var(--ok); }
.schalter__option--warn .schalter__input:checked + .schalter__text { background: var(--warn); }
.schalter__option--stop .schalter__input:checked + .schalter__text { background: var(--stop); }
.schalter__option--blau .schalter__input:checked + .schalter__text { background: var(--aktenblau); color: var(--auf-aktenblau); }
.schalter__input:focus-visible + .schalter__text { outline: 2px solid var(--aktenblau); outline-offset: -3px; }
.schalter.feld--vorschlag .schalter__optionen { border-color: var(--vorschlag); box-shadow: inset 3px 0 0 var(--vorschlag); }
.schalter.feld--vorschlag .schalter__input:checked + .schalter__text { background: var(--vorschlag); color: var(--blatt); }
.schalter--gross .schalter__text { padding: .75rem 1.1rem; font-size: 1rem; }
.schalter--block .schalter__optionen { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }

/* Folgezeile: was nach dem Speichern gilt */
.folgezeile {
    display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 0; margin: 0;
    padding: .6rem .9rem; font-size: .875rem; line-height: 1.4;
    background: var(--blau-grund); border: 1px dashed color-mix(in srgb, var(--aktenblau) 45%, var(--linie)); border-radius: var(--radius);
}
.folgezeile__pfeil { color: var(--aktenblau); margin-right: .55rem; }
.folgezeile__teil + .folgezeile__teil::before { content: "·"; margin: 0 .55rem; color: var(--tinte-3); }
.folgezeile__wert { font-family: var(--schrift-mono); font-weight: 650; font-size: .95em; }
.folgezeile__teil--ok .folgezeile__wert, .folgezeile__teil--ok { color: var(--ok); }
.folgezeile__teil--warn { color: var(--warn); }
.folgezeile__teil--stop { color: var(--stop); font-weight: 600; }
.folgezeile__teil--vorschlag { color: var(--vorschlag); }
.folgezeile.htmx-request { opacity: .6; }

/* Fortschritt eines Intervalls (verbrauchte Frist) */
progress.intervall {
    -webkit-appearance: none; appearance: none; display: block; width: 100%; height: .38rem;
    border: 0; border-radius: 1px; background: var(--linie); overflow: hidden; color: var(--intervall-farbe, var(--ok));
}
progress.intervall::-webkit-progress-bar { background: var(--linie); }
progress.intervall::-webkit-progress-value { background: var(--intervall-farbe, var(--ok)); }
progress.intervall::-moz-progress-bar { background: var(--intervall-farbe, var(--ok)); }
.intervall--gelb { --intervall-farbe: var(--warn); }
.intervall--rot { --intervall-farbe: var(--stop); }
.intervall--offen { --intervall-farbe: var(--tinte-3); }

/* =================================================================== 9 Tabellen, Verzeichnis */
.tabelle-rahmen { overflow-x: auto; margin: 0 0 1rem; -webkit-overflow-scrolling: touch; }
/* Scroll-Rahmen als Bezug für position:absolute (z. B. .unsichtbar in Tabellenzellen) – sonst ragen diese
   1-px-Texte aus dem Rahmen und verbreitern die ganze Seite (mobil waagrechter Bildlauf). */
.tabelle-rahmen, .lineal-rahmen, .lebenslinie-rahmen__scroll, .reiter, pre { position: relative; }
.tabelle { width: 100%; font-size: .875rem; border-collapse: collapse; }
.tabelle caption { caption-side: top; padding: 0 0 .5rem; text-align: left; font-weight: 650; }
.tabelle th {
    padding: .35rem .65rem .4rem; text-align: left; white-space: nowrap; vertical-align: bottom;
    font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--tinte-2);
    border-bottom: 2px solid var(--tinte);
}
.tabelle td { padding: .6rem .65rem; vertical-align: top; border-bottom: 1px solid var(--linie); }
.tabelle tbody tr { transition: background-color var(--bewegung-kurz); }
.tabelle tbody tr:hover { background: color-mix(in srgb, var(--karton) 32%, transparent); }
.tabelle tbody tr:last-child td { border-bottom-color: var(--linie-stark); }
.tabelle .zahl, .tabelle th.zahl { text-align: right; font-family: var(--schrift-mono); }
.tabelle__haupt { font-weight: 600; }
.tabelle__neben { display: block; font-size: .8rem; color: var(--tinte-2); }
.tabelle--dicht td { padding: .35rem .65rem; }
.tabelle tr.ist-ausgesondert td { color: var(--tinte-3); }
.tabelle__gruppe th { padding-top: 1.1rem; font-size: .75rem; color: var(--tinte); border-bottom: 1px solid var(--linie-stark); text-transform: none; letter-spacing: 0; }

/* Sicherheitsprotokoll (Bauteil, Stammdaten › Benutzer – UMSTIEG Paket 1.6): aufklappbar, darin .tabelle */
.sicherheitsprotokoll { margin: 1.5rem 0 1rem; padding-top: .75rem; border-top: 1px dashed var(--linie-stark); }
.sicherheitsprotokoll > .aufklapp > summary { gap: .25rem .75rem; }
.sicherheitsprotokoll__titel { display: inline-flex; align-items: center; gap: .45rem; margin: 0; font-size: 1rem; }
.sicherheitsprotokoll__zahl { font-size: .8rem; color: var(--tinte-2); }
.sicherheitsprotokoll__satz { margin: .6rem 0 .75rem; max-width: 70ch; font-size: .85rem; color: var(--tinte-2); }

/* Zwei-Faktor-Pflicht des Mandanten (Bauteil, Stammdaten › Benutzer – UMSTIEG Paket 1.5): Kästchen + Speichern */
.mfa-pflicht { margin: 1.5rem 0 0; padding: 1rem 1.1rem; background: var(--karton-hell); border: 1px dashed var(--linie-stark); border-radius: var(--radius); }
.mfa-pflicht__titel { display: flex; align-items: center; gap: .45rem; margin: 0 0 .6rem; font-size: .95rem; }
.mfa-pflicht .formular { margin: 0; }
.mfa-pflicht .formular__hinweis { max-width: 70ch; }

/* Blattverzeichnis / Chronik – gesetzt wie ein Inhaltsverzeichnis */
.verzeichnis { container-type: inline-size; list-style: none; margin: 0; padding: 0; font-size: .875rem; }
.verzeichnis__eintrag { border-bottom: 1px solid var(--linie); }
.verzeichnis__eintrag:last-child { border-bottom: 0; }
.verzeichnis__link {
    display: grid; grid-template-columns: 3rem 6.4rem 9.5rem minmax(0, 1fr) auto; align-items: baseline; gap: .75rem;
    padding: .55rem .5rem; color: var(--tinte); text-decoration: none;
}
a.verzeichnis__link:hover { background: var(--karton-hell); }
a.verzeichnis__link:hover .verzeichnis__titel span { text-decoration: underline; }
.verzeichnis__nr { font: 700 .82rem var(--schrift-mono); color: var(--tinte-2); text-align: right; }
.verzeichnis__datum { font-family: var(--schrift-mono); font-size: .82rem; color: var(--tinte-2); }
.verzeichnis__art .stempel { transform: none; }
.verzeichnis__titel { display: flex; align-items: baseline; gap: .4rem; min-width: 0; }
.verzeichnis__titel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verzeichnis__titel::after { content: ""; flex: 1; min-width: 1.5rem; border-bottom: 1.5px dotted var(--linie-stark); transform: translateY(-.25em); }
.verzeichnis__von { font-size: .8rem; color: var(--tinte-2); white-space: nowrap; }
.verzeichnis__eintrag--nachtrag .verzeichnis__titel::before { content: "↳"; color: var(--tinte-3); }
.verzeichnis__eintrag--nachtrag .verzeichnis__link { background: color-mix(in srgb, var(--karton) 22%, transparent); }
.verzeichnis__marke { flex: none; font: 600 .66rem/1 var(--schrift-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-2); padding: .15rem .3rem; border: 1px solid var(--linie-stark); border-radius: var(--radius); }
/* Schmales Verzeichnis (Seitenspalte, Tablet): Nr. | Datum + Art, darunter Titel – statt fünf Spalten,
   die sonst über die Spalte hinausragen (waagrechter Bildlauf bei 1280 px). */
@container (max-width: 40rem) {
    .verzeichnis__link { grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: .2rem .6rem; }
    .verzeichnis__datum { grid-column: 2; grid-row: 1; }
    .verzeichnis__art { grid-column: 3; grid-row: 1; justify-self: end; }
    .verzeichnis__titel, .verzeichnis__von { grid-column: 2 / -1; }
}

/* =================================================================== 10 Chips, Kategorien, Anlagennr. */
.chip {
    display: inline-flex; align-items: center; gap: .35rem; max-width: 100%;
    min-height: 1.55rem; padding: .1rem .5rem;
    font-size: .78rem; font-weight: 600; line-height: 1.25; color: var(--tinte); text-decoration: none; white-space: nowrap;
    background: var(--blatt); border: 1px solid var(--linie-stark); border-radius: var(--radius);
}
.chip .icon { width: .9rem; height: .9rem; }
.chip__text { overflow: hidden; text-overflow: ellipsis; }
a.chip:hover { border-color: var(--tinte-2); background: var(--karton-hell); }
.chip--leise { background: transparent; border-color: var(--linie); color: var(--tinte-2); }
.chip--ok { color: var(--ok); background: var(--ok-grund); border-color: color-mix(in srgb, var(--ok) 40%, var(--linie)); }
.chip--warn { color: var(--warn); background: var(--warn-grund); border-color: color-mix(in srgb, var(--warn) 45%, var(--linie)); }
.chip--stop { color: var(--stop); background: var(--stop-grund); border-color: color-mix(in srgb, var(--stop) 40%, var(--linie)); }
.chip--blau { color: var(--aktenblau); background: var(--blau-grund); border-color: color-mix(in srgb, var(--aktenblau) 40%, var(--linie)); }
.chip--vorschlag { color: var(--vorschlag); background: var(--vorschlag-grund); border-color: var(--vorschlag); }
.chip--kat { padding-left: .35rem; }
.chip__marke { width: .5rem; height: .9rem; flex: none; background: var(--kat, var(--tinte-3)); border-radius: 1px; }
.chip__kuerzel { font: 700 .72rem var(--schrift-mono); color: var(--tinte-2); }
.chipreihe { display: flex; flex-wrap: wrap; gap: .35rem; }

.anlagennr {
    display: inline-flex; align-items: center; flex: none;
    padding: .26rem .45rem .24rem; font: 700 .82rem/1 var(--schrift-mono); letter-spacing: .03em; white-space: nowrap;
    color: var(--tinte); text-decoration: none; background: var(--blatt);
    border: 1.5px solid var(--tinte); border-radius: var(--radius);
    box-shadow: inset 4px 0 0 var(--kat, transparent);
}
.anlagennr[class*="kat-"] { padding-left: .7rem; }
a.anlagennr:hover { color: var(--blatt); background: var(--tinte); }
.anlagennr--gross { font-size: 1.1rem; padding: .4rem .65rem .36rem; }
.anlagennr--gross[class*="kat-"] { padding-left: .95rem; box-shadow: inset 6px 0 0 var(--kat, transparent); }

.zaehler {
    display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .38rem;
    font: 700 .72rem/1 var(--schrift-mono); color: var(--blatt); background: var(--tinte-2); border-radius: var(--radius);
}
.zaehler--stop { background: var(--stop); }
.zaehler--warn { background: var(--warn); }
.zaehler--ok { background: var(--ok); }
.zaehler--leise { color: var(--tinte-2); background: var(--karton); }

.tel, .mail { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; }
.tel:hover span, .mail:hover span { text-decoration: underline; }
.tel { font-family: var(--schrift-mono); font-size: .92em; }
.tel .icon, .mail .icon { width: .95rem; height: .95rem; }

/* =================================================================== 11 Ampel, Stempel, Plakette, Siegel */
.ampel { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .15rem .4rem; font-size: .8125rem; font-weight: 600; line-height: 1.2; color: var(--tinte); }
.ampel__text, .ampel__tage { white-space: nowrap; }
.ampel__symbol { display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; flex: none; font: 800 .74rem/1 var(--schrift); }
.ampel__tage { font: 500 .78rem var(--schrift-mono); color: var(--tinte-2); }
.ampel--rot { color: var(--stop); }
.ampel--rot .ampel__symbol { color: var(--blatt); background: var(--stop); border-radius: var(--radius); }
.ampel--gelb .ampel__symbol { color: var(--blatt); background: var(--warn); clip-path: polygon(50% 2%, 100% 98%, 0 98%); padding-top: .3rem; font-size: .66rem; }
.ampel--gruen .ampel__symbol { color: var(--ok); font-size: .95rem; }
.ampel--offen { color: var(--tinte-2); }
.ampel--offen .ampel__symbol { color: var(--tinte-2); font-size: .95rem; }
.ampel--ruhend { color: var(--tinte-2); font-weight: 500; }
.ampel--ruhend .ampel__symbol { color: var(--tinte-3); }
.ampel--kompakt .ampel__text, .ampel--kompakt .ampel__tage { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ampel--kompakt { position: relative; }

.stempel {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .05rem;
    padding: .18rem .55rem .2rem; vertical-align: middle;
    font: 800 .7rem/1.15 var(--schrift); letter-spacing: .09em; text-transform: uppercase; white-space: nowrap;
    color: var(--tinte-2); border: 2px solid currentColor; border-radius: 3px;
    transform: rotate(-2deg); opacity: .93;
}
.stempel__zusatz { font: 700 .76rem/1.15 var(--schrift-mono); letter-spacing: .02em; text-transform: none; }
.stempel--klein { font-size: .6rem; padding: .08rem .35rem; border-width: 1.5px; }
.stempel--gross { font-size: .95rem; padding: .35rem .85rem .38rem; border-width: 2.5px; }
.stempel--gross .stempel__zusatz { font-size: 1rem; }
.stempel--gerade { transform: none; }
.stempel--neu { animation: stempel-auf var(--bewegung-lang) ease-out both; }
.stempel--ohne_befund, .stempel--maengel_behoben, .stempel--erledigt, .stempel--behoben, .stempel--vollstaendig, .stempel--laeuft { color: var(--ok); }
.stempel--maengel, .stempel--quittung, .stempel--offen { color: var(--warn); }
.stempel--stoerung, .stempel--kuendigen, .stempel--luecken, .stempel--gekuendigt, .stempel--aussonderung { color: var(--stop); }
.stempel--instandsetzung, .stempel--beauftragt, .stempel--eroeffnet, .stempel--pruefung, .stempel--pflicht, .stempel--vertrag, .stempel--auszug { color: var(--aktenblau); }
.stempel--verworfen { color: var(--tinte-2); text-decoration: line-through; text-decoration-thickness: 2px; }
/* Nachtrag und Übernommen sind keine Vorschläge: nicht violett (UMSTIEG §8 Nr. 17 – Violett heißt nur „Vorschlag“) */
.stempel--nachtrag { color: var(--tinte-2); }
.stempel--uebernommen { color: var(--aktenblau); }
.stempel--deckblatt, .stempel--dokument, .stempel--beendet, .stempel--neutral { color: var(--tinte-2); }
@keyframes stempel-auf { from { opacity: 0; transform: rotate(-2deg) scale(1.15); } to { opacity: .93; transform: rotate(-2deg) scale(1); } }

/* Prüfplakette (SVG aus Ui::plakette) */
.plakette { display: block; flex: none; width: 4.75rem; height: 4.75rem; --plakette: var(--ok); }
.plakette--s { width: 2.1rem; height: 2.1rem; }
.plakette--l { width: 8rem; height: 8rem; }
.plakette--gruen { --plakette: var(--ok); }
.plakette--gelb { --plakette: var(--warn); }
.plakette--rot { --plakette: var(--stop); }
.plakette--offen { --plakette: var(--tinte-3); }
.plakette__grund { fill: var(--blatt); stroke: var(--plakette); stroke-width: 1; }
.plakette__segment { fill: var(--plakette); stroke: var(--blatt); stroke-width: 1.1; }
.plakette--offen .plakette__segment { fill: var(--linie); }
.plakette__segment--faellig { fill: var(--tinte); }
.plakette__monat { fill: var(--blatt); font: 700 8.5px var(--schrift); }
.plakette--offen .plakette__monat { fill: var(--tinte-2); }
.plakette__monat--faellig { font-size: 10px; }
.plakette__kern { fill: var(--blatt); stroke: var(--plakette); stroke-width: 1.2; }
.plakette__kerbe { fill: var(--tinte); }
.plakette__jahr { fill: var(--tinte); font: 800 23px var(--schrift-mono); letter-spacing: -.5px; }
.plakette__jahr-voll { fill: var(--tinte-2); font: 600 6.5px var(--schrift-mono); letter-spacing: .5px; }
.plakette--s .plakette__monat, .plakette--s .plakette__jahr-voll { display: none; }
.plakette--s .plakette__jahr { font-size: 26px; }
.plakette-zeile { display: flex; align-items: center; gap: .75rem; }
.plakette-zeile__text { display: grid; gap: .1rem; font-size: .8125rem; line-height: 1.3; }
.plakette-zeile__text strong { font-size: .875rem; }

/* Siegel der Prüfkette */
.siegel {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem .55rem; margin: 0;
    padding: .25rem .55rem; font-size: .78rem; color: var(--tinte-2);
    background: var(--blatt); border: 1px solid var(--linie-stark); border-radius: var(--radius);
}
.siegel .icon { width: .95rem; height: .95rem; color: var(--ok); }
.siegel__text { font-weight: 600; color: var(--tinte); }
.siegel--gebrochen { border-color: var(--stop); background: var(--stop-grund); }
.siegel--gebrochen .icon, .siegel--gebrochen .siegel__text { color: var(--stop); }

.konfidenz { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 650; white-space: nowrap; }
.konfidenz__symbol { display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; font-size: .7rem; border-radius: 50%; color: var(--blatt); }
.konfidenz--eindeutig { color: var(--ok); } .konfidenz--eindeutig .konfidenz__symbol { background: var(--ok); }
.konfidenz--mehrdeutig { color: var(--warn); } .konfidenz--mehrdeutig .konfidenz__symbol { background: var(--warn); }
.konfidenz--unbekannt { color: var(--tinte-2); } .konfidenz--unbekannt .konfidenz__symbol { background: var(--tinte-3); }

/* =================================================================== 12 Reiter, Laufzettel, Kette */
.reiter { position: relative; z-index: 1; margin-bottom: -1px; overflow-x: auto; scrollbar-width: none; }
.reiter::-webkit-scrollbar { display: none; }
.reiter__liste { display: flex; align-items: flex-end; gap: .15rem; list-style: none; margin: 0; padding: .4rem .5rem 0; min-width: max-content; }
.reiter__liste > li { filter: drop-shadow(1px 0 0 var(--linie)) drop-shadow(-1px 0 0 var(--linie)) drop-shadow(0 -1px 0 var(--linie)); }
.reiter__tab {
    display: flex; align-items: center; gap: .5rem; padding: .48rem 1.25rem .45rem;
    font-weight: 600; font-size: .875rem; color: var(--tinte-2); text-decoration: none; white-space: nowrap;
    background: var(--karton);
    clip-path: polygon(.6rem 0, calc(100% - .6rem) 0, 100% 100%, 0 100%);
    transition: background-color var(--bewegung-kurz), color var(--bewegung-kurz), padding var(--bewegung-kurz);
}
.reiter__tab:hover { color: var(--tinte); background: color-mix(in srgb, var(--karton) 70%, var(--blatt)); }
.reiter__tab--aktiv, .reiter__tab[aria-current="page"], .reiter__tab[aria-selected="true"] { padding-top: .62rem; color: var(--tinte); background: var(--blatt); }
.reiter__nr {
    display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem;
    font: 700 .66rem/1 var(--schrift-mono); color: var(--tinte-2); border: 1px solid var(--linie-stark); border-radius: var(--radius);
}
.reiter__tab--aktiv .reiter__nr, .reiter__tab[aria-current="page"] .reiter__nr { color: var(--aktenblau); border-color: var(--aktenblau); }
.reiter__zahl { font: 600 .72rem var(--schrift-mono); color: var(--tinte-2); }
.reiter__blatt { position: relative; background: var(--blatt); border: 1px solid var(--linie); border-radius: 0 var(--radius) var(--radius) var(--radius); padding: 1.25rem; margin-bottom: 1.25rem; }
.reiter__blatt.htmx-request { opacity: .55; transition: opacity var(--bewegung); }

/* Laufzettel: Stufenanzeige eines Vorgangs */
.laufzettel { display: flex; list-style: none; margin: 0; padding: 0; counter-reset: stufe; }
.laufzettel__stufe { position: relative; flex: 1 1 0; display: grid; justify-items: start; align-content: start; gap: .1rem; min-width: 5.5rem; padding: 1.9rem .5rem 0 0; counter-increment: stufe; }
.laufzettel__stufe::before { content: ""; position: absolute; top: .7rem; left: 1.7rem; right: .25rem; height: 2px; background: var(--linie-stark); }
.laufzettel__stufe:last-child::before { display: none; }
.laufzettel__stufe--erledigt::before { background: var(--tinte); }
.laufzettel__punkt {
    position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 1.45rem; height: 1.45rem;
    font: 700 .7rem/1 var(--schrift-mono); color: var(--tinte-2); background: var(--blatt);
    border: 2px dashed var(--linie-stark); border-radius: 50%;
}
.laufzettel__punkt::after { content: counter(stufe); }
.laufzettel__stufe--erledigt .laufzettel__punkt { color: var(--blatt); background: var(--tinte); border: 2px solid var(--tinte); }
.laufzettel__stufe--erledigt .laufzettel__punkt::after { content: "\2713"; }
.laufzettel__stufe--aktiv .laufzettel__punkt { color: var(--aktenblau); border: 2px solid var(--aktenblau); box-shadow: 0 0 0 3px var(--blau-grund); }
.laufzettel__label { font-size: .8125rem; font-weight: 600; color: var(--tinte-2); }
.laufzettel__stufe--aktiv .laufzettel__label { color: var(--tinte); font-weight: 700; }
.laufzettel__datum .datum { font-size: .75rem; color: var(--tinte-2); }
.laufzettel--verworfen { opacity: .6; }
.laufzettel--verworfen .laufzettel__label { text-decoration: line-through; }
.laufzettel--stoerung .laufzettel__stufe--aktiv .laufzettel__punkt { color: var(--stop); border-color: var(--stop); box-shadow: 0 0 0 3px var(--stop-grund); }

/* Kette Pflicht │ Dienstleister │ Vertrag │ Nachweis */
.kette { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; align-items: stretch; }
.glied {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem;
    min-height: 3.75rem; padding: .55rem .65rem; color: var(--tinte); text-decoration: none;
    background: var(--blatt); border: 1.5px solid var(--linie-stark); border-radius: 10px;
    transition: border-color var(--bewegung-kurz), background-color var(--bewegung-kurz);
}
.glied + .glied::before { content: ""; position: absolute; left: calc(-1.1rem - 1.5px); top: 50%; width: 1.1rem; height: 2px; margin-top: -1px; background: var(--tinte-2); }
.glied--luecke::before { height: 6px !important; margin-top: -3px !important; background: var(--luecke) !important; }
a.glied:hover { border-color: var(--aktenblau); background: var(--blau-grund); }
.glied__key {
    display: grid; place-items: center; width: 1.65rem; height: 1.65rem;
    font: 800 .76rem/1 var(--schrift-mono); color: var(--tinte); background: var(--karton); border-radius: 50%;
}
.glied__inhalt { display: grid; min-width: 0; line-height: 1.25; }
.glied__art { font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-2); }
.glied__label, .glied__detail { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.glied__label { font-weight: 650; font-size: .86rem; }
.glied__detail { font-size: .75rem; color: var(--tinte-2); }
.glied__status { font-weight: 800; font-size: .9rem; }
.glied--ok { border-color: color-mix(in srgb, var(--ok) 50%, var(--linie)); }
.glied--ok .glied__key { color: var(--ok); background: var(--ok-grund); }
.glied--ok .glied__status { color: var(--ok); }
.glied--warn { border-color: var(--warn); }
.glied--warn .glied__key { color: var(--blatt); background: var(--warn); }
.glied--warn .glied__status { color: var(--warn); }
.glied--stop { border-color: var(--stop); background: var(--stop-grund); }
.glied--stop .glied__key { color: var(--blatt); background: var(--stop); }
.glied--stop .glied__status { color: var(--stop); }
.glied--luecke { border: 1.5px dashed var(--tinte-2); padding-top: .8rem; }
.glied--luecke::after { content: ""; position: absolute; left: 8px; right: 8px; top: -1.5px; height: 6px; background: var(--luecke); border-radius: 0 0 2px 2px; }
.glied--luecke .glied__key { background: transparent; border: 1.5px dashed var(--tinte-2); }
.glied--luecke .glied__label { color: var(--tinte-2); font-style: italic; }

.kettenzeile { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: center; padding: .85rem 0; border-bottom: 1px solid var(--linie); }
/* Schmale Zeile (z. B. neben der Unterlagen-Spalte): Kette zweispaltig */
@container (max-width: 52rem) {
    .kette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .glied:nth-child(3)::before { display: none; }
}
.kettenzeile:last-child { border-bottom: 0; }
.kettenzeile__kopf { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; }
.kettenzeile__titel { margin: 0; font-size: .95rem; }
.kettenzeile__fortschritt { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; font-size: .75rem; color: var(--tinte-2); }

.kettenglyphe { display: inline-flex; gap: 2px; vertical-align: middle; }
.kettenglyphe__glied {
    display: inline-grid; place-items: start center; width: 1.15rem; height: 1.2rem; padding-top: .08rem;
    font: 800 .6rem/1 var(--schrift-mono); color: var(--tinte-2);
    background: var(--blatt); border: 1.5px solid var(--linie-stark); border-radius: 3px;
}
.kettenglyphe__glied--ok { color: var(--ok); border-color: var(--ok); background: var(--ok-grund); }
.kettenglyphe__glied--warn { color: var(--blatt); border-color: var(--warn); background: var(--warn); }
.kettenglyphe__glied--stop { color: var(--blatt); border-color: var(--stop); background: var(--stop); box-shadow: inset 0 0 0 1px var(--blatt); }
/* Status nie nur über Farbe (SPEC §1.7): Hinweis „!" und Problem „✕" zusätzlich als Zeichen unter dem Buchstaben. */
.kettenglyphe__glied { position: relative; }
.kettenglyphe__glied--warn::after, .kettenglyphe__glied--stop::after {
    position: absolute; left: 0; right: 0; bottom: .06rem; font: 800 .5rem/1 var(--schrift-mono); text-align: center;
}
.kettenglyphe__glied--warn::after { content: "!"; }
.kettenglyphe__glied--stop::after { content: "\2715"; }
.kettenglyphe__glied--luecke { color: var(--tinte); border: 1.5px dashed var(--tinte-2); background: var(--luecke) bottom / 100% 40% no-repeat, var(--blatt); }

/* Lücke allgemein: schraffierte Fläche / Markierung */
.luecke { background: var(--luecke); }
.luecke-marke { display: inline-block; width: 1.5rem; height: .65rem; vertical-align: middle; background: var(--luecke); border-radius: 1px; }
.luecke-text { display: inline-flex; align-items: center; gap: .45rem; color: var(--tinte-2); font-style: italic; }

/* =================================================================== 13 Akte: Deckblatt, Feldraster, Blatt, Fächer */
.deckblatt {
    position: relative; margin: 1.7rem 0 1.25rem; padding: 1.35rem 1.5rem 1.25rem 1.75rem;
    background: var(--karton); border: 1px solid var(--linie); border-radius: 0 var(--radius-gross) var(--radius-gross) var(--radius-gross);
    box-shadow: inset 6px 0 0 var(--kat, var(--aktenblau));
}
.deckblatt::before {
    content: attr(data-reiter); position: absolute; left: -1px; top: -1.65rem; height: 1.65rem;
    display: flex; align-items: center; padding: 0 1rem 0 .9rem;
    font: 700 .68rem/1 var(--schrift-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-2);
    background: var(--karton); border: 1px solid var(--linie); border-bottom: 0; border-radius: var(--radius-gross) var(--radius-gross) 0 0;
}
.deckblatt:not([data-reiter])::before { content: "Akte"; }
.deckblatt__kopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem 1.5rem; }
.deckblatt__titel { min-width: 0; flex: 1 1 24rem; }
.deckblatt__nr { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0 0 .15rem; }
.deckblatt__nummer { font: 700 2rem/1.1 var(--schrift-mono); letter-spacing: .01em; }
.deckblatt__bezeichnung { margin: 0 0 .5rem; font-size: 1.35rem; font-weight: 600; letter-spacing: -.01em; }
.deckblatt__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; margin: 0; font-size: .875rem; color: var(--tinte-2); }
.deckblatt__seite { display: flex; align-items: center; gap: .9rem; }
.deckblatt__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-top: 1rem; }
.deckblatt__aktionen { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--linie-stark); }

.feldraster {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); margin: 1rem 0 0;
    background: var(--blatt); border-top: 1px solid var(--linie-stark); border-left: 1px solid var(--linie-stark);
}
.feldraster__feld { min-width: 0; padding: .42rem .65rem .5rem; border-right: 1px solid var(--linie-stark); border-bottom: 1px solid var(--linie-stark); }
.feldraster__feld--breit { grid-column: span 2; }
.feldraster dt, .feldraster__label { margin: 0 0 .12rem; font-size: .64rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--tinte-2); }
.feldraster dd, .feldraster__wert { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: 0; font-weight: 550; overflow-wrap: anywhere; }
.feldraster__feld--luecke dd::before, .feldraster__feld--luecke .feldraster__wert::before { content: ""; width: 1.6rem; height: .7rem; background: var(--luecke); border-radius: 1px; }
.feldraster__feld--luecke dd { color: var(--tinte-2); font-style: italic; font-weight: 500; }

.blatt {
    position: relative; min-height: 7.5rem; margin: 0 0 1rem; padding: 1.2rem 1.5rem 1.2rem 3rem;
    background: var(--blatt); border: 1px solid var(--linie); border-radius: var(--radius);
}
.blatt::before, .blatt::after {
    content: ""; position: absolute; left: 1.05rem; width: .72rem; height: .72rem; border-radius: 50%;
    background: var(--papier); border: 1px solid var(--linie-stark);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .14);
}
.blatt::before { top: calc(50% - 2.6rem); }
.blatt::after { top: calc(50% + 1.9rem); }
.blatt--ohne-lochung { padding-left: 1.5rem; }
.blatt--ohne-lochung::before, .blatt--ohne-lochung::after { display: none; }
.blatt__kopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem 1rem; padding-bottom: .65rem; margin-bottom: .9rem; border-bottom: 1px dashed var(--linie-stark); }
.blatt__nr { margin: 0 0 .15rem; font: 600 .76rem var(--schrift-mono); letter-spacing: .03em; color: var(--tinte-2); }
.blatt__titel { margin: 0; font-size: 1.1rem; }
.blatt__inhalt > :last-child { margin-bottom: 0; }
.blatt__fuss {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem 1rem; margin-top: 1rem; padding-top: .6rem;
    font: .74rem/1.4 var(--schrift-mono); color: var(--tinte-2); border-top: 1px solid var(--linie);
}
.blatt__navigation { display: flex; justify-content: space-between; gap: .5rem; margin-top: .5rem; }
.blatt--nachtrag { margin-left: 2rem; min-height: 0; background: var(--karton-hell); border-style: dashed; border-color: var(--linie-stark); }
.blatt--nachtrag::before, .blatt--nachtrag::after { display: none; }
.blatt--nachtrag { padding-left: 1.5rem; }
.blatt--a4 { max-width: 48rem; margin-left: auto; margin-right: auto; aspect-ratio: auto; }
.blatt--neu { animation: blatt-ab var(--bewegung-lang) ease-out both; }
@keyframes blatt-ab { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Änderungen im Nachtrag (Alt → Neu) */
.aenderungen { display: grid; gap: .25rem; margin: 0; font-size: .875rem; }
.aenderungen > div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: .75rem; }
.aenderungen dt { color: var(--tinte-2); }
.aenderungen dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; }
.aenderungen del { color: var(--tinte-2); text-decoration-color: var(--stop); }
.aenderungen ins { text-decoration: none; font-weight: 650; background: var(--ok-grund); padding: 0 .2em; border-radius: var(--radius); }

/* Aufklappbar (details/summary), z. B. Vollständigkeits-Stempel mit Lückenliste */
.aufklapp > summary { display: inline-flex; align-items: center; gap: .4rem; list-style: none; cursor: pointer; }
.aufklapp > summary::-webkit-details-marker { display: none; }
.aufklapp > summary::after { content: "\25BE"; font-size: .8em; color: var(--tinte-2); transition: transform var(--bewegung); }
.aufklapp[open] > summary::after { transform: rotate(180deg); }
.aufklapp__inhalt { margin-top: .5rem; padding: .6rem .85rem; font-size: .85rem; background: var(--blatt); border: 1px solid var(--linie); border-radius: var(--radius); }
.aufklapp__inhalt ul { margin: 0; padding-left: 1.1rem; }

/* Vorgangskarte (Störung / Instandsetzung) */
.vorgangskarte { display: grid; gap: .85rem; }
.vorgangskarte__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.vorgangskarte__titel { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1rem; }
.vorgangskarte__titel .icon { color: var(--stop); }
.vorgangskarte--instandsetzung .vorgangskarte__titel .icon { color: var(--aktenblau); }
.vorgangskarte__nr { font: 700 .85rem var(--schrift-mono); color: var(--tinte-2); }
.vorgangskarte__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem; margin: 0; font-size: .85rem; color: var(--tinte-2); }

.anhaenge { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .35rem; }
.anhang { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .45rem .6rem; background: var(--blatt); border: 1px solid var(--linie); border-radius: var(--radius); font-size: .85rem; }
.anhang .icon { color: var(--tinte-2); }
.anhang > div { min-width: 0; }   /* lange Dateinamen kürzen statt die Zeile zu sprengen (mobil) */
.anhang__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.anhang__meta { display: flex; flex-wrap: wrap; gap: .2rem .6rem; font-size: .75rem; color: var(--tinte-2); }
.anhang--ohne-datei .anhang__name { color: var(--tinte-2); font-weight: 500; font-style: italic; }

/* Unterlagen-Fächer (Soll-Unterlagen je Kategorie) */
.faecher { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.fach {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem;
    padding: .55rem .7rem; background: var(--blatt); border: 1px solid var(--linie); border-radius: var(--radius); font-size: .85rem;
}
.fach > .icon { color: var(--tinte-2); }
.fach__titel { margin: 0; font-weight: 600; line-height: 1.3; }
.fach__detail { margin: 0; font-size: .75rem; color: var(--tinte-2); }
.fach--belegt > .icon { color: var(--ok); }
.fach--leer { background: transparent; border: 1.5px dashed var(--linie-stark); color: var(--tinte-2); }
.fach--leer .fach__titel { font-weight: 550; }
.fach--frist { border-left: 3px solid var(--warn); }
.fach.dropzone--aktiv { border-color: var(--aktenblau); background: var(--blau-grund); }

/* =================================================================== 14 Lage, Wiedervorlage, Eingang, Kartei, Lineal, Lebenslinie */
.lagesatz { margin: 0 0 1.25rem; font-size: clamp(1.1rem, 1.9vw, 1.42rem); line-height: 1.45; font-weight: 550; letter-spacing: -.01em; }
.lagesatz__teil { white-space: nowrap; }
.lagesatz__teil + .lagesatz__teil::before { content: "·"; margin: 0 .45rem; color: var(--tinte-3); font-weight: 400; }
.lagesatz__zahl { font-family: var(--schrift-mono); font-weight: 700; }
.lagesatz__teil--stop { color: var(--stop); }
.lagesatz__teil--warn .lagesatz__zahl { color: var(--warn); }
.lagesatz__teil--ok { color: var(--ok); }
.lagesatz a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }

.wiedervorlage { display: grid; gap: 1.35rem; }
.wiedervorlage__kopf {
    display: inline-flex; align-items: center; gap: .55rem; margin: 0; padding: .38rem .85rem .36rem;
    font-size: .74rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: var(--tinte);
    background: var(--karton); border: 1px solid var(--linie); border-bottom: 0; border-radius: var(--radius-gross) var(--radius-gross) 0 0;
}
.wiedervorlage__gruppe--stop .wiedervorlage__kopf { box-shadow: inset 0 3px 0 var(--stop); }
.wiedervorlage__gruppe--warn .wiedervorlage__kopf { box-shadow: inset 0 3px 0 var(--warn); }
.wiedervorlage__liste { list-style: none; margin: 0; padding: 0; background: var(--blatt); border: 1px solid var(--linie); border-radius: 0 var(--radius) var(--radius) var(--radius); }
.wiedervorlage__zeile {
    display: grid; grid-template-columns: 8.75rem auto minmax(0, 1fr) auto auto; align-items: center; gap: .5rem 1rem;
    padding: .7rem 1rem; border-bottom: 1px solid var(--linie);
}
.wiedervorlage__zeile:last-child { border-bottom: 0; }
.wiedervorlage__text { min-width: 0; }
.wiedervorlage__titel { margin: 0; font-weight: 600; line-height: 1.3; }
.wiedervorlage__titel a { color: var(--tinte); text-decoration: none; }
.wiedervorlage__titel a:hover { color: var(--aktenblau); text-decoration: underline; }
.wiedervorlage__detail { margin: .1rem 0 0; font-size: .8rem; color: var(--tinte-2); }
.wiedervorlage__datum { font: .82rem var(--schrift-mono); color: var(--tinte-2); white-space: nowrap; }
.wiedervorlage__aktionen { display: flex; gap: .35rem; justify-content: flex-end; }
.wiedervorlage__zeile--quittiert { background: color-mix(in srgb, var(--karton) 25%, transparent); }
.wiedervorlage__zeile--quittiert .wiedervorlage__titel { color: var(--tinte-2); }
.wiedervorlage__quittung { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin: .3rem 0 0; font-size: .78rem; color: var(--tinte-2); }
.wiedervorlage__leer { padding: .9rem 1rem; color: var(--tinte-2); font-size: .875rem; }

.eingangskarte {
    display: grid; gap: .85rem; padding: 1rem 1.1rem 1.05rem; margin-bottom: 1rem;
    background: var(--blatt); border: 1px solid var(--linie); border-left: 4px solid var(--tinte-3); border-radius: var(--radius);
}
.eingangskarte--eindeutig { border-left-color: var(--ok); }
.eingangskarte--mehrdeutig { border-left-color: var(--warn); }
.eingangskarte--unbekannt { border-left-color: var(--tinte-3); }
.eingangskarte__kopf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; }
.eingangskarte__kopf > .icon { width: 1.4rem; height: 1.4rem; color: var(--tinte-2); }
.eingangskarte__datei { margin: 0; font: 600 .84rem/1.35 var(--schrift-mono); overflow-wrap: anywhere; }
.eingangskarte__meta { display: block; font: .75rem var(--schrift); color: var(--tinte-2); }
.eingangskarte__grund { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: 0; padding: .45rem .65rem; font-size: .8125rem; color: var(--tinte-2); background: var(--karton-hell); border-radius: var(--radius); }
.eingangskarte__grund strong { color: var(--tinte); font-family: var(--schrift-mono); font-weight: 650; }
.eingangskarte__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding-top: .75rem; border-top: 1px solid var(--linie); }
.eingangskarte__fuss .knopf--primaer { margin-left: auto; }
.eingangskarte--abgelegt { animation: karte-weg var(--bewegung-lang) ease-in forwards; }
@keyframes karte-weg { to { opacity: 0; transform: translateX(24px); } }
.treffer { padding: 0 .08em; color: inherit; background: transparent; border-bottom: 2px solid currentColor; border-radius: 1px; }
.treffer--kennung { color: var(--aktenblau); background: var(--blau-grund); }
.treffer--datum { color: var(--vorschlag); background: var(--vorschlag-grund); }
.treffer--firma { color: var(--ok); background: var(--ok-grund); }
.treffer--typ { color: var(--warn); background: var(--warn-grund); }

.karteikarte { display: grid; align-content: start; background: var(--blatt); border: 1px solid var(--linie); border-radius: var(--radius); }
.karteikarte__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: .8rem 1rem .6rem; border-bottom: 2px solid color-mix(in srgb, var(--stop) 55%, var(--linie)); }
.karteikarte__name { margin: 0; font-size: 1rem; }
.karteikarte__name a { color: var(--tinte); text-decoration: none; }
.karteikarte__name a:hover { color: var(--aktenblau); text-decoration: underline; }
.karteikarte__gewerk { font-size: .75rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-2); white-space: nowrap; }
.karteikarte__inhalt { display: grid; gap: .45rem; padding: .7rem 1rem .8rem; font-size: .85rem; }
.karteikarte__kontakt { display: grid; gap: .1rem; }
.karteikarte__kontakt strong { font-weight: 650; }
.karteikarte__rolle { font-size: .75rem; color: var(--tinte-2); }
.karteikarte__notdienst { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; padding: .35rem .55rem; color: var(--stop); background: var(--stop-grund); border-radius: var(--radius); font-weight: 650; font-size: .82rem; }
.karteikarte__notdienst .tel { color: var(--stop); }
.karteikarte__fuss { display: flex; flex-wrap: wrap; gap: .25rem .75rem; padding: .55rem 1rem; font-size: .76rem; color: var(--tinte-2); border-top: 1px solid var(--linie); background: var(--karton-hell); }

.entscheidung { display: grid; gap: .75rem; padding: 1rem 1.1rem; background: var(--warn-grund); border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--linie)); border-radius: var(--radius); }
.entscheidung__satz { margin: 0; font-weight: 600; }

/* SVG: gemeinsame Schraffur-Klassen */
.schraffur__a { fill: var(--signalgelb); }
.schraffur__b { fill: var(--luecke-streifen); }
.schraffur__stop { fill: var(--stop); }
.schraffur__grund { fill: var(--blatt); }

/* Vertragslineal */
.lineal-rahmen { margin: 0 0 .75rem; overflow-x: auto; }
.lineal { display: block; width: 100%; min-width: 30rem; height: auto; font-family: var(--schrift); }
.lineal__achse { stroke: var(--linie-stark); stroke-width: 1.5; }
.lineal__takt { stroke: var(--linie-stark); stroke-width: 1; }
.lineal__jahr { fill: var(--tinte-2); font: 600 10.5px var(--schrift-mono); }
.lineal__laufzeit { fill: var(--aktenblau); }
.lineal__laufzeit--offen { fill: color-mix(in srgb, var(--aktenblau) 70%, transparent); }
.lineal__verlaengerung { fill: var(--blau-grund); stroke: var(--aktenblau); stroke-width: 1.5; stroke-dasharray: 5 4; }
.lineal__fenster { stroke: var(--stop); stroke-width: 1.2; opacity: .85; }
.lineal__stichtag { stroke: var(--stop); stroke-width: 2; }
.lineal__stichtag-text { fill: var(--stop); font: 700 12px var(--schrift); }
.lineal__datum { fill: var(--tinte-2); font: 11px var(--schrift-mono); }
.lineal__heute { stroke: var(--tinte); stroke-width: 1.5; stroke-dasharray: 3 3; }
.lineal__heute-punkt { fill: var(--tinte); }
.lineal__heute-text { fill: var(--tinte); font: 700 11px var(--schrift); }

/* Lebenslinie (SVG aus Ui::lebenslinie) */
.lebenslinie-rahmen { margin: 0 0 1rem; }
.lebenslinie-rahmen__scroll { overflow-x: auto; background: var(--blatt); border: 1px solid var(--linie); border-radius: var(--radius); -webkit-overflow-scrolling: touch; }
.lebenslinie { display: block; width: 100%; min-width: 46rem; height: auto; font-family: var(--schrift); }
.lebenslinie__bahn { fill: var(--blatt); }
.lebenslinie__bahn--b { fill: var(--karton-hell); }
.lebenslinie__bahnlabel { fill: var(--tinte); font: 600 12.5px var(--schrift); }
.lebenslinie__spur { stroke: var(--linie-stark); stroke-width: 1; stroke-dasharray: 2 3; }
.lebenslinie__achse { stroke: var(--tinte-2); stroke-width: 1; }
.lebenslinie__raster { stroke: var(--linie); stroke-width: 1; }
.lebenslinie__takt { stroke: var(--tinte-3); stroke-width: 1; }
.lebenslinie__jahr { fill: var(--tinte-2); font: 700 11.5px var(--schrift-mono); }
.lebenslinie__heute { stroke: var(--aktenblau); stroke-width: 1.5; }
.lebenslinie__heute-flagge { fill: var(--aktenblau); }
.lebenslinie__heute-text { fill: var(--auf-aktenblau); font: 700 9.5px var(--schrift); }
.lebenslinie__marke { stroke: var(--blatt); stroke-width: 1.5; }
.lebenslinie__marke--ohne_befund, .lebenslinie__marke--maengel_behoben { fill: var(--ok); }
.lebenslinie__marke--maengel { fill: var(--warn); }
.lebenslinie__marke--plan, .lebenslinie__marke--offen { fill: var(--blatt); stroke: var(--aktenblau); stroke-width: 1.6; stroke-dasharray: 3 2.2; }
.lebenslinie__marke--ueberfaellig { fill: var(--stop-grund); stroke: var(--stop); stroke-width: 1.8; }
.lebenslinie__marke--stoerung { fill: var(--stop); }
.lebenslinie__marke--instandsetzung { fill: var(--aktenblau); }
.lebenslinie__marke--dokument { fill: var(--tinte-2); }
.lebenslinie__haken { fill: none; stroke: var(--blatt); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lebenslinie__kreuz { fill: none; stroke: var(--stop); stroke-width: 1.6; stroke-linecap: round; }
.lebenslinie__balken { stroke: none; }
.lebenslinie__balken--ausfall { fill: color-mix(in srgb, var(--stop) 30%, var(--blatt)); stroke: var(--stop); stroke-width: 1; }
.lebenslinie__balken--vertrag { fill: color-mix(in srgb, var(--aktenblau) 22%, var(--blatt)); stroke: var(--aktenblau); stroke-width: 1; }
.lebenslinie__balken--verlaengerung { fill: none; stroke: var(--aktenblau); stroke-width: 1.2; stroke-dasharray: 4 3; }
/* Kündigungsfenster rot/weiß (wie das Vertragslineal), Lücke gelb/schwarz (UMSTIEG §8 Nr. 17) */
.lebenslinie__balken--kuendigung { stroke: var(--stop); stroke-width: .8; }
.lebenslinie__balken--luecke { stroke: var(--tinte); stroke-width: .8; }
.lebenslinie__link { cursor: pointer; }
.lebenslinie__link:hover .lebenslinie__marke, .lebenslinie__link:focus .lebenslinie__marke { stroke: var(--tinte); stroke-width: 2; }
.lebenslinie__link:focus { outline: none; }
.lebenslinie__link:focus-visible .lebenslinie__marke { stroke: var(--aktenblau); stroke-width: 3; }

.legende { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-top: .5rem; font-size: .75rem; color: var(--tinte-2); }
.legende__eintrag { display: inline-flex; align-items: center; gap: .35rem; }
.legende__marke { width: 1rem; height: 1rem; }
.legende__balken { display: inline-block; width: 1.4rem; height: .6rem; border-radius: 1px; }
.legende__balken--ausfall { background: color-mix(in srgb, var(--stop) 30%, var(--blatt)); border: 1px solid var(--stop); }
.legende__balken--kuendigung { background: var(--fenster); box-shadow: inset 0 0 0 1px var(--stop); }

/* =================================================================== 15 Leer, Dialog, Palette, Dropzone, Meldungen */
.leer {
    display: grid; justify-items: center; gap: .5rem; padding: 2rem 1.25rem; text-align: center;
    color: var(--tinte-2); border: 1.5px dashed var(--linie-stark); border-radius: var(--radius-gross);
}
.leer__icon { width: 2.4rem; height: 2.4rem; padding: .5rem; color: var(--tinte-2); background: var(--karton); border-radius: var(--radius-gross); stroke-width: 1.6; }
.leer__titel { margin: 0; font-weight: 650; color: var(--tinte); }
.leer__text { margin: 0 0 .25rem; max-width: 34rem; font-size: .9rem; }
.leer--klein { padding: 1rem; }

/* Dialog (<dialog>) */
.dialog {
    width: min(36rem, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); padding: 0;
    color: var(--tinte); background: var(--blatt); border: 1px solid var(--linie); border-radius: var(--radius-gross);
    box-shadow: var(--schatten-hoch);
}
.dialog--breit { width: min(52rem, calc(100vw - 2rem)); }
.dialog::backdrop { background: rgba(28, 35, 44, .42); background: var(--rueckdrop, rgba(28, 35, 44, .42)); }
.dialog[open] { animation: dialog-auf var(--bewegung) ease-out; }
@keyframes dialog-auf { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dialog__form { display: flex; flex-direction: column; max-height: inherit; margin: 0; }
.dialog__kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.1rem; background: var(--karton); border-bottom: 1px solid var(--linie); }
.dialog__titel { margin: 0; font-size: 1.05rem; }
.dialog__inhalt { display: grid; gap: 1rem; padding: 1.1rem; overflow-y: auto; }
.dialog__inhalt > p { margin: 0; }
.dialog__fuss { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; padding: .8rem 1.1rem; border-top: 1px solid var(--linie); }

/* Befehlspalette (Strg+K) */
.palette {
    width: min(42rem, calc(100vw - 2rem)); margin-top: 9vh; padding: 0;
    color: var(--tinte); background: var(--blatt); border: 1px solid var(--linie-stark); border-radius: var(--radius-gross);
    box-shadow: var(--schatten-hoch);
}
.palette::backdrop { background: rgba(28, 35, 44, .42); background: var(--rueckdrop, rgba(28, 35, 44, .42)); }
.palette[open] { animation: dialog-auf var(--bewegung-kurz) ease-out; }
.palette__form { margin: 0; }
.palette__kopf { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-bottom: 1px solid var(--linie); }
.palette__kopf > .icon { width: 1.25rem; height: 1.25rem; color: var(--tinte-2); }
.palette__feld { flex: 1; min-height: 2.3rem; padding: .2rem 0; font-size: 1.05rem; background: transparent; border: 0; }
.palette__feld:focus { outline: none; }
.palette__ziel { margin: 0; padding: .45rem .9rem; font-size: .8rem; font-weight: 600; color: var(--aktenblau); background: var(--blau-grund); border-bottom: 1px solid var(--linie); }
.palette__liste { max-height: min(24rem, 55vh); margin: 0; padding: .35rem; list-style: none; overflow-y: auto; }
.palette__gruppe { padding: .5rem .6rem .25rem; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-2); }
.palette__link { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .1rem .65rem; padding: .5rem .6rem; color: var(--tinte); text-decoration: none; border-radius: var(--radius); }
.palette__link .icon { grid-row: span 2; color: var(--tinte-2); }
.palette__label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette__sub { font-size: .78rem; color: var(--tinte-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette__eintrag[aria-selected="true"] .palette__link, .palette__link:hover { background: var(--blau-grund); }
.palette__eintrag[aria-selected="true"] .palette__link { box-shadow: inset 3px 0 0 var(--aktenblau); }
.palette__hinweis { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: 0; padding: .55rem .9rem; font-size: .75rem; color: var(--tinte-2); border-top: 1px solid var(--linie); background: var(--karton-hell); }
.palette__leer { padding: 1rem .6rem; font-size: .875rem; color: var(--tinte-2); }

/* Dropzone */
.dropzone { position: relative; display: grid; gap: .6rem; }
.dropzone__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.dropzone__flaeche {
    display: grid; justify-items: center; gap: .3rem; padding: 1.6rem 1rem; text-align: center; cursor: pointer;
    color: var(--tinte-2); background: var(--blatt); border: 2px dashed var(--linie-stark); border-radius: var(--radius-gross);
    transition: border-color var(--bewegung-kurz), background-color var(--bewegung-kurz), color var(--bewegung-kurz);
}
.dropzone__flaeche > .icon { width: 1.8rem; height: 1.8rem; color: var(--aktenblau); }
.dropzone__titel { font-weight: 650; color: var(--tinte); }
.dropzone__hilfe { font-size: .8rem; }
.dropzone__hilfe u { color: var(--aktenblau); text-decoration-thickness: 1px; }
.dropzone__flaeche:hover { border-color: var(--tinte-2); }
.dropzone__input:focus-visible + .dropzone__flaeche { outline: 2px solid var(--aktenblau); outline-offset: 2px; }
.dropzone--aktiv .dropzone__flaeche { color: var(--aktenblau); border-color: var(--aktenblau); background: var(--blau-grund); }
.dropzone--klein .dropzone__flaeche { padding: .8rem; grid-auto-flow: column; justify-content: start; text-align: left; }
.dropzone__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.dropzone__datei { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .6rem; padding: .4rem .6rem; font-size: .82rem; background: var(--blatt); border: 1px solid var(--linie); border-radius: var(--radius); }
.dropzone__datei .icon { color: var(--tinte-2); }
.dropzone__name { font-family: var(--schrift-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone__groesse { font: .75rem var(--schrift-mono); color: var(--tinte-2); }
html.ziehen-aktiv body::after {
    content: "Dateien loslassen – sie landen im Eingang"; position: fixed; inset: .75rem; z-index: 90;
    display: grid; place-items: center; font-size: 1.25rem; font-weight: 650; color: var(--aktenblau);
    background: color-mix(in srgb, var(--blatt) 88%, transparent); border: 3px dashed var(--aktenblau); border-radius: 8px;
    pointer-events: none;
}

/* Meldungen (Flash) und Toasts */
.meldungen { display: grid; gap: .5rem; margin: 0 0 1.25rem; }
.meldung {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; gap: .55rem;
    padding: .62rem .75rem .62rem .9rem; font-size: .9rem;
    background: var(--blatt); border: 1px solid var(--linie); border-left: 4px solid var(--meldung, var(--aktenblau)); border-radius: var(--radius);
    animation: meldung-auf var(--bewegung) ease-out;
}
.meldung__icon { color: var(--meldung, var(--aktenblau)); width: 1.15rem; height: 1.15rem; }
.meldung__label { font-weight: 700; }
.meldung__aktion { font-weight: 600; white-space: nowrap; }
.meldung__schliessen { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; padding: 0; color: var(--tinte-2); background: none; border: 0; border-radius: var(--radius); cursor: pointer; }
.meldung__schliessen:hover { background: var(--karton-hell); color: var(--tinte); }
.meldung--ok { --meldung: var(--ok); }
.meldung--info { --meldung: var(--aktenblau); }
.meldung--warn { --meldung: var(--warn); }
.meldung--fehler { --meldung: var(--stop); }
.meldung--weg { opacity: 0; transform: translateY(-4px); transition: opacity var(--bewegung-lang), transform var(--bewegung-lang); }
@keyframes meldung-auf { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 80; display: grid; gap: .5rem; justify-items: end; pointer-events: none; }
.toast {
    display: flex; align-items: center; gap: .55rem; max-width: min(26rem, calc(100vw - 2rem)); padding: .6rem .9rem;
    font-size: .875rem; font-weight: 600; color: var(--papier); background: var(--tinte); border-radius: var(--radius-gross);
    box-shadow: var(--schatten-hoch); pointer-events: auto; animation: toast-auf var(--bewegung) ease-out;
}
.toast .icon { color: var(--papier); }
.toast--ok .icon { color: color-mix(in srgb, var(--ok) 60%, var(--papier)); }
.toast--fehler { background: var(--stop); color: var(--blatt); }
.toast--weg { opacity: 0; transform: translateY(6px); transition: opacity var(--bewegung-lang), transform var(--bewegung-lang); }
@keyframes toast-auf { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Status-Zeile (z. B. 2FA aktiv) */
.status { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .65rem; font-weight: 650; }
.status--ok { color: var(--ok); }
.status--offen { color: var(--tinte-2); }
.status--stop { color: var(--stop); }

/* Kennzahlen (schlicht, ohne Kacheln) */
.kennzahlen { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; margin: 0; }
.kennzahlen__eintrag { display: grid; gap: .1rem; }
.kennzahlen__label { font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--tinte-2); }
.kennzahlen__wert { margin: 0; font: 700 1.9rem/1.1 var(--schrift-mono); }
.leerzustand { text-align: left; }
.leerzustand__text { color: var(--tinte-2); }

/* Profil */
.profil__codeliste { columns: 2; gap: 1.5rem; list-style: none; margin: .5rem 0 0; padding: .75rem 1rem; background: var(--karton-hell); border: 1px dashed var(--linie-stark); border-radius: var(--radius); font-size: .95rem; letter-spacing: .06em; }
.profil__qr-rahmen { display: grid; justify-items: start; gap: .6rem; margin: 0 0 1rem; }
.profil__qr, .qr { display: block; width: 11rem; height: auto; max-width: 100%; padding: .4rem; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); }
.profil__schluessel { word-break: break-all; }
.theme-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .6rem; margin: 0; padding: 0; border: 0; }
.theme-karte { position: relative; display: grid; gap: .45rem; padding: .55rem; cursor: pointer; border: 1.5px solid var(--linie); border-radius: var(--radius-gross); background: var(--blatt); }
.theme-karte input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.theme-karte:has(input:checked) { border-color: var(--aktenblau); box-shadow: inset 0 0 0 1px var(--aktenblau); }
.theme-karte:has(input:focus-visible) { outline: 2px solid var(--aktenblau); outline-offset: 2px; }
.theme-karte__text { display: flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 600; }
.theme-vorschau { display: grid; grid-template-columns: 1.1rem 1fr; gap: 3px; height: 3.4rem; padding: 4px; border-radius: 2px; border: 1px solid var(--linie); }
.theme-vorschau::before { content: ""; border-radius: 1px; }
.theme-vorschau::after { content: ""; border-radius: 1px; }
.theme-vorschau--hell { background: #F6F4EE; }
.theme-vorschau--hell::before { background: #ECE6D6; }
.theme-vorschau--hell::after { background: #FFFFFF; box-shadow: inset 0 3px 0 #1F5A9E; }
.theme-vorschau--dunkel { background: #12161B; }
.theme-vorschau--dunkel::before { background: #262B33; }
.theme-vorschau--dunkel::after { background: #1A1F26; box-shadow: inset 0 3px 0 #7FAAE0; }
.theme-vorschau--auto { background: linear-gradient(90deg, #F6F4EE 50%, #12161B 50%); }
.theme-vorschau--auto::before { background: linear-gradient(90deg, #ECE6D6 50%, #262B33 50%); }
.theme-vorschau--auto::after { background: linear-gradient(90deg, #FFFFFF 50%, #1A1F26 50%); }

/* =================================================================== 16 htmx, Skelett, Bewegung, Mobil */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.htmx-swapping { opacity: .4; transition: opacity var(--bewegung); }
.htmx-added { animation: blatt-ab var(--bewegung) ease-out; }

.ladebalken { position: fixed; left: 0; right: 0; top: 0; z-index: 95; height: 3px; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity var(--bewegung); }
.ladebalken::after { content: ""; position: absolute; top: 0; bottom: 0; width: 35%; background: var(--aktenblau); animation: laden 1.1s ease-in-out infinite; }
html.laedt .ladebalken { opacity: 1; }
@keyframes laden { from { left: -35%; } to { left: 100%; } }

.kreisel { display: inline-block; width: 1rem; height: 1rem; border: 2px solid var(--linie-stark); border-top-color: var(--aktenblau); border-radius: 50%; animation: drehen .7s linear infinite; vertical-align: -.2em; }
@keyframes drehen { to { transform: rotate(360deg); } }

.skelett {
    display: block; min-height: .9rem; border-radius: var(--radius);
    background: linear-gradient(90deg, var(--karton) 0%, var(--karton-hell) 50%, var(--karton) 100%);
    background-size: 200% 100%; animation: skelett 1.3s linear infinite;
}
.skelett--zeile { height: .9rem; margin: .45rem 0; }
.skelett--kurz { width: 40%; }
.skelett--block { height: 6rem; }
.skelett--lebenslinie { height: 9rem; border: 1px solid var(--linie); }
@keyframes skelett { from { background-position: 100% 0; } to { background-position: -100% 0; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .ladebalken::after { left: 0; width: 100%; }
}

@media (pointer: coarse) {
    .knopf { min-height: 2.75rem; }
    .knopf--klein { min-height: 2.4rem; }
    .leiste__link { min-height: 2.75rem; }
    .schalter__text { padding: .65rem 1rem; }
}

@media (max-width: 1100px) {
    .raster--seite { grid-template-columns: minmax(0, 1fr); }
    .kette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .glied:nth-child(3)::before { display: none; }
    .wiedervorlage__zeile { grid-template-columns: 8.75rem minmax(0, 1fr) auto; }
    .wiedervorlage__zeile > .anlagennr, .wiedervorlage__zeile > .chip { grid-column: 2; grid-row: 1; justify-self: start; }
    .wiedervorlage__text { grid-column: 2 / -1; }
    .wiedervorlage__datum { grid-column: 3; grid-row: 1; justify-self: end; }
    .wiedervorlage__aktionen { grid-column: 2 / -1; justify-content: flex-start; }
}

/* Kopf zwischen Tablet und kleinem Desktop (Leiste links + schmale Arbeitsfläche): Schnellknöpfe nur mit
   Icon, ohne Benutzername und Tastenhinweis – sonst ragt der Kopf über den Rand (waagrechter Bildlauf). */
@media (min-width: 760px) and (max-width: 1100px) {
    .kopf { gap: .5rem; }
    .sprung__taste { display: none; }
    .sprung__feld { min-width: 0; padding-right: .7rem; }
    .schnellknoepfe .knopf { width: 2.6rem; padding: 0; justify-content: center; }
    .schnellknoepfe .knopf__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .benutzermenue__name { display: none; }
}

@media (max-width: 860px) {
    .anmeldung { grid-template-columns: minmax(0, 1fr); }
    .anmeldung__deckel { border-right: 0; border-bottom: 1px solid var(--linie); padding: 1.5rem; }
    .anmeldung__probe { display: none; }
}

/* Mobil: Navigation unten, Karten einspaltig */
@media (max-width: 759px) {
    .lagesatz__teil { white-space: normal; }   /* lange Satzteile umbrechen statt die Seite zu verbreitern */
    body { font-size: 1rem; }
    .seite--app { grid-template-columns: minmax(0, 1fr); padding-bottom: calc(3.9rem + env(safe-area-inset-bottom, 0px)); }
    .arbeitsflaeche { grid-column: 1; }
    .register {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 40; height: auto; overflow: visible;
        flex-direction: row; border-right: 0; border-top: 1px solid var(--linie-stark);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .register > .marke, .register__fuss { display: none; }
    .leiste { padding: 0; overflow-x: auto; scrollbar-width: none; }
    .leiste::-webkit-scrollbar { display: none; }
    .leiste__liste { display: flex; min-width: 100%; }
    .leiste__punkt { flex: 1 0 auto; }
    .leiste__punkt--trenner { margin: 0; padding: 0; border: 0; }
    .leiste__punkt--trenner .leiste__link { margin-left: 0; }
    .leiste__link {
        display: flex; flex-direction: column; align-items: center; gap: .18rem; min-width: 4.1rem; min-height: 3.6rem;
        margin: 0; padding: .45rem .45rem .4rem; font-size: .66rem; font-weight: 600;
        border: 0; border-radius: 0;
    }
    .leiste__nr { display: none; }
    .leiste__icon { width: 1.3rem; height: 1.3rem; }
    .leiste__link--aktiv { margin: 0; background: var(--papier); }
    .leiste__link--aktiv::before { left: 0; right: 0; top: -1px; bottom: auto; width: auto; height: 3px; border-radius: 0; }
    .kopf { flex-wrap: wrap; gap: .5rem .6rem; padding: .5rem 1rem; }
    .kopf__marke { display: flex; margin-right: auto; }
    .kopf__marke .marke__zeichen { width: 1.85rem; height: 1.85rem; }
    .kopf__marke .marke__mandant { display: none; }
    .sprung { order: 10; flex: 1 1 100%; max-width: none; }
    .sprung__taste { display: none; }
    .sprung__feld { padding-right: .7rem; }
    .schnellknoepfe .knopf { width: 2.6rem; padding: 0; }
    .schnellknoepfe .knopf__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .benutzermenue { margin-left: 0; }
    .benutzermenue__name, .benutzermenue__pfeil { display: none; }
    .inhalt { padding: 1.1rem 1rem 2rem; }
    .seitenkopf__titel { font-size: 1.4rem; }
    .angaben__zeile { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
    .kette { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
    .glied + .glied::before, .glied:nth-child(3)::before { display: block; left: 1.35rem; top: calc(-.8rem - 1.5px); width: 2px; height: .8rem; margin-top: 0; }
    .glied--luecke::before { width: 6px !important; height: .8rem !important; margin-top: 0 !important; left: calc(1.35rem - 2px) !important; }
    .kettenzeile { grid-template-columns: minmax(0, 1fr); }
    .laufzettel__stufe { min-width: 0; }
    .wiedervorlage__zeile { grid-template-columns: minmax(0, 1fr) auto; padding: .7rem .8rem; }
    .wiedervorlage__zeile > .ampel { grid-column: 1; }
    .wiedervorlage__zeile > .anlagennr, .wiedervorlage__zeile > .chip { grid-column: 2; grid-row: 1; justify-self: end; }
    .wiedervorlage__text, .wiedervorlage__aktionen { grid-column: 1 / -1; }
    .wiedervorlage__datum { grid-column: 1; grid-row: auto; justify-self: start; }
    .verzeichnis__link { grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: .2rem .6rem; }
    .verzeichnis__datum { grid-column: 2; grid-row: 1; }
    .verzeichnis__art { grid-column: 3; grid-row: 1; justify-self: end; }
    .verzeichnis__titel { grid-column: 2 / -1; }
    .verzeichnis__von { grid-column: 2 / -1; }
    .deckblatt { padding: 1.1rem 1rem 1rem 1.25rem; }
    .deckblatt__nummer { font-size: 1.6rem; }
    .feldraster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .feldraster__feld--breit { grid-column: 1 / -1; }
    .blatt { padding: 1rem 1rem 1rem 2.4rem; }
    .blatt::before, .blatt::after { left: .8rem; }
    .blatt--nachtrag { margin-left: .75rem; padding-left: 1rem; }
    .eingangskarte__kopf { grid-template-columns: auto minmax(0, 1fr); }
    .eingangskarte__kopf > .konfidenz { grid-column: 2; }
    .eingangskarte__fuss .knopf--primaer { margin-left: 0; width: 100%; }
    .dialog, .palette { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 8px 8px 0 0; max-height: 88vh; }
    .palette { margin-top: 0; }
    .toasts { bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); left: 1rem; right: 1rem; justify-items: stretch; }
    .tabelle--stapel thead { display: none; }
    .tabelle--stapel tr { display: grid; gap: .2rem; padding: .7rem 0; border-bottom: 1px solid var(--linie); }
    .tabelle--stapel td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .5rem; padding: .1rem 0; border: 0; text-align: left !important; }
    .tabelle--stapel td::before { content: attr(data-label); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-2); }
    .fehlerseite, .anmeldung__blatt { padding-left: 2.6rem; }
}