/* Weishaupt Ops — „Atelier"-Designsprache: warmes Kalkputz-Off-White, editoriale
   Serif-Headlines, ruhige Materialpalette. Angelehnt an Architektur-Monografien
   (Chipperfield, Van Duysen) und den warmen Cursor-Unterton — bewusst KEIN kaltes
   Tech-Grau, ein einziger Akzent (Weishaupt-Rot). Druck-/Jahresbericht-Anmutung. */

:root {
  --ink: #1b1714;           /* warmes Druckschwarz */
  --ink-2: #4b443c;         /* warmes Sekundär */
  --paper: #f4f1ea;         /* Kalkputz-Off-White */
  --paper-2: #efeae0;
  --card: #fbf9f5;          /* warmes Karten-Weiß */
  --card-2: #f1ece2;        /* ruhige Füllung */
  --line: #e6e0d4;          /* warme Haarlinie */
  --line-2: #d6cebd;
  --muted: #8a8175;         /* warmes Taupe */
  --muted-2: #a59c8d;
  --black: #1b1714;
  --cyan: #5f7d6e;          /* Alt-Referenzen → warmes Salbei statt kaltem Cyan */
  --cyan-bright: #7fae9b;
  --accent: #b22330;        /* Weishaupt-Rot, erdiger = Alarm/überfällig + Logo */
  --accent-dark: #8c1820;
  --accent-soft: #f3e2de;
  --gold: #ad8746;          /* warmes Messing, sehr sparsam */
  --sage: #5f7d6e;
  --brand-blue: #3b4a68;
  --sidebar: #fbf9f5;
  --sidebar-2: #f1ece2;
  --ok: #3f7d52;
  --warn: #9a6a24;
  --danger: #b22330;
  --blue: #3b4a68;
  --pos: #2f7d5b;           /* Geldeingang — gedämpftes Tannengrün */
  --neg: #c06a5f;           /* Geldausgang — warmes Terrakotta-Rot */
  --radius: 8px;
  --radius-sm: 5px;
  --radius-lg: 13px;
  --shadow: none;
  --shadow-soft: 0 1px 2px rgba(43, 33, 22, .04), 0 8px 22px rgba(43, 33, 22, .05);
  --shadow-lift: 0 12px 38px rgba(43, 33, 22, .11);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, "Courier New", monospace;
}

/* ── Dark Mode: warmes Dunkel, gleicher roter Akzent ──
   Aktivierung: html.dark wird VOR dem ersten Paint per Inline-Script in
   index.html gesetzt (localStorage "superapp_theme": light/dark/system).
   Statusfarben (ok/warn/danger/pos/neg/blau/gold) sind fürs Dunkle aufgehellt —
   dieselben Töne, aber lesbar auf dunklem Grund. color-scheme lässt native
   Controls (Scrollbalken, Date-Picker, Checkboxen) mitwechseln. */
:root { color-scheme: light; }
html.dark {
  color-scheme: dark;
  --ink: #ece6da; --ink-2: #b8b0a2; --paper: #1b1815; --paper-2: #211d18;
  --card: #262019; --card-2: #2f2820; --line: #38312a; --line-2: #4a4136;
  --muted: #9a9183; --muted-2: #7d7568; --black: #ece6da;
  --sidebar: #211d18; --sidebar-2: #262019; --accent-soft: #3a211f;
  --accent: #c94853; --accent-dark: #dd939a;
  --ok: #6fae83; --warn: #cfa25a; --danger: #d25f66;
  --pos: #66b08d; --neg: #d98b7f;
  --blue: #91a5c9; --brand-blue: #91a5c9;
  --gold: #c2a25e; --sage: #8fae9e; --cyan: #8fae9e;
  --hint-ink: #a29b8e; /* nur dunkel definiert — helle Inline-Fallbacks bleiben unberührt */
  --chart-track: #332c24;
  --shadow-soft: 0 1px 2px rgba(0,0,0,.35), 0 8px 22px rgba(0,0,0,.42);
  --shadow-lift: 0 14px 40px rgba(0,0,0,.55);
}
html.dark body { background: var(--paper); color: var(--ink); }
html.dark input, html.dark select, html.dark textarea,
html.dark .proj-search, html.dark .chip, html.dark .filters input[type="search"],
html.dark .task-input, html.dark .modal input, html.dark .modal select, html.dark .modal textarea { background: var(--card-2); color: var(--ink); border-color: var(--line-2); }
html.dark .badge.src, html.dark .badge.doc { background: var(--card-2); color: var(--ink-2); }
html.dark table.data tr:hover td { background: var(--card-2); }
html.dark .chip.on { background: var(--ink); color: var(--paper); }

/* Theme-Umschalter: Hell / Auto (System) / Dunkel — eigener Block ÜBER
   .sidebar-foot (der Fuß ist am Handy ausgeblendet, der Umschalter soll im
   Mobile-Drawer aber erreichbar bleiben). margin-top:auto drückt ihn ans Ende. */
.theme-slot { margin-top: auto; padding: 14px 18px 12px; }
.theme-switch { display: flex; border: 1px solid var(--line-2); border-radius: var(--radius-sm); overflow: hidden; background: var(--card); }
.theme-switch button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 7px 2px; border: 0; border-right: 1px solid var(--line);
  background: transparent; color: var(--muted); cursor: pointer;
  font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  transition: background .15s ease, color .15s ease;
}
.theme-switch button:last-child { border-right: 0; }
.theme-switch button:hover { color: var(--ink); background: var(--card-2); }
.theme-switch button[aria-checked="true"] { background: var(--card-2); color: var(--ink); font-weight: 600; }
.theme-switch .tsw-ico { font-size: 11px; opacity: .85; }
@media (max-width: 860px) { .theme-slot { padding-bottom: 18px; } }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
::selection { background: var(--accent-soft); color: var(--accent-dark); }

/* ruhiger, schmaler Scrollbalken */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; border: 3px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

/* sanftes Einblenden beim View-Wechsel — „smooth" ohne Spielerei */
@keyframes viewIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hero, .page-head, .section, .detail-head { animation: viewIn .44s cubic-bezier(.22, .61, .36, 1) both; }
  .section { animation-delay: .05s; }
}

/* monospace Eyebrow-Label */
.eyebrow {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 2px;
}

.shell { display: flex; min-height: 100vh; }
/* Hamburger + Backdrop nur am Handy (per Media-Query eingeblendet) */
.nav-toggle, .nav-backdrop { display: none; }

/* ── Sidebar (warm, luftig, editorial) ───── */
.sidebar {
  width: 246px; flex: 0 0 246px;
  background: var(--card);
  color: var(--ink-2);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  border-right: 1px solid var(--line);
}
.brand { padding: 28px 22px 18px; }
.brand-plate {
  background: transparent; padding: 0;
  display: flex; align-items: center; justify-content: flex-start;
}
.brand-logo { width: 84%; height: auto; display: block; }
.brand-sub {
  margin-top: 16px; font-family: var(--mono); font-size: 9px; font-weight: 500;
  letter-spacing: .3em; color: var(--muted); display: flex; align-items: center; gap: 8px;
}
.brand-sub::before { content: ""; width: 15px; height: 1.5px; background: var(--accent); }
.brand-sub span { letter-spacing: .14em; color: var(--muted-2); }

.nav { display: flex; flex-direction: column; padding: 10px 12px; gap: 1px; }
.nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  text-decoration: none; color: var(--muted); font-weight: 500; font-size: 13.5px;
  letter-spacing: .003em; position: relative;
  transition: background .15s ease, color .15s ease;
}
.nav a:hover { background: var(--card-2); color: var(--ink); }
.nav a.active { background: var(--card-2); color: var(--ink); font-weight: 600; }
.nav a.active::before {
  content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 19px; background: var(--accent); border-radius: 0 2px 2px 0;
}
.nav-ico { width: 17px; text-align: center; opacity: .5; font-size: 13px; }
.nav a.active .nav-ico { opacity: .95; color: var(--accent); }
.nav-badge {
  margin-left: auto; background: var(--card-2); color: var(--ink-2);
  font-size: 10px; font-weight: 600; border-radius: 99px; padding: 1px 7px; font-family: var(--mono);
  border: 1px solid var(--line);
}
.nav-badge:empty { display: none; }
.nav-badge.warn { background: var(--accent); color: #fff; border-color: var(--accent); }

/* margin-top:auto liegt jetzt auf .theme-slot direkt darüber (drückt beide ans Ende) */
.sidebar-foot { margin-top: 0; padding: 16px 18px; font-size: 10.5px; color: var(--muted); border-top: 1px solid var(--line); font-family: var(--mono); }
.src-line { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; letter-spacing: .03em; }
.dot { width: 6px; height: 6px; border-radius: 99px; display: inline-block; }
.dot.ok { background: var(--sage); }
.dot.blocked { background: var(--accent); }
.dot.warn { background: #b4533a; }
.dot.pending { background: var(--muted-2); animation: pulse-dot 1.1s ease-in-out infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.reindex-btn {
  width: 100%; margin: 12px 0 0; background: var(--card); border: 1px solid var(--line-2); color: var(--ink-2);
  font-size: 10.5px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; border-radius: var(--radius-sm);
  padding: 9px 10px; transition: border-color .15s ease, color .15s ease;
}
.reindex-btn:hover { border-color: var(--ink-2); color: var(--ink); background: var(--card); }
.reindex-btn:disabled { opacity: .5; cursor: wait; }
.readonly-tag {
  margin-top: 11px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  letter-spacing: .12em; font-size: 9px; color: var(--muted); text-align: center;
}

/* ── Main ────────────────────────────────── */
.main { flex: 1; padding: 0 0 84px; max-width: none; min-width: 0; }
.main > *:not(.hero) { margin-left: 48px; margin-right: 48px; max-width: 1320px; }
.main > *:first-child:not(.hero) { margin-top: 34px; }
.loading { color: var(--muted); padding: 48px; font-family: var(--mono); letter-spacing: .04em; }

/* ── Hero (warm, editorial, ruhig) ──────── */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(168deg, #f8f5ef 0%, var(--paper) 62%);
  color: var(--ink); padding: 58px 48px 0; margin-bottom: 38px;
  border-bottom: 1px solid var(--line);
}
.hero::after {
  content: ""; position: absolute; right: -130px; top: -150px; width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(178, 35, 48, .05), transparent 70%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero .eyebrow { color: var(--accent); margin-bottom: 15px; }
.hero h1 {
  font-family: var(--serif); font-size: 47px; font-weight: 600; letter-spacing: -.012em;
  line-height: 1.03; margin: 0; max-width: 60%; color: var(--ink);
}
.hero .hero-sub { color: var(--ink-2); margin: 17px 0 0; font-size: 15.5px; max-width: 52%; line-height: 1.6; }
.hero-stats { display: flex; gap: 0; margin-top: 38px; flex-wrap: wrap; border-top: 1px solid var(--line); }
.hero-stat {
  cursor: pointer; padding: 18px 32px 22px 0; margin-right: 30px;
  border-top: 2px solid transparent; margin-top: -1px; transition: border-color .2s ease;
}
.hero-stat:hover { border-top-color: var(--accent); }
.hero-stat .hs-v { font-family: var(--mono); font-size: 27px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.hero-stat .hs-l { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-top: 5px; }
.hero-stat.danger .hs-v { color: var(--accent); }
.hero-stat.warn .hs-v { color: var(--warn); }
.hero-stat:hover .hs-l { color: var(--ink-2); }
@media (max-width: 900px) { .hero h1, .hero .hero-sub { max-width: 100%; } }

.page-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.page-head h1 {
  font-family: var(--serif); font-size: 34px; font-weight: 600; letter-spacing: -.01em; margin: 0;
}
.page-sub { color: var(--muted); margin: 6px 0 22px; font-size: 14px; max-width: 76ch; line-height: 1.6; }

/* KPI-Reihe */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 13px; margin: 16px 0 26px; }
.kpi {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 17px; box-shadow: var(--shadow); cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.kpi:hover { transform: translateY(-1px); border-color: var(--line-2); box-shadow: var(--shadow-soft); }
.kpi .v { font-family: var(--mono); font-size: 25px; font-weight: 500; letter-spacing: -.02em; }
.kpi .l { font-size: 12px; color: var(--muted); font-weight: 500; letter-spacing: .01em; margin-top: 3px; }
.kpi.danger .v { color: var(--danger); }
.kpi.warn .v { color: var(--warn); }
.kpi.ok .v { color: var(--ok); }

/* Sektionen & Cards */
.section { margin: 34px 0; }
.section > h2 {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 16px; display: flex; align-items: center; gap: 11px;
}
.section > h2::before { content: ""; width: 16px; height: 1.5px; background: var(--accent); flex: none; }
.section > h2 .hint { font-family: var(--sans); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); font-size: 12.5px; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 20px 22px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.card:hover { box-shadow: var(--shadow-soft); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
@media (max-width: 1100px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
/* Cockpit-Aufgaben per Drag & Drop zwischen Heute / Woche / Monat verschieben */
.task-drag { cursor: grab; }
.task-drag:active { cursor: grabbing; }
.cockpit-buckets .card { transition: outline-color .12s ease; min-width: 0; }
/* Lange Bezeichner ohne Trennstelle — z. B. der HiDrive-Ordnername
   „P-30031_Schackstr_53_Augsburg_Schornstein_Sicherung", den eine Aufgabe als
   Projekt-Link zeigt — sprengten auf dem Handy die Cockpit-Karte (531 px bei
   390 px Bildschirm, Seite liess sich seitlich schieben). Unterstriche sind keine
   Umbruchstelle, deshalb hier ausdrücklich erlauben (Niklas 03.08.). */
.fin-row .ft, .fin-row a, .task-title { overflow-wrap: anywhere; }
.cockpit-buckets .drop-over { outline: 2px dashed var(--accent); outline-offset: 4px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 7%, transparent); }

/* Projektzeilen / -karten */
.p-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 18px; margin-bottom: 8px; cursor: pointer;
  box-shadow: var(--shadow); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.p-row:hover { transform: translateY(-1px); border-color: var(--line-2); box-shadow: var(--shadow-soft); }
.p-row .titlebox { min-width: 220px; flex: 1; }
.p-row .t { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-row .s { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-row .right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* Badges — ruhige, technische Tags */
.badge {
  display: inline-block; padding: 2.5px 9px; border-radius: 99px;
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .04em; white-space: nowrap;
  text-transform: uppercase; border: 1px solid transparent;
}
.badge.stage-angebot { background: #fbeaec; color: var(--accent-dark); border-color: #f0c2c7; }
.badge.stage-lv { background: #e8edf9; color: var(--brand-blue); border-color: #c5d0ec; }
.badge.stage-nicht { background: #f0f0ee; color: #75787f; border-color: #ddddd8; }
.badge.stage-auftrag { background: #e7f5ec; color: var(--ok); border-color: #bfe5cd; }
.badge.due-overdue { background: var(--danger); color: #fff; }
.badge.due-soon { background: #f1b33c; color: #4a3403; }
.badge.due-ok { background: #e7f5ec; color: var(--ok); }
.badge.due-none { background: #f0f0ee; color: #8b8e95; border: 1px dashed #c9c9c2; }
.badge.q-gut { background: #e7f5ec; color: var(--ok); }
.badge.q-teilweise { background: #fdf3da; color: var(--warn); }
.badge.q-unklar { background: #fdeae7; color: var(--danger); }
.badge.src { background: #eef0f4; color: #4b5563; font-weight: 700; }
.badge.src.mock { background: #fbe9fb; color: #8e44ad; border: 1px dashed #d7a6d7; }
.badge.src.live { background: #e8efe8; color: var(--sage); border-color: #d2e0d6; }
.badge.doc { background: #f3f1ec; color: #5a5d63; }

/* Filterleiste */
.filters {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px; margin-bottom: 14px; box-shadow: var(--shadow);
  position: sticky; top: 0; z-index: 5;
}
.filters input[type="search"] {
  flex: 1 1 220px; min-width: 180px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 0; font-size: 14px; background: #fff;
}
.filters input[type="search"]:focus { outline: none; border-color: var(--ink); }
.chip {
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  border-radius: 0; padding: 6px 13px; font-size: 12px; font-weight: 500; cursor: pointer;
  user-select: none; font-family: var(--mono); letter-spacing: .02em;
}
.chip:hover { border-color: var(--ink); }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip.on.danger { background: var(--accent); border-color: var(--accent); }
.filters select {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 0;
  background: #fff; font-size: 13px; font-weight: 500;
}
.count-line { color: var(--muted); font-size: 12px; margin: 4px 2px 12px; font-family: var(--mono); letter-spacing: .02em; }

/* ── Projekt-Suche — prominentes, warmes Suchfeld (Atelier-Stil) ── */
.proj-searchbar { position: relative; margin: 18px 0 8px; }
.proj-search-ico {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  display: flex; color: var(--muted-2); pointer-events: none; transition: color .15s ease;
}
.proj-searchbar:focus-within .proj-search-ico { color: var(--accent); }
.proj-search {
  width: 100%; box-sizing: border-box;
  padding: 14px 18px 14px 50px;
  border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  background: var(--card); color: var(--ink);
  font-family: var(--sans); font-size: 15.5px; letter-spacing: .005em;
  box-shadow: var(--shadow-soft);
  -webkit-appearance: none; appearance: none;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.proj-search::placeholder { color: var(--muted-2); font-weight: 400; }
.proj-search:hover { border-color: var(--muted-2); }
.proj-search:focus {
  outline: none; border-color: var(--accent); background: #fff;
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-soft);
}
.proj-search::-webkit-search-cancel-button {
  -webkit-appearance: none; height: 14px; width: 14px; cursor: pointer; background: var(--muted-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6L6 18M6 6l12 12' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6L6 18M6 6l12 12' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.proj-search-hint {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--muted-2);
  pointer-events: none; transition: opacity .16s ease;
  background: linear-gradient(90deg, transparent, var(--card) 22%); padding-left: 30px;
}
.proj-searchbar:focus-within .proj-search-hint, .proj-search:not(:placeholder-shown) ~ .proj-search-hint { opacity: 0; }
@media (max-width: 820px) { .proj-search-hint { display: none; } }

/* Vorhang-Gruppen */
.vgroup { margin-bottom: 22px; }
.vgroup > h3 {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
  margin: 0 0 10px; display: flex; gap: 8px; align-items: center;
}
.vgroup.overdue > h3 { color: var(--danger); }
.vgroup.today > h3 { color: var(--warn); }
.vgroup.week > h3 { color: var(--accent-dark); }
.vgroup.later > h3 { color: var(--ok); }
.vgroup.none > h3 { color: #8b8e95; }
.vgroup .nfo { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); }

/* Detail */
.back-link { color: var(--muted); text-decoration: none; font-weight: 700; font-size: 13px; }
.back-link:hover { color: var(--accent-dark); }
.detail-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 4px; }
.detail-head .eyebrow { flex-basis: 100%; margin: 0 0 -2px; }
.detail-head h1 { margin: 0; font-family: var(--serif); font-size: 27px; font-weight: 600; letter-spacing: -.01em; }
.detail-title { display: inline-flex; align-items: baseline; gap: 8px; }
.title-edit {
  align-self: center; font-size: 13px; line-height: 1; padding: 3px 7px;
  border: 1px solid var(--line); border-radius: 6px; background: transparent;
  color: var(--muted); cursor: pointer; transition: color .12s, border-color .12s;
}
.title-edit:hover { color: var(--accent); border-color: var(--accent); }
.detail-meta { color: var(--muted); margin: 2px 0 14px; }
.ext-link {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  border: 1px solid var(--line); background: var(--card); padding: 7px 13px; border-radius: 8px;
  font-weight: 700; font-size: 13px; box-shadow: var(--shadow);
}
.ext-link:hover { border-color: var(--accent); color: var(--accent-dark); }

.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin: 24px 0; flex-wrap: wrap; }
.tabs button {
  border: 0; background: none; padding: 11px 2px; font-size: 14px; font-weight: 500;
  color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  margin-right: 22px; transition: color .15s ease, border-color .15s ease;
}
.tabs button:hover { color: var(--ink); }
.tabs button.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.tabs button .tcount { background: var(--card-2); border-radius: 99px; padding: 0 7px; font-size: 11px; margin-left: 6px; color: var(--ink-2); font-family: var(--mono); }

.kv { display: grid; grid-template-columns: 170px 1fr; gap: 7px 14px; font-size: 14px; }
.kv dt { color: var(--muted); font-weight: 600; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
/* Unauffälliges Inline-Eingabefeld in Stammdaten-Listen (z. B. „Projektnummer Ferzan"):
   sieht ausgefüllt wie normaler Text aus, wird erst bei Hover/Fokus als Feld erkennbar. */
.kv dd input.kv-edit {
  width: 100%; max-width: 220px; padding: 1px 4px; margin: -1px 0 0 -5px;
  font: inherit; color: inherit; background: transparent;
  border: 1px solid transparent; border-radius: 6px;
}
.kv dd input.kv-edit:hover { border-color: var(--line); }
.kv dd input.kv-edit:focus { border-color: var(--line-2, var(--line)); background: var(--card); outline: none; }
.kv dd input.kv-edit::placeholder { color: var(--muted); opacity: .8; }

/* Dokumente */
.doc-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); margin-bottom: 6px;
  text-decoration: none; transition: border-color .08s ease;
}
.doc-row:hover { border-color: var(--accent); }
.doc-row .dn { flex: 1; min-width: 0; font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-row .dm { color: var(--muted); font-size: 12px; white-space: nowrap; }
.doc-ico {
  width: 34px; height: 34px; border-radius: 7px; flex: 0 0 34px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 900; letter-spacing: .02em;
  background: #ecebe6; color: var(--ink-2);
}
.doc-ico.pdf { background: #fdeae7; color: var(--danger); }
.doc-ico.img { background: #e7eaf0; color: var(--blue); }
.doc-ico.gaeb { background: #efe9fb; color: #6d3fc0; }
.doc-ico.html { background: #e7f5ec; color: var(--ok); }

/* Geld */
.money { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -.01em; }
.money.net { color: var(--ink-2); }
.money.gross { color: var(--ink); }

.fin-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 15px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 7px; box-shadow: var(--shadow);
}
.fin-row .fl { flex: 1; min-width: 0; }
/* Komplett klickbare Zeilen (z. B. Funnel-Reaktivierung): Hover zeigt die Klickfläche */
.fin-row.row-click:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.fin-row .ft { font-weight: 700; font-size: 14px; }
.fin-row .fs { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 640px; }

/* Leerzustände */
.empty {
  border: 1.5px dashed #cfccc2; border-radius: var(--radius); padding: 22px;
  color: var(--muted); text-align: center; background: #faf9f6; font-weight: 600;
}
.empty .e-title { color: var(--ink-2); font-weight: 800; margin-bottom: 4px; }

/* Buttons */
.btn {
  border: 1px solid var(--line-2); background: var(--card); border-radius: var(--radius-sm);
  padding: 8px 15px; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--ink-2);
  font-family: var(--sans);
  transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:hover { border-color: var(--ink-2); color: var(--ink); box-shadow: var(--shadow-soft); }
.btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--card); font-weight: 600; }
.btn.primary:hover { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }
.btn.ghost-danger:hover { border-color: var(--danger); color: var(--danger); }

/* Proposed Actions */
.pa-row {
  display: flex; gap: 12px; align-items: center; padding: 11px 15px;
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid #f1b33c;
  border-radius: var(--radius); margin-bottom: 7px;
}
.pa-row .pt { font-weight: 700; }
.pa-row .ps { color: var(--muted); font-size: 12.5px; }

/* Plan-Viewer (Mock) */
.plan-mock {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius);
  background: repeating-linear-gradient(0deg, #fdfdfb, #fdfdfb 34px, #eef0ee 35px),
              repeating-linear-gradient(90deg, #fdfdfb, #fdfdfb 34px, #eef0ee 35px);
  height: 360px; overflow: hidden;
}
.plan-mock .wall { position: absolute; background: none; border: 2.5px solid #6b6f78; }
.pin {
  position: absolute; width: 26px; height: 26px; border-radius: 99px 99px 99px 2px;
  transform: rotate(-45deg) translate(-50%, -50%); transform-origin: top left;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.pin span { transform: rotate(45deg); font-size: 11px; font-weight: 900; color: #fff; }
.pin.offen { background: var(--danger); }
.pin.bearbeitung { background: #f1b33c; }
.pin.erledigt { background: var(--ok); }

.mock-banner {
  background: #fbe9fb; border: 1px dashed #d7a6d7; color: #8e44ad;
  border-radius: var(--radius); padding: 10px 14px; font-weight: 700; font-size: 13px; margin-bottom: 14px;
}
.live-banner {
  background: #e3f2e9; border: 1px solid #bfe5cd; color: #14683a;
  border-radius: var(--radius); padding: 10px 14px; font-weight: 600; font-size: 13px; margin-bottom: 14px;
}

table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 7px 10px; border-bottom: 2px solid var(--line); }
table.data td { padding: 8px 10px; border-bottom: 1px solid #eceae4; }
table.data tr:hover td { background: #faf9f5; }

/* ── Charts ─────────────────────────────── */
.chart { width: 100%; height: auto; display: block; }
.chart .c-label { font-size: 12px; fill: var(--ink-2); font-weight: 500; }
.chart .c-label.strong { font-weight: 700; fill: var(--accent); }
.chart .c-value { font-size: 12px; fill: var(--muted); font-weight: 500; font-family: var(--mono); }
.chart .c-tick { font-size: 10px; fill: var(--muted-2); font-family: var(--mono); }
.chart .axis { stroke: var(--line-2); stroke-width: 1.2; }
.chart .today-line { stroke: var(--danger); stroke-width: 1.5; stroke-dasharray: 4 3; }
.chart .clickable { cursor: pointer; }
.chart .clickable:hover rect, .chart .clickable:hover circle { opacity: .75; }
.card-h { margin: 0 0 14px; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; text-transform: none; color: var(--ink-2); }
.donut-wrap { display: flex; align-items: center; gap: 18px; }
.donut-wrap svg { width: 150px; flex: 0 0 150px; }
.donut-big { font-size: 30px; font-weight: 800; fill: var(--ink); }
.donut-sub { font-size: 11px; fill: var(--muted); }
.chart-legend { font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.lg-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; }
.chart-row .card { overflow: hidden; }

/* ── Schnellzugriff-Kacheln ─────────────── */
.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 16px; }
.quick-tile {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow);
  transition: transform .08s ease;
}
.quick-tile:hover { transform: translateY(-1px); border-color: var(--accent); }
.qt-text { display: flex; flex-direction: column; min-width: 0; }
.qt-text strong { font-size: 13.5px; }
.qt-text span { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Planviewer ─────────────────────────── */
.viewer-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.viewer-split { display: flex; gap: 16px; align-items: flex-start; }
.plan-stage {
  position: relative; flex: 1; min-width: 0; overflow: auto; max-height: 78vh;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow);
}
.plan-stage.pin-mode { cursor: crosshair; outline: 3px solid var(--accent); }
.plan-canvas { display: block; }
.pin-layer { position: absolute; inset: 0 auto auto 0; }
.ticket-panel { width: 320px; flex: 0 0 320px; }
.ticket-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 8px; cursor: pointer; box-shadow: var(--shadow);
}
.ticket-card:hover { border-color: var(--accent); }
.tc-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.tc-meta { color: var(--muted); font-size: 12px; margin-top: 3px; }
.pin-dot {
  width: 20px; height: 20px; border-radius: 99px; flex: 0 0 20px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 900;
}
.pin-dot.offen { background: var(--danger); }
.pin-dot.bearbeitung { background: #f1b33c; }
.pin-dot.erledigt { background: var(--ok); }
@media (max-width: 1000px) { .viewer-split { flex-direction: column; } .ticket-panel { width: 100%; flex: none; } }

/* ── Pipeline / Funnel ──────────────────── */
.pipe-filter { display: flex; align-items: center; gap: 12px; margin: 6px 0 8px; flex-wrap: wrap; }
.filter-arrow { font-family: var(--mono); color: var(--muted); }
.seg-label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.seg-group { display: inline-flex; border: 1px solid var(--line); border-radius: 0; overflow: hidden; }
.pipe-foot-actions { margin: 4px 0 0; }
.seg {
  border: 0; border-right: 1px solid var(--line); background: #fff; color: var(--ink-2);
  padding: 7px 16px; font-size: 12.5px; font-weight: 500; cursor: pointer;
  font-family: var(--mono); letter-spacing: .03em;
}
.seg:last-child { border-right: 0; }
.seg:hover { background: #f2f2ee; }
.seg.on { background: var(--ink); color: #fff; }
.pipe-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 14px 0; font-family: var(--mono); }

.pipeline-board {
  display: flex; gap: 14px; align-items: flex-start; overflow-x: auto;
  padding-bottom: 18px; margin-top: 16px;
}
/* volle Breite nutzen + horizontal scrollen, damit keine Spalte abgeschnitten wird */
.main > .pipeline-board { max-width: none; margin-right: 0; padding-right: 40px; scrollbar-width: thin; }
.pipe-col { flex: 0 0 264px; max-width: 264px; }
.pipe-col.collapsed { flex: 0 0 188px; max-width: 188px; }
.pipe-col-head strong { line-height: 1.2; flex: 1 1 100%; min-width: 0; font-weight: 600; }
.pipe-col-head {
  background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--accent);
  border-radius: var(--radius) var(--radius) 6px 6px; padding: 11px 14px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; row-gap: 7px;
  box-shadow: var(--shadow); margin-bottom: 9px; font-size: 13.5px;
}
.pipe-count { background: var(--ink); color: var(--card); border-radius: 99px; padding: 1px 8px; font-size: 11px; font-weight: 600; font-family: var(--mono); }
.pipe-sum { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--pos); white-space: nowrap; font-family: var(--mono); }
.pipe-cards { display: flex; flex-direction: column; gap: 8px; }
.pipe-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 9px;
  padding: 10px 12px; cursor: pointer; box-shadow: var(--shadow);
  transition: transform .08s ease, border-color .08s ease;
}
.pipe-card:hover { transform: translateY(-1px); border-color: var(--accent); }
.pipe-card.overdue { border-left: 4px solid var(--danger); }
.pipe-card.soon { border-left: 4px solid #f1b33c; }
.pc-title { font-weight: 700; font-size: 13px; }
.pc-sub { color: var(--muted); font-size: 11.5px; margin: 2px 0 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-foot { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.badge.stage-date { background: #f0edf9; color: #6d3fc0; border: 1px dashed #c9bce8; }
.badge.stage-date.set { background: #e7e0f7; border-style: solid; }

/* ── Angebots-Editor ────────────────────── */
.editor-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 14px; }
/* Langtext aus dem LV, NUR zur Ansicht (finalisierte Belege — GoBD: nichts mehr
   ändern, aber nachlesen können, was hinter dem Kurztitel steckt). Deutlich als
   fremder Text gesetzt, damit niemand ihn für Belegtext hält. */
.lv-nur-ansicht {
  margin-top: 4px; padding: 6px 9px; border-left: 3px solid var(--line-2);
  background: var(--card-2); border-radius: 0 6px 6px 0;
  font-size: 12px; line-height: 1.5; color: var(--ink-2); white-space: pre-wrap;
}
.lv-nur-ansicht::before { content: "aus dem LV — nicht auf dem Beleg"; display: block; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }

/* ── Beleg-Kopf im Layout der PDF (Niklas 17.08.2026) ─────────────────────────
   Vorher lagen zehn gleich große Felder in einem 4-Spalten-Raster: Empfänger unten,
   Betreff zwischen Telefon und Kunden-Nr. Der Kopf steht jetzt in der Reihenfolge,
   in der druck.html / rechnung-druck.html ihn setzen — Empfänger links, Kontakt
   rechts, darunter Überschrift, dann Betreff/Leistungsort links und Kunde/Datum
   rechts. Gleiche Eingabefelder wie bisher, nur an ihrem Platz auf dem Papier. */
.beleg-brief { display: grid; gap: 12px; }
.beleg-brief .bk-top,
.beleg-brief .bk-meta { display: grid; grid-template-columns: minmax(260px, 1.15fr) minmax(230px, .85fr); gap: 26px; align-items: start; }
.beleg-brief .bk-empf { margin-bottom: 0; }
/* Anschriftenfeld so schmal wie das Anschriftenfenster der PDF (250px bei 12px Roboto,
   also rund 40 Zeichen je Zeile). Vorher war das Feld doppelt so breit: ein Empfaenger,
   der hier bequem in eine Zeile passte, brach auf dem Papier unschoen um und stand fast
   am Firmenblock (Vorgabe Niklas 21.08.2026). Wer hier umbricht, sieht den Umbruch also
   ungefaehr dort, wo ihn auch der Druck setzt. */
.beleg-brief .bk-empf textarea { min-height: 96px; line-height: 1.5; }
/* Gilt in JEDEM Beleg-Editor: Angebot/AB/Rechnung ueber .bk-empf, Brief und Aufmass
   ueber die Klasse am Feld selbst (die beiden Masken haben keinen Briefkopf-Block). */
.beleg-brief .bk-empf textarea, textarea.anschrift-ta { max-width: 40ch; }
/* Absenderzeile über dem Anschriftenfeld — im PDF steht sie klein über dem Fenster. */
.beleg-brief .bk-absender { font-size: 10.5px; color: var(--muted); line-height: 1.5; padding-bottom: 7px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.beleg-brief .bk-kontakt { display: grid; align-content: start; }
/* Überschriftzeile „Angebot – A-26123": beide Felder sehen aus wie die H1 des PDFs
   und geben sich erst beim Überfahren als Eingabe zu erkennen. */
.beleg-brief .bk-h1 { display: flex; align-items: center; gap: 9px; border-top: 2px solid var(--ink); padding-top: 13px; margin-top: 2px; flex-wrap: wrap; }
.beleg-brief .bk-typ, .beleg-brief .bk-nr {
  font-size: 20px; font-weight: 700; color: var(--ink); font-family: inherit;
  border: 1px solid transparent; background: transparent; border-radius: 7px; padding: 3px 6px;
}
.beleg-brief .bk-nr { width: 290px; }
.beleg-brief .bk-nr::placeholder { font-weight: 400; font-size: 14px; color: var(--muted-2); }
/* Der Belegart-Wähler soll als Auswahl erkennbar bleiben, obwohl er wie die
   PDF-Überschrift gesetzt ist — nativer Pfeil, nur ohne Kasten. */
.beleg-brief .bk-typ { appearance: auto; padding-right: 4px; }
.beleg-brief .bk-typ:hover, .beleg-brief .bk-nr:hover { border-color: var(--line-2); background: var(--card-2); }
.beleg-brief .bk-typ:focus, .beleg-brief .bk-nr:focus { outline: 2px solid var(--cyan); border-color: transparent; background: #fafaf7; }
.beleg-brief .bk-strich { font-size: 20px; color: var(--muted); }
.beleg-brief .bk-meta-links, .beleg-brief .bk-meta-rechts, .beleg-brief .bk-empf-spalte { display: grid; align-content: start; }
/* Felder ohne Beschriftung (z. B. der Schalter „Rechnung an Dritte") ließen im
   Briefkopf eine leere Label-Zeile stehen. */
.beleg-brief .form-field > span:empty { display: none; }
/* Rechnung: die Überschrift ist ein Freitextfeld (art_label „3. Abschlagsrechnung"),
   das in der H1-Zeile neben der Nummer steht. */
.beleg-brief .bk-titel { width: auto; min-width: 270px; flex: 0 1 auto; }
.beleg-brief .bk-titel:disabled { color: var(--ink); opacity: 1; }
.beleg-brief .bk-meta-rechts { max-width: 280px; }
/* Selten Gebrauchtes (USt, Unterschriftszeile, Pauschalpreis) eingeklappt — die
   aktuellen Werte stehen in der Zusammenfassungszeile, damit man sie ohne Klick sieht. */
.beleg-brief .bk-mehr { border-top: 1px solid var(--line); padding-top: 4px; }
.beleg-brief .bk-mehr > summary { cursor: pointer; font-size: 12px; color: var(--muted); padding: 6px 2px; list-style: none; }
.beleg-brief .bk-mehr > summary::before { content: "▸ "; }
.beleg-brief .bk-mehr[open] > summary::before { content: "▾ "; }
.beleg-brief .bk-mehr > summary::-webkit-details-marker { display: none; }
.beleg-brief .bk-mehr[open] > summary { margin-bottom: 6px; }
@media (max-width: 940px) {
  .beleg-brief .bk-top, .beleg-brief .bk-meta { grid-template-columns: 1fr; gap: 8px; }
  .beleg-brief .bk-nr { width: 100%; }
}
.editor-head .form-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
@media (max-width: 1000px) { .editor-head .form-grid { grid-template-columns: 1fr 1fr; } }
.editor-head input, .editor-head textarea, .editor-table input, .editor-table textarea {
  padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; font-size: 13.5px;
  font-family: inherit; background: #fafaf7; width: 100%;
}
.editor-head input:focus, .editor-head textarea:focus, .editor-table input:focus, .editor-table textarea:focus {
  outline: 2px solid var(--accent); border-color: transparent;
}
.editor-table td { vertical-align: top; }
/* Schmalere Zell-Innenabstände als table.data (10 px): 7 Spalten × 8 px machten allein
   ~56 px der 1060-px-Minimalbreite aus (Laptop-Fit, Messung 10.08.). Selektor MIT
   table.data davor — sonst verliert er gegen deren Shorthand-Padding (Spezifität). */
table.data.editor-table th, table.data.editor-table td { padding-left: 6px; padding-right: 6px; }
.editor-table textarea { margin-top: 5px; font-size: 12.5px; color: #555; }
/* KEIN nowrap mehr: das Inline-Band aus Betrag + 6 Knöpfen erzwang 283 px Spaltenbreite
   und damit den Horizontal-Scroll bis zum Lösch-Knopf (Befund Niklas 10.08.). Der Betrag
   steht oben, die Aktionen (.gp-actions) brechen darunter um. */
.editor-table .gp-cell { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.editor-table .gp-actions { display: flex; gap: 2px; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin-top: 3px; font-weight: 400; }
.editor-table .soll-sub { font-size: 11px; color: var(--muted); white-space: nowrap; margin-top: 3px; font-variant-numeric: tabular-nums; }
.editor-table .ev-row td { background: #faf6ee; }
.ev-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--muted); margin-right: 6px; }
.btn.mini { padding: 3px 7px; font-size: 12px; line-height: 1; }
.btn.mini.danger:hover { border-color: var(--danger); color: var(--danger); }
.btn.mini.addpos { font-size: 11px; font-weight: 700; }
.editor-table .nr { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--muted); white-space: nowrap; vertical-align: top; padding-top: 12px; }
.editor-table .nr-title { color: var(--accent); font-size: 14px; padding-top: 10px; }
.editor-table tr.title-row td { background: #f3eee6; border-top: 2px solid var(--accent); }
.editor-table tr.title-row .title-sub { color: var(--ok); }
.editor-table .row-actions { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; min-width: 104px; }
.editor-sums { margin-top: 14px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 14px; }
.editor-sums div { display: flex; gap: 26px; }
.editor-sums .gross-line { border-top: 2px solid var(--ink); padding-top: 6px; font-size: 15.5px; }
/* Rechnungs-Summen: zweispaltig (Label links, Betrag rechts) */
.inv-sums { align-items: stretch; max-width: 460px; margin-left: auto; }
.inv-sums div { display: flex; justify-content: space-between; gap: 26px; }
.inv-sums div.big { border-top: 1px solid #999; font-size: 15.5px; font-weight: 700; padding-top: 6px; margin-top: 3px; }
.inv-billing { background: #fafaf7; }
/* ── Rechnungsaufstellung im Editor (11.08.2026) ─────────────────────────────
   Die Zeilen standen vorher in nackter Browser-Darstellung (Befund Niklas: „ist alles
   noch nicht angepasst in unserem Design"). Sie sollen wie eine table.data lesen:
   Kopfzeile in Versalien/Mono-Ziffern, Haarlinien, Betraege rechtsbuendig mit
   tabellarischen Ziffern — und der Rechenschluss darunter wie .inv-sums. */
.aufst-editor { border: 1px solid var(--line); border-radius: 9px; background: var(--card, #fff); padding: 10px 12px 12px; }
.aufst-editor .aufst-kopf {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  font-weight: 600; padding-bottom: 6px; border-bottom: 2px solid var(--line);
}
.aufst-editor .aufst-zeile { padding: 5px 0; border-bottom: 1px solid var(--line); }
.aufst-editor .aufst-zeile:last-of-type { border-bottom: none; }
.aufst-editor input {
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px;
  font-family: inherit; background: #fafaf7; color: var(--ink); width: 100%; min-width: 0;
}
.aufst-editor input:focus { outline: 2px solid var(--cyan); border-color: transparent; }
.aufst-editor input[inputmode="decimal"] { text-align: right; font-variant-numeric: tabular-nums; }
/* Nur-Lese-Betraege (USt, Brutto, Einbehalt offen, bezahlt, noch offen) */
.aufst-editor .aufst-wert {
  text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums;
  color: var(--ink-2); padding-right: 2px; white-space: nowrap;
}
.aufst-editor .aufst-wert.leer { color: var(--muted-2); }
.aufst-editor .aufst-del {
  border: 1px solid transparent; background: none; color: var(--muted-2); cursor: pointer;
  border-radius: 6px; padding: 2px 6px; font-size: 13px; line-height: 1.2;
}
.aufst-editor .aufst-del:hover { color: var(--danger, #a33); border-color: var(--line); }
/* Rechenschluss — gleiche Optik wie die Summenspalte der Rechnung */
.aufst-schluss { max-width: 520px; margin-left: auto; margin-top: 12px; font-size: 12.5px; }
.aufst-schluss .zl { display: flex; justify-content: space-between; gap: 24px; padding: 3px 0; }
.aufst-schluss .zl > span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.aufst-schluss .zl.stark { font-weight: 700; border-top: 1px solid var(--line); padding-top: 5px; margin-top: 2px; }
.aufst-schluss .zl.summe { border-top: 2px solid var(--ink); font-size: 15px; font-weight: 700; padding-top: 6px; margin-top: 4px; }
html.dark .aufst-editor { background: var(--card); }
html.dark .aufst-editor input { background: var(--paper-2); color: var(--ink); border-color: var(--line-2); }
html.dark .aufst-editor .aufst-kopf, html.dark .aufst-editor .aufst-zeile { border-color: var(--line-2); }
.editor-table .soll { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Basis-Auswahl im Neue-Rechnung-Dialog */
.basis-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.basis-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: #fff; }
.basis-row:hover { border-color: var(--sage); background: var(--card-2); }
.basis-row.on { border-color: var(--sage); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--sage); }
.basis-row > div:first-child { flex: 1; min-width: 0; }
.basis-row .br-t { font-weight: 700; font-size: 13.5px; }
.basis-row .br-s { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.basis-row .money { margin-left: auto; white-space: nowrap; }
/* Anhang-Auswahl (Rechnungs-Export) */
.att-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.att-item { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.att-item:hover { background: #f2f2ee; }
.att-rep { color: #6d3fc0; } .att-file { color: var(--cyan); }
@media (max-width: 800px) { .att-list { grid-template-columns: 1fr; } }
.rechnung-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.att-local { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.att-localrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; background: var(--card-2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px; }
/* Laufende-Projekt-Übersicht: KPI-Kacheln + Fortschrittsbalken */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: 10px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; box-shadow: var(--shadow); min-width: 0; }
.kpi-v { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-l { font-size: 11px; color: var(--muted); font-family: var(--mono); letter-spacing: .04em; text-transform: uppercase; margin-top: 3px; }
.kpi.ok .kpi-v { color: var(--ok); } .kpi.warn .kpi-v { color: var(--accent-dark); } .kpi.accent .kpi-v { color: #6d3fc0; }
.fin-bar { font-size: 12.5px; }
.fb-label { display: flex; justify-content: space-between; margin-bottom: 4px; }
.fb-track { height: 12px; background: #e9e9e4; border-radius: 99px; overflow: hidden; }
.fb-fill { height: 100%; border-radius: 99px; transition: width .3s ease; min-width: 2px; }
@media (max-width: 1000px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }

/* ── LV-Tab (Projektseite): Positionen, Mengen, Bestell-Balken ── */
.lv-filter { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; font-size: 12.5px; }
.lv-filter input[type="search"] { padding: 7px 10px; border: 1px solid var(--line-2, #ddd); border-radius: 8px; font: inherit; }
.lv-filter .btn.active, .lv-pos .btn.active { background: var(--ink, #222); color: var(--paper, #fff); border-color: var(--ink, #222); }
.lv-summary { display: flex; align-items: center; gap: 18px; }
.lv-summary-text { min-width: 0; }
.lv-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lv-section { font-weight: 700; font-size: 13.5px; margin: 14px 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: baseline; }
.lv-pos { padding: 9px 0 10px; border-bottom: 1px solid var(--line-2, #eee); }
.lv-pos:last-child { border-bottom: none; }
.lv-pos-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lv-pos-title { flex: 1 1 260px; min-width: 0; font-size: 13.5px; }
.lv-oz { font-family: var(--mono); font-size: 11px; color: var(--muted); min-width: 64px; }
.lv-qty { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 13.5px; }
.lv-langtext { margin: 8px 0 2px 74px; padding: 8px 12px; background: var(--card-2, #f5f5f1); border-radius: 8px; font-size: 12.5px; color: var(--ink-2, #444); white-space: pre-wrap; max-width: 860px; }
.lv-bars { display: grid; grid-template-columns: 1fr; gap: 8px 18px; margin: 7px 0 0 74px; max-width: 620px; }
.lv-bar { font-size: 11.5px; }
.lv-bar .fb-track { height: 9px; }
.lv-bookings { margin: 6px 0 0 74px; font-size: 12px; }
.lv-bookings summary { cursor: pointer; color: var(--muted); }
.lv-bk-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; flex-wrap: wrap; }
.lv-bk-art { font-family: var(--mono); font-size: 10px; text-transform: uppercase; border-radius: 4px; padding: 1px 6px; background: #f0e7d2; color: #8a6a1e; }
.lv-bk-art.verbaut { background: #e2efe4; color: #2f6b3f; }
@media (max-width: 800px) {
  .lv-bars, .lv-langtext, .lv-bookings { margin-left: 0; }
  .lv-bars { grid-template-columns: 1fr; }
  .lv-oz { min-width: 0; }
}
/* Klickbares Status-Badge im Projektkopf */
.status-control { position: relative; display: inline-block; }
.status-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: #fff; border-radius: 99px; padding: 4px 12px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; color: var(--ink); }
.status-chip:hover { border-color: var(--sage); background: var(--card-2); }
.sc-caret { font-size: 10px; color: var(--muted); }
.status-menu { position: absolute; top: calc(100% + 5px); left: 0; z-index: 50; background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 10px 28px rgba(0,0,0,.14); padding: 6px; min-width: 240px; display: none; }
.status-menu.open { display: block; }
.sc-head { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 4px 8px 6px; }
.sc-opt { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 7px; font-size: 13px; cursor: pointer; font-family: inherit; color: var(--ink); }
.sc-opt:hover { background: #f2f2ee; }
.sc-opt.on { background: var(--accent-soft); font-weight: 600; }
.sc-opt.auto { color: var(--muted); border-top: 1px solid var(--line); margin-top: 4px; }
.finalize-btn { background: var(--ok); border-color: var(--ok); color: #fff; }
.finalize-btn:hover { background: #176e3b; border-color: #176e3b; color: #fff; }
.save-status { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.save-status.dirty { color: var(--warn); }
.save-status.saved { color: var(--ok); }
.tb-sep { width: 1px; background: var(--line); align-self: stretch; margin: 0 4px; }

/* Items-Kopf/Fuß mit Hinzufügen */
/* wrap auch am Desktop: die Knopfleiste (＋ Titel/＋ Position/…) ist ~530 px breit und
   zwang die Karte sonst in den Horizontal-Scroll, sobald die Bibliothek offen ist
   (letzter 36-px-Treiber des Laptop-Fits, Messung 10.08.). */
.items-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.items-add { display: flex; gap: 8px; flex-wrap: wrap; }
.items-foot { display: flex; gap: 10px; margin-top: 10px; }
.btn.add-wide { flex: 1; border-style: dashed; color: var(--muted); font-weight: 600; padding: 10px; }
.btn.add-wide:hover { border-style: solid; border-color: var(--accent); color: var(--accent-dark); background: #fdf3f4; }

/* Hover-Einfügepunkt zwischen Zeilen (Notion-artig) */
.insert-row td { padding: 0 !important; border: 0 !important; background: transparent !important; }
.insert-line { height: 6px; position: relative; display: flex; align-items: center; gap: 6px; justify-content: center; opacity: 0; transition: opacity .12s ease, height .12s ease; overflow: hidden; }
.insert-row:hover .insert-line { opacity: 1; height: 28px; }
.insert-line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--accent); opacity: .4; }
.insert-btn { position: relative; z-index: 1; border: 1px solid var(--accent); background: #fff; color: var(--accent-dark);
  border-radius: 99px; padding: 2px 12px; font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: var(--sans); }
.insert-btn:hover { background: var(--accent); color: #fff; }
.insert-btn.alt { border-color: var(--ink-2); color: var(--ink-2); }
.insert-btn.alt:hover { background: var(--ink); color: #fff; }

/* Leerzustand im Editor */
.editor-empty { text-align: center; padding: 34px 20px; }
.editor-empty .ee-title { font-weight: 700; font-size: 16px; }
.editor-empty .ee-sub { color: var(--muted); font-size: 13px; margin: 6px auto 16px; max-width: 460px; }
.editor-empty .ee-actions { display: flex; gap: 10px; justify-content: center; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  background: var(--ink); color: #fff; padding: 11px 16px; border-radius: var(--radius-sm);
  display: flex; align-items: center; gap: 14px; font-size: 13.5px; font-weight: 500;
  box-shadow: 0 8px 30px rgba(0,0,0,.28); opacity: 0; pointer-events: none; z-index: 80;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast-undo { background: none; border: 1px solid #555; color: #fff; border-radius: 5px; padding: 4px 12px; font-weight: 700; cursor: pointer; font-family: var(--sans); }
.toast-undo:hover { background: var(--accent); border-color: var(--accent); }

/* ── Modal ──────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(22, 24, 29, .45); z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  background: var(--card); border-radius: 12px; padding: 20px 22px; width: 560px; max-width: 100%;
  max-height: 88vh; overflow: auto; box-shadow: 0 18px 50px rgba(0,0,0,.3);
}
.modal h2 { margin: 0 0 14px; font-size: 17px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.form-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.form-field > span { font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: .03em; }
/* Checkbox-Zeile im Formular (z. B. „Mit LV") — unten im Grid-Feld ausgerichtet */
.form-field.cb-field { flex-direction: row; align-items: center; gap: 9px; align-self: end; padding-bottom: 9px; }
.form-field.cb-field input { width: 17px; height: 17px; flex: none; accent-color: var(--accent); padding: 0; }
.form-field.cb-field > span { font-size: 13px; font-weight: 600; color: var(--ink-2); letter-spacing: 0; text-transform: none; }
.form-field input, .form-field select {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; font-size: 13.5px;
  font-family: inherit; background: #fafaf7; color: var(--ink);
}
.form-field input:focus, .form-field select:focus { outline: 2px solid var(--cyan); border-color: transparent; }
/* Mehrzeilige Freitexte (Einleitungs-/Schlusstext) stehen teils in einer schlichten
   .card ohne .editor-head — dort trug die Formatierung fuer Eingabefelder bisher nicht
   und das Feld erschien in nackter Browser-Darstellung (padding 2px, kein Rahmen,
   nicht volle Breite). Gemessen im Rechnungs- und im Angebots-Editor am 07.08.2026. */
.form-field textarea {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; font-size: 13.5px;
  font-family: inherit; background: #fafaf7; color: var(--ink); width: 100%; resize: vertical;
}
.form-field textarea:focus { outline: 2px solid var(--cyan); border-color: transparent; }
.modal input, .modal select, .modal textarea {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; font-size: 13.5px;
  font-family: inherit; background: #fafaf7;
}
.modal input:focus, .modal select:focus, .modal textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
.modal-actions { display: flex; gap: 8px; margin-top: 14px; }
.import-zone { border: 1px dashed var(--line-2); padding: 18px; text-align: center; margin-top: 6px; }
/* GAEB-Import: Ablagezone fuers Ziehen + Liste der gewaehlten Dateien (05.08.2026) */
.gaeb-drop { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 20px 18px;
  border: 2px dashed var(--border); border-radius: 12px; cursor: pointer; background: var(--surface);
  transition: border-color .12s, background .12s; }
.gaeb-drop:hover { border-color: var(--cyan); }
.gaeb-drop.ueber { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, transparent); }
.gaeb-drop-icon { font-size: 26px; line-height: 1; opacity: .55; }
.gaeb-drop-text strong { display: block; font-size: 14.5px; }
.gaeb-gewaehlt { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.gaeb-zeile { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border); font-size: 13.5px; }
.gaeb-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gaeb-rolle { flex: none; font-size: 11.5px; padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--fg, #333) 10%, transparent); }
.gaeb-rolle.struktur { background: color-mix(in srgb, var(--cyan) 22%, transparent); }
.gaeb-rolle.preise { background: color-mix(in srgb, var(--ok, #16a34a) 22%, transparent); }
/* Herkunft je gewaehlter Datei (07.08.2026): liegt sie im Projektordner DIESES
   Projekts? Weicher Hinweis gegen das versehentlich importierte LV eines anderen
   Projekts — den Pfad kennt der Browser nicht, nur den Dateinamen. */
.gaeb-herkunft { flex: none; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.gaeb-herkunft.ok { background: color-mix(in srgb, var(--ok, #16a34a) 18%, transparent); }
.gaeb-herkunft.fremd { background: color-mix(in srgb, var(--warn, #d97706) 26%, transparent); font-weight: 600; }
.import-file .gaeb-rolle { margin: 0 6px; }

.import-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: auto; }
.import-file {
  display: flex; align-items: center; gap: 8px;
  text-align: left; border: 1px solid var(--line); background: #fff; padding: 8px 11px;
  font-size: 13px; font-family: var(--mono); cursor: pointer; border-radius: 0;
}
.import-file:hover { border-color: var(--cyan); color: var(--cyan); }
.import-file input { cursor: pointer; }
.slot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
@media (max-width: 640px) { .slot-grid { grid-template-columns: 1fr; } }
.slot { border: 1px solid var(--line); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.slot-head { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.slot-name { font-size: 12px; color: var(--muted); font-family: var(--mono); word-break: break-all; }
.slot-name.set { color: var(--ok); }
.conflict-list { max-height: 300px; overflow: auto; border: 1px solid var(--line); margin-top: 6px; }
.conflict-list table { font-size: 12.5px; }
.conflict-list th { position: sticky; top: 0; background: #fff; }
.photo-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.photo-strip img { width: 86px; height: 86px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }

/* Fotos & Anhänge — ein Aussehen für Bericht, Projekt-Notiz und Aufgaben
   (Auftrag Niklas 07.08.2026: „es muss konsistent sein"). Bild = Thumbnail wie im
   Notiz-Dialog (86 px), Dokument = Kachel mit Icon + Name in gleicher Höhe. */
.anh-box { margin-top: 10px; }
.anh-label { font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: .03em; margin-bottom: 6px; }
.anh-strip { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; min-height: 20px; }
.anh-strip .anh-leer { font-size: 12.5px; }
.anh-item {
  position: relative; display: block; width: 86px; height: 86px; border: 1px solid var(--line);
  border-radius: 8px; overflow: hidden; background: var(--card); text-decoration: none; flex: none;
}
.anh-item:hover { border-color: var(--accent); }
.anh-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anh-item.anh-datei { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; }
.anh-item .anh-ico { font-size: 22px; line-height: 1; }
.anh-item .anh-name {
  font-size: 10.5px; color: var(--muted); text-align: center; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word;
}
.anh-item .anh-del {
  position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; line-height: 20px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(27, 23, 20, .62); color: #fff; font-size: 12px;
  cursor: pointer; opacity: 0; transition: opacity .15s;
}
.anh-item:hover .anh-del, .anh-item .anh-del:focus-visible { opacity: 1; }
.anh-item .anh-del:hover { background: var(--danger, #b42318); }
.anh-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
/* Variante mit Bildunterschrift (Bericht): Kachel + Nummer + Textfeld untereinander,
   Spaltenbreite so, dass drei nebeneinander in eine Editor-Karte passen. */
.anh-strip.mit-text { gap: 12px; }
.anh-wrap { width: 168px; display: flex; flex-direction: column; gap: 4px; }
.anh-wrap .anh-item { width: 168px; height: 118px; }
.anh-wrap .anh-nr { font-size: 11px; font-weight: 700; color: var(--muted); }
.anh-wrap .anh-text {
  width: 100%; font: inherit; font-size: 12.5px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink);
}
.anh-wrap .anh-text:focus { outline: 2px solid var(--cyan); border-color: transparent; }

/* Bericht-Editor: Abschnitte, Punkte-Tabelle und die Markdown-Vorschau.
   Die Vorschau zeigt genau das, was das PDF daraus macht — darum dieselben
   Abstände/Gewichte wie im Druck-Template, nur in App-Typografie. */
.abschnitt-block { margin-bottom: 12px; }
.abschnitt-block > div:first-child { margin-bottom: 6px; }
.abschnitt-block > div:first-child input { flex: 1; font-weight: 700; }
.md-vorschau {
  margin-top: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card-2, #fafaf7); font-size: 13.5px; line-height: 1.55;
}
.md-vorschau > :first-child { margin-top: 0; }
.md-vorschau > :last-child { margin-bottom: 0; }
.md-vorschau p { margin: 0 0 9px; }
.md-vorschau h1, .md-vorschau h2, .md-vorschau h3, .md-vorschau h4 { font-size: 13.5px; font-weight: 700; margin: 14px 0 4px; }
.md-vorschau ul, .md-vorschau ol { margin: 0 0 9px; padding-left: 20px; }
.md-vorschau li { margin-bottom: 3px; }
.md-vorschau blockquote { margin: 9px 0; padding: 7px 11px; background: var(--line-1, #f0efec); border-left: 3px solid var(--muted); }
.md-vorschau hr { border: 0; border-top: 1px solid var(--line); margin: 11px 0; }
.md-vorschau code { font-family: inherit; font-weight: 700; }
/* Punkte-Tabelle: die Eingabefelder sollen die Spalte füllen, Nr./Aktion schmal */
.punkte-table { table-layout: fixed; width: 100%; }
.punkte-table th:nth-child(1), .punkte-table td:nth-child(1) { width: 34px; }
.punkte-table th:nth-child(4), .punkte-table td:nth-child(4) { width: 130px; }
.punkte-table th:nth-child(5), .punkte-table td:nth-child(5) { width: 148px; }
.punkte-table th:nth-child(6), .punkte-table td:nth-child(6) { width: 120px; }
.punkte-table th:nth-child(7), .punkte-table td:nth-child(7) { width: 44px; }
.punkte-table input { width: 100%; }
@media (max-width: 900px) {
  .punkte-table, .punkte-table thead, .punkte-table tbody, .punkte-table tr, .punkte-table td, .punkte-table th { display: block; width: auto; }
  .punkte-table thead { display: none; }
  .punkte-table tr { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px; margin-bottom: 8px; }
  .punkte-table td { width: auto !important; padding: 3px 0; }
}
/* Touch: kein Hover — Löschkreuz und Knöpfe dauerhaft groß genug */
@media (max-width: 860px) {
  .anh-item .anh-del { opacity: 1; width: 30px; height: 30px; line-height: 28px; font-size: 15px; }
}

/* Mobile */
@media (max-width: 860px) {
  .shell { flex-direction: column; }
  /* Seitenleiste wird zum ausklappbaren Drawer von links (Hamburger steuert) */
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: 272px; max-width: 84vw;
    flex: none; transform: translateX(-100%); transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    z-index: 65; border-right: 1px solid var(--line); border-bottom: 0;
    box-shadow: 0 0 44px rgba(27, 23, 20, .24); overflow-y: auto;
  }
  .shell.nav-open .sidebar { transform: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    position: fixed; top: 9px; left: 10px; z-index: 70; width: 44px; height: 40px;
    border: 0; border-radius: 10px; background: var(--ink); color: #fff; font-size: 18px;
    cursor: pointer; box-shadow: 0 4px 14px rgba(27, 23, 20, .28);
  }
  .shell.nav-open .nav-toggle { background: var(--accent); }
  .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 64; background: rgba(27, 23, 20, .42);
    opacity: 0; pointer-events: none; transition: opacity .26s ease;
  }
  .shell.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  .brand { padding: 26px 20px 14px; }
  .brand-logo { width: 78%; max-height: none; }
  .brand-sub { margin-top: 12px; }
  .nav { flex-direction: column; flex-wrap: nowrap; gap: 1px; padding: 10px 12px; }
  .nav a { border-left: 0; border-bottom: 0; padding: 11px 12px; font-size: 14.5px; }
  .nav a.active { border-bottom: 0; }
  .nav a.active::before { display: block; }
  .sidebar-foot { display: none; }
  .main { padding: 60px 14px 50px; }
  .main > *:not(.hero) { margin-left: 6px; margin-right: 6px; }
  .kv { grid-template-columns: 1fr; }
  /* Hero auf dem Handy: kompakter, nicht abgeschnitten */
  .hero { padding: 30px 18px 0; margin-bottom: 24px; }
  .hero h1 { font-size: 30px; max-width: 100%; }
  .hero .hero-sub { font-size: 14.5px; max-width: 100%; }
  .hero-stats { margin-top: 24px; gap: 0 22px; }
  .hero-stat { padding: 14px 0 16px; margin-right: 0; flex: 0 0 calc(50% - 11px); }
  .hero-stat .hs-v { font-size: 23px; }
  /* Seitenkopf kompakter */
  .page-head h1 { font-size: 26px; }
  .page-sub { font-size: 13.5px; }
  /* Tabellen horizontal scrollbar machen statt zu quetschen */
  .table-wrap, .section > table.data { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.data { min-width: 560px; }
  /* Karten-Grids einspaltig */
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  /* Zahlen sollen nicht aus den Kacheln laufen: kleiner + sauber umbrechen */
  .kpi, .kpi-row .kpi, .fin-kpis .kpi { min-width: 0; overflow: hidden; }
  .kpi .v, .fin-kpis .kpi .v { font-size: 18px; }
  .kpi-v { font-size: 16px; }
  .hero-stat .hs-v { font-size: 20px; }
  .ertrags-box .eb-v { font-size: 30px; }
  .kpi .v, .kpi-v, .hs-v, .eb-v, .money { overflow-wrap: anywhere; }
  /* Baustellen-Liste am Handy: Status weg, Preis (fakturiert/offen) bleibt, kein Querscrollen */
  table.data.baustellen-table { min-width: 0; }
  .baustellen-table th:nth-child(2), .baustellen-table td:nth-child(2),
  .baustellen-table th:nth-child(3), .baustellen-table td:nth-child(3),
  .baustellen-table th:nth-child(4), .baustellen-table td:nth-child(4),
  .baustellen-table th:nth-child(6), .baustellen-table td:nth-child(6),
  .baustellen-table th:nth-child(8), .baustellen-table td:nth-child(8) { display: none; }
}

/* ── Aufgaben / ToDo-Liste je Projekt ── */
.task-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.task-input {
  flex: 1; min-width: 240px; padding: 9px 11px; font: inherit; font-size: 14px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
}
.task-input:focus { outline: none; border-color: var(--accent); }
.task-counter { display: block; font-size: 12px; color: var(--muted); font-weight: 600;
  font-family: var(--mono, monospace); text-transform: uppercase; letter-spacing: .04em; margin: 4px 0 12px; }
.task-list { display: flex; flex-direction: column; gap: 4px; max-width: 760px; }
.task-row {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  border: 1px solid var(--line); background: #fff; cursor: pointer;
}
.task-row:hover { border-color: var(--ink); }
.task-row input[type="checkbox"] { width: 17px; height: 17px; flex: none; cursor: pointer; accent-color: var(--accent); }
.task-text { flex: 1; font-size: 14px; line-height: 1.35; word-break: break-word; }
.task-row.done .task-text { text-decoration: line-through; color: var(--muted); }
.task-del {
  flex: none; border: 0; background: none; color: var(--muted); font-size: 15px; line-height: 1;
  cursor: pointer; padding: 2px 6px; opacity: 0; transition: opacity .12s;
}
.task-row:hover .task-del { opacity: 1; }
.task-del:hover { color: var(--warn, #c01622); }

/* Überschrift + aufklappbarer Langtext (Niklas 30.07.2026).
   .task-item klammert Zeile + Panel; .task-caret ist gefüllt/akzentfarben, wenn ein
   Langtext hinterlegt ist — so sieht man vor dem Klick, wo mehr drinsteckt. */
.task-item { display: block; }
.task-title { cursor: pointer; }
.task-caret {
  display: inline-block; width: 12px; flex: none; margin-right: 3px;
  color: var(--muted); font-size: 11px; line-height: 1; user-select: none;
}
.task-caret.has { color: var(--accent); font-weight: 700; }
.task-title:hover .task-caret { color: var(--ink); }
.task-details {
  margin: 2px 0 8px 30px; padding: 10px 12px; max-width: 760px;
  border-left: 2px solid var(--accent); background: var(--card-2, #f7f6f3);
}
.task-details-text { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.task-details-empty { margin: 0; font-size: 13px; color: var(--muted); font-style: italic; }
.task-details-label { font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.task-details-input {
  width: 100%; box-sizing: border-box; padding: 8px 10px; font: inherit; font-size: 13.5px;
  line-height: 1.45; border: 1px solid var(--line); background: #fff; color: var(--ink); resize: vertical;
}
.task-details-input:focus { outline: none; border-color: var(--accent); }
.task-details-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
html.dark .task-details { background: rgba(255,255,255,.04); }
html.dark .task-details-input { background: var(--card-2); color: var(--ink); border-color: var(--line-2); }
@media (max-width: 700px) { .task-details { margin-left: 8px; } }

/* ── Foto-Markup & Drag&Drop (Pläne & Tickets) ── */
/* Bild als Markup-Fläche: Stage umschließt das Bild, Pin-Layer deckt es exakt ab */
.plan-stage.image-mode { display: block; flex: 1 1 auto; max-width: 100%; overflow: visible; }
.plan-image { display: block; width: 100%; height: auto; }
.plan-stage.image-mode .pin-layer { inset: 0; width: 100%; height: 100%; }
/* Direkt-Setzen: Markup-Fläche signalisiert „hier tippen" */
.plan-stage.place-mode { cursor: crosshair; }
.place-hint {
  font-size: 12.5px; font-weight: 700; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 99px; padding: 5px 12px;
}
/* Angehängtes Foto groß im Ticket (beim Öffnen eines bestehenden Tickets) */
.photo-focus { display: flex; flex-direction: column; gap: 10px; }
.photo-focus img {
  width: 100%; max-height: 52vh; height: auto; object-fit: contain;
  border-radius: 8px; border: 1px solid var(--line); background: #faf9f7;
}

/* Ticket-Auswahlleiste (Bericht aus Auswahl erstellen) */
.ticket-selbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
/* Ticket-Zeile mit Häkchen (neueste oben) */
.ticket-line {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--line); background: #fff; cursor: pointer; margin-bottom: 5px;
}
.ticket-line:hover { border-color: var(--accent); }
.ticket-line .tl-check { display: flex; align-items: center; flex: none; }
.ticket-line .tl-check input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent); }
.ticket-line .tl-main { flex: 1; min-width: 0; }
.ticket-line .tl-title { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.ticket-line .tl-title strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket-line .tl-meta { color: var(--muted); font-size: 12px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket-line .tl-date { color: var(--muted); font-size: 11.5px; font-family: var(--mono, monospace); flex: none; }
.ticket-line .tl-del { flex: none; padding: 4px 9px; font-size: 13px; }
@media (hover: none) { .ticket-line .tl-check input { width: 22px; height: 22px; } }

/* Zugeordnete Tickets im Bericht-Editor (Vorschau, kommt so ins PDF) */
.report-tickets { display: flex; flex-direction: column; gap: 12px; }
.rt-item { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #fff; }
.rt-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rt-head strong { font-size: 13.5px; }
.rt-tag { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.rt-meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.rt-desc { font-size: 13px; line-height: 1.45; margin-top: 6px; white-space: pre-line; }
.rt-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rt-photos img { width: 130px; height: 100px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }

/* Drop-Zone */
.markup-drop {
  border: 2px dashed var(--line); border-radius: var(--radius); background: #fafafa;
  padding: 16px 18px; text-align: center; color: var(--muted); font-size: 13.5px;
  margin: 0 0 14px; transition: border-color .12s, background .12s;
}
.markup-drop.drag { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.markup-drop .md-hint strong { color: var(--ink); }

/* Foto-Galerie */
.foto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.foto-card { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; cursor: pointer; }
.foto-card:hover { border-color: var(--accent); }
.foto-card img { width: 100%; height: 120px; object-fit: cover; display: block; pointer-events: none; }
.foto-card .fc-foot { display: flex; gap: 6px; align-items: center; justify-content: space-between; padding: 6px 8px; }
.foto-card .fc-name { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foto-card .fc-btn { font-size: 11.5px; padding: 4px 9px; white-space: nowrap; }
/* Foto entfernen: sitzt oben rechts auf dem Bild, dunkle Scheibe, damit er auf
   hellen wie dunklen Fotos sichtbar bleibt. Die Kachel braucht dafür position. */
.foto-card { position: relative; }
.foto-card .fc-del {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(17, 17, 17, .55); color: #fff;
  font-size: 14px; line-height: 28px; text-align: center; cursor: pointer;
  opacity: 0; transition: opacity .12s ease, background .12s ease;
}
.foto-card:hover .fc-del, .foto-card .fc-del:focus-visible { opacity: 1; }
.foto-card .fc-del:hover { background: var(--danger, #b42318); }

/* Touch: größere Pins, leichter zu treffen; Modal füllt den Schirm */
@media (hover: none) {
  .pin { width: 34px; height: 34px; }
  .pin span { font-size: 14px; }
  .foto-card .fc-btn { padding: 7px 11px; font-size: 13px; }
  /* Am Handy gibt es kein Hover — der Button ist dauerhaft sichtbar und daumengroß */
  .foto-card .fc-del { opacity: 1; width: 34px; height: 34px; line-height: 34px; font-size: 16px; }
}
@media (max-width: 640px) {
  .modal { width: 100%; max-width: 100%; border-radius: 0; max-height: 92vh; }
  .modal .form-grid { grid-template-columns: 1fr; }
}

/* ── Offene Rechnungen ── */
.invoices-open .pay-check { display: inline-flex; }
.invoices-open .pay-check input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--ok); }
.days-badge { font-weight: 700; font-size: 12px; font-family: var(--mono, monospace); padding: 2px 8px; border-radius: 99px; background: #eef0f2; color: var(--ink-2); }
.days-badge.warn { background: #fdf0d8; color: #9a6a00; }
.days-badge.danger { background: #fde0e0; color: var(--danger, #c01622); }
.pc-details { margin-top: 10px; }
.pc-details summary { cursor: pointer; font-size: 12.5px; color: var(--ink-2); font-weight: 600; padding: 4px 0; }
.pc-details summary:hover { color: var(--accent); }
.inv-wrap { overflow-x: auto; }
/* 9 Spalten (seit 12.08. auch die Rechnungsnummer): mit dem Standard-Padding von 10 px
   scrollte die Aktions-Spalte am 1440er-Monitor aus dem Bild. „table.data" mit davor,
   sonst verliert die Regel gegen deren Shorthand-Padding (Spezifität). */
table.data.inv-table th, table.data.inv-table td { padding-left: 7px; padding-right: 7px; }
/* Rechnungen am Handy: Tabelle wird zu Karten, Summe sofort & groß sichtbar (kein Querscrollen) */
@media (max-width: 860px) {
  .inv-wrap { overflow-x: visible; }
  table.data.inv-table { min-width: 0; }
  .inv-table thead { display: none; }
  .inv-table, .inv-table tbody { display: block; width: 100%; }
  .inv-table tr {
    display: block; border: 1px solid var(--line); border-radius: 11px;
    background: var(--card); box-shadow: var(--shadow-soft); padding: 13px 15px; margin-bottom: 11px;
  }
  .inv-table td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    border: 0; padding: 5px 0; font-size: 14.5px; white-space: normal;
  }
  .inv-table td::before {
    content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 600;
    font-family: var(--mono); letter-spacing: .02em; flex: none;
  }
  .inv-table td.inv-name { display: block; padding: 0 0 9px; margin-bottom: 5px; border-bottom: 1px solid var(--line); }
  .inv-table td.inv-name::before { display: none; }
  .inv-table td.inv-name > div:first-child { font-size: 16.5px; }
  .inv-table td.inv-gross { font-size: 19px; font-weight: 700; padding-top: 7px; }
  .inv-table td.inv-gross::before { font-size: 13px; align-self: center; }
}

/* ── Einsatzplanung / Plantafel ── */
.plan-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0 14px; }
.plan-toolbar .week-label { font-size: 14px; margin-left: 6px; }
.plan-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.plantafel { border-collapse: collapse; width: 100%; min-width: 880px; }
.plantafel th, .plantafel td { border: 1px solid var(--line); vertical-align: top; }
.plantafel thead th { background: #f4f3ef; padding: 7px 8px; font-size: 12px; text-align: center; position: sticky; top: 0; z-index: 2; }
.plantafel thead th.today, .plantafel td.today { background: #f2ead7; }
.plantafel thead th .dow { font-weight: 800; display: block; }
.plantafel thead th .dom { color: var(--muted); font-size: 11px; font-family: var(--mono, monospace); }
.plantafel .emp-col { text-align: left; width: 190px; min-width: 170px; padding: 8px 10px; position: sticky; left: 0; background: #faf9f7; z-index: 1; }
.plantafel thead .emp-col { z-index: 3; background: #f0efe9; }
.plantafel .emp-col strong { font-size: 13px; }
.plantafel .emp-role { color: var(--muted); font-size: 11px; }
.plan-cell { padding: 4px; min-width: 96px; cursor: default; }
.plan-cell .cell-add { opacity: 0; text-align: center; color: var(--muted); font-size: 14px; cursor: pointer; padding: 2px; border-radius: 4px; }
.plan-cell:hover .cell-add { opacity: 1; }
.plan-cell .cell-add:hover { background: var(--accent-soft); color: var(--accent); }
.asg-chip { display: block; padding: 5px 7px; border-radius: 5px; margin-bottom: 3px; cursor: pointer; font-size: 12px; line-height: 1.25; border: 1px solid transparent; }
.asg-chip.proj { background: #e7eaf0; color: var(--brand-blue); }
.asg-chip.status { background: #f0ece4; color: #6a5a3a; }
.asg-chip:hover { border-color: var(--accent); }
.asg-chip .asg-label { font-weight: 700; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asg-chip .asg-note { color: var(--muted); font-size: 11px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asg-select { width: 100%; }
/* Mitarbeiter verwalten */
.emp-add { display: flex; gap: 8px; margin-bottom: 12px; }
.emp-add input { flex: 1; padding: 8px 10px; border: 1px solid var(--line); font: inherit; }
.emp-manage { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; }
.emp-row { display: flex; gap: 8px; align-items: center; }
.emp-row input[type="checkbox"] { width: 17px; height: 17px; flex: none; accent-color: var(--accent); }
.emp-row input[type="text"] { flex: 1; padding: 6px 9px; border: 1px solid var(--line); font: inherit; }
.emp-row.inactive input[type="text"] { color: var(--muted); text-decoration: line-through; }
.plan-modebar { margin: 4px 0 10px; }

/* ── Langfrist: Projekt-Zeitleiste (Gantt) ── */
.gantt-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.gantt { min-width: max-content; }
.gantt-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
.gantt-row:last-child { border-bottom: 0; }
.gantt-label {
  width: 230px; min-width: 230px; padding: 8px 10px; box-sizing: border-box;
  position: sticky; left: 0; background: #faf9f7; border-right: 1px solid var(--line); z-index: 1;
}
.gantt-label strong { font-size: 13px; cursor: pointer; }
.gantt-label strong:hover { color: var(--accent); }
.gantt-sub { color: var(--muted); font-size: 11px; font-family: var(--mono, monospace); margin-top: 2px; }
.gantt-track { position: relative; flex: none; }
.gantt-head .gantt-label, .gantt-weeks .gantt-label { background: #f0efe9; }
.gantt-head { position: sticky; top: 0; z-index: 4; }
.gantt-month { display: inline-block; box-sizing: border-box; border-right: 1px solid var(--line); padding: 6px 8px; font-weight: 800; font-size: 12px; background: #f0efe9; }
.gantt-weeks .gantt-wk {
  display: inline-block; box-sizing: border-box; border-right: 1px solid #eee; text-align: center;
  font-size: 9.5px; color: var(--muted); padding: 3px 0; font-family: var(--mono, monospace);
}
.gantt-weeks .gantt-wk.today { background: #f2ead7; color: var(--accent); font-weight: 700; }
.gantt-row .gantt-track { background: repeating-linear-gradient(to right, transparent 0, transparent 45px, #f0f0ee 45px, #f0f0ee 46px); }
.gantt-bar {
  position: absolute; top: 8px; height: 26px; background: var(--brand-blue); color: #fff; border-radius: 5px;
  display: flex; align-items: center; padding: 0 8px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.2);
  font-size: 11.5px; font-weight: 700; overflow: hidden;
}
.gantt-bar:hover { background: var(--accent); }
.gantt-bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-off { position: absolute; top: 12px; left: 8px; font-size: 11px; color: var(--muted); cursor: pointer; }
.gantt-row:not(.gantt-head):not(.gantt-weeks) { min-height: 42px; }

/* ── Financial-Cockpit Politur ── */
.chart .grid { stroke: #ececea; stroke-width: 1; }
.lg-line { display: inline-block; width: 18px; height: 0; border-top: 2.5px dashed #9aa0a8; margin-right: 7px; vertical-align: middle; }
.lg-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: middle; }
/* Bezahlt-Fortschrittsbalken auf Projektebene */
.pay-bar { height: 8px; border-radius: 99px; background: var(--card-2); overflow: hidden; margin: 10px 0 2px; }
.pay-fill { height: 100%; background: var(--pos); border-radius: 99px; }

/* Finanz-Kopfzeile */
.fin-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; }
.fin-head h2 { font-family: var(--serif); font-size: 25px; font-weight: 600; letter-spacing: -.01em; text-transform: none; color: var(--ink); }

/* KPI-Kacheln (Finanz): ruhig, ohne harte Farbstreifen — nur die Zahl trägt Farbe */
.fin-kpis { gap: 12px; margin: 0 0 10px; }
.fin-kpis .kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 17px; }
.fin-kpis .kpi:hover { border-color: var(--line-2); transform: translateY(-1px); }
.fin-kpis .kpi .v { font-size: 21px; letter-spacing: -.015em; }
.fin-kpis .kpi .l { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.kpi.pos .v { color: var(--pos); }
.kpi.neg .v { color: var(--neg); }
.kpi.neutral .v { color: var(--ink); }
.kpis .kpi.pos, .kpis .kpi.neg, .kpis .kpi.neutral { position: relative; overflow: hidden; }

/* Karten im Finanzteil: weicher, mehr Luft */
.grid-2 > .card, .card.prognose { background: var(--card); border-radius: var(--radius-lg); border-color: var(--line); }
.card.prognose { background: linear-gradient(180deg, #fdfcf9, var(--card)); }
.card .card-h { font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.page-sub.note { font-size: 11.5px; line-height: 1.6; color: var(--muted); }

/* Legenden horizontal & ruhig */
.chart-legend.row, .card .chart-legend { flex-direction: row; flex-wrap: wrap; gap: 16px; align-items: center; }
.chart-legend.row div, .card .chart-legend div { display: flex; align-items: center; font-size: 12px; color: var(--ink-2); }

/* Ertragslage-Box: die zentrale Profitabilitäts-Insight — Showpiece in Serif */
.ertrags-box { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: 16px; padding: 20px 22px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.ertrags-box .eb-main { display: flex; flex-direction: column; }
.ertrags-box .eb-v { font-family: var(--serif); font-size: 42px; font-weight: 600; letter-spacing: -.018em; line-height: 1.04; font-variant-numeric: tabular-nums; }
.ertrags-box .eb-v.pos { color: var(--pos); }
.ertrags-box .eb-v.neg { color: var(--neg); }
.ertrags-box .eb-l { font-size: 12px; color: var(--ink-2); font-weight: 600; margin-top: 7px; }
.ertrags-box .eb-l span { display: block; font-weight: 400; color: var(--muted); font-size: 11px; margin-top: 2px; }
.ertrags-box .eb-side { margin-left: auto; font-size: 12.5px; color: var(--ink-2); display: flex; flex-direction: column; gap: 6px; }
.ertrags-box .eb-side strong { font-family: var(--mono); color: var(--ink); }

/* Auftragsbestand-Transparenzzeile in der Prognose-Karte */
.orderbook-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 28px; margin-top: 12px; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.orderbook-row .ob-fig strong { font-family: var(--mono); font-size: 18px; font-weight: 600; color: var(--ink); margin-right: 7px; }
.orderbook-row .ob-fig span { font-size: 12px; color: var(--muted); }
.orderbook-row .ob-cov { flex-basis: 100%; font-size: 11.5px; margin-top: 2px; }
.orderbook-row .ob-cov .warn { color: var(--warn); font-weight: 600; }
.orderbook-row .ob-cov .ok { color: var(--ok); font-weight: 600; }
.orderbook-row .ob-cov .muted { color: var(--muted); }

/* Ø Monatssaldo unter dem Cashflow-Chart */
.avg-net { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.avg-net .an-main { display: flex; align-items: baseline; gap: 8px; }
.avg-net .an-v { font-family: var(--mono); font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.avg-net .an-v.pos { color: var(--pos); }
.avg-net .an-v.neg { color: var(--neg); }
.avg-net .an-l { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.avg-net .an-sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }

/* Auftragswert-Vorschlag auf der Projektseite */
.order-suggest { padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 4px; }
.order-suggest .os-line { font-size: 12.5px; color: var(--ink-2); margin: 2px 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.order-suggest .os-line strong { font-family: var(--mono); color: var(--ink); }
.btn-sm { padding: 3px 11px; font-size: 11px; border: 1px solid var(--line-2); background: var(--card); border-radius: var(--radius-sm); cursor: pointer; font-family: var(--mono); color: var(--ink-2); transition: border-color .15s ease, color .15s ease; }
.btn-sm:hover { border-color: var(--ink-2); color: var(--ink); }

/* Nachträge-Box (PDF-Scan aus den Projektakten) */
.nachtrag-box { border-left: 3px solid var(--gold); }
.nachtrag-list { display: flex; flex-direction: column; gap: 0; margin-top: 9px; }
.nachtrag-list .nt-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.nachtrag-list .nt-row:last-child { border-bottom: 0; }
.nachtrag-list .nt-row strong { font-family: var(--mono); color: var(--ink); }
.nachtrag-list .nt-row strong.muted { color: var(--muted); font-style: italic; font-weight: 400; }

/* DATEV-Beleg-Abgleich (Kockpit): Belege vs Bank */
.recon-head, .recon-row { display: grid; grid-template-columns: 1.4fr 1.1fr 1.1fr 0.7fr 1.8fr; gap: 12px; align-items: baseline; padding: 6px 0; }
.recon-head { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.recon-row { border-bottom: 1px solid var(--line); font-size: 13px; }
.recon-row:last-of-type { border-bottom: 0; }
.recon-row .rr-label { font-weight: 600; color: var(--ink); }
.recon-row .rr-beleg, .recon-row .recon-row .rr-bank { font-variant-numeric: tabular-nums; }
.recon-row .rr-bank { color: var(--muted); }
.recon-row .rr-cov { font-family: var(--mono); font-weight: 600; }
.recon-row .rr-cov.ok { color: var(--pos); }
.recon-row .rr-cov.warn { color: var(--warn); }
.recon-row .rr-note { font-size: 11px; color: var(--muted); }
@media (max-width: 760px) { .recon-head .rr-note, .recon-row .rr-note { display: none; } .recon-head, .recon-row { grid-template-columns: 1.4fr 1fr 1fr 0.6fr; } }

/* DATEV-Projektkarte (echte Buchhaltung je Projekt) */
.datev-card { border-left: 3px solid var(--sage); }
.kpi .kpi-sub { font-size: 9.5px; color: var(--muted); margin-top: 2px; font-family: var(--mono); letter-spacing: .02em; }

/* Aufklappbare Kosten-Zusammensetzung (Baustellen-Detail) */
.cost-break { border-bottom: 1px solid var(--line); }
.cost-break > summary { cursor: pointer; display: flex; align-items: baseline; gap: 12px; padding: 10px 2px; list-style: none; }
.cost-break > summary::-webkit-details-marker { display: none; }
.cost-break > summary::before { content: "▸"; color: var(--muted); font-size: 11px; }
.cost-break[open] > summary::before { content: "▾"; }
.cost-break .cb-label { font-weight: 600; flex: 1; }
.cost-break .cb-sum { font-family: var(--mono); font-weight: 600; }
.cost-break .cb-sum.neg { color: var(--neg); }
.cost-break .cb-n { font-size: 11px; color: var(--muted); }
.cost-break .nachtrag-list { margin: 0 0 10px 18px; }

/* ── Benutzerkonten: Login-Auswahl, Konto-Chip ── */
.login-overlay {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(27, 23, 20, .42); backdrop-filter: blur(3px);
}
.login-card {
  width: 100%; max-width: 460px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 34px 32px 30px; box-shadow: var(--shadow-lift);
}
.login-brand { font-family: var(--mono); font-size: 10.5px; letter-spacing: .24em; color: var(--accent); margin-bottom: 16px; }
.login-h { font-family: var(--serif); font-size: 27px; font-weight: 600; margin: 0 0 4px; letter-spacing: -.01em; }
.login-sub { color: var(--muted); margin: 0 0 22px; font-size: 14px; }
.login-users { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.login-user {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 16px 16px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card-2); cursor: pointer; text-align: left; transition: border-color .15s, transform .12s, box-shadow .15s;
}
.login-user:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.login-ava {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff;
  font-weight: 700; font-size: 14px; letter-spacing: .02em; margin-bottom: 6px;
}
.login-ava.sm { width: 24px; height: 24px; font-size: 10.5px; margin: 0; }
.login-name { font-weight: 600; font-size: 16px; color: var(--ink); }
.login-role { font-size: 12px; color: var(--muted); font-family: var(--mono); letter-spacing: .03em; }

.account-slot { position: relative; margin-top: 16px; }
.account-chip {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card-2); cursor: pointer; color: var(--ink); font: inherit;
  transition: border-color .15s, background .15s;
}
.account-chip:hover { border-color: var(--line-2); background: var(--card); }
.account-name { font-weight: 600; font-size: 13.5px; flex: 1; text-align: left; }
.account-caret { color: var(--muted); font-size: 11px; }
.account-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: var(--shadow-lift); padding: 5px; overflow: hidden;
}
.account-menu-head { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 6px 9px 4px; }
.account-menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px;
  border: 0; background: none; cursor: pointer; color: var(--ink); font: inherit; font-size: 13.5px;
  border-radius: var(--radius-sm); text-align: left;
}
.account-menu-item:hover { background: var(--card-2); }
.account-menu-item.on { font-weight: 600; }
.account-cur { margin-left: auto; font-size: 10px; font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }

/* ── Pipeline: Karten-Menü (verschieben / öffnen) ── */
.card-menu .cm-sub { color: var(--muted); font-size: 13px; margin: 0 0 8px; }
.cm-next { width: 100%; justify-content: center; margin: 6px 0 4px; font-size: 14.5px; padding: 11px 14px; }
.cm-endnote { color: var(--muted); font-size: 13px; padding: 8px 0; font-style: italic; }
.cm-section-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 14px 0 7px; }
.stage-pick-grid { display: flex; flex-direction: column; gap: 5px; }
.stage-pick {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card-2);
  cursor: pointer; color: var(--ink); font: inherit; font-size: 13.5px; text-align: left;
  transition: border-color .14s, background .14s;
}
.stage-pick:hover:not(:disabled) { border-color: var(--accent); background: var(--card); }
.stage-pick:disabled { opacity: .55; cursor: default; }
.stage-pick.on { border-color: var(--line-2); font-weight: 600; }
.stage-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }

@media (max-width: 860px) {
  .account-slot { margin-top: 0; max-width: 220px; }
  .login-users { grid-template-columns: 1fr; }
}

/* ── Cockpit: Forderungen & Bank-Abgleich + einklappbare Analyse (Opus 2026-07-02) ── */
.forderungen .rec-note { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
  background: var(--card-2); border-left: 3px solid var(--ok); border-radius: var(--radius-sm); padding: 8px 11px; }
.mini-h { font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }

.confirm-queue { margin-top: 10px; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
.confirm-queue .cq-h { background: var(--accent-soft); color: var(--accent-dark); font-size: 12.5px; font-weight: 700; padding: 8px 12px; }
.cq-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--line); }
.cq-main { flex: 1; min-width: 0; }
.cq-t { font-weight: 700; font-size: 13.5px; display: flex; gap: 8px; align-items: baseline; }
.cq-rec { font-weight: 500; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cq-sub { font-size: 12px; color: var(--ink-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cq-why { font-size: 11.5px; color: var(--warn); font-weight: 600; max-width: 210px; text-align: right; flex-shrink: 0; }

details.collapse { margin-top: 8px; border-top: 1px solid var(--line); }
details.collapse > summary { cursor: pointer; list-style: none; padding: 11px 2px; font-size: 13px; font-weight: 700; color: var(--ink-2); display: flex; align-items: center; gap: 8px; user-select: none; }
details.collapse > summary::-webkit-details-marker { display: none; }
details.collapse > summary::before { content: "\203A"; display: inline-block; font-size: 18px; line-height: 1; color: var(--muted); transition: transform .15s ease; }
details.collapse[open] > summary::before { transform: rotate(90deg); }
details.collapse > summary:hover { color: var(--ink); }
.collapse-body { padding-bottom: 4px; }

@media (max-width: 860px) {
  .cq-row { flex-direction: column; align-items: flex-start; gap: 3px; }
  .cq-why { text-align: left; max-width: none; }
}

/* ── Cockpit: Prognose-Centerpiece (Opus 2026-07-02) ── */
/* 4 Kacheln seit 17.07.2026 („bisher" neben „Prognose", Wunsch Niklas) → Grid statt Flex-Gap,
   damit die Paare Umsatz|Ergebnis auf schmalen Fenstern sauber 2×2 umbrechen statt zu zerreißen. */
.forecast-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 28px; margin: 10px 0 14px; }
@media (max-width: 900px) { .forecast-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .forecast-figs { grid-template-columns: 1fr; } }
.forecast-figs .ff-v { font-family: var(--mono); font-size: 27px; font-weight: 600; letter-spacing: -.02em; line-height: 1.05; color: var(--ink); }
.forecast-figs .ff-v.pos { color: var(--pos); }
.forecast-figs .ff-v.neg { color: var(--neg); }
.forecast-figs .ff-l { font-size: 12.5px; color: var(--muted); margin-top: 5px; font-weight: 600; }
.forecast-sub { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.forecast-sub strong { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.forecast-sub strong.pos { color: var(--pos); }
.forecast-sub strong.neg { color: var(--neg); }
@media (max-width: 640px) { .forecast-figs { gap: 26px; } .forecast-figs .ff-v { font-size: 27px; } }

/* ── DATEV-Export-Ansicht (Opus 2026-07-03) ── */
.de-row { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.de-row label { font-size: 13px; color: var(--ink-2); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.de-date { font: inherit; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); }
.de-preview { min-height: 24px; margin: 6px 0 10px; }
.de-stat { font-size: 15px; color: var(--ink); }
.de-stat strong { font-family: var(--mono); font-size: 20px; font-weight: 600; }
.de-warn { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--warn); background: var(--card-2); border-left: 3px solid var(--warn); border-radius: var(--radius-sm); padding: 8px 11px; }
.de-ok { margin-top: 8px; font-size: 12.5px; color: var(--ok); font-weight: 600; }
.de-actions { margin: 12px 0 8px; }
.de-settings { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.de-settings strong { font-family: var(--mono); color: var(--ink-2); font-weight: 600; }

/* ── Mobile-Politur Projektansicht (Launch 2026-07-06): Tabs als sticky Pill-Leiste ── */
@media (max-width: 860px) {
  /* Projekt-Tabs: eine Zeile, seitlich wischbar, immer erreichbar (sticky) */
  .tabs {
    display: flex; flex-wrap: nowrap; gap: 8px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; border-bottom: 0;
    position: sticky; top: 0; z-index: 40;
    margin: 14px -6px; padding: 10px 6px;
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button {
    flex: 0 0 auto; white-space: nowrap;
    padding: 9px 15px; font-size: 13.5px;
    border: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
    border-radius: 999px; background: var(--card);
    min-height: 40px; /* Touch-Target */
  }
  .tabs button.active {
    background: var(--ink); color: var(--paper);
    border-color: var(--ink); font-weight: 600;
  }
  .tabs button.active .tcount { background: rgba(255, 255, 255, .18); color: var(--paper); }

  /* Projektkopf kompakter: Titel + Badges nicht zerfleddern */
  .detail-head h1 { font-size: 21px; line-height: 1.25; overflow-wrap: anywhere; }
  .detail-head { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
  .detail-head .badge { font-size: 10.5px; }

  /* Karten in der Projektansicht: weniger Innenabstand, mehr Inhalt sichtbar */
  .card { padding: 14px; }
  .form-grid { grid-template-columns: 1fr !important; }
  .kpi-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

  /* Beleg-/Rechnungszeilen: umbrechen statt quetschen, Buttons gut tippbar */
  .fin-row { flex-wrap: wrap; gap: 6px 10px; padding: 12px 10px; }
  .fin-row .fl { flex: 1 1 100%; min-width: 0; }
  .fin-row .ft { overflow-wrap: anywhere; }
  .fin-row .btn, .btn.mini { min-height: 38px; padding: 8px 12px; }

  /* Editor-Aktionsleisten: Buttons volle Breite untereinander */
  .editor-toolbar, .rechnung-actions { flex-wrap: wrap; gap: 8px; }
  .rechnung-actions .btn { flex: 1 1 46%; }

  /* Eingangsrechnungen: Auswahl + Felder volle Breite */
  select { max-width: 100% !important; }
}


/* Mobile: Sektions-Überschriften mit Buttons umbrechen statt überlaufen */
@media (max-width: 860px) {
  .section h2 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .section h2 .btn, .section h2 button, .section h2 a.btn { margin-left: 0 !important; }
  .items-head { flex-wrap: wrap; gap: 8px; }
  .items-head .btn { margin-left: 0 !important; }
}

/* Inline-Checkbox im Editor-Kopf (z. B. Unterschriftsblock im PDF) */
.chk-inline { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink, #dfe6ee); padding: 8px 0; cursor: pointer; }
.chk-inline input { width: 16px; height: 16px; accent-color: var(--accent, #c01622); cursor: pointer; }

/* Pauschal-Auftragsbestätigung: Editor ohne Preisspalten (EP/GP) */
.editor-table.no-prices th:nth-child(5), .editor-table.no-prices td:nth-child(5),
.editor-table.no-prices th:nth-child(6), .editor-table.no-prices td:nth-child(6) { display: none; }
.editor-table.no-prices .insert-row td, .editor-table.no-prices td[colspan] { display: table-cell; }
.editor-table.no-prices .title-sub { visibility: hidden; }

/* Drag & Drop im Positions-Editor */
.btn.mini.drag-handle { cursor: grab; user-select: none; touch-action: none; }
.btn.mini.drag-handle:active { cursor: grabbing; }
.editor-table tr.drag-over-top td { box-shadow: inset 0 3px 0 0 var(--accent, #c01622); }
.editor-table tr.drag-over-bottom td { box-shadow: inset 0 -3px 0 0 var(--accent, #c01622); }

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBALE UX-POLITUR (2026-07-09) — Note 3 → 1
   Tastatur-Fokus, Ladezustände, Dark-Mode-Lücken, Kontrast, Konsistenz.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1) Sichtbarer Tastatur-Fokus — vorher komplett unsichtbar für Buttons/Links/
   klickbare Kacheln. Nur bei Keyboard-Fokus (nicht bei Maus-Klick). */
a:focus-visible, button:focus-visible, .btn:focus-visible, .chip:focus-visible,
.seg:focus-visible, .tabs button:focus-visible, .p-row:focus-visible, .kpi:focus-visible,
.quick-tile:focus-visible, .stage-pick:focus-visible, .status-chip:focus-visible,
.pipe-card:focus-visible, .fin-row:focus-visible, .doc-row:focus-visible,
.hero-stat:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* 2) Kontrast: gedämpftes Taupe war unter WCAG-AA (~3.2:1). Etwas dunkler. */
:root { --muted: #6f665a; --muted-2: #8c8271; }
html.dark { --muted: #a49b8c; --muted-2: #857c6d; }

/* 3) Ladezustand mit Spinner statt eingefrorenem Text (Kaltstart-Wahrnehmung). */
.loading { display: flex; align-items: center; gap: 13px; }
.loading::before {
  content: ""; width: 17px; height: 17px; flex: none; border-radius: 50%;
  border: 2.5px solid var(--line-2); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Inhalts-Platzhalter beim View-Wechsel (verhindert weißen Blitz) */
.view-loading { color: var(--muted); padding: 40px 4px; font-family: var(--mono); letter-spacing: .04em; display: flex; align-items: center; gap: 13px; }
.view-loading::before { content: ""; width: 15px; height: 15px; flex: none; border-radius: 50%; border: 2.5px solid var(--line-2); border-top-color: var(--accent); animation: spin .7s linear infinite; }

/* 4) Konsistente Radien: Filter/Chips/Segmente/Import waren eckig (0) neben
   sonst runden Elementen — wirkte wie zwei Design-Systeme. */
.filters input[type="search"], .chip, .seg-group, .import-file,
.task-input, .task-row, .filters select { border-radius: var(--radius-sm); }
.seg-group { overflow: hidden; }

/* 5) Größere Touch-Ziele für Chips/Segmente am Touchgerät (<44px war zu klein). */
@media (hover: none) {
  .chip, .seg { min-height: 40px; display: inline-flex; align-items: center; }
}

/* 6) Voll gefüllter Gefahr-Button für Bestätigungsdialoge (Löschen o. Ä.). */
.btn.solid-danger { background: var(--danger); border-color: var(--danger); color: #fff; font-weight: 600; }
.btn.solid-danger:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }

/* 7) Dark-Mode-Lücken: hartkodierte helle Flächen (#fff/#faf9f7 …), die im
   Dunkelmodus weiß aufleuchteten. Nur im Dark-Mode überschrieben. */
html.dark .seg { background: var(--card-2); color: var(--ink-2); }
html.dark .seg:hover { background: var(--card); }
html.dark .seg.on { background: var(--ink); color: var(--paper); }
html.dark .status-chip, html.dark .task-row, html.dark .import-file,
html.dark .ticket-line, html.dark .orderbook-row, html.dark .rt-item,
html.dark .foto-card, html.dark .anh-item, html.dark .plan-stage, html.dark .plan-scroll,
html.dark .gantt-scroll, html.dark .markup-drop, html.dark .conflict-list th,
html.dark .emp-add input, html.dark .emp-row input[type="text"],
html.dark .order-suggest, html.dark .de-date { background: var(--card-2); color: var(--ink); }
html.dark .plantafel thead th, html.dark .plantafel thead .emp-col,
html.dark .gantt-month, html.dark .gantt-weeks .gantt-wk,
html.dark .gantt-head .gantt-label, html.dark .gantt-weeks .gantt-label { background: var(--card-2); color: var(--ink-2); }
html.dark .plantafel .emp-col, html.dark .gantt-label { background: var(--card); }
html.dark .days-badge { background: var(--card-2); color: var(--ink-2); }
html.dark .conflict-list th { position: sticky; }

/* 8) Fehlerbanner sichtbar oben → Inhalt darunter schieben statt verdecken. */
body.has-banner .main { padding-top: 46px; }
body.has-banner .nav-toggle { top: 52px; }

/* 9) Reduzierte Bewegung: auch Toast/Balken/Spinner beruhigen. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* 10) Klickbare Kacheln/Zeilen als Button ohne Button-Optik. */
.as-button { font: inherit; text-align: inherit; color: inherit; background: none; border: 0; width: 100%; cursor: pointer; }

/* ── Urlaub & Stunden (Zeiterfassung) ─────────────────────────────────── */
.zk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.zk-head { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); padding: 4px 0; }
.zk-cell { background: var(--card, #fff); border: 1px solid var(--line-2); border-radius: 9px; min-height: 74px; padding: 6px 7px; cursor: pointer; position: relative; }
.zk-cell:hover { border-color: var(--sage); }
.zk-cell.empty { background: none; border: none; cursor: default; }
.zk-cell.we { background: var(--card-2, #f7f6f2); }
.zk-cell.today { outline: 2px solid var(--sage); outline-offset: -1px; }
.zk-day { font-size: 12px; font-weight: 700; color: var(--muted); }
.zk-std { font-size: 15px; font-weight: 800; margin-top: 2px; }
.zk-bst { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zk-ur { font-size: 11px; font-weight: 700; margin-top: 2px; }
/* Krank/BS/SW-Symboltage im Kalender */
.zk-cell.sym { background: #fbe9e7; border-color: #c9776a; }
.zk-sym { font-size: 15px; font-weight: 800; color: #b0473a; margin-top: 2px; }
html.dark .zk-cell.sym { background: #3a2622; border-color: #8a5348; }
html.dark .zk-sym { color: #e8a99f; }
/* Fehler-Rollback sichtbar (V1): kurzes rotes Aufblitzen */
@keyframes zkFlashErr { 0% { box-shadow: 0 0 0 2px var(--neg, #c0392b) inset; } 100% { box-shadow: none; } }
.zk-flash-err { animation: zkFlashErr .9s ease-out; border-radius: 10px; }
/* Tagestyp-Umschalter im Stunden-Dialog */
.zk-typseg { flex-wrap: wrap; }
.zk-typseg .seg { font-size: 12px; }
.zk-cell.ft { background: #ece7f3; border-color: #8a6fb8; }
.zk-ft { font-size: 9.5px; font-weight: 700; color: #6d4fa0; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.dark .zk-cell.ft { background: #2e2839; border-color: #6d5a94; }
html.dark .zk-ft { color: #b39ddb; }
.zk-urcount { font-size: 13px; font-weight: 700; margin: 6px 0 0; color: var(--pos, #3f7d52); }
.zk-anspruch { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); }
.zk-anspruch input { min-height: 34px; }
/* Verwaltungsfelder im MA-Kalender als Karte im App-Formular-Stil (17.07.) */
.zk-mafields { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-end;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card, #fff);
  box-shadow: var(--shadow); padding: 12px 16px; margin: 0 0 14px; }
.zk-mafields .zk-anspruch { display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.zk-mafields input[type="text"], .zk-mafields input[type="number"] { min-height: 38px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper, #fff); color: var(--ink, inherit); font: inherit; }
.zk-mafields input[type="checkbox"] { width: 20px; height: 20px; margin: 8px 0 9px; cursor: pointer; accent-color: var(--sage, #7d9471); }
html.dark .zk-mafields { background: var(--card-2, #222); }
html.dark .zk-mafields input[type="text"], html.dark .zk-mafields input[type="number"] {
  background: rgba(255, 255, 255, .05); border-color: var(--line-2); }
/* Mitarbeiter-Suche im Dashboard (wie Baustellen-Autocomplete) */
.zk-empsuch { min-height: 38px; padding: 6px 12px; width: 240px; max-width: 100%; font: inherit; color: inherit;
  background: var(--card, #fff); border: 1px solid var(--line); border-radius: 10px; }
.zk-empsuch:focus-visible { outline: 2px solid var(--sage, #7d9471); outline-offset: 1px; }
html.dark .zk-empsuch { background: var(--card-2, #26262b); border-color: var(--line-2); }
/* Mitarbeiter-Auswahl im App-Stil (Design-Angleichung 16.07.) */
.zk-empsel { min-height: 38px; padding: 6px 12px; max-width: 250px; font: inherit; color: inherit;
  background: var(--card, #fff); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.zk-empsel:hover { border-color: var(--line-2); }
.zk-empsel:focus-visible { outline: 2px solid var(--sage, #7d9471); outline-offset: 1px; }
html.dark .zk-empsel { background: var(--card-2, #26262b); border-color: var(--line-2); }
.zk-cell.ur-bestaetigt { background: #e4efe6; border-color: #3f7d52; }
.zk-cell.ur-bestaetigt .zk-ur { color: #3f7d52; }
.zk-cell.ur-beantragt { background: #f4ecda; border-color: #ad8746; }
.zk-cell.ur-beantragt .zk-ur { color: #ad8746; }
html.dark .zk-cell.ur-bestaetigt { background: #24382a; }
html.dark .zk-cell.ur-beantragt { background: #3a3222; }
html.dark .zk-cell.we { background: rgba(255,255,255,.03); }
.zk-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
.zk-exports { padding: 8px 10px; border: 1px dashed var(--line-2); border-radius: 10px; }
.zk-addrow { margin: 0 0 14px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.zk-add { font-size: 16px; padding: 12px 22px; min-height: 48px; box-shadow: var(--shadow); }
/* „Nachricht ans Büro“ neben dem Haupt-Button — bewusst ruhiger (29.07.) */
.zk-msgbtn { min-height: 48px; padding: 12px 18px; }
/* Freie Monats-Notizfelder als KPI-Kacheln (29.07.) — reine Merkzettel des Büros,
   nichts davon wird verrechnet. Dezent abgesetzt, damit sie nicht wie eine
   errechnete Kennzahl wirken; ＋-Kachel nur für Admins. */
.zk-mfkpi { border-style: dashed; }
.zk-mfkpi .l { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zk-mfadd { border-style: dashed; display: flex; flex-direction: column; justify-content: center;
  color: var(--muted); background: none; box-shadow: none; }
.zk-mfadd .v { font-size: 22px; line-height: 1; }
.zk-mfadd:hover { color: var(--ink, inherit); border-color: var(--line-2); }
/* Baustellen-Autocomplete im Stunden-Dialog */
.zk-acwrap { position: relative; }
.zk-ac { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; display: none; margin-top: 4px;
  background: var(--card, #fff); border: 1px solid var(--line-2); border-radius: 10px;
  box-shadow: var(--shadow-soft); max-height: 320px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.zk-ac-item { display: block; width: 100%; text-align: left; padding: 10px 12px; min-height: 44px;
  background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; font: inherit; color: inherit; }
.zk-ac-item:last-child { border-bottom: 0; }
.zk-ac-item:hover, .zk-ac-item:focus { background: var(--card-2, #f5f4f0); }
.zk-ac-name { font-weight: 600; font-size: 14px; }
.zk-ac-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
html.dark .zk-ac { background: var(--card-2, #26262b); }
html.dark .zk-ac-item:hover { background: rgba(255, 255, 255, .06); }
/* Floating-Button (nur Mobile) */
.zk-fab { display: none; }
@media (max-width: 700px) {
  .zk-fab { display: inline-flex; position: fixed; right: 16px; bottom: 18px; z-index: 70;
    border-radius: 999px; padding: 14px 20px; min-height: 52px; font-size: 16px;
    align-items: center; box-shadow: 0 4px 16px rgba(0, 0, 0, .28); }
}
.zk-mlabel { min-width: 150px; text-align: center; }
.zk-nav { min-width: 44px; font-size: 17px; }
.zk-nav:disabled { opacity: .35; cursor: default; }
/* Mitarbeiter-Wechsler im MA-Kalender (29.07.) — ‹ Suche › direkt über den Kacheln */
.zk-calnav { padding: 8px 10px; border: 1px dashed var(--line-2); border-radius: 10px; margin: 0 0 14px; }
.zk-calnav .zk-empsuch { width: 230px; }
.zk-calnav .page-sub { margin: 0; font-variant-numeric: tabular-nums; }
/* Mobile: Tap-Ziele >= 40px, Kalenderzellen gross genug, Monats-Buttons erreichbar */
@media (max-width: 700px) {
  .zk-grid { gap: 3px; }
  .zk-cell { min-height: 62px; padding: 4px 4px; border-radius: 7px; }
  .zk-std { font-size: 13px; }
  .zk-bst { display: none; }
  .zk-ur { font-size: 9.5px; }
  .zk-mlabel { min-width: 0; flex: 1 1 auto; font-size: 15px; }
  .zk-toolbar { gap: 6px; }
  .zk-toolbar .btn { min-height: 40px; }
  .zk-nav { min-width: 46px; }
  .zk-toolbar select { min-height: 40px; max-width: 100% !important; flex: 1 1 100%; }
  .zk-modal input { min-height: 42px; font-size: 16px; } /* 16px verhindert iOS-Auto-Zoom */
  .zk-modal .modal-actions .btn { min-height: 42px; }
}

/* ── In-App-Login (clean, nur Logo + Benutzername + Passwort) ─────────────── */
.auth-screen {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper); padding: 24px;
}
.auth-card {
  width: 100%; max-width: 360px;
  display: flex; flex-direction: column; align-items: stretch; gap: 14px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 34px 30px 30px;
  box-shadow: 0 18px 50px rgba(0,0,0,.14);
}
.auth-logo { width: 190px; max-width: 78%; height: auto; align-self: center; margin-bottom: 2px; }
.auth-sub {
  align-self: center; font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.auth-sub::before { content: ""; width: 15px; height: 1.5px; background: var(--accent); }
.auth-label {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.auth-inp {
  font-family: var(--sans); font-size: 16px; /* 16px = kein iOS-Auto-Zoom */
  padding: 11px 13px; border: 1px solid var(--line-2); border-radius: 9px;
  background: var(--card-2); color: var(--ink); min-height: 44px;
}
.auth-inp:focus { outline: none; border-color: var(--accent); background: var(--card); }
.auth-err {
  font-size: 12.5px; font-weight: 600; color: #fff; background: var(--accent);
  border-radius: 8px; padding: 9px 12px; line-height: 1.35;
}
.auth-btn { width: 100%; min-height: 46px; margin-top: 4px; font-size: 14.5px; }
.auth-btn[disabled] { opacity: .65; cursor: default; }

/* Abmelden-Button unten in der Seitenleiste */
.logout-btn {
  width: 100%; margin-top: 12px; padding: 8px 10px;
  background: transparent; border: 1px solid var(--line-2); border-radius: 8px;
  color: var(--muted); font-family: var(--sans); font-size: 12px; font-weight: 600;
  cursor: pointer; letter-spacing: .02em; transition: color .12s, border-color .12s;
}
.logout-btn:hover { color: var(--accent); border-color: var(--accent); }
.logout-btn[disabled] { opacity: .6; cursor: default; }

/* Editierbares Status-Badge in der Projekte-Liste (nur Admins) */
.badge.badge-editable { cursor: pointer; user-select: none; }
.badge.badge-editable:hover { filter: brightness(1.05); box-shadow: 0 0 0 1px var(--line-2) inset; }

/* Zeiterfassung: Start/Ende/Pause-Eingabe */
.zk-timerow { display: flex; gap: 10px; margin-top: 8px; }
.zk-timerow .form-field { flex: 1; margin: 0; }
.zk-timeinp { width: 100%; font-size: 16px; text-align: center; font-variant-numeric: tabular-nums; }
.zk-stdline { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.zk-stdlabel { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.zk-stdout { font-size: 22px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.zk-stdout.bad { font-size: 14px; color: var(--accent); font-weight: 600; }
/* Lade-Fehler statt leerer Seite (29.07.) */
.zk-ladefehler { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  border: 1px solid var(--accent); border-radius: 12px; background: var(--card, #fff);
  box-shadow: var(--shadow); padding: 14px 16px; margin: 0 0 14px; }
.zk-ladefehler .ft { font-weight: 700; }
.zk-ladefehler .fs { font-size: 12.5px; color: var(--muted); margin-top: 2px; max-width: 62ch; }
html.dark .zk-ladefehler { background: var(--card-2, #222); }
/* Admin-Erfassung (29.07.): Stunden direkt eintippen statt Start/Ende */
.zk-stdinp { width: 92px; min-height: 40px; padding: 4px 10px; font: inherit; font-size: 20px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--ink, inherit); background: var(--paper, #fff);
  border: 1px solid var(--line-2); border-radius: 10px; }
.zk-stdinp:focus-visible { outline: 2px solid var(--sage, #7d9471); outline-offset: 1px; }
html.dark .zk-stdinp { background: rgba(255, 255, 255, .05); }
.zk-prefill-hint { margin-top: 6px; font-size: 12px; color: var(--muted); font-style: italic; }
.zk-prefill-hint:empty { display: none; }
.zk-time { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .zk-timerow { gap: 6px; } .zk-timeinp { font-size: 16px; padding: 8px 4px; } }

/* Cockpit: Team-Aufgaben (von Admin an Mitarbeiter) */
.badge.task-from { background: var(--accent-soft); color: var(--accent-dark); border: 1px solid var(--accent); font-size: 10px; margin-right: 5px; }
.task-assign { margin-top: 4px; }
.task-assign-add {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; font-size: 12px; line-height: 1.4;
  color: var(--muted); background: transparent;
  border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer; transition: color .12s, border-color .12s, background .12s;
}
.task-assign-add:hover { color: var(--accent); border-color: var(--accent); background: var(--card-2); }
.task-assign-form { margin-top: 8px; padding: 10px; background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.task-assign-sel { width: 100%; }

/* Funnel/Pipeline am Handy: Phasen UNTEREINANDER statt horizontal scrollen
   (eine Scroll-Richtung — deutlich besser bedienbar auf dem Handy). */
@media (max-width: 700px) {
  .pipeline-board { flex-direction: column; overflow-x: visible; gap: 20px; padding-right: 0 !important; }
  .main > .pipeline-board { padding-right: 0; }
  .pipe-col, .pipe-col.collapsed { flex: none !important; max-width: none !important; width: 100%; }
  .pipe-card { padding: 12px 14px; }
  .pc-title { font-size: 14px; }
}

/* ── Zeiterfassung: Pause-Drehrad + Tagestyp „Weitere“ (21.07.2026) ────────
   Pause ist eine Dauer, kein Uhrzeitpunkt — eigenes Minuten-Rad statt time-Input.
   Seltene Tagestypen (BS/SW/KU) klappen hinter „Weitere“ auf. */
.zk-typseg-selten { margin-top: 6px; }
.zk-mehrbtn { color: var(--muted); }
.zk-pausefeld { margin-top: 10px; align-items: center; }
.zk-wheelwrap { position: relative; width: 138px; height: 102px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; overflow: hidden; }
.zk-wheelwrap.readonly { pointer-events: none; opacity: .6; }
.zk-wheel { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.zk-wheel::-webkit-scrollbar { display: none; }
/* 1 Item Luft oben+unten, damit erster/letzter Wert in die Mitte rollen kann */
.zk-wheel-list { padding: 34px 0; }
.zk-wheel-item { display: flex; align-items: center; justify-content: center; width: 100%; height: 34px; border: 0; background: transparent; cursor: pointer; scroll-snap-align: center; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; font-family: inherit; }
.zk-wheel-item.on { color: var(--ink); font-weight: 700; font-size: 16px; }
.zk-wheel-hl { position: absolute; left: 6px; right: 6px; top: 34px; height: 34px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); pointer-events: none; }
.zk-wheel-fade { position: absolute; left: 0; right: 0; height: 28px; pointer-events: none; }
.zk-wheel-fade.top { top: 0; background: linear-gradient(#fff, rgba(255, 255, 255, 0)); }
.zk-wheel-fade.bottom { bottom: 0; background: linear-gradient(rgba(255, 255, 255, 0), #fff); }

/* ── Zeiterfassung R24: Lücken, Abwesenheits-Matrix, Baustellen (21.07.2026) ── */
.zk-cell { position: relative; }
.zk-missdot { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: #d9822b; }
.zk-overlap { color: #9a6b00; font-weight: 600; }
.zk-bststd { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zk-mx-scroll { overflow-x: auto; }
.zk-mx { border-collapse: collapse; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.zk-mx th, .zk-mx td { border: 1px solid var(--line); padding: 2px 3px; text-align: center; min-width: 21px; height: 22px; }
.zk-mx th { font-weight: 600; color: var(--muted); }
.zk-mx th.name, .zk-mx td.name { text-align: left; position: sticky; left: 0; background: #fff; min-width: 150px; white-space: nowrap; padding-left: 6px; z-index: 1; }
.zk-mx td.name { cursor: pointer; font-weight: 500; }
.zk-mx td.name:hover { background: #f2f2ee; }
.zk-mx th.off, .zk-mx td.off { background: #f2f2ee; }
.zk-mx td.u { background: #d9efd9; color: #2e7d32; font-weight: 700; }
.zk-mx td.uq { background: #fdf3d7; color: #9a6b00; font-weight: 700; }
.zk-mx td.k { background: #fbe0dc; color: #c0392b; font-weight: 700; }
.zk-mx td.bs { background: #dde8f6; color: #2f5b9d; font-weight: 700; }
.zk-mx td.sw { background: #e7e2f0; color: #6d4fa0; font-weight: 700; }
.zk-mx td.heute { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ── Cockpit: „＋ Aufgabe …“-Felder im App-Formular-Stil (22.07.2026) ──
   Vorher nackte Browser-Inputs neben gestylten Karten — jetzt wie .task-input
   der Projekt-Aufgabenliste; Zuweisen-Formular (Select/Text/Datum) einheitlich. */
.task-assign-form select, .task-assign-form input {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; font: inherit; font-size: 13.5px; color: var(--ink); min-width: 0;
}
.task-assign-form select:focus, .task-assign-form input:focus { outline: none; border-color: var(--accent); }
@media (hover: none) {
  .task-add .task-input, .task-assign-form input, .task-assign-form select { min-height: 42px; font-size: 16px; } /* 16px verhindert iOS-Auto-Zoom */
}
/* Projektstatus-Agent: sicher gerendertes Markdown */
.pstatus-md h1 { font-size: 17px; margin: 14px 0 6px; }
.pstatus-md h2 { font-size: 15px; margin: 14px 0 5px; }
.pstatus-md h3, .pstatus-md h4, .pstatus-md h5, .pstatus-md h6 { font-size: 13.5px; margin: 12px 0 4px; }
.pstatus-md p { margin: 6px 0; line-height: 1.5; }
.pstatus-md ul, .pstatus-md ol { margin: 6px 0; padding-left: 20px; }
.pstatus-md li { margin: 2px 0; line-height: 1.45; }
.pstatus-md code { background: var(--line); padding: 1px 5px; border-radius: 4px; font-size: .9em; }
.pstatus-md pre { background: var(--line); padding: 10px 12px; border-radius: 6px; overflow-x: auto; }
.pstatus-md pre code { background: none; padding: 0; }
.pstatus-md blockquote { border-left: 3px solid var(--line-2); margin: 6px 0; padding: 2px 12px; color: var(--muted, #666); }
.pstatus-md a { color: var(--accent); }
.pstatus-md hr { border: none; border-top: 1px solid var(--line); margin: 12px 0; }
/* Agentenstatus-Chip in der Projektübersicht */
.badge.agent-chip { border-color: transparent; color: #fff; }
.agent-sub { display: flex; align-items: center; gap: 6px; }
.agent-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── Cockpit: Aufgabe an Kollegen übergeben — „→“-Knopf an der Zeile (23.07.2026) ── */
.task-fwd { flex: none; color: var(--muted); padding: 2px 9px; }
.task-fwd:hover { color: var(--accent); border-color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE VOLLAUSBAU (2026-07-27) — Umschalter Hell/Auto/Dunkel in der Sidebar.
   Prinzip: der HELLE Modus bleibt byte-identisch; alles Dunkle passiert über
   html.dark-Overrides. Jede Regel hier neutralisiert eine hartkodierte helle
   Farbe aus dem Bestand (Audit 27.07.: 128 Werte außerhalb der Variablen).
   Warme Dunkelpalette — passend zur Atelier-Designsprache, kein kaltes Grau.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Neuer Klassen-Haken statt Inline-Style (Werte identisch zum alten Inline-Stil) */
.doc-ico.plan { background: #e8f0fa; color: #2563ab; }

/* — Grundflächen & Hero — */
html.dark .hero { background: linear-gradient(168deg, #221e18 0%, var(--paper) 62%); }
html.dark .empty { background: var(--paper-2); border-color: var(--line-2); }
html.dark table.data td { border-bottom-color: var(--line); }
html.dark .proj-search:focus { background: var(--card); }
html.dark .photo-focus img { background: var(--card-2); }
html.dark .card.prognose { background: linear-gradient(180deg, #2a241c, var(--card)); }

/* — Invertierte Elemente (heller Grund im Dunkelmodus): Textfarbe mitdrehen — */
html.dark .toast { color: var(--paper); }
html.dark .toast-undo { color: var(--paper); border-color: #9a9183; }
html.dark .btn.primary:hover { color: var(--paper); }
html.dark .insert-btn { background: var(--card); }
html.dark .insert-btn:hover { background: var(--accent); color: #fff; }
html.dark .insert-btn.alt:hover { background: var(--ink); color: var(--paper); }
html.dark .nav-toggle { color: var(--paper); }
html.dark .btn.add-wide:hover { background: var(--accent-soft); }

/* — Badges: gedeckte dunkle Flächen, aufgehellte Schrift (statt Pastell) — */
html.dark .badge.stage-angebot { background: #3a2225; color: var(--accent-dark); border-color: #55333a; }
html.dark .badge.stage-lv { background: #252b3a; color: var(--brand-blue); border-color: #39435c; }
html.dark .badge.stage-nicht { background: #2c2c29; color: #a3a49b; border-color: #45453f; }
html.dark .badge.stage-auftrag, html.dark .badge.due-ok, html.dark .badge.q-gut { background: #22322a; color: var(--ok); border-color: #35503f; }
html.dark .badge.due-soon { background: #3d3117; color: #e3bd6d; }
html.dark .badge.due-none { background: #2c2c29; color: #9a9b93; border-color: #56564e; }
html.dark .badge.q-teilweise { background: #382f1c; color: var(--warn); }
html.dark .badge.q-unklar { background: #3a2422; color: var(--danger); }
html.dark .badge.src.mock { background: #332639; color: #c39ad3; border-color: #5c4468; }
html.dark .badge.src.live { background: #26322b; color: var(--sage); border-color: #3c5045; }
html.dark .badge.stage-date { background: #2b2537; color: #b39ddb; border-color: #4d4267; }
html.dark .badge.stage-date.set { background: #352c47; }
html.dark .days-badge.warn { background: #383017; color: #d6b465; }
html.dark .days-badge.danger { background: #3a2422; color: var(--danger); }

/* — Dokument-Icons & Banner — */
html.dark .doc-ico { background: #332c24; color: var(--ink-2); }
html.dark .doc-ico.pdf { background: #3a2422; color: var(--danger); }
html.dark .doc-ico.img { background: #252b3a; color: var(--blue); }
html.dark .doc-ico.gaeb { background: #2b2537; color: #b39ddb; }
html.dark .doc-ico.html { background: #22322a; color: var(--ok); }
html.dark .doc-ico.plan { background: #232c38; color: #7ea3d6; }
html.dark .mock-banner { background: #332639; border-color: #5c4468; color: #c39ad3; }
html.dark .live-banner { background: #22322a; border-color: #35503f; color: #7fbb92; }

/* — Editor / Rechnungs-Maske — */
html.dark .editor-table .ev-row td { background: #2b251c; }
html.dark .editor-table tr.title-row td { background: #322a1f; }
html.dark .inv-billing { background: var(--paper-2); }
html.dark .inv-sums div.big { border-top-color: var(--line-2); }
html.dark .basis-row { background: var(--card-2); }
html.dark .att-item:hover { background: var(--card-2); }
html.dark .att-rep { color: #b39ddb; }
html.dark .kpi.accent .kpi-v { color: #b39ddb; }

/* — Status-Menü, Fortschrittsbalken, Grüne Aktionen — */
html.dark .status-menu { background: var(--card-2); }
html.dark .sc-opt:hover { background: rgba(255, 255, 255, .05); }
html.dark .fb-track { background: var(--chart-track); }
html.dark .finalize-btn { color: #17281c; }
html.dark .finalize-btn:hover { background: #7fbb92; border-color: #7fbb92; color: #17281c; }
html.dark .btn.solid-danger:hover { background: #b84850; border-color: #b84850; }

/* — Plantafel / Gantt / Plan-Mock — */
html.dark .plantafel thead th.today, html.dark .plantafel td.today { background: #35301f; }
html.dark .gantt-weeks .gantt-wk { border-right-color: var(--line); }
html.dark .gantt-weeks .gantt-wk.today { background: #35301f; }
html.dark .gantt-row .gantt-track { background: repeating-linear-gradient(to right, transparent 0, transparent 45px, #2c2620 45px, #2c2620 46px); }
html.dark .gantt-bar { color: #1c2129; }
html.dark .gantt-bar:hover { color: #fff; }
html.dark .plan-mock {
  background: repeating-linear-gradient(0deg, #24201a, #24201a 34px, #2e2822 35px),
              repeating-linear-gradient(90deg, #24201a, #24201a 34px, #2e2822 35px);
}
html.dark .plan-mock .wall { border-color: #8a8d94; }

/* — Zeiterfassung: Matrix, Pause-Drehrad, Überlappungs-Hinweis — */
html.dark .zk-mx th.name, html.dark .zk-mx td.name { background: var(--card); }
html.dark .zk-mx td.name:hover { background: rgba(255, 255, 255, .06); }
html.dark .zk-mx th.off, html.dark .zk-mx td.off { background: var(--paper-2); }
html.dark .zk-mx td.u { background: #24382a; color: #8fce9b; }
html.dark .zk-mx td.uq { background: #383017; color: #d6b465; }
html.dark .zk-mx td.k { background: #3a2422; color: #e8a99f; }
html.dark .zk-mx td.bs { background: #252b3a; color: #9db8dd; }
html.dark .zk-mx td.sw { background: #2b2537; color: #b39ddb; }
html.dark .zk-overlap { color: #d6b465; }
html.dark .zk-wheelwrap { background: var(--card-2); }
html.dark .zk-wheel-fade.top { background: linear-gradient(#2f2820, rgba(47, 40, 32, 0)); }
html.dark .zk-wheel-fade.bottom { background: linear-gradient(rgba(47, 40, 32, 0), #2f2820); }
html.dark .zk-cell.ur-bestaetigt .zk-ur { color: #8fce9b; }
html.dark .zk-cell.ur-beantragt .zk-ur { color: #d6b465; }

/* — LV-Buchungs-Tags — */
html.dark .lv-bk-art { background: #332c1c; color: #c9a86a; }
html.dark .lv-bk-art.verbaut { background: #22322a; color: #7fbb92; }

/* — Charts: helle Hintergrund-Spuren & Gitternetz (Klassen-Haken in charts.js) — */
html.dark .chart .grid { stroke: #332c24; }
html.dark .chart .c-track { fill: var(--chart-track); }
html.dark .chart .c-ring-track { stroke: var(--chart-track); }

/* ── Bauleitung: Leitstand (Reiter „Bauleitung", 2026-07-27) ─────────────────
   Token-basiert (var(--…)) → Dark Mode erbt automatisch; nur wenige explizite
   html.dark-Feinheiten am Ende des Blocks. */
.bl-board { display: flex; flex-direction: column; gap: 26px; margin-top: 14px; }
.bl-section { min-width: 0; }
.bl-sec-head { display: flex; align-items: baseline; gap: 10px; padding: 4px 0 8px 12px; border-left: 4px solid var(--line); flex-wrap: wrap; }
.bl-sec-head strong { font-size: 15px; letter-spacing: .02em; }
.bl-count { font: 700 12px/1 var(--mono); color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px; }
.bl-hint { font-size: 12.5px; color: var(--muted); }
.bl-rows { display: flex; flex-direction: column; gap: 10px; }
.bl-empty { color: var(--muted); font-size: 13px; padding: 8px 0 0 16px; }
.bl-row { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.bl-row.hot { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.bl-row.done { opacity: .75; }
.bl-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; flex-wrap: wrap; }
.bl-caret { color: var(--muted); font-size: 13px; width: 14px; flex: none; }
.bl-name { font-weight: 700; font-size: 14.5px; color: var(--ink); text-decoration: none; }
.bl-name:hover { color: var(--accent); text-decoration: underline; }
.bl-head-badges { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.badge.bl-chip { background: var(--paper); border: 1px solid var(--line); color: var(--muted); }
.badge.bl-due { background: var(--paper); border: 1px solid var(--line); color: var(--muted); }
.badge.bl-due.soon { background: #f4e8d4; border-color: #dcc296; color: #7a5418; }
.badge.bl-due.overdue { background: var(--accent-soft); border-color: #dcb4ac; color: var(--accent); }
.badge.bl-done-badge { background: #e2ecdd; border-color: #b9d0b0; color: var(--ok); }
.bl-body { border-top: 1px solid var(--line); padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.bl-startline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bl-startlabel { font-weight: 600; font-size: 13px; }
.bl-startline input[type="date"], .bl-due-inp { font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); }
.bl-list { display: flex; flex-direction: column; }
.bl-item { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px dashed var(--line); flex-wrap: wrap; }
.bl-item:last-child { border-bottom: none; }
.bl-item-main { display: flex; align-items: center; gap: 10px; cursor: pointer; min-width: 0; }
.bl-item-main input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--ok); flex: none; }
.bl-item-label { font-size: 14px; }
.bl-item.done .bl-item-label { color: var(--muted); text-decoration: line-through; }
.bl-item-side { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.bl-due-inp { width: 130px; color: var(--muted); }
.bl-doneby { font-size: 11.5px; color: var(--muted); }
.bl-weekhead { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.bl-signal { font-size: 13px; padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.bl-signal.warn { background: var(--accent-soft); border-color: #dcb4ac; color: var(--accent-dark); font-weight: 600; }
.bl-signal.ok { background: #e9f0e5; border-color: #c4d6ba; color: var(--ok); }
.bl-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-top: 2px; }
@media (max-width: 640px) { .bl-head-badges, .bl-item-side { margin-left: 24px; width: 100%; } }

/* Dark-Mode-Feinheiten (feste Hell-Töne der Badges/Signale übersteuern) */
html.dark .badge.bl-due.soon { background: #3a3120; border-color: #5c4c2a; color: #cfa25a; }
html.dark .badge.bl-due.overdue { background: #3a211f; border-color: #5c3230; color: #d25f66; }
html.dark .badge.bl-done-badge { background: #22322a; border-color: #33493c; color: #7fbb92; }
html.dark .bl-signal.ok { background: #22322a; border-color: #33493c; color: #7fbb92; }
html.dark .bl-signal.warn { color: #d98b7f; border-color: #5c3230; }

/* — Bauleitung Runde 2: Spalten-Übersicht + Fokus-Modus (2026-07-27) — */
.bl-topbar { display: flex; align-items: center; gap: 12px; margin: 14px 0 16px; flex-wrap: wrap; }
.bl-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 900px) { .bl-cols { grid-template-columns: 1fr; } }
.bl-col { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); min-width: 0; }
.bl-col-head { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-top: 4px solid var(--line); border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; cursor: pointer; flex-wrap: wrap; }
.bl-col-head:hover { background: var(--paper); }
.bl-col-head strong { font-size: 13.5px; letter-spacing: .02em; }
.bl-col-open { margin-left: auto; font-size: 11.5px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.bl-col-head:hover .bl-col-open { color: var(--accent); }
.bl-mini-list { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.bl-mini { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 10px; cursor: pointer; }
.bl-mini:hover { border-color: var(--muted); box-shadow: var(--shadow-soft); }
.bl-mini.hot { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.bl-mini-name { font-weight: 700; font-size: 13px; margin-bottom: 5px; }
.bl-mini-badges { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.bl-mini-badges .badge { font-size: 10.5px; padding: 2px 7px; }
.bl-focus-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.bl-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.bl-tab { display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px/1 var(--sans); color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 8px 13px; cursor: pointer; }
.bl-tab:hover { color: var(--ink); border-color: var(--muted); }
.bl-tab.on { color: var(--ink); border-color: var(--ink); background: var(--paper); }
.bl-fertig { margin-top: 18px; }
html.dark .bl-col-head:hover, html.dark .bl-tab.on { background: var(--card-2); }
html.dark .bl-mini { background: var(--card-2); }

/* ── Positions-Bibliothek im Angebots-Editor ─────────────────────────────
   Links das Leistungsverzeichnis, rechts ein mitscrollendes Panel, aus dem
   Positionen anderer Projekte übernommen werden. Unter 1200 px rutscht das
   Panel unter die Tabelle (dann klappbar), damit die Tabelle Platz behält. */
/* Breite der Bibliothek als Variable: der Zieh-Griff (angLayout in pos-lib.js) setzt
   --poslib-w inline auf .ang-layout — Inline schlägt die Media-Vorgaben, die Nutzer-
   Breite gewinnt also immer. */
.ang-layout { display: flex; gap: 8px; align-items: flex-start; --poslib-w: 330px; }
@media (max-width: 1520px) { .ang-layout { --poslib-w: 280px; } }
.ang-main { flex: 1 1 auto; min-width: 0; }
/* Horizontal-Scroll der Positions-Karte sichtbar machen: der native Balken sitzt am
   Ende der meterhohen Karte und war praktisch unsichtbar — die Knöpfe wirkten
   „abgeschnitten" (Befund Niklas 10.08.). */
.ang-main { scrollbar-width: thin; }
.ang-main::-webkit-scrollbar { height: 9px; }
.ang-main::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, .45); border-radius: 5px; }
.ang-main::-webkit-scrollbar-track { background: rgba(128, 128, 128, .10); }
.pos-lib { flex: 0 0 var(--poslib-w, 330px); width: var(--poslib-w, 330px); margin-top: 14px; position: sticky; top: 12px;
  max-height: calc(100vh - 30px); display: flex; flex-direction: column; padding: 12px; }
/* Zieh-Griff zwischen Karte und Bibliothek */
.ang-split { flex: 0 0 8px; align-self: stretch; margin-top: 14px; cursor: col-resize;
  touch-action: none; position: relative; }
.ang-split::before { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px;
  background: var(--line); border-radius: 2px; }
.ang-split:hover::before, .ang-split:active::before { left: 2px; width: 4px; background: var(--accent, #c01622); }
.pos-lib-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pos-toggle { border: 0; background: transparent; cursor: pointer; font-size: 17px; line-height: 1;
  color: var(--muted); padding: 2px 6px; border-radius: 5px; }
.pos-toggle:hover { background: rgba(128, 128, 128, .14); }
.pos-lib.zu .pos-lib-search, .pos-lib.zu .pos-lib-list, .pos-lib.zu .pos-lib-foot, .pos-lib.zu > p { display: none; }
.pos-lib.zu .pos-toggle::after { content: ""; }
/* Zugeklappt = schmale Schiene, die ihre Breite WIRKLICH freigibt (vorher blieben die
   330 px auch zugeklappt reserviert — der Einklapper half der Maske nie, 10.08.). */
.pos-lib.zu { flex: 0 0 44px; width: 44px; padding: 10px 4px; }
.pos-lib.zu .pos-lib-head { justify-content: center; }
.pos-lib.zu .pos-lib-head .eyebrow { display: none; }
.pos-lib.zu .pos-lib-bar { display: none; }
/* Suchzeile = dieselbe Sprache wie die Projekt-Suche (Lupe im Feld, weicher Fokus-
   rahmen), nur kompakter fürs 330-px-Panel. Vorher ein nacktes Input mit hartem
   Rahmen + nativem Löschkreuz — das wirkte wie aus einer anderen App. */
.pos-lib-bar { margin: 10px 0 0; }
.pos-lib-bar .proj-search-ico { left: 11px; }
.pos-lib-search { padding: 9px 12px 9px 34px; font-size: 13.5px; border-radius: var(--radius); box-shadow: none; }
.pos-lib-search:focus { box-shadow: 0 0 0 3px var(--accent-soft); }
.pos-lib-search::-webkit-search-cancel-button { height: 11px; width: 11px; }
.pos-lib-info { margin: 7px 2px 0; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .03em; color: var(--muted-2); line-height: 1.45; }
.pos-lib-list { overflow-y: auto; margin-top: 4px; flex: 1 1 auto; }
.pos-card { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between;
  padding: 8px 6px; border-top: 1px solid rgba(128, 128, 128, .18); }
.pos-card:hover { background: rgba(128, 128, 128, .07); }
/* min-width:0 bis nach unten durchreichen — sonst schiebt ein langer Positionstext
   die Karte breiter als das Panel und läuft unter den ＋-Knopf (Feinschliff 03.08.). */
.pos-card-main { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; min-width: 0; flex: 1 1 auto; }
.pos-card-main > div { min-width: 0; }
.pos-card > .btn { flex: 0 0 auto; }
.pos-card-main input[type=checkbox] { margin-top: 3px; flex: 0 0 auto; }
.pos-card-t { font-weight: 600; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.pos-lib-list > .page-sub { font-size: 12px; line-height: 1.5; padding: 8px 2px; }
.pos-card-d { color: var(--muted); font-size: 11.5px; line-height: 1.35; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pos-card-m { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.pos-ep { font-size: 12px; font-weight: 600; }
.pos-badge { font-size: 10.5px; padding: 1px 5px; border-radius: 4px; background: rgba(128, 128, 128, .18); color: var(--muted); }
.pos-link, .pos-quelle, .pos-back { border: 0; background: transparent; padding: 0; cursor: pointer;
  font-size: 11px; color: var(--muted); text-align: left; text-decoration: underline; }
/* Quelle einzeilig mit Auslassung: die vollen Projekt-/Dokumentnamen sind oft
   dreizeilig und haben die Trefferliste zugekleistert (Unterstreichung erst beim Hover). */
.pos-quelle { display: block; margin-top: 4px; max-width: 100%; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.pos-quelle:hover { text-decoration: underline; opacity: 1; }
.pos-link:hover, .pos-quelle:hover, .pos-back:hover { color: var(--accent, #c01622); }
.pos-back { font-size: 12px; padding: 4px 0; }
.pos-block > summary { cursor: pointer; padding: 7px 2px; font-size: 12.5px; font-weight: 600;
  border-top: 1px solid rgba(128, 128, 128, .18); }
/* Projekt-Treffer in der Bibliothek: „Straße tippen → Projekt anklicken → Positionen" */
.pos-sec { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted-2); padding: 14px 2px 4px; }
.pos-sec:first-child { padding-top: 8px; }
.pos-proj { display: block; width: 100%; text-align: left; cursor: pointer; padding: 9px 8px;
  border: 1px solid transparent; border-radius: var(--radius); background: rgba(128, 128, 128, .06);
  color: inherit; font: inherit; margin-bottom: 6px; transition: background .14s ease, border-color .14s ease; }
.pos-proj:hover { background: rgba(128, 128, 128, .12); border-color: var(--line-2); }
.pos-proj .pos-card-m { margin-top: 5px; }
.pos-proj-kopf { margin: 8px 2px 0; font-size: 14px; }
.pos-proj-sub { margin: 2px 2px 0; }
/* Beleg-Treffer (10.08.): „R-261551 tippen → Rechnung anklicken → Positionen". Optisch
   dieselbe Karte wie der Projekt-Treffer, aber mit linker Kante als stiller Unterschied —
   die beiden Abschnitte stehen direkt untereinander und sollen nicht verschwimmen. */
.pos-beleg { border-left: 2px solid var(--line-2); border-radius: 0 var(--radius) var(--radius) 0; }
.pos-beleg:hover { border-left-color: var(--accent, #c01622); }
/* Hinweis über einer aus einer alten PDF gelesenen Positionsliste (Summenprobe offen). */
.pos-lib-warn { margin: 8px 2px 0; padding: 7px 9px; border-radius: var(--radius);
  background: rgba(192, 22, 34, .08); color: var(--ink); font-size: 11.5px; line-height: 1.45; }
.pos-lib-foot { display: none; gap: 8px; align-items: center; padding-top: 10px;
  border-top: 1px solid rgba(128, 128, 128, .25); }
.pos-lib-foot.on { display: flex; }
@media (max-width: 1200px) {
  .ang-layout { display: block; }
  .ang-split { display: none; }
  .pos-lib { width: auto; position: static; max-height: none; }
  .pos-lib.zu { width: auto; padding: 12px; }
  .pos-lib.zu .pos-lib-head { justify-content: space-between; }
  .pos-lib.zu .pos-lib-head .eyebrow { display: block; }
  .pos-lib-list { max-height: 420px; }
}

/* ── Autocomplete-Vorschläge (Projekt anlegen: Kunde + Adresse, 04.08.) ─────
   Ein gemeinsames, ruhiges Listen-Muster statt nackter .hint-Zeilen: Karte mit
   weicher Kante, Zeilen mit Haupt-/Unterzeile, dezentes Hover. Farbwerte kommen
   komplett aus den Theme-Variablen — Dark-Mode läuft automatisch mit. */
.ac-list { border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); box-shadow: 0 10px 24px rgba(27, 23, 20, .10); max-height: 250px; overflow: auto; margin: 2px 0 8px; }
.ac-row { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--line); }
.ac-row:last-child { border-bottom: none; }
.ac-row:hover, .ac-row:focus-visible { background: var(--card-2); outline: none; }
.ac-main { font-size: 13px; font-weight: 650; color: var(--ink); display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ac-main > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-sub { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-badge { font-size: 10px; font-weight: 700; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: 1px 7px; letter-spacing: .02em; white-space: nowrap; flex: none; margin-left: auto; }
.ac-sec { padding: 6px 12px 4px; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2); background: var(--paper-2); border-bottom: 1px solid var(--line); position: sticky; top: 0; }
.ac-note { padding: 7px 12px; font-size: 12px; color: var(--muted); }

/* ── Preiskalkulation / Aufmaß (kalk-lib.js) ─────────────────────────────── */
.kalk-container-row > td { background: var(--surface-2); border-radius: 12px; padding: 16px 18px; }
.kalk-panel { border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin: 8px 0; background: var(--surface); }
.kalk-kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.kalk-titel { font-weight: 800; font-size: 15px; }
.kalk-radio { font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; }
/* Dropdowns APP-WEIT im App-Look (wie .editor-table input): eigener Pfeil statt
   Browser-Optik — gilt bewusst global, damit alle Ansichten dieselbe Sprache sprechen */
select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding: 7px 28px 7px 10px; border: 1px solid var(--line); border-radius: 7px;
  font-size: 13.5px; font-family: inherit; background-color: #fafaf7; color: inherit; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 12px 8px;
}
select:focus { outline: 2px solid var(--accent); border-color: transparent; }
/* Combobox (ui.js comboInput): tippen filtert, Klick zeigt immer ALLE Optionen */
.combo { position: relative; display: inline-flex; align-items: center; }
.combo .combo-input { width: 100%; padding-right: 26px; }
.combo-btn { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; cursor: pointer; color: var(--muted); font-size: 11px; padding: 4px 6px; line-height: 1; }
.combo-btn:hover { color: var(--accent); }
.combo-list { position: absolute; top: 100%; left: 0; min-width: 100%; width: max-content; max-width: 220px; z-index: 60; }
.combo-row { white-space: nowrap; padding: 7px 12px; font-size: 13px; }
.combo-akt { font-weight: 800; color: var(--accent); }
.combo-hi { background: var(--card-2); }
html.dark select {
  background-color: var(--card-2); border-color: var(--line-2);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23aaa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Kosten-Tabelle: Art | Menge | Einheit | Beschreibung | EK | EK gesamt | 🗑 (wie Plancraft).
   Elastisch: die Beschreibung gibt nach, damit nichts an der Positions-Bibliothek abgeschnitten wird. */
.kalk-spalten, .kalk-zeilen .kalk-zeile { display: grid; grid-template-columns: minmax(120px, 145px) minmax(80px, 95px) minmax(80px, 95px) minmax(150px, 1fr) minmax(90px, 105px) minmax(85px, 100px) 32px; gap: 8px; align-items: center; }
.kalk-spalten { color: var(--muted); font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.kalk-spalten .ta-r { text-align: right; }
.kalk-zeilen .kalk-zeile { margin: 6px 0; }
.kalk-zeilen .kalk-zeile .kalk-num { width: 100%; }
.kalk-zeilen .kalk-zeile .kalk-einheit, .kalk-zeilen .kalk-zeile .kalk-art { width: 100%; }
.kalk-zeile { display: flex; gap: 8px; align-items: center; margin: 6px 0; flex-wrap: wrap; }
.kalk-zeile .kalk-text { flex: 1; min-width: 220px; }
.kalk-add { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; }
.kalk-num { width: 100px; text-align: right; }
.kalk-einheit { width: 90px; }
.kalk-zsumme { min-width: 100px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13.5px; }
.kalk-verkauf { margin-top: 14px; border-top: 1px dashed var(--border); padding-top: 12px; }
.kalk-vkopf, .kalk-vzeile, .kalk-vsumme { display: grid; grid-template-columns: minmax(70px, 100px) minmax(95px, 120px) 14px minmax(95px, 120px) minmax(85px, 100px) 14px minmax(95px, 120px) minmax(0, 1fr); gap: 8px; align-items: center; font-size: 13.5px; padding: 3px 0; }
.kalk-vkopf { color: var(--muted); font-size: 12px; font-weight: 700; }
.kalk-vzeile .kv-ek, .kalk-vzeile .kv-zb, .kalk-vzeile .kv-vk, .kalk-vsumme .kv-ek, .kalk-vsumme .kv-zb, .kalk-vsumme .kv-vk, .kalk-vkopf .kv-ek, .kalk-vkopf .kv-zb, .kalk-vkopf .kv-vk { text-align: right; font-variant-numeric: tabular-nums; }
.kalk-vsumme { font-weight: 700; border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; }
/* Hinweise unter der Kalkulation: fehlende Menge (Position waere 0,00) bzw. Cent-Rundung */
/* Empfaenger einer Rechnung an Dritte: Suche + Neuanlage im Formularfeld */
.dritte-box { display: block; }
.dritte-box .ac-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; }
.dritte-ok { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--ok, #16a34a) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok, #16a34a) 30%, transparent); font-size: 14px; }

/* Erklaerung neben einem gesperrten Anlegen-Knopf */
.gesperrt-hinweis { flex: 1 1 100%; margin-top: 6px; line-height: 1.4; }
.modal-actions { flex-wrap: wrap; }

/* Warnkarte (z. B. unvollstaendig finalisierte Belege) */
.warn-card { padding: 14px 16px; border-radius: 12px;
  background: color-mix(in srgb, var(--warn, #d97706) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn, #d97706) 34%, transparent); }
.warn-card h2 { font-size: 16px; }

/* Ladezustand in Dialogen: Fenster erscheint sofort, Inhalt kommt nach */
.lade-block { display: flex; align-items: center; gap: 10px; padding: 18px 2px; color: var(--muted); font-size: 14px; }
.spinner { width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--fg, #333) 18%, transparent);
  border-top-color: var(--accent, #2563eb); animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }
.kalk-warn { margin-top: 8px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; line-height: 1.45;
  background: color-mix(in srgb, var(--warn, #d97706) 12%, transparent); color: var(--warn, #b45309);
  border: 1px solid color-mix(in srgb, var(--warn, #d97706) 32%, transparent); }
.kalk-warn.sanft { background: transparent; border: 0; padding: 4px 0 0; color: var(--muted); font-size: 12px; }
.kv-zp { display: inline-flex; align-items: center; gap: 3px; justify-content: flex-end; }
.kv-zp .kalk-num { width: 64px; }
.kv-extra { text-align: left; }
.kalk-locked { background: var(--surface-2); color: var(--muted); }
.kalk-schliessen { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.kalk-ac { position: absolute; z-index: 40; left: 0; right: 0; top: 100%; max-height: 260px; overflow: auto; }
.btn.mini.on { outline: 2px solid var(--accent, #2e7d32); }
/* Aufmaß-Zeilen in Plancraft-Optik: „1) Bezeichnung | Formel | = Wert" als festes
   Raster, damit die Werte untereinander stehen wie im Aufmaßteil der Plancraft-PDF. */
.aufmass-zeilen .aufmass-zeile { display: grid; grid-template-columns: 34px minmax(140px, 1fr) minmax(190px, 1.1fr) 14px minmax(110px, 130px) 32px;
  gap: 8px; align-items: center; margin: 5px 0; }
.aufmass-nr { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; font-size: 12.5px; }
.aufmass-gleich { color: var(--muted); text-align: center; }
.aufmass-formel { width: 100%; font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; font-size: 13px; }
.aufmass-formel.formel-fehler { border-color: var(--danger, #c62828); background: color-mix(in srgb, var(--danger, #c62828) 6%, transparent); }
.aufmass-wert { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.aufmass-summe { display: flex; gap: 10px; justify-content: space-between; font-weight: 800; border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; }
.aufmass-summe .stark { font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .aufmass-zeilen .aufmass-zeile { grid-template-columns: 26px 1fr 32px; }
  .aufmass-zeilen .aufmass-zeile .aufmass-formel { grid-column: 2 / -1; }
  .aufmass-zeilen .aufmass-zeile .aufmass-gleich { display: none; }
  .aufmass-zeilen .aufmass-zeile .aufmass-wert { grid-column: 2 / -1; text-align: left; }
}
/* Options-Leiste in der Ausklappkarte („Preiskalkulation" / „Aufmaß" zuschalten) */
.pos-details { display: flex; flex-direction: column; gap: 6px; }
.kalk-optionen { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 2px 0 4px; }
.kalk-opt { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; border: 1px solid var(--border); border-radius: 999px; padding: 7px 16px; cursor: pointer; background: var(--surface); }
.kalk-opt.on { border-color: var(--accent, #2e7d32); color: var(--accent, #2e7d32); background: color-mix(in srgb, var(--accent, #2e7d32) 8%, var(--surface)); }
/* Einheitspreis/Gesamtpreis-Umschalter */
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg-btn { border: 0; background: var(--surface); padding: 7px 16px; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--muted); }
.seg-btn.on { background: var(--accent, #2e7d32); color: #fff; }
/* Upload-Kacheln (Foto aufnehmen / Bild wählen / PDF anhängen) — groß und
   touch-tauglich (Feedback Niklas 04.08.: Mini-Buttons waren zu klein) */
.upload-tiles { display: flex; gap: 12px; flex-wrap: wrap; margin: 10px 0 12px; }
.upload-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-width: 175px; min-height: 88px; padding: 14px 20px; flex: 0 1 auto;
  border: 1.5px dashed var(--border); border-radius: 12px; background: var(--surface);
  cursor: pointer; font-family: inherit; color: inherit; transition: border-color .12s ease, background .12s ease; }
.upload-tile:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.ut-icon { font-size: 26px; line-height: 1; }
.ut-label { font-weight: 800; font-size: 13.5px; }
.ut-sub { font-size: 11.5px; color: var(--muted); }
@media (max-width: 720px) { .upload-tile { flex: 1 1 100%; min-height: 68px; } }
/* Bilder an Position/Dokument (Editor): Thumbnails + Anlagen-Zeilen */
.pos-bilder { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
/* Kachel jetzt breiter: darunter stehen Größenwahl und Bildunterschrift (10.08.) */
.pos-bild { position: relative; width: 168px; display: flex; flex-direction: column; gap: 5px; }
.pos-bild img { width: 168px; height: 116px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); display: block; }
.pos-bild-weg { position: absolute; top: -7px; right: -7px; }
.pos-bild-groesse { display: flex; gap: 3px; }
.pos-bild-groesse .btn { flex: 1; padding: 3px 0; font-size: 11px; }
.pos-bild-groesse .btn.on { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; }
.pos-bild-text {
  width: 100%; font: inherit; font-size: 11.5px; padding: 4px 6px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink);
}
.pos-bild-text:focus { outline: 2px solid var(--cyan); border-color: transparent; }
/* Die gewählte Größe auch in der Maske andeuten, damit man sie ohne PDF sieht */
.pos-bild.pb-klein img { height: 84px; }
.pos-bild.pb-gross img { height: 140px; }
.anlage-row { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 13px; background: var(--surface); }
.anlagen-card { margin-top: 16px; border-top: 1px dashed var(--border); padding-top: 12px; }
/* Von Hand setzbare Positionsnummer (Angebot wie Rechnung) — schmal, tabellarisch */
.oz-input { font-variant-numeric: tabular-nums; font-size: 12.5px; padding-left: 4px; padding-right: 4px; }
/* Freier Textblock zwischen zwei Positionen (Angebot, AB, Nachtrag, Rechnung) */
.textblock-row td { background: color-mix(in srgb, var(--accent, #2e7d32) 3%, transparent); }
.textblock-ta { width: 100%; resize: vertical; min-height: 46px; }
/* Langtexte: wachsen automatisch mit, lassen sich aber am Griff frei groesser/kleiner
   ziehen (Wunsch Niklas 07.08.: „aus- und einblenden, groesser und kleiner machen"). */
.langtext-ta { width: 100%; resize: vertical; }
.langtext-add { margin-top: 3px; opacity: .75; }
.langtext-add:hover { opacity: 1; }
/* Ganze Positionszeile ist klickbar (Felder/Buttons ausgenommen) und öffnet die Karte */
.pos-clickable td { cursor: pointer; }
.editor-table .pos-clickable:hover td { background: color-mix(in srgb, var(--accent, #2e7d32) 3%, transparent); }
/* Chevron in der Nr-Zelle + „mit Kalkulation"-Badge (Klick öffnet die Karte) */
.nr-click { cursor: pointer; user-select: none; white-space: nowrap; }
.pos-clickable:hover .pos-chevron { color: var(--accent, #2e7d32); }
.pos-chevron { display: inline-block; margin-right: 3px; color: var(--muted); transition: transform .12s ease; font-size: 11px; }
.pos-chevron.open { transform: rotate(90deg); }
.kalk-badge { display: block; border: 0; background: transparent; color: var(--accent, #2e7d32); font-size: 10.5px; font-weight: 700; cursor: pointer; padding: 1px 0 0; text-align: right; width: 100%; }
.kalk-badge:hover { text-decoration: underline; }
.qty-cell .kalk-badge { text-align: left; }
@media (max-width: 720px) {
  .kalk-vkopf, .kalk-vzeile, .kalk-vsumme { grid-template-columns: 70px 80px 10px 80px 74px 10px 84px 1fr; font-size: 11.5px; }
  .kalk-spalten { display: none; }
  .kalk-zeilen .kalk-zeile { grid-template-columns: 1fr 1fr 1fr; }
  .kalk-zeilen .kalk-zeile .kalk-text { grid-column: 1 / -1; }
}

/* LV-Summenblock mit GAEB-Nachlass (§4, 04.08.) */
.lv-summen { margin: 4px 0 12px; max-width: 460px; font-size: 13px; }
.lv-summen div { display: flex; justify-content: space-between; gap: 24px; padding: 3px 0; }
.lv-summen .gross-line { border-top: 1px solid var(--line-2); margin-top: 3px; padding-top: 6px; font-size: 14px; }
.lv-summen .hint { display: block; text-align: left; padding-top: 6px; }


/* ── Projekt-Übersicht: Zahlen links, Projekt-Chat rechts daneben (Niklas 10.08.) ──
   Der Chat ersetzt die frühere „Notiz"-Karte und steht auf gleicher Höhe wie die
   Umsatzzahlen. Unter 1100 px stapelt das Raster — am Handy steht der Chat unter
   den Zahlen statt in einer unlesbar schmalen Spalte. */
.uebersicht-top {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 14px; align-items: start;
}
@media (max-width: 1100px) { .uebersicht-top { grid-template-columns: 1fr; } }

.chat-card { display: flex; flex-direction: column; }
/* Der Verlauf wächst mit, läuft aber nicht davon: ab einer gewissen Länge scrollt er
   in sich, damit die Karte neben den Zahlen nicht die halbe Seite hoch wird. */
.chat-verlauf {
  flex: 1; min-height: 200px; max-height: 440px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px; padding-right: 4px;
}
.chat-msg {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card-2); padding: 7px 9px;
}
.chat-msg.eigene { background: var(--card); border-color: var(--line-2); }
.chat-msg.angeheftet { border-left: 3px solid var(--gold); }
.chat-msg.geloescht { opacity: .55; }
.chat-kopf {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 11.5px; color: var(--muted); margin-bottom: 3px;
}
.chat-text { font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-text a { color: var(--brand-blue); }
.chat-werkzeuge { display: flex; gap: 10px; margin-top: 4px; }
.chat-tool {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 11.5px; color: var(--muted); text-decoration: underline;
}
.chat-tool:hover { color: var(--ink); }
.chat-senden { margin-top: 8px; }
.chat-eingabe { width: 100%; resize: vertical; }

/* ── Angebote & Rechnungen: Projekt-Chat rechts neben den Belegen (Niklas 11.08.) ──
   Etwas mehr Luft (18px) als in der Übersicht, damit der Chat nicht an den Listen
   klebt. „ausblenden" klappt die Spalte auf einen schmalen 💬-Knopf zusammen
   (.chat-zu); unter 1250 px stapelt das Raster, der Chat steht dann unter den Belegen. */
.kaufm-mit-chat {
  /* Chat FIX 320px statt anteilig (Befund Niklas 11.08., P-30007: die anteilige Spalte
     nahm den Beleg-Zeilen so viel Breite, dass die Titel hochkant zerrieben wurden). */
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px; align-items: start;
}
.kaufm-mit-chat.chat-zu { grid-template-columns: minmax(0, 1fr) auto; }
/* Der Chat scrollt beim Blättern durch lange Beleg-Listen mit — bleibt aber unterhalb
   der klebenden Kopfzeilen der Seite (top an .tabs vorbei). */
.kaufm-chat-spalte { position: sticky; top: 12px; min-width: 0; }
/* Sicherheitsnetz: wird es links doch mal eng (Zeilen mit vielen Knöpfen), brechen die
   Aktionen UNTER den Titel um, statt ihn in eine schmale Hochkant-Spalte zu quetschen. */
.kaufm-links .fin-row { flex-wrap: wrap; }
.kaufm-links .fin-row .fl { flex: 1 1 320px; }
/* Früh stapeln (1500px statt 1250px): lieber der Chat unter den Belegen als
   zusammengedrückte Beleg-Zeilen. */
@media (max-width: 1500px) {
  .kaufm-mit-chat, .kaufm-mit-chat.chat-zu { grid-template-columns: 1fr; }
  .kaufm-chat-spalte { position: static; }
}

/* ── Formatierbarer Brieftext + Projektordner-Picker (Spec Niklas 12.08.2026) ──────
   Der Brief hatte nur ein Textfeld. Jetzt: Werkzeugleiste (fett/kursiv/unterstrichen,
   Bullet- und Nummernliste), Bilder MITTEN im Text (Kamera, Galerie, Projektordner,
   Strg+V) und Anlagen. Die Eingabefläche übernimmt bewusst exakt die Optik der übrigen
   Editor-Felder (.editor-head textarea): 1 px --line, Radius 7, #fafaf7, Fokusring. */
.brief-rte-box { display: flex; flex-direction: column; gap: 8px; }
.rte-leiste, .rte-bildmenu, .bf-steller {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.rte-leiste { padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.rte-bildmenu, .bf-steller {
  padding: 7px 9px; border: 1px solid var(--accent); border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.bf-steller-label { font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: .03em; }
.rte-btn { line-height: 1.1; }
.rte-btn.ist-aktiv { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.rte-trenn { width: 1px; align-self: stretch; margin: 0 3px; background: var(--line); }

.brief-rte {
  min-height: 320px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 7px;
  background: #fafaf7; font-family: inherit; font-size: 13.5px; line-height: 1.6;
  overflow-wrap: anywhere;
}
.brief-rte:focus { outline: 2px solid var(--accent); border-color: transparent; }
.brief-rte[contenteditable="false"] { background: var(--surface); color: var(--ink-2); }
/* Absätze ohne Rand + Mindesthöhe einer Zeile — genau wie im PDF, damit die Maske zeigt,
   was gedruckt wird (Leerzeile = Abstand). */
.brief-rte p { margin: 0; min-height: 1.6em; }
.brief-rte ul, .brief-rte ol { margin: 5px 0; padding-left: 24px; }
.brief-rte ul { list-style: disc; }
.brief-rte ol { list-style: decimal; }
.brief-rte li { margin: 0 0 2px; }
/* Zwischenueberschrift / Hinweiskasten / Trennlinie: keine eigenen Knoepfe (die Leiste
   sollte knapp bleiben), aber sie werden angezeigt und behalten — ein Agent kann sie
   ueber Markdown-lite schicken, und dann muss man sie in der Maske auch sehen. */
.brief-rte h3 { font-size: 14px; font-weight: 700; margin: 12px 0 4px; }
.brief-rte blockquote { margin: 8px 0; padding: 7px 11px; background: var(--surface); border-left: 3px solid var(--muted); }
.brief-rte hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }
.brief-rte strong { font-weight: 700; }
.brief-rte em { font-style: italic; }
.brief-rte u { text-decoration: underline; }

/* Bildblock im Text: gleiche drei Größen wie im Angebots-PDF (32 / 49 / 100 %) */
.brief-rte figure.bf-bild {
  margin: 8px 0; display: inline-block; vertical-align: top; position: relative;
  border: 1px solid transparent; border-radius: 6px; cursor: pointer; max-width: 100%;
}
/* Breite kommt als inline width in Prozent aus data-breite (frei gezogen).
   inline-block + Umbruch-Regel: aufeinanderfolgende Bilder stehen NEBENEINANDER, solange
   ihre Breiten zusammen passen, und rutschen sonst von selbst in die naechste Zeile —
   „nebeneinander oder untereinander, je nachdem wie man es haben will" (Niklas 12.08.). */
.brief-rte figure.bf-bild.umbruch { display: block; clear: both; }
.brief-rte figure.bf-bild.a-mittig { display: block; margin-left: auto; margin-right: auto; }
.brief-rte figure.bf-bild.a-rechts { display: block; margin-left: auto; margin-right: 0; }

/* Ziehgriff rechts — bewusst gross genug fuer den Finger (44 px hoch, 14 px breit) */
.brief-rte figure.bf-bild .bf-griff {
  position: absolute; right: -7px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 44px; border-radius: 7px; cursor: ew-resize;
  background: var(--accent); border: 2px solid var(--card); opacity: 0; transition: opacity .12s;
  touch-action: none;
}
.brief-rte figure.bf-bild:hover .bf-griff,
.brief-rte figure.bf-bild.aktiv .bf-griff { opacity: 1; }
.brief-rte figure.bf-bild.zieht { user-select: none; }
.brief-rte figure.bf-bild.zieht .bf-griff { opacity: 1; }
/* Breite waehrend des Ziehens direkt am Bild anzeigen */
.brief-rte figure.bf-bild[data-zeigt]::after {
  content: attr(data-zeigt); position: absolute; right: 8px; top: 8px;
  background: var(--ink); color: var(--paper); font-size: 11px; font-weight: 700;
  padding: 2px 6px; border-radius: 5px; pointer-events: none;
}
.bf-ziehhinweis { font-size: 11px; }
.brief-rte figure.bf-bild.aktiv { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Breite aus der Box, Höhe gedeckelt, `width:auto` = Rahmen umschließt das Bild eng.
   Gleiche Regel wie in brief-druck.html, damit die Maske zeigt was gedruckt wird:
   Querformat füllt die Box, Hochformat wird schmaler statt seitensprengend hoch. */
/* Das Bild fuellt seine Box GENAU aus: die Box-Breite ist ja frei gezogen, also gibt es
   keinen Grund mehr fuer object-fit-Weissraum oder einen Hoehendeckel. Zu hoch geratenes
   Hochformat zieht man einfach schmaler — wie in PowerPoint. */
.brief-rte figure.bf-bild img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 4px; }
/* wie im PDF: die Ausrichtung muss auch INNERHALB der Box greifen, sonst bleibt ein
   „mittig" gesetztes Bild linksbündig, wenn es schmaler als seine Box ist */
.brief-rte figure.bf-bild.a-mittig img { margin-left: auto; margin-right: auto; }
.brief-rte figure.bf-bild.a-mittig figcaption { text-align: center; }
.brief-rte figure.bf-bild.a-rechts img { margin-left: auto; margin-right: 0; }
.brief-rte figure.bf-bild.a-rechts figcaption { text-align: right; }
.brief-rte figure.bf-bild figcaption { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
/* Ohne Unterschrift bleibt im Text nichts stehen — getippt wird sie im Feld der
   Bild-Bedienleiste (bf-cap), nicht im Text selbst. */
.brief-rte figure.bf-bild figcaption[data-leer="1"] { display: none; }
.bf-cap {
  flex: 1 1 220px; min-width: 160px; padding: 5px 8px; font-size: 12.5px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 6px; background: var(--card);
}
.bf-cap:focus { outline: 2px solid var(--accent); border-color: transparent; }

/* Projektordner-Picker: Dateien suchen, die schon in der Projektakte liegen */
.picker-modal { width: 720px; }
.picker-suche {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; font-family: inherit; background: #fafaf7;
}
.picker-suche:focus { outline: 2px solid var(--accent); border-color: transparent; }
.picker-liste {
  max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface);
}
.picker-zeile {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.picker-zeile:last-child { border-bottom: 0; }
.picker-zeile:hover { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.picker-zeile.gewaehlt { background: var(--accent-soft); }
.picker-vorschau {
  width: 46px; height: 46px; flex: none; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 6px; background: var(--card); font-size: 20px; overflow: hidden;
}
.picker-vorschau img { width: 100%; height: 100%; object-fit: cover; }
.picker-text { min-width: 0; flex: 1; }
.picker-name { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.picker-sub { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.picker-haken { width: 20px; flex: none; text-align: center; color: var(--accent); font-weight: 700; }
@media (max-width: 720px) {
  .picker-vorschau { width: 38px; height: 38px; }
}

/* ── Beleg-Reiter: Zuordnung in der Zeile (13.08.2026) ─────────────────────
   Vorher stand hier ein <select> mit ~70 Baustellen — unbrauchbar zu bedienen und optisch
   ein Fremdkörper (Befund Niklas). Jetzt: Suchfeld mit Vorschlagsliste im App-Stil. */
.beleg-zielbox { position: relative; flex: 0 1 260px; min-width: 180px; }
.beleg-ziel {
  width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px;
  font: inherit; font-size: 13px; background: var(--card); color: var(--ink);
  text-overflow: ellipsis;
}
.beleg-ziel::placeholder { color: var(--muted); }
.beleg-ziel:focus { outline: 2px solid var(--cyan); border-color: transparent; }
.beleg-ziel:disabled { opacity: .55; }
.beleg-vorschlaege {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 320px; overflow-y: auto; background: var(--card);
  border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 10px 28px rgba(0,0,0,.16);
  padding: 4px;
}
.beleg-vorschlag {
  padding: 7px 9px; border-radius: 6px; cursor: pointer; line-height: 1.3;
}
.beleg-vorschlag:hover, .beleg-vorschlag.aktiv { background: var(--accent-soft); }
.beleg-vorschlag .bv-name { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.beleg-vorschlag .bv-meta { display: block; font-size: 11.5px; color: var(--muted); }
.beleg-kostenart {
  padding: 7px 8px; border: 1px solid var(--line); border-radius: 7px;
  font: inherit; font-size: 12.5px; background: var(--card); color: var(--ink);
  flex: 0 0 auto; max-width: 165px;
}
.beleg-kostenart:focus { outline: 2px solid var(--cyan); border-color: transparent; }
@media (max-width: 720px) {
  .beleg-zielbox { flex-basis: 100%; }
  .beleg-kostenart { max-width: none; flex: 1 1 auto; }
}


/* Aufteilen-Knopf und Betragsfeld im Belege-Tab (Beleg auf mehrere Baustellen) */
.beleg-splitbtn { white-space: nowrap; }
.beleg-splitbetrag { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: inherit; font-size: 13px; }
.beleg-splitbetrag:focus { outline: 2px solid var(--cyan); border-color: transparent; }

/* Zwei Panels im selben Platz rechts (Bibliothek ⇄ Rahmenvertrag, 17.08.2026):
   Der Stack übernimmt Breite/Sticky von .pos-lib, die Panels darin füllen ihn aus. */
.pos-lib-stack { flex: 0 0 var(--poslib-w, 330px); width: var(--poslib-w, 330px); margin-top: 14px;
  position: sticky; top: 12px; max-height: calc(100vh - 30px);
  display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.pos-lib-stack > .pos-lib { width: 100%; flex: 1 1 auto; margin-top: 0; position: static;
  max-height: none; min-height: 0; }
.pos-stack-tabs { display: flex; gap: 4px; }
.pos-stack-tabs .seg { flex: 1 1 auto; font-size: 12.5px; padding: 5px 8px; }

/* ── Rahmenvertrags-Panel (rahmen-lib.js) ──────────────────────────────────
   Rückmeldung Niklas 17.08.2026: „nicht so klein rechts — groß in der Mitte, wie ein
   Angebot, oder wenigstens deutlich breiter und selbst ziehbar." Deshalb Zeilen mit
   festen Spalten (Nr. · Leistung · Einheit · EP · Menge) statt schmaler Kärtchen. */
.rv-panel .pos-lib-head { align-items: center; }
/* Titelzeile ist seit 20.08.2026 ein Label mit eigenem Haken — ein ganzer Titel („Regie")
   lässt sich damit auf einmal an- und abwählen. Der Zähler rechts zeigt „3 von 57". */
.rv-gruppe-t { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin: 12px 2px 3px;
  display: flex; align-items: center; gap: 8px; cursor: pointer; }
.rv-gruppe-t input[type="checkbox"] { flex: none; margin: 0; cursor: pointer; }
.rv-gruppe-n { margin-left: auto; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--muted-2); font-size: 11px; white-space: nowrap; }
.rv-kopf-btns { display: flex; align-items: center; gap: 6px; }
.rv-kopf-btns .btn.mini[disabled] { opacity: .45; cursor: default; }
.rv-zeile { display: grid; align-items: start; gap: 8px; padding: 7px 4px;
  grid-template-columns: 20px 46px minmax(0, 1fr) 52px 74px 86px;
  border-top: 1px solid rgba(128, 128, 128, .18); }
.rv-zeile:hover { background: rgba(128, 128, 128, .07); }
.rv-zeile.gewaehlt { background: var(--accent-soft, rgba(192, 22, 34, .10)); }
.rv-kopf { position: sticky; top: 0; z-index: 1; background: var(--surface, #fff);
  border-top: 0; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted-2); font-family: var(--mono); padding-bottom: 5px; }
.rv-kopf .rv-c-ep, .rv-kopf .rv-c-menge { text-align: right; }
.rv-c-chk { display: flex; align-items: center; justify-content: center; padding-top: 2px; }
.rv-c-oz { font-family: var(--mono); font-size: 12px; color: var(--muted); padding-top: 1px; }
.rv-c-txt { min-width: 0; }
.rv-titel { font-weight: 600; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.rv-beschreibung { color: var(--muted); font-size: 11.5px; line-height: 1.4; margin-top: 2px;
  white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rv-beschreibung.offen { display: block; overflow: visible; }
.rv-mehr { margin-top: 2px; font-size: 11px; }
.rv-c-eh, .rv-c-ep { font-size: 12.5px; padding-top: 1px; }
.rv-c-ep { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.rv-c-eh { color: var(--muted); }
.rv-menge { width: 100%; text-align: right; padding: 5px 7px; font-size: 13px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit; }
.rv-menge:focus { outline: 2px solid var(--accent, #c01622); border-color: transparent; }
.rv-foot { align-items: center; gap: 8px; flex-wrap: wrap; }
.rv-summe { font-weight: 700; font-variant-numeric: tabular-nums; }
/* Schmal (Panel weit zusammengeschoben): Einheit/EP rutschen unter den Text */
@media (max-width: 1400px) {
  .pos-lib-stack { min-width: 0; }
}
.rv-panel.schmal .rv-zeile { grid-template-columns: 20px 40px minmax(0, 1fr) 76px; }
.rv-panel.schmal .rv-c-eh, .rv-panel.schmal .rv-c-ep { display: none; }

/* Großansicht: dasselbe Panel als Fenster in der Bildschirmmitte */
.rv-overlay { align-items: center; justify-content: center; padding: 24px; }
.pos-lib.rv-gross { position: static; width: min(1180px, 94vw); max-width: 94vw;
  flex: 0 0 auto; margin-top: 0; max-height: 88vh; padding: 16px 18px; }
.pos-lib.rv-gross .rv-zeile { grid-template-columns: 22px 60px minmax(0, 1fr) 70px 96px 110px;
  padding: 9px 6px; }
.pos-lib.rv-gross .rv-titel { font-size: 13.5px; }
.pos-lib.rv-gross .rv-beschreibung { font-size: 12px; -webkit-line-clamp: 3; }
.pos-lib.rv-gross .pos-lib-info { font-size: 11.5px; }
.rv-platzhalter { display: none; }

/* Langtext einer EINZELNEN Position vom Beleg nehmen (kalk-lib langtextSchalter) */
.langtext-aus { margin-top: 3px; font-size: 11px; padding: 2px 7px; opacity: .75; }
.langtext-aus:hover { opacity: 1; }
.langtext-aus.an { opacity: 1; border-color: var(--accent, #c01622); color: var(--accent, #c01622); }
.langtext-aus-hinweis { font-size: 11.5px; color: var(--muted); font-style: italic; margin: 3px 0 0; }
/* Eingeklappter Langtext: EINE anklickbare Zeile mit Textanfang. Sie ersetzt das
   Textfeld, wenn der Text nicht auf dem Beleg steht — ein gespeicherter Langtext darf
   im Editor nie unsichtbar UND unerreichbar sein (Befund Niklas 18.08.2026). */
.langtext-vorschau {
  display: block; width: 100%; margin-top: 3px; text-align: left;
  font-size: 11.5px; font-style: italic; font-weight: 400;
  color: var(--muted); background: transparent;
  border: 1px dashed var(--border, #d5d5d5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.langtext-vorschau:hover { color: var(--fg, inherit); border-style: solid; }

/* ── Paralleles Bearbeiten (Befund Niklas 17.08.2026) ───────────────────────
   Banner „X bearbeitet diesen Beleg gerade" + Konflikt-Dialog. Bewusst ruhig
   gehalten: das ist ein Hinweis, keine Fehlermeldung — der Beleg lässt sich
   ganz normal weiterbearbeiten, die Änderungen werden ja zusammengeführt. */
.parallel-banner {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 7px 12px;
  background: var(--card-2); border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm); font-size: 13px; color: var(--ink-2);
}
.parallel-banner[hidden] { display: none; }
.parallel-banner .parallel-punkt {
  color: var(--gold); font-size: 10px; line-height: 1;
  animation: parallel-puls 2.4s ease-in-out infinite;
}
@keyframes parallel-puls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.konflikt-modal { width: min(680px, 94vw); }
.konflikt-liste { max-height: 52vh; overflow-y: auto; margin: 0 0 16px; }
.konflikt-punkt { padding: 10px 0; border-top: 1px solid var(--line); }
.konflikt-punkt:first-child { border-top: none; }
.konflikt-feld { font-weight: 600; font-size: 13.5px; margin-bottom: 2px; }
.konflikt-grund { margin: 0 0 6px; font-size: 12px; }
/* Zwei gleich große Knöpfe nebeneinander — keiner ist vorbelegt, damit niemand
   aus Versehen die Arbeit des anderen wegklickt. */
.konflikt-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.konflikt-wahl .btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  text-align: left; padding: 7px 10px; height: auto; white-space: normal;
}
.konflikt-wahl .kv-wert {
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  overflow-wrap: anywhere;
}
.konflikt-wahl .btn.primary .kv-wert { color: inherit; opacity: .85; }

/* ── Agenten-Chat (Beta 19.08.2026): kleines Fenster zu Freddie/Max ──────────
   Auftrag Niklas: „Ich drücke ein Kürzel (Strg+K) und bin sofort im Chatfenster,
   das sich klein öffnet … und am Handy gibt es immer so einen kleinen Chat-Knopf
   zum Agenten." Deshalb: runder Knopf unten rechts (immer da) + Panel, das sich
   darüber aufklappt. Am Handy wird daraus ein Blatt über die volle Breite.
   Ebenen: Knopf/Panel 90/91 — über der mobilen Seitenleiste (65) und dem
   Zeiterfassungs-Knopf (70), aber UNTER Dialogen (1000) und dem Login (10000). */
/* SPRECHBLASE mit Roboter darin (Vorgabe Niklas 19.08.): die Blasenform sagt „Chat",
   der Roboter „mit einem Agenten". Die Ecke unten links ist eckig statt rund — das
   ergibt den Blasen-Zipfel, ohne ein zweites Element und ohne Grafik. */
.ac-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 54px; height: 54px; padding: 0;
  border-radius: 27px 27px 27px 7px;
  border: 1px solid var(--accent-dark);
  background: var(--accent); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(43, 33, 22, .22);
  transition: transform .12s ease, box-shadow .12s ease;
}
.ac-fab:hover { transform: translateY(-1px); box-shadow: 0 9px 26px rgba(43, 33, 22, .28); }
.ac-fab.aktiv { transform: scale(.94); }
.ac-fab-ico { font-size: 22px; line-height: 1; }
.ac-badge {
  position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--ink); color: var(--paper);
  font: 700 11.5px/20px var(--sans); display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--paper);
}
/* Arbeitet gerade: der Knopf pulst leise weiter, auch wenn das Fenster zu ist. */
.ac-fab.arbeitet::after {
  content: ""; position: absolute; inset: -4px; border-radius: 31px 31px 31px 9px;
  border: 2px solid var(--accent); opacity: .55; animation: ac-puls 1.6s ease-out infinite;
}
@keyframes ac-puls { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.28); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ac-fab.arbeitet::after { animation: none; } }

/* Der Zeiterfassungs-Knopf (mobil, unten rechts) rückt hoch, damit sich die beiden
   nicht überlagern — der Chat ist app-weit, der andere gilt nur für eine Ansicht. */
body.hat-agentchat .zk-fab { bottom: 84px; }

.ac-panel {
  position: fixed; right: 18px; bottom: 84px; z-index: 91;
  width: 390px; max-width: calc(100vw - 36px);
  height: min(600px, calc(100vh - 130px));
  display: none; flex-direction: column;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift); overflow: hidden;
}
.ac-panel.auf { display: flex; }

.ac-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 12px 10px 14px; border-bottom: 1px solid var(--line);
  background: var(--card-2); flex: none;
}
/* Der Titel ist ein Knopf: darauf tippen klappt zu (großes Tippziel am Handy). */
.ac-titel {
  display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px;
  color: var(--ink); background: transparent; border: 0; cursor: pointer;
  padding: 4px 6px 4px 0; margin: 0; font-family: var(--sans); text-align: left;
  border-radius: var(--radius-sm);
}
.ac-titel:hover { background: var(--card); }
.ac-punkt { width: 8px; height: 8px; border-radius: 999px; background: var(--ok); flex: none; }
/* Solange gearbeitet wird, pulst der Punkt — sichtbar auch dann, wenn man im Verlauf
   nach oben gescrollt hat und die Arbeits-Zeile nicht im Bild ist. */
.ac-punkt.arbeitet { background: var(--accent); animation: ac-punkt-puls 1.3s ease-in-out infinite; }
@keyframes ac-punkt-puls { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
@media (prefers-reduced-motion: reduce) { .ac-punkt.arbeitet { animation: none; } }
.ac-beta {
  font: 600 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 6px;
}
.ac-kopf-tools { display: flex; gap: 2px; }
.ac-tool {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 6px 8px; border-radius: var(--radius-sm);
}
.ac-tool:hover { color: var(--ink); background: var(--card); }

.ac-kontext {
  display: flex; align-items: center; gap: 6px; flex: none;
  padding: 7px 12px; border-bottom: 1px solid var(--line); background: var(--card);
  font-size: 12px; color: var(--muted);
}
.ac-kontext-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-kontext-weg, .ac-kontext-an {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 12px; padding: 2px 4px; border-radius: var(--radius-sm); margin-left: auto;
}
.ac-kontext-weg:hover, .ac-kontext-an:hover { color: var(--ink); }
.ac-kontext-an { margin-left: 0; }

.ac-verlauf { flex: 1 1 auto; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ac-msg { border-radius: 11px; padding: 8px 11px; border: 1px solid var(--line); background: var(--card-2); }
.ac-msg.ac-ich { background: var(--accent-soft); border-color: var(--line-2); }
.ac-msg-kopf {
  display: flex; justify-content: space-between; gap: 10px; margin-bottom: 3px;
  font: 600 11px/1.3 var(--sans); color: var(--muted); letter-spacing: .02em;
}
.ac-text { font-size: 13.5px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; }
.ac-msg.ac-agent .ac-text { white-space: normal; }
.ac-text p { margin: 0 0 6px; }
.ac-text p:last-child { margin-bottom: 0; }
.ac-text ul, .ac-text ol { margin: 4px 0 6px; padding-left: 20px; }
.ac-text li { margin: 2px 0; }
.ac-text code { font-family: var(--mono); font-size: 12px; background: var(--paper-2); padding: 1px 4px; border-radius: 4px; }
.ac-text pre { background: var(--paper-2); padding: 8px 10px; border-radius: 7px; overflow-x: auto; margin: 6px 0; }
.ac-text pre code { background: none; padding: 0; }
.ac-text a { color: var(--brand-blue); }
.ac-text h1, .ac-text h2, .ac-text h3, .ac-text h4 { font-size: 13.5px; margin: 6px 0 3px; }
.ac-msg-dateien { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.ac-system {
  font-size: 12px; color: var(--muted); text-align: center; padding: 3px 8px;
  border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line);
}
.ac-leer { color: var(--muted); font-size: 13px; line-height: 1.55; padding: 18px 6px; text-align: center; }
.ac-leer-titel { font-weight: 700; color: var(--ink); font-size: 14.5px; margin-bottom: 6px; }
.ac-leer-tipp { margin-top: 12px; font-size: 11.5px; color: var(--muted-2); }

/* Zuschnitt Niklas: erst zwei Sätze „was ich jetzt tue", danach nur noch der Ticker,
   am Ende die fertige Antwort. Das Vorhaben steht deshalb ÜBER der Arbeits-Zeile
   und nicht als vollwertige Nachricht im Verlauf. */
.ac-status { flex: none; border-top: 1px solid var(--line); background: var(--card-2); padding: 8px 12px; }
.ac-vorhaben {
  font-size: 12.5px; line-height: 1.45; color: var(--ink-2);
  border-left: 2px solid var(--gold); padding-left: 9px; margin-bottom: 7px;
}
.ac-arbeitet { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.ac-arbeitet .ac-stopp { margin-left: auto; font-size: 13px; }
.ac-punkte { display: inline-flex; gap: 3px; }
.ac-punkte i { width: 4px; height: 4px; border-radius: 999px; background: var(--accent); animation: ac-blink 1.2s ease-in-out infinite; }
.ac-punkte i:nth-child(2) { animation-delay: .18s; }
.ac-punkte i:nth-child(3) { animation-delay: .36s; }
@keyframes ac-blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ac-punkte i { animation: none; opacity: .6; } }

.ac-fuss { flex: none; border-top: 1px solid var(--line); padding: 7px 10px 10px; background: var(--card); }
/* Reihenfolge nach Rückmeldung Niklas 19.08.: Anhang-Knöpfe ÜBER der Eingabe, damit das
   Textfeld die ganze Breite bekommt und daneben nur noch „Senden" steht. */
.ac-werkzeugzeile { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; min-height: 30px; }
.ac-werkzeugzeile .ac-tool { font-size: 17px; padding: 4px 7px; }
.ac-anhaenge { display: flex; flex-wrap: wrap; gap: 5px; margin-left: 6px; }
.ac-datei-chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  font-size: 11.5px; color: var(--ink-2); background: var(--card-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ac-datei-chip.laeuft { opacity: .6; }
.ac-chip-weg { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; padding: 0 0 0 2px; }
.ac-eingabe-zeile { display: flex; align-items: flex-end; gap: 7px; }
.ac-eingabe {
  flex: 1 1 auto; resize: none; min-height: 40px; max-height: 140px;
  border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 11px;
  font: 400 13.5px/1.45 var(--sans); background: var(--card-2); color: var(--ink);
}
.ac-eingabe:focus { outline: 2px solid var(--accent-soft); outline-offset: 0; border-color: var(--accent); }
.ac-senden { min-height: 40px; padding: 0 16px; flex: none; }

html.dark .ac-badge { border-color: var(--card); }

/* Handy: Blatt über die volle Breite, Knopf etwas kleiner. 16px Schriftgröße im
   Eingabefeld verhindert das automatische Hineinzoomen auf dem iPhone. */
@media (max-width: 640px) {
  .ac-fab { width: 52px; height: 52px; right: 14px; bottom: 14px; border-radius: 26px 26px 26px 7px; }
  .ac-panel {
    right: 0; left: 0; bottom: 0; width: auto; max-width: none;
    height: 86vh; height: 86dvh; border-radius: 16px 16px 0 0; border-bottom: 0;
  }
  /* 16px verhindert das automatische Hineinzoomen auf dem iPhone. */
  .ac-eingabe { font-size: 16px; min-height: 46px; }
  .ac-senden { min-height: 46px; padding: 0 18px; }
  .ac-werkzeugzeile .ac-tool { font-size: 20px; padding: 6px 10px; }
  .ac-kopf { padding: 12px 10px 11px 12px; }
  .ac-titel { font-size: 15.5px; padding: 6px 8px 6px 2px; }
  .ac-tool { font-size: 17px; padding: 8px 10px; }
}
/* Rückfrage des Agenten: bekommt einen Rand, damit sie im Vorbeilesen auffällt
   (Niklas 19.08.: eine Frage darf nicht in Text untergehen und unbeantwortet bleiben). */
.ac-msg.ac-frage { border-left: 3px solid var(--gold); background: var(--card); }
/* Mikrofon-Knopf (20.08.2026): drücken – sprechen – nochmal drücken. Während der
   Aufnahme zeigt der Knopf die Sekunden und pulst rot, damit niemand versehentlich
   minutenlang aufnimmt. Breiter als die anderen Werkzeuge, weil „⏹ 12s" hineinpasst. */
/* Gezeichnetes Mikrofon statt Emoji (20.08.): einfarbig, nimmt die Textfarbe an und
   passt zur Lupe in der Projektsuche. Das bunte 🎤 sah neben den anderen Bedien-
   elementen nach Spielzeug aus. */
.ac-mikro { display: inline-flex; align-items: center; gap: 5px; min-width: 34px; }
.ac-mikro svg { display: block; }
.ac-mikro-zeit { font: 700 12.5px/1 var(--sans); font-variant-numeric: tabular-nums; }
.ac-mikro.nimmt-auf, .ac-mikro.erkennt {
  color: #fff; background: var(--accent); border-radius: 999px; padding: 6px 11px;
}
.ac-mikro.nimmt-auf { animation: ac-mikro-puls 1.4s ease-in-out infinite; }
.ac-mikro.erkennt { background: var(--ink-2); }
.ac-mikro.nimmt-auf:hover { color: #fff; background: var(--accent-dark); }
.ac-mikro.erkennt:hover { color: #fff; background: var(--ink-2); }
.ac-mikro:disabled { opacity: .5; cursor: default; }
@keyframes ac-mikro-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(178, 35, 48, .45); } 50% { box-shadow: 0 0 0 6px rgba(178, 35, 48, 0); } }
@media (prefers-reduced-motion: reduce) { .ac-mikro.nimmt-auf { animation: none; } }

/* ── Finale Belege: PDF-Ansicht (Niklas 20.08.2026, zweiter Anlauf) ───────────
   Erster Wurf war ein <iframe> mit dem browsereigenen Betrachter — Befund Niklas:
   „Note 3, es lädt, und links und rechts ist ein großer grauer Rand". Das Grau kam
   von Chromes eigener Bühne, die Wartezeit von dessen Start. Jetzt rendert die App
   die Seiten selbst (pdf.js, public/js/final-ansicht.js); hier steht nur noch das
   Papier: weiße Blätter auf App-Hintergrund, so breit wie möglich (bis 1000 px). */
.final-pdf-ansicht { margin-top: 10px; }
.fpdf-buehne {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 2px 0 8px;
}
/* Ein Blatt. Die Maße setzt das Skript (Breite + Höhe aus dem Seitenverhältnis),
   damit schon der Platzhalter exakt so hoch ist wie die spätere Seite — sonst
   springt der Inhalt beim Nachzeichnen. */
.fpdf-blatt {
  position: relative; background: #fff; border-radius: 3px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .10), 0 6px 20px rgba(0, 0, 0, .10);
  max-width: 100%;
}
html.dark .fpdf-blatt { box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 26px rgba(0, 0, 0, .45); }
.fpdf-canvas { display: block; width: 100%; height: auto; }
/* Sanft einblenden: das fertige Blatt soll nicht aufblitzen. */
.fpdf-blatt.fertig .fpdf-canvas { animation: fpdfAuf .18s ease-out; }
@keyframes fpdfAuf { from { opacity: .35; } to { opacity: 1; } }

/* Platzhalter, solange pdf.js und die Bytes unterwegs sind — steht SOFORT und in
   der richtigen Größe, damit die Wartezeit nicht als Loch erscheint. */
.fpdf-platzhalter {
  background: linear-gradient(100deg, #fff 30%, #f0ece3 45%, #fff 60%);
  background-size: 300% 100%; animation: fpdfWarten 1.3s ease-in-out infinite;
}
html.dark .fpdf-platzhalter { background: linear-gradient(100deg, #2b2620 30%, #352f27 45%, #2b2620 60%); background-size: 300% 100%; }
@keyframes fpdfWarten { from { background-position: 140% 0; } to { background-position: -40% 0; } }
@media (prefers-reduced-motion: reduce) {
  .fpdf-platzhalter { animation: none; }
  .fpdf-blatt.fertig .fpdf-canvas { animation: none; }
}

/* Seitenzähler + Zoom hängen IN der Werkzeugleiste (eine Zeile, nicht zwei). */
.fpdf-steuerung { display: inline-flex; align-items: center; gap: 6px; }
.fpdf-seitenzahl {
  font-size: 12.5px; color: var(--ink-2); min-width: 78px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.fpdf-zoomzahl {
  font-size: 12.5px; color: var(--ink-2); min-width: 44px; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Kein PDF da (Altbeleg oder Rendern läuft noch). */
.fpdf-ersatz {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 48px 24px; min-height: 320px; width: 100%;
  border: 1px dashed var(--line); border-radius: 10px; background: var(--card);
}
.fpdf-ersatz .page-sub { margin: 0; max-width: 560px; }
.fpdf-ersatz-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* Mitlaufende Werkzeugleiste (Wunsch Niklas 20.08.): beim Durchscrollen langer
   Belege bleiben Herunterladen/Kopieren/Mail und der Seitenzähler oben stehen —
   sonst muss man für jeden Knopf wieder nach oben. */
.editor-toolbar.klebt {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper); border-bottom: 1px solid var(--line);
  margin: 12px 0 14px; padding: 8px 0; align-items: center;
}

/* Der ausführliche Teil des Finalisiert-Hinweises steht aufklappbar: er wird selten
   gebraucht und drängte die PDF sonst um zwei Zeilen nach unten. */
.fpdf-mehr { margin-top: 6px; }
.fpdf-mehr > summary {
  cursor: pointer; font-size: 12.5px; color: var(--ink-2);
  list-style: none; display: inline-flex; align-items: center; gap: 5px;
}
.fpdf-mehr > summary::-webkit-details-marker { display: none; }
.fpdf-mehr > summary::before { content: "▸"; font-size: 10px; transition: transform .12s; }
.fpdf-mehr[open] > summary::before { transform: rotate(90deg); }
.fpdf-mehr > summary:hover { color: var(--ink); }
.fpdf-mehr p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }

/* „Finalisierung zurücknehmen" steht UNTER der klebenden Leiste: im Sperrfall bringt
   der Knopf einen zweizeiligen Begründungstext mit, der sonst dauerhaft mitscrollt. */
.fpdf-ruecknahme { margin: -6px 0 10px; font-size: 12.5px; }
.fpdf-ruecknahme:empty { display: none; }

/* ════════════════════════════════════════════════════════════════════════════
   POSITIONS-MASKE — Sammel-Rückmeldung Niklas 20.08.2026
   Gilt für JEDE Maske mit Positionsliste: Angebot / Nachtrag / Auftragsbestätigung
   (angebot.js) und Rechnung in beiden Modi — frei und Aufmaß (rechnung.js).
   Sechs Punkte: (1) Markieren reißt die Ansicht nicht mehr weg, (2) Bibliothek
   startet zu, (3) Langtexte starten aus, (4) langer Kurztitel bricht um und die
   Aktionen rutschen in die zweite Zeile, (5) kräftiges Zeilen-Hover,
   (6) klebende Werkzeugleiste mit Speichern + PDF.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── (6) Klebende Werkzeugleiste über der Positionsliste ─────────────────────
   "Wenn ich bei einem langen Angebot nach unten scrolle, ist 'Langtext ausblenden',
   'Titel', 'Position', 'Text', 'Bild' nicht fixiert. Das möchte ich so, dass man es
   immer sieht — und links davon Speichern und PDF."
   Voraussetzung: KEIN scrollender Vorfahr. Deshalb liegt der Seitwärts-Scroll der
   Tabelle jetzt in .tab-scroll statt auf der Karte (.ang-main). */
.items-eyebrow { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.items-eyebrow .hint { font-size: 12px; }
.items-head.klebt {
  position: sticky; top: 0; z-index: 12;
  background: var(--card); border-bottom: 1px solid var(--line);
  margin: 0 -14px 8px; padding: 9px 14px;
  align-items: center; row-gap: 8px;
}
/* Beim Mitlaufen deutlich abgesetzt, im Ruhezustand ruhig — sonst wirkt die Karte
   oben wie zerschnitten. */
.items-head.klebt::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 8px;
  background: linear-gradient(to bottom, rgba(27, 23, 20, .07), transparent);
  opacity: 0; transition: opacity .15s ease; pointer-events: none;
}
.ang-main:hover .items-head.klebt::after { opacity: 1; }
.items-tat { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; }
.items-tat .save-status { font-size: 12px; }
/* Seitwärts-Scroll nur um die Tabelle (vorher auf der Karte — das machte jedes
   position:sticky darin wirkungslos). */
.tab-scroll { overflow-x: auto; scrollbar-width: thin; }
.tab-scroll::-webkit-scrollbar { height: 9px; }
.tab-scroll::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, .45); border-radius: 5px; }
.tab-scroll::-webkit-scrollbar-track { background: rgba(128, 128, 128, .10); }
@media (max-width: 860px) { .items-head.klebt { position: static; margin: 0 0 8px; padding: 0; border-bottom: 0; } }

/* Kein Wiederholen der Einblend-Animation: draw() baut die Maske bei jedem Auf-
   und Zuklappen neu auf — viewIn ließ den Kopf dabei jedes Mal um 9 px wandern. */
.kein-viewin .detail-head, .kein-viewin .section, .kein-viewin .hero, .kein-viewin .page-head { animation: none !important; }

/* ── (4) Langer Kurztitel: zwei Zeilen statt abgeschnitten ───────────────────
   Das Titelfeld ist jetzt ein mitwachsendes <textarea> (ui.js titelFeld). Ohne
   diese Regeln erbte es die kleine graue Langtext-Optik von .editor-table textarea. */
.editor-table textarea.titel-feld {
  margin-top: 0; font-size: 13.5px; color: var(--ink);
  resize: none; overflow: hidden; line-height: 1.35; min-height: 34px;
  white-space: pre-wrap; word-break: break-word;
}
.editor-table .title-row textarea.titel-feld { font-size: 14px; }

/* ── (4) Aktionsknöpfe: zwei feste Reihen, oben bündig ───────────────────────
   Stand 21.08.2026 (Vorgabe Niklas):
     Reihe 1, auf Höhe des Preises: ziehen · duplizieren · ＋ neue Position darunter
     Reihe 2:                       Eventual · hoch · runter · löschen
   Am 20.08. lagen alle Knöpfe in EINEM umbrechenden Block, der sich UNTEN ausrichtete
   (damit sie bei langem Titel in die zweite Zeile rutschen). In einer einzeiligen
   Position war das Ergebnis unbrauchbar: der Block bestimmte die Zeilenhöhe und die
   Knöpfe standen weit unter dem Feld, das sie bedienen. Feste Reihen sind
   vorhersehbar — und bei zweizeiligem Titel steht die zweite Reihe automatisch neben
   der zweiten Textzeile, also genau da, wo Platz frei ist. */
/* 150 px = die längere der beiden Reihen (Ev. + drei Knöpfe) in EINER Zeile. Ohne die
   Vorgabe brach sie auf drei Reihen um und die Zeile wurde unnötig hoch. */
.editor-table td.row-actions {
  display: table-cell; vertical-align: top; text-align: right;
  min-width: 150px; padding-top: 6px; padding-bottom: 6px;
}
.editor-table .tat-zeile {
  display: flex; gap: 4px; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; margin-bottom: 4px;
}
.editor-table .tat-zeile:last-child { margin-bottom: 0; }
/* Rechnungs-Editor: dort stehen die Aktionen unter dem Betrag in derselben Spalte
   (der Rechnungstabelle fehlt die eigene Aktionsspalte des Angebots). Ohne
   Mindestbreite brachen die beiden Reihen dort auf fünf Zeilen um — 176 px hohe
   Positionszeilen. 158 px = die längere Reihe (Ev. + drei Knöpfe) am Stück. */
.editor-table .gp-cell:has(.gp-actions) { min-width: 158px; }
.editor-table .gp-cell .gp-actions { display: block; margin-top: 4px; }

/* ── (4) Klarere Aktionsknöpfe ───────────────────────────────────────────────
   "Bisschen schöner machen, dass man leichter sieht: was ist duplizieren, was ist
   löschen, was ist ziehen, was ist Eventualposition."
   Der Browser-Tooltip kommt erst nach einer Sekunde — data-tip steht sofort da. */
.editor-table .btn.mini.tat {
  position: relative; min-width: 27px; height: 25px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); border-color: transparent; background: transparent;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.item-row:hover .btn.mini.tat, .item-row:focus-within .btn.mini.tat { border-color: var(--line); background: var(--card); }
.editor-table .btn.mini.tat:hover { color: var(--ink); background: var(--card-2); border-color: var(--line-2); }
.editor-table .btn.mini.tat.danger:hover { color: #fff; background: var(--danger); border-color: var(--danger); }
.editor-table .btn.mini.tat.drag-handle { cursor: grab; letter-spacing: .06em; }
.editor-table .btn.mini.tat.drag-handle:active { cursor: grabbing; }
/* display:none statt opacity:0 — ein nur durchsichtiges Schildchen zaehlt weiter zur
   Breite der Tabelle und erzeugte allein dadurch 37 px Seitwaerts-Scroll (gemessen). */
.editor-table .btn.mini.tat[data-tip]::after {
  content: attr(data-tip); display: none;
  position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--paper); font-size: 11px; font-weight: 600;
  letter-spacing: .01em; padding: 3px 7px; border-radius: 5px; white-space: nowrap;
  pointer-events: none; z-index: 30;
}
.editor-table .btn.mini.tat[data-tip]:hover::after { display: block; }
/* Eventualposition ist ein ZUSTAND, kein Knopf — sie behält ihre Beschriftung. */
.editor-table .ev-toggle { cursor: pointer; }
.editor-table .ev-row .ev-toggle { color: var(--warn); }

/* ── (5) Kräftiges Hover auf der Zeile ───────────────────────────────────────
   "Man sieht nur, dass es leicht markiert ist. Ich würde, dass mehr hervorgehoben
   wird, bei welcher Position man gerade ist — z. B. indem man die dünnen grauen
   Trennlinien hervorhebt."
   Deshalb: wärmerer Grund + oben und unten eine kräftige Trennlinie + links eine
   Akzentkante. Dasselbe gilt für die Zeile, in der gerade getippt wird
   (:focus-within) — sonst verliert man sie beim Tippen aus dem Blick. */
.editor-table tr.item-row > td { transition: background .1s ease, box-shadow .1s ease; }
.editor-table tr.item-row:hover > td,
.editor-table tr.item-row:focus-within > td {
  background: var(--card-2);
  box-shadow: inset 0 1px 0 0 var(--line-2), inset 0 -1px 0 0 var(--line-2);
}
.editor-table tr.item-row:hover > td:first-child,
.editor-table tr.item-row:focus-within > td:first-child {
  box-shadow: inset 3px 0 0 0 var(--accent), inset 0 1px 0 0 var(--line-2), inset 0 -1px 0 0 var(--line-2);
}
/* Titelzeilen behalten ihren eigenen Grund, bekommen aber dieselben Kanten. */
.editor-table tr.title-row.item-row:hover > td,
.editor-table tr.title-row.item-row:focus-within > td { background: var(--card-2); }
/* Eventual- und Nachtragszeilen: eigener Grund, Hover trotzdem sichtbar. */
.editor-table tr.ev-row.item-row:hover > td { background: #f2ead9; }
html.dark .editor-table tr.ev-row.item-row:hover > td { background: #37301f; }

/* ── (2) Positions-Bibliothek startet zugeklappt ─────────────────────────────
   "Das Feld 'Positionen übernehmen' rechts defaultmäßig aus. Man muss es anklicken,
   diese Lupe. Das führt dazu, dass die Maske deutlich breiter ist — wir brauchen die
   ganze Breite."
   Zugeklappt fallen Panel UND Zieh-Griff komplett weg; übrig bleibt die schmale
   Schiene mit der Lupe. Der Zustand liegt in localStorage (wb_poslib_zu) und gilt
   app-weit für Angebot und Rechnung — es ist EIN Panel. */
.ang-layout.zu > .pos-lib, .ang-layout.zu > .pos-lib-stack, .ang-layout.zu > .ang-split { display: none; }
.poslib-schiene {
  display: none; flex: 0 0 40px; width: 40px; align-self: stretch;
  margin-top: 14px; position: sticky; top: 12px; max-height: calc(100vh - 30px);
  flex-direction: column; align-items: center; gap: 12px; padding: 12px 0;
  cursor: pointer; background: var(--card); color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.ang-layout.zu > .poslib-schiene { display: flex; }
.poslib-schiene:hover { color: var(--accent); border-color: var(--line-2); background: var(--card-2); }
.poslib-schiene-ico { display: flex; }
.poslib-schiene-txt {
  writing-mode: vertical-rl; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
}
@media (max-width: 860px) {
  .poslib-schiene { writing-mode: horizontal-tb; flex-direction: row; justify-content: center;
    width: 100%; flex: 1 1 100%; height: 40px; position: static; max-height: none; }
  .poslib-schiene-txt { writing-mode: horizontal-tb; }
}

/* ── Reiter für mehrere Chats (20.08.2026) ──────────────────────────────────
   Auftrag Niklas: „Wenn ich im Browser zwei Tabs von zwei Projekten offen habe und
   Freddie zweimal eine Aufgabe gebe, soll er parallel arbeiten — und oben im Chat ein
   kleiner Reiter, der leuchtet, damit ich sehe: da ist ein zweiter Chat."
   Die Leiste erscheint erst ab dem ZWEITEN Chat; bei einem einzigen wäre sie nur
   verlorener Platz. */
.ac-reiter {
  display: none; flex: none; gap: 4px; padding: 6px 8px 0; overflow-x: auto;
  background: var(--card-2); border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.ac-reiter::-webkit-scrollbar { display: none; }
.ac-reiter-tab {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; max-width: 160px;
  border: 1px solid var(--line); border-bottom: 0; background: var(--card);
  color: var(--muted); cursor: pointer;
  border-radius: 9px 9px 0 0; padding: 6px 8px 7px 10px;
  font: 600 11.5px/1.2 var(--sans);
}
.ac-reiter-tab:hover { color: var(--ink); }
.ac-reiter-tab.aktiv { background: var(--card); color: var(--ink); border-color: var(--line-2); box-shadow: inset 0 2px 0 var(--accent); }
/* „Leuchten": ein anderer Chat hat etwas Neues oder arbeitet gerade. */
.ac-reiter-tab.leuchtet { color: var(--ink); border-color: var(--accent); animation: ac-reiter-puls 1.8s ease-in-out infinite; }
@keyframes ac-reiter-puls { 0%, 100% { background: var(--card); } 50% { background: var(--accent-soft); } }
@media (prefers-reduced-motion: reduce) { .ac-reiter-tab.leuchtet { animation: none; background: var(--accent-soft); } }
.ac-reiter-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-reiter-punkt { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); flex: none; animation: ac-punkt-puls 1.3s ease-in-out infinite; }
.ac-reiter-zahl {
  flex: none; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px;
  background: var(--accent); color: #fff; font: 700 9.5px/15px var(--sans); text-align: center;
}
.ac-reiter-zu { flex: none; color: var(--muted-2); font-size: 11px; padding: 0 1px; }
.ac-reiter-zu:hover { color: var(--accent); }
@media (max-width: 640px) {
  .ac-reiter-tab { max-width: 120px; padding: 8px 9px 9px 11px; font-size: 12px; }
  .ac-reiter-zu { font-size: 13px; padding: 0 3px; }
}

/* ── Ladezustand des PDF-Viewers (Niklas 20.08.: „sieht noch ein bisschen buggy aus") ──
   Vorher stand dort ein leeres weißes Rechteck mit einem kaum sichtbaren Schimmer — für
   ein bis zwei Sekunden las sich das wie ein Fehler. Jetzt deutet der Platzhalter ein
   Blatt an (Briefkopf, Text-, Tabellenzeilen) und sagt darunter, dass geladen wird. */
.fpdf-platzhalter { position: relative; overflow: hidden; }
.fpdf-sk { padding: 9% 10% 0; display: flex; flex-direction: column; gap: 10px; }
.fpdf-sk-kopf {
  align-self: flex-end; width: 28%; height: 42px; border-radius: 4px;
  margin-bottom: 26px; background: var(--sk-ton, #ece7dd);
}
.fpdf-sk-zeile { height: 9px; border-radius: 3px; background: var(--sk-ton, #ece7dd); }
.fpdf-sk-zeile.kraeftig { height: 13px; background: var(--sk-ton-2, #ded7c9); }
.fpdf-sk-luecke { height: 16px; }
/* EIN Schimmer über das ganze Blatt statt über jede Zeile — ruhiger und deutlich
   sichtbarer als der frühere Farbverlauf im Hintergrund. */
.fpdf-platzhalter::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%);
  background-size: 250% 100%; animation: fpdfWarten 1.25s ease-in-out infinite;
}
html.dark .fpdf-platzhalter { background: #f7f5f0; }
html.dark .fpdf-platzhalter::after { background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .6) 50%, transparent 65%); background-size: 250% 100%; }
@keyframes fpdfWarten { from { background-position: 140% 0; } to { background-position: -40% 0; } }

.fpdf-ladetext {
  position: absolute; left: 0; right: 0; bottom: 26px; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 12.5px; color: #8a8175; letter-spacing: .02em;
}
.fpdf-spinner {
  width: 13px; height: 13px; border-radius: 50%; display: inline-block;
  border: 2px solid rgba(138, 129, 117, .3); border-top-color: #8a8175;
  animation: fpdfDreht .7s linear infinite;
}
@keyframes fpdfDreht { to { transform: rotate(360deg); } }

/* Seitenzähler/Zoom stehen von Anfang an in der Leiste, nur blass — sonst springt die
   Leiste in dem Moment um, in dem die erste Seite fertig ist. */
.fpdf-steuerung.wartet { opacity: .45; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .fpdf-platzhalter::after, .fpdf-spinner { animation: none; }
}

/* Ladehinweis steht ÜBER dem Blatt (ein A4-Blatt ist höher als das Fenster). */
.fpdf-buehne > .fpdf-ladetext { position: static; margin-bottom: -6px; }

/* ── Nachtrag zum Umbau vom 20.08.2026: die Titelspalte darf schmal werden ───
   Die eingeklappte Langtext-Vorschau lief mit `white-space: nowrap` so breit wie
   ihr Text (bis 80 Zeichen). In einer Tabelle mit automatischem Layout ist das die
   MINDESTBREITE der Spalte: die Titelspalte wuchs auf 661 px und schob die Spalte
   „Aktionen" aus dem Bild (gemessen: Tabelle 1256 px in einem 1164-px-Fenster).
   Solange die Langtexte nur ausnahmsweise eingeklappt waren, fiel das kaum auf —
   seit sie standardmaessig aus sind, traefe es jede Zeile.
   Jetzt umbruchfaehig und auf eine Zeile geklemmt: gleiche Optik (eine kursive
   Zeile mit „…"), aber die Mindestbreite ist nur noch das laengste Wort. */
.editor-table .langtext-vorschau {
  white-space: normal; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
  overflow: hidden;
}
/* Die Titelspalte nimmt den freien Platz, die Zahlenspalten bleiben schmal.
   NACHTRAG 21.08.2026 (Niklas: „nach links oder rechts scrollen ist ultra nervig"):
   Sie muss sich beim Aufklappen der Bibliothek auch STAUCHEN. Vorher stand ein
   `min-width: 240px` (bzw. 220 in der Rechnung) fest im Markup — damit war die
   Tabelle 864 px breit in einem 858-px-Fenster und man musste seitwärts scrollen,
   nur um an die Aktionsknöpfe zu kommen. Jetzt gibt die Spalte bis 130 px nach;
   alle übrigen Spalten bleiben dadurch immer im Blick. */
.editor-table td.pos-titel-zelle { width: 100%; min-width: 130px; }
.editor-table td.pos-titel-zelle > * { max-width: 100%; }
/* Ein <textarea> bringt eine eigene Mindestbreite mit (cols-Vorgabe des Browsers) und
   hielte die Spalte sonst künstlich breit. */
.editor-table td.pos-titel-zelle textarea { min-width: 0; }

/* ════════════════════════════════════════════════════════════════════════════
   POSITIONS-MASKE, dritte Runde — Rückmeldung Niklas 21.08.2026 (nachmittags)
   (a) Ziehen mit Auto-Scroll und am Handy (zieh-lib.js)
   (b) € im Einheitspreis, Menge und Einheit gehören sichtbar zusammen
   (c) Die Positions-Bibliothek nutzt den freien Platz rechts
   ════════════════════════════════════════════════════════════════════════════ */

/* ── (a) Ziehen ──────────────────────────────────────────────────────────────
   `touch-action: none` ist am Handy Pflicht: ohne die Angabe verarbeitet der
   Browser die Fingerbewegung selbst als Seiten-Scroll und schickt gar keine
   pointermove-Ereignisse — der Griff wäre dort weiterhin tot. */
.editor-table .drag-handle { touch-action: none; cursor: grab; }
.editor-table .drag-handle:active { cursor: grabbing; }
/* Während des Ziehens: überall der Greif-Zeiger, nichts markieren, und die gezogene
   Zeile tritt zurück, damit die Einfügelinie führt.
   ACHTUNG, hier lag der Fehler (Befund Niklas 21.08.2026: „man sieht nicht, wo man sie
   gerade hinzieht"): Die Hover-Unterdrückung setzte `box-shadow: none` — und die Zeile
   unter dem Zeiger ist NATÜRLICH die gehoverte. Sie schlug mit (0,4,3) gegen die
   Einfügelinie mit (0,2,2) und löschte damit genau die Markierung, auf die es ankommt.
   Nachgemessen: `getComputedStyle(td).boxShadow === "none"` mitten im Zug.
   Jetzt nimmt die Unterdrückung die Zielzeile ausdrücklich aus, und die Einfügelinie
   selbst steht spezifischer. */
body.zieht-gerade { cursor: grabbing; user-select: none; -webkit-user-select: none; }
body.zieht-gerade .editor-table tr.item-row:hover:not(.drag-over-top):not(.drag-over-bottom) > td {
  background: inherit; box-shadow: none;
}
.editor-table tr.wird-gezogen > td { opacity: .4; }
/* Die Einfügelinie: kräftig, über die volle Zeilenbreite, mit ruhiger Tönung dahinter. */
body.zieht-gerade .editor-table tr.item-row.drag-over-top > td,
.editor-table tr.item-row.drag-over-top > td {
  box-shadow: inset 0 4px 0 0 var(--accent, #c01622);
  background: var(--accent-soft);
}
body.zieht-gerade .editor-table tr.item-row.drag-over-bottom > td,
.editor-table tr.item-row.drag-over-bottom > td {
  box-shadow: inset 0 -4px 0 0 var(--accent, #c01622);
  background: var(--accent-soft);
}

/* Mitlaufendes Schild am Zeiger: WAS hängt gerade am Finger? Die Einfügelinie sagt
   nur wohin. Bewusst `pointer-events: none`, sonst wäre es sein eigenes Drop-Ziel. */
.zieh-schild {
  position: fixed; z-index: 9999; pointer-events: none;
  display: flex; align-items: center; gap: 7px;
  max-width: 380px; padding: 6px 11px;
  background: var(--ink); color: var(--paper);
  border-radius: 7px; font-size: 12.5px; font-weight: 600;
  box-shadow: 0 6px 20px rgba(27, 23, 20, .28);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zieh-schild-ico { opacity: .6; letter-spacing: .08em; }

/* Nachleuchten der Zeile, die gerade gelandet ist — ohne diesen Anker sieht das
   Mitlaufen der automatischen Nummern aus, als wäre die ganze Liste verschoben. */
@keyframes zeileGelandet {
  from { background: var(--accent-soft); box-shadow: inset 3px 0 0 0 var(--accent, #c01622); }
  to { background: transparent; box-shadow: inset 3px 0 0 0 transparent; }
}
.editor-table tr.gerade-verschoben > td { animation: zeileGelandet 1.6s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .editor-table tr.gerade-verschoben > td { animation: none; background: var(--accent-soft); }
}

/* ── (b) Menge · Einheit · Preis auseinanderhalten ───────────────────────────
   „Ich sehe die Menge, die Einheit der Menge und den Einheitspreis — da kann man
   durcheinanderkommen." Deshalb: Menge und Einheit rücken zusammen (sie lesen sich
   als EIN Wert, „12,00 m²"), der Preis bekommt sein € ins Feld. Zahlen rechtsbündig,
   damit Komma unter Komma steht. */
table.data.editor-table td.qty-cell { padding-right: 0; }
table.data.editor-table td.einheit-zelle { padding-left: 3px; }
table.data.editor-table th:nth-child(4) { padding-left: 3px; }
.editor-table .qty-cell input, .editor-table .ist-input { text-align: right; }
.editor-table .geld-feld { position: relative; display: inline-block; }
.editor-table .geld-feld > input.geld-eingabe { padding-right: 21px; text-align: right; }
.editor-table .geld-zeichen {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: var(--muted); pointer-events: none; line-height: 1;
}
/* Ein gesperrtes Feld (Preis aus der Kalkulation) ist grau — das € auch. */
.editor-table .geld-feld > input.kalk-locked + .geld-zeichen { color: var(--muted-2); }

/* ── (c) Positions-Bibliothek nutzt den freien Platz ─────────────────────────
   „Wir haben rechts noch so viel Platz — das Feld darf breiter sein, je nachdem wie
   viel Platz man hat, ein bisschen Dynamik."
   Statt fester 330 px wächst die Standardbreite jetzt mit dem Fenster. Die
   Positionsliste behält dabei genug: sie kommt mit rund 780 px aus (Nr. 99 + Titel
   min. 130 + Menge 92 + Einheit 80 + EP 112 + GP 85 + Aktionen 150), alles darüber
   ist Luft, die hier hingeht. Gezogene Breiten (--poslib-w inline aus angLayout)
   schlagen diese Vorgabe weiterhin — der Griff bleibt das letzte Wort. */
.ang-layout { --poslib-w: clamp(300px, 24vw, 560px); }
@media (max-width: 1520px) { .ang-layout { --poslib-w: clamp(280px, 22vw, 380px); } }
@media (max-width: 1180px) { .ang-layout { --poslib-w: 280px; } }

/* Beleg-Maske breiter als die Lesebreite der Textansichten (Niklas 21.08.2026:
   „wir haben ja rechts noch so viel Platz"). `.main > *` deckelt sonst JEDEN Inhalt
   auf 1320 px — für eine Fließtext-Seite richtig, für Positionsliste PLUS Bibliothek
   nebeneinander zu eng. 1580 px schöpft einen 1920er Monitor voll aus und lässt den
   Briefkopf darüber noch lesbar; darüber hinaus wächst nichts weiter.
   Die Klasse setzt der Beleg-Editor, der Router räumt sie beim Wechsel wieder ab. */
.main.breit-beleg > *:not(.hero) { max-width: 1580px; }

/* ================================================================================
   Projekt-Uebersicht: Stammdaten-Kopf, Dokumentenliste, "Mehr zum Projekt"
   (Redesign 21.08.2026, Spec Niklas)
   Vorher standen oben drei Karten mit einer halben Seite Erklaertext, und der Aufbau
   unterschied sich zwischen Baustelle und Angebotsprojekt komplett. Jetzt: EIN Kopf,
   der die Stammdaten zeigt statt sie zu erklaeren.
   ============================================================================= */
.stamm-kopf { margin-bottom: 14px; border-top: 3px solid var(--line-2); }
.stamm-kopf .sk-kopf { display: flex; align-items: flex-start; gap: 12px; }
.stamm-kopf .sk-kunde {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.sk-name {
  font-size: 22px; font-weight: 800; letter-spacing: -.015em; line-height: 1.15;
  min-width: 0; overflow-wrap: anywhere;
}
.sk-name.sk-fehlt { color: var(--muted); font-weight: 700; }
/* Kundennummer-Pille. BEWUSST nicht .ac-badge: diese Klasse ist in dieser Datei
   ZWEIMAL definiert (Pille in .ac-main und absolut positioniertes Zaehlerabzeichen
   am Agenten-Chat-Knopf) — die zweite gewinnt und schob die Kd-Nr mit right:-3px
   aus dem Fenster (gemessen 127 px waagerechter Ueberlauf im alten Aufbau). */
.sk-kdnr {
  flex: none; font-size: 10px; font-weight: 700; color: var(--muted);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 1px 7px;
  letter-spacing: .02em; white-space: nowrap;
}
.sk-wechsel { flex: none; }
/* Kunden-Anschrift und -Kontakt: zweite Ebene, volle Zeile unter dem Namen */
.sk-kzeile { flex-basis: 100%; font-size: 12.5px; color: var(--muted); margin-top: -2px; }
.sk-kzeile a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.sk-kzeile a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.sk-trenn { margin: 0 6px; }
.sk-suche { flex-basis: 100%; }

/* Adresse: das Eingabefeld sieht aus wie Text, bis man hineinklickt - die Karte soll
   gelesen und nicht ausgefuellt werden, aenderbar ist sie trotzdem ueberall. */
.sk-adr-zeile { display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; }
.sk-ico { color: var(--muted); font-size: 15px; flex: none; }
input.sk-adr {
  flex: 1; min-width: 0; font: inherit; font-size: 15px; color: var(--ink);
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 4px 7px; margin-left: -7px;
}
input.sk-adr::placeholder { color: var(--muted-2); font-style: italic; }
input.sk-adr:hover { border-color: var(--line); }
input.sk-adr:focus { border-color: var(--accent); background: var(--card); outline: none; }

/* Key-Details: Beschriftung klein darueber, Wert gross darunter - wie eine Bildunterschrift */
.sk-details {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 18px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
}
.sk-d { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; }
.sk-l {
  font-size: 10.5px; font-weight: 700; color: var(--muted); font-family: var(--mono);
  letter-spacing: .05em; text-transform: uppercase;
}
.sk-vzeile { display: flex; align-items: center; gap: 6px; min-width: 0; }
input.sk-v {
  flex: 1; min-width: 0; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink);
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 3px 6px; margin-left: -6px;
}
input.sk-v::placeholder { color: var(--muted-2); font-weight: 400; font-style: italic; }
input.sk-v:hover { border-color: var(--line); }
input.sk-v:focus { border-color: var(--accent); background: var(--card); outline: none; }

/* Ansprechpartner: eine Zeile je Person, Telefon und Mail direkt anklickbar */
.sk-kontakte {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.sk-kontakt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; font-size: 13px; }
.sk-k-name { font-weight: 700; }
.sk-k-rolle { font-size: 11px; color: var(--muted); }
.sk-k-link { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line-2); font-size: 12.5px; }
.sk-k-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.sk-k-edit { opacity: .55; }
.sk-kontakt:hover .sk-k-edit { opacity: 1; }
.sk-leer { font-size: 12.5px; color: var(--muted); font-style: italic; }

/* KPI-Reihe, die sich nach der Anzahl der Kacheln richtet (die feste 5er-Spur laesst
   bei drei Kacheln die halbe Zeile leer). */
.kpi-row.auto { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); }

/* ── Dokumentenliste: je Art das aktuellste Papier, Klick oeffnet die PDF ──────── */
.dok-liste { display: flex; flex-direction: column; }
.dokz {
  display: flex; align-items: baseline; gap: 12px; text-decoration: none; color: inherit;
  /* Keine negative Margin: die zog die Zeile 8 px in den Kartenrand hinein und damit
     aus ihrem Elternteil heraus (optisch unauffaellig, aber die Ueberlaufpruefung meldet
     es zu Recht). Der Hover-Streifen sitzt jetzt buendig zum uebrigen Karteninhalt. */
  padding: 9px 0; border-bottom: 1px solid var(--line); transition: background .1s ease;
}
.dokz:last-child { border-bottom: 0; }
.dokz:hover { background: var(--card-2); box-shadow: 0 0 0 8px var(--card-2); }
.dokz-art {
  flex: none; width: 190px; font-weight: 700; font-size: 13.5px;
}
.dokz-titel {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dokz-datum { flex: none; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dokz-betrag { flex: none; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dokz-pfeil { flex: none; color: var(--muted-2); font-size: 12px; }
.dokz:hover .dokz-pfeil { color: var(--accent); }
@media (max-width: 720px) {
  .dokz { flex-wrap: wrap; gap: 4px 10px; }
  .dokz-art { width: 100%; }
  .dokz-titel { flex-basis: 100%; }
}

/* ── "Mehr zum Projekt": alles Seltene in EINEM Aufklapper ─────────────────────── */
.mehr-projekt > summary {
  cursor: pointer; font-weight: 700; font-size: 14px; list-style: none;
  display: flex; align-items: center; gap: 8px;
}
.mehr-projekt > summary::-webkit-details-marker { display: none; }
.mehr-projekt > summary::before { content: "▸"; color: var(--muted); font-size: 12px; }
.mehr-projekt[open] > summary::before { content: "▾"; }
.mehr-projekt > summary:hover { color: var(--accent); }
.mehr-inhalt { margin-top: 14px; }
/* Die Karten IM Aufklapper sind schon in einer Karte - flacher zeichnen, sonst
   stapeln sich Rahmen auf Rahmen. */
.mehr-inhalt > .card { box-shadow: none; background: var(--card-2); }

/* ── Projekt-Uebersicht, Runde 2 (Niklas 21.08.2026) ─────────────────────────── */

/* Kundenname VOLLSTAENDIG. Vorher stand er in einer Flex-Zeile neben Kd-Nr-Pille und
   Knopf und wurde dort gekuerzt. Jetzt bekommt er die ganze Zeile und bricht um; ab
   46 Zeichen schaltet .sk-lang eine Stufe kleiner, damit ein 173-Zeichen-Name aus dem
   Kundenstamm nicht die halbe Karte fuellt. */
.stamm-kopf .sk-kunde { align-items: baseline; }
.sk-name { flex: 1 1 100%; overflow-wrap: anywhere; hyphens: auto; }
.sk-name.sk-lang { font-size: 16.5px; line-height: 1.28; }
/* Kd-Nr und „aendern" ruecken unter den Namen, sobald er die Zeile fuellt. */
.stamm-kopf .sk-kdnr, .stamm-kopf .sk-wechsel { margin-top: -2px; }

/* Adresse dick gedruckt (Niklas: „die Adresse und so muss dann auch dick gedruckt sein") */
input.sk-adr { font-size: 15.5px; font-weight: 700; }
input.sk-adr::placeholder { font-weight: 400; }

/* Summenzeile unter den Kostenarten: die eine Zahl, die man beim Durchgehen sucht. */
.kosten-summe {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  margin-top: 10px; padding: 11px 13px; border-radius: var(--radius-sm);
  background: var(--card-2); border: 1px solid var(--line-2);
}
.ks-l { font-weight: 700; font-size: 14px; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; min-width: 0; }
.ks-n { font-weight: 400; font-size: 11.5px; color: var(--muted); }
.ks-v { font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--neg); }

/* Der Umsatz gehoert nicht in die Kostenliste — sichtbar abgesetzt. */
.kosten-trenner {
  margin: 18px 0 6px; font-size: 10.5px; font-weight: 700; color: var(--muted);
  font-family: var(--mono); letter-spacing: .05em; text-transform: uppercase;
  border-top: 1px solid var(--line); padding-top: 12px;
}

/* Nachgereichte Nachricht: getippt, während der Agent noch am vorigen Auftrag saß.
   Sie steht sofort im Fenster, geht aber erst raus, wenn er fertig ist — ohne diesen
   Hinweis wartet man auf eine Antwort, die noch gar nicht angefragt ist. */
.ac-msg.ac-wartet { opacity: .78; }
.ac-nachgereicht {
  margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font: 600 9.5px/1.6 var(--sans); white-space: nowrap;
}
/* „angekommen" = der Agent hat die Nachricht noch MITTEN im laufenden Auftrag bekommen
   (POST /v1/runs/<id>/steer, s. scripts/hermes_steer_route.py). Bewusst grün und ohne
   Ausgrauen — im Gegensatz zu „geht gleich raus" ist hier nichts mehr offen. */
.ac-eingesteuert {
  margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: rgba(30, 140, 70, .14); color: #1e8c46;
  font: 600 9.5px/1.6 var(--sans); white-space: nowrap;
}