/* Grundstile, Shell und Bausteine (Masken-Spez. 00, Design-Dokumentation). Gilt identisch im Browser und in der App.
   Farben, Abstände und Maße nur aus tokens.css. Die Komponenten-Werte unten sind Aliase auf diese Tokens
   (Vorschlag 00 Kap. 7.3) – tokens.css selbst bleibt unverändert (Hotspot). */
:root {
  --btn-h: 32px; --btn-h-sm: 28px; --field-h: 32px; --chip-h: 24px; --nav-item-h: 36px; --mask-tab-h: 40px;
  --mobile-header-h: 56px; --mobile-actionbar-h: 64px; --mobile-tabbar-h: 64px; --touch-target: 44px; --sheet-radius: 12px;
  --duration: 180ms;
  /* Form der Linse (Marke) als Maske für Markierungen aus reinem CSS, z. B. den aktiven Navigationspunkt */
  --brand-lens-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='70 14.29 30 71.42'%3E%3Cpath d='M85 14.29A50 50 0 0 1 85 85.71A50 50 0 0 1 85 14.29Z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text-1); font: 400 14px/20px var(--font-sans); }
body { -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3 { margin: 0; }
:focus-visible { outline: 1px solid var(--accent-text); box-shadow: var(--focus-ring); }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-2); }
.small { font-size: 12px; line-height: 16px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Wortmarke (Komponente Wordmark, Dateien in docs/Design/Marke) ---------- */
.wordmark { display: inline-flex; align-items: center; gap: 8px; color: var(--brand-grey); text-decoration: none; line-height: 0; }
.wordmark svg { display: block; flex: none; }
/* Ganz in Markengrau (Entscheidung 19.10.2026): auch das o, Rot gehört nur der Linse im Zeichen. */
[data-theme="dark"] .wordmark { color: var(--text-1); }
/* Im Text (Inline): 0,7 em hoch = x-Höhe 0,5 em wie Segoe UI, ohne Unterlängen, sitzt auf der Grundlinie, Schrift in der Textfarbe */
.brand-wordmark-inline { height: .7em; width: 3.31em; margin: 0 .06em; }
/* Linse = Überschneidung von b und d im Zeichen; auch allein als Signal (Komponente BrandLens). Immer Markenrot, im Dunkelmodus Akzentrot. */
.brand-linse { fill: var(--brand-red); }
[data-theme="dark"] .brand-linse { fill: var(--brand-red-text); }
.brand-lens { display: inline-block; flex: none; vertical-align: middle; overflow: visible; }
.brand-lens-pulse .brand-linse { animation: brand-lens-pulse 1.6s ease-in-out infinite; }
@keyframes brand-lens-pulse { 50% { opacity: .35; } }

/* ---------- Shell (Desktop) ---------- */
.shell { display: grid; grid-template-rows: var(--shell-header) auto 1fr; grid-template-columns: var(--shell-nav) 1fr;
  grid-template-areas: "header header" "nav tabs" "nav main"; height: 100vh; height: 100dvh; }
.shell.nav-collapsed { grid-template-columns: var(--shell-nav-collapsed) 1fr; }
.shell-header { grid-area: header; display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-3);
  border-bottom: 1px solid var(--border); background: var(--bg); min-width: 0; }
.shell-header .wordmark { width: 152px; }
/* Firmenlogo des Mandanten (FE-057): oben rechts, links vom Mandanten-Chip; im Dunkelmodus auf einer hellen Kachel. */
.tenant-logo { display: inline-flex; align-items: center; flex: none; height: 32px; padding: 2px 6px; border-radius: var(--radius-button); background: var(--logo-plate); }
.tenant-logo img { display: block; height: 28px; max-width: 160px; object-fit: contain; }
/* Weiße Logo-Variante (Hausstil) im Dunkelmodus statt der hellen Kachel; ohne weiße Variante bleibt die Kachel (Klasse no-white setzt das Bild bei Fehler). */
.tenant-logo .logo-white { display: none; }
[data-theme="dark"] .tenant-logo:not(.no-white) { background: transparent; }
[data-theme="dark"] .tenant-logo:not(.no-white) .logo-normal { display: none; }
[data-theme="dark"] .tenant-logo:not(.no-white) .logo-white { display: block; }
.mobile-header .title-logo { display: flex; justify-content: center; align-items: center; min-width: 0; padding: 0 var(--space-2); }
/* FE-500 ③: Das Logo darf schrumpfen statt links hinter der Wortmarke abgeschnitten zu werden (Platz teilen sich Wortmarke, Logo und drei Knöpfe). */
.mobile-header .tenant-logo { height: 32px; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.mobile-header .tenant-logo img { height: 24px; max-width: 100%; min-width: 0; object-fit: contain; }
/* Mit Mandantenlogo zeigt die Kopfzeile am Handy nur das Bildzeichen der Marke; die Wortmarke gibt den Platz ans Logo ab (FE-500 ③). */
@media (max-width: 480px) { .mobile-header.has-logo .brand-wordmark { display: none; } .mobile-header.has-logo .wordmark { margin-left: var(--space-2) !important; } }
.tenant-chip { display: inline-flex; align-items: center; gap: var(--space-2); height: 28px; padding: 0 var(--space-2); border-radius: var(--radius-button);
  border: 1px solid var(--border); background: var(--bg); white-space: nowrap; max-width: 260px; }
.tenant-chip .tile { width: 18px; height: 18px; border-radius: 4px; background: var(--brand-grey); color: #fff; font-size: 9px; font-weight: 600;
  display: grid; place-items: center; }
.tenant-chip .name { overflow: hidden; text-overflow: ellipsis; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--brand-grey); color: #fff; font-size: 11px; font-weight: 600;
  display: inline-grid; place-items: center; border: 0; flex: none; cursor: pointer; }
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }
.user-menu { position: relative; }
.user-menu .menu { position: absolute; right: 0; top: 36px; min-width: 240px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-popover); padding: var(--space-2); z-index: 30; }
.menu .menu-head { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); margin-bottom: var(--space-1); }
.menu button, .menu a { display: flex; width: 100%; align-items: center; gap: var(--space-2); height: 30px; padding: 0 var(--space-3); border: 0;
  background: transparent; border-radius: var(--radius-chip); text-decoration: none; cursor: pointer; text-align: left; }
.menu button:hover, .menu a:hover { background: var(--surface-2); }

.shell-nav { grid-area: nav; background: var(--surface-1); border-right: 1px solid var(--border); padding: var(--space-2) 0;
  display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; min-height: 0; }
.nav-item { position: relative; flex: none; display: flex; align-items: center; gap: 10px; height: var(--nav-item-h); margin: 0 var(--space-2);
  padding: 0 var(--space-3) 0 var(--space-4); border-radius: var(--radius-button); color: var(--text-1); text-decoration: none; white-space: nowrap; }
.nav-item .nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* FE-569: lange englische Namen kürzen statt waagrecht zu scrollen */
.nav-item:hover { background: var(--surface-2); }
.nav-item.active { background: var(--nav-active); font-weight: 600; }
/* Aktiver Punkt: die Linse der Marke statt eines Balkens (docs/Design/Marke/README.md › Linse) */
.nav-item.active::before { content: ""; position: absolute; left: -5px; top: calc(50% - 9px); width: 8px; height: 18px; background: var(--accent-text);
  -webkit-mask: var(--brand-lens-mask) center / contain no-repeat; mask: var(--brand-lens-mask) center / contain no-repeat; }
.nav-item svg { flex: none; color: var(--brand-grey); }
[data-theme="dark"] .nav-item svg { color: var(--text-2); }
.nav-sep { height: 1px; background: var(--border); margin: var(--space-2) var(--space-4); }
.nav-footer { margin-top: auto; }
.nav-ai { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-5); font-size: 12px; color: var(--text-2); white-space: nowrap; }
.nav-ai .star { color: var(--ai-fg); }
.nav-ai span:last-child { overflow: hidden; text-overflow: ellipsis; }
.shell.nav-collapsed .nav-label, .shell.nav-collapsed .nav-ai span:last-child { display: none; }
.shell.nav-collapsed .nav-item { padding: 0; justify-content: center; }
.shell-main { grid-area: main; overflow: auto; min-width: 0; min-height: 0; background: var(--bg); }

/* ---------- Tab-Leiste: geöffnete Datensätze ---------- */
/* FE-851: Ist rechts die Hilfe oder der Assistent offen (workplace.js setHelpOpen), rückt der Inhalt zur Seite, statt verdeckt zu werden – erst ab 1024 px, darunter liegt die Leiste darüber. */
@media screen and (min-width: 1024px) { html.side-panel-open .shell-main, html.side-panel-open .record-tabs { margin-right: var(--side-panel-w, var(--sidebar-s)); } }
.record-tabs { grid-area: tabs; display: flex; align-items: stretch; gap: 1px; height: var(--shell-tabs); padding: 0 var(--space-2);
  background: var(--surface-1); border-bottom: 1px solid var(--border); min-width: 0; }
.record-tab { display: flex; align-items: center; min-width: 0; max-width: 220px; border-radius: var(--radius-button) var(--radius-button) 0 0;
  margin-top: 4px; color: var(--text-2); }
.record-tab:hover { background: var(--surface-2); }
.record-tab.active { background: var(--bg); color: var(--text); box-shadow: 0 1px 0 var(--bg), inset 0 0 0 1px var(--border); }
.record-tab > a { display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding: 0 var(--space-1) 0 var(--space-3); height: 100%;
  color: inherit; text-decoration: none; font-size: 13px; }
.record-tab .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-tab .close { position: relative; display: grid; place-items: center; width: 24px; height: 24px; margin-right: 4px; border: 0; border-radius: 4px;
  background: none; color: var(--text-2); cursor: pointer; flex: none; }
.record-tab .close:hover { background: var(--surface-2); color: var(--text); }
.record-tab .close .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-2); }
.record-tab .close.dirty svg { display: none; }
.record-tab .close.dirty:hover .dot { display: none; }
.record-tab .close.dirty:hover svg { display: block; }
.record-tab-new { position: relative; display: flex; align-items: center; margin-left: var(--space-1); }
.record-tab-new .menu { position: absolute; left: 0; top: calc(100% + 4px); min-width: 220px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-popover); padding: var(--space-2); z-index: 30; }
.record-tab-new .menu a { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-button);
  color: var(--text); text-decoration: none; }
.record-tab-new .menu a:hover { background: var(--surface-2); }
.scrim-clear { position: fixed; inset: 0; z-index: 29; background: transparent; }
.record-tab-page { display: contents; }
.record-tab-page[hidden] { display: none; }
/* Tab-Menü (Rechtsklick) und Einzelfenster (FE-017) */
.record-tab { position: relative; }
.record-tab-menu { position: absolute; left: 0; top: calc(100% + 4px); min-width: 240px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-popover); padding: var(--space-2); z-index: 30; color: var(--text); }
@media (max-width: 1023px) { .record-tab-menu .pop-out { display: none; } }
.shell.single-window { grid-template-columns: 1fr; grid-template-areas: "header" "main"; grid-template-rows: var(--shell-header) 1fr; }
@media (max-width: 767px) { .shell.single-window { padding-bottom: 0; } }
.single-window-tenant { margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }

/* ---------- Seite, Kopf ---------- */
.page { padding: var(--space-4) var(--space-5) var(--space-6); }
.record-header { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--border); padding: var(--space-3) var(--space-5) 0; }
.breadcrumbs { font-size: 12px; line-height: 16px; color: var(--text-2); display: flex; gap: 6px; flex-wrap: wrap; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent-text); }
.title-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; min-height: 40px; padding: var(--space-1) 0; }
.title-row h1 { font-size: 20px; line-height: 28px; font-weight: 600; }
.title-row .spacer { flex: 1; }
.meta-row { font-size: 13px; color: var(--text-2); padding-bottom: var(--space-2); display: flex; gap: var(--space-2); flex-wrap: wrap; }
.save-state { font-size: 12px; color: var(--text-2); display: inline-flex; align-items: center; gap: 4px; }
.save-state .ok { color: var(--success-fg); }
.save-state.error { color: var(--error-fg); }
.save-state.dirty { color: var(--warning-fg); }
.tabs { display: flex; gap: var(--space-1); height: var(--mask-tab-h); overflow-x: auto; scrollbar-width: none; }
.tabs button { border: 0; background: none; padding: 0 10px; color: var(--text-2); cursor: pointer; white-space: nowrap; box-shadow: none; }
.tabs button, .tabs a { flex-shrink: 0; } /* FE-802: Reiter nie unter ihre Textbreite schrumpfen, die Leiste scrollt stattdessen */
.tabs button[aria-selected="true"] { color: var(--text-1); font-weight: 600; box-shadow: inset 0 -2px 0 var(--brand-grey); }
[data-theme="dark"] .tabs button[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--text-1); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--btn-h); padding: 0 14px;
  border-radius: var(--radius-button); border: 1px solid transparent; background: transparent; cursor: pointer; white-space: nowrap; text-decoration: none; }
.btn:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px color-mix(in srgb, var(--accent-text) 35%, transparent); }
.btn-primary { background: var(--accent); color: var(--accent-on); font-weight: 600; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-pressed); }
.btn-secondary { background: var(--bg); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-1); }
.btn-secondary:active { background: var(--surface-2); }
.btn-subtle:hover { background: var(--surface-2); }
.btn-icon { width: 32px; padding: 0; }
.btn-sm { height: var(--btn-h-sm); padding: 0 10px; }
.btn-block { width: 100%; height: 40px; }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--surface-2); color: var(--text-3); border-color: transparent; cursor: not-allowed; }

/* ---------- Felder ---------- */
/* Karten stehen in Spalten statt in Zeilen (FE-049): jede Spalte füllt sich von oben nach unten, es gibt keine Lücken unter niedrigen Karten.
   Höchstens 3 Spalten, je mindestens 440 px (bei viel Platz bis rund 620 px), die Inhaltsbreite ist begrenzt – am Handy eine Spalte.
   Die wichtigen Karten stehen in jeder Maske zuerst, also in der ersten Spalte. */
.form-grid { display: block; column-width: 440px; column-count: 3; column-gap: var(--space-4); max-width: 1920px; }
.form-grid > * { break-inside: avoid; margin-bottom: var(--space-4); }
.form-grid > :last-child { margin-bottom: 0; }
.card { border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-4); background: var(--bg); min-width: 0; }
.card > h2, .card > summary { font-size: 16px; line-height: 24px; font-weight: 600; margin: 0 0 var(--space-3); }
details.card > summary { list-style: none; cursor: default; }
details.card > summary::-webkit-details-marker { display: none; }
.fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); }
.field { display: flex; flex-direction: column; gap: 6px; grid-column: span 6; min-width: 0; }
.field.w1 { grid-column: span 1; } .field.w2 { grid-column: span 2; } .field.w3 { grid-column: span 3; } .field.w4 { grid-column: span 4; }
.lookup { position: relative; grid-column: span 6; min-width: 0; }
.lookup.w1 { grid-column: span 1; } .lookup.w2 { grid-column: span 2; } .lookup.w3 { grid-column: span 3; } .lookup.w4 { grid-column: span 4; }
.field > label, .field > .label { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.field .required::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--text-3); display: inline-block; }
.input, .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
  height: var(--field-h); border: 1px solid var(--border-strong); border-radius: var(--radius-chip); background: var(--bg); padding: 0 10px; width: 100%; min-width: 0; }
.field textarea { height: 84px; padding: 6px 10px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { outline: 0; border-color: var(--accent-text); box-shadow: var(--focus-ring); }
.field input[readonly] { background: var(--surface-1); border-color: var(--border); color: var(--text-2); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--error-fg); }
.field-error { color: var(--error-fg); font-size: 12px; line-height: 16px; display: flex; gap: 4px; }
.field-hint { color: var(--text-2); font-size: 12px; line-height: 16px; }
.segment { display: inline-flex; background: var(--surface-2); border-radius: var(--radius-button); padding: 2px; gap: 2px; flex-wrap: wrap; }
.segment button { height: 28px; padding: 0 12px; border: 1px solid transparent; border-radius: var(--radius-chip); background: transparent; cursor: pointer; }
.segment button[aria-pressed="true"] { background: var(--bg); border-color: var(--border-strong); font-weight: 600; }
.check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 28px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--text-1); }
/* Kontrollkästchen mit Beschriftung direkt im Feldraster (FE-533): eine ganze Zeile statt einer Spalte, sonst ragt der Text über die Nachbarfelder. */
.fields > .check { grid-column: 1 / -1; }
/* Feldzeile mit Knopf (FE-882): Felder oben bündig – ein Hinweis oder Fehler unter einem Feld verschiebt die Nachbarn nicht mehr (vorher
   „align-items: flex-end“ je Karte). Der Knopf steht in der Höhe der Eingabefelder: leerer Platz in Höhe der Beschriftung (16 px) plus Lücke des Felds. */
.fields.fields-with-action { align-items: start; }
.fields > .field-action { justify-content: flex-start; align-items: flex-start; }
.fields > .field-action::before { content: ""; height: 16px; }
/* Hinweis zu einer ganzen Feldzeile, unter allen Feldern über die volle Breite. */
.fields > .fields-note { grid-column: 1 / -1; margin-top: calc(-1 * var(--space-2)); }
.row-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

/* ---------- Chips, Banner, Leer ---------- */
.chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--radius-chip); font-size: 12px; font-weight: 600; white-space: nowrap; }
.chip-success { color: var(--success-fg); background: var(--success-bg); }
.chip-warning { color: var(--warning-fg); background: var(--warning-bg); }
.chip-error { color: var(--error-fg); background: var(--error-bg); }
.chip-neutral { color: var(--neutral-fg); background: var(--neutral-bg); }
.chip-info { color: var(--info-fg); background: var(--info-bg); }
.chip-draft { color: var(--text-2); border: 1px dashed var(--text-3); }
.chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.banner { display: flex; gap: var(--space-2); align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-button); font-size: 13px; margin-bottom: var(--space-3); }
.banner strong { font-weight: 600; }
.banner-info { background: var(--info-bg); color: var(--info-fg); }
.banner-warning { background: var(--warning-bg); color: var(--warning-fg); }
.banner-error { background: var(--error-bg); color: var(--error-fg); }
.banner-success { background: var(--success-bg); color: var(--success-fg); }
.banner .text { flex: 1; color: var(--text-1); }
@media (max-width: 767px) { .banner { flex-wrap: wrap; } .banner .text { flex: 1 1 14rem; min-width: 0; } }
.empty { border: 1px dashed var(--border-strong); border-radius: var(--radius-card); padding: 20px 16px; }
.empty h3 { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.empty p { margin: 0 0 var(--space-3); color: var(--text-2); font-size: 13px; }
.skeleton { display: block; height: 14px; border-radius: 4px; background: var(--surface-2); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .5; } }
.code-box { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: var(--radius-button); font: 12px/18px ui-monospace, Consolas, monospace; word-break: break-all; }
.code-box span { flex: 1; }

/* ---------- Listen ---------- */
.list-toolbar { display: flex; gap: var(--space-2); align-items: center; margin: var(--space-3) 0; flex-wrap: wrap; }
/* Breite statt Flex-Basis (FE-040): In Spalten (flex-direction: column) wirkte „flex: 0 1 420px“ auf die Höhe. */
.search { position: relative; flex: 0 1 auto; width: 420px; max-width: 100%; min-width: 0; }
.search input { height: 32px; width: 100%; padding: 0 10px 0 32px; border: 1px solid var(--border-strong); border-radius: var(--radius-chip); background: var(--bg); }
.search svg { position: absolute; left: 9px; top: 8px; color: var(--text-3); }
.table-wrap { position: relative; overflow-x: auto; border-top: 1px solid var(--border-strong); }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th { height: 32px; text-align: left; font-size: 12px; font-weight: 600; color: var(--text-2); padding: 0 var(--space-3); border-bottom: 1px solid var(--border-strong); white-space: nowrap; }
table.data th .th-sort { display: inline-flex; align-items: center; gap: 4px; height: 28px; margin-left: -6px; padding: 0 6px; border: 0; border-radius: 4px;
  background: transparent; font: inherit; color: inherit; cursor: pointer; white-space: nowrap; }
table.data th .th-sort:hover { background: var(--surface-1); color: var(--text-1); }
table.data th .th-sort.active { background: var(--surface-2); color: var(--text-1); }
table.data th .th-sort-icon { color: var(--text-3); font-size: 11px; }
table.data th .th-sort.active .th-sort-icon { color: var(--text-1); }
table.data th.num .th-sort { flex-direction: row-reverse; margin: 0 -6px 0 0; }
/* Sortierauswahl am Handy (Kartenansicht ohne Spaltenköpfe, FE-003); am Desktop über .mobile-only ausgeblendet. */
.sort-select { display: flex; gap: var(--space-2); flex: 1 1 100%; min-width: 0; }
.sort-select select { flex: 1 1 auto; min-width: 0; height: var(--touch-target); padding: 0 10px; font: inherit; font-size: 16px; color: inherit;
  border: 1px solid var(--border-strong); border-radius: var(--radius-chip); background: var(--bg); }
.sort-select .sort-direction { flex: 0 0 auto; height: var(--touch-target); gap: 4px; }
table.data td { height: var(--row-comfortable); padding: 0 var(--space-3); border-bottom: 1px solid var(--surface-2); vertical-align: middle; }
table.data tbody tr { cursor: pointer; }
table.data tbody tr:hover { background: var(--surface-1); }
table.data tbody tr:focus-visible { background: var(--surface-2); outline: 1px solid var(--accent-text); }
table.data .name { font-weight: 600; }
/* Zweitzeile in der Zelle auf eigener Zeile (FE-534): inline klebte sie an der Hauptzeile („LS-2026-000125.09.2026“). */
table.data .sub { display: block; font-size: 12px; color: var(--text-3); }
table.data .c-num { width: 72px; color: var(--text-2); font-variant-numeric: tabular-nums; }
table.doc-table td > span:not(.chip) { display: block; } table.doc-table td { padding-top: 6px; padding-bottom: 6px; }
table.doc-table .c-num { width: auto; color: var(--text-1); } table.doc-table .c-kind { width: 48px; }
.list-tabs { margin: var(--space-2) 0 var(--space-3); border-bottom: 1px solid var(--border); }
.list-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; color: var(--text-2); text-decoration: none; white-space: nowrap; }
.list-tabs a[aria-selected="true"] { color: var(--text-1); font-weight: 600; box-shadow: inset 0 -2px 0 var(--brand-grey); }
.list-tabs .count { font-size: 12px; color: var(--text-3); font-weight: 400; }
.list-footer { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; font-size: 13px; color: var(--text-2); flex-wrap: wrap; }
.card-list { display: none; list-style: none; margin: 0; padding: 0; }
.card-list li { border-bottom: 1px solid var(--border); }
.card-list a, .card-list .card-item { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-3); padding: 12px var(--space-4); text-decoration: none; min-height: 64px; }
/* Karte, die ein Panel öffnet statt zu verlinken (Knopf), bzw. Karte mit eigenen Knöpfen (div.card-item mit .card-open). */
.card-list button.card-item, .card-list .card-open { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.card-list .card-open { grid-row: 1 / span 2; grid-column: 1; display: flex; flex-direction: column; gap: 2px; padding: 0; min-width: 0; }
.card-list button.card-item:hover { background: var(--surface-1); }
.card-list .card-open:hover .title { text-decoration: underline; }
.card-list li.card-group { padding: 8px var(--space-4) 4px; font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--surface-1); }
.card-list li.done .title { color: var(--text-3); text-decoration: line-through; }
.card-list .title { font-weight: 600; font-size: 15px; }
.card-list .meta { grid-column: 1; font-size: 13px; color: var(--text-2); }
.card-list .side { grid-row: 1 / span 2; grid-column: 2; align-self: center; text-align: right; }
.fab { display: none; }

/* ---------- Anmeldung, Einrichtung (ohne Shell) ---------- */
.auth { display: grid; grid-template-columns: 480px 1fr; min-height: 100vh; min-height: 100dvh; }
.auth-aside { background: var(--surface-1); border-right: 1px solid var(--border); padding: 40px 48px; display: flex; flex-direction: column; gap: var(--space-6); }
.auth-aside h2 { font-size: 20px; line-height: 28px; font-weight: 600; }
.auth-aside ul { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: grid; gap: var(--space-4); font-size: 13px; line-height: 18px; color: var(--text-2); }
.auth-aside li strong { display: block; color: var(--text-1); font-weight: 600; }
.auth-aside .foot { margin-top: auto; font-size: 12px; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-6) var(--space-4); gap: var(--space-4); }
.auth-tenant { display: flex; align-items: center; gap: var(--space-2); font-size: 16px; font-weight: 600; }
.auth-tenant .tile { width: 28px; height: 28px; border-radius: 6px; background: var(--brand-grey); color: #fff; font-size: 12px; display: grid; place-items: center; }
.boot-logo { display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; }
/* Startanimation (Komponente BrandIntro, Startbild in beiden index.html), Zeiten wie in der Design-Fläche: b und d erscheinen (0–0,5 s) und fahren zusammen
   (0,5–2 s), die Linse leuchtet mit Schein auf (2–2,65 s), Wortmarke (2,5–3,1 s) und „Alles beisammen.“ (2,9–3,5 s) steigen ein; danach pulsiert die Linse,
   solange geladen wird. Ohne Bewegung (Regel oben) steht sofort das fertige Bild. */
/* Startbild über der App (index.html, boot-splash.js): deckt alles ab, bis die Animation durchgelaufen ist, dann blendet es aus. Fehlermeldung bleibt darüber. */
.boot-splash { position: fixed; inset: 0; z-index: 1000; background: var(--bg); transition: opacity .3s ease-out; }
.boot-splash-out { opacity: 0; pointer-events: none; }
/* Schlanker Einstieg (FE-740, boot-splash.js): bei F5, neuem Tab aus der App, Einzelfenster, Druckseite oder erneutem Start binnen 12 h kein Startbild –
   nur wenn die App nach 0,6 s noch lädt, erscheint die pulsierende Linse allein; sie geht ohne Stehenbleiben weg, sobald die App bereit ist. */
.boot-quiet .boot-splash { pointer-events: none; }
.boot-quiet .boot-anim { animation: boot-quiet-in .3s ease-out .6s both; }
.boot-quiet .boot-anim .boot-b, .boot-quiet .boot-anim .boot-d, .boot-quiet .boot-anim .boot-text, .boot-quiet .boot-anim .boot-schein { visibility: hidden; }
@keyframes boot-quiet-in { from { opacity: 0; } to { opacity: 1; } }
#blazor-error-ui:not([hidden]) { position: relative; z-index: 1001; }
.boot-anim { flex-direction: column; gap: 36px; }
.boot-anim svg { overflow: visible; }
.boot-anim .boot-text { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.boot-anim .boot-claim { font-size: 16px; line-height: 1.4; color: var(--text-3); }
.boot-anim .boot-linse, .boot-anim .boot-schein { transform-box: fill-box; transform-origin: center; }
.boot-anim .boot-linse { animation: brand-lens-pulse 1.6s ease-in-out .4s infinite; }
.boot-anim .boot-schein { opacity: 0; }
.boot-intro .boot-b { animation: boot-b 2s both; }
.boot-intro .boot-d { animation: boot-d 2s both; }
.boot-intro .boot-linse { animation: boot-linse .65s ease-out 2s both, brand-lens-pulse 1.6s ease-in-out 3.8s infinite; }
.boot-intro .boot-schein { animation: boot-schein 1.25s ease-out 2.15s both; }
.boot-intro .boot-word { animation: boot-rise .6s ease-out 2.5s both; }
.boot-intro .boot-claim { animation: boot-rise .6s ease-out 2.9s both; }
@keyframes boot-b { 0% { opacity: 0; transform: translateX(-80px); } 25% { opacity: 1; transform: translateX(-80px); animation-timing-function: cubic-bezier(.65,0,.25,1); } 100% { opacity: 1; transform: none; } }
@keyframes boot-d { 0% { opacity: 0; transform: translateX(80px); } 25% { opacity: 1; transform: translateX(80px); animation-timing-function: cubic-bezier(.65,0,.25,1); } 100% { opacity: 1; transform: none; } }
@keyframes boot-linse { 0% { opacity: 0; transform: scale(0); } 46% { opacity: 1; transform: scale(1.3); } 100% { opacity: 1; transform: scale(1); } }
@keyframes boot-schein { 0% { opacity: 0; transform: scale(1); } 8% { opacity: .45; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes boot-rise { 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: none; } }
.brand-header { display: flex; justify-content: flex-start; margin-bottom: var(--space-2); }
.brand-header.only-narrow { display: none; }
@media (max-width: 767px) { .brand-header.only-narrow { display: flex; } }
.auth-card { width: 100%; max-width: 400px; border: 1px solid var(--border); border-radius: var(--radius-card); padding: 24px 28px; display: flex; flex-direction: column; gap: var(--space-4); background: var(--bg); }
.auth-card.wide { max-width: 640px; }
.auth-card h1 { font-size: 20px; line-height: 28px; font-weight: 600; }
.auth-card .field input { height: 40px; font-size: 15px; }
.auth-card .back { font-size: 13px; color: var(--text-2); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.auth-foot { font-size: 12px; color: var(--text-2); display: flex; gap: var(--space-3); }
.steps { display: flex; gap: var(--space-2); list-style: none; padding: 0; margin: 0; font-size: 12px; color: var(--text-2); flex-wrap: wrap; }
.steps li { display: flex; align-items: center; gap: 6px; }
.steps li .n { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border-strong); display: grid; place-items: center; font-size: 11px; }
.steps li[aria-current="step"] { color: var(--text-1); font-weight: 600; }
.steps li[aria-current="step"] .n { background: var(--brand-grey); color: #fff; border-color: var(--brand-grey); }
.steps li.done .n { background: var(--success-bg); color: var(--success-fg); border-color: transparent; }
.summary { display: grid; grid-template-columns: 160px 1fr; gap: 6px var(--space-3); font-size: 13px; margin: 0; }
.summary dt { color: var(--text-2); }
.summary dd { margin: 0; }

/* ---------- Start ---------- */
/* Tages-Briefing (Start.dc.html): eine Spalte 880 px, Karten mit Kopf 40 px, Zeilen 50/44 px, Fußzeile mit Kennzahlen */
.briefing { width: 100%; max-width: 1280px; margin: 0 auto; padding: 20px var(--space-5) var(--space-3); box-sizing: border-box; display: flex; flex-direction: column; min-height: 100%; }
.briefing .grow { flex-grow: 1; }
.briefing-greeting { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.briefing-greeting h1, .briefing-greeting h1.welcome { margin: 0; font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.3px; }
.briefing-greeting span { font-size: 14px; color: var(--text-2); }
.briefing-intro { margin: var(--space-1) 0 0; font-size: 16px; line-height: 24px; color: var(--text-2); }
.briefing-card { margin-top: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; flex-shrink: 0; }
.briefing-intro + .briefing-card { margin-top: var(--space-4); }
.briefing-card-head { height: 40px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 0 var(--space-4); border-bottom: 1px solid var(--border); }
.briefing-card-head h2 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.briefing-card-head .grow { flex-grow: 1; }
.briefing-card-head .link-button { font-size: 13px; display: inline-flex; align-items: center; gap: var(--space-1); }
.briefing-count { font-size: 12px; line-height: 16px; color: var(--text-3); }
.briefing-items { margin: 0; padding: 0; list-style: none; }
.briefing-items li, .briefing-row { min-height: 50px; box-sizing: border-box; display: flex; align-items: center; gap: var(--space-3); padding: 6px var(--space-4); }
.briefing-items li + li { border-top: 1px solid var(--surface-2); }
.briefing-items li:hover, .briefing-items li[aria-selected="true"], .briefing-items li:focus { background: var(--surface-1); outline: none; }
.briefing-items li:focus-visible { box-shadow: inset 2px 0 0 var(--accent-text); }
.briefing-text { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.briefing-text a { color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.briefing-text a:hover { text-decoration: underline; }
.briefing-text .kind { font-weight: 600; }
.briefing-text .detail { font-size: 12px; line-height: 16px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.briefing-amount { width: 112px; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.briefing-amount .unit { font-size: 12px; line-height: 16px; color: var(--text-3); }
.briefing-action { width: 84px; flex-shrink: 0; justify-content: center; }
.briefing-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-5) var(--space-4); color: var(--text-2); text-align: center; }
.briefing-empty svg { color: var(--success-fg); }
.briefing-empty strong { color: var(--text-1); }
.briefing-notice { min-height: 44px; box-sizing: border-box; display: flex; align-items: center; gap: var(--space-3); padding: 6px var(--space-4); }
.briefing-notice + .briefing-notice, .briefing-reason + .briefing-notice { border-top: 1px solid var(--surface-2); }
.notice-icon { width: 20px; flex-shrink: 0; display: flex; justify-content: center; color: var(--warning-fg); }
.notice-text { flex-grow: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-1); text-decoration: none; }
.notice-text:hover { text-decoration: underline; }
.notice-why { height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 0; background: transparent; border-radius: var(--radius-button); color: var(--text-1); font: inherit; font-weight: 600; cursor: pointer; }
.notice-why:hover, .notice-why[aria-expanded="true"] { background: var(--surface-1); }
.notice-why[aria-expanded="true"] svg { transform: rotate(180deg); }
.briefing-reason { margin: 0 var(--space-4) var(--space-3) 48px; padding: 10px var(--space-3); background: var(--surface-1); border-radius: var(--radius-button); display: flex; flex-direction: column; gap: var(--space-2); }
.reason-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.reason-facts div { display: flex; flex-direction: column; }
.reason-facts span { font-size: 12px; line-height: 16px; color: var(--text-2); }
.briefing-reason p { margin: 0; font-size: 13px; line-height: 20px; }
.reason-sources { min-height: 24px; display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; flex-wrap: wrap; }
.source-chip { height: 22px; box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-chip); background: var(--bg); color: var(--text-1); text-decoration: none; }
.source-chip:hover { border-color: var(--border-strong); }
.briefing-steps { margin: 0; padding: 0; list-style: none; }
.briefing-steps li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.briefing-steps li + li { border-top: 1px solid var(--surface-2); }
.briefing-steps li > div { flex-grow: 1; display: flex; flex-direction: column; }
.briefing-steps li > div span { font-size: 13px; color: var(--text-2); }
.briefing-steps .step-no { width: 24px; height: 24px; flex-shrink: 0; border-radius: 12px; border: 1.5px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--text-2); }
.briefing-steps li.current .step-no { border-color: var(--text-1); color: var(--text-1); }
.briefing-footer { flex-shrink: 0; margin-top: var(--space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; line-height: 20px; color: var(--text-2); flex-wrap: wrap; }
.briefing-footer > div { display: flex; align-items: center; gap: 6px; white-space: nowrap; flex-wrap: wrap; }
.briefing-footer strong { color: var(--text-1); font-weight: 600; }
.briefing-footer .sep { color: var(--text-3); }
.briefing-keys { color: var(--text-3); }
.briefing-keys kbd { font: inherit; font-size: 11px; line-height: 16px; padding: 0 5px; border: 1px solid var(--border); border-radius: var(--radius-chip); background: var(--surface-1); color: var(--text-2); }
@media (max-width: 720px) {
  .briefing { padding: var(--space-3) var(--space-4); }
  .briefing-greeting { flex-direction: column; gap: 0; }
  .briefing-greeting h1, .briefing-greeting h1.welcome { font-size: 22px; line-height: 28px; }
  .briefing-steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; column-gap: var(--space-3); row-gap: var(--space-2); }
  .briefing-steps li > .btn { grid-column: 2; justify-self: start; }
  .briefing-amount { display: none; }
  .briefing-action { width: auto; }
  .briefing-notice { flex-wrap: wrap; }
  .briefing-reason { margin-left: var(--space-4); }
  .reason-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .briefing-keys { display: none !important; }
}

/* ---------- Mobil (Handy-Rahmen, 00 Kap. 11) ---------- */
.mobile-header, .tabbar, .action-bar { display: none; }
@media (max-width: 1279px) {
  .shell { grid-template-columns: var(--shell-nav-collapsed) 1fr; }
  .shell .nav-label, .shell .nav-ai span:last-child { display: none; }
  .shell .nav-item { padding: 0; justify-content: center; }
}
@media (max-width: 767px) {
  html, body { font-size: 15px; line-height: 20px; }
  .shell { display: block; height: auto; min-height: 100dvh; padding-bottom: calc(var(--mobile-tabbar-h) + env(safe-area-inset-bottom)); }
  .shell-header, .shell-nav, .record-tabs { display: none; }
  .shell-main { overflow: visible; }
  .mobile-header { display: flex; position: sticky; top: 0; z-index: 20; height: var(--mobile-header-h); align-items: center; gap: var(--space-2);
    padding: 0 var(--space-2); padding-top: env(safe-area-inset-top); background: var(--bg); border-bottom: 1px solid var(--border); }
  .mobile-header .title { flex: 1; font-weight: 600; font-size: 17px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-header .btn-icon, .mobile-header .avatar { width: var(--touch-target); height: var(--touch-target); }
  /* FE-501: Der Kreis bleibt 32 px groß, die tippbare Fläche ist 44 px (transparenter Rand). */
  .mobile-header .avatar { width: var(--touch-target); height: var(--touch-target); margin: 0; border: 6px solid transparent; background-clip: padding-box; }
  .mobile-header .wordmark { min-height: var(--touch-target); }
  .tabbar { display: flex; position: fixed; inset: auto 0 0 0; z-index: 20; height: calc(var(--mobile-tabbar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom); background: var(--bg); border-top: 1px solid var(--border); }
  .tabbar a, .tabbar button { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font-size: 11px; text-decoration: none; color: var(--text-2); background: none; border: 0; min-height: var(--touch-target); }
  .tabbar .active { color: var(--text-1); font-weight: 600; }
  .tabbar .active::before { content: ""; position: absolute; top: 0; left: calc(50% - 16px); width: 32px; height: 3px; border-radius: 0 0 2px 2px; background: var(--accent); }
  .tabbar:has(button.active) a.active::before { display: none; } /* „Mehr“ offen: nur eine Markierung (FE-179) */
  .more-sheet { position: fixed; inset: auto 0 calc(var(--mobile-tabbar-h) + env(safe-area-inset-bottom)) 0; z-index: 25; background: var(--bg);
    max-height: calc(100dvh - var(--mobile-tabbar-h) - env(safe-area-inset-bottom) - var(--mobile-header-h)); overflow-y: auto; overscroll-behavior: contain;
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0; box-shadow: var(--shadow-dialog); padding: var(--space-3) var(--space-2); }
  .more-sheet a, .more-sheet button { display: flex; align-items: center; gap: var(--space-3); min-height: var(--touch-target); padding: 0 var(--space-3);
    text-decoration: none; border: 0; background: none; width: 100%; font-size: 15px; }
  .scrim { position: fixed; inset: 0; z-index: 24; background: var(--scrim); }
  .page { padding: var(--space-3) var(--space-4) calc(var(--mobile-actionbar-h) + var(--space-5)); }
  .record-header { position: static; padding: var(--space-3) var(--space-4) 0; }
  .record-header .breadcrumbs, .record-header .title-row .desktop-only { display: none; }
  .title-row h1 { font-size: 18px; line-height: 24px; }
  .desktop-only { display: none !important; }
  /* Listen am Handy (00 Kap. 11, FE-021): Eine Tabelle bleibt sichtbar und scrollt waagrecht. Nur wenn die Maske daneben eine
     Kartenliste hat (Klasse „has-cards“ an der .table-wrap), tritt die Karte an ihre Stelle – der Architekturtest prüft das Paar. */
  .table-wrap { overscroll-behavior-x: contain; }
  .table-wrap.has-cards { display: none; }
  .card-list { display: block; margin: 0 calc(-1 * var(--space-4)); }
  .list-toolbar .search { flex: 1 1 100%; }
  .search input { height: 44px; font-size: 16px; }
  .fab { display: grid; place-items: center; position: fixed; right: var(--space-4); bottom: calc(var(--mobile-tabbar-h) + var(--space-4) + env(safe-area-inset-bottom));
    width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: var(--shadow-popover); z-index: 15; text-decoration: none; }
  .action-bar { display: flex; position: fixed; inset: auto 0 calc(var(--mobile-tabbar-h) + env(safe-area-inset-bottom)) 0; z-index: 15;
    height: var(--mobile-actionbar-h); align-items: center; gap: var(--space-2); padding: 0 var(--space-4); background: var(--bg); border-top: 1px solid var(--border); }
  .action-bar .btn-primary { margin-left: auto; height: 48px; padding: 0 20px; }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .fields > .field, .field.w1, .field.w2, .field.w3, .field.w4, .lookup, .lookup.w1, .lookup.w2, .lookup.w3, .lookup.w4 { grid-column: 1 / -1; }
  .field input:not([type="checkbox"]):not([type="radio"]), .field select { height: var(--touch-target); font-size: 16px; }
  /* FE-501: Am Handy sind alle Bedienelemente mindestens 44 px hoch (Zielgröße zum Antippen, 00 Kap. 11); Symbolknöpfe auch 44 px breit. */
  .btn, .btn-sm { min-height: var(--touch-target); }
  .btn-icon { min-width: var(--touch-target); }
  .segment button { min-height: var(--touch-target); }
  /* Klicktest Stufe 13 (K3): kurze Segment-, Filter- und Ansichtsknöpfe („Alle“ in Personal, Projekte, Service) auch mindestens 44 px breit. */
  .segment button, .segmented button, .tabs button { min-width: var(--touch-target); }
  .check { min-height: var(--touch-target); }
  /* FE-600: Titel im Fenster am Handy umbrechen statt abschneiden; Kästchen in Zeilen mit Beschriftung gut treffbar. */
  .drawer-head h2 { white-space: normal; overflow-wrap: anywhere; }
  .check input[type="checkbox"] { width: 22px; height: 22px; flex: none; }
  .input, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]), select { min-height: var(--touch-target); }
  .menu button, .menu a, .menu-button > .menu a, .menu-button > .menu button { min-height: var(--touch-target); height: auto; }
  table input:not([type="checkbox"]):not([type="radio"]), table select { min-height: var(--touch-target); }
  .doc-line .group-toggle { min-width: var(--touch-target); min-height: var(--touch-target); }
  .tabs { height: calc(var(--touch-target) + 1px); }
  .head-toggle, .line-summary { min-height: var(--touch-target); }
  /* Chips, die Knöpfe oder Links sind: Optik bleibt, die tippbare Fläche reicht durch einen unsichtbaren Rand auf 44 px. */
  a.chip, button.chip { position: relative; }
  a.chip::after, button.chip::after { content: ""; position: absolute; inset: -11px -4px; }
  .task-chip, .allday-entry { min-height: var(--touch-target); }
  .card { border-left: 0; border-right: 0; border-radius: 0; margin: 0 calc(-1 * var(--space-4)); padding: var(--space-4); }
  .form-grid { gap: 0; }
  .auth { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .auth-main { justify-content: flex-start; padding-top: var(--space-6); }
  .auth-card { padding: 20px 16px; }
  .summary { grid-template-columns: 1fr; }
  .summary dt { margin-top: var(--space-2); }
}

/* ---------- Belege: Angebot ---------- */
fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; }
.partner { display: flex; gap: var(--space-3); align-items: flex-start; justify-content: space-between; }
.partner address { font-style: normal; display: flex; flex-direction: column; }
.partner address span:first-child { font-weight: 600; }
.picker { list-style: none; margin: var(--space-2) 0 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-card); max-height: 280px; overflow: auto; }
.picker button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: var(--space-2) var(--space-3); border: 0; background: none; cursor: pointer; text-align: left; }
.picker li + li button { border-top: 1px solid var(--border); }
.picker button:hover, .picker button:focus-visible { background: var(--surface-1); outline: 0; }
/* Die mit den Pfeiltasten markierte Zeile hebt sich deutlicher ab als der Mauszeiger (FE-790 ⑤: #F7F7F7 war kaum zu sehen). */
.picker button.active { background: var(--surface-2); outline: 0; }
.lookup > .picker { position: absolute; top: calc(100% - 2px); left: 0; right: 0; min-width: 260px; margin: 0; z-index: 20; background: var(--bg); box-shadow: var(--shadow-popover); }
.picker-empty { padding: var(--space-2) var(--space-3); }
.doc-lines { display: flex; flex-direction: column; }
.doc-line { display: grid; grid-template-columns: minmax(32px, var(--pos-col, 44px)) minmax(52px, 76px) minmax(170px, 1fr) minmax(48px, 72px) minmax(48px, 68px) minmax(70px, 108px) minmax(40px, 60px) minmax(70px, 104px) minmax(52px, 68px) minmax(28px, 36px); gap: 4px; align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--border); }
.doc-line.head { font-size: 12px; font-weight: 600; color: var(--text-2); padding-top: 0; }
.doc-line input, .doc-line select, .doc-line textarea { height: var(--field-h); border: 1px solid transparent; border-radius: var(--radius-chip); background: var(--bg); padding: 0 8px; width: 100%; min-width: 0; font: inherit; }
.doc-line textarea { height: auto; padding: 6px 8px; resize: vertical; }
.doc-line:hover input, .doc-line:hover select, .doc-line:hover textarea, .doc-line.entry input { border-color: var(--border); }
.doc-line select { appearance: none; background-image: none; } .doc-line:hover select { appearance: auto; }
.doc-line { min-height: 36px; padding: 2px 0; }
.doc-line .c-art { overflow: hidden; } .doc-line .c-art .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.doc-line .line-more { opacity: 0; } .doc-line:hover .line-more, .doc-line:focus-within .line-more, .line-more[aria-expanded="true"] { opacity: 1; }
.doc-line.entry { border-bottom: 0; } .doc-line.entry .pos { color: var(--text-3); }
.doc-line.entry .entry-cell { grid-column: 3 / -1; padding-left: 0; }
.entry-hint { margin: var(--space-2) 0 0; }
.entry-actions { margin: var(--space-2) 0 0 52px; }
@media (max-width: 1023px) { .entry-actions { margin: var(--space-3) 0 0; } }
.menu kbd { margin-left: auto; padding-left: var(--space-4); font-size: 11px; color: var(--text-3); background: none; border: 0; }
.menu .danger { color: var(--error-fg); }
.menu-sep { display: block; height: 1px; margin: 4px 0; background: var(--border); }
.picker-new { display: block; padding: var(--space-2) var(--space-3); border-top: 1px solid var(--border); text-decoration: none; }
.doc-page { max-width: none; }
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.doc-main { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.doc-side { display: none; }
@media (min-width: 1280px) {
  .doc-side { display: block; border-top: 1px solid var(--border); padding-top: var(--space-3); } /* 1280–1519 px: Belegbaum unter dem Beleg, damit die Positionstabelle die volle Breite behält (FE-567 ①) */
}
@media (min-width: 1520px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .doc-side { position: sticky; top: calc(var(--space-6) * 3); border-top: 0; padding-top: 0; border-left: 1px solid var(--border); padding-left: var(--space-4); }
}
.doc-side h2 { font-size: 14px; margin: 0 0 var(--space-3); }
/* Seitenleiste ausgeblendet (Strg+., #351.5): die rechte Spalte der Belege und Tickets fällt weg, die Maske bekommt die volle Breite. */
html[data-sidebar="hidden"] .doc-side { display: none !important; }
html[data-sidebar="hidden"] .doc-layout { grid-template-columns: minmax(0, 1fr) !important; }
.doc-tree { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: 6px; }
.doc-tree li { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.doc-tree li.child { padding-left: 16px; } .doc-tree li.grandchild { padding-left: 32px; }
.doc-tree li.current { font-weight: 600; } .doc-tree a { text-decoration: none; }
.head-card { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.head-toggle { display: flex; align-items: center; gap: var(--space-3); width: 100%; border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.head-toggle h2 { margin: 0; font-size: 16px; line-height: 24px; white-space: nowrap; } /* FE-688 ④: wie die übrigen Kartenüberschriften */
.head-toggle .head-summary { flex: 1; min-width: 0; color: var(--text-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.head-toggle[aria-expanded="true"] { margin-bottom: var(--space-3); } .head-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .head-toggle svg { margin-left: auto; }
/* FE-676 ⑩: Am Handy bricht eine lange Kartenüberschrift (z. B. „Rabattgruppen von Alpen Haustechnik Großhandel“) um, statt die Seite breiter als den Bildschirm zu machen. */
@media (max-width: 860px) { .head-toggle h2 { white-space: normal; overflow-wrap: anywhere; } }
.fields-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fields-4 > .field, .fields-4 > .lookup { grid-column: 1 / -1; }
.fields-4 > .w1 { grid-column: span 1; } .fields-4 > .w2 { grid-column: span 2; }
.doc-totals { position: sticky; bottom: 0; z-index: 2; display: flex; gap: var(--space-4); align-items: flex-end; justify-content: space-between;
  background: var(--bg); border-top: 1px solid var(--border-strong); padding: var(--space-3) 0; }
.doc-totals .totals { margin: 0; grid-template-columns: auto 140px; }
/* FE-478 ②: Die Trefferliste der Positionssuche (`.line-picker`, z-index 3) liegt über der festen Summenleiste (z-index 2); vorher verdeckte die Leiste (4) die unteren Treffer. */
/* FE-478 ③: Die feste Summenleiste darf „+ Position / + Gruppe …“ und die Trefferliste nicht verdecken: beim Anspringen (Tab, Fokus, Scrollen zum Element) bleibt Platz darunter. */
.entry-actions, .entry-actions .btn, .entry-hint, .doc-lines .doc-line.entry, .doc-lines .doc-line.entry :is(input, select, textarea, button) { scroll-margin-bottom: 190px; }
.line-picker { scroll-margin-bottom: var(--space-4); } /* liegt über der Summenleiste (z-index), braucht also keinen Platz darunter */
.toast { position: fixed; left: 50%; bottom: var(--space-5); transform: translateX(-50%); z-index: 40; display: flex; gap: var(--space-3); align-items: center;
  background: var(--brand-grey); color: #fff; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4); border-radius: var(--radius-card); box-shadow: var(--shadow-dialog); font-size: 13px; }
.toast .btn { color: #fff; }
.doc-line input:focus, .doc-line select:focus, .doc-line textarea:focus { outline: 0; border-color: var(--accent-text); box-shadow: var(--focus-ring); }
.doc-line .num, .doc-line .num input { text-align: right; }
.doc-line .pos { color: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.doc-line .desc { display: flex; gap: var(--space-2); align-items: center; padding-left: calc(var(--level, 0) * 20px); }
/* FE-357: Die Bezeichnung behält eine Mindestbreite; Chips (Herkunft „aus AN-…“, übernommen/offen, Optional) brechen unter die Bezeichnung um,
   statt das Feld bei schmalen Fenstern auf wenige Pixel zu drücken; ein Chip breiter als die Spalte endet mit „…“. */
.doc-line .desc { flex-wrap: wrap; row-gap: var(--space-1); min-width: 0; }
.doc-line .desc > input, .doc-line .desc > textarea, .doc-line .desc > .deduction-text { flex: 1 1 180px; min-width: min(180px, 100%); }
.doc-line .desc > .chip { display: inline-block; line-height: 22px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.doc-line.kind-title .desc input { font-weight: 600; }
.doc-line .group-toggle { border: 0; background: transparent; padding: 0 4px 0 0; cursor: pointer; color: var(--text-2); font: inherit; }
.doc-line.kind-title .title-total { grid-column: 4 / 9; font-weight: 600; }
/* Gruppentotal (FE-669): schließt die Gruppe sichtbar ab – Linie darüber, Summe fett. */
.doc-line.kind-subtotal .title-total { grid-column: 4 / 9; font-weight: 600; border-top: 1px solid var(--border-strong); padding-top: 4px; }
.doc-line.kind-subtotal .desc input { font-weight: 600; }
.doc-line .filler { grid-column: 4 / 10; }
.doc-lines.no-prices .doc-line { grid-template-columns: var(--pos-col, 44px) 76px minmax(200px, 1fr) 72px 68px 36px; }
/* Eigene Positionsnummern wie die OZ „01.02.0010“ aus dem Leistungsverzeichnis (#359.25): breitere Spalte „Pos.“, ohne Umbruch. */
.doc-lines.long-pos { --pos-col: 84px; --pos-col-calc: 84px; --pos-col-phone: 84px; }
.doc-lines.long-pos .doc-line .pos { white-space: nowrap; }
.doc-lines.no-prices .doc-line .filler { grid-column: 4 / 6; }
.doc-line.kind-text .desc { grid-column: auto; }
/* Textposition (FE-446): der Text steht über der ganzen Zeile (Bezeichnung bis Steuersatz) statt in der schmalen Bezeichnungsspalte und wächst mit dem Inhalt. */
.doc-line.kind-text .desc > textarea { field-sizing: content; min-height: 56px; }
@media (min-width: 1024px) {
  .doc-line.kind-text .desc { grid-column: 3 / -2; }
  .doc-line.kind-text .filler { display: none; }
  .doc-lines.with-calc .doc-line.kind-text .desc { grid-column: 2 / -2; }
}
.doc-line.optional .amount, .doc-line.optional .desc input { color: var(--text-2); }
.doc-line.invalid { background: var(--error-bg); }
.doc-line .amount { font-variant-numeric: tabular-nums; }
.line-actions { display: flex; gap: 2px; justify-content: flex-end; white-space: nowrap; }
.line-actions .btn[aria-pressed="true"] { background: var(--surface-2); font-weight: 600; }
.line-summary, .line-done { display: none; }
.menu-button > .menu a, .menu-button > .menu button { display: flex; text-decoration: none; gap: var(--space-2); align-items: center; width: 100%; padding: 8px 10px; border: 0; background: none; font: inherit; color: inherit; text-align: left; border-radius: var(--radius-chip); cursor: pointer; white-space: nowrap; }
.menu-button > .menu a:hover, .menu-button > .menu button:hover:not(:disabled) { background: var(--surface-1); }
.menu-button > .menu button:disabled { color: var(--text-3); cursor: default; }
.line-actions .menu-button > .menu { display: block; }
.totals { display: grid; grid-template-columns: auto 160px; justify-content: end; gap: 4px var(--space-4); margin: var(--space-4) 0 0; font-variant-numeric: tabular-nums; }
.totals dt { text-align: right; color: var(--text-2); }
.totals dd { margin: 0; text-align: right; }
.totals .grand { font-weight: 600; font-size: 16px; color: var(--text-1); border-top: 1px solid var(--border-strong); padding-top: 6px; }

@media (max-width: 1023px) {
  .doc-line { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "pos desc desc desc" "qty unit price disc" "tax amount amount amount" "act act act act";
    padding: var(--space-3) 0; row-gap: var(--space-2); }
  .doc-line.head { display: none; }
  .doc-line .pos { grid-area: pos; }
  .doc-line .desc { grid-area: desc; padding-left: calc(var(--level, 0) * 12px); }
  .doc-line .pos + .desc { grid-column: 1 / 5; padding-left: calc(var(--pos-col-phone, 28px) + var(--level, 0) * 12px); }
  .doc-line .pos { grid-row: 1; grid-column: 1; z-index: 1; align-self: center; }
  .doc-line .c-qty { grid-area: qty; } .doc-line .c-unit { grid-area: unit; } .doc-line .c-price { grid-area: price; }
  .doc-line .c-disc { grid-area: disc; } .doc-line .c-tax { grid-area: tax; }
  .doc-line .amount { grid-area: amount; align-self: end; font-weight: 600; padding-bottom: 10px; }
  .doc-line .title-total, .doc-line .filler { grid-column: 1 / 5; text-align: right; }
  .doc-line .line-actions { grid-area: act; justify-content: flex-start; flex-wrap: wrap; }
  .doc-line .c-art, .doc-line.entry { display: none; }
  .doc-line .line-more { opacity: 1; }
  .doc-line input, .doc-line select, .doc-line textarea { border-color: var(--border); }
  .fields-4 > .w1, .fields-4 > .w2 { grid-column: 1 / -1; }
  .doc-totals { position: static; flex-direction: column; align-items: stretch; }
  .doc-line [data-label] { display: flex; flex-direction: column; gap: 2px; }
  .doc-line [data-label]::before { content: attr(data-label); font-size: 11px; line-height: 14px; font-weight: 600; color: var(--text-2); text-align: left; }
  .doc-line input, .doc-line select, .doc-line textarea { height: 40px; font-size: 16px; }
  .doc-line textarea { height: auto; min-height: 56px; }
  /* Handy: Positionen kompakt, eine Position aufgeklappt (Antippen = Bearbeiten). */
  .doc-line:not(.editing) { grid-template-columns: var(--pos-col-phone, 28px) minmax(0, 1fr); grid-template-areas: none; padding: var(--space-2) 0; row-gap: 0; }
  .doc-line:not(.editing) > :not(.pos):not(.line-summary) { display: none; }
  .doc-line:not(.editing) .pos { grid-column: 1; align-self: start; padding-top: 2px; }
  .doc-line:not(.editing) .line-summary { display: grid; grid-column: 2; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-2); width: 100%;
    padding: 0 0 0 calc(var(--level, 0) * 12px); border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
  .line-summary:disabled { cursor: default; opacity: 1; }
  .line-summary .s-desc { grid-column: 1; display: flex; gap: var(--space-2); align-items: center; min-width: 0; overflow-wrap: anywhere; }
  .doc-line.kind-title .line-summary .s-desc { font-weight: 600; }
  .doc-line.kind-text .line-summary .s-desc { color: var(--text-2); white-space: pre-line; }
  .line-summary .s-calc { grid-column: 1; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
  .line-summary .s-amount { grid-column: 2; grid-row: 1; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
  .doc-line.editing { background: var(--surface-1); padding: var(--space-3) var(--space-2); border-radius: var(--radius-card); }
  .doc-line.editing .line-done { display: inline-flex; margin-left: auto; }
  .totals { grid-template-columns: 1fr auto; justify-content: stretch; }
}

/* ---------- Druckansicht (A4) ---------- */
.print-toolbar { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border); background: var(--surface-1); }
.sheet { width: 210mm; min-height: 297mm; margin: var(--space-5) auto; padding: 18mm 18mm 20mm 22mm; background: #fff; color: #1a1a1a; box-shadow: var(--shadow-popover); font-size: 10pt; line-height: 1.4; }
.sheet-head { display: flex; justify-content: flex-end; border-bottom: 2px solid var(--brand-grey); padding-bottom: 4mm; }
.sheet-head .issuer { display: flex; flex-direction: column; align-items: flex-end; font-size: 8.5pt; color: #4d4d4d; }
.sheet-head .issuer strong { font-size: 12pt; color: #1a1a1a; }
.sheet-address { display: grid; grid-template-columns: 1fr 60mm; gap: 8mm; margin-top: 12mm; min-height: 40mm; }
.sender-line { grid-column: 1; font-size: 7pt; color: #6b6b6b; border-bottom: 1px solid #ccc; padding-bottom: 1mm; align-self: start; }
.sheet-address address { grid-column: 1; font-style: normal; display: flex; flex-direction: column; margin-top: -30mm; padding-top: 8mm; }
.sheet-meta { grid-column: 2; grid-row: 1 / 3; align-content: start; display: grid; grid-template-columns: auto 1fr; gap: 1mm 4mm; margin: 0; font-size: 9pt; }
.sheet-meta dt { color: #6b6b6b; }
.sheet-meta dd { margin: 0; text-align: right; }
.sheet-title { font-size: 14pt; font-weight: 600; margin: 8mm 0 4mm; }
.sheet-text { white-space: pre-line; margin: 3mm 0; }
.sheet-lines { width: 100%; border-collapse: collapse; margin: 4mm 0; }
.sheet-lines th { font-size: 8.5pt; text-align: left; border-bottom: 1px solid #1a1a1a; padding: 1.5mm 1mm; }
.sheet-lines td { padding: 1.5mm 1mm; border-bottom: 1px solid #e3e3e3; vertical-align: top; }
.sheet-lines .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sheet-lines tr.title td { font-weight: 600; background: #f4f4f4; }
.sheet-lines tr.subtotal td { font-weight: 600; border-top: 1px solid #1a1a1a; }
.sheet-lines tr.optional td { color: #6b6b6b; }
.sheet-lines tr.page-break { break-after: page; }
.sheet-totals { display: grid; grid-template-columns: auto 40mm; justify-content: end; gap: 1mm 6mm; margin: 2mm 0 6mm; font-variant-numeric: tabular-nums; }
.sheet-totals dt { text-align: right; }
.sheet-totals dd { margin: 0; text-align: right; }
.sheet-totals .grand { font-weight: 700; font-size: 11pt; border-top: 1px solid #1a1a1a; padding-top: 1.5mm; }
@media (max-width: 860px) {
  .sheet { width: auto; min-height: 0; margin: 0; padding: var(--space-4); box-shadow: none; }
  .sheet-address { grid-template-columns: 1fr; }
  .sheet-address address { margin-top: 2mm; padding-top: 0; }
  .sheet-meta { grid-column: 1; grid-row: auto; }
  .sheet-lines { font-size: 9pt; }
}
@media print {
  @page { size: A4; margin: 0; }
  .no-print { display: none !important; }
  html, body { background: #fff; }
  .sheet { margin: 0; box-shadow: none; width: auto; }
}

/* ---------- Artikel ---------- */
.sub-title { font-size: 14px; font-weight: 600; margin: var(--space-4) 0 var(--space-2); }
.price-rows { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-2); }
.price-row { display: grid; grid-template-columns: 90px 110px 1fr 1fr 36px; gap: var(--space-2); align-items: center; }
.price-row.head { font-size: 12px; font-weight: 600; color: var(--text-2); }
.price-row input { height: var(--field-h); border: 1px solid var(--border-strong); border-radius: var(--radius-chip); padding: 0 8px; min-width: 0; width: 100%; background: var(--bg); font: inherit; }
.price-row input[type="number"] { text-align: right; }
.tree-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-card); }
.tree-list li + li { border-top: 1px solid var(--border); }
.tree-list button { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 40px; padding: 0 var(--space-3) 0 calc(var(--space-3) + var(--level, 0) * 24px);
  border: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.tree-list button:hover { background: var(--surface-1); }
.tree-list .spacer { flex: 1; }
/* Handy (FE-619): Zeilen umbrechen statt über den Rand laufen („0 Verwendungen“ wurde bei 375 px abgeschnitten, Seite 395 px breit). */
@media (max-width: 767px) {
  .tree-list button { flex-wrap: wrap; row-gap: 2px; padding-top: var(--space-2); padding-bottom: var(--space-2); }
  .tree-list button .name { min-width: 0; overflow-wrap: anywhere; }
}
.row-actions .spacer { flex: 1; }
@media (max-width: 767px) {
  .price-row { grid-template-columns: 1fr 1fr 36px; }
  .price-row.head { display: none; }
  .price-row input[type="date"] { grid-column: span 1; }
}
.line-picker { max-height: max(280px, 50vh); margin: 0 0 var(--space-2) 52px; background: var(--bg); box-shadow: var(--shadow-popover); position: relative; z-index: 3; }
@media (max-width: 1023px) { .line-picker { margin-left: 0; } }

/* ---------- Projekte ---------- */
.team { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.team li { display: grid; grid-template-columns: 28px minmax(120px, 1fr) 150px minmax(100px, 1fr) 90px 150px 36px; gap: var(--space-2); align-items: center; }
.team select, .team input { height: var(--field-h); border: 1px solid var(--border-strong); border-radius: var(--radius-chip); padding: 0 8px; min-width: 0; width: 100%; background: var(--bg); font: inherit; }
.link-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.link-list li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: 6px 0; border-bottom: 1px solid var(--border); }
.link-list .c-num { color: var(--text-2); font-variant-numeric: tabular-nums; margin-right: 6px; }
table.data tr.child-row td:first-child { color: var(--text-2); }
.action-bar select.input { flex: 1; height: 44px; }
@media (max-width: 767px) {
  .team li { grid-template-columns: 28px 1fr 36px; }
  .team li select, .team li input { grid-column: 2 / 4; }
}
.menu-button { position: relative; }
.menu-button > summary { list-style: none; cursor: pointer; }
.menu-button > summary::-webkit-details-marker { display: none; }
.menu-button > .menu { position: absolute; right: 0; top: calc(100% + 4px); min-width: 220px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-popover); padding: var(--space-2); z-index: 30; }

@media (min-width: 1024px) { .mobile-only { display: none !important; } }

/* ---------- Seitenpanel (640 px, breit 860 px, ohne Abdunkeln; per Ziehgriff veränderbar, FE-048) ---------- */
.drawer { position: fixed; top: var(--shell-header); right: 0; bottom: 0; width: min(640px, 100vw); z-index: 30; display: flex; flex-direction: column;
  background: var(--bg); border-left: 1px solid var(--border); box-shadow: var(--shadow-dialog); }
.drawer-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.drawer-head h2 { margin: 0; font-size: 16px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* FE-542 ⑦: Die Regel „Titel am Handy umbrechen“ (FE-600) steht weiter oben und wurde von der Zeile davor überstimmt; deshalb hier nach ihr. Der Zwischenraum
   („spacer“) nimmt dem Titel sonst die halbe Breite. */
@media (max-width: 767px) { .drawer-head h2 { white-space: normal; overflow-wrap: anywhere; } .drawer-head > h2 + .spacer { display: none; } }
.drawer-body { flex: 1; overflow: auto; padding: var(--space-4); }
.drawer-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); }
.drawer-foot .drawer-foot-error { flex: 1 1 100%; margin: 0; }
.drawer-foot .spacer { flex: 1; }
.drawer-section { font-size: 13px; font-weight: 600; margin: var(--space-5) 0 var(--space-2); color: var(--text-2); }
.comm-list { display: flex; flex-direction: column; gap: var(--space-2); }
.comm-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 124px auto 28px; gap: var(--space-2); align-items: center; }
.comm-row input, .comm-row select { height: var(--field-h); border: 1px solid var(--border); border-radius: var(--radius-chip); background: var(--bg); padding: 0 8px; min-width: 0; font: inherit; }
.comm-row .check { font-size: 12px; white-space: nowrap; }
.btn-strong { font-weight: 600; }
.danger-text { color: var(--error-fg); }
table.data tr.invalid { background: var(--error-bg); }
table.data tr.muted td { color: var(--text-3); }
@media (max-width: 1023px) {
  .drawer { top: 0; width: 100vw; z-index: 50; }
  .comm-row { grid-template-columns: 90px minmax(0, 1fr) 32px; }
  .comm-row select[aria-label="Zweck"], .comm-row .check { grid-column: 2 / 3; }
}

/* ---------- Einstellungen (S 08 §0.1/0.2, #347.2): links die Gruppen (240 px), über der Maske die Punkte der Gruppe als Reiter ---------- */
.settings-page { display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: var(--space-5); row-gap: var(--space-3); align-items: start; }
.settings-menu { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: var(--space-4); display: flex; flex-direction: column; gap: 2px; }
.settings-tabs { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; gap: 2px var(--space-1); border-bottom: 1px solid var(--border); min-width: 0; }
.settings-page > .settings-content { grid-column: 2; grid-row: 2; }
.settings-groups { display: flex; flex-direction: column; gap: 2px; }
.settings-group { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin: var(--space-3) 0 4px; padding: 0 10px; }
.settings-item { display: block; padding: 6px 10px; border-radius: var(--radius-chip); color: var(--text-1); text-decoration: none; font-size: 13px; }
.settings-item:hover { background: var(--surface-1); }
.settings-item.active { background: var(--surface-2); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.settings-tab { display: block; padding: 8px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--text-2); text-decoration: none; font-size: 13px; white-space: nowrap; }
.settings-tab:hover { color: var(--text-1); background: var(--surface-1); }
.settings-tab.active { color: var(--text-1); font-weight: 600; border-bottom-color: var(--text-1); }
.settings-content { min-width: 0; }
.settings-item.focus { background: var(--surface-1); outline: 1px solid var(--border-strong); outline-offset: -1px; }
.settings-search { position: relative; flex: none; padding-bottom: var(--space-1); background: var(--bg); }
.settings-search svg { position: absolute; left: 9px; top: 8px; color: var(--text-3); }
.settings-search input { height: 32px; width: 100%; padding: 0 10px 0 32px; border: 1px solid var(--border-strong); border-radius: var(--radius-chip); background: var(--bg); font: inherit; font-size: 13px; }
.settings-empty { margin: var(--space-2) 0; padding: 0 10px; font-size: 13px; color: var(--text-2); }
.settings-selects { display: none; }
/* Ab 1024 px (FE-018): Seite füllt den Inhaltsbereich, Menü und Maske scrollen je für sich; Suchfeld, Reiter und Titelzeile mit „Speichern“ bleiben oben. */
@media (min-width: 1024px) {
  .settings-page { height: 100%; padding-bottom: var(--space-4); align-items: stretch; }
  .settings-menu { position: static; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: var(--space-1); }
  .settings-search { position: sticky; top: 0; z-index: 1; }
  .settings-page > .settings-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: var(--space-2); }
  .settings-content > .title-row { position: sticky; top: 0; z-index: 4; background: var(--bg); }
}
.value-table input:not([type="checkbox"]) { width: 100%; height: var(--field-h); border: 1px solid var(--border); border-radius: var(--radius-chip); padding: 0 8px; font: inherit; background: var(--bg); }
.value-table .c-move { width: 72px; white-space: nowrap; } .value-table tbody tr { cursor: default; }
.tax-table tr.open td { background: var(--surface-1); } .tax-table tr.detail { cursor: default; } .tax-table tr.detail:hover { background: none; }
.tax-table .sub { display: block; } .tax-table td.num { white-space: nowrap; }
.rate-history { margin: var(--space-2) 0 var(--space-3); } .rate-history tr { cursor: default; } .rate-history tr.current td { font-weight: 600; }
/* Lizenztabellen (Updates & Lizenz, Reiter „Lizenzen“ an der Adresse): nur zum Lesen, Zahlen rechtsbündig. */
.license-table tbody tr { cursor: default; } .license-table tbody tr:hover { background: none; } .license-table .num { text-align: right; white-space: nowrap; }
.new-rate { align-items: end; grid-template-columns: repeat(8, minmax(0, 1fr)); }
@media (max-width: 1023px) {
  .settings-page { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: var(--space-3); }
  .settings-menu, .settings-tabs, .settings-page > .settings-content { grid-column: 1; grid-row: auto; }
  .settings-menu { position: static; }
  .settings-groups { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .settings-group { display: none; }
  .settings-menu.searching { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .settings-item { border: 1px solid var(--border); }
  .settings-search { flex: 1 1 100%; }
  .settings-search input { height: 40px; font-size: 16px; }
  .settings-search svg { top: 12px; }
}
/* Am Handy: Gruppe und Punkt als zwei Auswahllisten, keine Gruppenliste und keine Reiter (nur als Suchergebnis die Treffer). */
@media (max-width: 767px) {
  .settings-selects { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 100%; }
  .settings-menu.searching .settings-selects { display: none; }
  .settings-select { display: block; width: 100%; box-sizing: border-box; height: 40px; font-size: 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-chip); background: var(--bg); color: var(--text-1); padding: 0 10px; }
  .settings-menu:not(.searching) .settings-groups { display: none; }
  .settings-tabs { display: none; }
}

/* ---------- Artikel › Einheiten ---------- */
.unit-table input:not([type="checkbox"]):not([type="radio"]), .unit-table select { height: 30px; border: 1px solid var(--border); border-radius: var(--radius-chip); padding: 0 6px; font: inherit; background: var(--bg); min-width: 0; }
.unit-table td.num input { width: 72px; text-align: right; } .unit-table td { padding-top: 4px; padding-bottom: 4px; } .unit-table tbody tr { cursor: default; }
.unit-table .dims { white-space: nowrap; } .unit-table .dims input { width: 58px; margin-right: 2px; }
.unit-table tr.base td { color: var(--text-2); } .unit-table .sub { display: block; font-size: 11px; color: var(--text-3); }
.convert-box { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-top: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--surface-1); border-radius: var(--radius-card); }
.convert-box input { width: 90px; height: 30px; border: 1px solid var(--border); border-radius: var(--radius-chip); padding: 0 6px; text-align: right; font: inherit; }
.line-hint { display: flex; gap: var(--space-2); align-items: center; margin: 0 0 4px 124px; font-size: 12px; color: var(--warning-fg, var(--text-2)); }
.field .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }

/* ---------- Zeitleiste ---------- */
.timeline { display: flex; flex-direction: column; gap: var(--space-3); }
.note-entry textarea, .timeline-list textarea { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-chip); padding: 6px 8px; font: inherit; resize: vertical; background: var(--bg); }
.note-entry .row-actions { justify-content: flex-end; margin-top: 4px; }
.timeline-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.timeline-list li { border-left: 2px solid var(--border); padding: 2px 0 4px var(--space-3); }
.timeline-list li.tl-note { border-left-color: var(--brand-grey); }
.timeline-list .tl-head { font-size: 12px; color: var(--text-2); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.timeline-list .tl-head .btn { margin-left: 0; padding: 0 6px; height: 22px; }
.timeline-list .tl-text { white-space: pre-line; font-size: 13px; }

/* Belegtexte (Einstellungen) */
.text-templates { display: block; margin-top: var(--space-3); }
.text-templates > * { display: block; width: 100%; margin: 0 0 var(--space-3); }
.text-templates textarea { width: 100%; }
.text-templates > .placeholder-chips { display: flex; flex-flow: row wrap; gap: var(--space-2); align-items: center; }
.placeholder-chips .chip { cursor: pointer; border: 1px solid var(--border); }
.mono { font-family: ui-monospace, monospace; }
.text-preview { border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-3) var(--space-4); background: var(--bg); white-space: pre-line; }
.small-heading { font-size: 14px; margin: var(--space-2) 0 0; }
.texts-summary { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 36px; padding: 0 10px; border: 1px dashed var(--border-strong);
  border-radius: var(--radius-chip); background: transparent; font: inherit; color: var(--neutral-fg); cursor: pointer; text-align: left; }
.texts-summary span:first-child { flex: 1; }
.texts-summary .link { text-decoration: underline; color: var(--brand-grey); }
.texts-summary:hover { border-color: var(--brand-grey); }
.texts-form .field { margin-bottom: var(--space-4); }
.texts-form textarea { width: 100%; }
.texts-form > p { margin-top: 0; }
.doc-line .num input { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Dialog (Pop-up) ---------- */
.modal-scrim { position: fixed; inset: 0; z-index: 40; background: var(--scrim); }
.modal { position: fixed; z-index: 41; left: 50%; top: 10vh; transform: translateX(-50%); width: min(720px, calc(100vw - 32px)); max-height: 80vh;
  display: flex; flex-direction: column; background: var(--bg); border-radius: var(--radius-overlay); box-shadow: var(--shadow-dialog); }
.modal-head { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-3); border-bottom: 1px solid var(--border); }
.modal-head > div { flex: 1; min-width: 0; }
.modal-head h2 { margin: 0; font-size: 18px; }
.modal-head p { margin: 4px 0 0; }
.modal .modal-body { overflow: auto; padding: var(--space-4) var(--space-5); display: block; }
.modal-field { display: block; margin: 0 0 var(--space-4); }
.modal-field:last-child { margin-bottom: 0; }
.modal-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.modal-label .muted { font-weight: 400; }
.modal-field textarea { display: block; width: 100%; box-sizing: border-box; border: 1px solid var(--border-strong); border-radius: var(--radius-button);
  padding: 8px 10px; font: inherit; line-height: 1.5; resize: vertical; background: var(--bg); color: inherit; }
.modal-field textarea:focus { outline: 0; border-color: var(--accent-text); box-shadow: var(--focus-ring); }
.modal-foot { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border); }
.modal-foot .spacer { flex: 1; }
@media (max-width: 1023px) { .modal { top: 0; left: 0; transform: none; width: 100vw; height: 100%; max-height: none; border-radius: 0; } }

/* QR-Codes auf dem Ausdruck */
.sheet-qr { display: flex; gap: 6mm; }
.sheet-qr.head { grid-column: 2; justify-self: end; margin-top: 3mm; }
.sheet-qr.foot { justify-content: flex-end; margin-top: 4mm; }
.qr-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 1mm; }
.qr-figure svg { width: 24mm; height: 24mm; display: block; }
.sheet-qr.foot .qr-figure svg { width: 32mm; height: 32mm; }
.qr-figure figcaption { font-size: 7.5pt; color: #4d4d4d; text-align: center; max-width: 36mm; }

/* Einstellungen › QR-Codes */
.qr-list { display: block; margin-top: var(--space-3); }
.qr-card { border: 1px solid var(--border); border-radius: var(--radius-card); margin-bottom: var(--space-3); }
.qr-card.inactive { opacity: .6; }
.qr-card-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); }
.qr-card-head .spacer { flex: 1; }
.qr-card-head .check { font-size: 13px; display: flex; gap: 6px; align-items: center; }
.qr-icon { font-size: 18px; color: var(--brand-grey); }
.qr-card-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--space-4); padding: var(--space-3); }
.qr-card-body .wide { grid-column: 1 / -1; }
.qr-card-body .modal-field { margin-bottom: var(--space-3); }
.qr-card-body input, .qr-card-body select { display: block; width: 100%; box-sizing: border-box; height: 36px; border: 1px solid var(--border-strong); border-radius: var(--radius-button); padding: 0 10px; font: inherit; background: var(--bg); color: inherit; }
.qr-card-body .placeholder-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.qr-card-body p { margin: var(--space-2) 0 0; }
.qr-add { display: flex; gap: var(--space-2); }
@media (max-width: 1023px) { .qr-card-body { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Artikel › Preise / Kalkulation ---------- */
.prices-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-4); align-items: start; }
.prices-layout > div { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.card-title-row { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
.card-title-row h2 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.card-title-row h2 .count { font-size: 13px; font-weight: 400; color: var(--text-3); margin-left: var(--space-1); }
.card-title-row .spacer { flex: 1; }
.price-rows .price-row { grid-template-columns: 90px 120px 70px 150px 150px 32px; }
.price-row.expired { opacity: .55; }
.price-group { display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-3) 0 var(--space-1); border-top: 1px solid var(--border); margin-top: var(--space-2); }
.price-group .spacer { flex: 1; }
.derived-note { margin: 4px 0 0; }
.amount-input { text-align: right; font-variant-numeric: tabular-nums; }
.price-summary { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.price-summary li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--border); }
table.data.compact td, table.data.compact th { padding: 6px 8px; }
.price-steps { list-style: none; padding: 0; margin: var(--space-3) 0 0; counter-reset: step; }
.price-steps li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--space-3); padding: 6px 0 6px 28px; border-bottom: 1px solid var(--border); position: relative; counter-increment: step; }
.price-steps li::before { content: counter(step); position: absolute; left: 0; top: 7px; width: 20px; height: 20px; border-radius: 50%; background: var(--neutral-bg); font-size: 11px; display: grid; place-items: center; }
.price-steps .ps-label { font-weight: 600; }
.price-steps .ps-amount { text-align: right; font-variant-numeric: tabular-nums; }
.price-steps .ps-detail { grid-column: 1 / -1; font-size: 12px; color: var(--text-2); }
.price-steps li.not-applied .ps-label, .price-steps li.not-applied .ps-amount { text-decoration: line-through; color: var(--text-3); }
.price-steps li.ok .ps-label { color: var(--success-fg); }
.price-steps li.warning .ps-label, .price-steps li.warning .ps-detail { color: var(--warning-fg); }
.price-result { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--space-3); font-size: 15px; }
.calc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--space-4); align-items: start; }
.calc-side { display: flex; flex-direction: column; gap: var(--space-4); }
.calc-table { display: grid; }
.calc-row { display: grid; grid-template-columns: minmax(0, 1fr) 130px 120px 100px; gap: var(--space-3); align-items: center; min-height: 36px; border-bottom: 1px solid var(--border); padding: 0 4px; }
.calc-row.head { font-size: 12px; font-weight: 600; color: var(--text-2); min-height: 28px; }
.calc-row.subtotal { font-weight: 600; background: var(--neutral-bg); }
.calc-row.result { font-size: 15px; border-bottom: 2px solid var(--brand-grey); }
.calc-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.calc-row input, .calc-row select { width: 100%; height: 30px; border: 1px solid var(--border-strong); border-radius: var(--radius-chip); padding: 0 6px; font: inherit; background: var(--bg); color: inherit; box-sizing: border-box; }
.percent-field { display: flex; align-items: center; gap: 4px; }
.percent-field input { flex: 1; }
.calc-kpis { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--space-3); margin: var(--space-3) 0; font-size: 13px; }
.calc-kpis dd { margin: 0; text-align: right; }
.margin-bar { position: relative; height: 22px; background: var(--neutral-bg); border-radius: var(--radius-chip); overflow: hidden; }
.margin-bar span { position: absolute; inset: 0 auto 0 0; background: var(--success-bg); border-right: 2px solid var(--success-fg); }
.margin-bar span.warn { background: var(--warning-bg); border-color: var(--warning-fg); }
.margin-bar em { position: relative; font-style: normal; font-size: 12px; padding: 0 8px; line-height: 22px; }
td.warn { color: var(--warning-fg); }
tr.target td { font-weight: 600; }
@media (max-width: 1023px) {
  .prices-layout, .calc-layout { grid-template-columns: minmax(0, 1fr); }
  .calc-row { grid-template-columns: minmax(0, 1fr) 110px 100px; }
  .calc-row > :nth-child(4) { display: none; }
  .price-rows .price-row { grid-template-columns: 70px 1fr 60px 32px; }
  .price-rows .price-row > input[type=date] { display: none; }
}
.price-result { flex-wrap: wrap; gap: 4px var(--space-3); }
.price-result strong { white-space: nowrap; }

/* ---------- Beleg: Mitkalkulation ---------- */
.calc-toggle { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.calc-toggle .spacer { flex: 1; }
.doc-lines.with-calc .doc-line { grid-template-columns: var(--pos-col-calc, 34px) minmax(120px, 1fr) 54px 58px 92px 44px 92px 54px 86px 80px 56px 28px; gap: 2px; }
.doc-lines.with-calc .doc-line > .c-art { display: none; }
.doc-lines.with-calc .doc-line > .c-calc.ek { grid-column: 9; }
.doc-lines.with-calc .doc-line > .c-calc.db { grid-column: 10; }
.doc-lines.with-calc .doc-line > .c-calc.mg { grid-column: 11; }
.doc-lines.with-calc .doc-line > .line-actions { grid-column: 12; }
.doc-lines.with-calc .doc-line > .filler { grid-column: 3 / 9; }
.doc-lines.with-calc .doc-line.kind-title .title-total, .doc-lines.with-calc .doc-line.kind-subtotal .title-total { grid-column: 3 / 8; }
.doc-lines.with-calc .doc-line.entry .entry-cell { grid-column: 2 / -1; }
.doc-line .c-calc { white-space: nowrap; background: var(--neutral-bg); align-self: stretch; display: flex; align-items: center; justify-content: flex-end; padding: 0 4px; font-variant-numeric: tabular-nums; }
.doc-line.head .c-calc { background: var(--neutral-bg); }
.doc-line .c-calc input { background: var(--bg); }
.doc-line .c-calc.warn, .calc-kpis .warn { color: var(--warning-fg); font-weight: 600; }
.calc-card { border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-3); margin-bottom: var(--space-4); }
.calc-card h2 { font-size: 15px; margin: 0 0 var(--space-2); }
.calc-card h3 { font-size: 13px; margin: var(--space-3) 0 var(--space-1); }
.calc-card .calc-kpis.split { border-top: 1px solid var(--border); padding-top: var(--space-2); }
.calc-card .amount-input { width: 100%; height: 32px; border: 1px solid var(--border-strong); border-radius: var(--radius-chip); padding: 0 8px; box-sizing: border-box; font: inherit; }
@media (max-width: 1023px) { .doc-lines.with-calc .c-calc { display: none; } }
.doc-line .c-art .lief-nr { display: block; font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-sub { display: block; font-size: 8pt; color: #6b6b6b; }
.supplier-table .star { border: 0; background: transparent; font-size: 18px; cursor: pointer; color: var(--text-3); padding: 0; }
.supplier-table .star.on { color: var(--warning-fg); }
.supplier-table td .sub { display: block; font-size: 12px; color: var(--text-2); }
.ek-trace tr.sum td { font-weight: 600; border-top: 1px solid var(--border-strong); }
.link-button { border: 0; background: transparent; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; text-align: left; }
.woher { margin-top: var(--space-3); padding: var(--space-3); background: var(--neutral-bg); border-radius: var(--radius-card); }
.woher p { margin: 4px 0; }
.line-hint.ok { color: var(--success-fg); background: var(--success-bg); }

/* Artikel › Lager (Design Artikel-Lager) */
.stock-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-4); align-items: start; }
.stock-main { display: grid; gap: var(--space-4); min-width: 0; }
.stock-layout td.num.neg { color: var(--warning-fg); }
.stock-layout td.num.pos { color: var(--success-fg); }
.stock-layout tfoot td { font-weight: 600; border-top: 1px solid var(--border); }
.stock-big { font-size: 15px; margin: var(--space-2) 0; }
.stock-big strong { font-size: 24px; }
.stock-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--surface-2, var(--border)); margin: var(--space-2) 0; }
.stock-bar .avail, .stock-legend i.avail { background: var(--success-fg); }
.stock-bar .res, .stock-legend i.res { background: var(--info-fg); }
.stock-bar .ord, .stock-legend i.ord { background: var(--warning-fg); }
.stock-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); }
.stock-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }
.stock-side .kv { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--space-3); margin: 0 0 var(--space-3); }
.stock-side .kv dt { color: var(--text-2); }
.stock-side .kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .stock-layout { grid-template-columns: 1fr; } }
.stock-layout .num { text-align: right; white-space: nowrap; }
.stock-layout td .sub { display: block; font-size: 12px; color: var(--text-2); }

/* Lager › Bestand (Design Lager-Bestand) */
.stock-table .num { text-align: right; white-space: nowrap; }
.stock-table td .sub, .stock-journal .sub { display: block; font-size: 12px; color: var(--text-2); }
.stock-table td .name .c-num { color: var(--text-2); margin-right: 6px; }
.stock-table tbody tr { cursor: pointer; }
.stock-table tbody tr.selected { background: var(--nav-active); }
.stock-table .unit { color: var(--text-2); font-size: 12px; }
.stock-table .chip { margin-left: 6px; }
.stock-table .neg, .kpi-grid .neg { color: var(--error-fg); }
.stock-table .warn, .kpi-grid .warn { color: var(--warning-fg); }
.stock-hint { margin-bottom: var(--space-3); }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); }
.kpi-grid div { background: var(--surface-1); border-radius: 6px; padding: var(--space-2); }
.kpi-grid dt { font-size: 12px; color: var(--text-2); }
.kpi-grid dd { margin: 0; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stock-journal { list-style: none; margin: 0; padding: 0; }
.stock-journal li { display: grid; grid-template-columns: 1fr auto; padding: 6px 0; border-bottom: 1px solid var(--surface-2); }
.stock-journal li .sub { grid-column: 1 / -1; }
.stock-journal .neg { color: var(--warning-fg); } .stock-journal .pos { color: var(--success-fg); }
.stock-limits { margin-bottom: var(--space-4); }

/* Einstellungen › Kunden- und Rabattgruppen */
.group-card { margin-bottom: var(--space-4); }
.group-table { margin-bottom: var(--space-3); }
.group-table td input:not([type=checkbox]), .group-table td select { width: 100%; }
.group-table td input.w-code { width: 90px; }
.group-table td.num input { width: 90px; text-align: right; }
.matrix-table td.num input { width: 80px; text-align: right; }
.matrix-table td.inherited input { color: var(--text-3); }

/* Beleg › Preisfreigabe */
.approval-banner { align-items: flex-start; }
.approval-banner .text { display: block; flex: 1; }
.approval-list { margin: 6px 0 0; padding-left: 18px; }
.approval-request { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.approval-request input { flex: 1; min-width: 0; }

/* Eingangsrechnung › 3-Wege-Abgleich (Design ERechnung-Eingang) */
.match-card { margin-bottom: var(--space-4); }
.match-card .card-title-row .spacer { flex: 1; }
.match-nodes { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: var(--space-2); align-items: stretch; margin: var(--space-3) 0; }
.match-node { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: 6px; color: inherit; text-decoration: none; min-width: 0; }
.match-node.warn { border-color: var(--warning-fg); background: var(--warning-bg); }
.match-node.warn strong { color: var(--warning-fg); }
.match-arrow { align-self: center; color: var(--text-3); }
.match-alert { align-items: flex-start; }
.match-alert .text { display: block; flex: 1; }
@media (max-width: 900px) { .match-nodes { grid-template-columns: 1fr; } .match-arrow { display: none; } }

/* Finanzen › Offene Posten (Design OP-Liste) */
.aging { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); margin: var(--space-3) 0; }
.aging > div { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: 6px; font-variant-numeric: tabular-nums; }
.aging > div.warn strong { color: var(--warning-fg); }
.aging > div.err strong { color: var(--error-fg); }
.op-table .num { text-align: right; white-space: nowrap; }
.op-table tr.op-group td { background: var(--surface-1); font-weight: 600; }
.op-table tr.op-group .sub { display: inline; margin-left: var(--space-2); font-weight: 400; font-size: 12px; }
.op-table .sub { display: block; font-size: 12px; color: var(--text-2); }
.op-table td.warn, .op-table .sub.warn { color: var(--warning-fg); }
.op-table td.err { color: var(--error-fg); font-weight: 600; }
.op-table td.ok { color: var(--success-fg); }
.op-table tbody tr:not(.op-group) { cursor: pointer; }
.op-table tbody tr.selected { background: var(--nav-active); }
@media (max-width: 900px) { .aging { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Finanzen › Reiter, Mahnlauf */
.finance-tabs { margin-bottom: var(--space-3); }
.title-row .inline-field { display: flex; flex-direction: row; align-items: center; gap: var(--space-2); margin: 0 0 0 var(--space-4); }
.title-row .inline-field label { margin: 0; }
.dunning-table td .sub { display: block; }
.skipped { margin-top: var(--space-3); font-size: 13px; }
.skipped summary { cursor: pointer; color: var(--text-2); }
.dunning-settings summary { cursor: pointer; list-style: none; }
.dunning-settings .group-table td.num input { width: 80px; }

/* ---------- Finanzen › Bank (Design Bank-Abgleich: Liste 440 px links, Detail rechts) ---------- */
.bank-page:focus { outline: none; }
.bank-account-name { font-weight: 600; }
.bank-account-select { height: 32px; }
.bank-balance { color: var(--text-1); font-variant-numeric: tabular-nums; }
.bank-status { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); }
.bank-statement-bar { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-3) 0; flex-wrap: wrap; }
.bank-statement-bar .spacer { flex: 1; }
.statement-button { display: grid; grid-template-columns: auto auto; column-gap: var(--space-2); align-items: center; text-align: left; padding: 6px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-button); background: var(--bg); color: inherit; font: inherit; cursor: pointer; }
.statement-button:hover { border-color: var(--border-strong); }
.statement-button span { grid-column: 1; }
.statement-button svg { grid-row: 1 / span 2; grid-column: 2; }
.statement-list { list-style: none; margin: 0 0 var(--space-3); padding: var(--space-1) 0; border: 1px solid var(--border); border-radius: var(--radius-card); max-width: 520px; }
.statement-list button { width: 100%; text-align: left; padding: 6px 12px; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; }
.statement-list button:hover, .statement-list button[aria-current="true"] { background: var(--surface-1); }
.bank-layout { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.bank-list { border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.bank-filter { margin: var(--space-2); }
.bank-group { font-size: 12px; font-weight: 600; color: var(--text-2); padding: 8px 12px 4px; border-top: 1px solid var(--surface-2); background: var(--surface-1); }
.bank-row { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; padding: 8px 12px; border: 0; border-top: 1px solid var(--surface-2);
  background: var(--bg); color: inherit; font: inherit; cursor: pointer; }
.bank-row:hover { background: var(--surface-1); }
.bank-row.selected { background: var(--nav-active); box-shadow: inset 2px 0 0 var(--accent-text); }
.bank-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bank-row-text .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bank-row-top { display: flex; gap: var(--space-2); justify-content: space-between; }
.bank-row-top strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bank-page .amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bank-page .neg { color: var(--text-1); }
.state-dot { width: 12px; height: 12px; margin-top: 4px; flex-shrink: 0; border-radius: 6px; box-sizing: border-box; border: 1.5px solid var(--text-3); }
.state-dot.matched { background: var(--success-fg); border-color: var(--success-fg); }
.state-dot.review { border-color: var(--warning-fg); background: linear-gradient(90deg, var(--warning-fg) 50%, transparent 50%); }
.state-dot.unclear { border-color: var(--text-3); }
.state-dot.ignored { border-color: var(--text-3); background: linear-gradient(135deg, transparent 45%, var(--text-3) 45%, var(--text-3) 55%, transparent 55%); }
.bank-none { padding: var(--space-3); margin: 0; }
.bank-detail { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.bank-detail-head { display: flex; align-items: flex-start; gap: var(--space-2); }
.bank-detail-head > div { flex: 1; min-width: 0; }
.bank-detail-head h2 { margin: 0; font-size: 18px; line-height: 26px; }
.bank-detail-head p { margin: 2px 0 0; }
.bank-detail .card .sub-title { margin: 0 0 var(--space-2); }
.candidate { display: flex; gap: var(--space-2); align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--surface-2); cursor: pointer; }
.candidate:first-of-type { border-top: 0; }
.candidate input { margin-top: 3px; }
.candidate-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.candidate kbd { font: inherit; font-size: 11px; padding: 0 5px; border: 1px solid var(--border); border-radius: var(--radius-chip); background: var(--surface-1); color: var(--text-2); margin-right: 4px; }
.signals { display: flex; gap: 6px; flex-wrap: wrap; }
.signal { font-size: 12px; line-height: 20px; padding: 0 6px; border-radius: var(--radius-chip); background: var(--neutral-bg); color: var(--text-2); }
.signal.ok { background: var(--success-bg); color: var(--success-fg); }
.candidate-tools { display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }
.candidate-search { display: flex; flex-direction: column; gap: 4px; margin-top: var(--space-2); }
.candidate-search input[type="search"] { height: 32px; }
.radio-line { display: flex; gap: var(--space-2); align-items: flex-start; padding: 4px 0; cursor: pointer; }
.radio-line input { margin-top: 3px; }
.bank-note { color: var(--success-fg); margin: 0; }
.bank-data dl { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 4px var(--space-3); margin: 0 0 var(--space-2); font-size: 13px; }
.bank-data dt { color: var(--text-2); }
.bank-data dd { margin: 0; overflow-wrap: anywhere; }
.bank-footer { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); padding-top: 10px; border-top: 1px solid var(--border); }
.bank-footer strong { color: var(--text-1); }
.bank-footer kbd { font: inherit; font-size: 11px; padding: 0 5px; border: 1px solid var(--border); border-radius: var(--radius-chip); background: var(--surface-1); }
.bank-empty { }
.bank-empty h2 { font-size: 18px; margin: var(--space-4) 0 var(--space-2); }
.bank-empty > p { color: var(--text-2); max-width: 720px; }
.bank-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; }
.bank-ways .card { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.way-head { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.bank-hints { padding-left: 18px; }
.bank-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--space-5); border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-card); text-align: center; cursor: pointer; }
.bank-drop:hover { background: var(--surface-1); }
.bank-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.import-file { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-button); }
.import-file span:first-of-type { flex: 1; }
@media (max-width: 1023px) {
  .bank-layout { grid-template-columns: 1fr; }
  .bank-ways { grid-template-columns: 1fr; }
  .bank-data dl { grid-template-columns: 1fr; }
}
.bank-filter { flex-wrap: nowrap; }
.bank-filter button { padding: 0 8px; white-space: nowrap; }
.bank-settings-card { margin-bottom: var(--space-4); }
.bank-settings-card .title-row h2 { font-size: 16px; margin: 0; }
.rule-table tr.selected td { background: var(--surface-1); }
.rule-actions { white-space: nowrap; text-align: right; width: 1%; }
.rule-actions .btn { display: inline-flex; vertical-align: middle; }
.rule-editor { margin-top: var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-1); }

/* ---------- Einkauf › Rückstand (Design Einkauf-Rueckstand) ---------- */
.backlog-summary { margin: var(--space-3) 0 2px; }
.warn-text { color: var(--warning-fg); font-weight: 600; }
.selection-bar { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: 8px 12px; margin-bottom: var(--space-2);
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-button); }
.selection-bar .spacer { flex: 1; }
.check-col { width: 32px; }
.backlog-table td { vertical-align: top; }
.backlog-table tr.selected td { background: var(--surface-1); }
.backlog-table .count, .segment .count { color: var(--text-3); font-weight: 400; margin-left: 2px; }
.backlog-footer { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-3); padding-top: 10px; border-top: 1px solid var(--border); }
.backlog-footer strong { color: var(--text-1); }
.confirmation-panel { width: min(820px, 100vw); z-index: 41; }
.confirmation-lines input { width: 100%; min-width: 0; box-sizing: border-box; }
.confirmation-lines td { vertical-align: middle; }
.confirmation-lines .deviates input { border-color: var(--warning-fg); background: var(--warning-bg); }
.confirmation-deviations ul { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.confirmation-deviations li span { color: var(--warning-fg); }
.backlog-table .group-row td { background: var(--surface-1); font-size: 12px; font-weight: 600; color: var(--text-2); padding-top: 6px; padding-bottom: 6px; }
.readiness { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.readiness .dot { width: 10px; height: 10px; border-radius: 5px; box-sizing: border-box; border: 1.5px solid currentColor; }
.readiness.ok { color: var(--success-fg); }
.readiness.ok .dot { background: currentColor; }
.readiness.partial { color: var(--warning-fg); }
.readiness.partial .dot { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.readiness.none { color: var(--text-2); }
.readiness.none .dot { background: linear-gradient(135deg, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%); }
.billing-table tr.bound td { color: var(--text-3); }
.billing-table .group-row .chip { margin-right: 4px; }
.billing-dialog { margin-bottom: var(--space-3); }

/* Wiederkehrende Rechnung */
.recurring-card { margin-bottom: var(--space-3); }
.recurring-upcoming { margin-top: var(--space-3); }
.recurring-upcoming table { margin-top: var(--space-2); }
.recurring-upcoming tr.due td { background: var(--warning-bg); }

/* Adresse › Bank */
.bank-account { border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-3) var(--space-4); margin-top: var(--space-3); }
.bank-account.unverified { border-color: var(--warning-fg); }
.bank-account.retired { opacity: .6; }
.bank-account-head { display: flex; align-items: flex-start; gap: var(--space-3); }
.bank-account .iban, .bank-compare .iban { font-variant-numeric: tabular-nums; letter-spacing: .3px; font-size: 15px; }
.bank-account-facts { display: grid; grid-template-columns: 200px 1fr; gap: 4px var(--space-3); margin: var(--space-3) 0 var(--space-2); font-size: 13px; }
.bank-account-facts dt { color: var(--text-3); }
.bank-account-facts dd { margin: 0; }
.bank-account .banner { margin: var(--space-2) 0 0; }
.bank-compare { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); }
.bank-compare > div { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-card); }
.bank-compare > div.new { border-color: var(--warning-fg); }
.radio-list { display: flex; flex-direction: column; gap: var(--space-2); }
.radio-list select { margin-left: 24px; max-width: 320px; }
.radio-list .small { margin-left: 24px; }
.check-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
@media (max-width: 640px) { .bank-account-facts { grid-template-columns: 1fr; } }

/* Finanzen › Zahlungen */
.payment-runs tr.clickable { cursor: pointer; }
.avatar-chip { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2);
    font-size: 11px; font-weight: 600; margin-right: 2px; }
.payment-create { margin-bottom: var(--space-3); }
.stepper { display: flex; gap: var(--space-2); list-style: none; padding: 0; margin: var(--space-3) 0; flex-wrap: wrap; }
.stepper li { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--surface-1); color: var(--text-2); font-size: 13px; }
.stepper .step-no { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center; background: var(--surface-2); font-size: 12px; font-weight: 600; }
.stepper li.current { background: var(--nav-active); color: var(--text-1); font-weight: 600; }
.stepper li.current .step-no { background: var(--text-1); color: var(--bg); }
.stepper li.done .step-no { background: var(--success-bg); color: var(--success-fg); }
.param-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); padding: var(--space-3) var(--space-4); border: 1px solid var(--border);
    border-radius: var(--radius-card); margin-bottom: var(--space-3); }
.param-row > div { display: flex; flex-direction: column; gap: 2px; }
.check-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.payment-items td.iban { white-space: nowrap; font-variant-numeric: tabular-nums; }
.payment-items td.iban .ok { color: var(--success-fg); } .payment-items td.iban .warn { color: var(--warning-fg); }
.payment-items td.remittance input { width: 100%; min-width: 200px; }
.payment-items .hint-line { display: block; font-size: 12px; color: var(--warning-fg); }
.payment-items tr.sub-row td { background: var(--surface-1); font-size: 12px; }
.payment-items .expander { font-size: 12px; }
.payments-card .excluded { margin-top: var(--space-3); }
.payments-card .excluded summary { cursor: pointer; font-weight: 600; padding: var(--space-2) 0; }
.payments-card .negative { color: var(--error-fg); }
.file-card .upload-steps { margin: var(--space-2) 0; padding-left: 20px; }
.approval-dialog { padding: var(--space-4) var(--space-5); overflow: auto; }
.approval-dialog h2 { margin: 0; font-size: 18px; }
.approval-dialog .kpis { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin: var(--space-3) 0; }
.approval-dialog .kpis > div { display: flex; flex-direction: column; }
.approval-dialog .kpis strong { font-size: 18px; }
.approval-dialog .checksum code { font-size: 12px; background: var(--surface-1); padding: 1px 4px; border-radius: 4px; }
.approval-dialog .row-actions, .modal .row-actions { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-3); }
.approval-dialog .row-actions .spacer { flex: 1; }
.banner-neutral { background: var(--surface-1); color: var(--text-2); }
.weekday-row { margin-bottom: var(--space-3); }
.rule-list { margin: 0 0 var(--space-3); padding-left: 20px; }
.payment-items td .sub { display: block; }

/* Aufgaben */
.task-table td.subject { cursor: pointer; }
.task-table td.subject .title { font-weight: 500; }
.task-table td.subject .chip.sm { margin-left: 6px; height: 18px; font-size: 11px; }
.task-table td .sub { display: block; }
.task-table tr.done td { color: var(--text-3); }
.task-table tr.done .title { text-decoration: line-through; }
.task-table td.overdue, .record-task-list .sub.overdue { color: var(--warning-fg); font-weight: 600; }
.task-table .row-actions { white-space: nowrap; opacity: .0; }
.task-table tr:hover .row-actions, .task-table tr:focus-within .row-actions { opacity: 1; }
.task-check { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border-strong, var(--border)); background: var(--bg); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: var(--text-2); padding: 0; }
.task-check:hover { border-color: var(--success-fg); color: var(--success-fg); }
.task-check.checked { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-fg); }
.progress { display: inline-block; width: 40px; height: 4px; background: var(--surface-2); border-radius: 2px; vertical-align: middle; margin-right: 4px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--text-2); }
.segment button.warn .count { color: var(--warning-fg); font-weight: 600; }
.task-panel { width: min(640px, 100vw); }
.task-panel .drawer-head .chip { flex: none; }
.task-panel .task-meta { margin: 0 0 var(--space-3); }
.task-panel .task-link { display: flex; gap: var(--space-2); align-items: center; min-height: 32px; }
/* Bezüge der Aufgabe (FE-869): ★ Hauptbezug und ☆ weitere Bezüge als Chips wie die Teilnehmer im Termin-Panel. */
.task-panel .task-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: var(--space-2); }
.task-panel .task-link-chip { gap: 4px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.task-panel .task-link-main { font-weight: 600; }
.task-panel .task-link-add .field > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.task-panel .task-link-add .lookup { width: 100%; }
.task-checklist { margin-top: var(--space-4); border-top: 1px solid var(--border); padding-top: var(--space-3); }
.task-checklist h3 { margin: 0; font-size: 14px; }
.task-checklist ul { list-style: none; margin: var(--space-2) 0; padding: 0; }
.task-checklist li { display: flex; align-items: center; gap: var(--space-2); padding: 2px 0; }
.task-checklist li .item-text { flex: 1; border: 0; background: transparent; padding: 4px; }
.task-checklist li.done .item-text { text-decoration: line-through; color: var(--text-3); }
.task-checklist .new-item, .record-tasks .quick-add { width: 100%; }
.inline-ask { display: inline-flex; gap: var(--space-2); align-items: center; }
.menu-up { bottom: 40px; top: auto !important; }
.record-tasks .quick-add { margin: var(--space-2) 0; }
.record-task-list { list-style: none; margin: 0; padding: 0; }
.record-task-list li { display: flex; align-items: flex-start; gap: var(--space-2); padding: 6px 0; border-bottom: 1px solid var(--border); }
.record-task-list .task-open { flex: 1; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; }
.record-task-list .task-open .sub { font-size: 12px; color: var(--text-3); }
.record-task-list li.done .title { text-decoration: line-through; color: var(--text-3); }
.record-task-done summary { cursor: pointer; font-size: 13px; padding: var(--space-2) 0; }
.modal-scrim + .drawer { z-index: 41; }
.task-panel .segment { display: flex; width: 100%; flex-wrap: nowrap; }
.task-panel .segment button { flex: 1 1 0; min-width: 0; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Kalender › Termine (Farben nur aus tokens.css; --cat-* fehlen noch – Buchstabe trägt die Art) */
.calendar-toolbar, .calendar-filter { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-2) 0; }
.calendar-toolbar .spacer, .calendar-filter .spacer { flex: 1; }
.calendar-filter .chip { gap: 4px; }
.legend { display: inline-flex; gap: var(--space-3); flex-wrap: wrap; color: var(--text-2); }
.kind-letter { display: inline-flex; width: 16px; height: 16px; border-radius: 50%; align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
    color: var(--bg); background: var(--text-2); flex: none; }
.kind-letter.kind-customer { background: var(--info-fg); }
.kind-letter.kind-assignment { background: var(--success-fg); }
.kind-letter.kind-service { background: var(--warning-fg); }
.kind-letter.kind-internal { background: var(--text-2); }
.kind-letter.kind-private { background: var(--text-3); }
.task-box { font-size: 12px; }
.cal-grid { display: grid; border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
/* FE-500 ②: Am Handy bekommt jede Tagesspalte mindestens 96 px (statt ~58 px); die Woche scrollt dann waagrecht. Die Spaltenzahl kommt aus --cols. */
@media (max-width: 767px) { .cal-grid.raster-grid { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; grid-template-columns: 40px repeat(var(--cols, 1), minmax(96px, 1fr)) !important; } }
.cal-corner, .cal-dayhead { border-bottom: 1px solid var(--border); background: var(--surface-1); }
.cal-dayhead { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2); height: 40px; border-left: 1px solid var(--border); }
.cal-dayhead .muted { margin-left: auto; }
.cal-dayhead.today { background: var(--surface-2); }
.today-chip { background: var(--text-1); color: var(--bg); height: 18px; font-size: 11px; }
.cal-allday-label { display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border); }
.cal-allday { min-height: 30px; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 3px; display: flex; flex-direction: column; gap: 2px; }
.allday-entry, .task-chip { display: flex; align-items: center; gap: 4px; font-size: 12px; text-align: left; border: 1px solid var(--border); background: var(--bg);
    border-radius: 4px; padding: 1px 6px; cursor: pointer; color: var(--text-1); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-chip { background: var(--surface-1); }
.task-chip.overdue { background: var(--warning-bg); border-color: var(--warning-fg); }
.task-chip.done { text-decoration: line-through; color: var(--text-3); }
.cal-hours { display: flex; flex-direction: column; }
.cal-hour { height: var(--hour); text-align: right; padding-right: 6px; transform: translateY(-7px); }
.cal-day { position: relative; border-left: 1px solid var(--border); cursor: cell; }
.cal-day.today { background: var(--surface-1); }
.cal-slot { height: var(--hour); border-top: 1px solid var(--surface-2); box-sizing: border-box; }
.cal-slot.off { background: var(--surface-1); }
.cal-shadow { position: absolute; left: 2px; right: 2px; z-index: 3; pointer-events: none; box-sizing: border-box; border: 2px dashed var(--border-strong); border-radius: 4px;
    background: color-mix(in srgb, var(--border-strong) 25%, transparent); font-size: 12px; line-height: 16px; font-weight: 600; padding: 2px 6px; color: var(--text-1); overflow: hidden; }
.cal-shadow.conflict { border-color: var(--warning-fg); background: color-mix(in srgb, var(--warning-fg) 22%, transparent); }
.cal-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--text-1); z-index: 2; }
.cal-now::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--text-1); }
.cal-entry { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; overflow: hidden; text-align: left; cursor: pointer;
    font-size: 12px; line-height: 16px; padding: 2px 4px 2px 7px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg); color: var(--text-1);
    box-shadow: inset 3px 0 0 var(--text-2); }
.cal-entry.kind-customer { box-shadow: inset 3px 0 0 var(--info-fg); }
.cal-entry.kind-assignment { box-shadow: inset 3px 0 0 var(--success-fg); }
.cal-entry.kind-service { box-shadow: inset 3px 0 0 var(--warning-fg); }
.cal-entry.kind-internal { background: var(--surface-2); }
.cal-entry.kind-private, .cal-entry.hidden { background: var(--surface-1); border-style: dotted; cursor: default; }
.cal-entry.cancelled { text-decoration: line-through; color: var(--text-3); }
.cal-entry.conflict { border-color: var(--warning-fg); }
.cal-entry .line1 { display: flex; align-items: center; gap: 4px; font-weight: 600; white-space: nowrap; max-width: 100%; min-width: 0; }
.cal-entry .addr, .cal-entry .subj, .cal-entry .loc, .cal-entry .who, .cal-entry .time { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; flex: none; }
.cal-entry .loc, .cal-entry .who, .cal-entry .time { color: var(--text-2); }
.cal-entry .warn { color: var(--warning-fg); }
.month-grid { display: grid; border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.month-head { padding: 6px; font-size: 12px; font-weight: 600; background: var(--surface-1); border-bottom: 1px solid var(--border); }
.month-kw { font-size: 11px; color: var(--text-3); border-bottom: 1px solid var(--border); }
.month-cell { min-width: 0; overflow: hidden; min-height: 110px; padding: 4px; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.month-cell.other { color: var(--text-3); background: var(--surface-1); }
.month-cell.today { background: var(--surface-1); }
.month-cell .day-no { font-weight: 600; align-self: flex-start; }
.month-entry { display: flex; gap: 4px; align-items: center; font-size: 12px; border: 0; background: none; padding: 0; text-align: left; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-1); }
.month-entry.cancelled { text-decoration: line-through; color: var(--text-3); }
.appointment-panel { width: min(640px, 100vw); }
.kind-segment { flex-wrap: wrap; }
.kind-segment button { display: inline-flex; align-items: center; gap: 4px; }
.appointment-panel .participants { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.appointment-panel .participant { gap: 4px; }
/* Bezüge (FE-869): lange Texte brechen um, statt über den Panelrand zu laufen (375 px). */
.appointment-panel .reference { max-width: 100%; white-space: normal; }
.appointment-panel .reference > span, .appointment-panel .reference > a { min-width: 0; overflow-wrap: anywhere; }
.appointment-panel .reference .star, .appointment-panel .reference > .muted { color: var(--text-2); flex: none; }
.appointment-panel .duration { margin: 0; }
.appointment-panel .segment + input { margin-top: 6px; width: 100%; }
.task-link .link-button { margin-left: 8px; }
.inline-row { display: flex; flex-direction: row; align-items: center; gap: var(--space-4); }
.cal-entry .subj-inline { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-entry .mark { flex: none; }
/* Termin-Karte nach Platz (FE-019): Höhe entscheidet CalendarCardLayout, die Breite diese Container-Abfrage – schmale Karten (parallele Termine) nur Titel. */
.cal-entry { container: calcard / size; }
.cal-entry.one-line { padding-top: 0; padding-bottom: 0; justify-content: center; }
@container calcard (max-width: 80px) {
  .cal-entry .more { display: none; }
  /* FE-388: nur am Wortende umbrechen – auch ein einzelnes Wort, das breiter als die Karte ist („Wochenbesprechung“), wird nicht zerteilt, sondern mit
     „…“ gekürzt (ganzer Titel im Tooltip) – und auf ganze Zeilen kürzen. */
  .cal-entry .line1, .cal-entry .subj-inline { white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: manual; }
  .cal-entry .subj-inline { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }
  .cal-entry .line1 { align-items: flex-start; }
}
/* Niedrige schmale Karten (unter 2 Zeilen Platz, z. B. 30 Minuten): nur eine ganze Zeile statt einer halb sichtbaren zweiten. */
@container calcard (max-width: 80px) and (max-height: 35px) {
  .cal-entry .subj-inline { -webkit-line-clamp: 1; line-clamp: 1; }
}
/* Kategorien für Termine und Aufgaben (FE-020, Masken-Spez. 10.0.3/10.20.5): Farbe nur als Hilfe – immer mit Name bzw. Buchstabe der Terminart.
   Die Kennfarben --cat-* stehen in tokens.css (Hell und Dunkel); nie Markenrot, Fehlerfarbe oder KI-Violett. */
.cat-grey { --cat: var(--cat-grey); }
.cat-slate { --cat: var(--cat-slate); }
.cat-blue { --cat: var(--cat-blue); }
.cat-teal { --cat: var(--cat-teal); }
.cat-green { --cat: var(--cat-green); }
.cat-ochre { --cat: var(--cat-ochre); }
.cat-brown { --cat: var(--cat-brown); }
.cat-plum { --cat: var(--cat-plum); }
.cat-square { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--cat, transparent); border: 1px solid var(--cat, var(--border-strong)); }
.category-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.category-chip { gap: 4px; }
.category-picker .category-chip .link-button { padding: 0 2px; }
.cal-entry.has-cat { box-shadow: inset 4px 0 0 var(--cat); background: color-mix(in srgb, var(--cat) 10%, var(--bg)); }
.allday-entry.has-cat, .month-entry.has-cat { box-shadow: inset 3px 0 0 var(--cat); padding-left: 6px; }
.allday-entry.has-cat { background: color-mix(in srgb, var(--cat) 10%, var(--bg)); }
.category-filter select { max-width: 180px; }
.category-colors { flex-wrap: wrap; }
.category-colors button { display: inline-flex; align-items: center; gap: 4px; }
.month-cell .today-chip, .cal-dayhead .today-chip { align-self: flex-start; }

/* ---------- Zusatzfelder (Einstellungen › Anpassen, Karte in Masken) ---------- */
.cf-tabs { margin-top: var(--space-3); border-bottom: 1px solid var(--border); }
.cf-tabs .count { color: var(--text-3); font-weight: 400; margin-left: 2px; }
.drawer.drawer-wide { width: min(860px, 100vw); }
.drawer-head > div { flex: 1; min-width: 0; }
/* Panel ab 640 px: einzeilige Felder (Eingabe, Auswahl) in zwei Spalten; Memo-Felder, Suchfelder und Felder mit eigener Breite (w1–w4) bleiben (FE-048). */
.drawer[data-columns="2"] .fields > .field:not(.w1):not(.w2):not(.w3):not(.w4):has(> input:not([type="checkbox"]):not([type="radio"])),
.drawer[data-columns="2"] .fields > .field:not(.w1):not(.w2):not(.w3):not(.w4):has(> select) { grid-column: span 3; }
.panel-grip { position: fixed; z-index: 60; width: 7px; cursor: ew-resize; touch-action: none; background: transparent; }
.panel-grip:hover, .panel-grip.dragging, .panel-grip:focus-visible { background: var(--border-strong); }
.drawer-head > div p { margin: 2px 0 0; }
.cf-section { border-top: 1px solid var(--border); padding: var(--space-4) 0; }
.cf-section:first-child { border-top: 0; padding-top: 0; }
.cf-section h3 { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; font-weight: 600; margin: 0 0 var(--space-3); }
.cf-step { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 600; }
.cf-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.cf-type-group { display: flex; flex-direction: column; gap: var(--space-1); }
.cf-type { height: 32px; text-align: left; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-button); background: var(--bg); cursor: pointer; }
.cf-type:hover:not(:disabled) { background: var(--surface-1); }
.cf-type.selected { border-color: var(--text-1); box-shadow: inset 0 0 0 1px var(--text-1); font-weight: 600; }
.cf-type:disabled:not(.selected) { color: var(--text-3); cursor: default; }
.cf-values { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.cf-values-table { width: 100%; }
.cf-values-table td { height: 40px; }
.cf-values-table tbody tr { cursor: default; }
.cf-values-table input:not([type="checkbox"]) { width: 100%; }
.cf-switches { display: flex; flex-direction: column; gap: var(--space-2); }
.cf-confirm { margin-top: var(--space-4); padding: var(--space-4); border: 1px solid var(--warning-fg); border-radius: var(--radius-card); background: var(--warning-bg); }
.cf-confirm h3 { margin: 0 0 var(--space-2); font-size: 14px; }
@media (max-width: 760px) { .cf-types { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Einsatzplanung (Kalender › Einsatzplanung) ---------- */
.dispatch-layout { display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.dispatch-bar { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg); position: sticky; top: var(--space-2);
  max-height: calc(100vh - 220px); overflow: auto; }
.dispatch-section { padding: var(--space-3); border-top: 1px solid var(--border); }
.dispatch-section:first-child { border-top: 0; }
.dispatch-section header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); flex-wrap: wrap; }
.dispatch-section h2 { font-size: 12px; letter-spacing: .02em; color: var(--text-2); margin: 0; }
.dispatch-section .count { color: var(--text-3); font-size: 12px; }
.dispatch-section header .check { margin-left: auto; }
.bar-search { width: 100%; height: 30px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-chip); margin-bottom: var(--space-2); }
.dispatch-orders, .dispatch-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.order-card { border: 1px solid var(--border); border-radius: var(--radius-button); padding: var(--space-2); background: var(--bg); cursor: grab; font-size: 13px; }
.order-card:hover { border-color: var(--border-strong); background: var(--surface-1); }
.order-card.dragging, .person-row.dragging { opacity: .5; }
.order-card .line1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-card .line1 .kind-letter { vertical-align: -3px; }
.order-card .line3 { display: flex; align-items: center; gap: var(--space-2); margin-top: 2px; }
.order-card .line3 .spacer { flex: 1; }
.order-card .plan-btn { margin-top: 4px; padding: 0 6px; }
.warn-text { color: var(--warning-fg); font-weight: 600; }
.person-row { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; padding: 2px 4px; border-radius: var(--radius-chip); cursor: grab; }
.person-row:hover { background: var(--surface-1); }
.person-row .grip { color: var(--text-3); font-size: 10px; letter-spacing: -2px; }
.person-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avail { font-size: 12px; white-space: nowrap; }
.avail-free { color: var(--success-fg); }
.avail-partly { color: var(--text-2); }
.avail-busy { color: var(--text-1); }
.avail-dots { display: inline-flex; gap: 3px; font-size: 12px; }
.dispatch-board { min-width: 0; }
.dispatch-dayline { display: flex; align-items: baseline; gap: var(--space-2); margin: 0 0 var(--space-2); }
.dispatch-empty { margin-bottom: var(--space-3); }
.dispatch-grid .cal-day.drop-ready .cal-slot:hover { background: var(--surface-2); }
.dispatch-grid .cal-slot { cursor: copy; }
.dispatch-card { position: absolute; box-sizing: border-box; border: 1px solid var(--border-strong); border-left: 3px solid var(--success-fg); border-radius: var(--radius-button);
  background: var(--bg); padding: 4px 6px; font-size: 12px; overflow: hidden; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 2px; }
.dispatch-card:focus-visible { outline: 2px solid var(--accent-text); }
.dispatch-card.unassigned { border-style: dashed; border-color: var(--warning-fg); border-left-width: 1px; background: var(--warning-bg); }
.dispatch-card.drop-target { box-shadow: 0 0 0 2px var(--text-1); }
.dispatch-card.has-hint { border-left-color: var(--warning-fg); }
.dispatch-card .line1 { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.dispatch-card .line1 .warn { margin-left: auto; color: var(--warning-fg); }
.dispatch-card .cust { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dispatch-card .line1 .cust-inline { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dispatch-card .line1 strong { flex: none; }
.dispatch-card.one-line { padding-top: 0; padding-bottom: 0; justify-content: center; }
.dispatch-card .act { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dispatch-card .people { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.dispatch-card.compact { padding: 3px 4px; }
.dispatch-card.picker-open { overflow: visible; z-index: 6; }
.dispatch-grid .cal-dayhead { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; height: 46px; overflow: hidden; white-space: nowrap; }
.dispatch-grid .cal-dayhead .muted { margin-left: 0; }
.dispatch-grid .cal-dayhead .day-title { display: flex; align-items: center; gap: 6px; }
.dispatch-grid .cal-dayhead .today-chip { align-self: center; }
.person-chip { display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 6px; border: 1px solid var(--border-strong); border-radius: 10px;
  font-size: 11px; font-weight: 600; background: var(--bg); }
.person-chip.lead span[aria-hidden] { font-size: 8px; }
.person-chip .link-button { font-size: 12px; padding: 0 0 0 2px; }
.person-add { height: 20px; width: 20px; border: 1px dashed var(--border-strong); border-radius: 10px; background: transparent; cursor: pointer; font-size: 12px; line-height: 1; }
/* FE-792 ②: Am Handy ist der „+“ zum Zuteilen so groß wie jede Zielfläche (44 px). Die Chips bleiben bewusst schmal (Ausnahme bei den Textknöpfen unten). */
@media (max-width: 767px) { .person-add { height: var(--touch-target); width: var(--touch-target); border-radius: 50%; font-size: 18px; } }
.person-picker { position: absolute; z-index: 5; left: 8px; top: 40px; width: 280px; background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-card);
  box-shadow: var(--shadow-overlay, 0 8px 24px rgba(0,0,0,.18)); padding: var(--space-2); cursor: default; }
.person-picker input { width: 100%; height: 28px; margin: 4px 0; }
.person-picker ul { list-style: none; margin: 0; padding: 0; max-height: 200px; overflow: auto; }
.person-picker li button { width: 100%; display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px; cursor: pointer; text-align: left; font-size: 12px; }
.person-picker li button:hover { background: var(--surface-1); }
/* FE-481 ②: Kopf mit „Schließen“, Abschnitt Fahrzeug; durchsichtige Fläche darunter schließt das Fenster beim Klick daneben. */
.person-picker .picker-head { display: flex; align-items: center; gap: 4px; }
.person-picker .picker-head .btn { margin-left: auto; }
.person-picker .picker-sub { margin-top: 6px; }
.person-picker:focus { outline: none; }
/* FE-562 ①: in den letzten zwei Tagesspalten am rechten Kartenrand ausrichten, damit das Fenster nicht über den Bildrand ragt. */
.person-picker.picker-right { left: auto; right: 8px; max-width: calc(100vw - 32px); }
.picker-scrim { position: fixed; inset: 0; z-index: 5; background: transparent; }
/* Einsatzplanung › Monat (FE-492): Kachel je Tag, Klick öffnet den Tag, Zeilen öffnen den Einsatz; Ziehen auf die Kachel plant ein bzw. verschiebt. */
.dispatch-month .month-cell { cursor: pointer; min-width: 0; }
.dispatch-month .month-cell.drop-ready:hover, .dispatch-month .month-cell.drop-target { background: var(--surface-2); }
.dispatch-month .day-line { display: flex; align-items: center; gap: 4px; min-height: 20px; }
.dispatch-month .day-line .warn { color: var(--warning-fg); }
.dispatch-month .day-line .day-hours { margin-left: auto; }
.dispatch-month .dispatch-entry { width: 100%; min-width: 0; display: block; padding: 1px 2px; border-radius: 3px; box-shadow: inset 2px 0 0 var(--success-fg); padding-left: 5px; }
.dispatch-month .dispatch-entry .kind-letter { margin-right: 2px; }
.dispatch-month .dispatch-entry.unassigned { box-shadow: inset 2px 0 0 var(--warning-fg); }
.dispatch-month .dispatch-entry .warn { color: var(--warning-fg); }
.dispatch-month .dispatch-entry:hover, .dispatch-month .dispatch-entry.drop-target { background: var(--surface-1); }
.dispatch-foot { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-2) 0; }
.dispatch-hints { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 35; width: min(420px, calc(100vw - 32px)); background: var(--bg);
  border: 1px solid var(--warning-fg); border-radius: var(--radius-card); padding: var(--space-3) var(--space-4); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.dispatch-hints h3 { margin: 0 0 var(--space-2); font-size: 14px; }
.dispatch-hints ul { margin: 0 0 var(--space-3); padding-left: 18px; font-size: 13px; }
.plan-people { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: auto; }
.plan-people .check { display: flex; align-items: center; gap: 6px; }
.detail-people { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: var(--space-3); }
.detail-people .person-chip { height: 26px; font-size: 13px; padding: 0 8px; }
@media (max-width: 1100px) { .dispatch-layout { grid-template-columns: minmax(0, 1fr); } .dispatch-bar { position: static; max-height: none; } }
.vehicle-row .veh-icon { width: 16px; text-align: center; color: var(--text-2); }
.vehicle-row.unavailable { opacity: .7; cursor: not-allowed; }
.vehicle-chip { font-weight: 600; background: var(--surface-1); }
.worker-chip { border-style: dashed; } /* FE-654: Person ohne Benutzerzugang am Einsatz */

/* ---------- Fuhrpark ---------- */
.plate { display: inline-block; padding: 1px 8px; border: 1.5px solid var(--text-1); border-left: 6px solid var(--info-fg); border-radius: 3px; font-weight: 700;
  font-size: 13px; letter-spacing: .02em; background: var(--bg); white-space: nowrap; }
.plate-lg { font-size: 18px; padding: 2px 10px; vertical-align: 2px; }
.vehicle-name { font-weight: 400; }
.meta-line { margin: -4px 0 var(--space-3); }
.deadline.stage-due, .deadline.stage-overdue { color: var(--warning-fg); font-weight: 600; }
.deadline.stage-overdue { color: var(--error-fg); }
.deadline.stage-soon { color: var(--info-fg); }
.deadline-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.deadline-list li { display: flex; flex-direction: column; border-bottom: 1px solid var(--surface-2); padding-bottom: var(--space-2); }
.deadline-list li:last-child { border-bottom: 0; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.big-number { font-size: 26px; font-weight: 700; margin: var(--space-2) 0 0; }
.deadline-table tbody tr { cursor: default; }
.deadline-table tr.row-due { background: var(--warning-bg); }
.small-title h2 { font-size: 16px; margin: 0; }
.info-box { margin-top: var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-1); }
.info-box ul { margin: var(--space-1) 0 0; padding-left: 18px; }
.menu-note { display: block; padding: 6px 10px; max-width: 240px; }

/* ---------- Reiter-Inhalte der Datensatz-Masken ---------- */
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--space-4); margin-top: var(--space-4); align-items: start; }
.kv { display: grid; grid-template-columns: minmax(90px, auto) minmax(0, 1fr); align-items: baseline; gap: var(--space-1) var(--space-3); margin: 0; font-size: 13px; }
.kv dt { color: var(--text-2); }
.kv dd { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.people-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: 13px; }
.people-list li { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.people-list .role { margin-left: auto; color: var(--text-2); white-space: nowrap; }
.tab-stack { display: grid; gap: var(--space-4); }
.tabs .count { color: var(--text-3); font-size: 12px; font-weight: 400; margin-left: 2px; }
.tree-cell { display: flex; align-items: flex-start; gap: var(--space-1); padding-left: calc(var(--depth, 0) * 20px); }
.tree-toggle { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border: 0; background: none; padding: 0; color: var(--text-2); cursor: pointer; font-size: 12px; border-radius: 4px; }
button.tree-toggle:hover { background: var(--surface-2); color: var(--text); }
.card-list li.child-item a { padding-left: calc(var(--space-4) + 16px); }
table.data td.c-num, table.data td.num { white-space: nowrap; }
/* Einsatzplanung: Rasterlinien je 15/30 min, Einsätze ziehen (während des Ziehens fangen nur die Felder den Abwurf). */
.dispatch-grid .cal-slot, .raster-grid .cal-slot { background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--hour) / var(--steps) - 1px),
  var(--surface-1) calc(var(--hour) / var(--steps) - 1px), var(--surface-1) calc(var(--hour) / var(--steps))); }
.dispatch-grid .dispatch-card[draggable="true"] { cursor: grab; }
.dispatch-grid.moving .dispatch-card { pointer-events: none; opacity: .7; }
.raster-select { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-2); }
.raster-select select { height: 32px; border: 1px solid var(--border-strong); border-radius: var(--radius-chip); background: var(--bg); padding: 0 6px; }
.raster-grid .cal-entry[draggable="true"] { cursor: grab; }
.raster-grid.moving .cal-entry { pointer-events: none; opacity: .7; }
/* Dokumente am Datensatz: Ablagefläche (Datei-Eingabe liegt unsichtbar darüber – Hineinziehen und Klicken). */
.drop-zone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); min-height: 96px;
  margin-bottom: var(--space-3); border: 1.5px dashed var(--border-strong); border-radius: var(--radius-card); color: var(--text-2); text-align: center; padding: var(--space-3); }
.drop-zone.over { border-color: var(--brand-grey); background: var(--surface-1); color: var(--text); }
.drop-zone.busy { opacity: .7; }
.drop-zone input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-pick { position: relative; overflow: hidden; }
.file-pick input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-badge { display: inline-block; min-width: 34px; padding: 0 4px; border-radius: 3px; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  background: var(--surface-2); color: var(--text-2); vertical-align: 1px; }
.file-badge.file-pdf { background: var(--error-bg, var(--surface-2)); color: var(--error-fg, var(--text-2)); }
.file-badge.file-image { background: var(--info-bg, var(--surface-2)); color: var(--info-fg, var(--text-2)); }
.ok-text { color: var(--success-fg); }
.side-documents { margin-top: var(--space-5); }
.side-documents .record-documents { border: 0; padding: 0; }
.side-documents table.data th:nth-child(2), .side-documents table.data td:nth-child(2), .side-documents table.data th:nth-child(4), .side-documents table.data td:nth-child(4) { display: none; }

/* Belegvorlagen › Vorlage aus PDF oder Word (Masken-Spez. 08 Kap. 10) */
.tpl-import .tpl-file-btn { position: relative; overflow: hidden; cursor: pointer; }
.tpl-import .tpl-file-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tpl-drop { border: 2px dashed var(--border-strong); border-radius: var(--radius-card); padding: var(--space-6); text-align: center; max-width: 640px; background: var(--surface-1); }
.tpl-drop.busy { opacity: .6; }
.tpl-filerow { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.tpl-columns { display: grid; grid-template-columns: minmax(320px, 520px) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.tpl-original { background: var(--surface-2); border-radius: var(--radius-card); padding: var(--space-3); position: sticky; top: var(--space-3); }
.tpl-original-head { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); font-size: 13px; }
.tpl-original-head .spacer { flex: 1; }
.tpl-page { width: 100%; height: auto; display: block; box-shadow: var(--shadow-popover); font-family: var(--font-sans); }
.tpl-page .sheet { fill: #fff; }
.tpl-page text { fill: #1a1a1a; }
.tpl-page .img { fill: var(--neutral-bg); stroke: var(--border-strong); stroke-width: .3; }
.tpl-page .img-label { font-size: 3px; fill: var(--text-3); }
.tpl-page .cell { fill: none; stroke: var(--border); stroke-width: .2; }
.tpl-page .region rect { fill: var(--info-fg); fill-opacity: .05; stroke: var(--info-fg); stroke-width: .4; stroke-dasharray: 1.5 1; cursor: pointer; }
.tpl-page .region.band-low rect { stroke: var(--warning-fg); fill: var(--warning-fg); }
.tpl-page .region.active rect { stroke-width: .8; fill-opacity: .12; }
.tpl-page .region-label { font-size: 2.6px; fill: var(--info-fg); font-weight: 600; }
.tpl-page .region.band-low .region-label { fill: var(--warning-fg); }
.tpl-side { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.tpl-modes { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.tpl-modes legend { font-size: 16px; font-weight: 600; margin-bottom: var(--space-2); }
.tpl-mode { display: flex; gap: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-3); cursor: pointer; font-size: 13px; }
.tpl-mode.selected { border: 2px solid var(--text-1); }
.tpl-map-head { display: flex; gap: var(--space-2); align-items: center; }
.tpl-map-head h2 { font-size: 16px; margin: 0; }
.tpl-side .warn { color: var(--warning-fg); font-weight: 600; }
.tpl-side .small, .tpl-import .small { font-size: 12px; }
.tpl-map { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.tpl-map th { text-align: left; font-size: 12px; color: var(--text-2); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--border); }
.tpl-map th:nth-child(1) { width: 110px; } .tpl-map th:nth-child(3) { width: 18px; } .tpl-map th:nth-child(4) { width: 220px; } .tpl-map th:nth-child(5) { width: 110px; }
.tpl-map td { padding: 3px 6px; border-bottom: 1px solid var(--border); height: var(--row-compact); vertical-align: middle; }
.tpl-map td.src { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-map tr.open td { background: var(--warning-bg); }
.tpl-map tr.active td { outline: 1px solid var(--info-fg); outline-offset: -1px; }
.tpl-map select { width: 100%; }
.tpl-map select.suggested { border-style: dashed; }
.tpl-map select.open { border-color: var(--warning-fg); }
.bars { display: inline-flex; gap: 2px; vertical-align: middle; }
.bars i { width: 4px; height: 10px; background: var(--border); border-radius: 1px; }
.bars.band-high i { background: var(--success-fg); }
.bars.band-medium i:nth-child(-n+2) { background: var(--warning-fg); }
.bars.band-low i:nth-child(1) { background: var(--error-fg); }
.tpl-box { border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-3) var(--space-4); }
.tpl-box h3 { font-size: 13px; margin: var(--space-2) 0 var(--space-1); }
.tpl-mandatory { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.tpl-mandatory li.ok span[aria-hidden] { color: var(--success-fg); }
.tpl-mandatory li.missing { color: var(--error-fg); }
.tpl-mandatory li.info span[aria-hidden] { color: var(--info-fg); }
.tpl-result { margin-top: var(--space-5); border: 1px solid var(--success-fg); border-radius: var(--radius-card); padding: var(--space-4); }
.tpl-result pre { max-height: 400px; overflow: auto; font-size: 12px; background: var(--surface-2); padding: var(--space-3); }
@media (max-width: 1100px) { .tpl-columns { grid-template-columns: 1fr; } .tpl-original { position: static; } .tpl-modes { grid-template-columns: 1fr; } }
.tpl-preview { max-width: 520px; margin: var(--space-3) 0; }
.tpl-preview .pv rect { fill: var(--info-bg); stroke: var(--info-fg); stroke-width: .3; }
.tpl-preview .pv-positionsTable rect, .tpl-preview .pv-totals rect { fill: var(--neutral-bg); stroke: var(--text-2); }
.tpl-preview .pv-address rect { fill: none; stroke-dasharray: 1.5 1; }

/* ---------- Zielgrößen (FE-501) ---------- */
/* Desktop: Eingabefelder in Tabellenzellen (Inventur, Plätze …) und Textknöpfe nicht unter 24 px (WCAG 2.5.8). */
table input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), table select { min-height: var(--btn-h-sm); }
button.link-button { min-height: 24px; }
@media (max-width: 767px) { .texts-summary { min-height: var(--touch-target); } }
/* Ansicht Aussendienst (Aussendienst-App, Masken-Spez. 26.3): Hauptknöpfe, Felder und Auswahlen mit Handschuhen bedienbar, mindestens 48 px. */
@media (max-width: 1023px) {
  .shell.field-view .page .btn, .shell.field-view .page .btn-sm, .shell.field-view .page .segment button, .shell.field-view .page .check,
  .shell.field-view .page select, .shell.field-view .page input:not([type="checkbox"]):not([type="radio"]), .shell.field-view .page summary { min-height: 48px; }
  .shell.field-view .page .btn-icon { min-width: 48px; }
}

/* ---- Stufe 6, Desktop (FE-567) ---- */
/* ② Beleg-Kopfzeile: der Speicherstatus steht in der Zeile unter dem Titel (rechts), damit „✓ Gespeichert“ „Festschreiben“ nicht umbrechen lässt. */
.doc-save-slot { float: right; margin-left: var(--space-3); }
@media (min-width: 1024px) {
  /* Feld mit Fehlertext: das schmale Sechstel würde die Meldung auf drei Zeilen brechen – es nimmt dann zwei Spalten (FE-567 ④). */
  .fields > .field.w1.invalid { grid-column: span 2; }
}
/* ③ Rahmenvertrag: Positionstabelle passt in die Karte (Felder füllen die Zelle statt 170 px Standardbreite). */
.framework-contract-page table.data th, .framework-contract-page table.data td { padding: 0 var(--space-2); }
.framework-contract-page table.data td input:not([type="checkbox"]), .framework-contract-page table.data td select {
  width: 100%; min-width: 0; box-sizing: border-box; height: var(--field-h); padding: 0 8px; font: inherit; color: var(--text-1); background: var(--bg);
  border: 1px solid var(--border-strong); border-radius: var(--radius-chip); }
.framework-contract-page table.data td input.amount-input::placeholder { color: var(--text-3); }
.framework-contract-page table.data td:nth-child(2) { width: 32%; }
.framework-contract-page table.data td:nth-child(2) input { min-width: 180px; }
.framework-contract-page table.data td:nth-child(3) { width: 112px; }
.framework-contract-page table.data td:nth-child(3) select { min-width: 100px; }
.framework-contract-page table.data td.num input { min-width: 64px; }
/* ⑦ Kalender › Monat: Text in eigenem Element, damit „…“ wirkt. */
.month-entry-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.month-entry .kind-letter { flex: none; }

/* ---------- Handy: Zielgrößen Rest und Überläufe (FE-501, FE-566) ---------- */
/* Ausklappmenüs: `max-width`/`max-height` setzt panels.js (fitMenu) nach dem Öffnen; hier die Grundlage dafür. */
.menu-button > .menu { max-width: calc(100vw - 16px); box-sizing: border-box; }
@media (max-width: 1023px) {
  /* Textknöpfe („Zurückgestellte“, „Erledigt“ …) und Dateiauswahl: 44 px hoch, Optik bleibt (Text unterstrichen, kein Rahmen). */
  button.link-button:not(.category-picker *):not(.person-chip *):not(.briefing-card-head *) { display: inline-flex; align-items: center; min-height: var(--touch-target); padding-inline: 4px; }
  input[type="file"] { min-height: var(--touch-target); box-sizing: border-box; }
  .segmented button { min-height: var(--touch-target); padding: 0 var(--space-3); }
  .segmented { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  /* Links in Tabellenzellen (Name des Kunden usw.) und im Hinweis „Zusatzfeld anlegen“ */
  table.data td > a:first-child:not(.chip) { display: inline-flex; align-items: center; min-height: var(--touch-target); }
  .cf-empty a { display: inline-flex; align-items: center; min-height: var(--touch-target); }
  details > summary { min-height: var(--touch-target); box-sizing: border-box; align-content: center; }
}
/* Ansicht Aussendienst: Reiter 48 px (Spez. 26.3) */
@media (max-width: 1023px) {
  .shell.field-view .tabs { height: 49px; }
  .shell.field-view .tabs button { min-height: 48px; }
  .shell.field-view .mobile-header .btn-icon, .shell.field-view .mobile-header .avatar { width: 48px; height: 48px; }
}
/* FE-566 ③: lange Prüfhinweise (Chips der Prüfliste) umbrechen, statt die Seite zu verbreitern. */
.check-list { min-width: 0; }
.check-list .chip { max-width: 100%; height: auto; min-height: 22px; padding-block: 2px; white-space: normal; text-align: left; }
@media (max-width: 1023px) {
  /* Tabellen in aufklappbaren Bereichen („Nicht im Lauf“, Abstimmung) scrollen im Bereich, nicht die Seite. */
  details.excluded { max-width: 100%; overflow-x: auto; }
}
/* FE-566 ⑥: Kalender › Monat am Handy – sieben Spalten à 50 px tragen keinen Text. Die Zelle zeigt die Tageszahl (44 px, öffnet den Tag) und je Termin
   bzw. Aufgabe einen Punkt in der Terminfarbe; Uhrzeit und Betreff stehen im Tag. Die Einträge selbst sind am Handy ausgeblendet (keine zu kleinen Ziele). */
.month-dots { display: none; }
.task-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--text-2); box-sizing: border-box; }
.task-dot.overdue { border-color: var(--warning-fg); }
@media (max-width: 767px) {
  .month-cell { min-height: 76px; padding: 2px; }
  .month-cell .day-no { align-self: stretch; justify-content: center; }
  .month-cell .today-chip { display: none; }
  .month-grid:not(.dispatch-month) .month-dots { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; padding: 0 2px; }
  .month-grid:not(.dispatch-month) .month-cell > .month-entry, .month-grid:not(.dispatch-month) .month-cell > .task-chip, .month-grid:not(.dispatch-month) .month-cell > .link-button.small { display: none; }
  .month-dots .kind-letter { width: 12px; height: 12px; font-size: 0; }
  .month-cell .day-mark { font-size: 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .task-check { width: var(--touch-target); height: var(--touch-target); }
}

/* Stufe 8 – Projekte (FE-668): Karten der Projekt-Übersicht in Spalten statt in Rasterzeilen, damit unter kurzen Karten
   die nächste Karte nachrückt und keine Lücke unter der höchsten Karte entsteht. */
.summary-grid.summary-columns { display: block; column-width: 320px; column-gap: var(--space-4); }
.summary-grid.summary-columns > * { break-inside: avoid; margin-bottom: var(--space-4); }

/* Stufe 8 – Projekte/Dokumente (FE-541 ⑥/⑫): lange Menüzeilen (z. B. „Zu <Mandant> wechseln“) umbrechen statt die nächste Zeile zu überdecken;
   QR-Symbol mit ausreichendem Kontrast im Dunkelmodus. */
.menu button, .menu a { height: auto; min-height: 30px; padding-top: var(--space-1); padding-bottom: var(--space-1); }
.qr-icon { color: var(--text-2); }
/* Stufe 8 – Englisch (FE-630 ⑩): Am Handy gibt die Wortmarke den Platz an den Mandantennamen ab, sonst bleibt von ihm nur „Bla…“ (längere englische Knöpfe daneben). */
@media (max-width: 480px) { .mobile-header .brand-wordmark { display: none; } .mobile-header .wordmark { margin-left: var(--space-2) !important; } }
/* ---------- Stufe 8 – Handy/Optik (FE-536, FE-556, FE-602, FE-686, FE-688) ---------- */
/* Menüeinträge dürfen umbrechen (lange Mandantennamen) statt in die Nachbarzeile zu ragen (FE-602 ①). */
.menu button, .menu a { height: auto; min-height: 30px; padding-top: 5px; padding-bottom: 5px; white-space: normal; line-height: 20px; }
/* Zähler in Reitern und Überschriften stehen nicht am Wort („Meine0“, „Fristen1“, FE-688 ⑦). */
.tabs .count, h2 > .count, h3 > .count { margin-left: 6px; }
/* Fettgedruckter Anfang + Fortsetzung im Hinweisfeld („Freigabe angefordert von …“, FE-556 ⑪). */
.banner .text > strong + span { margin-left: 0.25em; }
/* Beschreibungstexte der Module: Ergänzungen mit Abstand zum Satz davor (FE-688 ⑨). */
.mod-desc > span { margin-left: 0.25em; }
/* Auswahllisten (Einstellungen › Listen): das Wertefeld bleibt lesbar breit, die Tabelle scrollt (FE-686 ①). */
.value-table td input:not([type="checkbox"]) { width: 100%; min-width: 9rem; box-sizing: border-box; }
.value-table .c-move { white-space: nowrap; }
@media (max-width: 767px) {
  /* Tabellen, die seitlich scrollen, zeigen es an: Schatten am Rand, solange dort noch Inhalt wartet (FE-536 ②). */
  .table-wrap:not(.has-cards) {
    background:
      linear-gradient(to right, var(--bg) 30%, transparent) 0 0 / 28px 100% no-repeat local,
      linear-gradient(to left, var(--bg) 30%, transparent) 100% 0 / 28px 100% no-repeat local,
      linear-gradient(to right, var(--border-strong), transparent) 0 0 / 10px 100% no-repeat scroll,
      linear-gradient(to left, var(--border-strong), transparent) 100% 0 / 10px 100% no-repeat scroll;
  }
  /* Tabellen direkt in Seite, Karte oder Aufklappbereich: scrollen für sich, statt die Seite zu verbreitern (FE-536 ⑤). */
  .page > table.data, .card > table.data, details > table.data { display: block; width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  /* Die schwebende „+“-Taste verdeckt nicht die letzte Zeile (FE-536 ⑩). */
  .card-list { padding-bottom: calc(56px + var(--space-4)); }
  /* Kennzahlen und Knopfleisten brechen um (FE-536 ⑤). */
  .page .chips, .page .title-row, .page .kpis, .page .toolbar, .page .list-toolbar { flex-wrap: wrap; }
  .page img, .page svg { max-width: 100%; }
}
/* Hinweisfenster der Einsatzplanung: schließbar, am Handy über der Tab-Leiste (FE-562 ②). */
.dispatch-hints h3 { display: flex; align-items: center; gap: var(--space-2); }
.dispatch-hints .hints-close { margin-left: auto; }
@media (max-width: 767px) { .dispatch-hints { bottom: calc(var(--mobile-tabbar-h) + var(--space-3) + env(safe-area-inset-bottom)); right: var(--space-2); } }
/* Stufe 8 – Belegmaske und Verkauf (FE-672): Ein gesperrter (festgeschriebener) Beleg zeigt in keiner Zeile Eingabefelder mit Rahmen und Auswahlpfeil – auch nicht unter der Maus. */
.doc-line input:disabled, .doc-line select:disabled, .doc-line textarea:disabled { border-color: transparent; background: transparent; }
.doc-line:hover select:disabled { appearance: none; }

/* Stufe 8 – Beleg (FE-612 ③, FE-676 ⑩): Druckansichten am Handy – die Werkzeugleiste (Knöpfe, Mailfeld) bricht um, eine breite Postentabelle scrollt im Blatt
   statt die ganze Seite breiter als den Bildschirm zu machen. */
.print-toolbar { flex-wrap: wrap; }
@media (max-width: 860px) {
  .print-toolbar { padding: var(--space-3); }
  .print-toolbar .input-inline { flex: 1 1 200px; min-width: 0; }
  .sheet { max-width: 100%; overflow-x: auto; }
}
/* Stufe 8 – Einstellungen und Querschnitt */
/* FE-533: Beschriftungen von Kontrollkästchen im Feldraster brechen um, statt über das Nachbarfeld zu laufen. */
.fields .check, .fields .field > .check { display: flex; align-items: flex-start; max-width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.fields .check input[type="checkbox"] { flex: none; margin-top: 3px; }
/* Stufe 9 – A (FE-694) */
/* Ganztagstermine und Aufgaben im Kalender: lange Texte enden mit „…“ am Kartenrand statt mitten im Wort (Flex-Zeilen kürzen nur über einen Textabschnitt). */
.allday-entry, .task-chip { min-width: 0; max-width: 100%; }
.allday-entry .clip-text, .task-chip .clip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Fälligkeitsspalte der Aufgabenliste: „überfällig seit 11 Tagen“ bleibt in einer Zeile. */
.due-col { white-space: nowrap; }
/* Start: Kopf von „Wartet auf Sie“ bricht am Handy zwischen den Teilen um, nicht mitten in ihnen. */
.briefing-card-head { height: auto; min-height: 40px; flex-wrap: wrap; row-gap: 0; }
.briefing-card-head h2, .briefing-count, .briefing-card-head .link-button { white-space: nowrap; }
/* Kontaktliste: „vor 2 Tagen“ und Namen brechen nicht mitten im Ausdruck um. */
td.nowrap { white-space: nowrap; }

/* Stufe 9 – C: Einkauf, Finanzen, Personal, Zeiten, Fuhrpark, Ausstattung */
.lead-gap { margin-inline-start: var(--space-1); }
details.card > summary > h2 { font-size: 16px; line-height: 24px; font-weight: 600; margin: 0; }
.link-button + .link-button { margin-inline-start: var(--space-2); }
.vehicle-name { margin-inline-start: var(--space-2); }
.card > .card-head > h2 { font-size: 16px; line-height: 24px; font-weight: 600; margin: 0; }
.icon-gap { margin-inline-end: var(--space-1); }
td > strong.mono { white-space: nowrap; }

/* ---------- Stufe 11 – K4 ---------- */
/* Reiterzeilen, die seitlich weitergehen (Finanzen, Einkauf bei 1280 px), zeigen es an: Schatten am Rand, solange dort noch Reiter warten (FE-675 ⑤). */
.list-tabs:not(.tabs) { /* Reiterleisten mit .tabs zeigen den Überlauf über panels.js (K6, FE-541 ⑩) */
  background:
    linear-gradient(to right, var(--bg) 30%, transparent) 0 0 / 28px 100% no-repeat local,
    linear-gradient(to left, var(--bg) 30%, transparent) 100% 0 / 28px 100% no-repeat local,
    linear-gradient(to right, var(--border-strong), transparent) 0 0 / 10px 100% no-repeat scroll,
    linear-gradient(to left, var(--border-strong), transparent) 100% 0 / 10px 100% no-repeat scroll;
}
/* ---------- Stufe 10 – G: Handy-Masken (FE-536, FE-686, FE-688) ---------- */
/* FE-688 ④: In der Seitenleiste (Belegbaum, Zeitleiste, Kunde am Ticket) haben alle Überschriften dieselbe Größe – auch die der eingebetteten Karten
   (Zugangsdaten, Wissen), die sonst 16 px groß wären. */
.doc-layout > aside.doc-side h2 { font-size: 14px; line-height: 20px; }
/* FE-688 ⑧: Druckseiten (Mahnung, Gutschein, Kontoauszug, Pickliste) stehen im App-Rahmen. Beim Drucken erscheint nur der Inhalt –
   Kopfzeile, Navigation, Reiterleiste und Handy-Leisten fallen weg, der Inhaltsbereich scrollt nicht mehr in sich. */
@media print {
  .shell-header, .shell-nav, .mobile-header, .record-tabs, .tabbar, .more-sheet, .fab, .action-bar { display: none !important; }
  .shell { display: block !important; height: auto !important; min-height: 0 !important; }
  .shell-main { overflow: visible !important; height: auto !important; padding: 0 !important; }
}
/* FE-741: Gemeinsames Druckfenster (PrintWindowHost) über der Maske. Gedruckt wird nur sein Inhalt: die Maske darunter fällt weg, das Fenster verliert
   Rahmen, Kopf, feste Lage und eigenen Bildlauf (die Werte von printing.js stehen inline und werden hier übersteuert). */
@media print {
  #app:has(> .print-window) > :not(.print-window) { display: none !important; }
  #app > .print-window { position: static !important; inset: auto !important; display: block !important; width: auto !important; height: auto !important;
    max-width: none !important; max-height: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    overflow: visible !important; resize: none !important; background: #fff !important; }
  #app > .print-window > .print-window-head { display: none !important; }
  #app > .print-window > .print-window-body { overflow: visible !important; background: none !important; }
}
/* Tabellen mit Klasse „resp“ werden am Handy zu Karten: je Zeile ein Block, je Zelle „Beschriftung (data-label) · Wert“.
   So bleiben alle Spalten und Aktionen der Desktop-Fassung sichtbar, ohne seitliches Scrollen. Zellen ohne data-label stehen in voller Breite. */
@media (max-width: 767px) {
  table.data.resp, table.data.resp > tbody { display: block; width: 100%; }
  table.data.resp > thead { display: none; }
  table.data.resp > tbody > tr { display: block; padding: var(--space-2) 0; border-bottom: 1px solid var(--border); height: auto; }
  table.data.resp > tbody > tr > td { display: flow-root; min-width: 0; height: auto; padding: 3px 0; border: 0; text-align: right; white-space: normal; overflow-wrap: anywhere; }
  table.data.resp > tbody > tr > td::before { content: attr(data-label); float: left; max-width: 45%; margin-right: var(--space-3); color: var(--text-2); font-size: 12px; line-height: 20px; text-align: left; }
  table.data.resp > tbody > tr > td:not([data-label]) { display: block; text-align: left; }
  table.data.resp > tbody > tr > td:not([data-label])::before, table.data.resp > tbody > tr > td[data-label=""]::before { content: none; }
  /* FE-753: Zellen mit fester Breite aus der Desktop-Fassung (Einstellungen › Listen: „Reihenfolge“ 72 px) füllen in der Karte die ganze Zeile; sonst bleibt der Beschriftung kein Platz und sie bricht buchstabenweise um. */
  table.data.resp.value-table > tbody > tr > td.c-move { width: auto; }
  table.data.resp > tbody > tr > td:empty { display: none; }
  table.data.resp > tbody > tr > td > input:not([type="checkbox"]):not([type="radio"]), table.data.resp > tbody > tr > td > select,
  table.data.resp > tbody > tr > td > textarea { width: 55%; min-width: 0; max-width: 55%; box-sizing: border-box; }
  table.data.resp > tbody > tr > td .sub { display: block; }
  table.data.resp > tbody > tr > th { display: block; height: auto; padding: 3px 0; border: 0; text-align: left; font-weight: 600; white-space: normal; }
  /* Zelle mit mehreren Eingaben (z. B. Auswahl + Adresse): Beschriftung oben, Felder in voller Breite darunter. */
  table.data.resp > tbody > tr > td.wrap-cell { text-align: left; }
  table.data.resp > tbody > tr > td.wrap-cell::before { float: none; display: block; max-width: none; }
  table.data.resp > tbody > tr > td.wrap-cell > input, table.data.resp > tbody > tr > td.wrap-cell > select, table.data.resp > tbody > tr > td.wrap-cell > textarea { display: block; width: 100%; max-width: 100%; margin-bottom: var(--space-1); }
  .table-wrap:has(> table.data.resp) { background: none; overflow-x: visible; }
  /* Kalender › Woche am Handy (FE-536 ⑥): zwei Tage je Bildschirmbreite, Wischen rastet tageweise ein; die Stundenspalte bleibt stehen.
     So ist kein Tag halb abgeschnitten, und Kartentitel haben rund 150 px statt 60 px. */
  .cal-grid.raster-grid.week-grid { grid-template-columns: 40px repeat(var(--cols, 1), calc((100% - 40px) / 2)) !important; scroll-snap-type: x mandatory; scroll-padding-left: 40px; }
  .week-grid .cal-dayhead { scroll-snap-align: start; }
  .week-grid .cal-corner, .week-grid .cal-allday-label, .week-grid .cal-hours { position: sticky; left: 0; z-index: 4; }
  .week-grid .cal-allday-label, .week-grid .cal-hours { background: var(--bg); }
  /* Filterblöcke der Listen (FE-536 ⑬): Suche und Sortierung teilen sich eine Zeile, Abstände knapper – die erste Zeile der Liste rückt rund 60 px nach oben. */
  .list-toolbar { row-gap: var(--space-2); margin: var(--space-2) 0; }
  .list-toolbar:has(> .sort-select) > .search { flex: 1 1 170px; min-width: 0; order: -2; }
  .list-toolbar > .sort-select { flex: 1 1 150px; order: -1; }
  /* Feldpaare „Skonto Tage / %“ (FE-536 ⑧): am Handy steht hinter jedem Feld seine Einheit, damit klar ist, welches Feld Tage und welches Prozent sind. */
  .field .pair.pair-units { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-2); }
  .pair.pair-units > input:first-child { order: 0; }
  .pair.pair-units::before { content: attr(data-unit1); order: 1; font-size: 13px; color: var(--text-2); }
  .pair.pair-units > input:last-child { order: 2; }
  .pair.pair-units::after { content: attr(data-unit2); order: 3; font-size: 13px; color: var(--text-2); }}


/* Stufe 11 – K5: Einrichtungs-Fortschritt auf der Startseite (FE-433) */
.setup-progress-bar { height: 6px; margin: 0 var(--space-4) var(--space-2); border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.setup-progress-bar > span { display: block; height: 100%; background: var(--success-fg); }

/* Stufe 11 – K2: Kalender, Einsatzplanung, Aussendienst-App, Zeiten */
/* FE-689 ②: belegender Termin (kein Einsatz) als eigene Zeile unter dem Namen in der Einsatzplanung. */
.person-row:has(.other-appointments) { flex-wrap: wrap; }
.person-row .other-appointments { flex-basis: 100%; padding-inline-start: var(--space-5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* FE-542 ⑧: Suchfeld (Lupe links) in einem Formularfeld – die Lupe überdeckt den Platzhalter nicht mehr. */
.field .search input:not([type="checkbox"]):not([type="radio"]) { padding-inline-start: 32px; }
.field .search svg { top: calc((var(--field-h) - 16px) / 2); }
/* FE-548 ④: am Handy (ohne Tastatur) keine Tastenkürzel im Menü („Hilfe F1“, „Tastenkürzel ?“) – nur Text. */
@media (hover: none) and (pointer: coarse) { [role="menu"] [role="menuitem"] kbd { display: none; } }

/* Stufe 11 – K6: Querschnitt Oberfläche, Adressen, Startseite */
/* FE-417 ②: Prioritätsknöpfe im Aufgaben-Panel bleiben bei schmaler Leiste lesbar („niedrig/normal/hoch“ statt „ni…“). */
.task-priority .segment { display: flex; flex-wrap: nowrap; }
.task-priority .segment button { flex: 1 1 0; min-width: 0; padding: 0 var(--space-2); white-space: nowrap; }
/* FE-486 ①: Liste aller offenen Tabs rechts in der Tab-Leiste – rechtsbündig, volle Titel. */
.record-tab-all { margin-left: auto; }
.record-tab-all .count { margin-left: var(--space-1); }
.record-tab-all .menu { left: auto; right: 0; max-height: 60vh; overflow-y: auto; min-width: 280px; }
.record-tab-all .menu a.active { font-weight: 600; background: var(--surface-2); }
.record-tab-all .menu .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Stern des aktiven Tabs (Favoriten, #351.5): rechts in der Tab-Leiste; angeheftet = gefüllt. */
.record-tab-star { margin-left: auto; }
.record-tab-all + .record-tab-star { margin-left: 0; }
.record-tab-star .pinned { color: var(--text-1); }
.record-tab-star .pinned svg path { fill: currentColor; }
/* FE-535: Beschriftung vor einem Feld in einer Knopfleiste (z. B. „Vertragsende“ vor „Kündigen …“). */
.inline-label { align-self: center; color: var(--text-2); white-space: nowrap; }
/* FE-541 ⑩: verborgene Reiter am Rand einer scrollenden Reiterleiste andeuten (Klassen aus panels.js). */
.tabs.more-right { -webkit-mask-image: linear-gradient(to left, transparent 0, var(--bg) 32px); mask-image: linear-gradient(to left, transparent 0, var(--bg) 32px); }
.tabs.more-left { -webkit-mask-image: linear-gradient(to right, transparent 0, var(--bg) 32px); mask-image: linear-gradient(to right, transparent 0, var(--bg) 32px); }
.tabs.more-left.more-right { -webkit-mask-image: linear-gradient(to right, transparent 0, var(--bg) 32px, var(--bg) calc(100% - 32px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, var(--bg) 32px, var(--bg) calc(100% - 32px), transparent 100%); }
/* FE-556 ⑫: Rückmeldung übernehmen – Bezeichnung bricht um, die Zielauswahl bleibt sichtbar. */
.field-review table.data td:nth-child(2) { white-space: normal; min-width: 180px; }
.field-review table.data select { max-width: 180px; }
/* FE-608 ③: Adresse bearbeiten – „Kontakt“ beginnt die zweite Spalte (wie „Erreichbarkeit“ bei „Neu“), statt unter der Anschrift zu landen. */
@media (min-width: 1180px) { .form-grid > .addr-contact-card { break-before: column; } }
/* FE-608 ⑥: Adressfilter am Handy zugeklappt hinter „Filter“. */
@media (max-width: 1023px) { .address-filters.collapsed > :not(.filter-toggle) { display: none; } }
/* FE-608 ⑦: Kästchen und Optionsfelder am Handy mit genug Fläche zum Tippen (mind. 22 px, mit Beschriftung über 24 px). */
@media (max-width: 1023px) { input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; flex: none; } }

/* Stufe 12 – Klicktest-Fehler */
/* FE-699: Das Feld mit Fehler zeigt den roten Rand – die Regel für Eingabefelder (mit :not) ist spezifischer als .field.invalid input. */
.field.invalid input:not([type="checkbox"]):not([type="radio"]), .field.invalid select, .field.invalid textarea { border-color: var(--error-fg); }

/* ---------- Stufe 12 – Zielgrößen am Handy (FE-501) ----------
   Alle Bedienelemente erreichen am Handy (bis 1023 px) die Zielgröße `--touch-target` (44 px, Ansicht Aussendienst 48 px);
   Kontrollkästchen und Optionsfelder 24 × 24 px (WCAG 2.2, 2.5.8). Die Optik bleibt, nur die Trefferfläche wächst. Am Desktop ändert sich nichts. */
@media (max-width: 1023px) {
  /* Wortmarke in der Kopfzeile */
  .mobile-header .wordmark { min-width: var(--touch-target); justify-content: center; }
  /* Pfad („Kalender › Einsatzplanung“): jeder Link eine volle Zeile hoch */
  .breadcrumbs { align-items: center; column-gap: 2px; }
  .breadcrumbs a { display: inline-flex; align-items: center; min-height: var(--touch-target); padding-inline: 4px; }
  /* Alleinstehende Textlinks und kleine Knöpfe (Verwalten, Kalender öffnen, + 6 weitere, Warum?, Alle auswerten …) */
  a.link-button, a.small, button.task-more, .notice-why, .kpi-link, .briefing-items li > a, .briefing-card a, .card-head a, .title-row a.small, .chips a:not(.chip),
  .hints-close, .link-button.small { display: inline-flex; align-items: center; min-height: var(--touch-target); box-sizing: border-box; }
  .briefing-card-head .link-button, .briefing-footer a, p.small > a:only-child { display: inline-flex; align-items: center; min-height: var(--touch-target); box-sizing: border-box; }
  /* Umschalter mit eigener (gescopter) Mindesthöhe, z. B. Lager › Material „Entnahme/Rückgabe“ */
  .segmented[role] button[role] { min-height: var(--touch-target); }
  /* Auswahlfelder mit eigener Höhe (Rechte-Matrix „Umfang“) und Pfeil-Knöpfe ↑ ↓ der Sortierlisten */
  select[class] { min-height: var(--touch-target); }
  .btn.btn-subtle { min-width: var(--touch-target); }
  /* Kurze Links (Nummern, „Lager“) bekommen auch in der Breite Fläche */
  .breadcrumbs a, table.data td > a:not(.chip) { min-width: var(--touch-target); justify-content: center; }
  table.data td > a:not(.chip) { justify-content: flex-start; }
  /* Link-Zeilen im Fließtext („Regiesätze vergleichen · Zuschlagssätze“, Namen in Kartenlisten): Trefferfläche über Innenabstand, ohne das Zeilenbild zu ändern */
  p.small > a, .page li > a:first-child:not(.chip), dd > a:not(.chip) { padding-block: 14px; margin-block: -14px; }
  p.small > a { display: inline-block; }
  .meta-row a, .task-link a, address > a, .people-list li > a, a.phone-link { padding-block: 14px; margin-block: -14px; }
  td > a:not(.chip):not(.btn) { display: inline-flex; align-items: center; min-height: var(--touch-target); box-sizing: border-box; }
  /* Einzelne Zeichen als Knopf („ד, „Alle“) und das Titelbild im Kopf eines Datensatzes */
  button.link-button, a.link-button { min-width: var(--touch-target); justify-content: center; }
  .head-image { min-width: var(--touch-target); min-height: var(--touch-target); }
  /* Reiterleisten aus Links (Belegtexte, QR-Codes …) und Auswahlchips in Listenköpfen */
  .list-tabs a { min-height: var(--touch-target); }
  /* Eigene (gescopte) Höhen in Einstellungen, Listen und Tabellen übersteuern */
  select, .tpl-chip, .btn.btn-subtle, td > button.cell, .tree-list button { min-height: var(--touch-target) !important; }
  .notice-why { height: auto; }
  .notice-text { display: flex; align-items: center; }
  .kpi-link { padding-block: 0; }
  /* Kontrollkästchen und Optionsfelder (auch in Tabellenzeilen): 24 px mit Abstand */
  input[type="checkbox"]:not(.check input), input[type="radio"]:not(.check input) { width: 24px; height: 24px; margin: 10px; flex: none; }
  /* Chips mit Aktion (Rechte, Kategorien, Filter) */
  button.chip, a.chip[href], .chip[role="button"], .chip[role="checkbox"], .chip[tabindex] { min-height: var(--touch-target) !important; display: inline-flex; align-items: center; box-sizing: border-box; }
  /* Umschalter und kleine Knöpfe */
  .btn.small, .btn-sm, .toggle button, .switcher button, .view-switch button, .filter-bar button, .filter-chips button { min-height: var(--touch-target); }
  /* Schließen-Kreuz in Seitenfenstern, Hinweisen und Dialogen */
  .close, .btn-close, button[aria-label="Schließen"], button[aria-label="Close"], .modal-close, .panel-close { min-width: var(--touch-target); min-height: var(--touch-target); }
}
@media (max-width: 1023px) {
  .shell.field-view .page a.link-button, .shell.field-view .page a.small, .shell.field-view .page button.task-more { min-height: 48px; }
}

/* Stufe 12 – Browser */
/* FE-542 ⑧, FE-694: Lupe in Suchfeldern siehe Stufe 11 – K2 oben. FE-538 ⑨, FE-675 ⑤, FE-694: Reiterzeilen, die breiter sind als die Maske,
   zeigen den Überlauf über die Maske aus panels.js (K6, FE-541 ⑩) bzw. den Schatten an .list-tabs (K4); am Desktop erscheint beim Überfahren zusätzlich eine dünne Bildlaufleiste. */
@media (hover: hover) and (pointer: fine) { .tabs:hover { scrollbar-width: thin; } }
/* FE-538 ③: Rückstand – nach „Liefermahnungen entwerfen“ wird die Spalte „Mahnstufe“ breiter, Bestellnummer („BE-2026-/0005“) und „kein / Termin“
   brachen um (Zeile 73 px statt zweizeilig). Diese Spalten bleiben einzeilig (td.nowrap); der lange Hinweis „… noch nicht überfällig …“ in der
   Auswahlleiste steht als eigene Zeile unter den Knöpfen statt zwischen Zähler und Knöpfen. */
.selection-bar > .warn-text { order: 10; flex-basis: 100%; }
/* FE-694: Feldraster in schmalen Karten. Viele Masken stellen Karten in Spalten nebeneinander (Firma, Kostensätze, Projekt, Artikel, Ticket,
   Servicevereinbarung); bei 1280 px ist das sechsspaltige Raster dort 280–460 px breit, w1/w2-Felder werden 44–145 px schmal und schneiden ab
   („Metallgewe“, „Lohngrupp“, „keine A“, „Mo–Fr ohne Feie“, „15 r“). Ist das Raster schmaler als 520 px, stehen w1/w2 halb, alles andere ganz breit. */
.fields:not(.fields-4) { container: fields / inline-size; }
@media (min-width: 768px) {
  @container fields (max-width: 519px) {
    .card .fields > .field.w1, .card .fields > .field.w2, .card .fields > .lookup.w1, .card .fields > .lookup.w2 { grid-column: span 3; }
    .card .fields > .field.w3, .card .fields > .field.w4, .card .fields > .lookup.w3, .card .fields > .lookup.w4 { grid-column: 1 / -1; }
  }
  @container fields (max-width: 359px) {
    .card .fields > .field.w2, .card .fields > .lookup.w2 { grid-column: 1 / -1; }
  }
}
/* FE-617 ⑩: Bei vielen offenen Tabs schrumpfte die Beschriftung auf 0 px – nachgestellt mit 12 Tabs bei 1280 px: der aktive Tab „Lager“
   war 50 px breit und zeigte nur Symbol und ×. Der aktive Tab schrumpft nicht mehr, die übrigen behalten die ersten Buchstaben;
   mit Maus erscheint × bei nicht aktiven Tabs erst beim Überfahren (über dem Textende), damit zwölf Tabs bei 1280 px Platz haben. */
.record-tab { min-width: 100px; }
.record-tab.active { flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) {
  .record-tab:not(.active) { min-width: 72px; }
  .record-tab:not(.active) > a { padding-right: var(--space-3); flex: 1 1 auto; }
  .record-tab:not(.active) .close:not(.dirty) { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); margin: 0;
    background: var(--surface-2); visibility: hidden; }
  .record-tab:not(.active):hover .close, .record-tab:not(.active):focus-within .close { visibility: visible; }
}


/* Stufe 13 R4 – FE-694: Folgeaktionen einer Zeile (Fristen) brechen nicht mitten im Link um */
.deadline-actions .link-button, .deadline-actions .btn { white-space: nowrap; }
/* Stufe 13 R4 – FE-536 ③: mehrzeilige Zelle (Prüfpunkt, Bemerkung) statt abgeschnittener Einzeile */
textarea.input { height: auto; min-height: 56px; padding: 6px 10px; resize: vertical; line-height: 1.35; }
/* Stufe 13 R4 – FE-536 ⑤: Zeilen mit Dateiwahl brechen am Handy um, statt die Seite zu verbreitern */
.inline-row { flex-wrap: wrap; }
.inline-row input[type="file"] { max-width: 100%; }

/* FE-732: Zielgrößen am Handy, Rest aus dem Klicktest Stufe 12 (FE-501).
   ① „Sortieren nach …“ (Adressen, Verkauf): Suche und Sortierung teilten sich eine Zeile, die Auswahl schrumpfte neben „Aufsteigend“ auf 29/33 px –
      sie steht jetzt in eigener Zeile und ist mindestens 8rem breit.
   ② Kontrollkästchen in Beschriftungen (Monteur-Einsatz „nicht ausgeführt“, „Kunde nicht anwesend“) 24 × 24 px statt 22 × 22 px (WCAG 2.5.8).
   ③ Artikelnummer-Links in den Positionen des Einsatzes: Trefferfläche 44 px über Innenabstand, das Zeilenbild bleibt. */
@media (max-width: 1023px) {
  .list-toolbar > .sort-select { flex-basis: 100%; }
  .sort-select select { min-width: 8rem; }
  .check input[type="checkbox"], .check input[type="radio"], .fields .check input[type="checkbox"] { width: 24px; height: 24px; }
  a.line-article-link { display: inline-block; padding-block: 14px; margin-block: -14px; min-width: var(--touch-target); }
}

/* Stufe 13 – R3: Einstellungen */

/* Stufe 13 – R3 */
/* FE-693 ⑦: Masken – je Karte/Reiter ein Häkchen pro Zeile statt Fließtext. */
.mask-checks { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
/* FE-507: Übersetzungsvorschlag der Monteur-Notiz, abgesetzt vom Original. */
.translate-note { margin-top: var(--space-1); }
.translate-note-result { border-left: 3px solid var(--border-strong); padding-left: var(--space-3); }
.translate-note-result p { margin: 0 0 var(--space-1); }
/* FE-561 ⑩: gestaltete Dateiauswahl (FileDropZone) in Einstellungen; Fokus über die unsichtbare Datei-Eingabe sichtbar machen. */
.file-drop-zone { margin-bottom: 0; width: 100%; }
.file-drop-zone.compact { min-height: 64px; padding: var(--space-2); }
.file-drop-zone:focus-within { border-color: var(--brand-grey); box-shadow: var(--focus-ring); }
.file-drop-zone input[type=file]:disabled { cursor: default; }
.file-drop-name { display: inline-flex; align-items: center; gap: 4px; color: var(--text-1); overflow-wrap: anywhere; }
/* FE-686 ⑤: Aktionen unter einer Karte der Handy-Liste (z. B. Fuhrpark › Fristen: Erledigen, Aufgabe, Termin). */
.card-list .card-list-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-4) 12px; }
.card-list .card-list-actions:empty { display: none; }
/* FE-630 ⑩: Am Handy kürzte die Kopfzeile den Mandanten auf „Bla…“. Bis 480 px zeigt sie wie mit Logo nur das Bildzeichen der Marke, der Name
   darf zweizeilig umbrechen (kleinere Schrift) und wird erst danach gekürzt; der volle Name steht im Tooltip. */
@media (max-width: 480px) {
  .mobile-header:not(.has-logo) .brand-wordmark { display: none; }
  .mobile-header:not(.has-logo) .wordmark { margin-left: var(--space-2) !important; }
  .mobile-header .title:not(.title-logo) { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; line-height: 17px; overflow-wrap: anywhere; }
}