/* MERGED-FROM-STYLES-CSS 2026-06-06 (Reihenfolge wie zuvor: styles.css zuerst) */

/* ==========================================================================
   SCHICHTEN (Cascade-Layers) — Kanban #95
   Die Reihenfolge hier entscheidet, wer wen ueberschreibt: spaeter genannt
   gewinnt, UNABHAENGIG von der Spezifitaet. Damit laesst sich das Portal
   global umstellen, ohne 4.400 gewachsene Zeilen anzufassen:

     legacy      Rest der 2026-06 hierher gemergten styles.css — verliert immer
     tokens      Farben, Abstaende, Radien + Breite/Dichte (Darstellungsmenue)
     base        Reset, Typografie, Ueberlauf-Bremse
     layout      App-Shell und Seitenbreite (.container, Sidebar, Topbar)
     komponenten Buttons, Karten, Tabellen, Formulare
     seiten      seitenspezifische Bloecke (der grosse gewachsene Teil)
     utilities   .u-*-Helfer — duerfen alles ueberschreiben

   Neue Regeln werden ans DATEIENDE geschrieben (Konvention CLAUDE.md §5) und
   dort per @layer <name> { ... } in die richtige Schicht eingehaengt: die
   Schicht zaehlt, nicht die Position in der Datei.
   ========================================================================== */
@layer legacy, tokens, base, layout, komponenten, seiten, utilities;

@layer legacy {
/* scrOffice — minimal, ruhig, lesbar */

:root {
  --bg: #f7f7f5;
  --surface: #ffffff;
  --border: #e3e3df;
  --text: #1a1a1a;
  --text-soft: #5a5a5a;
  --accent: #c44b1a;
  --accent-soft: #fce6dc;
  --success: #2d7a3e;
  --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 6px 16px rgba(0,0,0,0.04);
  --radius: 8px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg); color: var(--text);
  line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Layout */

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 2rem;
  padding: 0.75rem 1.5rem;
  position: sticky; top: 0; z-index: 10;
}
.brand a {
  font-weight: 700; color: var(--text); font-size: 1.1rem;
  letter-spacing: -0.01em;
}
.topnav { display: flex; gap: 1rem; flex: 1; }
.topnav a {
  color: var(--text-soft); padding: 0.35rem 0.6rem; border-radius: 4px;
}
.topnav a.active { color: var(--accent); background: var(--accent-soft); }
.userbox { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; }
.userbox .who { color: var(--text-soft); }
.userbox .logout { color: var(--text-soft); }

.main {
  max-width: 1100px; margin: 0 auto;
  padding: 2rem 1.5rem 6rem;
}

.bottombar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 0.5rem 1.5rem;
  font-size: 0.8rem; color: var(--text-soft);
  display: flex; gap: 0.5rem; align-items: center;
}
.bottombar .sep { opacity: 0.5; }

/* Inbox */

.pageheader h1 {
  font-size: 1.75rem; margin: 0 0 0.25rem;
}
.pageheader .lead {
  margin: 0 0 1.5rem; color: var(--text-soft);
}

.doc-list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

.doc-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow 150ms ease, transform 150ms ease, opacity 300ms ease;
}
.doc-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.doc-card.selected {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.doc-card.done {
  opacity: 0.4;
  pointer-events: none;
}
.card-check {
  position: absolute;
  top: 0.55rem; left: 0.55rem;
  z-index: 2;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border);
  border-radius: 4px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.card-check input[type="checkbox"] {
  margin: 0; width: 16px; height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.thumb-link {
  display: block;
  aspect-ratio: 1 / 1.3;
  background: #ebebe7;
  overflow: hidden;
}
.thumb-link img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}

.doc-meta {
  padding: 0.85rem 1rem 1rem;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.doc-title {
  margin: 0; font-size: 0.95rem; font-weight: 600;
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.doc-title a { color: var(--text); }
.doc-title a:hover { color: var(--accent); text-decoration: none; }

.doc-attrs {
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.2rem;
  font-size: 0.82rem; color: var(--text-soft);
}
.doc-attrs div { display: flex; gap: 0.4rem; }
.doc-attrs dt { margin: 0; min-width: 60px; }
.doc-attrs dt::after { content: ":"; }
.doc-attrs dd { margin: 0; color: var(--text); }
.doc-attrs.inline { flex-direction: row; flex-wrap: wrap; gap: 1rem; }
.doc-attrs.inline div { gap: 0.3rem; }

.tag-row {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  list-style: none; margin: 0; padding: 0;
}
.tag {
  display: inline-block;
  background: #eef2f5; color: #2c4053;
  padding: 0.1rem 0.5rem; border-radius: 999px;
  font-size: 0.72rem;
}

.empty {
  text-align: center; padding: 4rem 1rem;
  color: var(--text-soft);
}
.empty-emoji {
  display: block; font-size: 3rem; color: var(--success);
  margin-bottom: 0.5rem;
}

/* Dokument-Detail */

.doc-detail-head {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}
.doc-detail-head .crumbs {
  margin: 0 0 0.5rem; font-size: 0.85rem;
}
.doc-detail-head h1 {
  margin: 0 0 0.75rem;
  font-size: 1.4rem;
}
.doc-actions {
  margin-top: 1rem;
  display: flex; gap: 0.75rem; flex-wrap: wrap;
}

.btn {
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.55rem 1.1rem; border-radius: 6px;
  font-size: 0.9rem; font-weight: 500;
  cursor: pointer; text-decoration: none;
}
.btn:hover { background: #f0f0ec; text-decoration: none; }
.btn.primary {
  background: var(--accent); border-color: var(--accent); color: white;
}
.btn.primary:hover { background: #a83d14; }

.btn:disabled {
  opacity: 0.55; cursor: not-allowed;
}
.btn.done {
  background: var(--success); border-color: var(--success); color: white;
  cursor: default;
}
.btn.done:hover { background: var(--success); }

.btn.danger {
  background: var(--surface); border-color: #b91c1c; color: #b91c1c;
}
.btn.danger:hover { background: #fdecec; color: #991b1b; border-color: #991b1b; }
.btn.danger:disabled { opacity: 0.55; }

/* Bulk-Aktion-Bar im Inbox-Header */
.bulkbar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.65rem 1rem;
  margin-bottom: 1rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.bulk-select-all {
  display: inline-flex; align-items: center; gap: 0.5rem;
  cursor: pointer; font-size: 0.9rem;
}
.bulk-select-all input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--accent);
}
.bulk-count {
  color: var(--text-soft); font-size: 0.85rem;
  flex: 1; min-width: 0;
}
.bulk-actions {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
}

/* Inline-Status fuer Action-Buttons */
.action-status {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--text-soft);
  align-self: center;
  min-height: 1.2em;
}
.action-status.status-busy { color: var(--text-soft); }
.action-status.status-success,
.action-status .status-success { color: var(--success); font-weight: 500; }
.action-status.status-error { color: #c0392b; font-weight: 500; }

.pdf-viewer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  height: calc(100vh - 280px);
  min-height: 500px;
  overflow: hidden;
}
.pdf-viewer object { width: 100%; height: 100%; }

/* Doc-Detail: Dokument links groß + sticky, Eingabefelder rechts angeheftet.
   Ziel: Dokument bleibt immer im Blick, kein Seiten-Scroll zwischen Prüfen
   und Ausfüllen. */
/* .container:has(.doc-detail) — jetzt aus --content-max (2200px) */

.doc-topbar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.9rem;
  margin-bottom: 0.75rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem 1.25rem; flex-wrap: wrap;
}
.doc-topbar .doc-carousel {
  display: flex; align-items: center; gap: 0.75rem;
  min-width: 0; flex: 1 1 auto;
}
.doc-topbar h1 {
  margin: 0; font-size: 0.95rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; flex: 1 1 auto;
}
.doc-topbar .doc-nav {
  display: inline-flex; align-items: center; gap: 0.5rem; flex: 0 0 auto;
}
.doc-topbar .doc-attrs.inline { flex: 0 0 auto; }

/* Doc-Detail-Bühne: PDF skaliert zwischen App-Sidebar (links) und der FEST
   stehenden Bearbeitungsleiste (rechts). Kein Overlay, kein Ein-/Ausklappen. */
.doc-stage {
  position: sticky;
  top: calc(var(--topbar-h) + 0.75rem);
  height: calc(100vh - var(--topbar-h) - 1.5rem);
  min-height: 420px;
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
}
.doc-stage .pdf-viewer {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  min-height: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* Eigener Canvas-Viewer (pdf.js): Toolbar + scrollbare Seiten */
.pdf-toolbar {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.pdf-toolbar .btn { padding: 0.15rem 0.6rem; }
.pdf-zoom-label { min-width: 3.2rem; text-align: center; font-size: 0.85rem; color: var(--muted, #667); }
.pdf-original { margin-left: auto; white-space: nowrap; }
.pdf-select-hint { margin-left: 0.75rem; font-size: 0.85rem; color: var(--accent, #c44b1a); font-weight: 600; }
.pdf-pages {
  flex: 1 1 auto;
  overflow: auto;
  background: #8a9099;
  padding: 0.75rem 0;
  text-align: center;
}
.pdf-page {
  position: relative;
  display: inline-block;
  margin: 0 auto 0.75rem;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  line-height: 0;
}
.pdf-page canvas { display: block; }
.pdf-pages.select-mode .pdf-page { cursor: crosshair; }
.pdf-select-rect {
  position: absolute;
  border: 2px solid var(--accent, #c44b1a);
  background: rgba(196, 75, 26, 0.15);
  pointer-events: none;
  z-index: 3;
}

.doc-side {
  flex: 0 0 auto;
  width: min(430px, 44%);
  display: flex; flex-direction: column;
  min-height: 0;
}
.doc-side-inner {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  padding: 0;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.doc-side .side-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(20, 30, 40, 0.08);
  padding: 0.65rem 0.75rem;
}
.doc-side .doc-actions { margin-top: 0; }
.doc-side .project-assign {
  margin-top: 0; padding-top: 0; border-top: 0;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.doc-side .cost-fields { margin-top: 0; }
.doc-side .erfassung { border-left: 3px solid var(--accent, #c44b1a); }

/* Schmale Spalte: Kostenposition-Felder dürfen voll ausnutzen */
.doc-side .cost-head label { max-width: none; }

/* Durchgehende Belegerfassung: kompaktes 2-Spalten-Raster */
.erfassung-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 0.6rem;
  margin-bottom: 0.6rem;
}
.erfassung-grid label { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.82rem; min-width: 0; }
.erfassung-grid label.span2 { grid-column: 1 / -1; }
.erfassung-grid input, .erfassung-grid select { width: 100%; min-width: 0; }
.erfassung-grid .lbl { display: inline-flex; align-items: center; gap: 0.3rem; }
.erfassung-book { border-top: 1px solid var(--border); padding-top: 0.6rem; }
.cost-hidden { display: none !important; }
.cost-head .lbl { display: inline-flex; align-items: center; gap: 0.3rem; }

/* Anker-Symbol: startet den Markiermodus auf dem Dokument */
.anchor-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted, #667);
  border-radius: 4px;
  width: 1.35rem; height: 1.35rem;
  line-height: 1;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 0;
}
.anchor-btn:hover { color: var(--accent, #c44b1a); border-color: var(--accent, #c44b1a); }
.anchor-btn.active { background: var(--accent, #c44b1a); color: #fff; border-color: var(--accent, #c44b1a); }
.anchor-btn.saved { color: var(--success, #1f8a4c); border-color: var(--success, #1f8a4c); }

/* Error Page */
.error-page {
  text-align: center; padding: 3rem 1rem;
}
.error-page h1 { color: var(--accent); }
.error-page .error-msg {
  color: var(--text-soft); margin: 1rem 0 2rem;
}

/* Success Page (Lexware-Transfer) */
.success-page {
  text-align: center; padding: 3rem 1rem;
  max-width: 720px; margin: 0 auto;
}
.success-page h1 { margin-bottom: 0.5rem; }
.success-page .lead { color: var(--text-soft); margin-bottom: 1.5rem; }
.success-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--success); color: white;
  font-size: 2rem; font-weight: 700;
  margin-bottom: 1rem;
}

/* Bulk-Assign-Dropdown */
.bulk-assign-wrap {
  display: inline-flex; gap: 0.35rem; align-items: center;
}
.bulk-assign-wrap select {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 0.9rem;
  max-width: 220px;
}

/* Projekt-Tags auf Inbox-Karten und Detail-Seite */
.project-tag-row {
  list-style: none; padding: 0; margin: 0.5rem 0 0;
  display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.project-tag {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: #e8f1fa;
  color: #1e4b7a;
  border: 1px solid #b9d4ec;
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 500;
}
.project-tag a { color: inherit; text-decoration: none; }
.project-tag a:hover { text-decoration: underline; }
.project-tag .tag-remove {
  border: 0; background: transparent; cursor: pointer;
  color: #5a7a9a; font-size: 1rem; line-height: 1;
  padding: 0 0.1rem;
}
.project-tag .tag-remove:hover { color: #b91c1c; }

/* Projekt-Section auf Doc-Detail */
.project-assign {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.project-assign h3 {
  font-size: 0.9rem; margin: 0 0 0.5rem; color: var(--text-soft);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.project-assign .muted-inline {
  color: var(--text-soft); font-size: 0.9rem; font-style: italic;
}
.project-add {
  margin-top: 0.75rem;
  display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
}
.project-add select {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 0.9rem;
  max-width: 280px;
}
.btn-link {
  background: transparent; border: 0; padding: 0;
  color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline;
}
.btn-link.danger { color: #b91c1c; }
.btn-link:hover { opacity: 0.8; }

/* Projekt-Liste */
.project-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.project-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.project-card-link {
  display: block; padding: 1rem; color: inherit; text-decoration: none;
}
.project-card:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.06); }
.project-card-link h2 {
  font-size: 1.05rem; margin: 0 0 0.5rem;
}
.project-status-abgeschlossen { opacity: 0.65; }

.status-pill {
  display: inline-block; padding: 0.1rem 0.55rem;
  border-radius: 999px; font-size: 0.75rem; font-weight: 500;
  text-transform: lowercase;
}
.status-aktiv { background: #e2f2e6; color: #2d7a3e; }
.status-pausiert { background: #fff3d6; color: #8a5b00; }
.status-abgeschlossen { background: #ececec; color: #5a5a5a; }

/* Forms */
.form-grid {
  max-width: 640px;
  display: flex; flex-direction: column; gap: 1rem;
  margin: 1rem 0;
}
.form-row { display: flex; flex-direction: column; gap: 0.35rem; }
.form-row label { font-weight: 500; font-size: 0.9rem; }
.form-row small { color: var(--text-soft); font-size: 0.8rem; }
.form-row input,
.form-row textarea,
.form-row select {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit; font-size: 0.95rem;
  background: var(--surface);
}
.form-row textarea { font-family: inherit; resize: vertical; }
.form-actions { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
.form-inline {
  display: flex; gap: 0.5rem; align-items: end; flex-wrap: wrap;
  margin-top: 0.75rem;
}
.form-inline label {
  display: flex; flex-direction: column; gap: 0.2rem;
  font-size: 0.85rem;
}
.form-inline input,
.form-inline select {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.9rem;
  background: var(--surface);
}
form.inline { display: inline; }

/* Card-Sections auf Projekt-Detail */
.card-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin: 1rem 0;
}
.card-section h2 {
  font-size: 1.05rem; margin: 0 0 0.75rem;
}
.card-section .muted { color: var(--text-soft); }
.danger-zone { border-color: #f5c6c6; }

/* Beteiligte */
.member-list {
  list-style: none; padding: 0; margin: 0 0 0.75rem;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.member {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.9rem;
}
.member-kind {
  display: inline-block; min-width: 1.8rem;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  font-size: 0.7rem; font-weight: 600;
  text-align: center;
}
.member-mitarbeiter .member-kind { background: #e8f1fa; color: #1e4b7a; }
.member-extern .member-kind { background: #fdecec; color: #991b1b; }
.member-email { color: var(--text-soft); font-size: 0.85rem; }

/* Doc-Card fehlt-Variante (in Paperless geloescht) */
.doc-card.missing { opacity: 0.55; }
.missing-thumb {
  background: #ececec; color: var(--text-soft);
  font-size: 2rem; display: flex; align-items: center; justify-content: center;
}

/* Alert */
.alert { padding: 0.75rem 1rem; border-radius: 6px; margin: 0.75rem 0; }
.alert.error { background: #fdecec; color: #991b1b; border: 1px solid #f5c6c6; }

/* Nachkalkulations-Tabelle */
.kalk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin: 0.5rem 0;
}
.kalk-table th,
.kalk-table td {
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}
.kalk-table th { background: #f3f3ef; font-weight: 600; }
.kalk-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.kalk-row td { background: var(--surface); }
.kalk-subtotal td { background: #f7f7f3; font-weight: 500; font-style: italic; color: var(--text-soft); }
.kalk-total td { background: #f3f3ef; font-weight: 600; border-top: 2px solid var(--border); }
.kalk-db td { background: #e2f2e6; font-weight: 700; }
.kalk-table .doc-link { text-decoration: none; }

.cat-pill {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cat-lohn         { background: #fff3d6; color: #8a5b00; }
.cat-material     { background: #e2f2e6; color: #2d7a3e; }
.cat-fremdleistung{ background: #e8f1fa; color: #1e4b7a; }
.cat-sonstige     { background: #ececec; color: #5a5a5a; }

.inline-rate {
  display: inline-flex; gap: 0.25rem; align-items: center;
}
.inline-rate input {
  width: 5rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--border); border-radius: 4px;
  font-size: 0.85rem; text-align: right;
}

.add-form summary {
  cursor: pointer; display: inline-block;
  margin: 1rem 0 0.5rem;
}
.form-grid-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem 1rem;
  margin: 0.75rem 0 0.5rem;
  max-width: none;
}
.form-grid-row label {
  display: flex; flex-direction: column; gap: 0.2rem;
  font-size: 0.85rem;
}
.form-grid-row .form-actions {
  grid-column: 1 / -1;
}

/* Hours-Grid */
.hours-grid-wrap {
  overflow-x: auto;
  margin: 0.5rem 0 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.hours-grid {
  border-collapse: collapse;
  font-size: 0.85rem;
  min-width: 100%;
}
.hours-grid th,
.hours-grid td {
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--border);
  text-align: center;
  vertical-align: middle;
}
.hours-grid th { background: #f3f3ef; font-weight: 600; font-size: 0.8rem; }
.hours-grid .emp-col {
  text-align: left;
  position: sticky; left: 0;
  background: var(--surface);
  z-index: 1;
  min-width: 160px;
  white-space: nowrap;
}
.hours-grid thead .emp-col { background: #f3f3ef; }
.hours-grid .day-col { min-width: 52px; }
.hours-grid .add-day-col { width: 60px; background: #f3f3ef; }
.hours-grid .num { text-align: right; font-variant-numeric: tabular-nums; }
.hours-grid .col-sums td { background: #f7f7f3; font-weight: 600; }
.hours-grid input.hours-input {
  width: 48px;
  padding: 0.2rem 0.3rem;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  font-size: 0.85rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.hours-grid input.hours-input:focus {
  border-color: var(--accent); outline: none; background: white;
}
.hours-grid input.hours-input.saving { background: #fff8e1; }
.hours-grid input.hours-input.saved { background: #e2f2e6; }
.hours-grid input.hours-input.error { background: #fdecec; border-color: #b91c1c; }
.btn.btn-tiny { padding: 0.2rem 0.5rem; font-size: 0.75rem; }
.btn-link.small { font-size: 0.75rem; margin-left: 0.3rem; }

/* Cost-Felder beim Doc-Assign */
.cost-fields { margin-top: 0.75rem; }
.cost-fields summary { cursor: pointer; display: inline-block; }
/* Pflicht-Sektion (nicht mehr aufklappbar/optional) */
.cost-fields.cost-required {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent, #c44b1a);
  border-radius: 8px;
  padding: 0.75rem 0.9rem 0.9rem;
  background: var(--surface, #fff);
}
.cost-heading { margin: 0 0 0.25rem; font-size: 0.95rem; }
.cost-heading::after { content: " *"; color: var(--accent, #c44b1a); }
.cost-fields-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.5rem 0.75rem;
  margin: 0.5rem 0;
  padding: 0.75rem;
  background: #f7f7f3;
  border-radius: 6px;
}
.cost-fields-grid label {
  display: flex; flex-direction: column; gap: 0.2rem;
  font-size: 0.8rem;
}
.cost-fields-grid input,
.cost-fields-grid select {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.85rem;
}

/* Timeline */
/* Projekt-Timeline: Punkt-auf-Achse-Darstellung 2026-08-28 ersetzt durch
   Monats-Band + Chronik (Regeln im Block "Projekt-Timeline" am Dateiende). */

@media (max-width: 600px) {
  /* (.main/.topbar-Altregeln entfernt — Topbar-Mobile lebt im Block
     "Mobile-Optimierung" am Dateiende) */
  .doc-list { grid-template-columns: 1fr; }
  .project-list { grid-template-columns: 1fr; }
}

/* Dokumente-Uebersicht (Suche, Pager, unassigned-Hinweis) */
.doc-search {
  display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;
  margin: 0 0 1.25rem;
}
.doc-search input[type="search"] {
  flex: 1; min-width: 240px;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border); border-radius: 6px;
  font: inherit; font-size: 0.95rem; background: var(--surface);
}
.doc-search select {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); font-size: 0.9rem; max-width: 220px;
}
.doc-search .doc-date {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.85rem; color: var(--text-soft); white-space: nowrap;
}
.doc-search .doc-date input[type="date"] {
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); font: inherit; font-size: 0.9rem; color: var(--text);
}
.doc-unassigned {
  margin: 0.4rem 0 0; font-size: 0.78rem; color: var(--text-soft); font-style: italic;
}
.pager {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin: 1.5rem 0 0;
}
.pager .pager-info { color: var(--text-soft); font-size: 0.9rem; }
.pager .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

} /* /@layer legacy */
/* ---- ehemals app.css ---- */
/* ==========================================================================
   scrOffice — Design-System "app.css"
   Modern, ruhig, mobile-first. Ein Token-Layer, Dark-Mode + Akzentfarben,
   App-Shell (Topbar + einklappbare Sidebar), Komponenten.

   Aufbau:
     1. Design-Tokens (Light / Dark / Akzente)
     2. Reset & Basistypografie
     3. App-Shell (Topbar, Sidebar, Content, Drawer)
     4. Komponenten (Buttons, Badges, Cards, Breadcrumb, KPI-Detailbox,
        Tabellen, Forms, Empty-State, Toast)
     5. Utilities
     6. Reduced-Motion & Print
   ========================================================================== */

@layer tokens {
/* 1. ---------------------------------------------------------------- TOKENS */

:root {
  /* Flächen & Linien */
  --bg:            #f5f6f8;
  --surface:       #ffffff;
  --surface-2:     #f1f3f5;
  --surface-3:     #e9ecef;
  --border:        #e4e7eb;
  --border-strong: #d2d7dd;

  /* Text */
  --text:      #1b1f24;
  --text-soft: #5b636e;
  --text-faint:#8a929c;

  /* Akzent (Default = das gewachsene Portal-Orange) */
  --accent:         #c8501c;
  --accent-hover:   #ad4216;
  --accent-soft:    #fce9e0;
  --accent-contrast:#ffffff;
  --accent-ring:    rgba(200, 80, 28, 0.30);

  /* Semantik */
  --success: #1f8a4c;  --success-soft: #e3f3e8;
  --warning: #9a6700;  --warning-soft: #fdf0d3;
  --danger:  #c5341f;  --danger-soft:  #fce8e6;
  --info:    #1d6fb8;  --info-soft:    #e6f1fb;

  /* Radius */
  --r-sm:  6px;
  --r:     10px;
  --r-lg:  14px;
  --r-pill:999px;

  /* Schatten (weich, geschichtet) */
  --shadow-1: 0 1px 2px rgba(16,24,40,0.05), 0 1px 3px rgba(16,24,40,0.04);
  --shadow-2: 0 2px 4px rgba(16,24,40,0.06), 0 6px 16px rgba(16,24,40,0.06);
  --shadow-3: 0 8px 24px rgba(16,24,40,0.12), 0 2px 6px rgba(16,24,40,0.08);

  /* Abstände */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;   --s7: 3rem;

  /* Maße App-Shell */
  --topbar-h:  56px;
  --sidebar-w: 248px;
  /* Lesebreite des Inhalts. Bis 09.09.2026 standen hier 1180px — auf 27 und 32 Zoll
     blieb links und rechts die halbe Flaeche leer (Rueckmeldung Oliver mit Screenshot).
     Jetzt gilt ueberall dasselbe Grundmass 2200px — der Wert, den /belege und /bank seit
     Kanban #9 auf 32 Zoll bewaehrt haben. Listen, die von Breite leben (Lohn, Arbeitszeit-
     boegen, Developer), heben ihn selbst auf. Die rund 20 auto-fit-Raster im Portal fuellen
     die neue Breite von selbst mit mehr Spalten. */
  --content-max: 2200px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-num: "SF Mono", "Segoe UI Mono", "Roboto Mono", ui-monospace, monospace;
}

/* Dark-Mode */
[data-theme="dark"] {
  --bg:            #0f1216;
  --surface:       #171b21;
  --surface-2:     #1d222a;
  --surface-3:     #252c35;
  --border:        #2a313b;
  --border-strong: #3a4350;

  --text:      #e7ebf0;
  --text-soft: #9aa4b1;
  --text-faint:#6b7480;

  --accent-soft:    #3a2014;
  --accent-ring:    rgba(220, 110, 60, 0.40);

  --success-soft: #15281c;
  --warning-soft: #2c2410;
  --danger-soft:  #2c1714;
  --info-soft:    #112536;

  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 2px 8px rgba(0,0,0,0.45);
  --shadow-3: 0 10px 30px rgba(0,0,0,0.55);
}

/* Akzent-Varianten (per [data-accent] am <html>) */
[data-accent="blue"]   { --accent:#1d6fb8; --accent-hover:#185c98; --accent-soft:#e6f1fb; --accent-ring:rgba(29,111,184,.3); }
[data-accent="green"]  { --accent:#1f8a4c; --accent-hover:#19733f; --accent-soft:#e3f3e8; --accent-ring:rgba(31,138,76,.3); }
[data-accent="violet"] { --accent:#6d4cc4; --accent-hover:#5b3fa6; --accent-soft:#ece6fa; --accent-ring:rgba(109,76,196,.3); }
[data-accent="slate"]  { --accent:#475569; --accent-hover:#374151; --accent-soft:#eaeef3; --accent-ring:rgba(71,85,105,.3); }
[data-theme="dark"][data-accent="blue"]   { --accent-soft:#102536; }
[data-theme="dark"][data-accent="green"]  { --accent-soft:#13281b; }
[data-theme="dark"][data-accent="violet"] { --accent-soft:#221a3a; }
[data-theme="dark"][data-accent="slate"]  { --accent-soft:#1c232c; }

} /* /@layer tokens */

@layer base {
/* 2. ------------------------------------------------------ RESET & TYPO */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.num { font-variant-numeric: tabular-nums; }

} /* /@layer base */

@layer layout {
/* 3. -------------------------------------------------------- APP-SHELL */

.app {
  min-height: 100vh;
}

/* Topbar */
.topbar {
  position: sticky; top: 0; z-index: 40;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--s4);
  background: var(--surface); /* Fallback ohne color-mix/backdrop-filter */
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar .icon-btn { color: var(--text-soft); }
.brand {
  display: flex; align-items: center; gap: var(--s2);
  font-weight: 700; color: var(--text); font-size: 1.02rem;
  letter-spacing: -0.02em; white-space: nowrap;
}
.topbar-search {
  flex: 1; max-width: 420px;
  display: none; align-items: center; gap: var(--s2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 0.4rem 0.85rem;
  color: var(--text-faint);
}
.topbar-search input {
  border: 0; background: transparent; outline: none;
  font: inherit; font-size: 0.9rem; color: var(--text); width: 100%;
}
.topbar-spacer { flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: var(--s1); }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; min-width: 40px;
  border: 0; background: transparent; color: var(--text-soft);
  border-radius: var(--r); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn svg { width: 20px; height: 20px; }

/* User-Chip + Menü */
.usermenu { position: relative; }
.user-chip {
  display: flex; align-items: center; gap: var(--s2);
  padding: 0.25rem 0.5rem 0.25rem 0.3rem;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); cursor: pointer; color: var(--text);
}
.user-chip:hover { background: var(--surface-2); }
.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-size: 0.75rem; font-weight: 700;
}
.user-chip .uname { font-size: 0.85rem; font-weight: 550; }

.menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 240px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-3);
  padding: var(--s2); z-index: 50;
  display: none;
}
.menu.is-open { display: block; }
.menu h4 {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-faint); margin: var(--s2) var(--s2) var(--s1);
}
.menu a, .menu button.menu-item {
  display: flex; align-items: center; gap: var(--s2);
  width: 100%; text-align: left;
  padding: 0.5rem 0.6rem; border-radius: var(--r-sm);
  color: var(--text); font: inherit; font-size: 0.9rem;
  border: 0; background: transparent; cursor: pointer; text-decoration: none;
}
.menu a:hover, .menu button.menu-item:hover { background: var(--surface-2); text-decoration: none; }
.menu .menu-sep { height: 1px; background: var(--border); margin: var(--s2) 0; }

/* Theme-/Akzent-Auswahl im Menü */
.seg { display: flex; gap: 4px; padding: 0 var(--s2) var(--s2); }
.seg button {
  flex: 1; padding: 0.4rem; font: inherit; font-size: 0.8rem;
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--r-sm); cursor: pointer; color: var(--text-soft);
}
.seg button[aria-pressed="true"] {
  border-color: var(--accent); color: var(--accent);
  background: var(--accent-soft); font-weight: 600;
}
.swatches { display: flex; gap: var(--s2); padding: 0 var(--s2) var(--s3); }
.swatch {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; outline: 1px solid var(--border);
}
.swatch[aria-pressed="true"] { border-color: var(--surface); outline: 2px solid var(--text); }

/* Layout-Grid: mobile = eine Spalte, Sidebar als Drawer */
.shell {
  display: grid;
  grid-template-columns: 1fr;
}
.app-sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 60;
  width: min(84vw, var(--sidebar-w));
  transform: translateX(-100%);
  transition: transform 220ms ease;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: var(--s3);
  display: flex; flex-direction: column; gap: var(--s2);
  overflow-y: auto;
}
.app-sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow-3); }
.sidebar-backdrop {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(10,14,20,0.45); border: 0;
  opacity: 0; visibility: hidden; transition: opacity 200ms ease;
}
.sidebar-backdrop.is-open { opacity: 1; visibility: visible; }

.nav-group { margin-bottom: var(--s2); }
.nav-group > .nav-label {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-faint); padding: var(--s2) var(--s2) var(--s1); font-weight: 600;
}
.nav-item {
  display: flex; align-items: center; gap: var(--s3);
  padding: 0.55rem 0.65rem; border-radius: var(--r-sm);
  color: var(--text-soft); font-size: 0.92rem; font-weight: 500;
  text-decoration: none; position: relative;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-item.active::before {
  content: ""; position: absolute; left: 0;
  top: 20%; bottom: 20%; width: 3px; border-radius: 3px; background: var(--accent);
}
.nav-item svg { width: 18px; height: 18px; flex: none; }
.nav-item .nav-badge {
  margin-left: auto; font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--surface-3); color: var(--text-faint);
  padding: 0.1rem 0.4rem; border-radius: var(--r-pill);
}
.nav-item.is-disabled { color: var(--text-faint); cursor: default; }
.nav-item.is-disabled:hover { background: transparent; color: var(--text-faint); }
/* System-Block (Historie + Einstellungen): vom Standard-Menue abgesetzt,
   ans untere Ende der Sidebar geschoben. */
.app-sidebar > nav { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.nav-group--system {
  margin-top: auto;
  padding-top: var(--s2);
  border-top: 1px solid var(--border);
}
.sidebar-foot { margin-top: var(--s2); padding-top: var(--s3); color: var(--text-faint); font-size: 0.75rem; }

/* ---- Einstellungsseite ---- */
.settings-flash {
  margin: 0 0 1rem; padding: 0.6rem 0.9rem; border-radius: var(--radius, 8px);
  font-size: 0.9rem; border: 1px solid var(--border);
}
.settings-flash.is-success { background: #e8f6ec; border-color: #bfe2c8; color: #1f7a3d; }
.settings-flash.is-error   { background: #fdecec; border-color: #f3c2c2; color: #a12626; }

.settings-tabs {
  display: flex; gap: 0.25rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--border); margin-bottom: 1.25rem;
}
.settings-tab {
  padding: 0.55rem 1rem; font-size: 0.92rem; font-weight: 500;
  color: var(--text-soft); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.settings-tab:hover { color: var(--text); text-decoration: none; }
.settings-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

.settings-panel h2 { font-size: 1.05rem; margin: 0 0 0.5rem; }
.settings-table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.9rem; }
.settings-table th {
  text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-soft); padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border);
}
.settings-table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.settings-table tr.is-inactive { opacity: 0.5; }
.settings-actions-cell { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.settings-inline-edit summary { cursor: pointer; }
.settings-edit-form { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; flex-wrap: wrap; }
.settings-add-form {
  display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap;
  margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border);
}
.settings-add-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; }
.settings-add-form input[type="text"], .settings-add-form select {
  padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); font-size: 0.9rem; min-width: 220px;
}
.settings-add-form input[type="color"] { width: 44px; height: 38px; padding: 2px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }

/* Nummernkreise */
.nk-form h3 { margin: 0 0 .6rem; }
.nk-form .nk-source { display: flex; gap: .6rem; align-items: flex-start; margin: .9rem 0 .4rem; }
.nk-form .nk-source input[type="radio"] { margin-top: .25rem; }
.nk-form .nk-fields { display: flex; gap: 1rem; flex-wrap: wrap; margin: .5rem 0 .3rem 1.7rem; }
.nk-form .nk-fields label { display: flex; flex-direction: column; gap: .25rem; font-size: .82rem; font-weight: 600; color: var(--text-soft); }
.nk-form .nk-fields input { padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; font-weight: 400; max-width: 160px; }
.nk-form > .muted-inline { margin-left: 1.7rem; }
.nk-form button[type="submit"] { margin-top: 1rem; }

/* Content */
.app-content { min-width: 0; }
.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--s4) var(--s4) var(--s7);
}

/* Desktop: Sidebar fest, Drawer aus */
@media (min-width: 960px) {
  .shell { grid-template-columns: var(--sidebar-w) 1fr; }
  .app-sidebar {
    position: sticky; top: var(--topbar-h);
    height: calc(100vh - var(--topbar-h));
    transform: none; box-shadow: none; z-index: 1;
  }
  .sidebar-backdrop { display: none; }
  .nav-toggle { display: none; }
  .topbar-search { display: flex; }
  .container { padding: var(--s5) var(--s6) var(--s7); }
}

} /* /@layer layout */

@layer komponenten {
/* 4. ------------------------------------------------------- KOMPONENTEN */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 0.55rem 1rem; border-radius: var(--r-sm);
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); font: inherit; font-size: 0.9rem; font-weight: 550;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn svg { width: 16px; height: 16px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--text-soft); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn.danger { border-color: var(--danger); color: var(--danger); background: var(--surface); }
.btn.danger:hover { background: var(--danger-soft); }
.btn.sm { padding: 0.35rem 0.7rem; font-size: 0.82rem; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-link {
  background: transparent; border: 0; padding: 0; font: inherit;
  color: var(--accent); cursor: pointer; text-decoration: none;
}
.btn-link:hover { text-decoration: underline; }
.btn-link.danger { color: var(--danger); }

/* Badges / Pills */
.badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.15rem 0.6rem; border-radius: var(--r-pill);
  font-size: 0.74rem; font-weight: 600; line-height: 1.4;
}
.badge::before { content:""; width:6px; height:6px; border-radius:50%; background: currentColor; opacity:.9; }
.badge.solid::before { display: none; }
.badge.aktiv        { background: var(--success-soft); color: var(--success); }
.badge.pausiert     { background: var(--warning-soft); color: var(--warning); }
.badge.abgeschlossen{ background: var(--surface-3);    color: var(--text-soft); }
.badge.info    { background: var(--info-soft);    color: var(--info); }
.badge.danger  { background: var(--danger-soft);  color: var(--danger); }
.badge.success { background: var(--success-soft); color: var(--success); }
.badge.warning { background: var(--warning-soft); color: var(--warning); }
.badge.neutral { background: var(--surface-3);    color: var(--text-soft); }

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.card + .card { margin-top: var(--s4); }
.card-head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--border);
}
.card-head h2 { font-size: 1rem; }
.card-head .card-head-icon {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
}
.card-head .card-head-icon svg { width: 17px; height: 17px; }
.card-head .count { color: var(--text-faint); font-weight: 500; font-size: 0.92rem; }
.card-head .head-actions { margin-left: auto; display: flex; gap: var(--s2); }
.card-body { padding: var(--s5); }
.card-body.flush { padding: 0; }

/* Seitenkopf + Breadcrumb */
.breadcrumb {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  font-size: 0.82rem; color: var(--text-faint); margin-bottom: var(--s2);
}
.breadcrumb a { color: var(--text-soft); }
.breadcrumb .sep { opacity: 0.6; }
.page-head {
  display: flex; align-items: flex-start; gap: var(--s4);
  flex-wrap: wrap; margin-bottom: var(--s5);
}
.page-head .titlewrap { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.page-head h1 { font-size: 1.5rem; display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.page-head .subtitle { color: var(--text-soft); font-size: 0.92rem; }
.page-head .page-actions { margin-left: auto; display: flex; gap: var(--s2); flex-wrap: wrap; }

/* KPI-Detailbox */
.detailbox {
  display: grid; gap: 1px;
  grid-template-columns: repeat(2, 1fr);
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--s5);
  box-shadow: var(--shadow-1);
}
.kpi {
  background: var(--surface);
  padding: var(--s4) var(--s4);
  display: flex; flex-direction: column; gap: 0.3rem;
}
.kpi .kpi-label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-faint); font-weight: 600;
  display: flex; align-items: center; gap: 0.35rem;
}
.kpi .kpi-value { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.kpi .kpi-sub { font-size: 0.76rem; color: var(--text-soft); }
.kpi.good .kpi-value { color: var(--success); }
.kpi.bad  .kpi-value { color: var(--danger); }
.kpi.accent .kpi-value { color: var(--accent); }
@media (min-width: 640px)  { .detailbox { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .detailbox { grid-template-columns: repeat(6, 1fr); } }

/* Tabellen */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.table th, .table td {
  padding: 0.65rem 0.85rem; text-align: left;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.table thead th {
  position: sticky; top: 0;
  background: var(--surface-2); color: var(--text-soft);
  font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em;
}
.table tbody tr:hover td { background: var(--surface-2); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .tfoot td, .table tr.total td {
  background: var(--surface-2); font-weight: 700; border-top: 2px solid var(--border-strong);
}
.table .first-sticky { position: sticky; left: 0; background: var(--surface); z-index: 1; }
.amount-open { color: var(--danger); font-weight: 600; }
.cell-muted { color: var(--text-faint); }

/* Forms */
.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field label { font-size: 0.85rem; font-weight: 550; color: var(--text-soft); }
.input, .field input, .field select, .field textarea {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); font: inherit; font-size: 0.92rem;
}
.input:focus, .field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring);
}
.form-row { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: flex-end; }

/* Empty-State */
.empty {
  text-align: center; padding: var(--s7) var(--s4); color: var(--text-soft);
  display: flex; flex-direction: column; align-items: center; gap: var(--s3);
}
.empty .empty-icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--surface-2); color: var(--text-faint);
  display: grid; place-items: center;
}
.empty .empty-icon svg { width: 26px; height: 26px; }

/* Toast */
.toast-wrap { position: fixed; right: var(--s4); bottom: var(--s4); z-index: 80; display: flex; flex-direction: column; gap: var(--s2); }
.toast {
  display: flex; align-items: center; gap: var(--s2);
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--success);
  border-radius: var(--r); box-shadow: var(--shadow-3);
  padding: 0.7rem 0.9rem; font-size: 0.9rem; min-width: 220px;
}

/* 5. ---------------------------------------------------------- UTILITIES */
.row { display: flex; align-items: center; gap: var(--s3); }
.wrap { flex-wrap: wrap; }
.muted { color: var(--text-soft); }
.faint { color: var(--text-faint); }
.grid-cards { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 720px)  { .grid-cards.cols-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .grid-cards.cols-3 { grid-template-columns: repeat(3,1fr); } }
.stack > * + * { margin-top: var(--s4); }

/* 6. ----------------------------------------------- MOTION & PRINT */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
@media print {
  .topbar, .app-sidebar, .sidebar-backdrop, .page-actions, .toast-wrap { display: none !important; }
  .shell { grid-template-columns: 1fr; }
  .card, .detailbox { box-shadow: none; }
  body { background: #fff; }
} /* /@layer komponenten */

@layer seiten {
}

/* === Fix (2026-06-05): native Form-Controls (Dropdowns) folgen dem Theme ===
   Ohne color-scheme rendert der Browser <select>-Popups im OS-Hellschema ->
   dunkle Option-Schrift auf dunklem Grund im Dark-Mode. */
:root,
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }

/* Belt-and-suspenders: Optionen explizit lesbar in beiden Themes */
select option,
select optgroup {
  background-color: var(--surface);
  color: var(--text);
}


/* === Durchsuchbare Combobox (2026-06-05) === */
.combo { position: relative; display: inline-block; min-width: 280px; max-width: 380px; vertical-align: bottom; }
.combo-input {
  width: 100%; padding: 0.45rem 0.6rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 0.9rem;
}
.combo-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring, rgba(196,75,26,.30)); }
.combo.disabled { opacity: .55; pointer-events: none; }
.combo-panel {
  position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 320px; overflow-y: auto;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-2, 0 6px 18px rgba(0,0,0,.35)); display: none;
}
.combo.open .combo-panel { display: block; }
.combo-opt { padding: 0.5rem 0.7rem; cursor: pointer; font-size: 0.9rem; color: var(--text); line-height: 1.3; }
.combo-opt:hover, .combo-opt.active { background: var(--accent-soft); }
.combo-empty { padding: 0.5rem 0.7rem; color: var(--text-soft); font-size: 0.85rem; }


/* === Kostenposition speichern (2026-06-05) === */
.cost-actions { display: flex; gap: 0.7rem; align-items: center; margin-top: 0.7rem; flex-wrap: wrap; }
.cost-actions-spacer { flex: 1 1 auto; }

/* === Kostenpositionen: Mehrzeilen-Editor (2026-06-08) === */
.cost-head { margin: 0.5rem 0 0.75rem; }
.cost-head label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; max-width: 420px; }
/* Combo in diesem Bereich nicht über die Nachbarspalte quellen lassen (Overlap-Fix). */
.cost-fields .combo { display: block; min-width: 0; max-width: none; width: 100%; }
.cost-rows { display: flex; flex-direction: column; gap: 0.6rem; }
.cost-row { position: relative; padding-right: 1.8rem; align-items: end; }
.cost-row.cost-row-invalid { outline: 2px solid var(--danger, #c0392b); outline-offset: 1px; }
.cost-row-remove {
  position: absolute; top: 0.4rem; right: 0.35rem;
  border: none; background: transparent; color: var(--text-soft);
  font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 0 0.25rem;
}
.cost-row-remove:hover { color: var(--danger, #c0392b); }


/* === Projektliste: Toolbar / Tabelle / Timeline (2026-06-05) === */
.list-toolbar { display: flex; gap: .8rem; align-items: center; margin-bottom: .8rem; flex-wrap: wrap; }
#project-search { flex: 0 0 340px; max-width: 70%; padding: .5rem .7rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.table-wrap { overflow-x: auto; }
.projects-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.projects-table th { text-align: left; padding: .5rem .6rem; color: var(--text-soft); border-bottom: 1px solid var(--border); font-weight: 600; white-space: nowrap; }
.projects-table td { padding: .3rem .6rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.projects-table th.num, .projects-table td.num { text-align: right; }
.col-name { min-width: 260px; }
.pe-name { width: 100%; padding: .4rem .5rem; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text); font: inherit; }
.pe-name:hover { border-color: var(--border); }
.pe-name:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.pe-status, .pe-date { padding: .35rem .4rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; font-size: .88rem; }
.pe-saved { color: var(--success); font-size: .8rem; margin-left: .4rem; }
.pe-saved.pe-saving { color: var(--text-soft); }
.col-actions { white-space: nowrap; }

.timeline { margin: .4rem 0 .3rem; }
.tl-axis { position: relative; height: 20px; margin-left: 210px; border-bottom: 1px solid var(--border); }
.tl-tick { position: absolute; transform: translateX(-50%); font-size: .72rem; color: var(--text-soft); top: 3px; white-space: nowrap; }
.tl-tick.tl-today { color: var(--accent); font-weight: 700; }
.tl-rows { position: relative; padding-top: .2rem; }
.tl-row { display: flex; align-items: center; height: 26px; }
.tl-label { flex: 0 0 210px; width: 210px; padding-right: .6rem; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.tl-track { position: relative; flex: 1 1 auto; height: 18px; }
.tl-bar { position: absolute; top: 2px; height: 14px; border-radius: 7px; background: var(--accent); display: block; min-width: 8px; }
.tl-bar.tl-open { width: 12px; height: 12px; top: 3px; border-radius: 50%; }
.tl-bar.status-aktiv { background: var(--success); }
.tl-bar.status-pausiert { background: #c79a3a; }
.tl-bar.status-warten_nu { background: #7a6fd0; }
.tl-bar.status-warten_kunde { background: #3a93c4; }
.status-warten_nu { background: #ece6fb; color: #5a43b8; }
.status-warten_kunde { background: #e2eef7; color: #1d5e8a; }


/* === Statusfarben Projektliste (2026-06-05) === */
.pe-status { border-left-width: 4px; }
.pe-status.s-aktiv        { border-left-color: var(--success); }
.pe-status.s-pausiert     { border-left-color: #c79a3a; }
.pe-status.s-warten_nu    { border-left-color: #7a6fd0; }
.pe-status.s-warten_kunde { border-left-color: #3a93c4; }
.pe-status.s-abgeschlossen{ border-left-color: #8a8a8a; }
/* zarte Reihen-Tönung nach Status (links) */
.projects-table tr td.col-name { border-left: 3px solid transparent; }
.projects-table tr:has(.s-aktiv) td.col-name        { border-left-color: var(--success); }
.projects-table tr:has(.s-pausiert) td.col-name     { border-left-color: #c79a3a; }
.projects-table tr:has(.s-warten_nu) td.col-name    { border-left-color: #7a6fd0; }
.projects-table tr:has(.s-warten_kunde) td.col-name { border-left-color: #3a93c4; }
.projects-table tr:has(.s-abgeschlossen) td.col-name{ border-left-color: #8a8a8a; }


/* === Projektliste: zwei Tabellen (2026-06-06) === */
.table-title { font-size: .9rem; color: var(--text-soft); font-weight: 600; margin: 1.2rem 0 .4rem; text-transform: uppercase; letter-spacing: .02em; }
.table-title:first-of-type { margin-top: .3rem; }
#closed-toggle { margin-top: .7rem; }


/* === Deckungsbeitrag-Farben (2026-06-06) === */
.projects-table td.db-pos { color: #2d7a3e; font-weight: 600; }
.projects-table td.db-neg { color: #c0392b; font-weight: 600; }


/* === Status In Planung (2026-06-06) === */
.pe-status.s-in_planung { border-left-color: #6b7a8f; }
.projects-table tr:has(.s-in_planung) td.col-name { border-left-color: #6b7a8f; }
.tl-bar.status-in_planung { background: #6b7a8f; }
.status-in_planung { background: #e7ebf0; color: #4a5a6a; }

/* === Fix: Neues-Projekt-Formular vertikal & zentriert (2026-06-06) === */
.form-grid { max-width: 600px; margin: 1.5rem auto; display: flex; flex-direction: column; gap: 1.1rem; }
.form-grid .form-row { display: flex; flex-direction: column; align-items: stretch; gap: .35rem; text-align: left; }
.form-grid .form-row label { text-align: left; font-weight: 600; font-size: .88rem; color: var(--text-soft); }
.form-grid .form-row small { color: var(--text-soft); font-size: .8rem; }
.form-grid .form-row input, .form-grid .form-row textarea {
  width: 100%; padding: .55rem .7rem; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface); color: var(--text); font: inherit;
}
.form-grid .form-row input:focus, .form-grid .form-row textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring, rgba(196,75,26,.25)); }
.form-grid .form-actions { display: flex; gap: .75rem; margin-top: .4rem; }


/* === Dokumente & Planungsunterlagen (2026-06-06) === */
.upload-form { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .9rem; }
.upload-form input[type=file] { font-size: .9rem; }
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.file-card { position: relative; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface); }
.file-thumb { display: flex; align-items: center; justify-content: center; height: 110px; background: rgba(0,0,0,.06); overflow: hidden; }
.file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.file-icon { font-weight: 700; color: var(--text-soft); font-size: 1.05rem; letter-spacing: .03em; }
.file-meta { padding: .4rem .5rem; font-size: .78rem; }
.file-meta a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.file-sub { color: var(--text-soft); }
.file-card .inline { position: absolute; top: .25rem; right: .3rem; margin: 0; }
.file-card .inline .danger { display: inline-block; width: 22px; height: 22px; line-height: 20px; text-align: center; background: rgba(0,0,0,.5); color: #fff; border: 0; border-radius: 50%; cursor: pointer; font-size: 1rem; }


/* === Stammdaten + Kontakt-Picker (2026-06-06) === */
.stamm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem 2rem; }
.stamm-sub { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-soft); margin: .2rem 0 .6rem; font-weight: 600; }
.stamm-col .field { margin-bottom: .55rem; }
.stamm-form .field label { display: block; font-size: .8rem; color: var(--text-soft); margin-bottom: .15rem; }
.stamm-form .field input { width: 100%; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; }
.stamm-form .field input:focus { outline: none; border-color: var(--accent); }
.field-row { display: flex; gap: .5rem; }
.field-row .field { margin-bottom: .55rem; }
.field-row .field.grow { flex: 1; }
.field-row .field input { min-width: 70px; }
.cust-wrap { position: relative; }
.cust-panel { position: absolute; z-index: 70; left: 0; right: 0; top: 100%; margin-top: 2px; max-height: 280px; overflow-y: auto; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-2, 0 8px 20px rgba(0,0,0,.35)); display: none; }
.cust-panel.open { display: block; }


/* === Lohn-Mitarbeiter (2026-06-09) === */
.is-hidden { display: none; }

/* Tabelle spiegelt das Projekt-Listing, ohne dessen Autosave-JS zu triggern */
.payroll-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.payroll-table th { text-align: left; padding: .5rem .6rem; color: var(--text-soft); border-bottom: 1px solid var(--border); font-weight: 600; white-space: nowrap; }
.payroll-table td { padding: .3rem .6rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.payroll-table td.col-persnr { font-variant-numeric: tabular-nums; color: var(--text-soft); white-space: nowrap; }
.payroll-table .pe-lex { width: 100%; min-width: 90px; padding: .4rem .5rem; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text); font: inherit; }
.payroll-table .pe-lex:hover { border-color: var(--border); }
.payroll-table .pe-lex:focus { outline: none; border-color: var(--accent); background: var(--surface); }

/* Status-Akzent links an der Zeile */
.pe-active.s-emp-aktiv { border-left-color: var(--success); }
.pe-active.s-emp-aus   { border-left-color: #8a8a8a; }
.payroll-table tr td.col-persnr { border-left: 3px solid transparent; }
.payroll-table tr:has(.s-emp-aktiv) td.col-persnr { border-left-color: var(--success); }
.payroll-table tr:has(.s-emp-aus)   td.col-persnr { border-left-color: #8a8a8a; }
.payroll-table tr.emp-inactive td.col-name .pe-name { color: var(--text-soft); }

/* Anlegen-Form */
.emp-add-form { border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.1rem 1.1rem; background: var(--surface); margin-bottom: 1.1rem; }
.emp-add-form .table-title { margin-top: 0; }
.emp-add-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .9rem 1.1rem; }
.emp-add-grid label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .85rem; color: var(--text-soft); }
.emp-add-grid input, .emp-add-grid select { padding: .5rem .6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-weight: 400; }
.emp-add-grid input:focus, .emp-add-grid select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring, rgba(196,75,26,.25)); }
.emp-add-actions { margin-top: .9rem; }

/* ===== Rechnungen erstellen (invoices-edit) ===== */
.inv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: start; }
@media (max-width: 820px) { .inv-cols { grid-template-columns: 1fr; } }
.inv-card { padding: 1rem 1.1rem; }
.inv-card legend { font-weight: 700; padding: 0 .4rem; color: var(--text); }
.inv-form .form-row { margin-bottom: .7rem; }
.inv-form .form-row label { display: block; font-weight: 600; font-size: .82rem; color: var(--text-soft); margin-bottom: .25rem; }
.inv-form input[type=text], .inv-form input[type=number], .inv-form input[type=date], .inv-form select, .inv-form textarea {
  width: 100%; padding: .5rem .6rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font: inherit; }
.inv-form input:focus, .inv-form select:focus, .inv-form textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring, rgba(196,75,26,.25)); }
.inv-form .inv-2 { display: grid; grid-template-columns: 90px 1fr; gap: .6rem; }
.inv-form .inv-2 > span { display: block; }
.inv-kind-static { margin: 0; padding: .35rem 0; font-weight: 600; }
.sp-range { display: flex; gap: .5rem; align-items: center; }
.sp-range .sp-sep { color: var(--text-soft); font-size: .85rem; }
.preset-row { display: flex; gap: .5rem; align-items: center; margin-top: .35rem; }
.preset-row .preset-pick { flex: 1; max-width: 360px; padding: .35rem .5rem; font-size: .85rem;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
.preset-row .preset-save { font-size: .78rem; padding: .3rem .6rem; white-space: nowrap; }

/* Reiter "Rechnungen" (Gesamtliste aller erstellten Rechnungen) */
.inv-bulkbar { display: flex; gap: .6rem; align-items: center; margin-bottom: .8rem; flex-wrap: wrap; }
.inv-all-table .c-sel { width: 34px; text-align: center; }
.inv-all-table .c-sel input { cursor: pointer; }
.inv-overdue { color: var(--danger); font-weight: 600; }
.paid-badge { border: none; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 600;
  padding: .25rem .8rem; border-radius: var(--r-pill, 999px); }
.paid-badge.is-paid { background: var(--success-soft, #d8f3e3); color: var(--success, #1f8a4c); }
.paid-badge.is-open { background: var(--warning-soft, #fdecd2); color: var(--warning, #b5740a); }

.inv-add { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .7rem; }
.inv-add select { min-width: 320px; max-width: 100%; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }

.inv-table { width: 100%; border-collapse: collapse; }
.inv-table th { text-align: left; font-size: .76rem; color: var(--text-soft); padding: .3rem .4rem; border-bottom: 1px solid var(--border); }
.inv-table td { padding: .25rem .4rem; vertical-align: top; }
.inv-table .c-pos { width: 38px; text-align: center; color: var(--text-soft); padding-top: .55rem; }
.inv-table .c-qty { width: 90px; }
.inv-table .c-unit { width: 80px; }
.inv-table .c-price { width: 110px; }
.inv-table .c-sum { width: 120px; text-align: right; padding-top: .55rem; white-space: nowrap; }
.inv-table .c-del { width: 30px; text-align: center; padding-top: .45rem; }
.inv-table input, .inv-table textarea { width: 100%; padding: .4rem .5rem; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); font: inherit; }
.inv-table textarea.i-desc { resize: vertical; min-height: 2.2rem; line-height: 1.3; }
.inv-table .c-qty input, .inv-table .c-price input { text-align: right; }
.btn-link.danger { color: var(--danger); background: none; border: none; cursor: pointer; font: inherit; }

.inv-card-soft { }
.inv-summary { padding: .9rem 1.1rem; align-self: start; }
.inv-summary .sumline { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .5rem; padding: .3rem 0; }
.inv-summary .sumline b { text-align: right; white-space: nowrap; }
.inv-summary .sub { color: var(--text-soft); font-size: .9rem; }
.inv-summary .total { border-top: 1px solid var(--border-strong, var(--border)); margin-top: .2rem; padding-top: .5rem; font-size: 1.05rem; }
.inv-summary .total b { font-weight: 800; }
.inv-summary .toggle-row { grid-template-columns: 1fr auto auto; }
.inv-summary .tg { display: flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9rem; cursor: pointer; }
.inv-summary .pctwrap { display: inline-flex; align-items: center; gap: .25rem; color: var(--text-soft); }
.inv-summary .pctwrap input { width: 64px; padding: .3rem .4rem; text-align: right; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); font: inherit; }
.inv-summary .pctwrap input:disabled { opacity: .45; }

/* ===== Abschlags-/Schlussrechnungen (Vorgang) ===== */
.inv-vorgang-kpis { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: .2rem 0 1rem; color: var(--text-soft); font-size: .9rem; }
.inv-vorgang-kpis b { color: var(--text); }
.inv-issue-actions { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; align-items: start; margin-top: 1rem; }
@media (max-width: 820px) { .inv-issue-actions { grid-template-columns: 1fr; } }
.inv-issue-form { padding: 1rem 1.1rem; }
.inv-issue-form h4 { margin: 0 0 .6rem; }
.inv-issue-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .6rem .9rem; margin-bottom: .8rem; }
.inv-issue-grid label { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; font-size: .82rem; color: var(--text-soft); }
.inv-issue-grid input { padding: .5rem .6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-weight: 400; }
.inv-issue-grid input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring, rgba(196,75,26,.25)); }

/* ===== Sicherheitseinbehalt / Bürgschaft ===== */
.einbehalt-form { max-width: 640px; }
.einbehalt-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: var(--r-pill, 999px); font-weight: 600; font-size: .85rem; }
.einbehalt-badge.ok { background: var(--success-soft, #d8f3e3); color: var(--success, #1f8a4c); }
.einbehalt-badge.open { background: var(--warning-soft, #fdecd2); color: var(--warning, #b5740a); }

/* ===== Summen-Zusatzzeilen (Zu-/Abschlag, Freitext) ===== */
.inv-summary .adj-row { display: grid; grid-template-columns: 1fr auto; row-gap: .35rem; align-items: center; padding: .35rem 0; border-top: 1px dashed var(--border); }
.inv-summary .adj-row .tg { grid-column: 1 / -1; display: flex; align-items: center; gap: .4rem; }
.inv-summary .adj-row .adj-label { flex: 1; min-width: 0; padding: .3rem .45rem; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); font: inherit; font-weight: 400; }
.inv-summary .adj-ctl { display: inline-flex; gap: .3rem; align-items: center; }
.inv-summary .adj-ctl select { padding: .3rem .35rem; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); font: inherit; }
.inv-summary .adj-ctl .adj-val { width: 84px; padding: .3rem .4rem; text-align: right; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); font: inherit; }
.inv-summary .adj-row > b { text-align: right; white-space: nowrap; }
.inv-summary .adj-ctl input:disabled, .inv-summary .adj-ctl select:disabled { opacity: .45; }

/* ===== Aufklappbare Rechnungs-Boxen (untereinander) ===== */
.inv-box { border: 1px solid var(--border); border-radius: var(--r, 10px); background: var(--surface); margin-bottom: 1rem; }
.inv-box-head { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; font-weight: 700; color: var(--text); user-select: none; border-radius: var(--r, 10px); }
.inv-box-head::-webkit-details-marker { display: none; }
.inv-box-head::before { content: "▸"; color: var(--text-soft); font-size: .9rem; transition: transform .15s ease; }
.inv-box[open] > .inv-box-head::before { transform: rotate(90deg); }
.inv-box-head:hover { background: var(--surface-2, rgba(0,0,0,.03)); }
.inv-box-body { padding: .2rem 1rem 1rem; }

/* ---- Inbox: Mail-Import-Warnbanner (nichts darf still verloren gehen) ---- */
.fetch-alerts {
  margin: 0.75rem 0 1rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--warning, #9a6700);
  border-radius: var(--radius, 8px);
  background: var(--warning-soft, #fdf0d3);
  color: var(--text, #1a1a1a);
}
.fetch-alerts summary { cursor: pointer; font-weight: 600; }
.fetch-alerts ul { margin: 0.6rem 0 0.3rem; padding-left: 1.2rem; }
.fetch-alerts li { margin: 0.25rem 0; font-size: 0.9rem; overflow-wrap: anywhere; }
.fetch-alert-ts { color: var(--text-soft, #5a5a5a); font-variant-numeric: tabular-nums; margin-right: 0.35rem; }
.fetch-alerts p { margin: 0.5rem 0 0.2rem; font-size: 0.9rem; }
.fetch-alert-line { display: inline; }
.fetch-alert-ack { display: inline-block; margin-left: 0.5rem; }
.fetch-alert-ack .btn-link { font-size: 0.85rem; white-space: nowrap; }
.fetch-alert-hint { margin: 0.15rem 0 0.4rem; font-size: 0.85rem; color: var(--text-soft, #5a5a5a); }
.fetch-alerts-footer { display: flex; align-items: center; gap: 1rem; margin: 0.5rem 0 0.2rem; font-size: 0.9rem; }

/* Warnbanner: Datei-Zeilen mit Direkt-Aktionen (loeschen / importieren) */
.fetch-files { list-style: none; margin: 0.4rem 0 0.6rem; padding: 0; }
.fetch-files .fetch-file {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem;
  padding: 0.3rem 0.5rem; margin: 0.15rem 0;
  background: var(--surface, rgba(255,255,255,.55));
  border: 1px solid var(--border, rgba(0,0,0,.08));
  border-radius: 6px; font-size: 0.88rem;
}
.fetch-file-name { overflow-wrap: anywhere; }
.fetch-file-size { color: var(--text-soft, #5a5a5a); font-size: 0.8rem; white-space: nowrap; }
.fetch-file-actions { display: inline-flex; gap: 0.7rem; margin-left: auto; white-space: nowrap; }
.fetch-file-actions .btn-link { font-size: 0.85rem; }
.fetch-file-status { font-size: 0.82rem; color: var(--text-soft, #5a5a5a); flex-basis: 100%; }
.fetch-file-status.error { color: var(--danger, #b91c1c); }
.fetch-file-done { opacity: 0.55; }

/* Diagnose je Consume-Datei (Kanban #93): WARUM Paperless sie abgelehnt hat.
   Der Rahmen links traegt die Aussage — rot = Beleg ist NICHT archiviert, also
   auf keinen Fall loeschen; grau = nachweislich Duplikat/kein Dokument. */
.fetch-file-diag {
  flex-basis: 100%;
  margin: 0.3rem 0 0.1rem;
  padding: 0.35rem 0 0.35rem 0.6rem;
  border-left: 3px solid var(--danger, #b91c1c);
  font-size: 0.84rem;
}
.fetch-file-diag.diag-duplikat,
.fetch-file-diag.diag-kein_dokument { border-left-color: var(--border, #d4d4d4); }
.fetch-file-diag-kurz { font-weight: 600; }
.fetch-file-diag.diag-duplikat .fetch-file-diag-kurz,
.fetch-file-diag.diag-kein_dokument .fetch-file-diag-kurz { font-weight: 500; }
.fetch-file-diag-kurz + a { margin-left: 0.5rem; }
.fetch-file-diag-hint { margin-top: 0.15rem; color: var(--text-soft, #5a5a5a); }
.fetch-file-diag-roh { margin-top: 0.25rem; }
.fetch-file-diag-roh summary { cursor: pointer; color: var(--text-soft, #5a5a5a); font-size: 0.8rem; }
.fetch-file-diag-roh code {
  display: block; margin-top: 0.2rem; overflow-wrap: anywhere;
  font-size: 0.78rem; color: var(--text-soft, #5a5a5a);
}
.fetch-file-gone { font-size: 0.82rem; color: var(--text-soft, #5a5a5a); margin: 0.2rem 0.5rem; }
.fetch-file-name { text-align: left; }
.fetch-file-preview { flex-basis: 100%; margin-top: 0.4rem; }
.fetch-file-preview iframe {
  width: 100%; height: 65vh; border: 1px solid var(--border, rgba(0,0,0,.12));
  border-radius: 6px; background: #fff;
}
.fetch-file-preview img {
  max-width: 100%; max-height: 65vh; display: block;
  border: 1px solid var(--border, rgba(0,0,0,.12)); border-radius: 6px;
}
.fetch-file-preview p { margin: 0.3rem 0; font-size: 0.85rem; }

/* Historie: Loesungsvorschlag + Quittier-Vermerk unter der Nachricht */
.history-hint { margin-top: 0.2rem; font-size: 0.85rem; color: var(--text-soft, #5a5a5a); }
.history-ack  { margin-top: 0.2rem; font-size: 0.85rem; color: var(--success, #1a7f37); }

/* === KI-Belegzuordnung (2026-08) === */
.ai-badge {
  display: inline-block;
  margin-left: .5rem;
  padding: .1rem .5rem;
  border-radius: 999px;
  background: #ede7f6;
  color: #5e35b1;
  font-size: .75rem;
  font-weight: 600;
  cursor: help;
  vertical-align: middle;
}
[data-theme="dark"] .ai-badge { background: #3a2f55; color: #cbb8f5; }
.ai-banner {
  border: 1px solid #d1c4e9;
  background: #f6f2fb;
  border-radius: 8px;
  padding: .75rem 1rem;
  margin-bottom: .75rem;
}
[data-theme="dark"] .ai-banner { background: #2a2340; border-color: #4a3d70; }
.ai-banner p { margin: 0 0 .5rem; }
.ai-banner-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }
.ai-banner-existing { display: block; margin-top: .5rem; font-size: .85rem; }
.ai-banner-done { opacity: .55; }
.ai-banner-merge { display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap; }
.ai-banner-merge .ai-banner-text { flex: 1 1 24rem; }
.belegerfassung-grid { margin-bottom: .5rem; }
.ai-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .15rem .6rem;
  border-radius: 999px;
  background: #ede7f6;
  color: #4527a0;
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.ai-pill:hover { background: #e1d5f2; }
.ai-pill.warn { background: #fff3e0; color: #e65100; }
.ai-pill.over { background: #ffebee; color: #b71c1c; }
[data-theme="dark"] .ai-pill { background: #3a2f55; color: #cbb8f5; }
[data-theme="dark"] .ai-pill.warn { background: #4a3520; color: #ffb74d; }
[data-theme="dark"] .ai-pill.over { background: #4a2020; color: #ef9a9a; }

/* === Freigabe/Zurueckweisung + Beleg-Anmerkungen (2026-08) === */
.review-badge {
  display: inline-block; padding: .1rem .55rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700; white-space: nowrap; vertical-align: middle;
}
.review-badge.ok { background: #e6f4ea; color: #1f8a4c; border: 1px solid #b7e0c4; }
.review-badge.rejected { background: #fdecea; color: #b71c1c; border: 1px solid #f5c6c0; }
[data-theme="dark"] .review-badge.ok { background: #1d3a28; color: #7fd39a; border-color: #2c5c3c; }
[data-theme="dark"] .review-badge.rejected { background: #431f1f; color: #ef9a9a; border-color: #6e3030; }

.btn.danger-outline { color: #b71c1c; border-color: #d99; background: transparent; }
.btn.danger-outline:hover { background: #fdecea; }

.pdf-tool-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 .35rem; }
.annot-tool.active { background: var(--accent, #c44b1a); color: #fff; border-color: var(--accent, #c44b1a); }
.pdf-pages.annot-mode .pdf-page { cursor: crosshair; }

.annot { position: absolute; z-index: 4; }
.annot-highlight { background: rgba(255, 235, 59, .4); cursor: pointer; }
.annot-frame { border: 2px solid #d32f2f; cursor: pointer; }
.annot-strike { cursor: pointer; }
.annot-strike::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid #d32f2f; }
.annot-check { color: #1f8a4c; font-weight: 800; font-size: 1.25rem; line-height: 1; cursor: pointer; text-shadow: 0 0 2px #fff; }
.annot-note {
  color: #c62828; font-size: .8rem; line-height: 1.15; font-weight: 600;
  background: rgba(255,255,255,.55); padding: 0 .15rem; border-radius: 2px;
  cursor: pointer; white-space: pre-wrap; z-index: 5;
}
.annot-drag-highlight { border-color: #f9a825; background: rgba(255, 235, 59, .3); }
.annot-drag-strike, .annot-drag-frame { border-color: #d32f2f; background: rgba(211, 47, 47, .08); }

/* Ein-Betrag-Maske: Aufteilungszeilen nur im Split-Modus */
.cost-fields:not(.split) #cost-rows,
.cost-fields:not(.split) .cost-split-only { display: none; }
.cost-fields.split .cost-main-cat { display: none; }
.cost-main-cat { display: flex; flex-direction: column; gap: .15rem; font-size: .82rem; margin: .4rem 0; }
.cost-sum-status { font-size: .82rem; color: var(--success, #1f8a4c); }
.cost-sum-status.sum-error { color: #b71c1c; font-weight: 700; }
.menu .menu-action {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: .45rem .6rem; font: inherit; color: var(--text); cursor: pointer; border-radius: 6px;
  text-decoration: none;
}
.menu .menu-action:hover { background: rgba(127,127,127,.12); }
.menu .menu-action.danger { color: #b71c1c; }

/* === Rechnungs-Editor im Lexware-Stil (2026-08-21) ============================
   Kartenlayout, Floating-Labels, dunkle Summenleiste, Aktionszeile unten.
   Nutzt die Portal-Farbvariablen (Akzent, Flächen, Ränder). */

.lx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.lx-head h1 { margin: 0; }

.lx-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); padding: 3px; }
.lx-seg button { border: 0; background: transparent; padding: .45rem .9rem; border-radius: 8px; font: inherit; font-weight: 600; color: var(--text-soft); cursor: pointer; white-space: nowrap; }
.lx-seg button::first-letter { visibility: hidden; }
.lx-seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.lx-seg button.on::first-letter { visibility: visible; color: var(--accent); }

/* width/height mit !important: .inv-form select (0,2,0) setzte sonst 100 %
   Breite durch -> unsichtbarer 16px-Overflow auf schmalen Viewports */
.lx-hidden { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; }

.inv-form.lx { display: flex; flex-direction: column; gap: 1rem; }
.lx-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 1.4rem 1.5rem; }
.lx-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.2rem; }
@media (max-width: 860px) { .lx-grid2 { grid-template-columns: 1fr; } }
.lx-col { display: flex; flex-direction: column; }

/* Floating-Label-Felder (Label sitzt in der Rahmen-Kerbe) */
.lx .ffield { position: relative; margin: .55rem 0; display: block; }
.lx .ffield > label { position: absolute; top: -0.55em; left: 10px; z-index: 1; background: var(--surface); padding: 0 5px; font-size: .72rem; font-weight: 600; color: var(--text-soft); line-height: 1.2; border-radius: 3px; }
.lx .ffield > input, .lx .ffield > textarea, .lx .ffield > select,
.lx .ffield .sp-range input {
  width: 100%; padding: .7rem .8rem; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--text); font: inherit;
}
.lx .ffield > input:focus, .lx .ffield > textarea:focus, .lx .ffield > select:focus,
.lx .ffield .sp-range input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring, rgba(196,75,26,.18));
}
.lx .ffield:focus-within > label { color: var(--accent); }
.lx .ffield textarea { resize: vertical; }
.lx .lx-hint { display: block; margin-top: .25rem; font-size: .76rem; color: var(--text-soft); }
.lx .lx-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8rem; }
.lx .lx-zip { grid-template-columns: 110px 1fr; }
.lx .lx-daterange .sp-range { display: flex; align-items: center; gap: .5rem; }
.lx .lx-daterange .sp-sep { color: var(--text-soft); }

.lx-kindline { display: flex; align-items: center; gap: 1rem; margin-top: .6rem; flex-wrap: wrap; }
.lx-kind-badge { display: inline-block; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: .8rem; padding: .3rem .7rem; border-radius: 999px; }
.lx-mode { flex: 1; min-width: 240px; }

/* Feld + Vorlagen-Knopf nebeneinander */
.lx-fieldrow { display: flex; align-items: flex-start; gap: .6rem; }
.lx-fieldrow .grow { flex: 1; }
.lx-preset-toggle { margin-top: .55rem; border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); border-radius: 9px; width: 42px; height: 42px; font-size: 1.15rem; cursor: pointer; flex: 0 0 auto; }
.lx-preset-toggle:hover { border-color: var(--accent); color: var(--accent); }
.lx .preset-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: -0.1rem 0 .5rem; }
.lx .preset-row[hidden] { display: none; }

/* Positionen */
.lx-postitle { margin: 0 0 .8rem; font-size: .95rem; color: var(--text-soft); font-weight: 700; }
.lx-items { width: 100%; border-collapse: collapse; }
.lx-items td { padding: .45rem .35rem; vertical-align: top; border: 0; }
.lx-items .ffield { margin: 0; }
.lx-items .c-pos { width: 44px; text-align: center; }
.lx-items .posnum { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-top: .45rem; border-radius: 50%; background: var(--bg); border: 1px solid var(--border); color: var(--text-soft); font-size: .8rem; font-weight: 700; }
.lx-items .c-qty { width: 92px; }
.lx-items .c-unit { width: 96px; }
.lx-items .c-price { width: 130px; }
.lx-items .c-qty input, .lx-items .c-price input { text-align: right; }
.lx-items .c-sum { width: 130px; text-align: right; padding-top: .8rem; white-space: nowrap; }
.lx-items .i-sum { font-weight: 700; display: block; }
.lx-items .c-del { width: 40px; text-align: center; padding-top: .75rem; }
.lx-items .row-del { font-size: 1rem; }
/* Textfelder wachsen mit dem Inhalt (Rueckmeldung 11.09.2026: Positionstexte aus der
   Kalkulation waren einzeilig mit Scrollbalken). field-sizing nativ, das Skript im
   Editor (autoGrow) fuer Browser ohne. Kein innerer Scrollbalken mehr. */
.lx-items textarea.i-desc { min-height: 2.6rem; line-height: 1.35; overflow-y: hidden; field-sizing: content; }
.lx #f-intro, .lx #f-footer { overflow-y: hidden; field-sizing: content; }
.lx #f-intro { min-height: 3.4rem; }
.lx #f-footer { min-height: 6rem; }

.lx-addrow { display: flex; justify-content: center; align-items: center; gap: .6rem; padding: .9rem 0 1.1rem; flex-wrap: wrap; }
.lx-addrow select { max-width: 340px; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font: inherit; }
.btn.lx-add { border: 1px solid var(--accent); color: var(--accent); background: var(--surface); font-weight: 700; border-radius: 9px; }
.btn.lx-add:hover { background: var(--accent-soft); }
.btn.lx-add.ghost { border-color: var(--border); color: var(--text-soft); }
.btn.lx-add.ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--surface); }

/* Aufklappbares Summen-Detail über der dunklen Leiste */
.lx-breakdown { border-top: 1px solid var(--border); padding: .9rem .3rem .6rem; max-width: 560px; margin-left: auto; }
.lx-breakdown[hidden] { display: none; }

/* Dunkle Summenleiste — bewusst fixe Farben, funktioniert in Hell & Dunkel */
.lx-positions { padding-bottom: 0; overflow: hidden; }
.lx-sumbar { display: flex; margin: 0 -1.5rem; }
.lx-sumbar > div { padding: .9rem 1.5rem 1rem; }
.lx-sum-net { flex: 1; background: #3a3a37; color: #e8e8e4; display: flex; flex-direction: column; align-items: flex-end; }
.lx-sum-total { min-width: 260px; background: #1f1f1d; color: #fff; display: flex; flex-direction: column; align-items: flex-end; position: relative; }
.lx-sumbar span { font-size: .76rem; opacity: .85; }
.lx-sumbar b { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.01em; }
.lx-breakdown-togglerow { display: flex; justify-content: flex-end; padding: 0 .2rem .7rem; }
.lx-breakdown-toggle { border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); border-radius: 999px; padding: .35rem .9rem; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.lx-breakdown-toggle:hover { border-color: var(--accent); color: var(--accent); }
.lx-breakdown-toggle .chev { transition: transform .15s ease; }
.lx-breakdown-toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.lx-breakdown-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
@media (max-width: 640px) { .lx-sum-total { min-width: 55%; } }

/* Aktionszeile */
.lx-actions { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.lx-actions-spacer { flex: 1; }
.lx-actions .btn { border-radius: 9px; padding: .6rem 1.1rem; }
.lx-actions .btn.primary { font-weight: 700; padding: .6rem 1.6rem; }
.btn.ghost { background: transparent; border-color: var(--border); color: var(--text-soft); }
.btn.ghost:hover { color: var(--text); border-color: var(--text-soft); }

.lx-section h2 { margin-top: 0; }

/* Steuersatz je Position (19/7/0 %) — bei §13b (Reverse-Charge) wird der
   Waehler durch ein statisches "0 % · §13b" ersetzt (Klasse .rc auf der Tabelle). */
.lx-items .c-tax { width: 96px; }
.lx-items .i-taxstatic { display: none; margin-top: .8rem; background: var(--bg); border: 1px solid var(--border); color: var(--text-soft); font-size: .72rem; font-weight: 600; padding: .15rem .5rem; border-radius: 999px; white-space: nowrap; }
.lx-items.rc .i-taxfield { display: none; }
.lx-items.rc .i-taxstatic { display: inline-block; }

/* Steuerregel-Waehler: "Weitere ..."-Select neben den zwei Alltagsregeln */
.lx-seg-more { border: 0; background: transparent; padding: .45rem .6rem; border-radius: 8px; font: inherit; font-weight: 600; color: var(--text-soft); cursor: pointer; max-width: 240px; }
.lx-seg-more.on { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }

/* Steuerregel-Kontext: Hinweis/Vorschlag unter dem Regel-Waehler */
.lx-headright { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.lx-rulehint { color: var(--text-soft); font-size: .78rem; max-width: 380px; text-align: right; }
.lx-rulehint-apply { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; text-decoration: underline; }

/* Projekt-Stammdaten: Steuerangaben-Checkbox */
.stamm-check { display: flex; gap: .45rem; align-items: center; font-weight: 600; margin: .35rem 0 .1rem; cursor: pointer; }

/* === Lexware-Leiste: dunkle Kopfleiste + Hauptnavigation (2026-08-22) ======
   Struktur wie Lexware Office (dunkle Bar, Menuepunkte mit Dropdowns,
   Icon-Gruppe rechts), Farben = Portal-Palette (Akzent fuer aktive Punkte).
   Bewusst fixe Dunkeltoene — identisch in Hell- und Dunkel-Theme. */
.topbar {
  background: #2c2b28;
  backdrop-filter: none;
  border-bottom: 1px solid #201f1d;
}
.topbar .brand { color: #f2efe9; }
.topbar .icon-btn { color: #c9c5be; }
.topbar .icon-btn:hover { background: rgba(255,255,255,.09); color: #fff; }
.topbar-search { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #a8a49c; }
.topbar-search input { color: #f2efe9; }
.topbar-search input::placeholder { color: #8f8b83; }
.topbar .user-chip { background: transparent; border-color: rgba(255,255,255,.18); color: #f2efe9; }
.topbar .user-chip:hover { background: rgba(255,255,255,.09); }
.topbar .ai-pill { border-color: rgba(255,255,255,.22); color: #e6e2da; background: transparent; }

.tnav { display: none; align-items: center; gap: 2px; margin-left: .4rem; }
.tnav-group { position: relative; }
.tnav-item {
  border: 0; background: transparent; color: #c9c5be;
  font: inherit; font-size: .92rem; font-weight: 550;
  padding: .48rem .8rem; border-radius: 7px; cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem;
  text-decoration: none; white-space: nowrap;
}
.tnav-item:hover { background: rgba(255,255,255,.09); color: #fff; text-decoration: none; }
.tnav-item.on { background: var(--accent); color: #fff; }
.tnav-item .chev { font-size: .68em; opacity: .7; }
.tnav-menu { left: 0; right: auto; top: calc(100% + 6px); }

@media (min-width: 960px) {
  .tnav { display: flex; }
  /* Sidebar entfaellt auf Desktop — Navigation lebt in der Leiste */
  .shell { grid-template-columns: 1fr; }
  .app-sidebar { display: none; }
}

/* === Bank-Modul (Finanzen-Seite im Lexware-Stil) =========================== */
.bk-tabs { display: flex; gap: 1.6rem; border-bottom: 1px solid var(--border); margin: 0 0 1.1rem; }
.bk-tabs a {
  padding: .55rem .1rem; text-transform: uppercase; letter-spacing: .06em;
  font-size: .8rem; font-weight: 700; color: var(--text-soft);
  border-bottom: 2px solid transparent; text-decoration: none;
}
.bk-tabs a:hover { color: var(--text); text-decoration: none; }
.bk-tabs a.on { color: var(--accent); border-bottom-color: var(--accent); }

.bk-card { padding: 1.1rem 1.2rem; }
.bk-seg3 {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 1rem;
}
.bk-seg3 a {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem .5rem; font-weight: 600; color: var(--text-soft);
  border-right: 1px solid var(--border); text-decoration: none;
}
.bk-seg3 a:last-child { border-right: 0; }
.bk-seg3 a:hover { background: var(--surface-2); text-decoration: none; }
.bk-seg3 a.on { background: var(--accent-soft); color: var(--text); }
.bk-count { border-radius: 999px; padding: .05rem .55rem; font-size: .78rem; font-weight: 700; color: #fff; }
.bk-count.blue { background: #1d6fb8; }
.bk-count.orange { background: #d97706; }

.bk-filter { display: flex; gap: .7rem; align-items: center; margin-bottom: .5rem; flex-wrap: wrap; }
.bk-filter .grow { flex: 1; min-width: 200px; }

/* Floating-Label-Felder auch ausserhalb des Rechnungs-Editors */
.bk-card .ffield { position: relative; margin: .55rem 0; display: block; }
.bk-card .ffield > label {
  position: absolute; top: -0.55em; left: 10px; z-index: 1; background: var(--surface);
  padding: 0 5px; font-size: .72rem; font-weight: 600; color: var(--text-soft); line-height: 1.2; border-radius: 3px;
}
.bk-card .ffield > input, .bk-card .ffield > select {
  width: 100%; padding: .65rem .8rem; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--text); font: inherit;
}
.bk-card .ffield > input:focus, .bk-card .ffield > select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring, rgba(196,75,26,.18));
}

.bk-listhead {
  display: grid; grid-template-columns: 1fr 140px 330px; gap: 1rem;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-faint); padding: .45rem .4rem; border-bottom: 1px solid var(--border);
}
.bk-listhead .num { text-align: right; }
.bk-row {
  display: grid; grid-template-columns: 1fr 140px 330px; gap: 1rem;
  padding: .8rem .4rem; border-bottom: 1px solid var(--border);
  align-items: center; color: inherit; text-decoration: none;
}
a.bk-row:hover { background: var(--surface-2); text-decoration: none; }
.bk-row:last-child { border-bottom: 0; }
.bk-main { display: flex; flex-direction: column; min-width: 0; }
.bk-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-meta { color: var(--text-soft); font-size: .83rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-amount { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-amount.neg { color: #c5341f; }
.bk-amount.pos { color: var(--success, #2d7a3e); }
.bk-assign { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.bk-badge { font-size: .78rem; font-weight: 600; padding: .18rem .6rem; border-radius: 999px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-badge.ok { color: var(--success, #2d7a3e); background: rgba(45,122,62,.12); }
.bk-badge.sug { color: #1d6fb8; background: rgba(29,111,184,.12); }
.bk-badge.mut { color: var(--text-soft); background: var(--surface-2); }
.btn.bk-ok { border-color: var(--success, #2d7a3e); color: var(--success, #2d7a3e); }

.bk-panel { grid-column: 1 / -1; padding: .3rem .4rem .8rem; }
.bk-search {
  width: 100%; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 8px;
  margin-bottom: .5rem; background: var(--surface); color: var(--text); font: inherit;
}
.bk-cands { display: flex; flex-direction: column; gap: .35rem; }
.bk-cand {
  text-align: left; width: 100%; padding: .55rem .75rem; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface); color: var(--text); cursor: pointer; font: inherit; font-size: .9rem;
}
.bk-cand:hover { border-color: var(--accent); color: var(--accent); }

.bk-cols { display: grid; grid-template-columns: 1fr 1.5fr; gap: 1rem; align-items: start; }
.bk-orderrow.sel { background: var(--accent-soft); border-radius: 8px; }
.bk-addrow { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: .9rem; }
.bk-addrow .ffield { flex: 1 1 160px; margin: .4rem 0; }
.bk-addrow .bk-small { flex: 0 1 120px; }
.bk-addrow .grow { flex: 2 1 220px; }
.bk-addrow .btn { margin-top: .2rem; }

@media (max-width: 860px) {
  .bk-cols { grid-template-columns: 1fr; }
  .bk-listhead { display: none; }
  .bk-row { grid-template-columns: 1fr auto; }
  .bk-assign { grid-column: 1 / -1; }
}

/* === Dashboard (Lexware-Vorbild, 2026-08-22) =============================== */
/* minmax(0,..) statt nackter fr: nowrap-Ellipsis-Inhalte (Projektnamen,
   Kontozeilen) zaehlen sonst als Spalten-Mindestbreite -> Overflow auf Handys.
   Seit 28.08.2026 ZWEI Spalten: links Aufgaben/Inbox/Zeiterfassung unter-
   einander (breiter, User-Wunsch), rechts Finanzen/Jahreschart/Projekte. */
.dash-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.35fr); gap: 1rem; align-items: start; }
@container inhalt (max-width: 1040px) { .dash-grid { grid-template-columns: minmax(0,1fr); } }
.dash-col { display: flex; flex-direction: column; gap: 1rem; }
.dash-card { padding: 1.1rem 1.2rem; }
.dash-card h3 { margin: 0 0 .6rem; font-size: 1rem; }
.dash-sec { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin: .8rem 0 .25rem; }
.dash-sec:first-of-type { margin-top: .2rem; }
.dash-line { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .35rem 0; border-bottom: 1px solid var(--border); font-size: .92rem; }
.dash-line:last-of-type { border-bottom: 0; }
.dash-line b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-line b.neg { color: #c5341f; }
.dash-alert { display: block; padding: .35rem 0; color: #d97706; font-weight: 600; font-size: .92rem; text-decoration: none; border-bottom: 1px solid var(--border); }
.dash-alert:hover { text-decoration: underline; }
.dash-link { display: inline-block; margin-top: .7rem; font-weight: 700; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
.dash-link:hover { text-decoration: underline; }
.dash-acct { border-bottom: 1px solid var(--border); }
.dash-bankmark { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 800; flex: 0 0 auto; }
.dash-acctname { flex: 1; min-width: 0; }
.dash-acctname small { display: block; color: var(--text-soft); }
.dash-proj { text-decoration: none; color: inherit; }
.dash-proj:hover span { color: var(--accent); }
.dash-proj span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-proj small { color: var(--text-soft); white-space: nowrap; }
.dash-legend { display: flex; gap: 2rem; flex-wrap: wrap; align-items: flex-end; margin: .3rem 0 .9rem; }
.dash-leg { display: flex; flex-direction: column; gap: .15rem; }
.dash-leg-lbl { font-size: .86rem; color: var(--text-soft); }
.dash-leg-val { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.dash-leg-val.neg { color: #c5341f; }
.dash-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .3rem; }
.dash-legend .dot.ein { background: var(--success, #2d7a3e); }
.dash-legend .dot.aus { background: #c5341f; }
.dash-diff { margin-left: auto; text-align: right; }
.dash-diff .dash-leg-lbl { align-self: flex-end; }
.dash-chart { width: 100%; height: auto; }
.dash-chart .grid { stroke: var(--border); stroke-width: 1; }
.dash-chart .line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.dash-chart .line.ein { stroke: var(--success, #2d7a3e); }
.dash-chart .line.aus { stroke: #c5341f; }
.dash-chart .area { stroke: none; }
.dash-chart .area.ein { fill: rgba(45,122,62,.09); }
.dash-chart .area.aus { fill: rgba(197,52,31,.08); }
[data-theme="dark"] .dash-chart .area.ein { fill: rgba(74,222,128,.1); }
[data-theme="dark"] .dash-chart .area.aus { fill: rgba(248,113,113,.1); }
.dash-chart .lbl { font-size: 10px; fill: var(--text-faint); text-anchor: middle; }
.dash-chart .lbl-y { font-size: 10px; fill: var(--text-soft); }

/* === Belegliste (Rail links, Liste Mitte, Detail rechts) =================== */
.bl-layout { display: grid; grid-template-columns: 185px minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
@container inhalt (max-width: 1090px) { .bl-layout { grid-template-columns: 185px minmax(0, 1fr); } .bl-detail { display: none; } }
@media (max-width: 760px) { .bl-layout { grid-template-columns: 1fr; } .bl-rail { flex-direction: row; flex-wrap: wrap; } }
.bl-rail { display: flex; flex-direction: column; gap: 2px; }
.bl-newbtn { justify-content: center; margin-bottom: .6rem; }
.bl-railitem { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .7rem; border-radius: 8px; color: var(--text-soft); font-size: .92rem; font-weight: 550; text-decoration: none; }
.bl-railitem:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.bl-railitem.on { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.bl-railcount { font-size: .75rem; font-weight: 700; background: var(--surface-2); color: var(--text-soft); border-radius: 999px; padding: .05rem .5rem; }
.bl-railitem.on .bl-railcount { background: var(--accent); color: #fff; }

.bl-search { display: flex; gap: .6rem; margin-bottom: .8rem; }
.bl-search input { flex: 1; padding: .6rem .9rem; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font: inherit; }
.bl-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring, rgba(196,75,26,.18)); }

.bl-list { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.bl-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: .9rem; align-items: center; width: 100%; text-align: left; padding: .6rem .9rem; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.bl-row:last-child { border-bottom: 0; }
.bl-row:hover { background: var(--surface-2); }
.bl-row.sel { background: var(--accent-soft); }
.bl-thumb { position: relative; width: 44px; height: 56px; border: 1px solid var(--border); border-radius: 5px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; flex: 0 0 auto; }
.bl-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; position: relative; z-index: 1; }
.bl-thumb.noimg img { display: none; }
.bl-thumbfallback { position: absolute; inset: 0; display: grid; place-items: center; font-size: .68rem; font-weight: 800; color: var(--text-faint); }
.bl-thumbfallback.big { position: static; font-size: 1.4rem; }
.bl-main-col { min-width: 0; display: flex; flex-direction: column; }
.bl-main-col b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-main-col small { color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-amount-col { text-align: right; display: flex; flex-direction: column; }
.bl-amount-col b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bl-amount-col b.neg { color: #c5341f; }
.bl-amount-col b.pos { color: var(--success, #2d7a3e); }
.bl-amount-col small { color: var(--text-soft); }

.bl-detail { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; position: sticky; top: calc(var(--topbar-h) + 1rem); }
.bl-detail-empty { text-align: center; padding: 2rem .5rem; }
.bl-detail-thumbwrap { position: relative; width: 100%; aspect-ratio: 3/4; max-height: 260px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; margin-bottom: .8rem; }
.bl-detail-thumbwrap img { width: 100%; height: 100%; object-fit: contain; }
.bl-detail .btn { width: 100%; justify-content: center; margin-bottom: .8rem; }
.bl-detail-meta { margin: 0; }
.bl-detail-meta > div { display: flex; justify-content: space-between; gap: .8rem; padding: .4rem 0; border-bottom: 1px solid var(--border); font-size: .88rem; }
.bl-detail-meta > div:last-child { border-bottom: 0; }
.bl-detail-meta dt { color: var(--text-soft); }
.bl-detail-meta dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }

/* ===== Kasse (Kassenbuch) ===== */
.ks-title { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ks-period { display: flex; gap: .5rem; }
.ks-period select {
  padding: .5rem .7rem; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--text); font: inherit; font-weight: 600;
}
.ks-headright { flex-direction: column; align-items: flex-end; gap: .25rem; }
.ks-bestand { display: flex; align-items: baseline; gap: .45rem; font-size: .92rem; }
.ks-bestand b { font-variant-numeric: tabular-nums; }
.ks-bestandwrap { position: relative; }
.ks-openingform .ffield { position: relative; margin: .8rem 0 .55rem; display: block; }
.ks-openingform .ffield > label {
  position: absolute; top: -0.55em; left: 10px; z-index: 1; background: var(--surface);
  padding: 0 5px; font-size: .72rem; font-weight: 600; color: var(--text-soft); line-height: 1.2; border-radius: 3px;
}
.ks-openingform .ffield > input {
  width: 100%; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--text); font: inherit;
}
.ks-openingform .btn { width: 100%; justify-content: center; }
.ks-addrow { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-bottom: .3rem; }
.ks-addrow .grow { flex: 1; min-width: 180px; }
.ks-w-date { width: 165px; }
.ks-w-amt { width: 120px; }
.ks-hint { margin: 0 0 1rem; font-size: .82rem; }
.ks-table td, .ks-table th { vertical-align: middle; }
.ks-table .ks-carry td { background: var(--surface-2); }
.ks-table .ks-sum td { border-top: 2px solid var(--border); font-variant-numeric: tabular-nums; }
.ks-neg { color: #b91c1c; }
[data-theme="dark"] .ks-neg { color: #f87171; }

/* ---- Bank: Betragsdifferenz-Klaerung + Sammel-Bestaetigung ---- */
.bk-badge.warn { color: #b45309; background: rgba(217,119,6,.14); }
[data-theme="dark"] .bk-badge.warn { color: #fbbf24; background: rgba(217,119,6,.22); }
.bk-bulk { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; padding: .55rem .4rem; border-bottom: 1px solid var(--border); }
/* ============================================================
   Zahlung erfassen + Einbehalte (Lexware-Vorbild, 22.08.2026)
   ============================================================ */
.pay-state { display:inline-block; font-size:.78rem; font-weight:600; padding:.1rem .55rem; border-radius:999px; white-space:nowrap; }
.pay-state-bezahlt     { background: var(--success-soft, #e6f4ea); color: var(--success, #1e7e34); }
.pay-state-offen       { background: transparent; color: var(--muted, #777); border: 1px solid var(--border, #ddd); }
.pay-state-teilbezahlt { background: var(--warning-soft, #fff3e0); color: var(--warning, #b26a00); }
.pay-state-einbehalt   { background: transparent; color: var(--warning, #b26a00); border: 1px dashed var(--warning, #b26a00); }
.pay-dialog { border: 1px solid var(--border, #ddd); border-radius: 10px; padding: 0; max-width: 26rem; width: 92vw;
  background: var(--card-bg, #fff); color: inherit; }
.pay-dialog::backdrop { background: rgba(0,0,0,.35); }
.pay-form { padding: 1rem 1.2rem .6rem; }
.pay-head { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.6rem; }
.pay-head h3 { margin:0; font-size:1.02rem; }
.pay-close { background:none; border:none; font-size:1.3rem; line-height:1; cursor:pointer; color:inherit; opacity:.6; }
.pay-close:hover, .pay-close:focus-visible { opacity:1; }
.pay-row { display:flex; align-items:center; gap:.8rem; margin:.55rem 0; }
.pay-row > label { flex: 0 0 6.5rem; font-size:.86rem; color: var(--muted, #777); }
.pay-row input[type="date"], .pay-row input[type="text"] { flex:1; min-width:0; padding:.4rem .55rem;
  border:1px solid var(--border, #ccc); border-radius:6px; background:inherit; color:inherit; font: inherit; }
#pay-amount { text-align:right; font-variant-numeric: tabular-nums; }
.pay-seg { display:inline-flex; border:1px solid var(--border, #ccc); border-radius:7px; overflow:hidden; }
.pay-seg label { position:relative; }
.pay-seg input { position:absolute; opacity:0; pointer-events:none; }
.pay-seg span { display:block; padding:.32rem .7rem; font-size:.86rem; cursor:pointer; border-right:1px solid var(--border, #ccc); }
.pay-seg label:last-child span { border-right:none; }
.pay-seg input:checked + span { background: var(--accent, #2f6b4f); color:#fff; }
.pay-seg input:focus-visible + span { outline:2px solid var(--accent, #2f6b4f); outline-offset:-2px; }
.pay-actions { display:flex; justify-content:flex-end; gap:.6rem; margin:.8rem 0 .4rem; }
.pay-hist { padding:.6rem 1.2rem .4rem; border-top:1px solid var(--border, #eee); font-size:.88rem; }
.pay-hist b { display:block; margin-bottom:.3rem; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted,#777); }
.pay-hist-row { display:flex; justify-content:space-between; align-items:center; gap:.8rem; padding:.18rem 0; }
.pay-buergschaft { display:flex; align-items:center; gap:.5rem; padding: .6rem 1.2rem 1rem; border-top:1px solid var(--border, #eee); }
.pay-buergschaft label { font-size:.82rem; color: var(--muted, #777); }
.pay-buergschaft input[type="text"] { flex:1; min-width:0; padding:.35rem .5rem; border:1px solid var(--border,#ccc); border-radius:6px; background:inherit; color:inherit; font: inherit; }
.einbehalt-kopf { margin: .2rem 0 .8rem; }
.einbehalt-kopf h2 { margin:0 0 .2rem; font-size:1.15rem; }
.einbehalt-bgform { display:flex; gap:.4rem; align-items:center; }
.einbehalt-bgform input[type="text"] { width: 11rem; padding:.3rem .5rem; border:1px solid var(--border,#ccc); border-radius:6px; background:inherit; color:inherit; font: inherit; }

/* === Bank: Master-Detail (Umsatzliste + Detail-Seitenleiste) ================
   Die Finanzen-Seite nutzt die volle Content-Breite; Klick auf eine Umsatz-
   zeile oeffnet rechts die Detail-Seitenleiste (unter 1200px als Drawer). */
/* .container:has(.bk-tabs) — jetzt aus --content-max (2200px) */
.bk-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.bk-shell .bk-listhead,
.bk-shell .bk-row { grid-template-columns: minmax(0, 1fr) 120px minmax(150px, 230px) .9rem; gap: .9rem; }
.bk-txrow { cursor: pointer; }
.bk-txrow:hover { background: var(--surface-2); }
.bk-txrow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
.bk-txrow.sel { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.bk-txrow.sel:hover { background: var(--accent-soft); }
.bk-chev { color: var(--text-faint); font-size: 1.1rem; line-height: 1; justify-self: end; }
.bk-txrow.sel .bk-chev { color: var(--accent); }
.bk-badge.faint { color: var(--text-faint); background: var(--surface-2); }
.btn.bk-quick { padding: .3rem .65rem; font-size: .82rem; white-space: nowrap; }

/* Seitenleiste */
.bk-sidecard { padding: 1.1rem 1.2rem; }
.bk-side-top { display: none; }
.bk-side-empty { margin: .2rem 0; }
.bk-detail { display: flex; flex-direction: column; gap: 1rem; }
/* display:flex schlaegt sonst das hidden-Attribut (UA-Regel) — ohne diese Zeile
   stapeln sich ALLE Details sichtbar im Panel und es "haengt" beim ersten. */
.bk-detail[hidden] { display: none; }
.bk-d-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .8rem; align-items: baseline; border-bottom: 1px solid var(--border); padding-bottom: .8rem; }
.bk-d-who { font-size: 1.05rem; overflow-wrap: anywhere; }
.bk-d-amount { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-d-amount.neg { color: #c5341f; }
.bk-d-amount.pos { color: var(--success, #2d7a3e); }
.bk-d-meta { grid-column: 1 / -1; color: var(--text-soft); font-size: .83rem; }
.bk-d-sec { display: flex; flex-direction: column; gap: .45rem; }
.bk-d-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
.bk-d-purpose { margin: 0; font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere; }
.bk-d-iban { color: var(--text-soft); font-size: .8rem; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.bk-d-box { padding: .55rem .7rem; border-radius: 9px; font-size: .88rem; font-weight: 600; overflow-wrap: anywhere; }
.bk-d-box.ok { color: var(--success, #2d7a3e); background: rgba(45,122,62,.1); }
.bk-d-box.sug { color: #1d6fb8; background: rgba(29,111,184,.1); }
.bk-d-box.warn { color: #b45309; background: rgba(217,119,6,.12); }
[data-theme="dark"] .bk-d-box.warn { color: #fbbf24; background: rgba(217,119,6,.2); }
.bk-d-box.mut { color: var(--text-soft); background: var(--surface-2); font-weight: 400; }
.bk-d-note { display: block; margin-top: .25rem; font-weight: 400; font-size: .82rem; color: var(--text-soft); }
.bk-d-btn { width: 100%; justify-content: center; text-align: center; }
.bk-d-compare { margin: 0; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.bk-d-compare > div { display: flex; justify-content: space-between; gap: .8rem; padding: .45rem .7rem; font-size: .88rem; }
.bk-d-compare > div + div { border-top: 1px solid var(--border); }
.bk-d-compare dt { color: var(--text-soft); }
.bk-d-compare dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.bk-d-compare > .diff { background: rgba(217,119,6,.08); }
.bk-d-compare > .diff dd { color: #b45309; }
[data-theme="dark"] .bk-d-compare > .diff dd { color: #fbbf24; }
.bk-d-form { display: flex; flex-direction: column; gap: .45rem; }
.bk-d-flabel { font-size: .8rem; font-weight: 600; color: var(--text-soft); margin-top: .15rem; }
.bk-d-form select, .bk-d-form input[type=text] { width: 100%; padding: .5rem .65rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: .9rem; }
.bk-d-form select:focus, .bk-d-form input[type=text]:focus { border-color: var(--accent); outline: none; }
.bk-d-form .bk-d-btn { margin-top: .35rem; }
.bk-d-alt { border-top: 1px dashed var(--border); padding-top: .55rem; margin-top: .25rem; }
.bk-side .bk-panel { padding: .4rem 0 0; }
.bk-side .bk-search { width: 100%; }

/* Desktop: zwei Spalten, Seitenleiste klebt beim Scrollen */
@media (min-width: 1200px) {
  .bk-shell:has(.bk-side) { grid-template-columns: minmax(0, 1fr) clamp(330px, 31%, 430px); }
  .bk-side { position: sticky; top: calc(var(--topbar-h) + 1rem); max-height: calc(100vh - var(--topbar-h) - 2rem); overflow-y: auto; }
}

/* Schmal: Seitenleiste als Drawer von rechts */
@media (max-width: 1199.98px) {
  .bk-side { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); z-index: 130; transform: translateX(102%); transition: transform .22s ease; overflow-y: auto; background: var(--surface); box-shadow: -14px 0 44px rgba(0,0,0,.22); }
  .bk-side.open { transform: none; }
  .bk-sidecard { border: 0; border-radius: 0; box-shadow: none; min-height: 100%; }
  .bk-side-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
  .bk-side-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
  .bk-side-close { border: 0; background: transparent; color: var(--text-soft); font-size: 1.05rem; cursor: pointer; padding: .25rem .45rem; border-radius: 7px; }
  .bk-side-close:hover { background: var(--surface-2); color: var(--text); }
  .bk-side-backdrop { position: fixed; inset: 0; background: rgba(15,18,22,.45); z-index: 125; }
  body.bk-noscroll { overflow: hidden; }
}
@media (max-width: 700px) {
  .bk-shell .bk-row { grid-template-columns: minmax(0, 1fr) auto; }
  .bk-shell .bk-assign { grid-column: 1 / -1; }
  .bk-chev { display: none; }
}

/* ---------- Dashboard: Inbox-Voransicht + Deckungsbeitrag in "Offene Projekte" ---------- */
.dash-inbox-item { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
.dash-inbox-item:last-of-type { border-bottom: 0; }
.dash-inbox-item:hover .dash-inbox-title { color: var(--accent); }
.dash-inbox-thumb { flex: none; width: 34px; height: 44px; object-fit: cover; object-position: top; border: 1px solid var(--border); border-radius: 4px; background: #fff; }
.dash-inbox-meta { flex: 1; min-width: 0; }
.dash-inbox-title { display: block; font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-inbox-sub { display: block; font-size: .76rem; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-inbox-date { flex: none; font-size: .76rem; color: var(--text-soft); white-space: nowrap; }
.dash-inbox-date.new { color: var(--accent); font-weight: 700; }
.dash-proj-main { flex: 1; min-width: 0; }
.dash-proj-main .dash-proj-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-proj-main small { display: block; font-size: .75rem; color: var(--text-soft); white-space: nowrap; }

/* Bank: erweiterte Filterleiste (Zeitraum, Richtung, Zuordnung) + Summenzeile */
.bk-filter .bk-fdate input[type=date] { width: 9.5rem; }
.bk-freset { margin-left: .1rem; white-space: nowrap; }
.bk-stats { font-size: .85rem; color: var(--text-soft); padding: .35rem .4rem .55rem; border-bottom: 1px solid var(--border); }
.bk-stats b.neg { color: #c5341f; }
.bk-stats b.pos { color: var(--success, #2d7a3e); }

/* Dashboard: Datenbasis-Hinweis am Uebersichts-Chart */
.dash-basis { font-size: .72rem; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; margin-left: .45rem; cursor: help; }

/* ============================================================
   Mobile-Optimierung (2026-08-26) — Handy-Ansicht fuer alle Module
   Aufbau: 1. Basis-Ergaenzungen (alle Breiten) · 2. Touch (pointer/hover)
   · 3. Tab-Bar + Shell <960px · 4. Beleg-Detail <760px · 5. Module <700px
   · 6. Rechnungs-Editor + Dialoge <640px · 7. Bank-Drawer <1200px
   ============================================================ */

/* ---- 1. Basis-Ergaenzungen (alle Breiten) ---- */

/* Drawer: Body-Scroll sperren solange offen (analog body.bk-noscroll) */
body.nav-open { overflow: hidden; }

/* Dokumentensuche im Drawer (Topbar-Suche ist <960px ausgeblendet) */
.sidebar-search { margin-bottom: var(--s2); }
.sidebar-search input {
  width: 100%; padding: .55rem .8rem;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--text); font: inherit; font-size: 16px;
}

/* Bottom-Tab-Bar: Basis aus (Desktop), aktiv erst im <960px-Block */
.tabbar { display: none; }

/* PDF-Markier-/Zeichenmodus: Browser-Scroll waehrend des Ziehens aus —
   Voraussetzung fuer die Pointer-Events-Bedienung per Finger */
.pdf-pages.select-mode, .pdf-pages.select-mode .pdf-page,
.pdf-pages.annot-mode, .pdf-pages.annot-mode .pdf-page { touch-action: none; }

/* Papierkorb: Karten ohne Thumbnail — Checkbox lag auf dem Titel */
#trash-list .doc-meta { padding-left: 3rem; }

/* Historie: Filterfelder waren komplett ungestylt (Browser-Default ~13px) */
.history-filter input, .history-filter select {
  padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); font: inherit; font-size: .9rem;
}
/* Historie: Level-Badges + Zeitstempel (hatten keine CSS-Regeln) */
.history-badge { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; }
.history-badge-info  { background: var(--info-soft);    color: var(--info); }
.history-badge-warn  { background: var(--warning-soft); color: var(--warning); }
.history-badge-error { background: var(--danger-soft);  color: var(--danger); }
.history-ts { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Historie: Metadata-JSON umbrechen statt Tabelle aufblaehen */
.history-meta { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 60ch; max-height: 40vh; overflow: auto; font-size: .78rem; }

/* Gedaempfte Inline-Texte + Reject-/Review-Kommentare (fehlten als Regel) */
.muted-inline { color: var(--text-soft); font-size: .9rem; }
.reject-comment { color: var(--text-soft); }
.review-comment { display: block; font-size: .78rem; font-weight: 400; color: var(--text-soft); }

/* Einstellungen: KI-Formular + Inline-Edit-Feld (waren ungestylt) */
.settings-form { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; margin-top: .75rem; }
.settings-form > label { display: block; font-size: .9rem; }
.settings-check { display: flex; gap: .5rem; align-items: flex-start; cursor: pointer; }
.settings-check input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; }
.settings-edit-form input[type="text"] {
  padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); font: inherit; width: 10rem; min-width: 0;
}
.settings-edit-form input[type="color"] { width: 44px; height: 38px; padding: 2px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
/* Selects folgen sonst der laengsten Option und sprengen die Card */
.settings-add-form label { max-width: 100%; min-width: 0; }
.settings-add-form select { max-width: 100%; }

/* Zeit-Uebersicht: Filter-Selects nicht breiter als der Viewport */
.zu-filter label { max-width: 100%; min-width: 0; }
.zu-filter select { max-width: 100%; }
/* Magic-Link + Kopierknopf nebeneinander */
.zu-linkrow { display: flex; gap: .4rem; align-items: center; }
.zu-linkrow input { flex: 1; min-width: 0; }
.zu-copybtn { white-space: nowrap; flex: 0 0 auto; }

/* Lexware-Success: Dateiname/UUID umbrechen (liefen aus dem Viewport) */
.success-page .doc-attrs.inline div { flex-wrap: wrap; min-width: 0; max-width: 100%; }
.success-page .doc-attrs dd, .success-page .doc-attrs dd code { overflow-wrap: anywhere; min-width: 0; }

/* Projekt-Status-Badges fuer alle Stati (nur aktiv/pausiert/abgeschlossen existierten) */
.badge.warten_nu, .badge.warten_kunde { background: var(--info-soft); color: var(--info); }
.badge.in_planung { background: var(--surface-3); color: var(--text-soft); }

/* Projekt-Detail-Timeline: Events ragten rechts aus der Card */
.card-section .timeline { overflow: hidden; }

/* Bank: IBAN-Zellen im Zahllauf monospaced + kompakt */
.kalk-table .tt { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .85em; letter-spacing: .01em; }
/* Bank-Import: Konto-Name/Bank nebeneinander (Regel brauchte .lx-Vorfahren) */
.bk-import .lx-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8rem; }

/* ---- 2. Touch-Geraete (unabhaengig von der Breite) ---- */

@media (hover: none) {
  /* Inline-Edit-Felder: ohne Hover keine Affordanz — Rahmen immer zeigen */
  .pe-name, .payroll-table .pe-lex { border-color: var(--border); background: var(--surface); }
  /* Stop-Button der Zeiterfassung: Sticky-Hover faerbte ihn nach Tap rosa */
  .zeit-btn.danger:hover { background: #c0392b; color: #fff; border-color: #a93226; }
}

@media (pointer: coarse) {
  /* Touch-Targets fuer destruktive/kleine Bedienelemente anheben */
  .payroll-table input[type="checkbox"] { width: 22px; height: 22px; }
  .project-tag .tag-remove { min-width: 32px; min-height: 32px; font-size: 1.15rem; }
  .kalk-table .btn-link.danger { display: inline-block; min-width: 36px; min-height: 36px; line-height: 36px; text-align: center; }
  .file-card .inline .danger { width: 30px; height: 30px; line-height: 28px; }
  .anchor-btn { width: 1.9rem; height: 1.9rem; font-size: 1.1rem; }
  .hours-grid .btn-link.small { font-size: 1rem; padding: .3rem .5rem; display: inline-block; }
  /* iOS-Auto-Zoom: Formularfelder der Zeit-/Lohn-Seiten auf 16px */
  .payroll-table .pe-name, .payroll-table .pe-lex, .pe-status,
  .payroll-table input[type="text"], #emp-search,
  .zu-filter input, .zu-filter select { font-size: 16px; }
}

/* ---- 3. App-Shell + Tab-Bar (<960px = Drawer-Welt) ---- */

@media (max-width: 959.98px) {
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: flex;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: .4rem 0 .5rem; min-height: 52px;
    font: inherit; font-size: .68rem; font-weight: 600; color: var(--text-soft);
    background: none; border: 0; cursor: pointer; text-decoration: none;
    touch-action: manipulation;
  }
  .tabbar-item:hover { text-decoration: none; color: var(--text); }
  .tabbar-item svg { width: 22px; height: 22px; }
  .tabbar-item.on { color: var(--accent); }
  /* Inhalt + Toasts nicht hinter der Tab-Bar verschwinden lassen */
  .container { padding-bottom: calc(var(--s7) + 64px + env(safe-area-inset-bottom)); }
  .toast-wrap { bottom: calc(64px + env(safe-area-inset-bottom) + var(--s3)); }
  /* Drawer-/Menue-Eintraege auf ~44px Touch-Hoehe */
  .nav-item { padding: .7rem .65rem; }
  .menu a, .menu button.menu-item { padding: .65rem .6rem; }
}

/* Topbar kompakt: Avatar statt Namens-Chip, KI-Pill nur mit Kosten */
@media (max-width: 700px) {
  .topbar { gap: .5rem; padding: 0 .65rem; }
  .user-chip .uname, .user-chip > svg { display: none; }
  .user-chip { padding: .25rem .3rem; }
  .ai-pill .ai-pill-detail { display: none; }
}

/* ---- 4. Beleg-Detail/-Erfassung (<760px): PDF oben, Erfassung darunter ---- */

@media (max-width: 760px) {
  .doc-stage { position: static; display: block; height: auto; min-height: 0; }
  .doc-stage .pdf-viewer { height: 48vh; height: 48dvh; min-height: 260px; }
  .doc-side { width: auto; margin-top: .75rem; }
  .doc-side-inner { overflow-y: visible; }
  .pdf-toolbar { flex-wrap: wrap; row-gap: .25rem; }
  .pdf-toolbar .btn { padding: .4rem .65rem; }
  .pdf-toolbar .pdf-original { margin-left: 0; }
  .pdf-select-hint { flex-basis: 100%; margin-left: 0; }
  /* iOS-Auto-Zoom in der Erfassungsmaske verhindern */
  .erfassung-grid input, .erfassung-grid select,
  .cost-fields-grid input, .cost-fields-grid select,
  .cost-main-cat select,
  .combo-input,
  .doc-search input[type="search"], .doc-search select, .doc-search .doc-date input[type="date"],
  .einbehalt-bgform input[type="text"] { font-size: 16px; }
  /* Karten-Checkbox (Inbox/Dokumente/Papierkorb) als Touch-Target */
  .card-check { width: 40px; height: 40px; }
  .card-check input[type="checkbox"] { width: 20px; height: 20px; }
}

/* ---- 5. Module: Bank/Kasse, Projekte, Einstellungen, Dashboard (<700px) ---- */

/* Bank: Zwischenbreite 701-860px — 4-Spalten-Grid der Umsatzzeilen aufloesen */
@media (max-width: 860px) {
  .bk-shell .bk-listhead, .bk-shell .bk-row { grid-template-columns: minmax(0, 1fr) auto; }
  .bk-shell .bk-assign { grid-column: 1 / -1; }
  .bk-chev { display: none; }
}

@media (max-width: 700px) {
  /* Bank: 3er-Segmentleiste stapeln (1fr-Tracks schrumpfen nicht unter min-content) */
  .bk-seg3 { grid-template-columns: 1fr; }
  .bk-seg3 a { justify-content: flex-start; padding: .7rem .9rem; border-right: 0; border-bottom: 1px solid var(--border); }
  .bk-seg3 a:last-child { border-bottom: 0; }
  /* Bank: Filterleiste paarweise statt 7 voller Zeilen */
  .bk-filter { gap: .4rem .6rem; }
  .bk-filter .ffield { flex: 1 1 calc(50% - .6rem); margin: .4rem 0; }
  .bk-filter .grow { flex: 1 1 100%; }
  .bk-filter .bk-fdate input[type=date] { width: 100%; }
  .btn.bk-quick { padding: .5rem .8rem; }
  .col-actions .btn-link { display: inline-block; padding: .45rem .35rem; }
  .bk-import .lx-row2 { grid-template-columns: 1fr; }

  /* Projekte: Liste auf Kernspalten reduzieren (Zellen bleiben im DOM) */
  .projects-table th:nth-child(5), .projects-table td:nth-child(5),
  .projects-table th:nth-child(6), .projects-table td:nth-child(6) { display: none; }
  #project-search { flex: 1 1 100%; max-width: 100%; }
  /* Zeitplan: schmalere Label-Spalte, greifbare Balken, weniger Ticks */
  .tl-axis { margin-left: 96px; }
  .tl-label { flex-basis: 96px; width: 96px; }
  .tl-tick { font-size: .65rem; }
  .tl-row { height: 34px; }
  .tl-track { height: 26px; }
  .tl-bar { height: 20px; top: 3px; border-radius: 10px; }
  .tl-bar.tl-open { width: 18px; height: 18px; top: 4px; }
  /* Stunden-Grid: sticky Mitarbeiter-Spalte schmaler */
  .hours-grid .emp-col { min-width: 96px; max-width: 120px; white-space: normal; font-size: .78rem; }
  .hours-grid input.hours-input { width: 56px; font-size: 16px; }
  /* iOS-Zoom: Projekt-Formulare (form-grid-row = Kostenposition-Add-Form,
     dessen Inputs erben keine Schrift -> Browser-Default ~13px) */
  .pe-name, .pe-status, .pe-date,
  .form-inline input, .form-inline select,
  .form-row input, .form-row select, .form-row textarea,
  .form-grid-row input, .form-grid-row select,
  .inline-rate input { font-size: 16px; }

  /* Einstellungen: Tabs als wischbare Zeile statt 3-zeiligem Umbruch */
  .settings-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .settings-tab { white-space: nowrap; flex: 0 0 auto; padding: .65rem .8rem; }
  .settings-actions-cell .btn-link, .settings-inline-edit summary.btn-link { display: inline-block; padding: .5rem .25rem; }
  .settings-panel input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), .settings-panel select { font-size: 16px; }
  .nk-form .nk-fields, .nk-form > .muted-inline { margin-left: 0; }
  .nk-form .nk-fields input { max-width: 100%; }
}

@media (max-width: 600px) {
  /* Dashboard: SVG-Achsenbeschriftung lesbar halten (Chart skaliert ~49%) */
  .dash-chart .lbl, .dash-chart .lbl-y { font-size: 17px; }
  /* Inbox/Dokumente: kompakte Zeilenkarte statt 600px hoher Vollbild-Karte */
  .doc-card { flex-direction: row; align-items: stretch; }
  .doc-card .thumb-link { flex: 0 0 96px; aspect-ratio: auto; min-height: 110px; }
  .doc-card .doc-meta { flex: 1; min-width: 0; padding: .65rem .8rem; }
  /* Bulkbar bleibt beim Scrollen erreichbar */
  .bulkbar { position: sticky; top: var(--topbar-h); z-index: 20; }
  /* Mail-Import-Warnbanner: Aktionszeile unter den Dateinamen, tapbar */
  .fetch-file-actions { flex-basis: 100%; margin-left: 0; white-space: normal; flex-wrap: wrap; gap: .3rem 1.4rem; }
  .fetch-file-actions .btn-link, .fetch-file-name { padding: .35rem 0; }
  /* iOS-Zoom: Filterfelder Historie + Inbox-Bulk-Select */
  .history-filter input, .history-filter select, .bulk-assign-wrap select { font-size: 16px; }
  /* Bulkbar: Projekt-Select darf schrumpfen statt ueberzulaufen */
  .bulk-actions { max-width: 100%; }
  .bulk-assign-wrap { max-width: 100%; flex-wrap: wrap; }
  .bulk-assign-wrap select { flex: 1 1 auto; min-width: 0; max-width: 100%; }
  /* Zurueckgewiesen: Aktions-Buttons stapeln, kuerzerer Querscroll */
  .reject-actions { min-width: 190px; }
  .reject-actions .btn { display: inline-block; margin: .15rem .25rem .15rem 0; }
  /* Projektliste sehr schmal: nur Name + Status + oeffnen */
  .projects-table th:nth-child(3), .projects-table td:nth-child(3),
  .projects-table th:nth-child(4), .projects-table td:nth-child(4) { display: none; }
}

/* ---- 6. Rechnungs-Editor (Lexware-Stil) + Zahlungs-Dialog (<640px) ---- */

@media (max-width: 640px) {
  /* Positionstabelle als gestapelte Karten: Floating-Labels existieren pro
     Zelle, recalc() im Inline-JS arbeitet per querySelector im tr weiter */
  .lx-items, .lx-items tbody { display: block; }
  .lx-items tr { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem .6rem; padding: .9rem 0; border-bottom: 1px solid var(--border); }
  .lx-items td { display: block; width: auto; padding: 0; }
  .lx-items .c-pos { grid-row: 1; text-align: left; }
  .lx-items .posnum { margin-top: 0; }
  .lx-items .c-del { grid-row: 1; grid-column: 2; text-align: right; padding-top: 0; }
  .lx-items .c-desc, .lx-items .c-sum { grid-column: 1 / -1; }
  .lx-items .c-sum { text-align: right; padding-top: 0; }
  .lx-items .row-del { padding: .5rem .7rem; }
  /* Artikel-Select: volle Breite statt intrinsischer Optionsbreite
     (:not(.lx-hidden) — der versteckte 1px-Select darf nicht 100% erben) */
  .lx-addrow select:not(.lx-hidden) { flex: 1 1 100%; width: 100%; max-width: 100%; min-width: 0; }
  /* Empfaenger/Zeitraum: Datums-Paare stapeln, Inputs schrumpfbar —
     sonst treibt deren min-content die Grid-Spalte ueber den Viewport */
  .lx .ffield > input, .lx .ffield .sp-range input { min-width: 0; }
  .lx .lx-daterange .sp-range { flex-wrap: wrap; }
  .lx .lx-row2 { grid-template-columns: 1fr; }
  .lx .lx-row2.lx-zip { grid-template-columns: 110px 1fr; }
  /* Steuerregel-Waehler umbrechen lassen (lief aus dem Viewport) */
  .lx-headright { align-items: flex-start; max-width: 100%; }
  .lx-seg { display: flex; flex-wrap: wrap; max-width: 100%; }
  .lx-rulehint { text-align: left; max-width: none; }
  /* Summen-Detail: Zeilen stapeln statt Betraege abschneiden */
  .inv-summary .toggle-row { grid-template-columns: 1fr auto; }
  .inv-summary .toggle-row .tg { grid-column: 1 / -1; }
  .inv-summary .adj-row { grid-template-columns: 1fr; }
  .inv-summary .adj-row > b { text-align: right; }
  /* Aktionsleiste: gestapelt, Speichern (primary) daumennah unten */
  .lx-actions { flex-direction: column; align-items: stretch; }
  .lx-actions .btn { text-align: center; justify-content: center; }
  .lx-actions-spacer { display: none; }
  /* Karten-Padding kompakt — Sumbar-Negativrand synchron */
  .lx-card { padding: 1rem .9rem; }
  .lx-sumbar { margin: 0 -.9rem; }
  /* iOS-Zoom + Ueberbreite der Vorlagen-Zeile */
  .inv-issue-grid input, .inv-summary .adj-label, .preset-row .preset-pick,
  .lx .ffield > input, .lx .ffield > textarea, .lx .ffield > select { font-size: 16px; }
  .preset-row .preset-pick { min-width: 0; max-width: 100%; }
  .pay-hist-row .btn-link, .preset-row .btn-link { display: inline-block; padding: .45rem .35rem; }
  /* Zahlung-erfassen-Dialog: Labels ueber die Felder, Segment umbruchfaehig */
  .pay-row { flex-wrap: wrap; }
  .pay-row > label { flex: 1 0 100%; }
  .pay-row input[type="date"], .pay-row input[type="text"] { font-size: 16px; }
  .pay-seg span { padding: .5rem .7rem; }
  .pay-close { padding: .4rem .6rem; }
  .pay-buergschaft { flex-wrap: wrap; }
}

/* ---- 7. Bank-Detail-Drawer (<1200px) ---- */

@media (max-width: 1199.98px) {
  /* iOS-Auto-Zoom im fixierten Drawer verhindern */
  .bk-d-form select, .bk-d-form input[type=text] { font-size: 1rem; }
  .bk-side-close { padding: .6rem .8rem; font-size: 1.2rem; }
  /* iPhone: unterste Buttons nicht unter den Home-Indicator */
  .bk-sidecard { padding-bottom: calc(1.1rem + env(safe-area-inset-bottom)); }
}

/* ==== Belegerfassung: Lieferant-Suchfeld + Inline-Neuanlage (2026-08-27) ==== */

/* Gepinnter Combo-Eintrag ("+ Neuen Lieferanten anlegen") — bleibt trotz Filter sichtbar */
.combo-opt-pin { border-top: 1px solid var(--border); color: var(--accent, #c44b1a); font-weight: 600; }

/* Combobox im Erfassungs-Grid: volle Breite (wie .cost-fields .combo) */
.erfassung-grid .combo { display: block; min-width: 0; max-width: none; width: 100%; }

/* Inline-Formular unterhalb des Kontakt-Felds, volle Breite im Erfassungs-Grid */
.erfassung-grid .be-new-vendor { grid-column: 1 / -1; }
.be-new-vendor[hidden] { display: none; } /* display:flex unten wuerde das hidden-Attribut sonst aushebeln */
.be-new-vendor {
  display: flex; flex-direction: column; gap: 0.5rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent, #c44b1a);
  border-radius: 6px;
  padding: 0.6rem 0.7rem;
}
.be-new-vendor > strong { font-size: 0.85rem; }
.be-new-vendor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 0.6rem; }
.be-new-vendor-grid label { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.82rem; min-width: 0; }
.be-new-vendor-grid label.span2 { grid-column: 1 / -1; }
.be-new-vendor-grid input { width: 100%; min-width: 0; }
.be-new-vendor-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
/* Statuszeile: lange Meldungen (Lexware-Fehler) umbrechen statt aus dem Kasten laufen (#132) */
.be-new-vendor .action-status { align-self: stretch; min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 767.98px) {
  /* iOS-Auto-Zoom verhindern (Konvention wie .erfassung-grid) */
  .be-new-vendor-grid input { font-size: 16px; }
}

/* ==== Nachkalkulation: Beleg-Vorschaubild vor der Kategorie (2026-08-27) ==== */

/* Erste Spalte nicht umbrechen — Thumb + Kategorie-Pill bleiben nebeneinander */
.kalk-cat { white-space: nowrap; }

.kalk-thumb { display: inline-block; vertical-align: middle; margin-right: 0.45rem; line-height: 0; }
.kalk-thumb img {
  width: 34px; height: 44px;
  object-fit: cover; object-position: top;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.kalk-thumb:hover img,
.kalk-thumb:focus-visible img {
  transform: scale(1.12);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

/* ==== Arbeitszeitbögen (2026-08-28) — Monats-Stundenbögen je Mitarbeiter ==== */
.azb-toolbar { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between; align-items: center; }
.azb-periodnav { display: flex; align-items: center; gap: .5rem; }
.azb-periodlabel { min-width: 120px; text-align: center; }
.azb-create select, .azb-create input[type="text"] { max-width: 230px; }
.azb-status { font-size: .78rem; padding: .1rem .5rem; border-radius: 999px; background: var(--surface-2, #eee); }
.azb-status--abgeschlossen { background: rgba(31, 138, 76, .15); color: #1f8a4c; }

.azb-wrap { overflow-x: auto; }
.azb-grid { border-collapse: collapse; font-size: .82rem; min-width: 1080px; }
.azb-grid th, .azb-grid td { border: 1px solid var(--border, #ddd); padding: .1rem .15rem; text-align: center; white-space: nowrap; }
.azb-grid thead th { font-size: .7rem; font-weight: 600; background: var(--surface-2, #f4f4f4); position: sticky; top: 0; z-index: 2; }
.azb-col-tag { min-width: 52px; text-align: left; padding-left: .3rem; }
.azb-wd { color: var(--muted, #888); font-size: .68rem; }
.azb-col-site { min-width: 210px; }
.azb-col-proj { min-width: 130px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; font-size: .72rem; color: var(--muted, #777); text-align: left; padding: 0 .3rem; }
.azb-grid td input { width: 100%; min-width: 3.2em; border: none; background: transparent; text-align: center; font: inherit; color: inherit; padding: .18rem .1rem; }
.azb-grid td.azb-col-site input { text-align: left; min-width: 200px; }
.azb-grid td input:focus { outline: 2px solid var(--accent, #c8501c); outline-offset: -2px; background: var(--surface, #fff); }
.azb-grid td input.azb-strong { font-weight: 600; }
/* Zeilen-Tönung als Variable, damit die links festgepinnten Spalten (s.u.)
   dieselbe Tönung auf DECKENDEM Grund tragen können — sonst scheint beim
   seitlichen Scrollen der Zelleninhalt durch die halbtransparente Farbe. */
.azb-weekend { --azb-tint: var(--surface-2, #f1f1f1); }
.azb-type-krank { --azb-tint: rgba(200, 80, 28, .08); }
.azb-type-urlaub { --azb-tint: rgba(29, 111, 184, .08); }
.azb-type-feiertag, .azb-type-azk { --azb-tint: rgba(109, 76, 196, .08); }
.azb-type-schlechtwetter { --azb-tint: rgba(71, 85, 105, .10); }
.azb-row.save-error { --azb-tint: rgba(200, 30, 30, .12); }
.azb-grid tbody td { background: var(--azb-tint, transparent); }
.azb-row.saving td { opacity: .6; }
/* Kanban #82: weitere Baustellen-Zeilen am selben Tag */
.azb-add, .azb-del { border: none; background: transparent; cursor: pointer; color: var(--muted, #888); font: inherit; font-size: .85rem; line-height: 1; padding: 0 .2rem; border-radius: 4px; }
.azb-add:hover { color: var(--accent, #c8501c); background: var(--surface-2, #eee); }
.azb-del:hover { color: #b3261e; background: rgba(200, 30, 30, .1); }
.azb-sub td.azb-col-tag { color: var(--muted, #888); padding-left: .9rem; }
.azb-sub-mark { font-size: .8rem; }
.azb-stempel { font-size: .72rem; margin-right: .15rem; opacity: .8; }

/* Stempeluhr-Marker in Baustelle/Ort: früher inline VOR dem 100%-breiten
   Eingabefeld → Feld ragte um die Markerbreite über die Zelle hinaus
   (Befund 08.09.2026, iPad). Jetzt absolut in der Zelle, Feld bekommt
   links Platz. */
/* (kein position:relative hier — die Zelle ist unten sticky, das reicht als
   Bezug für das absolut gesetzte Symbol; relative würde sticky überschreiben) */
.azb-grid td.azb-col-site .azb-stempel {
  position: absolute; left: .3rem; top: 50%; transform: translateY(-50%);
  line-height: 1; pointer-events: auto;
}
.azb-grid td.azb-col-site:has(.azb-stempel) input { padding-left: 1.55em; }

/* Tag + Baustelle bleiben beim seitlichen Scrollen stehen (Kanban #37):
   deckender Grund (Tönung obendrauf), Trennkante rechts, Kopfzellen über
   allem. Wirkt nur, wenn die Tabelle tatsächlich breiter als der Rahmen ist. */
.azb-grid { --azb-tag-w: 5.4em; } /* Breite der Tag-Spalte; portal.js misst nach */
.azb-grid .azb-col-tag, .azb-grid .azb-col-site { position: sticky; z-index: 1; }
.azb-grid .azb-col-tag { left: 0; width: var(--azb-tag-w); }
.azb-grid .azb-col-site { left: var(--azb-tag-w); box-shadow: 1px 0 0 var(--border, #ddd); }
.azb-grid tbody td.azb-col-tag, .azb-grid tbody td.azb-col-site {
  background: linear-gradient(var(--azb-tint, transparent), var(--azb-tint, transparent)) var(--surface, #fff);
}
.azb-grid thead th.azb-col-tag, .azb-grid thead th.azb-col-site { z-index: 3; }
.azb-sums td.azb-col-tag, .azb-sums td.azb-col-site { background: var(--surface-2, #f4f4f4); }
.azb-sums td { font-weight: 700; border-top: 2px solid var(--border, #bbb); background: var(--surface-2, #f4f4f4); }
.azb-meta { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; margin-top: .9rem; }
.azb-meta input, .azb-meta select { margin-left: .35rem; max-width: 110px; }

@media (max-width: 700px) {
  .azb-toolbar { flex-direction: column; align-items: stretch; }
  .azb-create { flex-wrap: wrap; }
  .azb-meta { flex-direction: column; align-items: flex-start; gap: .5rem; }
  /* Die Monatsnavigation war die einzige Zeile ohne Umbruch: ‹ Monat ›
     plus Monatsfeld ergaben 408px und schoben auf dem Handy die ganze Seite
     nach rechts (Fund Breiten-Durchlauf Kanban #95, 390px). */
  .azb-periodnav { flex-wrap: wrap; }
  .azb-periodnav .form-inline, .azb-periodnav input[type="month"] { min-width: 0; }
}

/* ---- Einstellungen: Rechnungslayout ---- */
.invoice-layout-form h3 { font-size: 0.95rem; margin: 1.4rem 0 0.4rem; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.6rem; margin: 0.5rem 0; }
.tpl-card {
  display: flex; flex-direction: column; gap: 0.2rem; position: relative;
  border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.75rem;
  cursor: pointer; background: var(--surface); font-size: 0.85rem;
}
.tpl-card:hover { border-color: var(--accent); }
.tpl-card.is-selected, .tpl-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.tpl-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.layout-fields { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: flex-end; }
.layout-fields label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; }
.layout-fields input[type="number"], .layout-fields select {
  padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); width: 9.5rem;
}
.layout-fields input[type="color"] { width: 44px; height: 38px; padding: 2px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.layout-cols { max-width: 30rem; }
.layout-cols input[type="number"] { width: 5.5rem; padding: 0.3rem 0.4rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }
.layout-texts { display: flex; flex-direction: column; gap: 0.75rem; max-width: 44rem; }
.layout-texts label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; }
.layout-texts textarea {
  padding: 0.45rem 0.55rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 0.85rem; resize: vertical;
}
.logo-upload-block { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.logo-preview { max-height: 60px; max-width: 220px; vertical-align: middle; margin-right: 0.6rem; border: 1px solid var(--border); border-radius: 4px; padding: 3px; background: #fff; }


/* === Schmale Desktops 960-1199px (2026-08-28) ==============================
   13-Zoll-Notebooks landen mit 125-175 % Windows-Skalierung bei 960-1100 CSS-px
   Viewportbreite. Die Topbar (Brand + 7 Nav-Punkte + Suche + KI-Pill + Name im
   User-Chip) erzwang dort ~1090px Mindestbreite -> horizontaler Scrollbalken
   auf JEDER Seite, Inhalt wirkte seitlich verschoben statt mittig.
   In diesem Band wird die Leiste kompakt: engere Abstaende, schmalere Suche,
   KI-Pill ohne Detailtext, User-Chip nur als Avatar (Name steht im Menue). */
@media (min-width: 960px) and (max-width: 1199.98px) {
  .topbar { gap: var(--s2); }
  .tnav { margin-left: 0; }
  .tnav-item { padding: .48rem .55rem; font-size: .88rem; }
  .topbar-search { flex: 0 1 220px; min-width: 130px; }
  .topbar-search input { min-width: 0; }
  .ai-pill .ai-pill-detail { display: none; }
  .user-chip .uname { display: none; }
}
/* Ganz eng (960-1079px): auch mit KI-Pill darf nichts ueberlaufen — die
   Dokumentensuche weicht; auf /belege und /doc gibt es eigene Suchfelder. */
@media (min-width: 960px) and (max-width: 1079.98px) {
  .topbar-search { display: none; }
  .tnav-item { padding: .48rem .45rem; }
}

/* ==== Arbeitszeitbögen: Zuordnungs-Details + Stundenlohn-Spalte (2026-08-28) ==== */
.azb-sitedetails summary { cursor: pointer; font-weight: 500; }
.azb-sitedetails[open] summary { margin-bottom: .35rem; }
.azb-occ { border-collapse: collapse; font-size: .78rem; margin: 0 0 .3rem .9rem; }
.azb-occ th, .azb-occ td { border: 1px solid var(--border, #ddd); padding: .12rem .45rem; text-align: left; }
.azb-occ th { background: var(--surface-2, #f4f4f4); font-weight: 600; }
.payroll-table .col-lohn input { max-width: 6em; text-align: right; }

/* === Breitbild: Master-Detail-Seiten nutzen die volle Monitorbreite (2026-08-28)
   Vorbild lexoffice: Belegliste und Finanzen laufen randlos ueber den ganzen
   Monitor (Sidebar schmal, Liste + Detailpanel teilen sich den Rest). Bisher
   deckelte der Standard-Container die Belegansicht bei 1180px — auf einem
   32-Zoll-Monitor blieb der halbe Bildschirm leer. Formular-/Karten-Seiten
   (Dashboard, Projekte, Einstellungen) behalten bewusst ihre Lesebreite.
   Seit 30.08.2026 (Kanban #9): Deckel bei 2200px zentriert, damit auf 32 Zoll
   die Wege Titel<->Betrag nicht zu lang werden (.container zentriert selbst). */
/* .container:has(.bl-layout) — jetzt aus --content-max (2200px) */
/* .container:has(.bk-tabs) — jetzt aus --content-max (2200px) */
@media (min-width: 1400px) {
  .bl-layout { grid-template-columns: 220px minmax(0, 1fr) clamp(330px, 24%, 480px); gap: 1.25rem; }
  .bl-detail-thumbwrap { max-height: 420px; }
}

/* === Belege: Handyansicht nach lexoffice-Vorbild (2026-08-28) ==============
   Ziel (Screenshot des Betreibers): voller Bildschirm, oben der prominente
   Neu-Button, darunter Suche in voller Breite, Filter als EINE horizontal
   scrollbare Chip-Zeile, Liste randlos mit Titel/Meta links + Betrag/Status
   rechts. Vorher wickelten die 8 Rail-Eintraege als mehrzeiliger Block. */
.bl-railitems { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Grid-Item darf unter die Chip-Mindestbreite schrumpfen (min-width:auto-Falle),
   sonst zwingt die nowrap-Chipzeile die ganze Seite auf >1000px. */
.bl-layout > .bl-rail { min-width: 0; }
@media (max-width: 760px) {
  .bl-rail { flex-direction: column; }
  .bl-newbtn { min-height: 44px; margin-bottom: .5rem; }
  .bl-railitems {
    flex-direction: row; flex-wrap: nowrap; gap: .4rem;
    /* max-width noetig: sonst bestimmt die nowrap-Chipzeile die Flex-Line-Breite
       (overflow-x:auto begrenzt nur die Mindest-, nicht die bevorzugte Groesse) */
    max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: .4rem; margin: 0 -0.25rem; padding-left: .25rem; padding-right: .25rem;
  }
  .bl-railitems::-webkit-scrollbar { display: none; }
  .bl-railitem {
    flex: none; white-space: nowrap;
    border: 1px solid var(--border); border-radius: 999px;
    padding: .45rem .8rem; background: var(--surface); min-height: 40px;
  }
  .bl-railitem.on { border-color: var(--accent); }
  .bl-search { gap: .45rem; }
  .bl-search .btn { min-height: 44px; }
  .bl-row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: .6rem; padding: .6rem .7rem; }
  .bl-thumb { width: 44px; height: 54px; }
}

/* ==== Arbeitszeitbögen: Projekt-Schnellanlage in der Zuordnung (2026-08-28) ==== */
.azb-assign { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; }
.azb-newproj summary { list-style: none; display: inline-block; }
.azb-newproj summary::-webkit-details-marker { display: none; }
.azb-newproj[open] { flex-basis: 100%; }
.azb-newproj[open] summary { margin-bottom: .3rem; }
.azb-newproj form input[type="text"] { min-width: 260px; }

/* ==== Nachkalkulation: Zahlenspalten nicht umbrechen (2026-08-28) ==== */
/* EP/Menge/Betrag standen bei schmaler Tabelle zweizeilig (z. B. "846,5 h",
   "17,14 €") — Zahlen bleiben einzeilig, die Position-Spalte bricht um. */
.kalk-table td.num, .kalk-table th.num { white-space: nowrap; }
.payroll-table .col-lohn input { max-width: 6.5em; text-align: right; }

/* === Dashboard: eingebettete Stempeluhr (2026-08-28) =======================
   Die /zeit-Partial (zeit-timer.ejs + zeit.js) laeuft unveraendert in der
   Zeiterfassungs-Karte; hier wird nur ihre Standalone-Optik (eigene Karte,
   max 480px, 3.2rem-Timer) auf das Karten-Innenmass des Dashboards
   eingedampft. Bedienlogik/IDs bleiben identisch zu /zeit. */
.dash-zeit .zeit-wrap { padding: 0; }
.dash-zeit .zeit-card { max-width: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; background: transparent; }
.dash-zeit .zeit-time { font-size: 2.3rem; }
.dash-zeit .zeit-state { margin: .1rem 0 .9rem; }
.dash-zeit .zeit-buttons .zeit-btn { padding: .65rem .9rem; font-size: .95rem; }
.dash-zeit .zeit-worker { font-size: .8rem; }
/* Kopf-Schnellaktionen: nowrap-Buttons duerfen auf schmalen Screens umbrechen,
   statt die Seite aufzureissen. */
@media (max-width: 600px) {
  .lx-headright { flex-wrap: wrap; }
}

/* ==== Projekt: sortierbare Stundenliste aus Arbeitszeitbögen (2026-08-28) ==== */
.azb-days-wrap { max-height: 430px; overflow-y: auto; }
.azb-days thead th { position: sticky; top: 0; background: var(--surface-2, #f3f3ef); z-index: 2; }
.azb-days th.azb-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.azb-days th.azb-sort:hover { color: var(--accent, #c8501c); }
.azb-days .azb-arrow { font-size: .7em; color: var(--accent, #c8501c); }
.azb-days td.num { white-space: nowrap; }
.azb-days-sum { margin-top: .6rem; font-size: .95rem; }

/* ==== Arbeitszeitbögen: Extern-Kennzeichen (2026-08-28) ==== */
.azb-status--extern { background: rgba(109, 76, 196, .15); color: #6d4cc4; }

/* ==== Projekt-Detail: zweispaltig, volle Monitorbreite (2026-08-28) ==== */
/* links Kalkulation/Stunden/Belege, rechts Dokumente/Rechnungen/Verwaltung;
   minmax(0,..) noetig, sonst verhindern nowrap-Zellen das Schrumpfen. */
/* Frueher hob die Projektuebersicht den Breiten-Deckel auf. Seit Kanban #95
   entscheidet der Nutzer (Darstellung -> Seitenbreite) — eine Seite, die sich
   der Einstellung entzieht, macht das Feld fuer ihn wirkungslos. */
.proj-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.proj-col { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.proj-col > .card-section { margin: 0; }
@container inhalt (max-width: 1140px) {
  .proj-grid { grid-template-columns: minmax(0, 1fr); }
}
.inv-stunden-form { margin-top: .5rem; }

/* ==== Projekt-Detail: Tab-Leiste + Übersicht-Ministats (2026-08-28) ==== */
.proj-tabs { display: flex; gap: .35rem; margin: 1rem 0; border-bottom: 2px solid var(--border, #ddd); overflow-x: auto; }
.proj-tab { padding: .5rem .9rem; border-radius: 8px 8px 0 0; white-space: nowrap; color: var(--text, #333); text-decoration: none; border: 1px solid transparent; border-bottom: none; font-weight: 500; }
.proj-tab:hover { background: var(--surface-2, #f2f2f2); }
.proj-tab.on { background: var(--surface, #fff); border-color: var(--border, #ddd); color: var(--accent, #c8501c); font-weight: 600; position: relative; top: 2px; }
.proj-tab .nav-badge { margin-left: .3rem; }
.proj-ministats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .7rem; }
.mini-kpi { border: 1px solid var(--border, #ddd); border-radius: 10px; padding: .55rem .8rem; display: flex; flex-direction: column; gap: .15rem; }
.mini-kpi.good .kpi-value { color: #1f8a4c; }
.mini-kpi.bad .kpi-value { color: #c8501c; }
.proj-hinweise { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; }

/* ==== Projekt: Dokumente-Tab mit Drag&Drop-Upload (2026-08-28) ==== */
.dropzone { border: 2px dashed var(--border, #ccc); border-radius: 12px; padding: 1.6rem 1rem; text-align: center; cursor: pointer; display: flex; flex-direction: column; gap: .3rem; align-items: center; transition: border-color .15s, background .15s; margin-bottom: 1rem; }
.dropzone:hover { border-color: var(--accent, #c8501c); }
.dropzone.dz-over { border-color: var(--accent, #c8501c); background: rgba(200, 80, 28, .07); }
.dropzone.dz-busy { opacity: .55; pointer-events: none; }
.dz-icon { font-size: 1.7rem; }
.dz-status { font-size: .85rem; color: var(--accent, #c8501c); min-height: 1.1em; }
.file-date { margin: 1rem 0 .4rem; font-size: .85rem; color: var(--muted, #777); border-bottom: 1px solid var(--border, #eee); padding-bottom: .2rem; }

/* === Projekt-KPI-Leiste: zwei Zeilen (2026-08-28) ==========================
   10 Kennzahlen in zwei sinnhaften Zeilen — oben Geld (Auftrag, fakturiert,
   bezahlt, offen, Einbehalt), unten Leistung (Kosten, DB, Stunden, Lohn,
   Laufzeit). Breakpoints eigenstaendig, weil die generische .detailbox bei
   1024px auf 6 Spalten geht (bei 10 Kacheln = krumme 6+4-Aufteilung). */
.detailbox.detailbox-proj { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px)  { .detailbox.detailbox-proj { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .detailbox.detailbox-proj { grid-template-columns: repeat(5, 1fr); } }
.kpi.warn .kpi-value { color: var(--warning, #b45309); }
.kpi .kpi-sub a { color: inherit; text-decoration: underline; }

/* === Projekt-Timeline: Monats-Band + Chronik (2026-08-28) ==================
   Ersetzt die Punkt-auf-Achse-Darstellung, deren Labels sich bei vielen
   Events (jeder Beleg + jeder Stundentag) komplett ueberlagerten. Oben ein
   Aktivitaetsband ueber die VOLLE Breite (je Monat bis zu 5 Mini-Balken,
   Hoehe = Anzahl Ereignisse des Typs, Tooltip mit Monats-Summen), darunter
   die aufklappbare Monats-Chronik — juengster Monat offen. */
.tlb-band {
  display: flex; align-items: flex-end; gap: 3px;
  width: 100%; height: 86px;
  padding: .5rem .2rem 0;
  border-bottom: 1px solid var(--border);
}
.tlb-month {
  flex: 1 1 0; min-width: 0; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: 6px 6px 0 0;
}
.tlb-month:hover { background: var(--surface-2); }
.tlb-bars {
  flex: 1; display: flex; align-items: flex-end; justify-content: center;
  gap: 2px; min-height: 0; padding-bottom: 2px;
}
.tlb-bar { width: 6px; max-width: 14%; border-radius: 2px 2px 0 0; min-height: 4px; }
.tlb-lbl {
  font-size: .66rem; color: var(--text-faint); text-align: center;
  white-space: nowrap; overflow: hidden; height: 1rem; line-height: 1rem;
}
/* Typfarben — gelten fuer Band-Balken UND Dots (Legende/Chronik) */
.tl-projektbeginn { background: #1e4b7a; }
.tl-cost          { background: #c44b1a; }
.tl-revenue       { background: #2d7a3e; }
.tl-hours         { background: #8a5b00; }
.tl-document      { background: #8a8a86; }
.tl-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.timeline-legend {
  list-style: none; padding: 0; margin: .6rem 0 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  font-size: .8rem; color: var(--text-soft);
}
.timeline-legend li { display: inline-flex; align-items: center; gap: .35rem; }
.tlv-list { margin-top: 1rem; display: flex; flex-direction: column; gap: .4rem; }
.tlv-month { border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.tlv-month > summary {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  padding: .55rem .8rem; cursor: pointer; list-style: none;
}
.tlv-month > summary::-webkit-details-marker { display: none; }
.tlv-month > summary::before { content: '▸'; color: var(--text-faint); font-size: .8rem; }
.tlv-month[open] > summary::before { content: '▾'; }
.tlv-month > summary b { font-size: .92rem; }
.tlv-sums { font-size: .8rem; color: var(--text-soft); }
.tlv-events { list-style: none; margin: 0; padding: .2rem .8rem .6rem 1.9rem; }
.tlv-events li {
  display: flex; align-items: center; gap: .55rem;
  padding: .28rem 0; border-top: 1px solid var(--border);
  font-size: .85rem; min-width: 0;
}
.tlv-events li:first-child { border-top: 0; }
.tlv-date { color: var(--text-faint); font-variant-numeric: tabular-nums; flex: none; width: 3.1rem; }
.tlv-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) {
  .tlb-band { height: 64px; }
  .tlv-events { padding-left: .8rem; }
}

/* === Zeit & Lohn: volle Breite + lesbare Schrift (2026-08-28) ==============
   Mitarbeiterliste (/payroll/employees) und Arbeitszeitbogen (/arbeitszeit/
   bogen/..) liefen im 1180px-Standard-Container mit kleiner Schrift — auf
   grossen Monitoren horizontale Scrollbalken trotz leerem Platz daneben.
   Beide Seiten laufen jetzt randlos (wie /belege und /bank); Schrift und
   Zellabstaende wachsen. Der .table-wrap/.azb-wrap-Scroll bleibt als
   Fallback fuer schmale Fenster (Mobile-Konvention). */
/* Lohnliste folgt der Seitenbreite wie alles andere (Kanban #95); zu schmal
   gewaehlt scrollt die Tabelle in ihrer eigenen Huelle, das ist die Wahl. */
/* dito Arbeitszeitboegen — .azb-wrap scrollt selbst. */

.payroll-table { font-size: 1rem; }
.payroll-table th { padding: .6rem .8rem; }
.payroll-table td { padding: .4rem .8rem; }

.azb-grid { font-size: .95rem; min-width: 1280px; }
.azb-grid th, .azb-grid td { padding: .22rem .35rem; }
.azb-grid thead th { font-size: .8rem; }
.azb-wd { font-size: .78rem; }
.azb-col-site { min-width: 260px; }
.azb-col-proj { min-width: 150px; max-width: 240px; font-size: .85rem; }
.azb-grid td input { padding: .24rem .15rem; }
/* Zwischenbreiten gestuft, damit auch 13-Zoll/1440er ohne Balken auskommen */
@container inhalt (max-width: 1860px) {
  .azb-grid { font-size: .88rem; min-width: 1080px; }
  .azb-grid th, .azb-grid td { padding: .16rem .22rem; }
  .azb-grid thead th { font-size: .74rem; }
  .azb-col-site { min-width: 220px; }
}
/* Kanban #37 (08.09.2026, fremder Branch) — beim Merge auf Container-Queries
   umgestellt: die Fragen sind "passt die Tabelle in ihren Rahmen?", nicht
   "welches Geraet ist das?". Schwellen jeweils minus 64px Seitenpolster,
   Reihenfolge unveraendert (Kanban #95). */
/* Kleine Monitore/Tablets (<1280px, Kanban #37, 08.09.2026): kein fester
   Mindestbreiten-Sockel mehr — die Tabelle darf sich bis zur Rahmenbreite
   zusammenziehen (schmale Zahlenfelder, Kopfzeilen dürfen umbrechen,
   Projektspalte kürzt mit Ellipse, Karte mit weniger Innenrand). Erst wenn
   das nicht reicht (Hochkant-Tablet), scrollt sie — mit festgepinnten
   Spalten Tag + Baustelle, damit man weiß, in welcher Zeile man ist. */
@container inhalt (max-width: 1220px) {
  .card-section:has(.azb-grid) { padding: .7rem .6rem; }
  .azb-grid { min-width: 0; width: 100%; font-size: .82rem; }
  .azb-grid th, .azb-grid td { padding: .12rem .15rem; }
  .azb-grid thead th { font-size: .68rem; white-space: normal; line-height: 1.15; vertical-align: middle; }
  .azb-col-tag { min-width: 0; }
  .azb-wd { font-size: .68rem; }
  .azb-col-site { min-width: 150px; }
  .azb-grid td.azb-col-site input { min-width: 0; }
  .azb-grid td input { min-width: 2.6em; padding: .2rem .05rem; }
  .azb-col-proj { min-width: 90px; max-width: 120px; font-size: .72rem; }
}
@container inhalt (max-width: 840px) {
  .azb-grid { font-size: .8rem; }
  .azb-col-site { min-width: 130px; }
  .azb-col-proj { max-width: 100px; }
}
@container inhalt (max-width: 1380px) {
  /* 1366er-Laptops: Projektspalte enger, sonst ragt das Raster um ein paar
     Pixel über den Rahmen und erzeugt einen sinnlosen Mini-Scroll */
  .azb-col-site { min-width: 200px; }
  .azb-col-proj { max-width: 170px; }
  .azb-grid td input { min-width: 2.8em; }
  .payroll-table { font-size: .95rem; }
  .payroll-table th { padding: .5rem .6rem; }
  .payroll-table td { padding: .35rem .6rem; }
}

/* === Anmeldeseite & Passwort ändern (Zugangskonzept Stufe 2) ============== */
.login-body {
  min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 1rem;
}
.login-card {
  width: 100%; max-width: 380px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 1.8rem 1.6rem; box-shadow: 0 8px 30px rgba(0,0,0,.08);
}
.login-brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.15rem; margin-bottom: 1.1rem; }
.login-h1 { font-size: 1.2rem; margin: 0 0 .4rem; }
.login-ms { display: block; width: 100%; text-align: center; margin: .4rem 0 0; }
.login-divider {
  display: flex; align-items: center; gap: .6rem; color: var(--text-soft);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; margin: 1rem 0 .6rem;
}
.login-divider::before, .login-divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.login-form { display: flex; flex-direction: column; gap: .7rem; }
.login-field { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; }
.login-field span { color: var(--text-soft); }
.login-field input {
  padding: .55rem .6rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); font-size: .95rem;
}
.login-submit { width: 100%; justify-content: center; }
.login-hint { font-size: .8rem; color: var(--text-soft); margin: 1rem 0 0; line-height: 1.5; }

/* === Firmen-Verwaltung / Onboarding (/firmen) ============================= */
.fm-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.fm-table th { text-align: left; padding: .45rem .6rem; border-bottom: 2px solid var(--border); color: var(--text-soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.fm-table td { padding: .45rem .6rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.fm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem .9rem; align-items: end; margin-top: .6rem; }
@media (max-width: 900px) { .fm-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .fm-grid { grid-template-columns: 1fr; } }
.fm-field { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; }
.fm-field span { color: var(--text-soft); }
.fm-field input, .fm-field select {
  padding: .5rem .6rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); font-size: .92rem;
}
.fm-span2 { grid-column: span 2; }
@media (max-width: 620px) { .fm-span2 { grid-column: span 1; } }
.fm-plz input { max-width: 8rem; }
.fm-mode select { max-width: 12rem; }
.fm-check { display: flex; gap: .55rem; align-items: flex-start; grid-column: 1 / -1; font-size: .85rem; line-height: 1.45; }
.fm-check input { margin-top: .2rem; }
.fm-provider { margin: 1.1rem 0 .2rem; font-size: .95rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.fm-actions { display: flex; gap: .6rem; margin: 1rem 0 2rem; }
.fm-actions-inline { display: flex; align-items: end; }
.fm-errorlist { margin: .3rem 0 0 1.1rem; }
.fm-notice { background: #e8f4ea; color: #1f6b37; border: 1px solid #bfe0c8; }
[data-theme="dark"] .fm-notice { background: #17301e; color: #7fd39a; border-color: #295c38; }
.fm-otp { border: 2px solid var(--accent, #c04a1a); }
.fm-otp-box { display: flex; align-items: center; gap: .7rem; margin: .5rem 0; }
.fm-otp-box code { font-size: 1.35rem; letter-spacing: .06em; padding: .4rem .7rem; background: var(--surface-2, #f4f4f0); border-radius: 6px; user-select: all; }
.fm-chip { font-size: .72rem; padding: .12rem .5rem; border-radius: 999px; border: 1px solid var(--border); color: var(--text-soft); font-weight: 600; }
.fm-chip.on { background: #e8f4ea; color: #1f6b37; border-color: #bfe0c8; }
[data-theme="dark"] .fm-chip.on { background: #17301e; color: #7fd39a; border-color: #295c38; }
.fm-profile { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem; font-size: .9rem; line-height: 1.5; }
.fm-checklist { margin: .4rem 0 0 1.1rem; line-height: 1.7; }

/* === Startseite: Registrierung, Firmenwahl, Kürzel (29.08.2026) =========== */
.login-optional { color: var(--text-soft); font-weight: normal; font-size: .78rem; }
.login-pick { width: 100%; justify-content: space-between; display: flex; align-items: center; gap: .6rem; }
.login-pick code { font-size: .8rem; color: var(--text-soft); }
.login-signup { display: block; width: 100%; text-align: center; }

/* === Aufgaben-Kanban (/kanban) — 2026-08-29 === */
/* .container:has(.kanban-board) — jetzt aus --content-max (2200px) */
.kanban-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9rem; align-items: start; }
.kanban-col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem .75rem .9rem; box-shadow: var(--shadow); min-width: 0; }
.kanban-col--user { border-top: 3px solid var(--accent); }
.kanban-col--done { opacity: .85; }
.kanban-col-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.kanban-col-head h2 { margin: 0; font-size: 1rem; }
.kanban-count { color: var(--text-soft); font-size: .85rem; font-variant-numeric: tabular-nums; }
.kanban-hint { margin: .15rem 0 .6rem; color: var(--text-soft); font-size: .78rem; }
.kanban-cards { display: flex; flex-direction: column; gap: .55rem; }
.kanban-leer { color: var(--text-soft); text-align: center; padding: .6rem 0; }
.kanban-card { border: 1px solid var(--border); border-left-width: 4px; border-radius: 6px; padding: .5rem .6rem .55rem; background: var(--bg); }
.kanban-card.prio-1 { border-left-color: #b3452e; }
.kanban-card.prio-2 { border-left-color: #b07a18; }
.kanban-card.prio-3 { border-left-color: var(--border); }
.kanban-card h3 { margin: .25rem 0 .15rem; font-size: .92rem; line-height: 1.3; }
.kanban-card p { margin: 0; font-size: .8rem; color: var(--text-soft); line-height: 1.45; }
.kanban-card-top { display: flex; gap: .45rem; align-items: center; }
.kanban-block { font-size: .68rem; font-weight: 700; padding: .05rem .4rem; border-radius: 3px; background: var(--accent-soft); color: var(--accent); }
.kanban-prio { font-size: .68rem; color: var(--text-soft); font-weight: 600; }
.kanban-owner { font-size: .68rem; font-weight: 700; color: var(--success); background: #e2efe7; padding: .05rem .4rem; border-radius: 3px; }
.kanban-wartet { margin-top: .3rem; font-style: italic; }
@container inhalt (max-width: 1440px) { .kanban-board { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .kanban-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .kanban-board { grid-template-columns: 1fr; } }

/* --- Kanban: Aufgabennummer + Kopier-Chip (klick = Referenz in Zwischenablage) --- */
.kanban-ref {
  font: 700 .68rem/1.4 ui-monospace, Consolas, monospace;
  color: var(--accent, #c8501c);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: .02rem .35rem;
  cursor: copy;
  margin-right: .1rem;
}
.kanban-ref:hover { background: var(--accent, #c8501c); color: #fff; }
.kanban-ref.kopiert { color: var(--success, #1f8a4c); background: transparent; }

/* === Developer-Cockpit /developer (2026-08-29) =============================
   User-Menue -> "Developer": Kanban + Serverauslastung + KI-Statistik auf
   einer Seite. KPI-Kacheln nutzen die bestehende .detailbox/.kpi-Optik. */
.detailbox.detailbox-dev { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px)  { .detailbox.detailbox-dev { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .detailbox.detailbox-dev { grid-template-columns: repeat(6, 1fr); } }
.detailbox.detailbox-dev + .detailbox.detailbox-dev { margin-top: var(--s3); }
.dev-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 2rem; }
@media (min-width: 1100px) { .dev-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.dev-grid h3 { font-size: .95rem; margin: 1.1rem 0 .4rem; }
/* dito Developer-Seite. */
/* Tab-Leiste im Stil der Finanzen-Reiter: klein, dezent, Unterstrich = aktiv */
.dev-tabs { display: flex; gap: 1.6rem; border-bottom: 1px solid var(--border); margin: 0 0 1.1rem; }
.dev-tabs a {
  padding: .55rem .1rem; text-transform: uppercase; letter-spacing: .06em;
  font-size: .8rem; font-weight: 700; color: var(--text-soft);
  border-bottom: 2px solid transparent; text-decoration: none;
}
.dev-tabs a:hover { color: var(--text); text-decoration: none; }
.dev-tabs a.on { color: var(--accent); border-bottom-color: var(--accent); }

/* --- Kanban: Anmerkungen (Farbe/Markierung/Notiz, User-editierbar) --- */
.kanban-card.kf-gelb    { border-left: 3px solid #d4a017; background: rgba(212,160,23,.09); }
.kanban-card.kf-blau    { border-left: 3px solid #1d6fb8; background: rgba(29,111,184,.09); }
.kanban-card.kf-gruen   { border-left: 3px solid #1f8a4c; background: rgba(31,138,76,.09); }
.kanban-card.kf-rot     { border-left: 3px solid #c0392b; background: rgba(192,57,43,.09); }
.kanban-card.kf-violett { border-left: 3px solid #6d4cc4; background: rgba(109,76,196,.09); }
.kanban-marker {
  font: 600 .68rem/1.4 ui-monospace, Consolas, monospace;
  background: rgba(127,127,127,.14); border-radius: 3px; padding: .05rem .4rem;
}
.kanban-notiz {
  margin-top: .35rem; padding: .3rem .5rem; border-radius: 4px;
  background: rgba(212,160,23,.12); border-left: 2px solid #d4a017;
  white-space: pre-wrap;
}
.kanban-edit-spacer { flex: 1; }
.kanban-edit summary {
  list-style: none; cursor: pointer; opacity: .45; padding: 0 .2rem;
}
.kanban-edit summary::-webkit-details-marker { display: none; }
.kanban-edit[open] summary, .kanban-edit summary:hover { opacity: 1; }
.kanban-edit-form { display: grid; gap: .4rem; margin-top: .45rem; }
.kanban-edit-form input[type="text"], .kanban-edit-form textarea {
  width: 100%; font-size: .8rem; padding: .3rem .4rem;
}
.kanban-farben { display: flex; gap: .35rem; align-items: center; }
.kanban-swatch {
  width: 1.35rem; height: 1.35rem; border-radius: 4px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(127,127,127,.4); font-size: .7rem;
}
.kanban-swatch.kf-gelb    { background: #d4a017; }
.kanban-swatch.kf-blau    { background: #1d6fb8; }
.kanban-swatch.kf-gruen   { background: #1f8a4c; }
.kanban-swatch.kf-rot     { background: #c0392b; }
.kanban-swatch.kf-violett { background: #6d4cc4; }
.kanban-swatch input { position: absolute; opacity: 0; }
.kanban-swatch:has(input:checked) { outline: 2px solid var(--accent, #c8501c); outline-offset: 1px; }
/* Aufgeklapptes Anmerkungs-Formular bricht im Karten-Kopf auf volle Breite um */
.kanban-card-top { flex-wrap: wrap; }
.kanban-edit[open] { flex-basis: 100%; }

/* --- Kanban: Session-Start-Button (Deep-Link claude-cli://) --- */
.kanban-start {
  font-size: .72rem; line-height: 1.4; text-decoration: none;
  color: var(--success, #1f8a4c);
  border: 1px solid currentColor; border-radius: 3px;
  padding: .02rem .35rem;
}
.kanban-start:hover { background: var(--success, #1f8a4c); color: #fff; }

/* === Eigene Staemme: Rollen-Checkboxen im Kontakt-Formular (Kanban #14) ==== */
.fm-roles { display: flex; gap: 1.2rem; align-items: center; min-height: 2.35rem; }
.fm-roles .settings-check { font-size: .92rem; align-items: center; }
.fm-roles .settings-check input { margin-top: 0; }

/* === Kontaktliste + Kontaktdetails (Einstellungen → Kontakte, lexoffice-Vorbild, Kanban #14) === */
.stamm-wrap { overflow: visible; }
@media (max-width: 620px) { .stamm-wrap { overflow-x: auto; } }
.stamm-table td.num, .stamm-table th.num { text-align: right; white-space: nowrap; }
.stamm-more { font-size: 1.1rem; line-height: 1; }
.stamm-table .menu { right: 0; min-width: 210px; }
.stamm-table .menu form { margin: 0; }

.kd-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.kd-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .kd-grid { grid-template-columns: 1fr; } }
.kd-side, .kd-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.kd-dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; font-size: .9rem; margin: 0; }
.kd-dl dt { color: var(--text-soft); }
.kd-dl dd { margin: 0; overflow-wrap: anywhere; }
.kd-projlist { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .25rem; }
.kd-stats { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.kd-stat { flex: 1 1 200px; border: 1px solid var(--border); border-radius: 8px; padding: .7rem .9rem; display: flex; flex-direction: column; gap: .2rem; }
.kd-stat span { font-size: .78rem; color: var(--text-soft); }
.kd-stat strong { font-size: 1.2rem; }
.kd-chart { display: flex; gap: 4px; align-items: stretch; height: 150px; margin-top: .6rem; }
.kd-month { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; justify-content: flex-end; }
.kd-bars { display: flex; gap: 2px; align-items: flex-end; width: 100%; height: 100%; justify-content: center; }
.kd-bar { width: 38%; max-width: 22px; border-radius: 3px 3px 0 0; }
.kd-bar.in, .kd-dot.in { background: #1f8a4c; }
.kd-bar.out, .kd-dot.out { background: #c43d3d; }
.kd-mlabel { font-size: .7rem; color: var(--text-soft); }
.kd-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; }
.kd-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; margin-top: .5rem; }
.kd-doc { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; text-decoration: none; color: var(--text); background: var(--surface); display: flex; flex-direction: column; }
.kd-doc:hover { border-color: var(--accent); text-decoration: none; }
.kd-doc-thumb { height: 120px; background: rgba(0,0,0,.06); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.kd-doc-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.kd-doc-meta { padding: .45rem .55rem; display: flex; flex-direction: column; gap: .1rem; font-size: .8rem; }
.kd-doc-meta span { color: var(--text-soft); }

/* === Testsitzung (Kanban #51, nur Test-Stack) ============================= */
/* Topbar-Pill: zeigt Firma der Testsitzung, Klick = /auth/testsitzung */
.test-pill {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .78rem; font-weight: 600; white-space: nowrap;
  padding: .18rem .6rem; border-radius: 999px; text-decoration: none;
  background: #7a3b12; color: #ffd9c2; border: 1px solid #b3652f;
}
.test-pill:hover { text-decoration: none; filter: brightness(1.15); }
@media (max-width: 760px) { .test-pill-detail { display: none; } }
/* Badge auf der Auswahlseite (neben dem Logo) */
.ts-badge {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: .1rem .45rem; border-radius: 4px;
  background: var(--accent-soft, #f6e3d8); color: var(--accent, #c8501c);
}
/* Firmen-Select + Rollen-Radioliste im Login-Karten-Stil */
.ts-select {
  padding: .55rem .6rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); font-size: .95rem;
}
.ts-rollen { border: 1px solid var(--border); border-radius: 6px; margin: 0; padding: .5rem .7rem .6rem; }
.ts-rollen legend { font-size: .85rem; color: var(--text-soft); padding: 0 .3rem; }
.ts-rolle { display: flex; align-items: center; gap: .5rem; padding: .22rem 0; font-size: .92rem; cursor: pointer; }
/* Schnellwechsel-Spalte in /firmen (Sofort-Wechsel + Rollen-Wahl je Firma) */
.fm-testwechsel { white-space: nowrap; }
.fm-testwechsel-form { display: inline; }
.fm-testwechsel a { margin-left: .45rem; }
.fm-test-aktiv { color: var(--accent, #c8501c); font-weight: 600; font-size: .85rem; }


/* Markiermodus (⌖): gelesene Woerter kurz gruen einrahmen (Kanban #53) —
   der Nutzer sieht sofort, WOHER der uebernommene Wert stammt. */
.pdf-pick-mark {
  position: absolute;
  border: 2px solid #1f9d55;
  background: rgba(31, 157, 85, 0.18);
  border-radius: 3px;
  pointer-events: none;
  z-index: 4;
  animation: pdf-pick-fade 1.8s ease-out forwards;
}
@keyframes pdf-pick-fade {
  0% { opacity: 0; }
  12% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* ===== Rechnungs-Abschluss (Kanban #18) =====================================
   Abgeschlossene Rechnungen stehen im GoBD-Belegjournal und sind eingefroren;
   Entwuerfe sind frei aenderbar und NICHT gebucht. Der Unterschied muss in der
   Liste auf einen Blick erkennbar sein. */
.inv-locked,
.inv-draft-badge {
  display: inline-block;
  margin-left: .4rem;
  padding: .05rem .4rem;
  border-radius: 999px;
  font-size: .78rem;
  white-space: nowrap;
  vertical-align: baseline;
}
.inv-locked {
  background: rgba(31, 157, 85, .12);
  border: 1px solid rgba(31, 157, 85, .35);
  color: #1f7a45;
}
.inv-draft-badge {
  background: rgba(120, 120, 120, .12);
  border: 1px solid rgba(120, 120, 120, .3);
  color: #666;
}

/* Zahlweg beim Buchen (Kanban #18): bar bezahlte Belege werden sofort
   erledigt, alles andere wartet auf die Bankbuchung. */
/* Zahlweg-Zeile (Kanban #18): Haken + Zahldatum in EINER Zeile, Hinweis darunter.
   Achtung: .erfassung-grid label setzt flex-direction:column — hier per
   spezifischerem Selektor wieder auf Zeile drehen. */
.be-kasse {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .3rem .9rem;
  border-top: 1px solid var(--line, #e3e3e3);
  padding-top: .5rem;
  margin-top: .2rem;
}
.erfassung-grid .be-kasse-check {
  flex-direction: row; align-items: center; gap: .45rem;
  flex: 0 0 auto; cursor: pointer;
}
.be-kasse-check input { width: auto; margin: 0; }
.erfassung-grid .be-kasse-date {
  flex-direction: row; align-items: center; gap: .4rem;
  flex: 1 1 9rem; max-width: 13rem;
}
.erfassung-grid .be-kasse-date .lbl { white-space: nowrap; }
.erfassung-grid .be-kasse-date[hidden] { display: none; } /* display:flex wuerde das hidden-Attribut sonst aushebeln */
.be-kasse-hint { flex-basis: 100%; margin: 0; font-size: .78rem; }

/* Abgleich-Tab (Kanban #18) */
.bk-abgleich-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
.bk-abgleich-head h2 { margin: 0 0 .3rem; }
.bk-abgleich-pick select { margin-left: .4rem; }

/* === Marke scrOffice (Logo-Integration 31.08.2026) =========================
   Die Marke ist jetzt ein Bild (public/brand/, erzeugt von scripts/brand-assets.py)
   statt eines Buchstaben-Quadrats. Drei Fassungen, weil der Untergrund wechselt:
   auf-dunkel (weisse Schrift + oranges O) fuer die dunkle Kopfleiste und das
   Dunkel-Theme, auf-hell (anthrazit + oranges O) fuer helle Flaechen, und eine
   einfarbig weisse fuer farbige Flaechen (orange Leiste der externen
   Zeiterfassung). Farben der Oberflaeche selbst bleiben unveraendert. */
.brand-logo { display: block; width: auto; height: 22px; }
.topbar .brand { gap: 0; }
.login-brand .brand-logo { height: 30px; }

/* Theme-Umschaltung: data-theme steht vor dem Rendern am <html> (FOUC-Schutz in
   den Kopfzeilen), darum reicht CSS — kein Flackern, kein zweiter Request. */
.brand-logo.auf-dunkel { display: none; }
[data-theme="dark"] .brand-logo.auf-hell { display: none; }
[data-theme="dark"] .brand-logo.auf-dunkel { display: block; }

/* Externe Zeiterfassung: Wortmarke sitzt in einer Textzeile. */
.zx-top .brand img { vertical-align: -6px; margin-right: .15rem; }

/* Nummernkreis je Belegart (Kanban #54): vier gleichartige Bloecke unter
   einem Speichern-Knopf — die Belegart benennt der fette Kopf. */
.nk-art { padding: .5rem 0; border-top: 1px solid var(--line, #eee); }
.nk-art:first-of-type { border-top: 0; }
.nk-art-name { font-weight: 600; margin-bottom: .2rem; }

/* Status eines Vorgangs (Kanban #54): angenommen gruen, abgelehnt rot,
   alles dazwischen neutral — der Zustand soll im Vorbeigehen lesbar sein. */
.vg-status {
  display: inline-block;
  padding: .05rem .45rem;
  border-radius: 999px;
  font-size: .78rem;
  background: rgba(120, 120, 120, .12);
  border: 1px solid rgba(120, 120, 120, .3);
  color: #555;
}
.vg-status-angenommen,
.vg-status-bestaetigt,
.vg-status-quittiert { background: rgba(31, 157, 85, .12); border-color: rgba(31, 157, 85, .35); color: #1f7a45; }
.vg-status-abgelehnt { background: rgba(190, 60, 60, .1); border-color: rgba(190, 60, 60, .3); color: #a63b3b; }

/* Abgelehnte Angebote im Projekt-Archiv (Kanban #62): auffindbar, aber
   optisch zurueckgenommen — sie sind Nachweis, keine laufende Arbeit. */
/* Reiter »Rechnungen & Angebote« am Projekt + Projekte ohne Beleg in der Liste (Kanban #108) */
.pj-belege-sums { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: -.3rem 0 .7rem; }
.pj-belege .inv-serie { margin-top: .2rem; }
.pj-kalk-tab td, .pj-kalk-tab th { vertical-align: middle; }
.inv-ohne-liste { list-style: none; margin: .4rem 0 .2rem; padding: 0 .2rem; display: flex; flex-direction: column; gap: .4rem; }
.inv-ohne-liste li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; }
.inv-weitere-archiv { cursor: pointer; list-style: none; }
.inv-weitere-archiv::-webkit-details-marker { display: none; }
.inv-weitere-archiv::before { content: "▸ "; }
details[open] > .inv-weitere-archiv::before { content: "▾ "; }
.inv-inaktiv-zeile { opacity: .65; }

/* Ansichts-Umschalter der Rechnungsseite (Kanban #54, Umbau 31.08.):
   ersetzt die alte Reiterleiste — zwei Sichten auf dieselben Belege. */
.inv-switch { display: flex; gap: .3rem; margin: 0 0 1rem; }
.inv-switch-tab {
  padding: .45rem .9rem;
  border: 1px solid var(--line, #ddd);
  border-radius: 999px;
  text-decoration: none;
  color: #555;
  font-size: .92rem;
}
.inv-switch-tab.active {
  background: var(--accent, #1f9d55);
  border-color: var(--accent, #1f9d55);
  color: #fff;
  font-weight: 600;
}

/* === Projekte v3: Liste + Zeitschiene auf einer Seite (2026-09-01, Kanban #64)
   Ausgangslage (Screenshots des Betreibers): /projects war eine Tabelle aus
   Eingabefeldern (4 Felder je Zeile, 48 auf dem ersten Bildschirm) und las sich
   als Erfassungsmaske; /projects/timeline zeigte eine freie Achse mit
   aneinanderklebenden Monatslabels, ohne Raster, ohne echte Heute-Linie.
   Neu: Lesemodus zuerst (Eingabe-Rahmen erst bei Hover/Fokus), Geldspalten
   neben dem Deckungsbeitrag, Statusfarbe als Streifen — und eine Zeitschiene,
   deren Kopf, Gitternetz und Balken sich dasselbe Raster teilen.
   Reihenfolge im Markup: .pj-page > .pj-switch > (.pj-kpis + .pj-card).      */

/* Statusfarben einmal zentral — Liste, Chips und Zeitschiene lesen dieselben
   Werte (vorher standen sie dreimal als Literal im Stylesheet). */
:root {
  --pj-aktiv:         var(--success);
  --pj-in_planung:    #6b7a8f;
  --pj-pausiert:      #c79a3a;
  --pj-warten_nu:     #7a6fd0;
  --pj-warten_kunde:  #3a93c4;
  --pj-abgeschlossen: #8a8a8a;
}
[data-theme="dark"] {
  --pj-in_planung:    #8b9aa8;
  --pj-pausiert:      #d3a13a;
  --pj-warten_nu:     #a58ae8;
  --pj-warten_kunde:  #62a6de;
  --pj-abgeschlossen: #99a0a8;
}

/* Die Liste hat acht Spalten, die Zeitschiene lebt von Breite — deshalb mehr
   als die Lesebreite, aber gedeckelt wie /belege und /bank (Kanban #9). */
/* .container:has(.pj-page) — jetzt aus --content-max (2200px) */

.pj-page { display: flex; flex-direction: column; }

/* Kopfzeile: Umschalter links, Anlegen-Knopf rechts. Die Seiten-Ueberschrift
   ist entfallen (Wunsch Oliver 01.09.) — .pageheader ist keine Flex-Zeile,
   dort landete der Knopf unter dem Titel statt daneben. */
.pj-topline {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; margin: 0 0 1rem;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.pj-switch { display: flex; gap: .3rem; margin: 0; }
.pj-neu { margin-left: auto; }
.pj-switch-tab {
  padding: .45rem .95rem; border: 1px solid var(--border); border-radius: var(--r-pill);
  text-decoration: none; color: var(--text-soft); font-size: .92rem; background: var(--surface);
}
.pj-switch-tab:hover { text-decoration: none; border-color: var(--border-strong); color: var(--text); }
.pj-switch-tab.active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast, #fff); font-weight: 600; }

.pj-kpis { grid-template-columns: repeat(2, 1fr); margin-bottom: var(--s4); }
@media (min-width: 900px) { .pj-kpis { grid-template-columns: repeat(4, 1fr); } }
.pj-card { margin-top: 0; padding: 0; overflow: hidden; }

/* --- Werkzeugleiste: Suche, Filter-Chips, Sortierung ---------------------- */
.pj-toolbar {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  padding: .65rem .8rem; border-bottom: 1px solid var(--border); background: var(--surface);
}
.pj-toolbar-titel { font-size: .8rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.pj-toolbar-spacer { flex: 1 1 auto; }
.pj-suche {
  flex: 1 1 220px; min-width: 150px; max-width: 420px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: .38rem .6rem; color: var(--text); font: inherit; font-size: .9rem;
}
.pj-suche:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.pj-chip {
  font-size: .82rem; padding: .28rem .65rem; border-radius: var(--r-pill);
  border: 1px solid var(--border); color: var(--text-soft); background: var(--surface);
  text-decoration: none; white-space: nowrap; display: inline-block;
}
.pj-chip:hover { text-decoration: none; border-color: var(--border-strong); color: var(--text); }
.pj-chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.pj-chip-warn { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }
.pj-chip-warn.on { background: var(--warning); border-color: var(--warning); color: #fff; }
.pj-sortform { display: flex; align-items: center; gap: .4rem; }
.pj-sortlabel { font-size: .82rem; color: var(--text-faint); }
.pj-sort {
  font: inherit; font-size: .85rem; padding: .26rem .5rem;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text);
}

/* --- Die Liste ------------------------------------------------------------ */
.pj-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.pj-table thead th {
  text-align: left; padding: .5rem .6rem; font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint);
  border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--surface);
}
.pj-table th.num, .pj-table td.num { text-align: right; }
.pj-table td { padding: .45rem .6rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.pj-row:hover td { background: var(--surface-2); }
.pj-row td.pj-c-name { border-left: 3px solid var(--pj-abgeschlossen); padding-left: .75rem; }
.pj-row.s-aktiv        td.pj-c-name { border-left-color: var(--pj-aktiv); }
.pj-row.s-in_planung   td.pj-c-name { border-left-color: var(--pj-in_planung); }
.pj-row.s-pausiert     td.pj-c-name { border-left-color: var(--pj-pausiert); }
.pj-row.s-warten_nu    td.pj-c-name { border-left-color: var(--pj-warten_nu); }
.pj-row.s-warten_kunde td.pj-c-name { border-left-color: var(--pj-warten_kunde); }
.pj-row.is-sammler     td.pj-c-name { border-left-color: var(--text-faint); }

/* Name: Eingabefeld ohne Rahmen, bis man es anfasst — das war der Kern der
   Formular-Optik. Breite bewusst 100%, damit der Klickbereich die Zelle ist. */
.pj-c-name { min-width: 200px; }
.pj-c-name .pe-name {
  width: 100%; padding: .18rem .35rem; margin-left: -.35rem;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--text); font: inherit; font-weight: 600; font-size: .93rem;
}
.pj-row:hover .pe-name { border-color: var(--border); background: var(--surface); }
.pj-c-name .pe-name:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-ring); }
.pj-name-ro { font-weight: 600; font-size: .93rem; color: var(--text); }
.pj-name-ro:hover { color: var(--accent); }
.pj-sub { display: block; font-size: .76rem; color: var(--text-faint); line-height: 1.35; }
.pj-sub:empty { display: none; }

.pj-c-status { width: 1%; white-space: nowrap; }
.pj-status { display: inline-flex; align-items: center; }
.pj-c-status .pe-status {
  padding: .26rem .4rem; border: 1px solid var(--border); border-left-width: 4px;
  border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: inherit; font-size: .84rem;
  /* Ohne Deckel zieht die laengste Option ("Warten auf Nachunternehmer") die
     Spalte auf 214px auf — Platz, der dem Projektnamen fehlt. */
  max-width: 152px; width: 152px;
}
.pj-c-status .pe-status.is-hidden { display: none; }
.pe-status.s-aktiv        { border-left-color: var(--pj-aktiv); }
.pe-status.s-in_planung   { border-left-color: var(--pj-in_planung); }
.pe-status.s-pausiert     { border-left-color: var(--pj-pausiert); }
.pe-status.s-warten_nu    { border-left-color: var(--pj-warten_nu); }
.pe-status.s-warten_kunde { border-left-color: var(--pj-warten_kunde); }
.pe-status.s-abgeschlossen{ border-left-color: var(--pj-abgeschlossen); }
.pj-pill {
  display: inline-block; font-size: .76rem; font-weight: 600; padding: .16rem .6rem;
  border-radius: var(--r-pill); border: 1px solid var(--border); color: var(--text-soft);
  white-space: nowrap; background: transparent; font-family: inherit; line-height: 1.35;
}
button.pj-pill { cursor: pointer; }
/* Der Chip traegt die Statusfarbe; die Flaeche ist eine leichte Tönung davon,
   damit die Zeile ruhig bleibt (Vorbild: der freigegebene Entwurf). */
.pj-pill-aktiv        { color: var(--pj-aktiv);        border-color: var(--pj-aktiv);        background: color-mix(in srgb, var(--pj-aktiv) 13%, transparent); }
.pj-pill-in_planung   { color: var(--pj-in_planung);   border-color: var(--pj-in_planung);   background: color-mix(in srgb, var(--pj-in_planung) 13%, transparent); }
.pj-pill-pausiert     { color: var(--pj-pausiert);     border-color: var(--pj-pausiert);     background: color-mix(in srgb, var(--pj-pausiert) 13%, transparent); }
.pj-pill-warten_nu    { color: var(--pj-warten_nu);    border-color: var(--pj-warten_nu);    background: color-mix(in srgb, var(--pj-warten_nu) 13%, transparent); }
.pj-pill-warten_kunde { color: var(--pj-warten_kunde); border-color: var(--pj-warten_kunde); background: color-mix(in srgb, var(--pj-warten_kunde) 13%, transparent); }
.pj-pill-abgeschlossen { color: var(--text-soft); border-color: var(--border-strong); }
.pj-pill-sammler { background: var(--surface-2); }
/* Aenderbar-Hinweis erst beim Ueberfahren der Zeile — wie beim Namen und beim
   Zeitraum: lesen zuerst, bearbeiten auf Klick. */
.pj-row:hover button.pj-pill::after { content: ' ▾'; opacity: .7; }
button.pj-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Zeitraum als Satz; der Editor erscheint erst auf Klick. */
.pj-c-zeit { width: 1%; white-space: nowrap; }
.pj-zeit-text {
  font-size: .84rem; color: var(--text-soft); font-variant-numeric: tabular-nums;
  background: none; border: 1px solid transparent; border-radius: var(--r-sm);
  padding: .18rem .35rem; margin-left: -.35rem; font-family: inherit; text-align: left; cursor: text;
}
button.pj-zeit-text:hover { border-color: var(--border); background: var(--surface); }
button.pj-zeit-text:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pj-zeit-dauer { font-style: italic; color: var(--text-faint); }
.pj-pfeil { color: var(--text-faint); }
.pj-offen { color: var(--text-faint); }
.pj-fehlt { color: var(--warning); font-weight: 600; }
.pj-zeit-edit { display: inline-flex; align-items: center; gap: .3rem; }
.pj-zeit-edit.is-hidden { display: none; }
.pj-zeit-edit .pe-date {
  padding: .22rem .35rem; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); font: inherit; font-size: .82rem;
}
.pj-zeit-pfeil { color: var(--text-faint); }

.pj-c-belege { width: 1%; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.pj-c-umsatz, .pj-c-kosten { width: 1%; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pj-leer { color: var(--text-faint); }
.pj-auftrag { display: block; font-size: .72rem; color: var(--text-faint); margin-top: .1rem; }
.pj-auftrag-bar {
  display: inline-block; vertical-align: middle; width: 40px; height: 4px; margin-right: .3rem;
  background: var(--surface-3); border-radius: 2px; overflow: hidden;
}
.pj-auftrag-bar i { display: block; height: 100%; background: var(--info); border-radius: 2px; }

.pj-c-db { width: 1%; white-space: nowrap; }
.pj-marge { display: inline-flex; align-items: center; gap: .45rem; justify-content: flex-end; }
.pj-marge-bar {
  width: 46px; height: 6px; border-radius: 3px; background: var(--surface-3);
  overflow: hidden; flex: 0 0 auto; display: block; position: relative;
}
.pj-marge-bar i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.pj-marge-bar i.pos { left: 0; background: var(--success); }
.pj-marge-bar i.neg { right: 0; background: var(--danger); }
.pj-db-wert { font-variant-numeric: tabular-nums; min-width: 88px; text-align: right; display: inline-block; }
.pj-db-wert.db-pos { color: var(--success); font-weight: 600; }
.pj-db-wert.db-neg { color: var(--danger); font-weight: 600; }
.pj-marge-pz { font-size: .78rem; color: var(--text-soft); width: 40px; text-align: right; font-variant-numeric: tabular-nums; }

.pj-c-akt { width: 1%; white-space: nowrap; text-align: right; }
.pj-trenner td {
  background: var(--surface-2); font-size: .82rem; color: var(--text-soft);
  border-top: 1px solid var(--border);
}
.pj-trenner .pj-pill { margin-right: .5rem; }
.pj-fuss { display: block; padding: .8rem; border-top: 1px solid var(--border); margin: 0; font-size: .82rem; }

/* --- Zeitschiene ---------------------------------------------------------- */
.tlx { --tl-label: 232px; padding: .9rem .8rem 0; }
.tlx-scroll { overflow-x: auto; }
.tlx-inner { min-width: 720px; }
.tlx-head, .tlx-row { display: grid; grid-template-columns: var(--tl-label) 1fr; column-gap: 0; }
.tlx-head-sp { font-size: .74rem; color: var(--text-faint); align-self: end; padding-bottom: .3rem; }
.tlx-jahre { display: grid; grid-template-columns: repeat(var(--tl-monate), 1fr); font-size: .72rem; color: var(--text-faint); letter-spacing: .06em; }
.tlx-jahre span { padding: 0 0 .1rem .4rem; border-left: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.tlx-monate { display: grid; grid-template-columns: repeat(var(--tl-monate), 1fr); font-size: .72rem; color: var(--text-soft); border-bottom: 1px solid var(--border); }
.tlx-monate span { text-align: center; padding: .1rem 0 .3rem; font-variant-numeric: tabular-nums; }
.tlx-monate span.q { color: var(--text); font-weight: 600; }

.tlx-rows { position: relative; padding-top: 1.5rem; }
.tlx-overlay { position: absolute; top: 0; bottom: 0; left: var(--tl-label); right: 0; pointer-events: none; }
.tlx-gitter { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--tl-monate), 1fr); }
.tlx-gitter i { border-right: 1px solid var(--border); opacity: .6; }
.tlx-gitter i.q { opacity: 1; }
.tlx-gitter i:last-child { border-right: 0; }
.tlx-heute { position: absolute; top: 1.3rem; bottom: 0; width: 0; border-left: 2px dashed var(--danger); }
.tlx-heute b {
  position: absolute; top: -1.2rem; left: 0; transform: translateX(-50%);
  background: var(--danger); color: #fff; font-size: .66rem; font-weight: 600;
  padding: .06rem .35rem; border-radius: var(--r-sm); white-space: nowrap; font-variant-numeric: tabular-nums;
}

.tlx-row { align-items: center; height: 34px; position: relative; text-decoration: none; color: inherit; }
.tlx-row:hover { background: var(--surface-2); text-decoration: none; }
.tlx-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tlx-name {
  font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding-right: .8rem; color: var(--text);
}
.tlx-name small { color: var(--text-faint); font-size: .74rem; }
.tlx-track { position: relative; height: 34px; }
.tlx-bar {
  position: absolute; top: 9px; height: 16px; border-radius: 8px;
  border: 1px solid var(--pj-aktiv); background: var(--success-soft);
  overflow: hidden; display: flex; align-items: center; min-width: 3px;
}
.tlx-bar.clip-l { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-style: dotted; }
/* Gekappte Kante: schraffierte Schnittflaeche = „laeuft ausserhalb des
   Fensters weiter". Ohne sie sehen im 6-Monats-Fenster alle Altprojekte so
   aus, als haetten sie am Ersten des Monats begonnen. */
.tlx-bar.clip-l::before, .tlx-bar-offen.clip-l::before, .tlx-bar.clip-r::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 6px;
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,.7) 0 2px, transparent 2px 4px);
}
.tlx-bar.clip-l::before, .tlx-bar-offen.clip-l::before { left: 0; }
.tlx-bar.clip-r::after { right: 0; }
.tlx-bar.clip-r { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-style: dotted; }
.tlx-ist { position: absolute; left: 0; top: 0; bottom: 0; background: var(--pj-aktiv); opacity: .85; }
.tlx-ist.ueber { background: var(--danger); }
.tlx-bar em {
  position: relative; font-style: normal; font-size: .66rem; font-weight: 600;
  color: #fff; padding-left: .45rem; white-space: nowrap; overflow: hidden;
  text-shadow: 0 0 3px rgba(0,0,0,.35);
}
.tlx-bar-offen { border: 0; background: var(--pj-aktiv); opacity: .85; border-radius: 8px 0 0 8px; }
.tlx-fade {
  position: absolute; top: 9px; height: 16px; width: 46px; pointer-events: none;
  background: linear-gradient(to right, var(--pj-aktiv), transparent); opacity: .85;
}
.tlx-kappe {
  position: absolute; top: 11px; font-size: .66rem; color: var(--text-faint);
  white-space: nowrap; padding-left: 52px; pointer-events: none;
}
/* Statusfarben der Balken */
.tlx-bar.s-in_planung   { border-color: var(--pj-in_planung); }
.tlx-bar.s-pausiert     { border-color: var(--pj-pausiert); }
.tlx-bar.s-warten_nu    { border-color: var(--pj-warten_nu); }
.tlx-bar.s-warten_kunde { border-color: var(--pj-warten_kunde); }
.tlx-bar.s-in_planung   .tlx-ist:not(.ueber) { background: var(--pj-in_planung); }
.tlx-bar.s-pausiert     .tlx-ist:not(.ueber) { background: var(--pj-pausiert); }
.tlx-bar.s-warten_nu    .tlx-ist:not(.ueber) { background: var(--pj-warten_nu); }
.tlx-bar.s-warten_kunde .tlx-ist:not(.ueber) { background: var(--pj-warten_kunde); }
.tlx-bar-offen.s-in_planung   { background: var(--pj-in_planung); }
.tlx-bar-offen.s-pausiert     { background: var(--pj-pausiert); }
.tlx-bar-offen.s-warten_nu    { background: var(--pj-warten_nu); }
.tlx-bar-offen.s-warten_kunde { background: var(--pj-warten_kunde); }
.tlx-fade.s-in_planung   { background: linear-gradient(to right, var(--pj-in_planung), transparent); }
.tlx-fade.s-pausiert     { background: linear-gradient(to right, var(--pj-pausiert), transparent); }
.tlx-fade.s-warten_nu    { background: linear-gradient(to right, var(--pj-warten_nu), transparent); }
.tlx-fade.s-warten_kunde { background: linear-gradient(to right, var(--pj-warten_kunde), transparent); }

.tlx-ohne {
  margin-top: .6rem; border-top: 1px dashed var(--border); padding: .6rem .1rem 0;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .82rem; color: var(--text-soft);
}
.tlx-ohne-hint { color: var(--text-faint); }
.tlx-legende {
  display: flex; gap: .9rem; flex-wrap: wrap; margin-top: .7rem;
  padding: .6rem .1rem .9rem; border-top: 1px solid var(--border);
  font-size: .76rem; color: var(--text-soft);
}
.tlx-legende span { display: flex; align-items: center; gap: .35rem; }
.tlx-legende i { width: 20px; height: 9px; border-radius: 5px; display: inline-block; background: var(--pj-aktiv); }
.tlx-legende i.s-in_planung   { background: var(--pj-in_planung); }
.tlx-legende i.s-pausiert     { background: var(--pj-pausiert); }
.tlx-legende i.s-warten_nu    { background: var(--pj-warten_nu); }
.tlx-legende i.s-warten_kunde { background: var(--pj-warten_kunde); }
.tlx-legende i.leg-offen { background: linear-gradient(to right, var(--pj-aktiv), transparent); }
.tlx-legende i.leg-rest  { background: var(--success-soft); border: 1px solid var(--pj-aktiv); }
.tlx-leer { padding: 2rem .8rem; text-align: center; color: var(--text-soft); }

/* Schmale Fenster: Label-Spalte kuerzen, Zeitschiene bleibt scrollbar. */
@container inhalt (max-width: 1140px) {
  .tlx { --tl-label: 170px; }
  .pj-table .pj-c-belege, .pj-table thead th:nth-child(4) { display: none; }
}
@media (max-width: 760px) {
  .tlx { --tl-label: 120px; padding: .7rem .5rem 0; }
  .pj-toolbar { padding: .55rem .6rem; }
  .pj-suche { max-width: none; }
  .pj-table thead { display: none; }
  .pj-table td { padding: .35rem .5rem; }
  .pj-c-belege, .pj-c-kosten { display: none; }
}

/* Geraete-Kopplung (/geraete, Kanban #65) ---------------------------------
   Der Kopplungscode wird vom Bildschirm abgetippt — darum gross, monospace
   und weit gesperrt. user-select:all macht aus einem Klick eine Auswahl. */
.geraete-code {
  display: inline-block;
  margin: .6rem 0 .8rem;
  padding: .7rem 1.1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  font-weight: 700;
  letter-spacing: .18em;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: 8px;
  user-select: all;
}

/* Beleg erfassen (/inbox/neu, Kanban #68) ----------------------------------
   Kanal B aus dem Scan-Konzept: Foto vom Handy statt Scanner. Bewusst eine
   schmale, mit dem Daumen bedienbare Spalte — die Seite wird fast immer
   einhaendig auf der Baustelle benutzt, nicht am Schreibtisch. */
.bn-head { margin-bottom: var(--s3); }
.bn-wrap { max-width: 620px; }

.bn-capture { display: grid; gap: var(--s2); }
.bn-capture .btn { justify-content: center; }
/* Der Aufnahme-Knopf ist das eine Ziel der Seite — entsprechend gross. */
.bn-shot { min-height: 64px; font-size: 1.05rem; font-weight: 600; gap: .55rem; }
.bn-shot svg { width: 24px; height: 24px; }
.bn-pickbtn { min-height: 44px; }

.bn-hint { margin: var(--s3) 0 0; font-size: .84rem; color: var(--text-soft); }

.bn-pages { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s2); }
.bn-page {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r);
}
.bn-thumb {
  flex: 0 0 54px; width: 54px; height: 72px; object-fit: cover;
  border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border);
}
.bn-thumb-pdf {
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; color: var(--text-soft); letter-spacing: .04em;
}
.bn-page-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bn-page-meta small { color: var(--text-faint); font-size: .76rem; }
.bn-page-actions { display: flex; gap: var(--s1); flex: 0 0 auto; }
/* Pfeil/Kreuz sind winzige Zeichen — als Touch-Ziel auf 40px aufziehen. */
.bn-page-actions .btn-link {
  min-width: 40px; min-height: 40px; line-height: 40px; text-align: center;
  font-size: 1.05rem; padding: 0; border-radius: var(--r-sm);
}
.bn-page-actions .btn-link[disabled] { opacity: .35; pointer-events: none; }

.bn-form { margin-top: var(--s4); display: grid; gap: var(--s3); }
.bn-field { display: grid; gap: var(--s1); font-size: .84rem; color: var(--text-soft); }
/* 16px: alles darunter zoomt iOS beim Antippen automatisch heran. */
.bn-field input, .bn-field select {
  font-size: 16px; padding: .6rem .7rem; min-height: 44px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); width: 100%;
}
.bn-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.bn-send { min-height: 48px; flex: 1 1 220px; justify-content: center; font-weight: 600; }
.bn-einzeln { display: flex; align-items: center; gap: .45rem; font-size: .84rem; color: var(--text-soft); }
.bn-einzeln input { width: 20px; height: 20px; }

.bn-status {
  margin-top: var(--s4); padding: .75rem .9rem; border-radius: var(--r);
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: .9rem; line-height: 1.5;
}
.bn-status.ok     { background: var(--success-soft); border-color: var(--success); color: var(--text); }
.bn-status.warn   { background: var(--warning-soft); border-color: var(--warning); color: var(--text); }
.bn-status.fehler { background: var(--danger-soft);  border-color: var(--danger);  color: var(--text); }
.bn-status .btn { margin-top: var(--s2); }

/* Aufnahme-Knopf in der Handyansicht: schwebt ueber der Liste, direkt ueber
   der Tab-Bar. Auf dem Desktop unnoetig (dort steht "＋ Neuer Beleg" in der
   Belege-Leiste), darum nur in der Drawer-Welt sichtbar. */
.bn-fab { display: none; }
@media (max-width: 959.98px) {
  .bn-fab {
    position: fixed; right: var(--s4); z-index: 46;
    bottom: calc(64px + env(safe-area-inset-bottom) + var(--s3));
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .8rem 1.05rem; border-radius: var(--r-pill);
    background: var(--accent); color: var(--accent-contrast);
    border: 0; box-shadow: var(--shadow-3);
    font-size: .92rem; font-weight: 600; text-decoration: none;
    touch-action: manipulation;
  }
  .bn-fab:hover { background: var(--accent-hover); color: var(--accent-contrast); text-decoration: none; }
  .bn-fab svg { width: 20px; height: 20px; }
}

/* Eingang: Erfassen-Knopf neben der Ueberschrift (.pageheader ist sonst
   keine Flex-Zeile — der Knopf landete unter dem Titel). */
@media (max-width: 959.98px) { .inbox-neu { display: none; } }

/* Meine Belege (/beleg-erfassen, Kanban #71) -------------------------------
   Die Liste der SELBST erfassten Belege — bewusst nur Vorschaubild, Datum,
   Stand und ggf. der Grund einer Zurueckweisung. Mehr braucht der Erfasser
   nicht, und mehr darf die Seite auch gar nicht wissen. */
.be-liste { margin-top: var(--s6); border-top: 1px solid var(--border); padding-top: var(--s4); }
.be-liste h2 { font-size: 1.05rem; margin: 0 0 .2rem; }
.be-rows { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s2); }
.be-row {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s2); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r);
}
.be-thumbwrap {
  flex: 0 0 54px; width: 54px; height: 72px; overflow: hidden;
  border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.be-thumbwrap img { width: 100%; height: 100%; object-fit: cover; }
.be-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.be-row-main b { overflow-wrap: anywhere; font-size: .92rem; }
.be-row-main small { color: var(--text-faint); font-size: .76rem; }
.be-status-badge {
  align-self: flex-start; padding: .12rem .5rem; border-radius: var(--r-pill);
  font-size: .72rem; font-weight: 600;
}
.be-status-badge.s-wartet         { background: var(--info-soft);    color: var(--info); }
.be-status-badge.s-erledigt       { background: var(--success-soft); color: var(--success); }
.be-status-badge.s-zurueckgewiesen{ background: var(--danger-soft);  color: var(--danger); }
/* Der Grund kommt aus dem Buero — er ist der eigentliche Nutzen der Liste. */
.be-kommentar {
  margin: .25rem 0 0; padding: .4rem .55rem;
  background: var(--danger-soft); border-radius: var(--r-sm);
  font-size: .82rem; color: var(--text); overflow-wrap: anywhere;
}
.be-row .be-weg { flex: 0 0 auto; padding: .35rem .2rem; }
.be-leer { padding: var(--s4) .2rem; }
@media (pointer: coarse) {
  .be-row .be-weg { min-height: 40px; display: inline-block; line-height: 40px; padding: 0 .4rem; }
}

/* Kanban: Zeilenumbrueche im Kartentext erhalten -------------------------
   Die meisten Karten tragen einen Fliesstext (unveraendert). Karten, die
   eine Liste sind — z.B. #70 Store-Anmeldung —, sollen ihre Zeilen behalten,
   statt zu einem Absatz zu verkleben. pre-line laesst Einrueckungen im JSON
   zusammenfallen und bricht nur an echten Umbruechen. */
.kanban-card p { white-space: pre-line; }

/* KI-Reiter: Störungen & Limits (Auftrag 01.09.2026) ---------------------
   KI-Warnungen liefen früher im Inbox-Warnbanner mit; sie sind aber ein
   Limit-/Konto-Thema des Inhabers und stehen jetzt im KI-Reiter. Optik
   bewusst wie .fetch-alerts, damit "Warnung" überall gleich aussieht. */
.ki-stoerungen {
  margin: 0 0 1rem;
  padding: .6rem 1rem;
  border: 1px solid var(--warning, #9a6700);
  border-radius: var(--radius, 8px);
  background: var(--warning-soft, #fdf0d3);
  color: var(--text, #1a1a1a);
}
.ki-stoerungen h3 { margin: .2rem 0 .1rem; font-size: .95rem; }
.ki-stoerungen ul { margin: .5rem 0 .3rem; padding-left: 1.2rem; }
.ki-stoerungen li { margin: .5rem 0; font-size: .9rem; overflow-wrap: anywhere; }
.ki-stoerung-ts { color: var(--text-soft, #5a5a5a); font-variant-numeric: tabular-nums; margin-right: .35rem; }
.ki-stoerung-kopf { display: inline; }
.ki-stoerung-ack { display: inline-block; margin-left: .5rem; }
.ki-stoerung-ack .btn-link { font-size: .85rem; white-space: nowrap; }
.ki-stoerung-hint { margin: .15rem 0 .3rem; font-size: .85rem; color: var(--text-soft, #5a5a5a); }
.ki-stoerung-roh summary { cursor: pointer; font-size: .8rem; color: var(--text-soft, #5a5a5a); }
.ki-stoerung-roh code {
  display: block; margin-top: .25rem; padding: .35rem .5rem;
  background: var(--surface, rgba(255,255,255,.55));
  border-radius: 6px; font-size: .78rem; overflow-wrap: anywhere;
}
.ki-stoerungen-fuss { display: flex; align-items: center; gap: 1rem; margin: .5rem 0 .2rem; font-size: .9rem; }
.ki-stoerungen-ok { margin: 0 0 1rem; font-size: .9rem; color: var(--success, #1a7f37); }
.ai-pill .ai-pill-warn { font-weight: 700; }

/* ==========================================================================
   Meine Baustellen (Kanban #22) — Monteurs-Projektsicht
   Karten statt Tabelle: die Seite wird fast ausschliesslich auf dem Handy
   geoeffnet, und dort ist eine Zeile mit sechs Spalten unlesbar. Ab Tablet
   fuellen sich die Karten nebeneinander auf.
   ========================================================================== */
.mb-list { display: grid; gap: .8rem; grid-template-columns: 1fr; margin: 0 0 1rem; }
@media (min-width: 700px) { .mb-list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } }

.mb-card {
  display: block; padding: .9rem 1rem; text-decoration: none; color: inherit;
  background: var(--surface, #fff); border: 1px solid var(--border, #e2e2e2);
  border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.mb-card:hover, .mb-card:focus-visible { border-color: var(--accent, #2563eb); }
.mb-card-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.mb-card-title { font-weight: 600; font-size: 1.02rem; overflow-wrap: anywhere; }
.mb-card-sub { font-size: .85rem; color: var(--text-soft, #5a5a5a); margin-top: .1rem; }
.mb-card-line { font-size: .9rem; margin-top: .35rem; overflow-wrap: anywhere; }
.mb-card-meta {
  display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .6rem;
  font-size: .82rem; color: var(--text-soft, #5a5a5a); font-variant-numeric: tabular-nums;
}
.mb-summe { margin: .2rem 0 1rem; }

.mb-dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
.mb-dl dt { color: var(--text-soft, #5a5a5a); font-size: .88rem; }
.mb-dl dd { margin: 0; overflow-wrap: anywhere; }
.mb-maplink { margin-left: .5rem; font-size: .85rem; white-space: nowrap; }
@media (max-width: 480px) { .mb-dl { grid-template-columns: 1fr; gap: .1rem .5rem; } .mb-dl dd { margin-bottom: .5rem; } }

.mb-files { list-style: none; margin: 0; padding: 0; }
.mb-files li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  padding: .5rem 0; border-bottom: 1px solid var(--border, #eee);
}
.mb-files li:last-child { border-bottom: 0; }
.mb-dl-link { margin-left: auto; font-size: .85rem; white-space: nowrap; }
.mb-stunden-summe { margin: 0 0 .6rem; font-variant-numeric: tabular-nums; }
.mb-stunden td.num, .mb-stunden th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Monteurs-Dauerlink (Kanban #22) — /payroll/employees/<persnr>/dauerlink
   Der QR-Code wird ausgedruckt: feste weisse Flaeche, grosszuegiger Rand,
   und beim Drucken faellt alles weg ausser Code und Adresse.
   ========================================================================== */
.dl-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 720px) { .dl-grid { grid-template-columns: auto 1fr; } }
.dl-qr { text-align: center; }
.dl-qr svg { display: block; margin: 0 auto .6rem; border: 1px solid var(--border, #e2e2e2); border-radius: 8px; padding: .5rem; background: #fff; }
.dl-qr p { max-width: 240px; margin: 0 auto; }
.dl-url { display: inline-block; overflow-wrap: anywhere; font-size: .9rem; }
.dl-warn {
  margin: 1rem 0; padding: .7rem .9rem; border-radius: 8px; font-size: .92rem;
  background: var(--warning-soft, #fdf0d3); color: var(--text, #1a1a1a);
}
.dl-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.dl-actions form { margin: 0; }
.dl-liste { margin: .3rem 0 0; padding-left: 1.2rem; }
.dl-liste li { margin: .45rem 0; }
.btn.dl-an { border-color: var(--success, #1a7f37); color: var(--success, #1a7f37); }
@media print {
  .topbar, .tabbar, .sidebar, .dl-actions, .dl-liste, .pageheader .lead { display: none !important; }
  .dl-qr svg { border: 0; }
}

/* ==========================================================================
   Beteiligte am Projekt (02.09.2026) — Auswahl statt Freitext
   ========================================================================== */
.mitwahl { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.mitwahl select { flex: 1 1 14rem; min-width: 0; }
.mitwahl-liste { list-style: none; margin: .5rem 0 0; padding: 0; }
.mitwahl-liste li {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .35rem 0; border-bottom: 1px solid var(--border, #eee); font-size: .93rem;
}
.mitwahl-liste li:last-child { border-bottom: 0; }
.mitwahl-liste .btn-link { margin-left: auto; }

.extern-row { display: grid; gap: .4rem; grid-template-columns: 1fr; margin-bottom: .4rem; }
@media (min-width: 640px) { .extern-row { grid-template-columns: 1.2fr 1fr 1fr 1.4fr; } }

.bet-liste { list-style: none; margin: .2rem 0 .8rem; padding: 0; }
.bet-liste li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem;
  padding: .4rem 0; border-bottom: 1px solid var(--border, #eee);
}
.bet-liste li:last-child { border-bottom: 0; }
.bet-name { font-weight: 600; }
.bet-weg { margin: 0 0 0 auto; }
.bet-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin: 0 0 1rem; }
.bet-form label { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: var(--text-soft, #5a5a5a); }
.bet-extern input { min-width: 0; flex: 1 1 9rem; }

/* ==========================================================================
   LV-Import (Block F, Stufe F·1, Kanban #83): Reiter „LV“ am Projekt —
   Upload, Kopfdaten, Zähler-Pillen, Baum links / Detail rechts.
   Dazu die neuen Projektstatus anfrage / verloren (Liste + Pillen).
   ========================================================================== */
.pj-pill-anfrage  { color: var(--info); border-color: var(--info); background: color-mix(in srgb, var(--info) 13%, transparent); }
.pj-pill-verloren { color: var(--text-faint); border-color: var(--border); text-decoration: line-through; }
.pe-status.s-anfrage  { border-left-color: var(--info); }
.pe-status.s-verloren { border-left-color: var(--border-strong); }

.lv-fehler { color: var(--danger); background: var(--danger-soft); padding: .5rem .8rem; border-radius: var(--r); }
.lv-upload { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin: 0 0 1rem; }
.lv-upload label { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .9rem; }
.lv-docs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; }
.lv-kopf { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .5rem 1.2rem; margin: 0 0 .8rem; font-size: .93rem; }
.lv-kopf dt { color: var(--text-soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.lv-kopf dd { margin: 0; }
.lv-zaehler { display: flex; flex-wrap: wrap; gap: .35rem; margin: .2rem 0 .8rem; }
.lv-pill {
  display: inline-block; font-size: .78rem; font-weight: 600; padding: .14rem .55rem; line-height: 1.35;
  border-radius: var(--r-pill); border: 1px solid var(--border); color: var(--text-soft); white-space: nowrap;
}
.lv-pill-warn { color: var(--warning); border-color: var(--warning); background: var(--warning-soft); }
.lv-pill-ok   { color: var(--success); border-color: var(--success); background: var(--success-soft); }
.lv-pill-art  { color: var(--info); border-color: var(--info); background: var(--info-soft); }
.lv-warnliste { margin: .3rem 0 .8rem; padding-left: 1.2rem; font-size: .9rem; }
.lv-vorbem { margin: 0 0 .8rem; }
.lv-vorbem summary { cursor: pointer; font-weight: 600; }
.lv-vorbem pre { white-space: pre-wrap; font-family: inherit; font-size: .9rem; line-height: 1.45; }
.lv-md { display: grid; grid-template-columns: minmax(18rem, 2fr) minmax(18rem, 3fr); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .lv-md { grid-template-columns: 1fr; } }
.lv-tree {
  max-height: 72vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--r);
  padding: .4rem .6rem; background: var(--surface); font-size: .9rem;
}
.lv-tree details { margin: .15rem 0; }
.lv-tree summary { cursor: pointer; font-weight: 600; padding: .15rem 0; }
.lv-tree ul { list-style: none; margin: 0 0 0 .9rem; padding: 0; }
.lv-tree li a { display: flex; flex-wrap: wrap; gap: .1rem .4rem; align-items: baseline; padding: .12rem .3rem; border-radius: 4px; color: inherit; text-decoration: none; overflow-wrap: anywhere; min-width: 0; }
.lv-tree li a:hover { background: var(--surface-2); }
.lv-tree li a.on { background: var(--accent-soft); color: var(--accent); }
.lv-oz { font-family: var(--font-num); color: var(--text-soft); font-weight: 400; margin-right: .4rem; white-space: nowrap; }
.lv-tree .lv-menge { margin-left: auto; font-family: var(--font-num); white-space: nowrap; color: var(--text-soft); }
.lv-tree .lv-hinweis { color: var(--text-faint); font-style: italic; }
.lv-tree .lv-warn { color: var(--warning); }
.lv-detail { border: 1px solid var(--border); border-radius: var(--r); padding: .8rem 1rem; background: var(--surface); position: sticky; top: 4.2rem; }
.lv-detail h3 { margin: .2rem 0 .4rem; }
.lv-detail h4 { margin: .8rem 0 .3rem; font-size: .9rem; }
.lv-lang { white-space: pre-wrap; font-family: inherit; font-size: .92rem; line-height: 1.45; margin: .6rem 0; max-height: 58vh; overflow: auto; }
.lv-bl { margin: .3rem 0; padding-left: 1.2rem; font-size: .9rem; }

/* ==========================================================================
   Angebotsaufmaß (Block F, Stufe F·2, Kanban #84): Reiter „Aufmaß“ am Projekt —
   Titel als Aufklapper, Positionszeilen mit Plausibilitäts-Pille (grün/gelb/grau),
   darunter die Bauteil-Zeilen und das Zeilenformular. Dazu der Bauteiltyp-Katalog
   unter Einstellungen → Kalkulation. Lesbar statt klein (Rückmeldung 08.09.2026):
   Grundschrift 1rem, Spaltenköpfe mit gepunkteter Unterstreichung = Mouseover
   erklärt sie, Hilfe-Kasten oben, Buttons mit Text.
   ========================================================================== */
.am-ok-msg { color: var(--success); background: var(--success-soft); padding: .5rem .8rem; border-radius: var(--r); margin: 0 0 .8rem; }
.am-hilfe { margin: 0 0 1rem; border: 1px solid var(--info); border-radius: var(--r); background: var(--info-soft); padding: .35rem .9rem; }
.am-hilfe > summary { cursor: pointer; font-weight: 600; color: var(--info); padding: .35rem 0; font-size: .98rem; }
.am-hilfe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .6rem 1.6rem; padding: .3rem 0 .6rem; font-size: .95rem; color: var(--text); }
.am-hilfe h4 { margin: .3rem 0 .35rem; font-size: .95rem; }
.am-hilfe ul { margin: 0; padding-left: 1.1rem; }
.am-hilfe li { margin: .2rem 0; line-height: 1.4; }
.am-aktionen { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: 0 0 .8rem; }
.am-aktionen form { margin: 0; }
.am-import summary { cursor: pointer; }
.am-import form { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; margin: .4rem 0 0; }
.am-import small { flex-basis: 100%; }
.am-titel-filter { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; }
.am-titel { margin: 0 0 .7rem; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.am-titel > summary { cursor: pointer; font-weight: 600; padding: .6rem .9rem; display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: baseline; font-size: 1.02rem; }
.am-titel > summary .muted-inline { font-weight: 400; }
.am-titel > .table-wrap { padding: 0 .4rem .5rem; }
.am-tab { width: 100%; border-collapse: collapse; font-size: 1rem; }
.am-tab th { text-align: left; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-soft); padding: .4rem .6rem; border-bottom: 1px solid var(--border); font-weight: 600; }
.am-tab td { padding: .5rem .6rem; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.4; }
.am-tab .am-num, .am-lines .am-num, .am-tab th.am-num, .am-lines th.am-num { text-align: right; font-family: var(--font-num); white-space: nowrap; }
.am-tab th[title], .am-lines th[title] { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--border-strong); }
.am-tab td[title], .am-lines td[title] { cursor: help; }
.am-sub td { background: var(--surface-2); font-weight: 600; }
.am-pos a { color: inherit; text-decoration: none; }
.am-pos a:hover { text-decoration: underline; }
.am-pos.on td { background: var(--accent-soft); }
.am-stand { display: inline-flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.am-pill { display: inline-block; border: 1px solid var(--border); border-radius: 999px; padding: .05rem .6rem; font-size: .85rem; white-space: nowrap; color: var(--text-soft); }
.am-pos.am-ok .am-pill { color: var(--success); border-color: var(--success); background: var(--success-soft); }
.am-pos.am-warn .am-pill { color: var(--warning); border-color: var(--warning); background: var(--warning-soft); }
.am-zeilen > td { padding: .3rem .6rem .8rem 1.4rem; background: var(--surface-2); }
/* width:0 + min-width:100%: der Container übernimmt die Zellbreite, statt die äußere Tabelle aufzublähen —
   eine zu breite Zeilentabelle scrollt dann für sich, Positionszeile und Stand-Pille bleiben sichtbar. */
.am-zeilen-wrap { width: 0; min-width: 100%; overflow-x: auto; }
.am-lines { width: 100%; border-collapse: collapse; font-size: .96rem; margin: .2rem 0; background: var(--surface); }
.am-lines th { text-align: left; font-weight: 600; color: var(--text-soft); padding: .3rem .5rem; border-bottom: 1px solid var(--border); font-size: .8rem; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.am-lines td:first-child { min-width: 14rem; }
.am-lines td { padding: .35rem .5rem; border-bottom: 1px solid var(--border); vertical-align: middle; line-height: 1.4; }
.am-lines tr.am-vorschlag td { background: var(--warning-soft); }
.am-lines tr.am-abzug td { color: var(--text-soft); font-style: italic; }
.am-tag { display: inline-block; font-size: .78rem; border: 1px solid var(--border); border-radius: 4px; padding: 0 .35rem; color: var(--text-soft); vertical-align: middle; white-space: nowrap; cursor: help; }
.am-tag-warn { color: var(--warning); border-color: var(--warning); }
.am-akt { white-space: normal; min-width: 8rem; }
.am-akt form { display: inline; }
.am-btn { display: inline-block; padding: .15rem .5rem; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: .86rem; line-height: 1.4; color: var(--text); background: var(--surface); text-decoration: none; margin: 0 .3rem .2rem 0; cursor: pointer; white-space: nowrap; }
.am-btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.am-btn.am-btn-ok { color: var(--success); border-color: var(--success); }
.am-btn.danger { color: var(--danger); }
.am-btn.danger:hover { border-color: var(--danger); }
/* Tablet/schmal: Knöpfe untereinander statt Text verstecken — auf dem iPad gibt es kein Mouseover. */
@container inhalt (max-width: 1040px) { .am-akt .am-btn { display: block; width: max-content; margin: 0 0 .25rem; } .am-akt form { display: block; } }
.am-form { margin: .5rem 0 .3rem; padding: .7rem .9rem; border: 1px solid var(--accent); border-radius: var(--r); background: var(--surface); }
.am-form-titel { margin: 0 0 .35rem; font-size: 1rem; }
.am-form-hint { margin: 0 0 .6rem; font-size: .9rem; color: var(--text-soft); }
.am-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem .7rem; }
.am-form-grid label { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; color: var(--text-soft); cursor: help; }
.am-form-grid label input, .am-form-grid label select { font-size: 1rem; min-width: 0; width: 100%; box-sizing: border-box; }
.am-form-grid .am-wide { grid-column: 1 / -1; }
.am-form-grid .am-wide2 { grid-column: span 2; }
.am-form-grid .am-check { flex-direction: row; align-items: center; gap: .4rem; align-self: end; padding-bottom: .5rem; font-size: .92rem; color: var(--text); }
.am-form-akt { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; margin-top: .6rem; }
.am-hinweis { margin: 0 0 .5rem; padding: .4rem .7rem; background: var(--info-soft); color: var(--info); border-radius: var(--r); font-size: .92rem; }
.am-h3 { margin: 1.2rem 0 .4rem; }
.am-ohne { border: 1px solid var(--border); border-radius: var(--r); padding: .4rem .8rem .6rem; background: var(--surface); }
@media (max-width: 720px) { .am-tab th:nth-child(5), .am-tab td:nth-child(5) { display: none; } .am-tab { font-size: .95rem; } .am-lines { font-size: .92rem; } }
/* Katalog (Einstellungen → Kalkulation) */
.bt-table td, .bt-table th { white-space: nowrap; }
.bt-table td:first-child { white-space: normal; }
.bt-table th[title] { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
.bt-kat td { background: var(--surface-2); font-weight: 600; }
.bt-edit { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .3rem .5rem; margin-top: .4rem; align-items: end; }
.bt-edit label { display: flex; flex-direction: column; font-size: .76rem; color: var(--text-soft); white-space: nowrap; }
.bt-edit label input, .bt-edit label select { width: 100%; min-width: 0; box-sizing: border-box; }

/* ==========================================================================
   Kalkulation (Block F, Stufe F·3, Kanban #85): Reiter „Kalkulation“ am Projekt.
   Umbau nach Rückmeldung Oliver 08.09.2026 („Scrollbalken unten, Erklärung oben,
   Bearbeiten außer Sicht“): 8 Spalten ohne Querscrollen, Kostenaufschlüsselung als
   Unterzeile in der Positionsspalte, Kopfzeile bleibt unter der Topbar stehen (sticky),
   Spaltengruppen durch Trennlinien, Zebra, Bearbeiten-Knopf am Positionsnamen + Klick
   auf die Zeile, Bilanzblock oben. Dazu Stammwerte-Formular + Kranpreisliste unter
   Einstellungen → Kalkulation. Nutzt die Aufmaß-Klassen (am-*) für Pillen, Tooltips,
   Formulare und Hilfe-Kasten.
   ========================================================================== */
.kk-versionen { margin: 0 0 .8rem; }
.pj-chip.pj-chip-muted { opacity: .6; text-decoration: line-through; }
.kk-neu { max-width: 40rem; }
/* Stammwerte-Aufklapper + Formulare (auch Einstellungen) */
.kk-sw { margin: 0 0 .9rem; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); padding: .2rem .9rem .4rem; }
.kk-sw > summary { cursor: pointer; font-weight: 600; padding: .45rem 0; }
.kk-sw > summary .muted-inline { font-weight: 400; }
.sw-form { margin: .3rem 0 .2rem; }
.sw-gruppe { border: 1px solid var(--border); border-radius: var(--r); margin: 0 0 .6rem; padding: .4rem .8rem .6rem; }
.sw-gruppe legend { font-weight: 600; font-size: .9rem; color: var(--text-soft); padding: 0 .3rem; }
.sw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .45rem .8rem; align-items: end; }
.sw-grid label { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; color: var(--text-soft); cursor: help; }
.sw-grid label input[type="text"], .sw-grid label select { font-size: 1rem; width: 100%; min-width: 0; box-sizing: border-box; }
.sw-grid .sw-check { flex-direction: row; align-items: center; gap: .4rem; padding-bottom: .45rem; font-size: .92rem; color: var(--text); }
.sw-grid .am-wide2 { grid-column: span 2; }
.sw-grid .am-wide { grid-column: 1 / -1; }
.sw-grid .am-check { display: flex; flex-direction: row; align-items: center; gap: .4rem; font-size: .9rem; color: var(--text); padding-bottom: .45rem; }
/* Bilanz oben: Einsatz · Selbstkosten je Art · Angebot */
.kk-bilanz { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .6rem; margin: 0 0 .9rem; }
.kk-bilanz-box { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); padding: .55rem .85rem .6rem; }
.kk-bilanz-box h4 { margin: 0 0 .35rem; font-size: .95rem; display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; }
.kk-bilanz-box h4 span { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.kk-bilanz-box dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: .12rem .9rem; font-size: .9rem; }
.kk-bilanz-box dt { color: var(--text-soft); cursor: help; }
.kk-bilanz-box dd { margin: 0; text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kk-bilanz-box .kk-warn { color: var(--warning); }
/* Kalkulationsblatt */
/* Die Kalkulationstabelle hat je nach Aufmass sehr viele Spalten. Ohne eigene
   Scroll-Huelle schob sie die ganze Seite in die Breite, statt selbst zu
   scrollen (Befund Breiten-Durchlauf Kanban #95). */
.kk-wrap { margin: 0 0 1rem; overflow-x: auto; }
.kk-tab { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 1rem; }
.kk-tab thead th { position: sticky; top: var(--topbar-h); z-index: 3; background: var(--surface); text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-soft); font-weight: 600; padding: .5rem .6rem; border-bottom: 2px solid var(--border-strong); white-space: nowrap; }
.kk-tab thead th[title] { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--border-strong); }
.kk-tab .kk-th-sub { display: block; font-size: .72rem; text-transform: none; letter-spacing: 0; font-weight: 400; white-space: normal; }
.kk-tab td { padding: .5rem .6rem; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.4; }
.kk-tab .kk-g { border-left: 1px solid var(--border); }
.kk-tab td.am-num, .kk-tab th.am-num { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kk-tab td[title] { cursor: help; }
.kk-tab .kk-oz { width: 5.5rem; white-space: nowrap; }
.kk-tab .kk-posz { min-width: 18rem; }
.kk-tab tr.kk-pos { cursor: pointer; }
.kk-tab tr.kk-pos:nth-child(even) td { background: var(--surface-2); }
.kk-tab tr.kk-pos:hover td { background: var(--accent-soft); }
.kk-tab tr.kk-pos.on td { background: var(--accent-soft); }
.kk-tab tr.kk-pos.on td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.kk-tab tr.kk-pos > td { scroll-margin-top: calc(var(--topbar-h) + 3rem); }
.kk-name { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: center; font-weight: 500; }
.kk-name .kk-txt { flex: 1 1 auto; min-width: 10rem; }
.kk-edit-btn { margin: 0; flex: 0 0 auto; }
.kk-sub { margin-top: .25rem; display: flex; flex-wrap: wrap; gap: .1rem .8rem; font-size: .84rem; color: var(--text-soft); font-weight: 400; }
.kk-sub span[title] { cursor: help; }
.kk-sub .kk-typen { flex-basis: 100%; }
.kk-hinweis { margin-top: .3rem; font-size: .86rem; color: var(--warning); font-weight: 400; }
.kk-hinweis a { margin-left: .3rem; font-weight: 600; white-space: nowrap; }
.kk-tab tr.kk-titel td { background: var(--surface-2); font-weight: 600; border-top: 2px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); font-size: 1.02rem; }
.kk-tab tr.kk-titel2 td { border-top: 1px solid var(--border); font-size: .95rem; font-weight: 500; }
.kk-tab tr.kk-nachricht .kk-txt, .kk-tab tr.kk-nachricht td.am-num { color: var(--text-soft); font-style: italic; }
.kk-tab tr.kk-offen .kk-txt { color: var(--warning); }
.kk-tab tr.kk-pruefen .kk-txt::after { content: ' ⚠'; color: var(--warning); }
.kk-tab td.kk-ep { font-weight: 600; }
.kk-tab tr.kk-summe td { border-top: 2px solid var(--border-strong); font-weight: 600; background: var(--surface); }
.kk-tab tr.kk-summe .muted-inline { font-weight: 400; }
.kk-tab tr.kk-edit > td { background: var(--surface-2); padding: .3rem .6rem .8rem; cursor: default; }
.kk-reset { display: none; }
.kk-kopf form label { display: inline-flex; flex-direction: column; font-size: .82rem; color: var(--text-soft); }
/* Angebots-Vorschau */
.kk-angebot { margin-top: 1.2rem; }
.kk-vorschau .kk-text { white-space: pre-line; min-width: 24rem; }
.kk-text-vorschau { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: .5rem 1.5rem; margin: .5rem 0; }
.kk-text-vorschau h4 { margin: .4rem 0 .2rem; font-size: .9rem; }
.kk-text-vorschau .lv-lang { max-height: 14rem; margin: 0; font-size: .9rem; }
/* Kranpreisliste (Einstellungen) */
.kp-table td, .kp-table th { white-space: nowrap; }
.kp-table th.num, .kp-table td.num { text-align: right; font-family: var(--font-num); }
/* Schmal: Stundenspalten in die Unterzeile verbannen (stehen dort ohnehin), Tabelle bleibt ohne Querscrollen */
@container inhalt (max-width: 940px) { .kk-tab .kk-opt2 { display: none; } .kk-tab { font-size: .95rem; } .kk-tab .kk-posz { min-width: 14rem; } }
@media (max-width: 720px) { .kk-tab { font-size: .9rem; } .kk-tab td { padding: .4rem .4rem; } .kk-tab .kk-oz { width: 4rem; } .kk-edit-btn .lbl { display: none; } .kk-tab .kk-th-sub { display: none; } }

/* ==========================================================================
   Beleg-Export fürs Steuerbüro (Kanban #19) — Einstellungen → Protokoll
   ========================================================================== */
/* Hintergrund: --surface-2 ist die abgesetzte Flaeche des Themes und in
   BEIDEN Modi definiert. Ein erfundener Name (--surface-soft) faellt auf
   seinen hellen Fallback zurueck — im Dunkelmodus stand dann heller Text auf
   fast weissem Grund, die Sektion war praktisch unsichtbar (Befund 09.09.). */
.bx-export {
  margin: 1rem 0 1.4rem; padding: .9rem 1rem 1rem;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2);
}
.bx-export h3 { margin: 0 0 .4rem; font-size: 1rem; }
.bx-export-form { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; margin: .7rem 0 .4rem; }
.bx-export-form .bx-check { display: flex; gap: .35rem; align-items: center; padding-bottom: .4rem; cursor: pointer; }
.bx-export-form .bx-check input { margin: 0; }
.bx-export-hint { margin: .2rem 0 .8rem; }
.bx-export-tab { margin: .4rem 0 0; }
.bx-export-tab td, .bx-export-tab th { white-space: nowrap; }
/* Der Dateiname ist die einzige lange Spalte — sie darf umbrechen, sonst
   schiebt sie die Tabelle auf Laptops in den Scroll-Container. */
.bx-export-tab .bx-datei { white-space: normal; overflow-wrap: anywhere; min-width: 11rem; }
.bx-again { margin-left: .4rem; font-size: .85rem; }

/* --- Protokoll-Tab: Spalten und Storno-Formular (Rückmeldung Oliver 09.09.) ---
   Die Journaltabelle hat elf Spalten und passte nicht in die damalige
   Lesebreite von 1180px: auf einem 32-Zoll-Monitor stand ein Scrollbalken
   unter der Tabelle, während rechts der halbe Bildschirm leer blieb. Die
   Breite kommt seit demselben Tag aus `--content-max` (2200px für alle
   Seiten) — hier bleibt nur, was die Spalten selbst betrifft. */
.jr-tab td, .jr-tab th { vertical-align: top; }
.jr-tab .jr-nowrap { white-space: nowrap; }
/* Der Lieferant/Text-Spalte gehört der freie Platz — sie umbricht, statt die
   Tabelle zu verbreitern; die Aktionsspalte hält Raum fürs Storno-Formular.
   Die E-Mail in »von« darf mitten im Wort umbrechen, sonst diktiert sie auf
   schmalen Monitoren die Tabellenbreite. */
.jr-tab .jr-text { min-width: 16rem; }
.jr-tab .jr-aktion { min-width: 12rem; }
.jr-tab .jr-von { overflow-wrap: anywhere; }
.jr-storno summary { cursor: pointer; }
/* Eingabefeld auf voller Zellbreite, Knopf darunter: ein Feld neben dem Knopf
   quoll aus der Zelle heraus und stand halb außerhalb der Tabelle (Befund
   Oliver 09.09.) — die Tabellenzelle wächst nicht mit einem Flex-Kind mit. */
.jr-storno-form { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.jr-storno-form input[type="text"] {
  flex: 1 1 100%; width: 100%; min-width: 0; box-sizing: border-box;
  padding: .4rem .55rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); font: inherit;
}
/* Laptop-Breiten (1440er und 13-Zoll): engere Mindestbreiten, damit die
   Tabelle auch dort ohne Scrollbalken auskommt. */
@container inhalt (max-width: 1440px) {
  .jr-tab .jr-text { min-width: 11rem; }
  .jr-tab .jr-aktion { min-width: 9rem; }
}

/* ==========================================================================
   PDF-LV-Import (Block F, Stufe F·4, Kanban #86): Prüfansicht mit Quellseite.
   Der Reiter „LV“ zeigt beim PDF drei Spalten — Baum, Detail, gerenderte Seite —
   und je Position ein Vertrauens-Kennzeichen (sicher / prüfen / KI).
   ========================================================================== */
.lv-ok { color: var(--success); background: var(--success-soft); border: 1px solid var(--success); border-radius: var(--r); padding: .45rem .7rem; margin: 0 0 .8rem; font-size: .92rem; }
.lv-pill-ki { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.lv-abgleich-wahl { display: inline-flex; flex-wrap: wrap; gap: .35rem; align-items: center; font-size: .85rem; color: var(--text-soft); }
/* Spaltengewichte (Kanban #110, Rueckmeldung Oliver 11.09.2026: »Boxen nicht dynamisch,
   in der Breite zu klein«): der Baum bekam bei 1600px nur 267px und scrollte waagerecht.
   Mindestbreiten 22/20/20rem, die Kontextspalte rueckt in dieser Ansicht unter den Inhalt
   (siehe .pj-arbeit:has(.lv-md-pdf) im Layout-Block). */
.lv-md-pdf { grid-template-columns: minmax(22rem, 1.2fr) minmax(20rem, 1.3fr) minmax(20rem, 1.5fr); }
@container inhalt (max-width: 1340px) { .lv-md-pdf { grid-template-columns: minmax(14rem, 1fr) minmax(16rem, 1.4fr); } .lv-md-pdf .lv-seite { grid-column: 1 / -1; } }
@media (max-width: 900px) { .lv-md-pdf { grid-template-columns: 1fr; } }
.lv-tree a.lv-conf-pruefen .lv-menge { color: var(--warning); }
.lv-tree a.lv-conf-ki .lv-menge { color: var(--accent); }
.lv-ki-mark { font-size: .7rem; font-weight: 700; letter-spacing: .04em; color: var(--accent); }
.lv-quelle { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 .6rem; }
.lv-mengenform { display: flex; flex-wrap: wrap; gap: .4rem .7rem; align-items: flex-end; margin: .2rem 0 .8rem; padding: .6rem; border: 1px dashed var(--border-strong); border-radius: var(--r); background: var(--surface-2); }
.lv-mengenform label { display: inline-flex; flex-direction: column; font-size: .8rem; color: var(--text-soft); gap: .15rem; }
.lv-mengenform .lv-kurz { flex: 1 1 14rem; }
.lv-mengenform .lv-kurz input { width: 100%; }
.lv-mengenform small { flex-basis: 100%; }
.lv-seite { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); padding: .5rem; position: sticky; top: 4.2rem; }
.lv-seite-kopf { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .85rem; margin-bottom: .4rem; }
.lv-seite-kopf .btn-link { padding: 0 .2rem; }
.lv-seite-canvas { max-height: 74vh; overflow: auto; background: var(--surface-2); border-radius: 4px; }
.lv-seite-canvas canvas { display: block; margin: 0 auto; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.lv-ab-tab { font-size: .88rem; }
.lv-ab-tab td.num, .lv-ab-tab th.num { text-align: right; font-family: var(--font-num); white-space: nowrap; }
.lv-abgleich { margin: .4rem 0 1rem; }
.lv-abgleich h4 { margin: .2rem 0 .3rem; }

/* ==========================================================================
   Projekt-Reiterleiste: volle Monitorbreite statt Scrollbalken (09.09.2026,
   Rückmeldung Oliver zum Screenshot der Kalkulations-Ansicht).
   Befund: Der Container war nur auf der Übersicht breit (`:has(.proj-grid)`),
   auf allen anderen Reitern galt die Lesebreite von ~1.100 px. Seit Block F
   (LV · Aufmaß · Kalkulation) braucht die Reiterzeile aber ~1.150 px — sie
   bekam deshalb einen Scrollbalken, während rechts der halbe Monitor leer
   blieb. Jetzt: Seitenbreite hängt an der Seite (nicht am geöffneten Reiter),
   gedeckelt bei 2.200 px wie /belege und /bank (Kanban #9); die Zeile bricht
   um, statt zu scrollen — den Wisch-Streifen gibt es nur noch am Handy.
   ========================================================================== */
/* .container:has(.proj-tabs) — jetzt aus --content-max (2200px) */
.proj-tabs { flex-wrap: wrap; overflow-x: visible; gap: .3rem; row-gap: 0; }
.proj-tab { padding: .5rem .8rem; }
/* Der aktive Reiter sitzt auf der Trennlinie — mit Umbruch übernimmt das ein
   negativer Rand (top: 2px würde ihn in oberen Zeilen schweben lassen). */
.proj-tab.on { top: 0; margin-bottom: -2px; border-bottom: 2px solid var(--surface, #fff); }
@media (max-width: 700px) {
  .proj-tabs { flex-wrap: nowrap; overflow-x: auto; }
  .proj-tab.on { margin-bottom: 0; border-bottom: none; top: 2px; }
}

/* Lesbarkeitsbremse zur neuen Seitenbreite (09.09.2026): Tabellen und Raster duerfen
   die 2200px ausnutzen, durchlaufender Text nicht — sonst wandert das Auge ueber die
   halbe Monitorbreite zurueck zum Zeilenanfang. Gilt nur fuer Absaetze und Listen, die
   direkt in einem Abschnitt stehen. */
.card-section > p, .card-section > ul, .card-section > ol { max-width: 110ch; }
/* Fremder Block aus feature/kanban-interaktiv (Merge 10.09.2026): steht in
   der Schicht "seiten" wie alle seitenspezifischen Regeln. */
/* === Kanban interaktiv: Drag&Drop, Neuanlage, Zeitstempel (Kanban #52) — 2026-08-30 === */
.kanban-card[draggable] { cursor: grab; }
.kanban-card.kanban-dragging { opacity: .45; cursor: grabbing; }
.kanban-col.kanban-drop-ziel { outline: 2px dashed var(--accent, #c8501c); outline-offset: 2px; background: var(--accent-soft, rgba(200,80,28,.06)); }
.kanban-stempel { margin-top: .3rem; font-size: .7rem; color: var(--text-soft); }
.kanban-userkarte { font-size: .68rem; font-weight: 700; color: #6d4cc4; background: rgba(109,76,196,.12); padding: .05rem .4rem; border-radius: 3px; }
.kanban-neu summary {
  cursor: pointer; list-style: none; user-select: none;
  font-weight: 700; font-size: 1rem; line-height: 1;
  padding: 0 .35rem; border-radius: 4px; color: var(--text-soft);
}
.kanban-neu summary::-webkit-details-marker { display: none; }
.kanban-neu[open] summary, .kanban-neu summary:hover { color: var(--accent, #c8501c); background: var(--accent-soft, rgba(200,80,28,.08)); }
.kanban-neu { position: relative; }
.kanban-neu-form {
  position: absolute; right: 0; top: 1.6rem; z-index: 30; width: 260px;
  display: grid; gap: .4rem; padding: .6rem; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface); box-shadow: var(--shadow);
}
.kanban-neu-form input[type="text"], .kanban-neu-form textarea, .kanban-neu-form select {
  width: 100%; font-size: .82rem; padding: .3rem .4rem;
  border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--text);
}
.kanban-neu-zeile { display: flex; gap: .35rem; }
.kanban-neu-zeile select { min-width: 0; flex: 1 1 0; }
.kanban-move-form { display: flex; gap: .4rem; margin-top: .45rem; }
.kanban-move-form select {
  flex: 1 1 0; min-width: 0; font-size: .82rem; padding: .3rem .4rem;
  border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--text);
}
@media (max-width: 620px) {
  .kanban-neu-form { position: static; width: auto; margin-top: .4rem; }
}


} /* /@layer seiten */
/* ==========================================================================
   DESIGN-GERÜST (Kanban #95, 09.09.2026) — Seitenbreite, Dichte, Überlauf
   --------------------------------------------------------------------------
   Anlass (Oliver): »In mehreren Aufgaben das Problem mit der Breite gehabt —
   zu schmal, horizontale und vertikale Scrollbalken, ausfüllbare Felder
   abgeschnitten, Texte, die Boxen in die Tiefe erweitern.«

   Befund vor diesem Block: 212 harte px-Breiten, 75 Media-Queries mit rund 30
   verschiedenen Breakpoints, 50-mal von Hand nachgetragenes min-width:0 — also
   ein Farb-Tokensystem ohne Layout-System. Jede Rückmeldung erzeugte einen
   weiteren Einzelfall statt einer Regel.

   Was hier steht, ist die Regel. Die Blöcke hängen per @layer in den oben
   deklarierten Schichten — sie stehen am Dateiende, wirken aber an ihrer
   Schichtposition. Die Reihenfolge lautet:
     legacy · tokens · base · layout · komponenten · seiten · utilities
   ========================================================================== */

@layer tokens {

  /* --- Seitenbreite (Darstellungsmenü → »Seitenbreite«) -------------------
     data-width steht am <html> und kommt aus localStorage (mbc-width), gesetzt
     vom FOUC-Schnipsel in partials/theme-boot.ejs. Ohne Attribut gilt der
     Grundwert 2200px aus dem Token-Block oben — die bewusste Vorbelegung
     (Entscheidung Oliver 09.09.), damit ohne Zutun alles bleibt wie gehabt.

     »monitor« ist kein fester Wert, sondern 100 %: der Inhalt füllt die
     Monitorbreite, es bleibt nur das Seitenpolster der .container-Regel.

     Vier Seiten leben von Breite und heben den Deckel selbst auf (Projekt-
     übersicht, Lohnliste, Arbeitszeitbögen, Developer) — dort ändert die
     Einstellung nichts, das ist Absicht und steht an den Regeln selbst. */
  :root[data-width="monitor"]  { --content-max: 100%;   }
  :root[data-width="breit"]    { --content-max: 2200px; }
  :root[data-width="standard"] { --content-max: 1600px; }
  :root[data-width="schmal"]   { --content-max: 1280px; }

  /* --- Dichte (Darstellungsmenü → »Dichte«) -------------------------------
     Über die Wurzel-Schriftgröße, NICHT über einzelne Paddings: dadurch
     folgen alle rem-Maße im Blatt auf einen Schlag — auch die rund 200
     handgeschriebenen .45rem/.7rem-Abstände, die kein Token benutzen.
     px-Maße (Rahmen, Icons, Breakpoints) bleiben stehen; genau das ist
     gewollt, damit Linien fein und die Umbruchpunkte stabil bleiben.

     Das ist der eigentliche Hebel auf 13-Zoll-Geräten: gleiche Spalten,
     weniger Luft — statt Spalten zu opfern oder quer zu scrollen. */
  :root[data-density="kompakt"] { font-size: 87.5%;  }  /* 14px */
  :root[data-density="normal"]  { font-size: 100%;   }  /* 16px */
  :root[data-density="weit"]    { font-size: 112.5%; }  /* 18px */

  /* Shell-Maße in rem statt px, damit die Dichte auch Leiste und Sidebar
     erfasst (identische Werte bei 16px Grundschrift: 56px / 248px). */
  :root { --topbar-h: 3.5rem; --sidebar-w: 15.5rem; }
}

@layer base {

  /* --- Überlauf-Bremse 1: nichts wird breiter als sein Kasten ------------- */
  img, svg, video, canvas, iframe, embed, object { max-width: 100%; }
  input, select, textarea, button { max-width: 100%; }

  /* --- Überlauf-Bremse 2: lange Zeichenketten brechen ---------------------
     Mail-Adressen, Dateinamen, IBANs und Belegnummern haben keine Leerzeichen.
     Ohne Umbruch diktieren sie die Mindestbreite ihrer Zelle — die Tabelle
     wird breiter als die Seite (Befund Protokoll-Tab 09.09.) oder der Text
     schiebt die Box in die Tiefe. `anywhere` wirkt anders als `break-word`:
     es zählt auch bei der Mindestbreiten-Rechnung mit, nur deshalb darf die
     Tabelle überhaupt schrumpfen. Zahlenspalten mit white-space:nowrap sind
     davon unberührt — nowrap gewinnt. */
  body { overflow-wrap: break-word; }
  td, th { overflow-wrap: anywhere; }

  /* --- Überlauf-Bremse 3: die Scrollbalken-Kaskade brechen ----------------
     Ohne stabile Rinne nimmt die auftauchende vertikale Leiste 15px Breite
     weg, der Inhalt passt nicht mehr — und es erscheint zusätzlich eine
     horizontale. Genau das Doppel-Scrollbalken-Bild aus der Rückmeldung. */
  html { scrollbar-gutter: stable; }
}

@layer layout {

  /* --- Seitenbreite als eine Regel ---------------------------------------
     width:100% + max-width statt nur max-width: in Rastern (die Shell ist
     eines) rechnet der Browser sonst mit der Inhaltsbreite. */
  .container {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
  }

  /* --- Der globale Ersatz für 50-mal min-width:0 --------------------------
     Raster- und Flex-Kinder haben min-width:auto und können deshalb nicht
     schmaler werden als ihr Inhalt — eine breite Tabelle oder ein langer
     Dateiname macht so die ganze Seite breiter als das Fenster. :where()
     hat Spezifität 0: jede vorhandene Regel im Blatt gewinnt weiterhin,
     diese hier greift nur, wo bisher gar nichts stand. */
  .container :where(*) { min-width: 0; }

  /* --- Bezug für Container-Queries ---------------------------------------
     Nur auf Seiten, die eine Container-Query wirklich brauchen: container-type
     bringt `contain: layout style` mit — der Inhaltsbereich wird damit zum
     Bezug für position:fixed-Kinder und zu einem eigenen Stapelkontext. Auf
     Seiten mit schwebenden Elementen (Bank-Drawer .bk-side) wäre das ein
     Rückschritt, deshalb die Auswahl per :has() statt pauschal.

     Warum überhaupt: die Fensterbreite ist die falsche Frage geworden. Wer
     »Schmal« einstellt, hat auf einem 32-Zöller einen 1280px-Inhalt — eine
     @media-Regel sieht trotzdem 2560px und lässt drei Spalten stehen. */
  .container:has(.dash-grid, .st-raster, .bl-layout, .jr-tab, .kk-tab, .azb-grid,
                 .payroll-table, .pj-table, .tlx, .proj-grid, .am-akt,
                 .lv-md-pdf, .kanban-board) {
    container: inhalt / inline-size;
  }
}

@layer utilities {

  /* Helfer für neue Ansichten — gewinnen gegen alles, deshalb sparsam. */
  .u-fluid     { max-width: none !important; }   /* Seite lebt von Breite */
  .u-lesebreite{ max-width: 80ch; }              /* Fließtext bremsen */
  .u-nowrap    { white-space: nowrap; }
  .u-bruch     { overflow-wrap: anywhere; }
  .u-scrollx   { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@layer komponenten {

  /* --- Darstellungsmenü: Breite + Dichte (Kanban #95) ---------------------
     Vier Breiten-Stufen passen nicht mehr in die 230px-Breite von vorher;
     statt eines Inline-Stils am Element steht das Maß jetzt hier. */
  .menu-darstellung { min-width: 20rem; }
  .seg-wrap { flex-wrap: wrap; }
  .seg-wrap button { flex: 1 1 6rem; }
  .menu-hint {
    margin: 0 var(--s2) var(--s2);
    font-size: .72rem; line-height: 1.35; color: var(--text-faint);
  }
}

/* ==========================================================================
   NAVIGATION 2.0 — Bereiche statt Module (Kanban #97, Stufe A, 10.09.2026)
   --------------------------------------------------------------------------
   Auftrag Oliver: »Die Kernaufgaben sind viel zu tief versteckt.« Die Menüs
   hießen nach Datenarten (Belege, Rechnungen, Finanzen) — also nach dem, was
   das System speichert, nicht nach dem, was der Betrieb tut. Jetzt:
   Heute · Projekte · Belege · Finanzen · Steuerbüro.

   Hier steht nur, was für die NEUEN Seiten nötig ist. Die Leisten selbst
   (.tnav, .tabbar, .app-sidebar) haben sich im Markup geändert, nicht im CSS.
   ========================================================================== */

@layer seiten {

  /* --- Finanzen: EINE Reiterleiste über /finanzen, /bank und /kasse --------
     (partials/finanzen-reiter.ejs). Rückmeldung Oliver 10.09.2026: »Warum
     nennen wir Zahlen nicht Finanzen und integrieren die logisch?« Gleiche
     Sprache wie die übrigen Reiterleisten (Unterstrich), aber eine Stufe
     kräftiger — sie IST die Navigation des Bereichs. */
  .fin-tabs {
    display: flex; flex-wrap: wrap; gap: 0 1.5rem;
    margin: 0 0 1.2rem; border-bottom: 1px solid var(--border);
  }
  .fin-tab {
    padding: .6rem 0; margin-bottom: -1px; white-space: nowrap;
    color: var(--text-soft); font-weight: 600; text-decoration: none;
    border-bottom: 2px solid transparent;
  }
  .fin-tab:hover { color: var(--text); text-decoration: none; }
  .fin-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
  /* Kasse: der Bereichskopf heißt Finanzen, der Monat steht in einer zweiten
     Kopfzeile unter der Reiterleiste. */
  .ks-kopf { margin-top: .2rem; }
  .ks-title h2 { margin: 0; font-size: 1.15rem; }
  /* Kennzahlen füllen die eingestellte Seitenbreite von selbst (auto-fit) —
     kein eigener Umbruchpunkt nötig. */
  .zh-kpis {
    display: grid; gap: var(--s3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    margin: .8rem 0 1rem;
  }
  .db-neg { color: var(--danger); font-weight: 600; }
  .db-pos { color: var(--success); font-weight: 600; }

  /* --- /steuerbuero: die Wege, die woanders liegen ----------------------- */
  .stb-kacheln {
    display: grid; gap: var(--s3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    margin-top: .7rem;
  }
  .stb-kachel {
    display: flex; flex-direction: column; gap: .2rem;
    padding: .85rem 1rem; min-height: 44px;
    border: 1px solid var(--border); border-radius: var(--r);
    background: var(--surface); color: var(--text); text-decoration: none;
  }
  .stb-kachel:hover { border-color: var(--accent); text-decoration: none; }
  .stb-kachel strong { font-size: .98rem; }
  .stb-kachel span { font-size: .84rem; color: var(--text-soft); }

  /* --- Einstellungen: zwei Gruppen statt elf gleichrangiger Reiter -------- */
  .settings-tabs { align-items: flex-end; gap: .25rem 1.6rem; }
  .settings-tabgroup { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .25rem; }
  .settings-tablabel {
    align-self: center;
    font-size: .68rem; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-faint);
    padding: 0 .5rem .6rem 0;
  }
  /* Auf dem Handy stehen die Gruppen untereinander — sonst sieht man nicht,
     wo die eine aufhört und die andere anfängt. */
  @media (max-width: 700px) {
    .settings-tabs { flex-direction: column; align-items: stretch; gap: .3rem; }
    .settings-tabgroup { border-left: 2px solid var(--border); padding-left: .6rem; }
    .settings-tablabel { padding: .3rem 0 .1rem; }
  }
}

@layer seiten {

  /* --- Projekt-Reiter nach Phasen gruppiert (Kanban #97, 10.09.2026) --------
     Rückmeldung Oliver: »Die Untermenüs LV / Aufmaß / Kalkulation … sollten
     unter Angebote gruppiert werden.« Vorher standen neun gleichrangige Reiter
     nebeneinander — die Zahl war nicht das Problem, die fehlende Bündelung war
     es (Cowan: Chunks, nicht Stückzahl). Vorstufe der Vorgangsleiste. */
  .proj-tabs { align-items: flex-end; gap: .3rem 1.5rem; }
  .proj-tabgroup { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .3rem; }
  .proj-tablabel {
    align-self: center;
    font-size: .66rem; font-weight: 600; letter-spacing: .09em;
    text-transform: uppercase; color: var(--text-faint);
    padding: 0 .35rem .65rem 0; white-space: nowrap;
  }
  /* Schmal: Gruppen untereinander, sonst verschwimmt die Zuordnung der
     Überschrift zu ihren Reitern. */
  @container inhalt (max-width: 1040px) {
    .proj-tabs { flex-direction: column; align-items: stretch; gap: .35rem; }
    .proj-tabgroup { border-left: 2px solid var(--border); padding-left: .55rem; }
    .proj-tablabel { padding: .25rem 0 .1rem; }
  }
  @media (max-width: 700px) {
    .proj-tabs { flex-direction: column; align-items: stretch; }
    .proj-tabgroup { flex-wrap: nowrap; overflow-x: auto; border-left: 2px solid var(--border); padding-left: .55rem; }
  }

  /* --- Ansichts-Umschalter: dritte Ansicht »Rechnungen & Angebote« --------- */
  .pj-switch { flex-wrap: wrap; }
}

@layer seiten {

  /* --- Projekt-Kopf: Reiterleiste bleibt beim Scrollen stehen ---------------
     Rückmeldung Oliver 10.09.2026: »Man ist nur am Scrollen.« Das LV, das
     Aufmaß und die Kalkulation sind lange Seiten — wer unten arbeitet, kam
     zum Reiterwechsel nur mit dem Weg nach ganz oben zurück. Die Leiste klebt
     jetzt unter der Topbar; die Kennzahlen darüber scrollen weg (sie stehen
     ohnehin nur noch auf »Übersicht«). */
  .proj-tabs {
    position: sticky; top: var(--topbar-h); z-index: 20;
    background: var(--bg);
    padding-top: .35rem;
  }
  @media print { .proj-tabs { position: static; } }

  /* --- Angebotsvorlage: Auswahl mit sichtbaren Knöpfen --------------------
     Vorher .pj-chip — das ist die Optik der Listenfilter (»Laufend 5«), und
     genau so wurden die beiden Vorlagen gelesen: als Zustand, nicht als
     Aktion. Jetzt Knöpfe mit vorangestellter Beschriftung. */
  .kk-vorlage-label {
    align-self: center;
    font-size: .72rem; font-weight: 600; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-soft);
    margin-right: .2rem;
  }
  .kk-vorlage-hint { flex-basis: 100%; margin-top: .3rem; }
  .am-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
  .am-aktionen .btn { min-height: 44px; }
}

/* ==========================================================================
   PROJEKT: VORGANGSLEISTE, ARBEITSFLÄCHE, KONTEXT (Kanban #97, Stufe C)
   --------------------------------------------------------------------------
   Rückmeldung Oliver 10.09.2026: »Die Projektdaten werden immer angezeigt,
   deshalb wandert die LV immer weiter nach unten, man ist nur am Scrollen.«
   Gemessen: der Inhalt begann bei 569 px. Drei Antworten:
     1. Die Leiste sagt, WO das Projekt steht, und zeigt nur die Werkzeuge
        dieser Phase — statt neun Reitern gleichzeitig.
     2. Kunde, Team und Dateien laufen als schmale Spalte mit, statt sich als
        Reiter zu verstecken.
     3. Die Arbeitsfläche bekommt ihren eigenen Scrollbalken: die Liste
        scrollt, nicht die Seite.
   ========================================================================== */

@layer seiten {

  /* --- Vorgangsleiste ----------------------------------------------------- */
  .pv {
    position: sticky; top: var(--topbar-h); z-index: 20;
    background: var(--bg);
    padding: .4rem 0 .1rem;
    border-bottom: 2px solid var(--border);
    margin-bottom: 1rem;
  }
  @media print { .pv { position: static; } }

  .pv-phasen { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem; }
  .pv-trenner { width: 1px; height: 1.4rem; background: var(--border-strong); margin: 0 .5rem; }

  .pv-uebersicht,
  .pv-phase {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .45rem .7rem; min-height: 40px;
    border-radius: var(--r-sm); text-decoration: none;
    font-size: .9rem; color: var(--text-soft);
  }
  .pv-uebersicht:hover, .pv-phase:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
  .pv-uebersicht.on { background: var(--surface-2); color: var(--text); font-weight: 600; }

  /* Zustand der Phase: erledigt · aktuell · kommt noch. Der Haken trägt die
     Information, nicht die Farbe allein. */
  .pv-erledigt { color: var(--success); }
  .pv-haken { font-weight: 700; }
  .pv-aktuell { color: var(--accent); font-weight: 600; }
  .pv-kommt { color: var(--text-faint); }
  /* Die GEZEIGTE Phase (nicht zwingend die aktuelle — man darf zurückblättern) */
  .pv-phase.gezeigt {
    background: var(--accent-soft); color: var(--accent); font-weight: 700;
    box-shadow: inset 0 -2px 0 var(--accent);
  }

  .pv-schritte {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
    padding: .45rem 0 .5rem;
  }
  .pv-schritte-label {
    font-size: .66rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-faint);
    margin-right: .35rem; white-space: nowrap;
  }
  .pv-schritt {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .4rem .75rem; min-height: 40px;
    border: 1px solid var(--border); border-radius: var(--r-pill);
    background: var(--surface); color: var(--text); text-decoration: none;
    font-size: .9rem;
  }
  .pv-schritt:hover { border-color: var(--accent); text-decoration: none; }
  .pv-schritt.on { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); font-weight: 600; }
  /* Die Nummer sagt: das ist ein Weg, keine Sammlung gleichrangiger Reiter. */
  .pv-nr {
    display: inline-grid; place-items: center;
    width: 1.15rem; height: 1.15rem; border-radius: 999px;
    background: var(--surface-2); color: var(--text-soft);
    font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums;
  }
  .pv-schritt.on .pv-nr { background: rgba(255,255,255,.25); color: var(--accent-contrast); }
  .pv-zurueck { font-size: .82rem; color: var(--accent); margin-left: .4rem; }

  /* Nachschlag (Kanban #108): Werkzeuge anderer Phasen, die schon Inhalt haben —
     zweitrangig (gestrichelt, ohne Nummer), aber erreichbar, ohne die Phase zu
     wechseln. Der Trenner sagt: hier endet der Weg, hier beginnt das Nachschlagen. */
  .pv-trenner-ns { margin: 0 .35rem 0 .6rem; }
  .pv-ns-label { color: var(--text-faint); }
  .pv-schritt.pv-ns {
    border-style: dashed; background: transparent; color: var(--text-soft);
    font-size: .85rem; min-height: 34px; padding: .3rem .65rem;
  }
  .pv-schritt.pv-ns:hover { color: var(--text); }

  /* --- Arbeitsfläche + Kontextspalte -------------------------------------- */
  .pj-arbeit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 17rem;
    gap: var(--s5);
    align-items: start;
  }
  .pj-arbeit-inhalt { min-width: 0; }
  /* LV-Pruefansicht mit Quellseite (Kanban #110): drei Arbeitsspalten brauchen die ganze
     Breite — Kunde/Team/Dateien/Phase stehen hier unter dem Inhalt, wie sonst erst unter
     1080px. Browser ohne :has() behalten die Spalte rechts (nur enger). */
  .pj-arbeit:has(.lv-md-pdf) { grid-template-columns: minmax(0, 1fr); }
  .pj-arbeit:has(.lv-md-pdf) .pk { position: static; flex-direction: row; flex-wrap: wrap; gap: var(--s3); }
  .pj-arbeit:has(.lv-md-pdf) .pk-block { flex: 1 1 13rem; }

  .pk { display: flex; flex-direction: column; gap: .1rem; position: sticky; top: calc(var(--topbar-h) + 7.5rem); }
  .pk-block {
    display: flex; flex-direction: column; gap: .1rem;
    padding: .7rem .8rem;
    border-left: 2px solid var(--border);
  }
  .pk-label { font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); }
  .pk-wert { font-size: .95rem; line-height: 1.3; overflow-wrap: anywhere; }
  .pk-zeile { font-size: .8rem; color: var(--text-soft); overflow-wrap: anywhere; }
  .pk-link { font-size: .82rem; margin-top: .2rem; }
  .pk-phase { border-left-color: var(--accent); }
  .pk-phaseform select { width: 100%; margin: .2rem 0; padding: .35rem .4rem; font-size: .85rem;
    border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text); }

  /* Schmaler Inhaltsbereich: die Spalte klappt unter die Arbeitsfläche —
     sie ist Kontext, nicht Inhalt, und darf ihn nie verdrängen. */
  @container inhalt (max-width: 1080px) {
    .pj-arbeit { grid-template-columns: minmax(0, 1fr); }
    .pk { position: static; flex-direction: row; flex-wrap: wrap; gap: var(--s3); }
    .pk-block { flex: 1 1 13rem; }
  }
  @media (max-width: 760px) {
    .pj-arbeit { grid-template-columns: minmax(0, 1fr); }
    .pk { position: static; flex-direction: column; }
    .pv-schritte { flex-wrap: nowrap; overflow-x: auto; }
    .pv-phasen { flex-wrap: nowrap; overflow-x: auto; }
  }

  /* --- Werkzeuge scrollen in sich, nicht die Seite -------------------------
     LV-Baum, Aufmaß- und Kalkulationsliste sind Arbeitsflächen. Vorher stand
     hier 72vh — zusammen mit dem Seitenkopf ergab das mehr als das Fenster,
     also scrollte doch wieder die ganze Seite. Jetzt: was nach Kopf und
     Vorgangsleiste übrig ist. */
  .lv-tree, .lv-seite-canvas { max-height: calc(100dvh - 17rem); }
}

@layer seiten {

  /* --- Hilfe-Kästen: klappbar und ausblendbar (Kanban #97, 10.09.2026) -----
     Rückmeldung Oliver: »Die Infofelder klappbar und ausblendbar.« Beim ersten
     Mal erklären sie das Modul, ab dem zehnten stehen sie im Weg — auf einer
     Arbeitsfläche kosten sie mehrere hundert Pixel. Der Zustand liegt pro Gerät
     in localStorage (public/app.js); ausgeblendet bleibt eine schmale Zeile
     zum Zurückholen stehen. */
  .am-hilfe > summary { display: flex; align-items: center; gap: .5rem; }
  .hilfe-aus {
    margin-left: auto;
    border: 1px solid currentColor; background: transparent; color: inherit;
    border-radius: var(--r-pill); padding: .15rem .6rem;
    font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer;
    opacity: .75;
  }
  .hilfe-aus:hover { opacity: 1; background: var(--surface); }
  .hilfe-zurueck {
    display: inline-flex; align-items: center;
    margin: 0 0 1rem; padding: .3rem .7rem;
    border: 1px dashed var(--border-strong); border-radius: var(--r-pill);
    background: transparent; color: var(--text-soft);
    font: inherit; font-size: .8rem; cursor: pointer;
  }
  .hilfe-zurueck:hover { color: var(--info); border-color: var(--info); }
}

@layer seiten {

  /* --- /finanzen: Arbeitsliste statt Durchgangsseite (Kanban #97, 10.09.2026)
     Rückmeldung Oliver: »Eine komplette Seite, auf der vier Zahlen stehen …
     wo ist der Sinn dieser Seite?« Jetzt steht die Liste selbst hier, und
     buchen geht in der Zeile. */
  .zh-filter { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
  .zh-liste td, .zh-liste th { vertical-align: middle; }
  .zh-nowrap { white-space: nowrap; }
  /* Überfällige Zeilen tragen die Information doppelt: Chip UND Kante —
     Farbe allein reicht nicht (Rot-Grün-Sehschwäche). */
  .zh-rot td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
  .zh-zahlform { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
  .zh-zahlform input, .zh-zahlform select {
    padding: .3rem .4rem; font: inherit; font-size: .85rem; min-width: 0;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text);
  }
  .zh-zahlform input[type="text"] { width: 6.5rem; text-align: right; font-variant-numeric: tabular-nums; }
  .zh-zahlform input[type="date"] { width: 9rem; }
  .zh-zahlform .btn { padding: .3rem .7rem; font-size: .85rem; min-height: 36px; }
  /* Schmal: das Buchen-Formular bricht unter die Zeile statt sie zu sprengen. */
  @container inhalt (max-width: 1200px) {
    .zh-zahlform { flex-direction: column; align-items: stretch; }
    .zh-zahlform input, .zh-zahlform select, .zh-zahlform .btn { width: 100%; }
  }
}

@layer seiten {

  /* --- »Überweisen« je Verbindlichkeit (Auftrag Oliver 10.09.2026) ---------
     Der Platz steht schon; scharf wird der Knopf mit der finAPI-Anbindung
     (Kanban #33). Ausgegraut heißt: sichtbar, aber erkennbar nicht bedienbar —
     ein Knopf, der aussieht wie einer und nichts tut, wäre schlimmer als
     keiner. Der Grund steht im title. */
  .zh-aktionen { display: flex; align-items: center; gap: .5rem; justify-content: flex-end; }
  .zh-ueberweisen { padding: .25rem .7rem; font-size: .85rem; min-height: 36px; }
  .zh-ueberweisen[disabled] {
    opacity: .45; cursor: not-allowed;
    border-style: dashed;
  }
}

@layer seiten {

  /* --- Offene Posten als Baum je Kunde/Lieferant (Kanban #114, 11.09.2026)
     Rückmeldung Oliver: »alle offenen Posten sortiert nach Kunden (diesen auch
     anzeigen) als aufklappbaren Baum« + Gesamtbetrag neben dem offenen.
     EINE Tabelle (Spalten bleiben über alle Gruppen bündig), Gruppenzeilen mit
     Pfeil; ohne JavaScript ist alles aufgeklappt und alle Felder sichtbar. */
  .op-baum tr[hidden] { display: none; }
  .op-gruppe td { background: var(--surface-2); border-top: 2px solid var(--border-strong); }
  .op-gruppe .op-kunde { font-weight: 600; margin-right: .5rem; color: var(--text); }
  .op-gruppe .pill { margin-left: .4rem; }
  .op-gruppe .muted-inline { margin-right: .3rem; }
  .op-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.7rem; height: 1.7rem; margin-right: .4rem; padding: 0;
    border: 1px solid var(--border-strong); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text-soft); font: inherit; cursor: pointer;
    vertical-align: middle;
  }
  .op-toggle:hover { color: var(--text); border-color: var(--text-soft); }
  .op-toggle .op-pfeil { display: inline-block; transition: transform .15s ease; }
  .op-toggle[aria-expanded="false"] .op-pfeil { transform: rotate(-90deg); }
  .op-einzug { padding-left: 2.4rem; }
  .zh-filter .op-alle { margin-left: auto; }
  /* Bürgschaftsfelder nur bei Zahlart Sicherheitseinbehalt (JS blendet ein);
     [hidden] muss gegen das display:flex gewinnen. */
  .op-bg { display: inline-flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
  .op-bg[hidden], .op-bg-neu[hidden], .pay-row[hidden] { display: none; }
  .zh-zahlform .op-bg select { max-width: 17rem; }
  .zh-zahlform .op-bg-neu { width: 9.5rem; text-align: left; }
  .op-inline { display: inline; }
  .op-inline .btn-link { padding: 0; font-size: inherit; }
  /* »Zuletzt gebucht«: Storno je Zeile rechts, nie umbrechend. */
  .op-gebucht td:last-child { text-align: right; white-space: nowrap; }
  @container inhalt (max-width: 1200px) {
    .zh-zahlform .op-bg { flex-direction: column; align-items: stretch; width: 100%; }
    .zh-zahlform .op-bg select, .zh-zahlform .op-bg-neu { width: 100%; max-width: none; }
  }
}

/* ==========================================================================
   RÜCKWEG (Kanban #106, 10.09.2026)
   --------------------------------------------------------------------------
   Rückmeldung Oliver: »Nach einem Link kommt man so gut wie nie auf die
   ursprüngliche Seite zurück.« Jede Detailseite trägt oben links EINE Zeile
   »← Herkunft« (partials/rueckweg.ejs, src/rueckweg.js). Ein Link, kein Knopf —
   und immer an derselben Stelle.
   ========================================================================== */

@layer komponenten {
  .rueckweg {
    display: inline-flex; align-items: center; gap: .3rem;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--accent); font-weight: 600; font-size: .9rem; text-decoration: none;
  }
  .rueckweg:hover { text-decoration: underline; }
  /* Mit Herkunft ist der Rückweg mehr als eine Brotkrume — ein Hauch Fläche,
     damit er als »das bringt mich dorthin zurück« lesbar ist. */
  .rueckweg[data-herkunft] {
    padding: .15rem .55rem; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent);
  }
}

/* ==========================================================================
   STARTSEITE ALS BAUKASTEN (Kanban #101, 10.09.2026)
   --------------------------------------------------------------------------
   Entscheidung Oliver (Fassung 4, Hybrid): oben fest die Zeile
   »Handlungsbedarf«, darunter ein Raster mit zwölf Spalten über die
   eingestellte Seitenbreite; Bausteine sind S (3), M (6) oder L (12) Spalten
   breit. Unter ~1100 px Inhaltsbreite wird S zur halben Breite, unter 960 px
   Viewport wird alles eine Spalte in gespeicherter Reihenfolge (Telefon).
   Karten nutzen die Dashboard-Klassen (.dash-line, .dash-link …) weiter.
   ========================================================================== */

@layer seiten {
  .st-kopfrechts { flex-direction: row; align-items: center; gap: .6rem; flex-wrap: wrap; }

  /* --- Handlungsbedarf: die feste Zeile ------------------------------------ */
  .st-hb {
    margin: 0 0 1.2rem; padding: .9rem 1.1rem 1rem;
    background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent);
    border-radius: var(--r);
  }
  .st-hb-kopf { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .4rem; }
  .st-hb-titel { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); }
  .st-hb-hinweis { font-size: .7rem; color: var(--text-faint); border: 1px solid var(--border); border-radius: 999px; padding: 0 .45rem; cursor: help; }
  .st-hb-leer { margin: .2rem 0 0; color: var(--text-soft); }
  .st-hb-liste {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: .35rem .9rem;
  }
  /* Farbe UND Kante — die Information steht doppelt (Rot-Grün-Sehschwäche). */
  .st-hb-zeile { border-left: 3px solid var(--border); }
  .st-hb-zeile.ton-rot { border-left-color: #c5341f; }
  .st-hb-zeile.ton-orange { border-left-color: #d97706; }
  .st-hb-zeile.ton-blau { border-left-color: var(--accent); }
  .st-hb-zeile.ist-aus { opacity: .6; }
  .st-hb-link {
    display: flex; justify-content: space-between; align-items: center; gap: .8rem;
    min-height: 44px; padding: .3rem .6rem; color: var(--text); text-decoration: none;
    border-radius: 0 var(--r) var(--r) 0;
  }
  .st-hb-link:hover { background: var(--surface-2); text-decoration: none; }
  .st-hb-text { font-weight: 600; font-size: .95rem; }
  .st-hb-verb { color: var(--accent); font-weight: 700; font-size: .85rem; white-space: nowrap; }

  /* --- Raster und Kacheln --------------------------------------------------- */
  /* Das Raster ist selbst ein Container: im Bearbeiten-Modus (Panel daneben) oder
     bei schmaler Seitenbreite entscheidet SEINE Breite ueber S/M, nicht die Seite.
     Seit Kanban #107 packt es NICHTS mehr selbst um (kein grid-auto-flow: dense):
     jede Kachel nennt ihren Platz (--sp/--zl), Lücken bleiben Lücken. */
  /* Feines Raster (Kanban #107, dritte Fassung): die Zeile ist eine feste
     Einheit von 8 px, nicht eine Kachelreihe. Nur so gibt es keinen Leerraum
     mehr, der einer hohen Kachel »gehoert« — jede Lücke ist ein Platz.
     Der Abstand zwischen Kacheln steckt in der gemessenen Höhe (--zh), nicht
     in row-gap: bei 8-px-Zeilen wuerde eine Zeilenluecke sonst je Einheit
     zaehlen und alles auseinanderreissen. */
  .st-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 8px; column-gap: 1rem; row-gap: 0; align-items: start; container: raster / inline-size; }
  .st-karte { padding: 1rem 1.1rem 1.1rem; min-width: 0; grid-column: var(--sp, auto) / span var(--br, 3); grid-row: var(--zl, auto) / span var(--zh, 30); }
  .st-karte.g-S { --br: 3; }
  .st-karte.g-M { --br: 6; }
  .st-karte.g-L { --br: 12; }
  .st-karte-titel { margin: 0 0 .6rem; font-size: 1rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem; }
  .st-karte-titel > span:not(.st-griff):not(.st-karte-ort) { overflow-wrap: normal; }
  .st-karte-titel a { color: inherit; text-decoration: none; }
  .st-karte-titel a:hover { color: var(--accent); }
  .st-karte-ort { font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; }
  .st-kpi { display: flex; flex-direction: column; gap: .1rem; margin: 0 0 .5rem; }
  .st-kpi-wert { font-size: 1.55rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1.15; }
  .st-kpi-wert.neg { color: #c5341f; }
  .st-kpi-wert.warn { color: #d97706; }
  .st-kpi-text { font-size: .82rem; color: var(--text-soft); }
  .st-klein { font-size: .82rem; margin: .2rem 0 0; }
  .st-klein-block { display: block; color: var(--text-soft); }
  .st-grossknopf { display: flex; justify-content: center; align-items: center; min-height: 48px; font-size: 1.05rem; }
  .st-leer { grid-column: 1 / -1; }
  .st-phase { font-weight: 600; color: var(--accent); }
  .st-balken { flex: 0 0 5rem; height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
  .st-balken i { display: block; height: 100%; background: var(--accent); }
  .st-projekt { align-items: center; }
  .st-aufgabe { text-decoration: none; color: inherit; flex-direction: column; align-items: flex-start; gap: .1rem; }
  .st-aufgabe:hover .st-aufgabe-titel { color: var(--accent); }
  .st-aufgabe.prio-1 .st-aufgabe-titel { color: #c5341f; }

  /* Umbruch nach RASTERBREITE (Container), nicht nach Fenster. */
  /* Kanban #107: der gewaehlte Platz gilt, solange das Raster mindestens
     760px breit ist — im Bearbeiten-Modus nimmt das Panel Platz weg, das
     Raster misst dann rund 930px. Eine frueher hier stehende Zwischenstufe
     (6 Spalten ab 1000px) warf Zeile und Spalte weg und liess das Ziehen
     genau beim Bearbeiten wirkungslos aussehen. Darunter: eine Spalte. */
  @container raster (max-width: 760px) {
    .st-raster { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; row-gap: 1rem; }
    .st-karte { grid-column: 1 / -1; grid-row: auto; }
  }
  /* Telefon: eine Spalte in gespeicherter Reihenfolge (Entscheidung 3) —
     gelesen wird zeilenweise, wie im Raster (die Route sortiert danach). */
  @media (max-width: 960px) {
    .st-raster { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; row-gap: 1rem; }
    .st-karte { grid-column: 1 / -1; grid-row: auto; }
  }
}

/* ==========================================================================
   STARTSEITE BEARBEITEN (Kanban #102, 10.09.2026)
   --------------------------------------------------------------------------
   Bearbeiten ist ein Modus: Raster sichtbar, Griffe und ⋮-Menü an den
   Kacheln, Panel rechts mit dem Baum der Navigation. Das Panel klebt (sticky),
   nie fixed — .container ist der Bezug. Unter ~1100 px Inhaltsbreite rückt es
   unter das Raster.
   ========================================================================== */

@layer seiten {
  .st-bearbeiten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
  .st-bearbeiten.ist-an { grid-template-columns: minmax(0, 1fr) 18rem; }
  @container inhalt (max-width: 1100px) {
    .st-bearbeiten.ist-an { grid-template-columns: minmax(0, 1fr); }
    .st-panel { position: static; max-height: none; }
  }
  .st-panel {
    position: sticky; top: 4.5rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
    padding: .9rem 1rem; max-height: calc(100dvh - 5.5rem); overflow: auto;
  }
  .st-panel h2 { font-size: 1rem; margin: 0 0 .2rem; }
  .st-panel-bereich { margin-top: .8rem; }
  .st-panel-bereich > summary { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); cursor: pointer; }
  .st-panel-unter { font-size: .72rem; color: var(--text-faint); margin: .45rem 0 .15rem; }
  .st-panel-zeile { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .2rem 0; font-size: .9rem; }
  .st-panel-zeile.ist-drin { color: var(--text-faint); }
  .st-panel-plus { min-width: 2.2rem; min-height: 2.2rem; padding: 0 .4rem; }
  .st-panel-fuss { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
  .st-raster[data-editor="1"] {
    background-image: linear-gradient(to right, var(--border) 1px, transparent 1px);
    background-size: calc(100% / 12) 100%; border-radius: var(--r); padding: .5rem; margin: -.5rem;
  }
  /* Kein cursor:grab an der ganzen Kachel mehr (Kanban #107): gezogen wird am
     Griff. Ein Zeiger, der etwas verspricht, was nicht passiert, war Teil der
     Rückmeldung »lässt mich die Boxen nicht frei verschieben«. .ist-ziel und
     die zweite .st-griff-Regel sind mit dem HTML5-Ziehen weggefallen — Griff
     und Zugzustand stehen im Block FREIES RASTER. */
  .st-raster[data-editor="1"] .st-karte:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .st-menue { position: relative; margin-left: auto; }
  .st-menue > summary { list-style: none; cursor: pointer; padding: 0 .4rem; color: var(--text-soft); font-weight: 700; min-width: 2rem; text-align: center; }
  .st-menue > summary::-webkit-details-marker { display: none; }
  .st-menue-liste {
    position: absolute; right: 0; top: 1.6rem; z-index: 5; min-width: 12rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow);
    padding: .35rem; display: flex; flex-direction: column; gap: .15rem;
  }
  .st-menue-liste button {
    text-align: left; background: transparent; border: 0; padding: .4rem .6rem; font: inherit; color: var(--text);
    cursor: pointer; border-radius: 6px; min-height: 36px;
  }
  .st-menue-liste button:hover { background: var(--surface-2); }
  .st-menue-liste .ist-aktiv { font-weight: 700; color: var(--accent); }
  .st-hb-zeile { display: flex; align-items: center; }
  .st-hb-zeile .st-hb-link { flex: 1; min-width: 0; }
  .st-hb-aus { margin-left: .25rem; }
  .st-hb-aus button { min-width: 2rem; min-height: 2rem; color: var(--text-soft); text-decoration: none; }
  .st-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* ==========================================================================
   LV · AUFMASS · KALKULATION: KOMPAKTER KOPF (Kanban #103, 10.09.2026)
   --------------------------------------------------------------------------
   Rückmeldung Oliver: »auf dem LV-Reiter ist man nur am Scrollen« — der
   Reiter trug rund 400px eigenen Kopf (Upload, Dateikarte, Pills in mehreren
   Zeilen, Status-Formulare), bevor der Positionsbaum begann. Bauform B
   (Artifact »scrOffice Baukasten« §4): der Kopf ist EINE Zeile
   (<details class="lv-datei">, zugeklappt), die Arbeitsfläche beginnt sofort.
   Aufgeklappt zeigt die Zeile Dateikarte, alle Zähler und die Formulare.
   Dieselbe Zeile steht auf Aufmaß und Kalkulation. Keine neue Leisten-Klasse:
   die Pills sind .lv-pill, die Chips .pj-chip, die Formulare unverändert.
   ========================================================================== */

@layer seiten {
  .lv-datei {
    margin: 0 0 .7rem;
    border: 1px solid var(--border); border-radius: var(--r);
    background: var(--surface);
    padding: 0 .9rem;
  }
  .lv-datei > summary {
    display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem;
    min-height: 2.75rem; padding: .3rem 0;
    cursor: pointer; font-size: .92rem; list-style: none;
  }
  .lv-datei > summary::-webkit-details-marker { display: none; }
  .lv-datei > summary::before {
    content: '▸'; flex: 0 0 auto; color: var(--text-faint); font-size: .85rem;
    transition: transform .15s;
  }
  .lv-datei[open] > summary::before { transform: rotate(90deg); }
  .lv-datei-name { font-weight: 700; }
  .lv-datei-datei { color: var(--text-soft); overflow-wrap: anywhere; }
  .lv-datei-trenner, .lv-datei-mehrere { color: var(--text-faint); }
  .lv-datei-mehr { margin-left: auto; font-size: .8rem; color: var(--accent); white-space: nowrap; }
  .lv-datei[open] > summary .lv-datei-mehr { display: none; }
  .lv-datei-inhalt { border-top: 1px solid var(--border); padding: .7rem 0 .2rem; }
  .lv-datei-inhalt .lv-kopf, .lv-datei-inhalt .lv-zaehler, .lv-datei-inhalt .lv-docs,
  .lv-datei-inhalt .lv-upload, .lv-datei-inhalt .am-aktionen, .lv-datei-inhalt .kk-bilanz,
  .lv-datei-inhalt .lv-warnliste, .lv-datei-inhalt .lv-vorbem { margin: 0 0 .7rem; }

  /* Nach dem kompakten Kopf bleibt mehr Fenster für die Arbeitsfläche —
     vorher 17rem Abzug (Seitenkopf + Vorgangsleiste + LV-Kopf), jetzt 13rem. */
  .lv-tree, .lv-seite-canvas { max-height: calc(100dvh - 13rem); }

  /* Handy: die Zeile bricht zum Stapel, der Details-Hinweis rückt in die Zeile. */
  @media (max-width: 760px) {
    .lv-datei > summary { font-size: .88rem; }
    .lv-datei-mehr { margin-left: 0; }
  }

  /* Die Rückhol-Zeile »ⓘ Hilfe einblenden« (public/app.js setzt hidden) stand bisher
     IMMER unter dem Hilfe-Kasten: display:inline-flex oben hebelt das hidden-Attribut
     aus (dieselbe Falle wie .be-new-vendor). Kostet eine Zeile vor der Arbeitsfläche. */
  .hilfe-zurueck[hidden] { display: none; }
}

/* ==========================================================================
   BEREICHSKOPF: die eine Hauptaktion (Kanban #103, Bauform A)
   --------------------------------------------------------------------------
   Jede Bereichsseite trägt rechts oben genau EINE Hauptaktion — immer an
   derselben Stelle und mindestens 44 px hoch (Fitts; WCAG 2.2 SC 2.5.8, Apple
   HIG 44 pt). Vorher waren es normale .btn mit ~35 px. Die Klassen .inbox-head
   und .bl-railsep sind mit den Reiterleisten weggefallen.
   ========================================================================== */

@layer komponenten {
  .lx-headright > .btn,
  .lx-headright > form > .btn,
  .lx-headright > .st-anpassen {
    min-height: 2.75rem;
    display: inline-flex; align-items: center; justify-content: center;
  }
}

/* ==========================================================================
   BAUKASTEN E4 (Kanban #104, 10.09.2026)
   --------------------------------------------------------------------------
   Bausteine »Zeitschiene« (vier Wochen) und »Notiz«, Firmenvorlage im Panel,
   Bearbeiten am Telefon: dort führt das ⋮-Menü, nicht der Daumen —
   Ziehen mit dem Finger ist auf einer Kachelliste unzumutbar (WCAG 2.5.7
   verlangt ohnehin einen Weg ohne Ziehen).
   ========================================================================== */

@layer seiten {
  /* --- Baustein Zeitschiene: vier Wochen als schlanke Bahnen --------------- */
  .st-tl { display: flex; flex-direction: column; gap: .3rem; }
  .st-tl-kopf { display: flex; padding-left: 8rem; font-size: .7rem; color: var(--text-faint); }
  .st-tl-spalte { border-left: 1px solid var(--border); padding-left: .3rem; }
  .st-tl-bahnen { position: relative; display: flex; flex-direction: column; gap: .25rem; }
  .st-tl-heute { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); opacity: .55; margin-left: 8rem; z-index: 1; }
  .st-tl-bahn { display: flex; align-items: center; gap: .5rem; min-height: 26px; color: inherit; text-decoration: none; }
  .st-tl-bahn:hover .st-tl-name { color: var(--accent); }
  .st-tl-name { flex: 0 0 8rem; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .st-tl-spur { position: relative; flex: 1; height: 14px; background: var(--surface-2); border-radius: 7px; min-width: 0; }
  .st-tl-balken { position: absolute; top: 0; bottom: 0; border-radius: 7px; background: var(--accent); }
  /* Offenes Ende: die Kante läuft aus, statt einen Termin vorzutäuschen. */
  .st-tl-balken.ist-offen { background: linear-gradient(90deg, var(--accent) 60%, transparent); }
  .st-tl-balken.ist-ueberzogen { background: #c5341f; }
  @container raster (max-width: 560px) {
    .st-tl-kopf, .st-tl-heute { padding-left: 0; margin-left: 0; }
    .st-tl-bahn { flex-wrap: wrap; }
    .st-tl-name { flex: 1 0 100%; }
  }

  /* --- Baustein Notiz ------------------------------------------------------ */
  .st-notiz { display: flex; flex-direction: column; gap: .4rem; }
  .st-notiz-label { font-size: .78rem; color: var(--text-soft); }
  .st-notiz textarea {
    width: 100%; resize: vertical; font: inherit; padding: .5rem .6rem;
    border: 1px solid var(--border); border-radius: var(--r);
    background: var(--surface); color: var(--text);
  }
  .st-notiz .btn { align-self: flex-start; }

  /* --- Firmenvorlage im Panel --------------------------------------------- */
  .st-vorlage-form { display: flex; flex-direction: column; gap: .35rem; margin-top: .4rem; }
  .st-vorlage-form select { font: inherit; padding: .4rem; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); }
  .st-vorlage-ok { color: var(--success, #2d7a3e); }

  /* --- Bearbeiten am Telefon: Liste statt Ziehen --------------------------- */
  @media (max-width: 960px) {
    .st-raster[data-editor="1"] .st-karte { cursor: default; }
    .st-griff { display: none; }                    /* kein Ziehen mit dem Daumen */
    .st-menue > summary { min-width: 2.75rem; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; }
    .st-menue-liste { right: auto; left: 0; min-width: 14rem; }
    .st-menue-liste button { min-height: 2.75rem; }
    .st-panel-plus { min-width: 2.75rem; min-height: 2.75rem; }
    .st-hb-aus button { min-width: 2.75rem; min-height: 2.75rem; }
  }
}

/* ==========================================================================
   SUCHE UND BEFEHLE: die Palette (Kanban #105, Strg+K)
   --------------------------------------------------------------------------
   Ein Feld für alles — Projekt, Kontakt, Beleg, Rechnung, Bereich, Befehl.
   Die Liste hängt am Feld (absolut, innerhalb der Topbar), nicht am Viewport:
   position: fixed gehört nicht in den Inhaltsbereich (docs/ENTWICKLUNG §7).
   ========================================================================== */

@layer komponenten {
  .topbar-search { position: relative; }
  .palette-kbd {
    position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
    font-size: .68rem; letter-spacing: .02em; color: var(--text-faint);
    border: 1px solid var(--border); border-radius: 4px; padding: 0 .3rem;
    pointer-events: none; background: transparent;
  }
  .palette {
    position: absolute; top: calc(100% + .35rem); left: 0; right: 0; z-index: 60;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
    box-shadow: var(--shadow); overflow: hidden;
  }
  .palette-liste { list-style: none; margin: 0; padding: .25rem; max-height: min(60vh, 26rem); overflow: auto; }
  .palette-treffer a {
    display: flex; align-items: center; gap: .55rem; padding: .45rem .55rem;
    color: var(--text); text-decoration: none; border-radius: 6px; min-height: 40px;
  }
  .palette-treffer.ist-aktiv a { background: var(--accent-soft); color: var(--accent); }
  .palette-symbol { flex: none; width: 1.2rem; text-align: center; opacity: .8; }
  .palette-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
  .palette-ort { flex: none; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
  .palette-leer { padding: .6rem .7rem; color: var(--text-soft); font-size: .9rem; }
  .palette-fuss {
    margin: 0; padding: .35rem .6rem; border-top: 1px solid var(--border);
    font-size: .72rem; color: var(--text-faint); background: var(--surface-2);
  }
  .palette-fuss kbd { border: 1px solid var(--border); border-radius: 3px; padding: 0 .25rem; margin-right: .15rem; }
  /* Am Telefon steht die Topbar-Suche ohnehin nicht — dort führt die Tab-Leiste. */
  @media (max-width: 960px) { .palette-kbd { display: none; } }
}

/* ==========================================================================
   FREIES RASTER (Kanban #107, 10.09.2026)
   --------------------------------------------------------------------------
   Rückmeldung Oliver: »lässt mich die Boxen nicht frei verschieben — tauschen
   geht, frei verschieben nicht« und »Größen ändern geht auch nicht«. Ursache
   war beides Mal dasselbe: die ganze Kachel war draggable, das schluckte den
   Klick aufs ⋮-Menü, und HTML5-Drag&Drop konnte nur Kachel-auf-Kachel.
   Jetzt: gezogen wird am Griff (Pointer Events), abgelegt wird auf jedem Feld,
   die Breite hat einen eigenen Griff an der rechten Kante.
   ========================================================================== */

@layer seiten {
  .st-griff {
    cursor: grab; touch-action: none; user-select: none;
    color: var(--text-faint); margin-right: .35rem;
    min-width: 1.6rem; display: inline-flex; align-items: center; justify-content: center;
  }
  .st-griff:active { cursor: grabbing; }
  .st-karte.ist-gezogen { opacity: .45; }
  /* Wohin die Kachel fällt — dieselbe Fläche, die sie einnehmen wird. */
  .st-vorschau {
    grid-column: var(--sp, 1) / span var(--br, 3);
    grid-row: var(--zl, 1) / span var(--zh, 30);
    align-self: stretch;
    border: 2px dashed var(--accent); border-radius: var(--r);
    background: var(--accent-soft); opacity: .5; pointer-events: none;
  }
  .st-breitgriff {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    width: 14px; height: 44px; cursor: ew-resize; touch-action: none;
    border-radius: 7px 0 0 7px; background: var(--border);
  }
  .st-breitgriff::after {
    content: ''; position: absolute; inset: 0; margin: auto;
    width: 2px; height: 18px; background: var(--surface);
  }
  .st-karte:hover > .st-breitgriff, .st-karte:focus-within > .st-breitgriff { background: var(--accent); }
  .st-karte.ist-weitet { outline: 2px solid var(--accent); }
  /* Der Griff sitzt an der Kachelkante — die Kachel braucht dafür den Bezug. */
  .st-raster[data-editor="1"] .st-karte { position: relative; }
  /* Am Telefon wird nicht gezogen: dort führt das ⋮-Menü (WCAG 2.5.7). */
  @media (max-width: 960px) {
    .st-breitgriff { display: none; }
    .st-vorschau { display: none; }
  }
  /* Ebenso, wenn das Raster für Spalten zu schmal ist: dann liegt alles
     untereinander, ein Griff würde etwas versprechen, was nicht passiert. */
  @container raster (max-width: 760px) {
    .st-griff, .st-breitgriff, .st-vorschau { display: none; }
  }
}