:root {
  --bg: #fafafa;
  --surface: #ffffff;
  --ink: #0a0a0a;
  --muted: #64748b;
  --line: #e2e8f0;
  --accent: #111111;       /* Kurth: Schwarz auf Weiss */
  --accent-dark: #000000;
  --green: #16a34a;
  --blue: #2563eb;
  --red: #dc2626;
  --amber: #d97706;
  --radius: 3px;   /* kantig gemäss Kurth-Design */
}
* { box-sizing: border-box; margin: 0; }
h1, h2, h3, .page-title { font-weight: 800; letter-spacing: -0.3px; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg); color: var(--ink); font-size: 14px;
}
#app { display: flex; min-height: 100vh; }
.hidden { display: none !important; }

/* Sidebar */
#sidebar {
  width: 210px; background: #0a0a0a; color: #c9c9c9;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
/* Kurth-Markenblock: Wortmarke im Rahmen + Claim */
.brand { padding: 18px 16px 14px; }
/* Original-Bildmarke; Invertierung macht Schwarz→Weiss für die dunkle Leiste */
.brand-mark { display: block; width: 96px; height: auto; filter: invert(1); }
.brand-tag { margin-top: 8px; color: #fff; font-weight: 800; font-size: 15px;
  line-height: 1.15; letter-spacing: .2px; }
.brand-tag i { font-style: normal; color: #8a8a8a; }
#nav { flex: 1; overflow-y: auto; }
#nav a {
  display: block; padding: 10px 16px; color: #cbd5e1; text-decoration: none;
  border-left: 3px solid transparent; font-weight: 500;
}
#nav a:hover { background: #1c1c1c; color: #fff; }
#nav a.active { background: #ffffff; color: #000; border-left-color: #000; font-weight: 700; }
#nav .nav-section { padding: 14px 16px 4px; font-size: 11px; text-transform: uppercase; color: #64748b; letter-spacing: 1px; }
.sidebar-footer { padding: 12px 16px; border-top: 1px solid #262626; font-size: 12px; }
#user-info { margin-bottom: 8px; color: #94a3b8; }
#user-info b { color: #fff; display: block; }

/* Main */
#view { flex: 1; padding: 24px 28px; max-width: 1400px; }
h1 { font-size: 22px; margin-bottom: 4px; }
h2 { font-size: 16px; margin: 18px 0 8px; }
.subtitle { color: var(--muted); margin-bottom: 18px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }

/* Cards / KPIs */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.kpi .num { font-size: 26px; font-weight: 700; }
.kpi .lbl { color: var(--muted); font-size: 12px; margin-top: 2px; }
.kpi.red .num { color: var(--red); }
.kpi.green .num { color: var(--green); }
.kpi.amber .num { color: var(--amber); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }

/* Tables */
table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 10px 12px; border-bottom: 2px solid var(--line); background: #fafbfc; }
td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: #f0f9fb; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Badges */
.badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.b-gray { background: #e2e8f0; color: #475569; }
.b-blue { background: #dbeafe; color: #1d4ed8; }
.b-green { background: #dcfce7; color: #15803d; }
.b-amber { background: #fef3c7; color: #b45309; }
.b-red { background: #fee2e2; color: #b91c1c; }
.b-teal { background: #ccfbf1; color: #0f766e; }

/* Buttons / Forms */
button, .btn { font: inherit; cursor: pointer; border: none; border-radius: 8px; padding: 8px 14px; font-weight: 600; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-secondary { background: #e2e8f0; color: var(--ink); }
.btn-secondary:hover { background: #cbd5e1; }
.btn-danger { background: var(--red); color: #fff; }
.btn-ghost { background: transparent; color: #94a3b8; padding: 4px 0; }
.btn-ghost:hover { color: #fff; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
input, select, textarea {
  font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #99e0ea; border-color: var(--accent); }
label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin: 10px 0 4px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-grid .full { grid-column: 1 / -1; }

/* Modal */
#modal-root:not(:empty) {
  position: fixed; inset: 0; background: rgba(15, 39, 51, .55);
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 100; overflow-y: auto;
}
.modal { background: #fff; border-radius: 14px; padding: 22px; width: 100%; max-width: 860px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal h2 { margin-top: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* Toast */
#toast:not(:empty) {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #111; color: #fff; padding: 10px 20px; border-radius: 4px;
  box-shadow: 0 6px 20px rgba(0,0,0,.3); z-index: 200; font-weight: 600;
}

/* Login */
.login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100%; }
.login-box { background: #fff; border-radius: 4px; padding: 32px; width: 380px;
  border: 2px solid #111; box-shadow: 8px 8px 0 #111; }
.login-logo { display: block; width: 240px; max-width: 100%; margin: 0 auto 14px; }
.login-box h1 { text-align: center; }
.login-box h1 span { color: var(--accent); }

/* Positions-Editor */
.pricing-box { background: #f0f9fb; border: 1px solid #bae6fd; border-radius: 10px; padding: 12px 14px; }
.pricing-box .row { display: flex; justify-content: space-between; padding: 2px 0; font-size: 13px; }
.pricing-box .total { font-size: 17px; font-weight: 700; border-top: 1px solid #bae6fd; margin-top: 6px; padding-top: 6px; }
.proc-list { max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
.proc-item { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; }
.proc-item:hover { background: #f8fafc; }
.proc-item input[type=checkbox] { width: auto; }
.proc-item .qty { width: 60px; padding: 3px 6px; }
.proc-item .price { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }

/* Routing-Stepper */
.stepper { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.step { display: flex; align-items: center; gap: 4px; font-size: 11px; padding: 3px 8px; border-radius: 20px; background: #f1f5f9; color: var(--muted); white-space: nowrap; }
.step.done { background: #dcfce7; color: #15803d; }
.step.running { background: #dbeafe; color: #1d4ed8; }
.step.ready { background: #fef3c7; color: #b45309; }
.step.skipped { background: #fee2e2; color: #b91c1c; text-decoration: line-through; }

/* Terminal */
.terminal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.op-card { background: #fff; border: 3px solid var(--line); border-radius: 16px; padding: 18px; }
.op-card.express { border-color: var(--red); }
.op-card .barcode { font-size: 22px; font-weight: 800; letter-spacing: .5px; }
.op-card .dims { font-size: 26px; font-weight: 700; margin: 6px 0; }
.op-card .meta { color: var(--muted); font-size: 13px; }
.op-card .actions { display: flex; gap: 10px; margin-top: 14px; }
.op-card .actions button { flex: 1; height: 56px; font-size: 17px; border-radius: 12px; }
.btn-start { background: var(--green); color: #fff; }
.btn-done { background: var(--blue); color: #fff; }
.btn-break { background: #fff; color: var(--red); border: 2px solid var(--red) !important; flex: 0 0 90px !important; }
.wc-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.wc-tabs button { background: #e2e8f0; }
.wc-tabs button.active { background: var(--accent); color: #fff; }
.scanbar { display: flex; gap: 8px; margin-bottom: 16px; max-width: 480px; }

@media (max-width: 760px) {
  #app { flex-direction: column; }
  #sidebar { width: 100%; height: auto; position: static; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ---------- Digitaler Zwilling: Skizzeneditor & Regelprüfung (v1.1) ---------- */
.sketch-mode { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; }
.sketch-mode button { padding: 6px 12px; border: 1px solid var(--border, #cbd5e1); border-radius: 8px;
  background: #fff; cursor: pointer; font-size: 13px; }
.sketch-mode button.active { background: var(--accent, #0e7490); color: #fff; border-color: var(--accent, #0e7490); }
#sketch-wrap { border: 1px solid var(--border, #cbd5e1); border-radius: 10px; background: #f8fafc; padding: 8px; }
.sketch { width: 100%; max-height: 280px; display: block; cursor: crosshair; }
.sketch.ro { cursor: default; max-height: 140px; max-width: 220px; }
.sketch .glass-outline { fill: #f0f0f066; stroke: #111; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sketch .feat circle, .sketch .feat rect, .sketch.ro circle, .sketch.ro rect:not(.glass-outline) {
  fill: #fff; stroke: #b91c1c; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
/* Ecken-Bearbeitungen: Fase (line) und Rundecke (path) waren ohne Strichfarbe unsichtbar */
.sketch .feat line, .sketch .feat path,
.sketch.ro line:not(.dim), .sketch.ro path:not(.glass-outline) {
  fill: none; stroke: #b91c1c; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sketch .feat:hover line, .sketch .feat:hover path { stroke-width: 2.5; }
.sketch .feat { cursor: pointer; }
.sketch .feat:hover circle, .sketch .feat:hover rect { fill: #fee2e2; }
.sketch text { fill: #334155; font-family: system-ui, sans-serif; }
.sketch text.dim { fill: #94a3b8; }
.mini-sketch { flex: 0 0 auto; }
.rule-checks { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.rc { font-size: 12px; }
.rc-ok { color: #15803d; }
.rc-warn { color: #b45309; }
.rc-fail { color: #b91c1c; font-weight: 600; }

/* ---------- CRM Kundenmodul (v1.3) ---------- */
.hidden { display: none !important; }
.type-toggle { display: flex; gap: 8px; margin-bottom: 14px; }
.type-toggle button { flex: 1; padding: 10px; border: 1px solid var(--border, #cbd5e1);
  border-radius: 10px; background: #fff; cursor: pointer; font-size: 14px; font-weight: 600; }
.type-toggle button.active { background: var(--accent, #0e7490); color: #fff; border-color: var(--accent, #0e7490); }
.addr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.addr-card { border: 1px solid var(--border, #cbd5e1); border-radius: 10px; padding: 12px; font-size: 13px; background: #fff; }
.addr-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--accent, #0e7490); margin-bottom: 6px; }
.addr-actions { margin-top: 8px; display: flex; gap: 6px; }
.hist-row { padding: 8px 10px; border: 1px solid var(--border, #e2e8f0); border-radius: 8px;
  margin-bottom: 6px; font-size: 13px; background: #fff; }
.hist-row:hover { background: #f1f5f9; }
@media (max-width: 760px) { .hist-grid { grid-template-columns: 1fr !important; } }

/* ---------- Positionserfassung nach Produktart (v1.4) ---------- */
.prod-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.prod-tabs button { padding: 10px 16px; border: 1px solid var(--border, #cbd5e1); border-radius: 10px;
  background: #fff; cursor: pointer; font-size: 14px; font-weight: 700; }
.prod-tabs button.active { background: var(--accent, #0e7490); color: #fff; border-color: var(--accent, #0e7490); }
.edge-row { display: flex; gap: 6px; flex-wrap: wrap; }
.edge-row button { padding: 8px 14px; border: 1px solid var(--border, #cbd5e1); border-radius: 8px;
  background: #fff; cursor: pointer; font-size: 13px; }
.edge-row button.active { background: var(--accent, #0e7490); color: #fff; border-color: var(--accent, #0e7490); }

/* ---------- Stammdaten-Hub (v1.5) ---------- */
.sd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: start; }
.sd-col { background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 12px; padding: 14px; }
.sd-head { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent, #0e7490); margin-bottom: 10px; }
.sd-item { display: block; padding: 10px 12px; border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px; margin-bottom: 8px; text-decoration: none; color: var(--ink, #0f172a); background: #f8fafc; }
.sd-item:hover { background: #f2f2f2; border-color: var(--accent, #0e7490); }
.sd-item span { display: block; font-size: 12px; color: var(--muted, #64748b); margin-top: 2px; }

/* ---------- Technologie-Browser Bearbeitungen (v1.6) ---------- */
.tech-wrap { display: flex; gap: 10px; border: 1px solid var(--border, #cbd5e1);
  border-radius: 10px; padding: 10px; background: #f8fafc; }
.tech-groups { display: flex; flex-direction: column; gap: 6px; min-width: 160px; }
.tech-groups button { text-align: left; padding: 9px 12px; border: 1px solid var(--border, #cbd5e1);
  border-radius: 8px; background: #fff; cursor: pointer; font-size: 13px; font-weight: 600; }
.tech-groups button.active { background: var(--accent, #0e7490); color: #fff; border-color: var(--accent, #0e7490); }
.tech-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tech-search { display: flex; gap: 10px; align-items: center; }
.tech-search input[type=text], .tech-search input:not([type]) , .tech-search #tech-search { flex: 1; }
.tech-price-toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; color: var(--muted, #64748b); }
.tech-list { max-height: 220px; overflow-y: auto; border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px; background: #fff; }
.tech-row { display: flex; gap: 10px; align-items: center; padding: 8px 10px;
  border-bottom: 1px solid #eef2f7; cursor: pointer; font-size: 13px; }
.tech-row:hover { background: #eef6f8; }
.tech-row.sel { background: #e0f2f1; }
.tech-row .mc { font-family: monospace; font-weight: 700; min-width: 130px; }
.tech-row .bez { flex: 1; }
.tech-row .pr { color: var(--muted, #64748b); white-space: nowrap; }
.tech-row .add { font-weight: 800; color: var(--accent, #0e7490); }
.applied-table { margin-top: 10px; }
.applied-table th, .applied-table td { padding: 6px 8px; font-size: 13px; }
@media (max-width: 700px) { .tech-wrap { flex-direction: column; } .tech-groups { flex-direction: row; flex-wrap: wrap; } }

/* ---------- Positions-Assistent (v1.7) ---------- */
.wiz-steps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.wiz-step { padding: 8px 14px; border: 1px solid var(--border, #cbd5e1); border-radius: 999px;
  background: #fff; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--muted, #64748b); }
.wiz-step.active { background: var(--accent, #0e7490); color: #fff; border-color: var(--accent, #0e7490); }
.wiz-step.done { color: var(--accent, #0e7490); border-color: var(--accent, #0e7490); }
.wiz-arrow { color: #cbd5e1; }
.wiz-label { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--muted, #64748b); }
.wiz-hint { font-size: 13px; color: var(--muted, #64748b); }
.wiz-flex { display: flex; justify-content: space-between; align-items: baseline; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.chip { padding: 10px 16px; border: 1px solid var(--border, #cbd5e1); border-radius: 10px;
  background: #fff; cursor: pointer; font-size: 14px; font-weight: 700; }
.chip.active { background: #f1f5f9; border-color: var(--ink, #0f172a); box-shadow: inset 0 0 0 1px var(--ink, #0f172a); }
.layer-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
/* Schichtzeile: Sortenfeld gedeckelt, damit Dicke/Vorspannung/Gas Platz behalten (v3.19.1) */
.layer-row { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; }
.layer-row > .l-type { flex: 0 0 96px; }
.layer-row > .layer-sort { flex: 1 1 auto; min-width: 110px; max-width: 240px; }
.layer-row > .layer-tag { flex: 1 1 auto; min-width: 90px; max-width: 240px; }
.layer-row > .l-mm { flex: 0 0 104px; }
.layer-row > .l-named { flex: 0 0 168px; }   /* Folie/SZR zeigen Namen, nicht nur mm */
.layer-row > .l-temper { flex: 0 0 84px; }
.layer-row > .l-gas { flex: 0 0 150px; }
.layer-row > .l-del { flex: 0 0 40px; margin-left: auto; }
.layer-tag { padding: 10px 12px; border-radius: 8px; font-family: monospace; font-size: 13px; border: 1px solid var(--border, #cbd5e1); }
.layer-glas { background: #cfe8e6; color: #0f4c4a; border-color: #9fccc9; }
.layer-szr { background: #eef2f7; color: #64748b; }
.layer-folie { background: #fde8d7; color: #7c3a12; border-color: #f5c8a5; }
.layer-add { display: flex; gap: 8px; }
.layer-add button { flex: 1; padding: 10px; border: 1.5px dashed var(--border, #cbd5e1);
  border-radius: 10px; background: #fafafa; cursor: pointer; font-size: 13px; color: var(--muted, #64748b); }
.layer-add button:hover { border-color: var(--accent, #0e7490); color: var(--accent, #0e7490); }

/* ---------- Kantenzuweisung je Kante (v1.8) ---------- */
.edge-assign { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 6px 0; }
.edge-assign-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px; padding: 8px 10px; background: #fff; }
.edge-assign-row .edge-name { min-width: 120px; font-size: 13px; font-weight: 600; }
.edge-assign-row select { flex: 1; }

/* ---------- Glasartikel-Assistent & Beschaffung (v1.9) ---------- */
.ng-preview { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; background: #f8fafc;
  border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 10px; }
.ng-preview .wiz-label { display: block; margin-bottom: 4px; }

/* ---------- Technologie-Untergruppen (v2.0) ---------- */
.tech-subhead { padding: 8px 10px 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent, #0e7490); background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0; position: sticky; top: 0; }

/* ---------- Positionsformular Single-Page (v2.1) ---------- */
.pos-modal { max-width: 860px; }
.field-note { display: block; font-size: 12px; color: var(--muted, #64748b); margin-top: 4px; }
.acc { border: 1px solid var(--border, #e2e8f0); border-radius: 10px; margin-top: 10px; background: #fff; overflow: hidden; }
.acc.open { border-color: var(--accent, #0e7490); }
.acc-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: #f8fafc; border: none; cursor: pointer; text-align: left; font-size: 14px; }
.acc.open .acc-head { background: #eef6f8; }
.acc-caret { color: var(--accent, #0e7490); font-weight: 700; width: 14px; }
.acc-title { font-weight: 700; color: var(--ink, #0f172a); }
.acc-summary { margin-left: auto; font-size: 12px; color: var(--muted, #64748b); font-family: monospace; }
.acc-body { padding: 14px; border-top: 1px solid var(--border, #e2e8f0); }
.form-grid .full.wiz-hint, .wiz-hint.full { grid-column: 1 / -1; }

/* ---------- Kanten-Editor (v2.4) ---------- */
.edge-editor-grid { display: grid; grid-template-columns: 1fr 300px; gap: 12px; align-items: start; }
@media (max-width: 760px) { .edge-editor-grid { grid-template-columns: 1fr; } }
.edge-sketch { background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 10px; width: 100%; }
.edge-hit { cursor: pointer; }
.edge-hit polyline, .edge-hit line { stroke-linecap: round; }
.edge-hit:hover polyline, .edge-hit:hover line { filter: brightness(0.8); }
.edge-sel polyline, .edge-sel line { filter: drop-shadow(0 0 4px currentColor); }
.edge-panel { border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 12px; background: #f8fafc; }
.edge-panel-head { margin-bottom: 8px; font-size: 14px; }
.edge-panel-empty { color: var(--muted, #64748b); font-size: 13px; }
.edge-finishes { display: flex; flex-direction: column; gap: 5px; max-height: 260px; overflow-y: auto; }
.edge-fin { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--border, #cbd5e1);
  border-radius: 8px; background: #fff; cursor: pointer; font-size: 13px; text-align: left; }
.edge-fin.active { border-color: var(--accent, #0e7490); box-shadow: inset 0 0 0 1px var(--accent, #0e7490); font-weight: 700; }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: none; }
.edge-legend { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 12px; }
.edge-legend span { display: flex; align-items: center; gap: 6px; }
.edge-table { margin-top: 10px; }
.edge-table td, .edge-table th { padding: 6px 8px; font-size: 13px; }
.edge-table .row-sel { background: #e0f2f1; }

/* ---------- Schichten mit Glassorte (v2.6) ---------- */
/* schmale Bildschirme: Zeile darf umbrechen */
.layer-row { flex-wrap: wrap; }
.layer-row > .layer-sort, .layer-row > .layer-tag { min-width: 140px; }
.layer-sort { font-family: monospace; font-weight: 700; background: #cfe8e6;
  border: 1px solid #9fccc9; color: #0f4c4a; border-radius: 8px; padding: 9px 10px; }

/* ---------- Stammdaten Bearbeitungen gruppiert (v2.9) ---------- */
.admin-procs .tech-groups { min-width: 190px; }
.tech-group-btn .cnt { float: right; background: #e2e8f0; color: #475569; border-radius: 10px;
  padding: 1px 8px; font-size: 11px; font-weight: 700; }
.tech-group-btn.active .cnt { background: rgba(255,255,255,.25); color: #fff; }
.tbl-subhead { background: #f1f5f9; color: var(--accent); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em; padding: 6px 10px !important; }
.admin-procs table { width: 100%; }
.app-version { font-size: 11px; color: var(--muted, #94a3b8); margin-top: 4px; font-family: monospace; }
.btn-del { color: #dc2626 !important; border-color: #fca5a5 !important; }
.btn-del:hover { background: #fef2f2 !important; }

/* ---------- v3.0: Leitstand, Auswertungen, Terminal-Kanten, Vorlagen ---------- */
.plan-board { display: flex; gap: 12px; overflow-x: auto; align-items: flex-start; padding-bottom: 8px; }
.plan-col { min-width: 250px; max-width: 280px; background: #f1f5f9; border-radius: 10px; padding: 8px; flex: none; }
.plan-col-head { font-weight: 700; font-size: 13px; padding: 4px 6px 8px; color: var(--accent); }
.plan-col-head .cnt { float: right; background: #e2e8f0; border-radius: 10px; padding: 1px 8px; font-size: 11px; }
.plan-card { background: #fff; border: 1px solid #e2e8f0; border-left: 4px solid var(--accent);
  border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; font-size: 12px; }
.plan-card.overdue { border-left-color: #dc2626; background: #fef2f2; }
.plan-card.express { border-left-color: #f59e0b; }
.plan-meta { color: #64748b; margin-top: 2px; }
.stats-grid { display: grid; grid-template-columns: 300px 1fr; gap: 14px; align-items: start; }
.stats-grid .card:last-child { grid-column: 1 / -1; }
@media (max-width: 900px) { .stats-grid { grid-template-columns: 1fr; } }
.kpi-row { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid #f1f5f9; flex-wrap: wrap; }
.kpi-row b { font-size: 18px; margin-left: auto; }
.bar-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 12px; }
.bar-label { width: 60px; font-family: monospace; }
.bar { flex: 1; background: #f1f5f9; border-radius: 6px; height: 16px; }
.bar-fill { background: var(--accent); height: 100%; border-radius: 6px; }
.bar-val { width: 110px; text-align: right; font-family: monospace; }
.term-edges { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.edge-chip { display: inline-flex; align-items: center; gap: 5px; border: 1.5px solid #cbd5e1;
  border-radius: 12px; padding: 2px 9px; background: #fff; }
.tpl-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }

/* ================= v3.1: Optische Reduktion & 3-Spalten-Editor ================= */
/* Ruhigere Tabellen: nur horizontale Trennlinien, mehr Luft */
table { border-collapse: collapse; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #64748b;
  border-bottom: 2px solid #e2e8f0 !important; background: transparent !important; }
td { border-left: none !important; border-right: none !important;
  border-bottom: 1px solid #f1f5f9 !important; padding-top: 9px !important; padding-bottom: 9px !important; }
tr.clickable:hover td { background: #f8fafc; }

/* Karten weicher, Seitenkopf klarer */
.card { border: 1px solid #eef2f7; box-shadow: 0 1px 3px rgba(15, 23, 42, .05); border-radius: 12px; }
.page-head h1 { letter-spacing: -.01em; }
.page-head { margin-bottom: 18px; }

/* Primäraktion betont, Sekundär als ruhige Ghost-Buttons */
.btn-primary { box-shadow: 0 1px 2px rgba(14, 116, 144, .3); }
.btn-secondary { background: #fff; }
.btn-secondary:hover { background: #f1f5f9; }

/* Hinweis-Karte (Datenqualität) */
.hint-card { background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px;
  padding: 10px 14px; margin-bottom: 12px; font-size: 13px; color: #78350f; }

/* ---------- 3-Spalten-Positionseditor ---------- */
.modal.modal-wide { max-width: min(1500px, 96vw); width: 96vw;
  padding: 0; background: transparent; box-shadow: none; }
.pos-modal.pos-3col { width: 100%; max-width: none;
  background: #fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
  overflow: hidden;
  display: grid; grid-template-columns: 250px minmax(0, 1fr) 320px; gap: 0; padding: 0; }
.pos-col-left { border-right: 1px solid #e2e8f0; background: #f8fafc; border-radius: 12px 0 0 12px;
  display: flex; flex-direction: column; max-height: 86vh; }
.pos-left-head { font-weight: 700; font-size: 13px; padding: 14px 12px 8px; color: var(--accent); }
#pos-list { overflow-y: auto; flex: 1; }
.pos-list-item { position: relative; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
  margin: 4px 8px; padding: 8px 10px; cursor: pointer; font-size: 12px; }
.pos-list-item:hover { border-color: #94a3b8; }
.pos-list-item.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pli-top { display: flex; justify-content: space-between; font-family: monospace; }
.pli-desc { margin: 2px 0; color: #0f172a; }
.pli-meta { color: #64748b; }
.pli-copy { position: absolute; right: 6px; bottom: 6px; opacity: 0; }
.pos-list-item:hover .pli-copy { opacity: 1; }
.pos-col-mid { padding: 16px 18px; max-height: 86vh; overflow-y: auto; }
.pos-col-right { border-left: 1px solid #e2e8f0; background: #f8fafc; border-radius: 0 12px 12px 0;
  padding: 12px; max-height: 86vh; overflow-y: auto; }
.side-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.side-card-head { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent); padding: 10px 12px 6px; }
.side-price { padding: 4px 12px 12px; border: none; margin: 0; }
.check-box { padding: 4px 12px 12px; font-size: 12px; }
.check-row { padding: 5px 8px; border-radius: 6px; margin-bottom: 4px; }
.check-ok { background: #f0fdf4; color: #166534; }
.check-info { background: #eff6ff; color: #1e40af; }
.check-warn { background: #fffbeb; color: #92400e; }
.check-fail { background: #fef2f2; color: #991b1b; font-weight: 600; }
@media (max-width: 1100px) {
  .pos-modal.pos-3col { grid-template-columns: 1fr; }
  .pos-col-left { display: none; }
  .pos-col-right { border-left: none; border-top: 1px solid #e2e8f0; border-radius: 0 0 12px 12px; }
}
.row-overdue td { background: #fef2f2 !important; }
.cut-sheet-head { font-size: 13px; margin: 10px 0 4px; }

/* ===== v3.4 Stammdatenverwaltung (3 Spalten, Drag&Drop) ===== */
.md-wrap { display:grid; grid-template-columns:210px 1fr 360px; gap:14px; align-items:start; }
.md-nav { background:var(--card,#fff); border:1px solid var(--line,#e2e8f0); border-radius:12px;
  padding:10px; position:sticky; top:12px; }
.md-nav-sec { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:var(--muted,#64748b); margin:10px 6px 4px; }
.md-nav-sec:first-child { margin-top:0; }
.md-nav-btn { display:block; width:100%; text-align:left; background:none; border:none;
  padding:7px 9px; border-radius:8px; cursor:pointer; font-size:13.5px; color:inherit; }
.md-nav-btn:hover { background:var(--bg,#f1f5f9); }
.md-nav-btn.active { background:var(--teal,#0f766e); color:#fff; font-weight:600; }
.md-mid { min-width:0; }
.md-toolbar { display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.md-toolbar input { flex:1; min-width:180px; }
.md-group { background:var(--card,#fff); border:1px solid var(--line,#e2e8f0);
  border-radius:12px; margin-bottom:12px; overflow:hidden; }
.md-group-head { padding:9px 13px; font-weight:700; background:var(--bg,#f8fafc);
  border-bottom:1px solid var(--line,#e2e8f0); display:flex; align-items:center; gap:8px; }
.md-group-head .cnt { font-weight:400; font-size:12px; color:var(--muted,#64748b); }
.md-subhead { padding:7px 13px 2px; font-size:12px; font-weight:600; color:var(--muted,#64748b); }
.md-drop { min-height:38px; padding:6px; transition:background .12s; }
.md-drop.over { background:#e0f2f1; outline:2px dashed var(--teal,#0f766e); outline-offset:-4px;
  border-radius:8px; }
.md-drop-hint { color:var(--muted,#94a3b8); font-size:12.5px; padding:8px 10px; }
.md-item { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px;
  cursor:grab; border:1px solid transparent; }
.md-item:hover { background:var(--bg,#f1f5f9); }
.md-item.active { border-color:var(--teal,#0f766e); background:#f0fdfa; }
.md-item.inactive { opacity:.45; }
.md-item.dragging { opacity:.35; }
.md-item.insert-before { box-shadow:0 -2px 0 0 var(--teal,#0f766e); }
.md-grip { color:var(--muted,#94a3b8); cursor:grab; user-select:none; letter-spacing:-2px; }
.md-item-name { font-weight:600; font-size:13.5px; }
.md-item-meta { margin-left:auto; display:flex; gap:6px; align-items:center;
  font-size:12px; color:var(--muted,#64748b); flex-wrap:wrap; justify-content:flex-end; }
.md-item-meta code { background:var(--bg,#f1f5f9); padding:1px 5px; border-radius:5px; }
.md-detail { background:var(--card,#fff); border:1px solid var(--line,#e2e8f0);
  border-radius:12px; position:sticky; top:12px; max-height:calc(100vh - 90px);
  overflow-y:auto; display:flex; flex-direction:column; }
.md-detail-head { padding:12px 14px; border-bottom:1px solid var(--line,#e2e8f0);
  display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.md-detail-body { padding:10px 14px; display:flex; flex-direction:column; gap:4px; }
.md-detail-body label { font-size:12px; font-weight:600; color:var(--muted,#475569); margin-top:8px; }
.md-detail-body input, .md-detail-body select, .md-detail-body textarea { width:100%; }
.md-detail-body textarea { min-height:52px; resize:vertical; }
.md-detail-actions { padding:12px 14px; border-top:1px solid var(--line,#e2e8f0);
  display:flex; gap:8px; position:sticky; bottom:0; background:var(--card,#fff); }
.md-detail-actions .btn-del { margin-left:auto; color:var(--red,#dc2626); }
.md-toggle { display:flex; align-items:center; gap:8px; font-size:13.5px; padding:3px 0;
  font-weight:400 !important; margin-top:2px !important; }
.md-vis { margin-top:8px; padding:8px 10px; background:var(--bg,#f8fafc); border-radius:8px; }
.md-empty { padding:44px 18px; text-align:center; color:var(--muted,#94a3b8); font-size:13.5px; }
.md-history { border-top:1px solid var(--line,#e2e8f0); }
.md-hist-row { padding:8px 14px; font-size:12.5px; border-bottom:1px solid var(--bg,#f1f5f9); }
.md-hist-row.undone { opacity:.5; text-decoration:line-through; }
.md-hist-row a { font-size:12px; }
.md-rule-chip { background:#fef9c3; border:1px solid #fde047; border-radius:7px;
  padding:5px 9px; font-size:12.5px; margin-top:4px; }
@media (max-width:1100px) {
  .md-wrap { grid-template-columns:1fr; }
  .md-nav, .md-detail { position:static; max-height:none; }
}

/* v3.5.1: Warnbalken bei Versions-Mischbetrieb + Nullpunkt-Ecken */
#ver-warn { background:#fef2f2; color:#991b1b; border-bottom:2px solid #dc2626;
  padding:10px 18px; font-size:13.5px; position:sticky; top:0; z-index:300; }
.origin-corner circle { transition: r .1s; }
.origin-corner:hover circle:nth-child(2) { stroke-width: 3; }

/* v3.7.1: Glassorten – Dicken/Vorspannungs-Matrix */
.st-row { display:grid; grid-template-columns:1fr 44px 44px 44px; align-items:center; gap:4px;
  padding:2px 0; }
.st-row input[type="checkbox"].sorte-temper { justify-self:center; }
.st-row.st-head { font-size:11px; font-weight:700; color:var(--muted,#64748b);
  text-transform:uppercase; letter-spacing:.4px; }
.st-row.st-head span { text-align:center; }
.st-row.st-head span:first-child { text-align:left; }

/* v3.7.2: EK-Preismatrix */
.st-row.st-pm { grid-template-columns: 90px 1fr 1fr 1fr; gap: 8px; }
.st-row.st-pm input { width: 100%; text-align: right; padding: 5px 8px; }
/* Preismatrix: Verbund-/Isolierglas (Artikel · Aufbau · EK) */
.st-row.st-pm2 { grid-template-columns: 1fr 130px 110px; gap: 8px; align-items: center; }
.st-row.st-pm2 input { width: 100%; text-align: right; padding: 5px 8px; }
/* Preismatrix VSG/ISO mit berechnetem Vorschlag */
.st-row.st-pm3 { grid-template-columns: 1fr 120px 120px 110px; gap: 8px; align-items: center; }
.st-row.st-pm3 input { width: 100%; text-align: right; padding: 5px 8px; }
.pm-calc { text-align: right; font-variant-numeric: tabular-nums; color: #444; cursor: help; }
.pm-calc-warn { color: #a00; }
.pm-warn { margin-left: 4px; color: #c00; }
.pm-fehlt { margin-top: 3px; font-size: 11px; line-height: 1.35; color: #a00; }
.pm-cell-neu { background: #fffbe6; border-color: #111; }

/* v3.8: Formenkatalog – Konstruktionszeichnung im Form-Abschnitt */
.formen-svg { max-height: 460px; background:
  linear-gradient(rgba(27,74,94,.05) 1px, transparent 1px),
  linear-gradient(90deg, rgba(27,74,94,.05) 1px, transparent 1px);
  background-size: 16px 16px; border: 1px solid #e2e8f0; border-radius: 10px; }
.formen-svg .shape { fill: rgba(27,74,94,.08); stroke: #17181c; stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round; }
.formen-svg .hole { fill: #fff; stroke: #17181c; stroke-width: 2; }
.formen-svg .aux { fill: none; stroke: #1b4a5e; stroke-width: 1.3; stroke-dasharray: 5 3.5; opacity: .85; }
.formen-svg .dimln, .formen-svg .dimtick { stroke: #1b4a5e; stroke-width: 1.3; }
.formen-svg .ext { stroke: #1b4a5e; stroke-width: 1; stroke-dasharray: 3 3; opacity: .6; }
.formen-svg .dtxt { fill: #1b4a5e; font-family: ui-monospace, monospace; font-weight: 500; font-size: 13px; }
.formen-svg .center { fill: #17181c; }
.formen-svg .sbar { stroke: #5b5d55; stroke-width: 1.4; }
.formen-svg .stxt { fill: #5b5d55; font-family: ui-monospace, monospace; font-size: 11px; }

/* ---------- Stammdaten-Navigation (v3.14): Suche, Zähler, Klappgruppen ---------- */
.md-navsearch { width: 100%; margin-bottom: 10px; padding: 6px 8px; font-size: 13px;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.md-nav-sec-btn { display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; user-select: none; padding-right: 2px; }
.md-nav-sec-btn:hover { color: #111; }
.md-nav-caret { font-size: 10px; color: #999; }
.md-nav-btn { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.md-nav-right { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.md-badge { font-size: 11px; color: #888; font-variant-numeric: tabular-nums; }
.md-nav-btn.active .md-badge { color: #ddd; }
.md-badge-warn { font-size: 10px; font-weight: 600; color: #fff; background: #c00;
  border-radius: 8px; padding: 0 5px; line-height: 15px; min-width: 15px; text-align: center; }

/* Stammdaten-Startseite */
.md-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.md-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.md-card h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: #666; }
.md-card-row { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 6px 0; text-decoration: none; color: #111; border-bottom: 1px solid #f2f2f2; font-size: 14px; }
.md-card-row:last-child { border-bottom: 0; }
.md-card-row:hover { color: #000; padding-left: 3px; }
.md-todo { border-left: 3px solid #c00; margin-bottom: 16px; }
.md-todo-row { display: flex; align-items: center; gap: 10px; padding: 7px 0;
  text-decoration: none; color: #111; border-bottom: 1px solid #f2f2f2; font-size: 14px; }
.md-todo-row:last-child { border-bottom: 0; }
.md-todo-go { margin-left: auto; color: #888; font-size: 12px; }
.md-todo-row:hover .md-todo-go { color: #111; }

/* ---------- Geschäftskunden (v3.15): Logo, Rollen, Kontakte ---------- */
.logo-box { width: 160px; height: 110px; border: 1px dashed var(--line); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; background: #fafafa; overflow: hidden; }
.logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-docs { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; }
.logo-docs .chk { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 400; }
.role-chip { display: inline-block; font-size: 11px; background: #f1f1f1; border: 1px solid #e3e3e3;
  border-radius: 10px; padding: 1px 7px; margin: 1px 0; white-space: nowrap; }
.row-inactive { opacity: .55; }

/* ---------- Positionseditor: erfasste Aufbauten als Karten (v3.16) ---------- */
.auf-bar { margin: 4px 0 14px; }
.auf-bar-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.auf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 8px; }
/* Kompakte Auswahlzeile + Auswahlfenster (v3.18) */
.auf-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fafafa; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 7px 10px; margin: 4px 0 12px; }
.auf-pick { flex: 1 1 220px; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.auf-pick b { font-size: 13px; }
.auf-pick-meta { font-size: 12px; color: #777; font-family: var(--mono, ui-monospace, monospace); }
.auf-pick-frei { color: #555; }
.auf-liste { max-height: 55vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.auf-zeile { display: grid; grid-template-columns: 1.4fr 1.1fr 1fr auto; gap: 10px; align-items: center;
  width: 100%; text-align: left; background: #fff; border: 0; border-bottom: 1px solid #f0f0f0;
  padding: 8px 12px; cursor: pointer; font: inherit; }
.auf-zeile:last-child { border-bottom: 0; }
.auf-zeile:hover { background: #f6f6f6; }
.auf-zeile.active { background: #f0f0f0; box-shadow: inset 3px 0 0 #111; }
.auf-z-name { font-weight: 600; font-size: 13px; }
.auf-z-build { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; color: #444; }
.auf-z-meta { font-size: 12px; color: #888; }
.auf-z-ek { font-size: 12px; text-align: right; white-space: nowrap; }
.auf-card { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 10px; cursor: pointer; font: inherit; transition: border-color .1s; }
.auf-card:hover { border-color: #999; }
.auf-card.active { border: 2px solid #111; padding: 7px 9px; }
.auf-card-new { border-style: dashed; background: transparent; }
.auf-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.auf-name { font-weight: 600; font-size: 13px; }
.auf-check { font-weight: 700; }
.auf-warn { font-size: 10px; background: #fef3c7; color: #92400e; border-radius: 8px; padding: 1px 6px; white-space: nowrap; }
.auf-build { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; color: #444; margin-top: 3px; }
.auf-meta { font-size: 11px; color: #888; margin-top: 2px; }
.auf-ek { font-size: 12px; margin-top: 5px; }
.auf-tag { font-size: 10px; background: #111; color: #fff; border-radius: 8px; padding: 1px 6px; margin-left: 6px; }
.auf-tag-auto { background: #e5e5e5; color: #444; }

/* Offene Punkte in den Stammdaten (v3.17) */
.md-badge-btn { cursor: pointer; }
.md-badge-btn:hover { background: #900; }
.md-item-warn { border-left: 3px solid #c00; }
.md-item-problem { font-size: 11px; color: #a00; font-weight: 400; margin-top: 2px; line-height: 1.35; }
.md-problem-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff5f5; border: 1px solid #f0c9c9; border-radius: var(--radius);
  padding: 7px 10px; margin-bottom: 8px; font-size: 13px; color: #7a1010; }
.md-problem-bar-soft { background: #fafafa; border-color: var(--line); color: #555; }

/* Navigation/Kacheln als echte Links (v3.19) */
.md-nav-btn { text-decoration: none; }
.md-card-row { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid #f2f2f2; font-size: 14px; }
.md-card-row:last-child { border-bottom: 0; }
.md-card-link { color: #111; text-decoration: none; flex: 1; }
.md-card-link:hover { text-decoration: underline; }
a.md-badge-warn { text-decoration: none; display: inline-block; }

/* ---------- Kalkulation (v3.22): Zuschlagskalkulation mit DXF-Bearbeitung ---------- */
.kalk-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px; align-items: start; }
.kalk-side { min-width: 0; }
.kalk-main { min-width: 0; }
.kalk-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; }
.kalk-box h3 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #666; margin: 0;
  padding: 10px 12px 8px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.kalk-box h3 span { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kalk-content { padding: 10px 12px 12px; }
.kalk-content label { margin: 8px 0 3px; }
.kalk-content label:first-child { margin-top: 0; }
.kalk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
.kalk-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.kalk-check { display: flex; gap: 8px; align-items: center; font-size: 12px; font-weight: 500; color: var(--ink); margin: 6px 0; text-transform: none; }
.kalk-check input { width: auto; margin: 0; accent-color: #111; }
.kalk-checks { display: flex; flex-direction: column; }
.kalk-checks .kalk-check { margin: 3px 0; }
.kalk-checks .sw { width: 12px; margin-right: 4px; }
.kalk-status { margin-top: 8px; padding: 7px 10px; border-radius: var(--radius); background: #f1f5f9; font-size: 12px; line-height: 1.4; border-left: 3px solid var(--line); word-break: break-word; }
.kalk-status.ok { border-left-color: var(--green); }
.kalk-status.ok::before { content: "✓  "; color: var(--green); }
.kalk-status.err { background: #fee2e2; border-left-color: var(--red); color: #991b1b; }
.kalk-status.err::before { content: "✕  "; }
.kalk-drop { padding: 12px; border: 1px dashed #94a3b8; border-radius: var(--radius); text-align: center; background: #fff; font-size: 12px; }
.kalk-drop.drag { border-color: #111; background: #f1f5f9; }
.kalk-drop input[type=file] { width: auto; border: 0; padding: 0; font-size: 12px; }
.kalk-poslist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.kalk-pos { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; background: #fff; font-size: 13px; }
.kalk-pos:hover { background: #f1f5f9; }
.kalk-pos.active { background: #111; color: #fff; border-color: #111; }
.kalk-pos .n { color: var(--muted); }
.kalk-pos.active .n { color: #9ca3af; }
.kalk-pos .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kalk-pos .sum { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.kalk-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.kalk-tab { background: #fff; border: 1px solid var(--line); color: var(--ink); border-radius: var(--radius); font-weight: 600; }
.kalk-tab:hover { background: #f1f5f9; }
.kalk-tab.active { background: #111; color: #fff; border-color: #111; }
.kalk-view { display: none; }
.kalk-view.active { display: block; }
.kalk-toolbar { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 12px; margin-bottom: 12px; }
.kalk-toolbar .kalk-box { margin: 0; }
.kalk-viewerWrap { height: 46vh; min-height: 340px; position: relative; background: #f1f5f9; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.kalk-viewer { width: 100%; height: 100%; display: block; }
.kalk-viewer .geom { fill: none; stroke: #111; stroke-width: 1.5; vector-effect: non-scaling-stroke; cursor: pointer; }
.kalk-viewer .geom.inner { stroke: #1a1a1a; }
.kalk-viewer .geom.open { stroke: #8c8c8c; stroke-dasharray: 6 4; }
.kalk-viewer .geom.halo { stroke: #fff !important; stroke-width: 9; stroke-dasharray: none; pointer-events: none; }
.kalk-viewer .geom.selected { stroke: #111 !important; stroke-width: 4; stroke-dasharray: none; }
.kalk-viewer .geom.overlay { pointer-events: none; stroke-width: 1.5; }
.kalk-legend { position: absolute; right: 8px; top: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px; font-size: 11px; line-height: 1.6; }
.kalk-legend .sw, .kalk-checks .sw { display: inline-block; width: 16px; height: 3px; margin-right: 8px; vertical-align: middle; background: #8c8c8c; }
.kalk-legend .sw.sel { background: #111; height: 4px; box-shadow: 0 0 0 2px #f1f5f9; }
.kalk-legend .sw.dash { background: repeating-linear-gradient(90deg, #111 0 4px, transparent 4px 7px); }
.kalk-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 14px; pointer-events: none; }
.kalk-summary { display: grid; grid-template-columns: repeat(6, minmax(100px, 1fr)); gap: 12px; margin-top: 12px; }
.kalk-summary .kpi .num { font-size: 18px; text-align: left; }
.kalk-summary .kpi.kalk-kpi-vp { background: #111; color: #fff; border-color: #111; }
.kalk-summary .kpi.kalk-kpi-vp .lbl { color: #cbd5e1; }
.kalk-tableWrap { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: auto; }
.kalk-tableWrap.kalk-contours { max-height: 30vh; }
.kalk-tableWrap table, .kalk-box table { font-size: 12px; }
.kalk-tableWrap th { position: sticky; top: 0; z-index: 1; }
.kalk-box td, .kalk-tableWrap td { padding: 6px 8px; white-space: nowrap; }
.kalk-box th, .kalk-tableWrap th { padding: 8px; }
td.right { text-align: right; }
tfoot td { font-weight: 600; border-top: 1px solid #94a3b8; }
tfoot tr.total td { background: #f1f5f9; border-top: 2px solid #111; font-weight: 700; font-size: 13px; }
tr.sel td, tr.sel:hover td { background: #111 !important; color: #fff; }
.kalk-pill { display: inline-block; padding: 2px 6px; border: 1px solid #111; border-radius: var(--radius); font-size: 10px; font-weight: 600; line-height: 1.2; }
.kalk-pill.outer { background: #111; color: #fff; }
.kalk-pill.inner { background: #fff; color: #111; }
.kalk-pill.open { border-color: #8c8c8c; color: #8c8c8c; }
.kalk-pill.notch { background: #fff; color: #111; border-style: dashed; }
tr.sel .kalk-pill.outer { background: #fff; color: #111; border-color: #fff; }
tr.sel .kalk-pill.inner, tr.sel .kalk-pill.notch, tr.sel .kalk-pill.open { background: #111; color: #fff; border-color: #fff; }
table.kalk-edit td { padding: 3px 4px; }
table.kalk-edit input, table.kalk-edit select { padding: 4px 6px; min-width: 60px; border-radius: var(--radius); }
table.kalk-edit input[type=color] { width: 36px; min-width: 36px; height: 28px; padding: 2px; }
table.kalk-edit input[type=checkbox] { width: auto; min-width: 0; accent-color: #111; }
table.kalk-edit td.num { padding-right: 10px; }
.kalk-schema td { padding: 7px 8px; white-space: nowrap; }
.kalk-schema tr.sum td { border-top: 1px solid #94a3b8; font-weight: 600; }
.kalk-schema tr.total td { border-top: 2px solid #111; background: #f1f5f9; font-weight: 700; }
.kalk-schema tr.vp td { background: #111; color: #fff; font-weight: 700; font-size: 14px; }
.kalk-schema td.op { color: var(--muted); width: 28px; text-align: center; }
.kalk-schema tr.vp td.op, .kalk-schema tr.vp td.pct { color: #cbd5e1; }
.kalk-schema td.pct { color: var(--muted); text-align: right; width: 64px; font-variant-numeric: tabular-nums; }
.kalk-schema td.sub { padding-left: 28px; color: #334155; white-space: normal; }
.kalk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.kalk-calcgrid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 12px; align-items: start; margin-top: 12px; }
.kalk-vpbox { background: #111; color: #fff; border-radius: var(--radius); padding: 20px; }
.kalk-vpbox .big { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; margin-top: 6px; }
.kalk-vpbox .l { font-size: 12px; color: #9ca3af; }
dl.kalk-kv { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; margin: 14px 0 0; font-variant-numeric: tabular-nums; font-size: 12px; }
dl.kalk-kv dt { color: #cbd5e1; }
dl.kalk-kv dd { margin: 0; text-align: right; font-weight: 500; }
.kalk-box dl.kalk-kv dt { color: #334155; }
dl.kalk-kv dd.minus { font-weight: 700; color: #fca5a5; }
.kalk-box dl.kalk-kv dd.minus { color: var(--red); }
dl.kalk-kv dd.minus::before { content: "!  "; }
.kalk-minus { color: var(--red); }
.kalk-savestate { color: var(--muted); font-size: 12px; }
.kalk-savestate.dirty { color: var(--amber); }
.kalk-locked { background: #fef3c7; border-color: #fcd34d; color: #92400e; margin-bottom: 12px; }
@media (max-width: 1100px) {
  .kalk-layout, .kalk-toolbar, .kalk-calcgrid, .kalk-two { grid-template-columns: 1fr; }
  .kalk-summary { grid-template-columns: 1fr 1fr 1fr; }
}
/* Kalkulation v3.23: Kunden- & Qualitätsmodell */
.kalk-cur { background: #111 !important; color: #fff !important; }
.kalk-cur .wiz-hint { color: #cbd5e1; }
tr.kalk-currow td { background: #f1f5f9; font-weight: 600; }
tr.kalk-currow td.kalk-cur { background: #111; }

/* Benutzerverwaltung v3.23.1 */
tr.u-inaktiv td { color: var(--muted); }
tr.u-inaktiv td b { color: var(--muted); }