/* ==========================================================================
   LithoCore – Design-System
   Schlankes, schnelles, modernes UI. Keine externen Fonts/CDNs (portabel,
   offline-fähig). Bootstrap wird nur fürs Grid/Utilities genutzt; Look &
   Feel kommt von hier.
   ========================================================================== */

:root {
    --lc-bg:        #f4f6fa;
    --lc-surface:   #ffffff;
    --lc-sidebar:   #101828;
    --lc-sidebar-2: #1a2438;
    --lc-primary:   #2f6bff;
    --lc-primary-d: #1f4fd6;
    --lc-accent:    #16b8a6;
    --lc-text:      #1a2233;
    --lc-muted:     #667085;
    --lc-border:    #e4e8f0;
    --lc-green:     #16a34a;
    --lc-amber:     #d97706;
    --lc-red:       #dc2626;
    --lc-radius:    12px;
    --lc-shadow:    0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
    --lc-shadow-lg: 0 12px 32px rgba(16,24,40,.12);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    background: var(--lc-bg);
    color: var(--lc-text);
    font-size: 14.5px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--lc-text); font-weight: 650; letter-spacing: -.01em; }
a { color: var(--lc-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- App-Shell: Sidebar + Content ---------- */
.lc-app { display: flex; min-height: 100vh; }

.lc-sidebar {
    width: 248px;
    background: linear-gradient(180deg, var(--lc-sidebar), var(--lc-sidebar-2));
    color: #c7d0e0;
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
    flex-shrink: 0;
}
.lc-brand {
    display: flex; align-items: center; gap: 11px;
    padding: 20px 20px 18px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.lc-brand .logo {
    width: 34px; height: 34px; border-radius: 9px;
    background: linear-gradient(135deg, var(--lc-primary), var(--lc-accent));
    display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 17px;
    box-shadow: 0 2px 8px rgba(47,107,255,.4);
}
.lc-brand .name { color: #fff; font-weight: 700; font-size: 17px; line-height: 1; }
/* ZWEI Unterzeilen seit 2026-08-17 (Bediener): „Lithec“ und darunter
   „Business Resource App“. Deshalb eine knappe Zeilenhöhe und ein kleiner
   Abstand nach der Namenszeile — mit der Standard-Zeilenhöhe stünden die
   beiden Zeilen so weit auseinander, dass sie nicht mehr als ein Block zum
   Namen darüber gelesen werden. */
.lc-brand .sub  { color: #7d8aa5; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
    line-height: 1.35; }
.lc-brand .name + .sub { margin-top: 3px; }

.lc-nav { padding: 12px 12px; overflow-y: auto; flex: 1; }
.lc-nav .group { color: #5f6c86; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; padding: 14px 12px 6px; }
.lc-nav a {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px; margin: 2px 0; border-radius: 9px;
    color: #c7d0e0; text-decoration: none; font-weight: 500; font-size: 14px;
    transition: background .12s, color .12s;
}
.lc-nav a .ic { width: 18px; text-align: center; opacity: .85; font-size: 15px; }
.lc-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.lc-nav a.active { background: var(--lc-primary); color: #fff; box-shadow: 0 2px 10px rgba(47,107,255,.35); }
.lc-nav a.active .ic { opacity: 1; }

/* Eine EINZIGE Scroll-Ebene: .lc-main füllt den Viewport, gescrollt wird nur
   .lc-content (unterhalb der Topbar). Dadurch dockt die sticky-Tabellen-
   Kopfzeile exakt unter der Topbar an — vorher scrollten Seite UND Tabellen-
   Kasten getrennt, und der Tabellenkopf wanderte unter die Topbar weg. */
.lc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100vh; }
.lc-topbar {
    height: 60px; background: var(--lc-surface); border-bottom: 1px solid var(--lc-border);
    display: flex; align-items: center; gap: 16px; padding: 0 26px; position: sticky; top: 0; z-index: 20;
}
.lc-topbar .page-title { font-size: 18px; font-weight: 650; }
.lc-topbar .spacer { flex: 1; }
.lc-topbar .env-badge {
    font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px;
    background: #eef4ff; color: var(--lc-primary); border: 1px solid #d6e4ff;
}
/* GRÜN = gemeinsame Datenbank, blau = nur dieser Rechner. Die Farbe trägt
   dieselbe Aussage wie der Text, damit man sie im Vorbeigehen liest —
   genau die Frage, die am 09.09.2026 gestellt wurde („is this not the data
   that everyone else sees?"). */
.lc-topbar .env-badge.live {
    background: #ecfdf5; color: #047857; border-color: #a7f3d0;
}
/* Volle Breite nutzen (Chef-Wunsch): die 1400px-Deckelung zwang die
   Artikelliste im Vollbild in eine horizontale Scrollbar.
   WICHTIG: KEIN padding-top am Scroll-Container — sticky-Tabellenköpfe pinnen
   erst UNTER dem Padding und die Zeilen scheinen im Streifen darüber durch
   (Chef-Report). Der obere Abstand kommt stattdessen vom ersten Kind. */
.lc-content { padding: 0 26px 26px; width: 100%; flex: 1; overflow-y: auto; }
.lc-content > *:first-child { margin-top: 22px; }

/* Ein UNSICHTBARES erstes Kind darf den Abstand nicht aufbrauchen.
   Die Auftragsseite beginnt mit einem <style>-Block (die Aufleucht-Animation
   der neu entstandenen Zeile). Der ist display:none, zählt aber als
   :first-child — also bekam der unsichtbare Block die 22px und die
   Überschrift stand oben an der Kante, während jede andere Seite Luft hatte
   (Bediener 2026-08-10: „it also has a much smaller margin to top than the
   other screens"). Statt den <style>-Block zu verschieben (das nächste Mal
   schreibt ihn wieder jemand nach oben) wird die Regel hier robust gemacht. */
.lc-content > style:first-child { margin-top: 0; }
.lc-content > style:first-child + * { margin-top: 22px; }

/* ---------- Cards ---------- */
.lc-card {
    background: var(--lc-surface); border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius); box-shadow: var(--lc-shadow);
}
.lc-card .hd {
    padding: 16px 20px; border-bottom: 1px solid var(--lc-border);
    display: flex; align-items: center; gap: 12px;
}
.lc-card .hd h3 { margin: 0; font-size: 15.5px; }
.lc-card .bd { padding: 20px; }

/* ---------- Stat tiles ---------- */
.lc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 16px; }
.lc-stat {
    background: var(--lc-surface); border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius); padding: 18px 20px; box-shadow: var(--lc-shadow);
    position: relative; overflow: hidden;
}
.lc-stat .label { color: var(--lc-muted); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.lc-stat .value { font-size: 28px; font-weight: 750; margin-top: 6px; letter-spacing: -.02em; }
.lc-stat .sub { color: var(--lc-muted); font-size: 12.5px; margin-top: 3px; }
.lc-stat .ic { position: absolute; right: 16px; top: 16px; font-size: 22px; opacity: .18; }
.lc-stat.accent { border-left: 3px solid var(--lc-primary); }
.lc-stat.warn   { border-left: 3px solid var(--lc-amber); }
.lc-stat.danger { border-left: 3px solid var(--lc-red); }
.lc-stat.ok     { border-left: 3px solid var(--lc-green); }

/* ---------- Buttons ---------- */
.lc-btn {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    padding: 10px 17px; min-height:42px; box-sizing:border-box; border-radius:9px; font-weight:650; font-size:14px;
    border:1px solid #8ba1bf; background:linear-gradient(180deg,#e6eef8,#c4d3e7); color:#203959;
    box-shadow:0 1px 2px #20395918,inset 0 1px 0 #ffffffa6;
    transition:background .12s,border-color .12s,box-shadow .12s; text-decoration:none; line-height:1.3;
}
.lc-btn:hover:not(:disabled) { text-decoration:none; border-color:#54749c; filter:brightness(.97); }
.lc-btn:focus-visible { outline:3px solid #245bc0; outline-offset:3px; }
.lc-btn.primary { background:linear-gradient(180deg,#326ce0,#244eaa); border-color:#234990; color:#fff; box-shadow:0 2px 5px #244eaa33; }
.lc-btn.primary:hover:not(:disabled) { background:linear-gradient(180deg,#285fce,#1d418e); }
.lc-btn.ghost { background:linear-gradient(180deg,#f1f5fb,#dce6f3); border-color:#99adc7; color:#203959; }
.lc-btn.ghost:hover:not(:disabled) { background:linear-gradient(180deg,#e6eef8,#c8d8ee); }
.lc-btn.success { background: var(--lc-green); color: #fff; }
.lc-btn.sm { min-height:34px; padding:6px 12px; font-size:13px; }
.lc-btn:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }
.lc-input.lc-personenwahl { min-height:46px; padding:10px 38px 10px 14px; font-size:16px; font-weight:650; color:#fff; border:1px solid #234990; background-color:#2858b9; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='m2 2 5 5 5-5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E"),linear-gradient(180deg,#326ce0,#244eaa); background-position:right 13px center,center; background-repeat:no-repeat; appearance:none; box-shadow:0 2px 5px #244eaa33; }
.lc-input.lc-personenwahl:hover:not(:disabled) { border-color:#17386f; filter:brightness(.97); }
.lc-input.lc-personenwahl:focus-visible { outline:3px solid #245bc0; outline-offset:2px; }
.lc-input.lc-personenwahl option { background:white; color:#203959; }
.lc-aktionsleiste .hd .lc-btn.lc-auswahl-schliessen { flex:0 0 38px; width:38px; min-height:36px; padding:0; justify-content:center; font-size:24px; font-weight:400; line-height:1; }

/* ---------- Zurück-Pfeil ----------
   Bediener 2026-08-10: „daran denken den zurückknopf <- etwas größer und
   auffälliger zu gestallten".

   Er war ein grauer Geisterknopf in 12,5 px neben einer 24-px-Überschrift —
   also genau so groß wie jeder andere Nebenknopf, obwohl er der einzige ist,
   den man auf JEDER Unterseite braucht und im Vorbeigehen treffen will.
   Größer, in der Hausfarbe umrandet, und beim Überfahren voll gefüllt: er darf
   auffallen, ohne wie die Hauptaktion der Seite auszusehen.

   Als eigene Klasse und nicht als Stil an jedem Knopf: dann ändert die nächste
   Anpassung eine Regel und nicht sechzehn Zeilen. Die Klasse steht NACH .sm,
   damit sie deren kleinere Maße überschreibt. */
.lc-btn.lc-back {
    padding: 5px 16px; font-size: 21px; line-height: 1.1; font-weight: 700;
    background: #eef4ff; border-color: var(--lc-primary); color: var(--lc-primary);
}
.lc-btn.lc-back:hover { background: var(--lc-primary); color: #fff; filter: none; }

/* ---------- Tables / DataGrid ---------- */
.lc-search {
    display: flex; align-items: center; gap: 8px;
    background: var(--lc-surface); border: 1px solid var(--lc-border);
    border-radius: 10px; padding: 9px 13px; box-shadow: var(--lc-shadow);
}
.lc-search input { border: none; outline: none; font-size: 14.5px; width: 100%; background: transparent; }
.lc-search .ic { color: var(--lc-muted); }

/* Der Wrap ist der Scroller (beide Achsen, Höhe an den Viewport gekoppelt) —
   dadurch bleibt die Titelzeile per position:sticky IMMER sichtbar, egal wie
   weit man in einer langen Liste scrollt. Kleine Tabellen (Dialoge, Karten)
   bleiben unverändert, weil max-height nur bei Überlänge greift. */
.lc-table-wrap { overflow: auto; max-height: calc(100vh - 200px); border-radius: var(--lc-radius); }
/* Listen-Variante (LcTable): KEIN eigener Scroll-Kasten — die Seite (.lc-content)
   ist der Scroller, die Kopfzeile klebt damit direkt unter der Topbar. */
.lc-table-wrap.flow { overflow: visible; max-height: none; }
table.lc-table { width: 100%; border-collapse: collapse; background: var(--lc-surface); font-size: 13.8px; }
table.lc-table thead th {
    text-align: left; padding: 11px 14px; color: var(--lc-muted);
    font-weight: 650; font-size: 12px; text-transform: uppercase; letter-spacing: .03em;
    background: #fafbfd; white-space: nowrap;
    /* Sticky-Kopfzeile. Trennlinie als box-shadow statt border-bottom:
       bei border-collapse scrollen Rahmen sonst unter dem sticky-Header weg. */
    position: sticky; top: 0; z-index: 3;
    box-shadow: 0 1px 0 var(--lc-border);
}
table.lc-table tbody td { padding: 10px 14px; border-bottom: 1px solid #eef1f6; vertical-align: middle; }
table.lc-table tbody tr:hover { background: #f7f9fd; }
table.lc-table tbody tr:last-child td { border-bottom: none; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: "Cascadia Mono", Consolas, monospace; font-size: 12.8px; color: var(--lc-muted); }

/* ---------- Badges / chips ---------- */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px;
    font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.chip.gray   { background: #eef1f6; color: #475467; }
.chip.blue   { background: #e7f0ff; color: #1f4fd6; }
.chip.green  { background: #e6f7ec; color: #15803d; }
.chip.amber  { background: #fef3e2; color: #b45309; }
.chip.red    { background: #fde8e8; color: #b91c1c; }
.chip.teal   { background: #e2f7f4; color: #0f766e; }
/* Kleine Variante fuer Chips MITTEN in einer Tabellenzeile (z. B. „Händler"
   hinter dem Firmennamen) — die normale Groesse treibt dort die Zeilenhoehe
   auseinander. */
.chip.sm     { padding: 1px 6px; font-size: 10.5px; }

/* ---------- Forms ---------- */
.lc-field { margin-bottom: 14px; }
.lc-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--lc-muted); margin-bottom: 5px; }
.lc-input, .lc-select, textarea.lc-input {
    width: 100%; padding: 9px 12px; border: 1px solid var(--lc-border); border-radius: 9px;
    font-size: 14px; background: var(--lc-surface); color: var(--lc-text); outline: none; transition: border .12s, box-shadow .12s;
}
.lc-input:focus, .lc-select:focus, textarea.lc-input:focus {
    border-color: var(--lc-primary); box-shadow: 0 0 0 3px rgba(47,107,255,.12);
}

/* ═══ GESPERRTE FELDER MÜSSEN GESPERRT AUSSEHEN (Befund O2, 2026-08-11) ═══

   Die Regel darüber setzt background und color UNBEDINGT — und überschreibt
   damit das Grau, das der Browser für :disabled von selbst setzt. Eine
   eigene :disabled-Regel gab es für Eingabefelder nicht (nur für .lc-btn).
   Folge: eine ganze Tabelle gesperrter Felder sah aus wie editierbar, ohne
   Grau und ohne Sperr-Zeiger.

   Das ist dieselbe Fehlerfamilie wie K3 („stille Änderung"), nur eine Stufe
   davor: wer ein Feld für editierbar hält, tippt hinein — und was er tippt,
   wird beim Speichern verworfen, weil das Feld gesperrt ist. Der Bediener
   sieht eine Erfolgsmeldung für eine Änderung, die nie ankam.

   Bewusst APP-WEIT und nicht nur im Auftragseditor: es gibt kein Fenster, in
   dem ein gesperrtes Feld editierbar aussehen sollte. */
.lc-input:disabled, .lc-select:disabled, textarea.lc-input:disabled,
.lc-input[readonly], textarea.lc-input[readonly] {
    background: var(--lc-gesperrt, #f1f2f5);
    color: var(--lc-muted);
    cursor: not-allowed;
    border-color: var(--lc-border);
}
/* Kein Fokusrahmen an einem Feld, das nichts annimmt — er verspricht
   Eingabe. (readonly kann fokussiert werden, disabled nicht.) */
.lc-input[readonly]:focus, textarea.lc-input[readonly]:focus {
    border-color: var(--lc-border); box-shadow: none;
}
@media (prefers-color-scheme: dark) {
    :root { --lc-gesperrt: rgba(255,255,255,.04); }
}
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

/* ---------- Misc ---------- */
.page-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:12px; margin-bottom:18px; }
.page-head h1 { font-size: 22px; margin: 0; }
.page-head > .spacer { display:none; }
.page-head:has(> .lc-btn:not(.lc-back), > .lc-search, > button, > select)::after { content:""; flex-basis:100%; height:0; order:1; }
.page-head > :is(.lc-btn:not(.lc-back),button:not(.lc-back),.lc-search,select,input,.lc-field) { order:2; margin-left:0 !important; }
.page-head > .lc-back { order:0; }
.page-head > .lc-btn, .page-head > .lc-btn.sm { min-height:44px; padding:10px 16px; font-size:14px; }
.page-head > .lc-search { flex:0 1 520px; min-width:0; max-width:100%; }
.lc-positionsnavigation { display:grid; grid-template-columns:repeat(2,36px); gap:5px; margin-top:6px; text-align:left; }
.lc-positionsnavigation .lc-btn { display:inline-flex; align-items:center; justify-content:center; width:36px; min-width:36px; height:36px; min-height:36px; margin:0; padding:0; font-size:20px; line-height:1; border-radius:8px; }
.lc-positionstabelle { min-width:1050px; }
.lc-positionstabelle th:first-child { width:100px !important; min-width:100px; }
.lc-positionstabelle th.lc-mwst { width:104px; min-width:104px; white-space:nowrap; }
.lc-positionstabelle .lc-mwst input, .lc-positionstabelle .lc-mwst-input { min-width:76px; padding:10px 8px; color:var(--lc-text); font-size:14px; }
.lc-positionstabelle .lc-mwst input:disabled, .lc-positionstabelle .lc-mwst-input:disabled { color:#334155; opacity:1; -webkit-text-fill-color:#334155; }

/* Document uploads stay recognizable even before a file is selected. */
input[type="file"] { max-width:100%; font:inherit; }
input[type="file"]::file-selector-button { min-height:44px; padding:10px 16px; margin-right:10px; border:1px solid #244b91; border-radius:9px; background:linear-gradient(180deg,#326ce0,#244eaa); color:#fff; font:inherit; font-weight:650; cursor:pointer; box-shadow:0 2px 4px #17376b25; }
input[type="file"]:focus-visible { outline:3px solid #87b0ff; outline-offset:3px; }
input[type="file"]:disabled { opacity:.55; }
.lc-upload-waehlen { position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:10px 18px; border:1px solid #244b91; border-radius:9px; background:linear-gradient(180deg,#326ce0,#244eaa); color:#fff; font-weight:650; cursor:pointer; box-shadow:0 2px 4px #17376b25; white-space:nowrap; }
.lc-upload-waehlen input[type="file"] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.lc-upload-waehlen:focus-within { outline:3px solid #87b0ff; outline-offset:3px; }
.lc-upload-waehlen:has(input:disabled) { opacity:.55; cursor:default; }
.belegakte-upload { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:10px; }
.belegakte-dateiname { max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--lc-muted); font-size:13px; }
.belegakte-beschreibung { flex:1 1 360px; min-width:0; }
.lc-checkmark { display:inline-flex; align-items:center; gap:10px; min-height:46px; border:1px solid #b5c5dd; border-radius:9px; padding:9px 14px; background:#f3f6fb; font-weight:600; cursor:pointer; }
.lc-checkmark input { appearance:none; position:relative; width:24px; height:24px; flex:0 0 24px; margin:0; border:2px solid #6d83a4; border-radius:6px; background:#fff; cursor:pointer; }
.lc-checkmark input:checked { background:#2457b4; border-color:#2457b4; }
.lc-checkmark input:checked::after { content:""; position:absolute; width:7px; height:12px; top:2px; left:7px; border:solid #fff; border-width:0 3px 3px 0; transform:rotate(45deg); }
.lc-checkmark input:focus-visible { outline:3px solid #8ab4ff; outline-offset:3px; }
.lc-checkmark.wichtig:has(input:checked) { color:#7d4505; background:#fff3d5; border-color:#d89826; }
.ka-offene-zahl { display:inline-flex; min-width:28px; justify-content:center; padding:3px 8px; border-radius:6px; background:#fee8e7; color:#b42318; font-weight:750; }
.ka-stapelwahl { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:12px 16px; }
.ka-import-ergebnis { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:12px 0; padding:10px 14px; border:1px solid #b5dacb; border-radius:10px; background:#edf8f2; color:#185e42; }
.ka-import-ergebnis .lc-auswahl-schliessen { margin-left:auto; }
.ka-import-probleme { padding:12px; color:#9c241d; }
.kontierungsfeld { position:relative; min-width:155px; }
.kontierungsfeld-eingabe { display:flex; align-items:center; gap:6px; }
.kontierungsfeld .ka-konto-input { width:100%; min-width:80px; height:40px; font-size:16px; font-weight:650; }
.kontierungsfeld-hilfe { width:34px; height:36px; min-height:36px; padding:4px; flex:0 0 34px; }
.ka-konto-tag { display:block; width:fit-content; max-width:100%; box-sizing:border-box; margin-top:5px; padding:2px 7px; border:1px solid #d6e3f0; border-radius:6px; background:#edf3f9; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:500; line-height:1.5; color:#32516b; }
.ka-konto-vermerk { display:flex; align-items:center; gap:6px; min-width:0; }
.ka-konto-vermerk .ka-konto-tag { margin-top:0; flex:0 1 auto; }
.ka-buchungsvermerk { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kontierungsfeld-vorschlaege { position:fixed; inset:auto; margin:0; padding:0; z-index:2500; width:min(380px,calc(100vw - 20px)); background:white; border:1px solid #abc0e0; border-radius:10px; box-shadow:0 8px 24px #19365826; overflow:auto; overscroll-behavior:contain; font:14px/1.4 system-ui,sans-serif; }
.kontierungsfeld-vorschlaege button { display:block; width:100%; border:0; border-bottom:1px solid #e8edf4; text-align:left; background:white; padding:10px 12px; color:#203047; font:inherit; white-space:normal; }
.kontierungsfeld-vorschlaege button.aktiv, .kontierungsfeld-vorschlaege button:hover { background:#e7efff; color:#153f8a; }
.kontierungsfeld-vorschlaege strong { margin-right:10px; font-variant-numeric:tabular-nums; }
.ka-kontierung td:last-child { overflow:visible; }
.ka-kontierung tr:focus-visible { outline:2px solid #6392df; outline-offset:-2px; }
@media (forced-colors:active) { .lc-checkmark input { appearance:auto; } .lc-checkmark input:checked::after { display:none; } }
.lc-listenfilter { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; align-items:flex-end; }
.lc-listenfilter .lc-btn, .lc-listenfilter .lc-btn.sm, .lc-listenfilter .lc-select { min-height:44px; font-size:14px; }
.lc-listenfilter > .lc-field { margin:0; }
.lc-listenfilter > .lc-search, .page-head > .lc-search, .page-head > select { height:44px; box-sizing:border-box; }
/* Suchfelder und Filter teilen dieselbe Unterkante, auch mit Beschriftungen. */
.lc-filterbar { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin-bottom:16px; }
.lc-filterbar > .lc-field { display:flex; flex-direction:column; gap:5px; margin:0; min-width:180px; max-width:100%; font-size:12px; color:var(--lc-muted); }
.lc-filterbar > .lc-search { flex:1 1 240px; min-width:200px; max-width:440px; margin:0; }
.lc-filterbar > .lc-search, .lc-filterbar > .lc-select, .lc-filterbar > .lc-input,
.lc-filterbar > .lc-field > :is(select,input), .lc-filterbar > .lc-btn { height:44px; min-height:44px; box-sizing:border-box; }
.lc-filterbar > .lc-field > :is(select,input) { width:100%; font-size:14px; color:var(--lc-text); }
.lc-filterbar .lc-search input { min-width:0; }
.lc-auftragsstand { display:flex; flex-wrap:wrap; gap:12px 28px; padding:16px 20px; margin-bottom:16px; border:1px solid var(--lc-border); border-radius:12px; background:var(--lc-surface); }
.lc-auftragsstand > div { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.lc-auftragsstand small { color:var(--lc-muted); }
.lc-vorgangsbezug { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 16px; }
.lc-vorgangs-raten { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; }
.lc-vorgangs-raten > div { display:flex; flex-direction:column; gap:6px; border:1px solid var(--lc-border); border-radius:8px; padding:12px; }
.lc-filterbar > .lc-field { min-width:170px; max-width:280px; }

@media (max-width:600px) {
    .lc-filterbar > .lc-search { flex-basis:100% !important; width:100% !important; max-width:none !important; min-width:0 !important; }
    .lc-filterbar > .lc-field { flex:1 1 160px; min-width:0; max-width:100%; }
    .lc-filterbar > :is(select,input) { max-width:100%; min-width:0; }
}
.muted { color: var(--lc-muted); }
.divider { height: 1px; background: var(--lc-border); margin: 18px 0; }

/* ---------- Abschnitts-Überschrift innerhalb einer Karte ----------
   Lange Einstellungskarten waren nur durch Trennlinien unterteilt; man musste
   die Felder lesen, um zu wissen, in welchem Bereich man gerade ist. Der
   farbige Balken links gibt der Überschrift genug Gewicht, um beim Scrollen
   aufzufallen, ohne wie eine zweite Kartenüberschrift zu wirken. */
h4.lc-abschnitt {
    margin: 2px 0 4px; padding-left: 10px; font-size: 15px;
    border-left: 3px solid var(--lc-primary); line-height: 1.25;
}
.lc-abschnitt-info { font-size: 12.5px; margin: 0 0 12px 13px; max-width: 780px; }

/* Sprung vom Belegfeld zur Vorlage in den Stammdaten. Bewusst zurückhaltend:
   der Text im Beleg ist die Hauptsache, das hier ein Seitenweg. */
.lc-baustein-link {
    font-size: 11.5px; font-weight: 500; margin-left: 8px; padding: 1px 7px;
    border: 1px solid var(--lc-border); border-radius: 999px;
    color: var(--lc-muted); background: #fff; white-space: nowrap;
}
.lc-baustein-link:hover { color: var(--lc-primary); border-color: var(--lc-primary); text-decoration: none; }

/* Ein Wert, der sich aus etwas anderem ergibt und deshalb nicht eingebbar ist.
   Bewusst NICHT als deaktiviertes Eingabefeld: ein graues Feld sieht aus wie
   etwas, das man eigentlich ausfüllen sollte und das gerade klemmt. */
.lc-lesefeld {
    padding: 8px 11px; min-height: 38px; display: flex; align-items: center; gap: 4px;
    border: 1px dashed var(--lc-border); border-radius: 8px; background: #fafbfd;
}
.empty { text-align: center; padding: 46px 20px; color: var(--lc-muted); }
.empty .big { font-size: 40px; opacity: .35; }

/* ---------- SearchSelect (durchsuchbare Auswahlbox) ---------- */
.ss { position: relative; }
.ss-panel {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
    background: var(--lc-surface); border: 1px solid var(--lc-border);
    border-radius: 10px; box-shadow: var(--lc-shadow-lg); overflow: hidden;
}
.ss-cat { border: none; border-bottom: 1px solid var(--lc-border); border-radius: 0; }
.ss-list { max-height: 320px; overflow-y: auto; }
.ss-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #f2f4f8; }
.ss-item:last-child { border-bottom: none; }
.ss-item:hover { background: #f0f5ff; }
.ss-item.sel { background: #e7f0ff; }
.ss-item .lbl { font-weight: 600; font-size: 13.5px; }
.ss-item .sub { color: var(--lc-muted); font-size: 11.5px; margin-top: 1px; }
.ss-item.muted { color: var(--lc-muted); cursor: default; font-size: 12.5px; }
.ss-item.muted:hover { background: transparent; }

/* ---------- Modal-Dialog (Filter etc.) ---------- */
.lc-modal-back {
    position: fixed; inset: 0; background: rgba(16,24,40,.45); z-index: 90;
    display: flex; align-items: flex-start; justify-content: center; padding-top: 8vh;
}
.lc-modal {
    background: var(--lc-surface); border-radius: 14px; box-shadow: var(--lc-shadow-lg);
    width: min(680px, 92vw); max-height: 78vh; display: flex; flex-direction: column;
}

/* Zweite Bauform: Abdeckung und Dialog als GESCHWISTER statt verschachtelt.
   Die Servicefall-Dialoge (Vor-Ort-Einsatz, Fernwartung, Vorwarnung,
   Notversand, Dateien, Kundenteil anfordern) sind so gebaut und nannten
   eine Klasse, die es nicht gab — sie erschienen deshalb nicht als Dialog,
   sondern als Block am Ende der Seite, unter allem anderen (Review
   2026-08-06). Statt sechsmal die Struktur umzubauen bekommt die Bauform
   ihre Regeln; der Nachbar-Selektor hebt den Dialog mit heraus. */
.lc-modal-backdrop {
    position: fixed; inset: 0; background: rgba(16,24,40,.45); z-index: 90;
}
.lc-modal-backdrop + .lc-modal {
    position: fixed; z-index: 91; top: 8vh; left: 50%; transform: translateX(-50%);
}
/* „wide" wurde von drei Dialogen benutzt, war aber nie definiert — sie baten
   um Breite und bekamen die Normalbreite. */
.lc-modal.wide { width: min(980px, 96vw); }
/* Die zusätzliche Karte darf die Höhenbegrenzung des Dialogs nicht
   aufheben. Nur das Formular scrollt; Schließen und Speichern bleiben da. */
.lc-modal > .lc-card {
    display: flex; flex-direction: column; min-height: 0;
    max-height: inherit; margin: 0; overflow: hidden;
}
.lc-modal .hd, .lc-modal .ft { flex-shrink: 0; }
.lc-modal .hd { padding: 16px 20px; border-bottom: 1px solid var(--lc-border); display: flex; align-items: center; gap: 12px; }
.lc-modal .hd h3 { margin: 0; font-size: 16px; }
/* Auch hier: KEIN padding-top am scrollenden Modal-Body — sticky-Tabellenköpfe
   pinnen sonst unterhalb des Paddings und Zeilen scheinen darüber durch. */
.lc-modal .bd { padding: 0 20px 16px; overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.lc-modal .bd > *:first-child { margin-top: 16px; }
.lc-modal .ft { padding: 12px 20px; border-top: 1px solid var(--lc-border); display: flex; gap: 10px; justify-content: flex-end; }

/* SCHLIESSEN/ABBRECHEN IN DIALOGEN BREITER (Bediener 2026-08-10: „den zuruck
   knopf in allen dialogen etwas groeßer bitte … breiter").

   ZENTRAL und nicht an 80 Knöpfen einzeln: das ✕ oben rechts und der
   Abbrechen-Knopf unten links kommen in jedem Dialog vor. Ein Ziel von
   28×28 px war zum Zeigen zu klein — besonders auf dem Touch-Panel in der
   Werkstatt. Die Höhe bleibt, damit die Kopfzeile nicht wächst; nur die
   Breite und die Trefferfläche nehmen zu.

   Der Abbrechen-Knopf im Fuß bekommt eine Mindestbreite, damit „Abbrechen"
   nicht schmaler dasteht als die Bestätigung daneben — ein Weg zurück soll
   genauso leicht zu treffen sein wie der Weg vorwärts. */
.lc-modal .hd .lc-btn.sm { min-width: 46px; padding-left: 12px; padding-right: 12px; font-size: 15px; }
.lc-modal .ft .lc-btn { min-width: 120px; justify-content: center; }

/* Herausgelöster Reiter (#popout): kompaktes Inhalts-Fenster ohne Menü/Kopf/Reiter.
   html.lc-popout kommt aus dem Head-Skript und greift schon beim ERSTEN Rendern
   (kein Aufblitzen der Vollansicht); .chromeless setzt das Layout zusätzlich. */
.lc-app.chromeless .lc-sidebar,
.lc-app.chromeless .lc-topbar,
.lc-app.chromeless .lc-tabs,
html.lc-popout .lc-sidebar,
html.lc-popout .lc-topbar,
html.lc-popout .lc-tabs { display: none !important; }

/* ---------- Reiter-Leiste (HS-Stil): Strg+Klick im Menü heftet Seiten an ---------- */
.lc-tabs {
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    padding: 6px 16px 0; background: var(--lc-surface);
    border-bottom: 1px solid var(--lc-border);
}
.lc-tab {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 10px 16px; min-height:44px; font-size: 15px; font-weight:600; border: 1px solid #98abc7;
    border-bottom: none; border-radius: 8px 8px 0 0; background: #dce5f2;
    color: #243d60; max-width: 280px; white-space: nowrap;
}
.lc-tab .t { overflow: hidden; text-overflow: ellipsis; }
.lc-tab.on { background: #244e86; color: #fff; font-weight: 700;
             border-color:#244e86; border-bottom: 1px solid #244e86; margin-bottom: -1px; }
.lc-tab:hover { background:#c5d5eb; color:#152e50; }
.lc-tab.on:hover { background:#1b3e6d; color:#fff; }
.lc-tab:focus-visible { outline:3px solid #5284dc; outline-offset:2px; }
.versand-dialog .hd { justify-content:space-between; gap:12px; }
.versand-dialog .lc-field { margin:0; min-width:0; }
.versand-dialog p { margin:0; line-height:1.5; }
.versand-felder { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.versand-ohne { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid #a8bad4; border-radius:8px; background:#f3f6fb; font-weight:600; }
.versand-ohne input { width:22px; height:22px; accent-color:#244e86; }
@media(max-width:520px) { .versand-felder { grid-template-columns:1fr; } }
.lc-tab .x { opacity: .45; font-size: 11px; padding: 1px 3px; border-radius: 4px; }
.lc-tab .x:hover { opacity: 1; background: #e2e6ee; }
.lc-tabs-hint { margin-left: auto; font-size: 11px; color: var(--lc-muted); opacity: .7; }

/* ---------- Reiter INNERHALB einer Seite (LISA-Stil) ----------

   NICHT zu verwechseln mit .lc-tabs darüber: das ist die Leiste der
   angehefteten SEITEN (Strg+Klick im Menü, ein Reiter je Bildschirm). Diese
   hier gliedert EINE Seite in Abschnitte — Stammdaten, Kontakte, Projekte,
   Rechnungen an einem Kunden.

   Bediener 2026-08-10: „es braucht wie in lisa1 eine bessere ansicht mit 4
   deutlichen Reitern oben". Deutlich heißt hier: 15px statt 13px, kräftiger
   Rahmen, und der aktive Reiter trägt einen 2px-Balken in Primärfarbe. Wer
   auf dem Bildschirm nach der Gliederung sucht, soll sie im ersten Blick
   finden und nicht erst beim Lesen. */
.lc-reiter {
    display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap;
    margin: 0 0 16px; border-bottom: 2px solid var(--lc-border);
}
.lc-reiter button {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 12px 20px; min-height:46px; font-size: 16px; font-weight: 650; font-family: inherit;
    background: #e0e8f3; border: none; border-bottom: 3px solid transparent;
    margin-bottom: -2px; color: #2d4668; border-radius: 8px 8px 0 0;
    transition: color .12s, background .12s;
}
.lc-reiter button:hover { background: #eef1f6; color: var(--lc-text); }
.lc-reiter button.on {
    color: #fff; border-bottom-color: #12305a;
    background: #244e86;
}
/* Die Anzahl gehört an den Reiter, nicht nur in die Karte darunter: sonst
   muss man jeden Reiter anklicken, um zu sehen, ob überhaupt etwas drin ist. */
.lc-reiter .n {
    font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 10px;
    background: #e4e8f0; color: var(--lc-muted);
}
.lc-reiter button.on .n { background: var(--lc-primary); color: #fff; }

/* Klickbare Tabellenzeilen */
tr.rowlink { cursor: pointer; }
tr.rowlink:hover { background: #eef4ff !important; }
/* Ausgewaehlte Zeile in Meister-Detail-Listen (Haendler, Teilelisten …).
   Ohne diese Regel war die Auswahl UNSICHTBAR: rechts stand die Detailseite,
   links liess sich nicht erkennen, wozu sie gehoert. Ein Balken links plus
   Farbe, damit es auch bei ueberfliegendem Blick auffaellt. */
tr.rowlink.sel,
tr.rowlink.sel:hover {
    background: #dbe7ff !important;
    box-shadow: inset 3px 0 0 var(--lc-accent, #1f4fd6);
}
tr.rowlink.sel td { font-weight: 600; }

/* ENGE Tabelle fuer die schmale Spalte (2026-08-10).

   Die Servicefall-Seite ist ein Raster „380px 1fr": links die Karten, rechts
   der Log. Eine Tabelle in der linken Spalte hat 378 Pixel — mit den normalen
   14 Pixel Zellenabstand bleiben bei vier Spalten fuer den Inhalt kaum 260
   uebrig, und sie bekommt einen waagerechten Rollbalken. Was man wegrollen
   muss, liest niemand.

   Deshalb NUR der Abstand kleiner, nicht die Schrift: Betraege muessen lesbar
   bleiben. Zentral hier und nicht als style an einer Tabelle, weil die naechste
   Liste in einer schmalen Spalte dasselbe braucht. */
table.lc-table.eng thead th { padding: 7px 8px; white-space: normal; }
table.lc-table.eng tbody td { padding: 7px 8px; }

/* Progress bar for stock */
.bar { height: 7px; border-radius: 5px; background: #eef1f6; overflow: hidden; min-width: 70px; }
.bar > span { display: block; height: 100%; border-radius: 5px; }

/* Blazor error UI (keep functional, restyle) */
#blazor-error-ui {
    background: #fff3cd; bottom: 0; box-shadow: 0 -1px 4px rgba(0,0,0,.1);
    display: none; left: 0; padding: 10px 16px; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 12px; top: 8px; }

@media (max-width: 820px) {
    .lc-sidebar { position: fixed; z-index: 40; transform: translateX(-100%); transition: transform .2s; }
    .lc-sidebar.open { transform: translateX(0); }
    .row-2, .row-3 { grid-template-columns: 1fr; }
}

/* ---- Gruppenblöcke in großen Dialogen (System-/Projekt-Editor) ----
   Gleiche Optik wie die Karten im Artikel-Editor, aber ohne verschachtelte
   lc-card im Modal (das gäbe doppelte Rahmen und Schatten). */
.sys-grp {
    border: 1px solid var(--lc-border, #3a3f4a);
    border-radius: 10px;
    padding: 12px 14px 4px;
    margin-bottom: 14px;
}
.sys-grp-hd {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .2px;
    opacity: .85;
    margin-bottom: 10px;
}

/* Schmale Zahlenfelder in Aktionsspalten (Abschlag %, Zahlbetrag).
   Als Klasse statt inline-style, weil LcZahl seine Klassen selbst setzt. */
.lc-input.lc-inline64  { width: 64px;  display: inline-block; }
.lc-input.lc-inline110 { width: 110px; display: inline-block; }

/* Produktfamilien-Schnellfilter im Artikel-Suchdialog */
.ap-fam { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 0 14px; }

/* Pflichtauswahl ohne Wert: als Aufforderung auszeichnen, nicht als
   beiläufiges Textfeld. Gleiche Sprache wie der Artikel-Auslöser
   (.ap-trigger.leer) — wo etwas gewählt werden MUSS, sieht es gleich aus. */
.lc-input.ss-leer {
    background: var(--lc-accent-soft, rgba(74,158,255,.10));
    border: 1px dashed var(--lc-accent, #4a9eff);
    font-weight: 600;
}
.lc-input.ss-leer::placeholder { color: var(--lc-accent, #4a9eff); opacity: .95; }
.lc-input.ss-leer:focus { border-style: solid; }

/* Kurzes Aufleuchten einer angesprungenen Zeile (window.lcZeigeZeile).
   Wird per JS gesetzt und nach 2,4 s wieder entfernt; die Animation läuft
   nur einmal. Der Rahmen bleibt in der Zeit stehen, damit die Zeile auch
   bemerkt, wer erst nach dem Farbverlauf hinsieht. */
@keyframes lc-blitz {
    0%   { background: var(--lc-accent-soft, rgba(74,158,255,.28)); }
    100% { background: transparent; }
}
.lc-blitz {
    animation: lc-blitz 2.2s ease-out 1;
    box-shadow: inset 0 0 0 2px var(--lc-accent, #4a9eff);
    border-radius: 6px;
}

/* ══════════════════════════════════════════════════════════════════════
   SERVICEFALL-LISTEN im LISA1-Aussehen (Bediener 2026-08-11)

   Der Anlass war nicht Geschmack, sondern Lesbarkeit: die Zeilen brachen
   auf zwei Zeilen um, und beim Überfliegen von vierzig Fällen springt das
   Auge dann ständig zurück. Genau dafür ist diese Liste da.

   Gilt NUR unter .lc-sf — die übrigen Listen (LcTable) bleiben, wie sie
   sind. Eine Umstellung aller Tabellen auf dieses Bild wäre eine andere
   Entscheidung als die hier getroffene.
   ══════════════════════════════════════════════════════════════════════ */

/* EINE ZEILE JE FALL. Umbruch aus, überlanger Text wird abgeschnitten;
   was nicht mehr hinpasst, steht im Tooltip und im Fall selbst. Ohne
   table-layout:fixed nützt das nichts — der Browser verbreitert sonst die
   Spalte, statt zu kürzen. */
.lc-sf table.lc-table { table-layout: fixed; background: var(--lc-sf-flaeche, #f7f8fa); }
/* Die festen Metadaten-Spalten dürfen die Schlagwörter nicht auf 0 px
   zusammendrücken. Schmale Fenster scrollen innerhalb der Fallgruppe. */
.lc-table-wrap.flow.lc-sf-haupt { overflow-x: auto; }
.lc-sf-haupt table.lc-table { min-width: 1510px; }

dialog.lc-pdf-vorschau { width:96vw; max-width:1600px; height:94dvh; max-height:94dvh; padding:0;
    border:1px solid var(--lc-border); border-radius:10px; background:var(--lc-bg,#f5f6fa); color:var(--lc-text); }
dialog.lc-pdf-vorschau[open] { display:flex; flex-direction:column; }
dialog.lc-pdf-vorschau::backdrop { background:#11182780; }
.lc-pdf-kopf { display:flex; align-items:center; gap:8px; padding:10px 14px; flex-shrink:0; flex-wrap:wrap; }
.lc-pdf-status { padding:0 14px; font-size:13px; flex-shrink:0; }
.lc-pdf-status:empty { display:none; }
.lc-pdf-kopf span { font-size:13px; }
.lc-pdf-vorschau iframe { width:100%; flex:1; min-height:0; border:0; background:#e5e7eb; }
.lc-rechnungsaktionen { position:sticky; top:64px; z-index:12; margin-bottom:12px; }
.lc-rechnungsaktionen .bd { display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:12px 16px; }
.rechnungstabellen .lc-table-wrap.flow { overflow-x:auto; }
.rechnungstabellen .lc-table tbody td { white-space:nowrap; max-width:300px; overflow:hidden; text-overflow:ellipsis; padding-top:8px; padding-bottom:8px; }
.rechnungstabellen .lc-table tbody td .chip { white-space:nowrap; }
.bestellanfrageliste .lc-table-wrap.flow { overflow-x:auto; }
.bestellanfrageliste .lc-table tbody td { white-space:nowrap; padding:8px 10px; }
.bestellanfrageliste .banf-status { display:inline-flex; align-items:center; gap:5px; flex-wrap:nowrap; }
.bestellliste .lc-table-wrap.flow { overflow-x:auto; }
.bestellliste .lc-table tbody td { white-space:nowrap; padding:8px 10px; }
.bestellliste .bestell-kurztext { display:block; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bestellliste .bestell-kommentar { width:220px; }
.bestellaktionen { position:sticky; top:64px; z-index:12; margin-bottom:12px; }
.bestellaktionen .bd { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:12px 16px; }
.bestellaktionen details { width:100%; }
.bestell-kommentar-voll { white-space:pre-wrap; overflow-wrap:anywhere; max-height:160px; overflow-y:auto; }
.lc-rechnungsaktionen details { width:100%; font-size:12px; }
@media (max-width:600px) { .lc-pdf-kopf span { display:none; } }

/* Letzter geöffneter Datensatz: dezente Kontur auch über Prioritätsfarben.
   Kein Statuswechsel, keine Animation und kein Verschieben der Zeilen. */
.lc-table tbody tr.lc-last-opened > td {
    background-image: linear-gradient(#4f7fff12, #4f7fff12);
    box-shadow: inset 0 1px #7298e580, inset 0 -1px #7298e580;
}
.lc-table tbody tr.lc-last-opened > td:first-child {
    box-shadow: inset 3px 0 #648ddb, inset 0 1px #7298e580, inset 0 -1px #7298e580;
}
.lc-table tbody tr.lc-last-opened > td:last-child {
    box-shadow: inset -1px 0 #7298e580, inset 0 1px #7298e580, inset 0 -1px #7298e580;
}
.lc-table tbody tr.lc-row-selected > td {
    background-color:var(--lc-sf-hover, #e8f0fd);
    box-shadow:inset 0 1px #7298e5, inset 0 -1px #7298e5;
}
.lc-table tbody tr.lc-row-selected > td:first-child {
    box-shadow:inset 4px 0 var(--lc-primary), inset 0 1px #7298e5, inset 0 -1px #7298e5;
}
.lc-sf table.lc-table tbody td {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding-top: 7px; padding-bottom: 7px;
}
/* Die Nummernspalte trägt die Prioritätsfarbe und darf nie gekürzt werden —
   sie ist der Schlüssel, den man vorliest. */
.lc-sf table.lc-table tbody td.mono { overflow: visible; }

/* KOPFZEILE: eigene Farbe, damit die Spaltentitel sich von den Daten
   abheben — in LISA1 sind sie der einzige farbige Teil der Tabelle. */
.lc-sf table.lc-table thead th {
    background: var(--lc-sf-kopf, #e4ebf7);
    color: var(--lc-sf-kopfschrift, #1f4e9c);
    text-transform: none; font-size: 12.5px; letter-spacing: 0;
    font-weight: 700; cursor: pointer; user-select: none;
    box-shadow: 0 1px 0 var(--lc-sf-kopflinie, #b9c8e2);
}
.lc-sf table.lc-table thead th:hover { background: var(--lc-sf-kopf-hover, #d7e2f4); }

/* Zeilenwechsel wie in LISA1: jede zweite Zeile leicht abgesetzt. Das
   ersetzt das Zeilenraster, das bei einzeiligen Zeilen sonst fehlt. */
.lc-sf table.lc-table tbody tr:nth-child(even) { background: rgba(0,0,0,.022); }
.lc-sf table.lc-table tbody tr:hover { background: var(--lc-sf-hover, #e8f0fd); }

/* Der VORGANGSSTAND steht nebeneinander, nicht untereinander. „AN angenommen
   1265012" und „📦 1 zum Versand" in zwei Zeilen machten die Zeile doppelt so
   hoch — genau das, was die einzeilige Liste vermeiden soll. */
.lc-sf .lc-vg { margin-right: 8px; }
.lc-sf .lc-vg + .chip, .lc-sf .chip + .chip { margin-left: 4px; }

/* ABSTAND ZWISCHEN DEN BLÖCKEN und mittige Überschrift. Die Blöcke standen
   dicht an dicht; bei zwölf Statusblöcken verschwimmt dann, wo einer endet
   und der nächste anfängt.

   ZWEI STOLPERSTELLEN, beide am 2026-08-11 aufgefallen:
   · Die Karte trägt ihren Abstand als INLINE-Style (LcKlappBlock setzt
     style="margin-bottom:12px"), und der schlägt jede Regel aus dem
     Stylesheet. Nur !important kommt dagegen an.
   · In der Kopfzeile steht ein .spacer mit flex:1. Er drückt alles nach
     links, und justify-content:center bleibt wirkungslos, solange er da
     ist. Er wird hier auf 0 gesetzt statt entfernt — die Komponente wird
     von anderen Seiten mitbenutzt, die ihn brauchen. */
.lc-sf-liste > .lc-card { margin-bottom: 24px !important; }
.lc-sf-liste > .lc-card > .hd { justify-content: center; text-align: center; }
.lc-sf-liste > .lc-card > .hd > .spacer { flex: 0 0 0 !important; }
.lc-sf-liste > .lc-card > .hd h3 {
    color: var(--lc-sf-titel, #1f4e9c); font-size: 15px; letter-spacing: .01em;
}

/* Dunkles Thema: dieselben Rollen, andere Werte. Ohne diesen Block stünde
   hellgrau auf dunkel, und die Kopfzeile leuchtete. */
@media (prefers-color-scheme: dark) {
    :root {
        --lc-sf-flaeche: rgba(255,255,255,.02);
        --lc-sf-kopf: #1c2942;
        --lc-sf-kopf-hover: #24334f;
        --lc-sf-kopfschrift: #8fb4f0;
        --lc-sf-kopflinie: #2c3c5c;
        --lc-sf-hover: rgba(120,170,255,.10);
        --lc-sf-titel: #8fb4f0;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   DER LEITSATZ AM FUSS DER SEITENLEISTE (09.09.2026).

   „Besser ist eine Messung. Kein Versprechen." — Betreiberansage, als
   Ersatz für „we control it".

   margin-top:auto schiebt ihn ans untere Ende der Leiste, egal wie viele
   Menüpunkte darüber stehen. Bewusst LEISE: kleine Schrift, gedämpfte
   Farbe, kein Rahmen. Ein Leitsatz, der schreit, wird überlesen; einer,
   der ruhig dasteht, wird beim Suchen tausendmal mitgelesen.
   ══════════════════════════════════════════════════════════════════════ */
.lc-satz {
    margin-top: auto;
    padding: 18px 20px 20px;
    border-top: 1px solid rgba(255,255,255,.07);
    font-size: 12px;
    line-height: 1.5;
    color: #7c8aa3;
    letter-spacing: .02em;
}
.lc-satz span { display: block; }
/* Der zweite Satz ist die Pointe — er darf etwas heller sein. */
.lc-satz span + span { color: #9fb0c9; }

/* ── Rückmeldung (Libra, /rueckmeldung) ──────────────────────────────────
   Dasselbe Formular wie im Journal, nur am Schreibtisch.

   ═══ WARUM HIER EIGENE KLASSEN STEHEN ═══
   Die erste Fassung benutzte lc-page, lc-field, lc-actions, lc-warn und
   lc-hint. KEINE davon gibt es in dieser Datei — die Seite war damit
   ungestylt: die Karte ohne Innenabstand, das Textfeld ohne Breite und
   deshalb in Browser-Standardgröße. Betreiberansage 09.09.2026: „der was
   ist passiert Textfeld in Libra muss viel breiter sein."

   Lehre: eine Klasse, die es nicht gibt, sieht im Quelltext genauso aus
   wie eine, die es gibt. Deshalb hier nur eigene, klar benannte. */

/* Der Weg zurueck aus dem eigenen Fenster (09.09.2026) — siehe
   Rueckmelden.razor und window.lcZurueck in App.razor. */
.rm-zurueckzeile { margin: 0 0 14px; }
.rm-seite { max-width: 860px; }
.rm-seite h1 { margin: 0 0 4px; font-size: 22px; }
.rm-unterzeile { color: var(--lc-muted); font-size: 14px; margin: 0 0 18px; max-width: 60ch; }

.rm-karte { padding: 22px 24px; margin-bottom: 18px; }
.rm-karte h2 { margin: 0 0 12px; font-size: 17px; }

.rm-feld { margin-bottom: 18px; }
.rm-feld > label {
    display: block; font-size: 12.5px; font-weight: 600;
    color: var(--lc-muted); margin-bottom: 6px;
}

/* Das Textfeld füllt die Karte und ist hoch genug, dass man beim Tippen
   sieht, was man schon geschrieben hat — bei einer Fehlerbeschreibung ist
   genau das der Unterschied zwischen zwei Sätzen und dem ganzen Hergang. */
.rm-text { width: 100%; min-height: 220px; resize: vertical; line-height: 1.55; font-family: inherit; }

.rm-leise { font-weight: 400; color: var(--lc-muted); font-size: 12.5px; }

.rm-warnung {
    background: #fef3c7; color: #78350f; border: 1px solid #fde68a;
    border-radius: 10px; padding: 11px 14px; margin-bottom: 16px; font-size: 14px; line-height: 1.5;
}

.rm-knopfzeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.rm-arten { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.rm-art {
    flex: 1; min-width: 130px; display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 14px 10px; border-radius: 12px; border: 1px solid var(--lc-border);
    background: #f8fafc; cursor: pointer; color: #334155;
}
.rm-art:hover { background: #f1f5f9; }
.rm-art.an { border-color: var(--lc-primary); background: #eff6ff; color: var(--lc-primary); font-weight: 600; }
.rm-art .sinn { font-size: 22px; line-height: 1; }
.rm-art .wort { font-size: 13.5px; }

.rm-bilder { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 18px; }
.rm-bild { position: relative; }
.rm-bild img { height: 120px; width: auto; border-radius: 9px; border: 1px solid var(--lc-border); display: block; }
.rm-bild button {
    position: absolute; top: -7px; right: -7px; width: 24px; height: 24px; border-radius: 50%;
    border: 1px solid var(--lc-border); background: #fff; cursor: pointer; font-size: 12px; line-height: 1;
}

/* ── Stand eines Belegs, als Marke (Auslagen-Akte, Kartenbelege) ──────── */
.af-stand { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 20px; background: #f1f5f9; }
.af-stand.gut { background: #dcfce7; color: #14532d; }
.af-stand.schlecht { background: #fee2e2; color: #7f1d1d; }
.af-stand.offen { background: #fef3c7; color: #78350f; }

/* Ticketabgleich in der Reisekosten-Verwaltung (09.09.2026) */
.af-stand.grau { background: #f1f5f9; color: #475569; }
.ta { margin: 12px 0 4px; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fafbfc; font-size: 13px; }
.ta-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ta-begruendung { margin-top: 6px; color: #334155; }
.ta-datei { margin-top: 6px; }
.ta-datei a { color: #1d4ed8; text-decoration: none; font-weight: 600; }
.ta-wrap { overflow-x: auto; margin-top: 8px; }
.ta-tabelle { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ta-tabelle th, .ta-tabelle td { padding: 6px 8px; text-align: left; vertical-align: top; border-top: 1px solid #e2e8f0; }
.ta-tabelle th { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: #64748b; border-top: 0; }
.ta-tabelle tfoot td { font-weight: 600; background: #f1f5f9; }
.ta-tabelle tr.schlecht td { background: #fef2f2; }
.ta-tabelle tr.offen td { background: #fffbeb; }
.ta-stichprobe { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.ta-liste tr.auf td { background: #eff6ff; }
.ta-liste tr.ta-detail td { background: #fff; padding: 0 10px 10px; }

/* ══════════════════════════════════════════════════════════════════════
   JOURNAL-EINSTELLUNGEN IN LIBRA (09.09.2026)

   Betreiberansage: „Alle anderen Einstellungen in Libra Main unter Journal
   und dann als verschiedene Reiter, was im Moment in Journal Admin noch
   drin ist, also der Aushang, Regeln, Reisekosten — Sätze."

   Die Karten sind aus ZeitAdmin.razor umgezogen und brauchen dort ihre
   paar Stile mit. Sie heissen jn-* und nicht za-*: die za-Klassen leben in
   der Verwaltungsseite selbst (EmptyLayout, eigene Anmeldung) und sind
   hier nicht geladen. Zwei Sätze mit demselben Namen waeren zwei Stellen
   zum Aendern.
   ══════════════════════════════════════════════════════════════════════ */
.jn-haken { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; cursor: pointer; font-size: 13.5px; }
.jn-untertitel { margin: 22px 0 4px; font-size: 14px; }
.jn-erkl { font-size: 12.5px; color: var(--lc-muted); line-height: 1.5; margin: 0 0 12px; max-width: 62ch; }
.jn-vierer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
/* Die Karten des Reiters nebeneinander, solange Platz ist — wie die
   za-spalten in der Verwaltung. */
.jn-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 760px) {
    .jn-vierer, .jn-spalten { grid-template-columns: 1fr; }
}

/* ── Der Abschnitt „Journal (Zeiterfassung)" im Mitarbeiterbogen ──────── */
.jm-block { background: var(--lc-bg-soft, #f7f9fb); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.jm-kopf { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 8px; }
.jm-tage { display: flex; gap: 3px; }
.jm-tagknopf { width: 30px; height: 30px; border: 1px solid var(--lc-border); background: #fff;
               border-radius: 6px; font-size: 11.5px; cursor: pointer; color: var(--lc-muted); padding: 0; }
.jm-tagknopf.an { background: var(--lc-primary); border-color: var(--lc-primary); color: #fff; font-weight: 600; }
.jm-tagknopf:disabled { opacity: .5; cursor: default; }
.jm-zahlen { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; margin-top: 4px; }
.jm-zahl b { font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════════════
   SYSTEMTYPEN: „wer benutzt diesen Typ?" (stv-*, 09.09.2026)

   Betreiberansage: „bei Systemtypen / Produkte habe ich fuer LithoPDF
   Faelle, ich wuesste gerne welcher das ist, um ihn zu loeschen … Wenn ich
   drauf klicke, muss es eine Liste der Faelle dafuer geben, damit ich ihn
   finde."

   Die Liste klappt UNTER der Zeile auf und nicht als Fenster darueber:
   ein Modal verdeckt genau die Zeile, aus der man kommt.
   ══════════════════════════════════════════════════════════════════════ */

/* Die Zahl in den Spalten „Anlagen"/„Faelle" — ein Knopf, der wie ein Link
   aussieht. Ein echter Knopfrahmen in einer Zahlenspalte laesst die
   Tabelle unruhig wirken; ohne jede Auszeichnung merkt niemand, dass man
   klicken kann. Deshalb: Linkfarbe, Unterstrich beim Ueberfahren. */
.stv-zahl { background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
            font: inherit; font-variant-numeric: tabular-nums; color: var(--lc-primary);
            text-decoration: underline; text-underline-offset: 2px; }
.stv-zahl:hover { text-decoration-thickness: 2px; }
.stv-zahl.auf { font-weight: 700; }

.stv-zeile > td { background: var(--lc-bg-soft, #f7f9fb); padding: 0 12px 12px !important; }
.stv-block { padding-top: 10px; }
.stv-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.stv-hinweis { font-size: 12.5px; color: var(--lc-muted); line-height: 1.5; max-width: 90ch; margin-bottom: 8px; }
.stv-hinweis.warn { color: #92400e; }
.stv-meldung { font-size: 13px; margin: 0 0 8px; }
.stv-tabelle { background: #fff; }
.stv-tabelle td, .stv-tabelle th { font-size: 12.5px; }

/* Geloescht heisst NICHT unsichtbar: der Fall haelt den Typ weiter fest,
   und genau ihn sucht der Bediener. Er wird blasser gezeichnet und
   beschriftet — verstecken waere hier die falsche Hoeflichkeit. */
.stv-tabelle tr.stv-weg td { opacity: .65; }
.stv-marke { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
             font-size: 10.5px; background: #e5e7eb; color: #374151; vertical-align: middle; }
.stv-marke.weg { background: #fee2e2; color: #991b1b; }

/* ══════════════════════════════════════════════════════════════════════════
   DATEIKNOPF — ein <label>, das aussieht wie ein Knopf (10.09.2026)

   Betreiberbefund: „wir haben ein riesen Problem mit iOS, z. B. 18.5 bei
   meinem Dad. Er kann keine Kamera-Fotos schießen … Safari-Rechte die Kamera
   zu nutzen standen auf Anfragen, geändert auf erlaubt, trotzdem reagiert der
   Foto-machen-Knopf nicht."

   URSACHE: der Knopf war ein <button> mit @onclick. In Blazor SERVER läuft
   dieser Klick über die Leitung zum Server, der ruft danach über JS-Interop
   input.click() auf dem versteckten Dateifeld. Zu diesem Zeitpunkt ist die
   BENUTZERGESTE des Tippens längst abgelaufen — und Safari öffnet den
   Dateidialog nur INNERHALB einer Geste. Es passiert dann gar nichts: keine
   Auswahl, keine Meldung, kein Fehler im Protokoll. Desktop-Chrome ist
   nachsichtiger, deshalb fiel es hier nie auf.

   Dass die Kameraberechtigung nichts half, passt genau dazu: <input
   capture="environment"> benutzt sie gar nicht — es reicht die Aufnahme an
   die Kamera-App des Telefons weiter.

   LÖSUNG: ein <label for="…">. Der Browser öffnet das Feld selbst, in
   derselben Geste, ganz ohne JavaScript und ohne Server. Deaktivieren geht
   bei einem Label nicht — dafür die Klasse „aus".
   ══════════════════════════════════════════════════════════════════════════ */
.lc-dateiknopf { display: inline-flex; align-items: center; justify-content: center;
                 gap: 6px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lc-dateiknopf.aus { pointer-events: none; opacity: .5; cursor: default; }
.lc-belegliste .lc-table-wrap.flow { overflow-x:auto; }
.lc-belegliste .lc-table tbody td { white-space:nowrap; padding:8px 10px; }
.lc-belegzelle { max-width:360px; height:24px; line-height:24px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lc-belegzelle > div { display:inline-flex !important; white-space:nowrap !important; margin-block:0 !important; vertical-align:middle; }
.lc-belegzelle > span { display:inline !important; }
.lc-belegzelle br { display:none; }
.lc-belegaktionen { margin-bottom:14px; border-color:var(--lc-primary); }
.lc-belegaktionen .hd { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:10px 16px; }
.lc-belegaktionen .hd .spacer { flex:1; }
.lc-belegaktionen .bd { padding:12px 16px; }
.lc-belegaktionen-buttons { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.lc-belegaktionen-buttons .lc-btn, .bestellaktionen .lc-btn, .lc-rechnungsaktionen .lc-btn { min-height:36px; padding:7px 12px; font-size:13px; margin:0; }
.lc-belegdetails { margin-top:12px; font-size:13px; }
.lc-belegdetails summary { cursor:pointer; color:var(--lc-muted); }
.lc-belegdetails dl { display:grid; grid-template-columns:minmax(110px,180px) 1fr; gap:8px 16px; }
.lc-belegdetails dt { font-weight:600; }
.lc-belegdetails dd { margin:0; min-width:0; white-space:normal; overflow-wrap:anywhere; }
.lc-versand-kommentar { display:inline-block; max-width:240px; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; }
.lc-belegzelle button, .lc-belegzelle .lc-btn { display:none; }
#abrechnung-karte .sf-berechnung-kopf { flex-wrap:wrap; gap:8px; }
#abrechnung-karte .sf-berechnung-kopf h3 { min-width:0; }
#abrechnung-karte .sf-berechnung-kopf .lc-btn { max-width:100%; white-space:normal; height:auto; min-height:34px; }
.lc-rechnungsaktionen > .hd { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.lc-rechnungsaktionen > .bd { display:block; }
.lc-rechnung-buttons { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.lc-rechnung-buttons .lc-btn { min-height:38px; display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; }
.lc-rechnungsaktionen > .bd > details { margin-top:12px; padding-top:10px; border-top:1px solid var(--lc-border); }
.lc-belegzelle > div { gap:5px; }
.lc-rechnungsaktionen > .hd > .spacer { flex:1; }
.lc-textposition .lc-input { width:100%; max-width:none; }

/* Gemeinsame Aktionen, direkt unter der ausgewählten Belegzeile. */
.lc-aktionsleiste { margin-bottom:14px; }
.lc-aktionsleiste > .hd { height:44px; box-sizing:border-box; padding:4px 14px; display:flex; gap:10px; align-items:center; flex-wrap:nowrap; }
.lc-aktionsleiste > .hd strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.lc-aktionsleiste > .hd .spacer { flex:1; }
.lc-aktionsleiste > .hd button { flex-shrink:0; }
.lc-aktionsleiste > .bd { padding:10px 14px; }
.lc-aktionsbuttons { height:80px; overflow-y:auto; display:flex; flex-wrap:wrap; gap:6px; align-items:flex-start; align-content:flex-start; scrollbar-gutter:stable; }
.lc-aktionsbuttons > div:not(.lc-modal-back) { display:contents !important; }
.lc-aktionsleiste .lc-btn { height:36px; min-height:36px; box-sizing:border-box; padding:6px 11px; font-size:13px; line-height:20px; margin:0; display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; }
.lc-aktionsleiste > .hd button { height:30px; min-height:30px; }
.lc-aktionsleiste .lc-belegdetails { margin:6px 0 0; font-size:12px; line-height:20px; }
.lc-aktionsdetails-platz { height:20px; margin-top:6px; }
.lc-table tbody tr.lc-zeilenaktionen > td { padding:10px; white-space:normal; background:#eef4ff; border-bottom:2px solid var(--lc-primary); }
.lc-zeilenaktionen .lc-aktionsleiste { margin:0; border-color:#b9cef8; }
.lc-table-wrap:has(.lc-zeilenaktionen) { container-type:inline-size; }
.lc-table-wrap .lc-zeilenaktionen .lc-aktionsleiste { max-width:calc(100cqw - 24px); }
.lc-zeilenaktionen .lc-aktionsbuttons { height:auto; max-height:none; overflow:visible; scrollbar-gutter:auto; }
.lc-zeilenaktionen .lc-aktionsdetails-platz { display:none; }
.lc-zeilenaktionen .lc-aktionsleiste .lc-btn { white-space:normal; height:auto; min-height:36px; text-align:center; }
.lc-aktionsbuttons > .muted { align-self:center; font-size:13px; }
.lc-mahnliste td { white-space:nowrap; padding:8px 10px; }
.lc-mahnliste .mahn-kommentar { max-width:240px; overflow:hidden; text-overflow:ellipsis; }
.banf-werkzeuge { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.banf-werkzeuge .lc-search { width:300px; max-width:100%; height:38px; box-sizing:border-box; }
.banf-werkzeuge .lc-search input { min-width:0; }
.banf-werkzeuge .lc-btn { height:38px; min-height:38px; box-sizing:border-box; padding:7px 12px; font-size:13px; display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; margin:0; }

/* Gleich große, kontrastreiche Aktionen, ohne die Belegzeilen aufzuweiten. */
.lc-aktionsleiste .lc-aktionsbuttons .lc-btn,
.lc-zeilenaktionen .lc-aktionsleiste .lc-aktionsbuttons .lc-btn,
.lc-rechnung-buttons .lc-btn,
.lc-belegaktionen-buttons .lc-btn,
.bestellaktionen .lc-btn,
.banf-werkzeuge .lc-btn { min-height:44px; height:auto; padding:10px 16px; font-size:14px; line-height:20px; }
.lc-aktionsbuttons { gap:8px; height:100px; }
.lc-zeilenaktionen .lc-aktionsbuttons { height:auto; }
.banf-werkzeuge .lc-search { height:44px; }

/* Kontierung: one active line, two independently visible completion states. */
.ka-kontier-hilfe { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:16px 0; }
.ka-abrechnungsnavigation { display:flex; align-items:center; gap:8px; }
.ka-abrechnungsnavigation > span { white-space:nowrap; }
.ka-kontier-hilfe span { flex:1; min-width:220px; color:var(--lc-muted); }
.ka-quittung-haken { color:#167644; font-weight:800; font-size:20px; }
.ka-tabelle tr.ka-quittung-da td { background:#edf8f1; }
.ka-tabelle tr.ka-aktiv td { background:#dceaff; border-top:1px solid #679aff; border-bottom:1px solid #679aff; }
.ka-tabelle tr.ka-aktiv td:first-child { box-shadow:inset 4px 0 #2864d8; }
.ka-kontierung tbody>tr { cursor:pointer; }
.ka-konto-input { width:135px; font-size:18px; font-weight:700; min-height:42px; }
.ka-tabelle .ka-kontier-details>td { white-space:normal; padding:14px 18px 18px; background:#f3f7fd; }
.ka-kontier-zeile { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:10px; }
.ka-papier { display:flex; align-items:center; gap:8px; padding:10px; background:white; border:1px solid #c7d6e8; border-radius:8px; }
.ka-kontier-werkzeuge { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; overflow-x:auto; white-space:nowrap; }
.ka-kontier-werkzeuge > * { flex:0 0 auto; }
.ka-kontier-werkzeuge .ka-kontier-beleginfo { flex:0 1 auto; min-width:155px; max-width:260px; overflow:hidden; text-overflow:ellipsis; font-size:13px; }
.ka-kontier-werkzeuge .lc-btn, .ka-kontier-werkzeuge .ka-papier { box-sizing:border-box; height:36px; min-height:36px; margin:0; padding:6px 10px; font-size:12px; }
.ka-kontier-werkzeuge .ka-papier input { margin:0; accent-color:#2457b4; }
.ka-kontier-werkzeuge .ka-kontier-symbol, .ka-kontier-werkzeuge .lc-auswahl-schliessen { width:36px; padding:0; justify-content:center; font-size:20px; }
.ka-kontier-werkzeuge .lc-auswahl-schliessen { margin-left:auto; }
.ka-quittung-vorschau { margin-top:10px; }
.ka-quittung-vorschau iframe { width:100%; height:480px; border:1px solid #c7d6e8; border-radius:8px; background:white; }
.ka-kontenliste { margin-top:14px; max-height:55vh; overflow:auto; }
.ka-kontowahl { display:flex; gap:20px; width:100%; border:0; border-bottom:1px solid #e1e6ef; background:white; text-align:left; padding:12px; font:inherit; cursor:pointer; }
.ka-kontowahl:hover { background:#eaf1fd; }