/* Auftragsplaner – ruhige Arbeitsfläche, Farben nur für Termin-Arten. */
:root {
  /* hell, luftig – Farben vor allem für Termin-Arten und Status */
  --bg: #f3f3f4;
  --surface: #ffffff;
  --col: #e9e9eb;
  --ink: #141416;
  --body: #3a3a3f;
  --muted: #6e6e75;
  --line: #e0e0e3;
  --accent: #1c1c1f;
  --accent-ink: #ffffff;
  --brand: #e42e20;
  --danger: #c2372e;
  --weekend: #f0f0f2;
  --today: #fcefee;
  --pause: rgba(120, 130, 150, .12);
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 2px 6px rgba(16, 24, 40, .06);
  --shadow-hover: 0 4px 14px rgba(16, 24, 40, .10), 0 1px 3px rgba(16, 24, 40, .06);
  --shadow-lift: 0 18px 40px rgba(16, 24, 40, .18);
  --glass: rgba(255, 255, 255, .8);
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  --c-besichtigung: #3b82f6;
  --c-gzd: #c026d3;
  --c-druckvorstufe: #0d9488;
  --c-produktion: #f59e0b;
  --c-montage: #16a34a;
  --c-ferien: #8b5cf6;
  --c-frei: #94a3b8;
  --c-krank: #e11d48;
  --c-privat: #64748b;
  --c-schule: #0891b2;

  /* Statusfarben (hell) – Hintergrund, Rand, Schrift */
  --ok-bg: #e7f6ec; --ok-line: #b9e3c6; --ok-ink: #12703a;
  --warn-bg: #fff4dc; --warn-line: #f2d48c; --warn-ink: #7f4d00;
  --bad-bg: #fdeceb; --bad-line: #f5c2bd; --bad-ink: #b42318;
  --info-bg: #eaf0ff; --info-line: #cdd9fb; --info-ink: #2448c9;
  --note-bg: #fff8cc; --note-line: #efdc7c; --note-ink: #5c4d0a;

  --r: 12px;
  --f: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  color-scheme: light;
}
/* Dunkel – per Knopf oben rechts (data-theme="dark"), sonst wie das System */
:root[data-theme="dark"] {
  --bg: #25262a; --surface: #303136; --col: #2b2c30; --ink: #f3f3f5; --body: #dadade; --muted: #a8a8af;
  --line: #424349; --accent: #ececef; --accent-ink: #25262a; --danger: #f2706a; --weekend: #2b2c30; --today: #42302f;
  --pause: rgba(170, 180, 200, .09);
  --shadow: 0 1px 2px rgba(0,0,0,.35); --shadow-hover: 0 6px 18px rgba(0,0,0,.4); --shadow-lift: 0 18px 44px rgba(0,0,0,.5);
  --glass: rgba(43, 44, 48, .86);
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b94a4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --ok-bg: #1d3a2a; --ok-line: #2b5a3e; --ok-ink: #8be3aa;
  --warn-bg: #3d3018; --warn-line: #66501f; --warn-ink: #f5cc78;
  --bad-bg: #452220; --bad-line: #73332b; --bad-ink: #ffa69d;
  --info-bg: #222e50; --info-line: #36477a; --info-ink: #a8bdff;
  --note-bg: #3d3619; --note-line: #665a24; --note-ink: #f3e398;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--body); font: 14px/1.45 var(--f); -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; }
h2, h3 { color: var(--ink); margin: 0; letter-spacing: -.01em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Kopfzeile */
.top { display: flex; align-items: center; gap: 14px; padding: 10px 18px; background: var(--surface); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 650; color: var(--ink); font-size: 15px; }
.brand { gap: 12px; }
.brand .logo { height: 30px; width: auto; color: var(--ink); flex: none; }
.brand span { padding-left: 12px; border-left: 1px solid var(--line); font-weight: 600; }
.tabs { display: flex; gap: 2px; background: var(--bg); padding: 3px; border-radius: 9px; }
.tabs button { border: 0; background: none; padding: 6px 14px; border-radius: 7px; cursor: pointer; color: var(--muted); font-weight: 550; }
.tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
#suche { margin-left: auto; width: min(280px, 100%); height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }

.btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 550; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--danger); }
.btn.sm { height: 30px; padding: 0 10px; font-size: 13px; }
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; }

main { flex: 1; min-height: 0; display: flex; }
.view { flex: 1; min-width: 0; }

/* Auftragsübersicht (Board) */
.board { display: flex; gap: 12px; padding: 16px 18px; overflow-x: auto; align-items: flex-start; }
.column { flex: 0 0 272px; background: var(--col); border-radius: 12px; display: flex; flex-direction: column; max-height: 100%; }
.column > header { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; font-weight: 650; color: var(--ink); }
.column > header .count { color: var(--muted); font-weight: 500; font-size: 13px; }
.column > header .add { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; border-radius: 6px; width: 26px; height: 26px; }
.column > header .add:hover { background: var(--surface); color: var(--ink); }
.column > header .lupe { margin-left: auto; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 6px; width: 26px; height: 26px; display: grid; place-items: center; }
.column > header .lupe + .add { margin-left: 0; }
.column > header .lupe:hover, .column > header .lupe.on { background: var(--surface); color: var(--accent); }
.column > header .stift { margin-left: 0; }
.column > header { cursor: grab; user-select: none; touch-action: none; }
.column > header button { cursor: pointer; }
.col-ghost { position: fixed; z-index: 120; pointer-events: none; overflow: hidden; box-shadow: var(--shadow-lift); transform: rotate(1.5deg); opacity: .95; cursor: grabbing; }
.col-placeholder { flex: 0 0 auto; border: 2px dashed var(--muted); border-radius: 12px; opacity: .45; max-height: 70vh; }
.sp-menu { position: fixed; z-index: 150; width: 290px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lift); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.sp-menu[hidden] { display: none; }
.sp-titel { font-weight: 650; color: var(--ink); font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.sp-trello { font-size: 11px; font-weight: 600; background: var(--info-bg); color: var(--info-ink); padding: 1px 7px; border-radius: 999px; }
.sp-name { display: flex; gap: 6px; }
.sp-name input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: var(--surface); font-size: 14px; }
.sp-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sp-zeile .btn { justify-content: center; }
.sp-zeile .btn:disabled { opacity: .4; cursor: default; }
.sp-menu .small { margin: 0; }
.col-search { display: flex; align-items: center; gap: 6px; margin: 0 8px 6px; padding: 0 6px 0 10px; background: var(--surface); border: 1px solid var(--accent); border-radius: 8px; color: var(--muted); }
.col-search input { flex: 1; min-width: 0; border: 0; background: none; padding: 7px 0; outline: none; font-size: 13.5px; }
.col-search button { border: 0; background: none; color: var(--muted); font-size: 17px; cursor: pointer; line-height: 1; }
.col-leer { margin: 4px; font-size: 13px; color: var(--muted); }
.cards { padding: 4px 8px 10px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 40px; }
.card { background: var(--surface); border-radius: var(--r); padding: 10px 12px; box-shadow: var(--shadow); cursor: grab; user-select: none; touch-action: none; border-left: 3px solid transparent; }
.card:hover { box-shadow: var(--shadow), 0 0 0 1px var(--line); }
/* rotes Ausrufezeichen oben rechts: im Auftrag steht eine Notiz */
.card { position: relative; }
.notiz-mark { position: absolute; top: 6px; right: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 16px; text-align: center; cursor: help; z-index: 1; }
.card .nr { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; display: flex; justify-content: space-between; gap: 8px; }
.card .kunde { font-weight: 650; color: var(--ink); margin-top: 2px; }
.card .titel { color: var(--body); }
.card .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 999px; background: var(--bg); font-size: 12px; white-space: nowrap; }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--c, currentColor); }
.card[class*="t-"] { border-left-color: var(--c); }
.avatar { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--surface); font-size: 10.5px; font-weight: 700; display: grid; place-items: center; }
.folder-warn { color: var(--danger); }
.placeholder { border: 2px dashed var(--muted); border-radius: var(--r); opacity: .45; }
.ghost { position: fixed; z-index: 100; pointer-events: none; box-shadow: var(--shadow-lift); transform: rotate(2deg); cursor: grabbing; }
.dragging-body, .dragging-body * { cursor: grabbing !important; }

/* Plantafel */
.plan { display: flex; flex-direction: column; padding: 14px 18px 10px; gap: 10px; min-height: 0; }
.plan-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan-bar strong { color: var(--ink); font-size: 15px; min-width: 160px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.seg button { border: 0; background: none; padding: 5px 11px; cursor: pointer; color: var(--body); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--ink); color: var(--surface); }
.legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-left: auto; }
.legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; background: var(--c); }
.plan-scroll { flex: 1; min-height: 0; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.plan-grid { position: relative; min-width: max-content; }
.hint { margin: 0; font-size: 12px; color: var(--muted); }

.p-head, .p-row { display: flex; }
.p-head { position: sticky; top: 0; z-index: 5; background: var(--surface); border-bottom: 1px solid var(--line); }
.p-label { flex: 0 0 var(--lw); position: sticky; left: 0; z-index: 3; background: var(--surface); border-right: 1px solid var(--line); padding: 8px 12px; overflow: hidden; }
.p-head .p-label { z-index: 6; display: flex; align-items: flex-end; font-size: 12px; color: var(--muted); font-weight: 600; }
.p-days { position: relative; display: flex; }
.p-day { width: var(--dw); flex: 0 0 var(--dw); text-align: center; font-size: 11px; color: var(--muted); padding: 4px 0 6px; border-left: 1px solid transparent; }
.p-day b { display: block; font-size: 13px; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.p-day.we { background: var(--weekend); }
.p-day.today b { color: #fff; background: var(--brand); border-radius: 6px; margin: 0 auto; width: 24px; }
.p-day.mon { border-left-color: var(--line); }
.p-kw { position: absolute; top: 0; font-size: 10.5px; font-weight: 700; color: var(--muted); padding: 2px 6px; letter-spacing: .02em; }
.p-head .p-days { padding-top: 16px; }

.p-section { position: sticky; left: 0; padding: 8px 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: var(--bg); border-bottom: 1px solid var(--line); width: 100%; }
.p-row { border-bottom: 1px solid var(--line); min-height: 44px; }
.p-row:hover .p-label { background: var(--bg); }
.p-label .l1 { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.p-label .l1:hover { color: var(--accent); }
.p-label .l2 { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-track { position: relative; flex: 0 0 auto; cursor: copy; }
.p-bg { position: absolute; inset: 0; display: flex; pointer-events: none; }
.p-bg span { width: var(--dw); flex: 0 0 var(--dw); }
.p-bg .we { background-color: var(--weekend); }
.p-bg .today { background-color: var(--today); }
.p-bg .mon { box-shadow: inset 1px 0 0 var(--line); }

.bar { position: absolute; height: 32px; border-radius: 7px; background: var(--c); color: #fff; font-size: 12.5px; font-weight: 600; padding: 0 8px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; cursor: grab; touch-action: none; user-select: none; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.bar:hover { filter: brightness(1.06); }
.bar.drag { opacity: .85; box-shadow: var(--shadow-lift); z-index: 4; cursor: grabbing; }
.plan-tipp { position: fixed; z-index: 160; width: 280px; background: var(--surface); color: var(--body); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lift); padding: 12px 14px; font-size: 13px; line-height: 1.45; pointer-events: none; display: flex; flex-direction: column; gap: 3px; }
.plan-tipp[hidden] { display: none; }
.notiz-tipp { position: fixed; z-index: 170; width: min(360px, calc(100vw - 16px)); background: var(--surface); color: var(--body); border: 1px solid var(--line);
  border-left: 4px solid var(--danger); border-radius: 12px; box-shadow: var(--shadow-lift); padding: 12px 16px; pointer-events: none; }
.notiz-tipp[hidden] { display: none; }
.notiz-tipp .nt-kopf { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.notiz-tipp .nt-text { font-size: 15px; line-height: 1.5; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.plan-tipp b { color: var(--ink); font-size: 14.5px; }
.tt-kopf { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--c); margin-bottom: 2px; }
.tt-kopf i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.tt-ok { color: var(--ok-ink); font-weight: 600; margin-left: auto; }
.tt-zeile { color: var(--body); font-size: 12.5px; }
.tt-notiz { margin-top: 4px; background: var(--bg); border-radius: 6px; padding: 5px 8px; font-size: 12.5px; }
.tt-fuss { margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.bar.fertig { opacity: .45; }
.bar.fertig::before { content: "✓ "; }
.fertig-btn { margin-top: 8px; width: 100%; border: 1px solid var(--ok-line); background: var(--ok-bg); color: var(--ok-ink); font-weight: 600; font-size: 12px; border-radius: 7px; padding: 5px 8px; cursor: pointer; }
.fertig-btn:hover { background: #d3eedb; }
.fertig-btn.zurueck { background: var(--bg); border-color: var(--line); color: var(--body); }
.fertig-btn.zurueck:hover { background: var(--col); }
.card.spiegel { border-style: dashed; opacity: .85; }
.produktion-offen { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; padding: 3px 8px; border-radius: 6px; background: var(--warn-bg); color: var(--warn-ink); font-size: 11.5px; font-weight: 700; }
.produktion-offen button { margin-left: auto; border: 0; background: none; color: var(--warn-ink); text-decoration: underline; font-size: 11.5px; cursor: pointer; padding: 0; }
.spiegel-hinweis { font-size: 11px; font-weight: 600; color: var(--c-produktion); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.spiegel-aus { margin-left: auto; font: inherit; font-weight: 500; font-size: 11px; color: var(--muted, #6b7280); background: none; border: 1px solid currentColor; border-radius: 6px; padding: 0 6px; cursor: pointer; opacity: .8; }
.spiegel-aus:hover { opacity: 1; }
.phasen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.phasen .fertig-btn { width: auto; margin: 0; }
.phase.ok { color: var(--ok-ink); font-weight: 600; font-size: 13px; }
.bar.ini { padding: 0; justify-content: center; font-size: 15px; font-weight: 800; letter-spacing: 0; }
.p-bg span { position: relative; }
.p-bg .frei { position: absolute; right: 4px; bottom: 2px; font-style: normal; font-size: 10px; font-weight: 600; color: var(--ok-ink); white-space: nowrap; }
.bar .rs { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: ew-resize; }
.bar .rs::after { content: ""; position: absolute; right: 3px; top: 8px; bottom: 8px; width: 2px; border-radius: 1px; background: rgba(255,255,255,.6); }
.bar.absenz { background: repeating-linear-gradient(135deg, var(--c), var(--c) 6px, color-mix(in srgb, var(--c) 80%, #fff) 6px, color-mix(in srgb, var(--c) 80%, #fff) 12px); }

.t-besichtigung { --c: var(--c-besichtigung); }
.t-gzd { --c: var(--c-gzd); }
.t-druckvorstufe { --c: var(--c-druckvorstufe); }
.t-produktion { --c: var(--c-produktion); }
.t-montage { --c: var(--c-montage); }
.t-ferien { --c: var(--c-ferien); }
.t-frei { --c: var(--c-frei); }
.t-krank { --c: var(--c-krank); }
.t-privat { --c: var(--c-privat); }
.t-schule { --c: var(--c-schule); }

/* Etiketten (Registerfarben) – zugeklappt als Farbbalken, aufgeklappt mit Namen, wie in Trello */
.card .labels { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; cursor: pointer; }
.card .labels span { background: var(--lc); height: 8px; min-width: 40px; border-radius: 4px; font-size: 0; color: transparent; }
.labels-open .card .labels span { height: auto; min-width: 0; font-size: 11px; font-weight: 600; color: #fff; padding: 1px 8px; line-height: 16px; text-shadow: 0 0 2px rgba(0,0,0,.25); }
.pill.late { background: var(--bad-bg); color: var(--danger); font-weight: 600; white-space: normal; }
.pill.re { background: var(--ok-bg); color: var(--ok-ink); font-weight: 600; }
.pill.due.late { background: var(--bad-bg); color: var(--danger); font-weight: 600; }
.add-card { margin: 0 8px 8px; border: 0; background: none; text-align: left; padding: 8px 8px; border-radius: 8px; color: var(--muted); cursor: pointer; font-weight: 500; }
.add-card:hover { background: rgba(0,0,0,.05); color: var(--ink); }
.chip.label-chip { border-color: transparent; background: color-mix(in srgb, var(--lc) 22%, var(--surface)); color: var(--ink); }
.chip.label-chip[aria-pressed="true"] { background: var(--lc); color: #fff; border-color: var(--lc); }

/* Listen in den Einstellungen / Import */
.edit-list, .imp-lists { display: flex; flex-direction: column; gap: 6px; }
.imp-lists { max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.edit-row { display: flex; align-items: center; gap: 8px; }
.edit-row > input:not([type]), .edit-row > input[data-k="name"] { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: var(--surface); }
.edit-row input[type="color"] { width: 38px; height: 32px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); flex: none; }
.edit-row > button { width: 30px; height: 30px; border: 1px solid var(--line); background: var(--surface); border-radius: 7px; cursor: pointer; color: var(--muted); flex: none; }
.edit-row > button:disabled { opacity: .35; cursor: default; }
label.check { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink); }
label.check input { width: auto; min-height: 0; flex: none; }
.imp-lists .edit-row { justify-content: space-between; }
.imp-lists small { color: var(--muted); font-weight: 400; }
.file-btn { display: inline-flex; }

.anhang-box { display: flex; flex-direction: column; gap: 8px; }
.anhang-zone { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border: 2px dashed var(--line); border-radius: 10px; font-size: 13px; color: var(--muted); }
.anhang-zone.ueber { border-color: var(--accent); background: var(--today); }
.anhang-zone em { font-style: normal; color: var(--accent); font-weight: 600; }
.anhang-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.anhang-liste:empty { display: none; }
.anhang { position: relative; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.anhang a { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.anhang img, .anhang .datei { width: 100%; height: 80px; object-fit: cover; background: var(--bg); }
.anhang .datei { display: grid; place-items: center; font-weight: 800; color: var(--muted); font-size: 15px; }
.anhang small { padding: 0 8px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anhang small:first-of-type { padding-top: 5px; }
.anhang small.gr { color: var(--muted); padding-bottom: 6px; }
.anhang.wartet { opacity: .7; }
.anhang-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; }
.checklisten {
 margin: 0; padding: 10px 12px; background: var(--bg); border-radius: 8px; font: 13px/1.5 var(--f); white-space: pre-wrap; color: var(--body); }
.trello-modus { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--bg); border-radius: 8px; }
details.small summary { cursor: pointer; color: var(--accent); }
details.small[open] { display: flex; flex-direction: column; gap: 8px; }

/* Plantafel – Tagesansicht */
.p-day[data-date] { cursor: pointer; }
.p-day[data-date]:hover b { color: var(--accent); }
.plan-grid.day { min-width: 0; padding: 14px; background: var(--bg); min-height: 100%; }
.dv-sum { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.dv-sum .pill { background: var(--surface); box-shadow: var(--shadow); padding: 4px 10px; font-size: 12.5px; color: var(--ink); }
.dv-sum .pill[data-open] { cursor: pointer; }
.dv-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; align-items: start; }
.dv-col { background: var(--col); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.dv-col > header { display: flex; align-items: center; gap: 10px; padding: 2px 2px 4px; }
.dv-col > header .avatar { margin: 0; width: 32px; height: 32px; font-size: 12px; flex: none; }
.dv-col.offen > header .avatar { background: var(--muted); }
.dv-col > header b { display: block; color: var(--ink); }
.dv-col > header small { color: var(--muted); font-size: 12px; }
.dv-col > header .add { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 18px; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; }
.dv-col > header .add:hover { background: var(--surface); color: var(--ink); }
.dv-col.weg > header { opacity: .6; }
.dv-leer { margin: 2px 4px 4px; font-size: 13px; color: var(--muted); }
.dv-item { text-align: left; border: 0; font: inherit; color: var(--body); background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); border-left: 4px solid var(--c); padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.dv-item:hover { box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.dv-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.dv-top b { color: var(--c); }
.dv-top span { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.dv-kunde { font-weight: 650; color: var(--ink); font-size: 15px; margin-top: 2px; }
.dv-titel { color: var(--body); }
.dv-line { font-size: 12.5px; color: var(--muted); margin-top: 3px; text-decoration: none; }
.dv-line a, a.dv-line:hover { color: var(--accent); }
.dv-notiz { font-size: 12.5px; background: var(--bg); border-radius: 6px; padding: 4px 8px; margin-top: 4px; }
.dv-nr { font-size: 11px; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.dv-abs { border: 0; font: inherit; font-weight: 600; color: #fff; text-align: left; padding: 10px 12px; border-radius: var(--r); cursor: pointer;
  background: repeating-linear-gradient(135deg, var(--c), var(--c) 6px, color-mix(in srgb, var(--c) 80%, #fff) 6px, color-mix(in srgb, var(--c) 80%, #fff) 12px); }

/* Druck: nur der Tag bzw. die Plantafel, ohne Bedienelemente */
@media print {
  body { display: block; background: #fff; }
  .top, .plan-bar .seg, .ansicht-wahl, .plan-bar .legend, .plan-bar .btn, .hint, .toast, .dv-col > header .add { display: none !important; }
  .plan { padding: 0; }
  .plan-bar strong { font-size: 18px; }
  .plan-scroll { overflow: visible; border: 0; }
  .plan-grid.day { background: #fff; padding: 0; }
  .dv-cols { grid-template-columns: repeat(3, 1fr); }
  .dv-col { break-inside: avoid; border: 1px solid #ccc; background: #fff; }
  .dv-item, .dv-sum .pill { box-shadow: none; border: 1px solid #ddd; border-left: 4px solid var(--c); }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Personen */
.person { flex-basis: 320px; }
.person .pp-head { gap: 10px; padding: 14px 14px 10px; }
.person .pp-head .avatar { margin: 0; width: 36px; height: 36px; font-size: 13px; flex: none; }
.person.offen .pp-head .avatar { background: var(--muted); }
.pp-name { font-weight: 650; color: var(--ink); }
.pp-sub { font-size: 12px; font-weight: 500; color: var(--muted); }
.pp-sub em { font-style: normal; font-weight: 600; color: var(--c); }
.pp-body { padding: 0 10px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.pp-body h4 { display: flex; align-items: center; margin: 10px 4px 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pp-body h4 .add { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; border-radius: 6px; width: 24px; height: 24px; }
.pp-body h4 .add:hover { background: var(--surface); color: var(--ink); }
.pp-empty { margin: 0 4px; font-size: 13px; color: var(--muted); }
.pp-more { font-size: 12px; color: var(--muted); padding: 0 4px; }

.pp-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; background: var(--surface); border-radius: var(--r); padding: 8px; box-shadow: var(--shadow); }
.pp-strip span { height: 22px; border-radius: 5px; background: var(--bg); display: grid; place-items: center; font-size: 10px; font-weight: 600; color: var(--muted); }
.pp-strip span.we { opacity: .5; }
.pp-strip span[class*="t-"] { background: var(--c); color: #fff; }
.pp-strip span.absenz { background: repeating-linear-gradient(135deg, var(--c), var(--c) 4px, color-mix(in srgb, var(--c) 75%, #fff) 4px, color-mix(in srgb, var(--c) 75%, #fff) 8px); }
.pp-strip span.today { outline: 2px solid var(--ink); outline-offset: 1px; }

.pp-day { font-size: 12px; font-weight: 650; color: var(--ink); margin: 4px 4px 0; }
.pp-termin, .pp-order, .pp-abs { width: 100%; text-align: left; border: 0; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); cursor: pointer; font: inherit; color: var(--body); }
.pp-termin:hover, .pp-order:hover, .pp-abs:hover { box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.pp-termin { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-left: 4px solid var(--c); }
.pp-termin b { font-size: 12px; color: var(--c); }
.pp-termin span { font-weight: 600; color: var(--ink); }
.pp-termin small { font-size: 12px; color: var(--muted); }
.pp-order { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.pp-order .nr { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.pp-order .txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-order .txt b { color: var(--ink); }
.pp-order .star { color: var(--c-produktion); }
.pp-abs { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 13px; }
.pp-abs i { width: 9px; height: 9px; border-radius: 3px; background: var(--c); flex: none; }

/* Bexio-Kundensuche */
.ac { position: relative; display: flex; flex-direction: column; gap: 6px; }
.ac-list { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; z-index: 20; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lift); overflow: hidden; min-width: 300px; }
.ac-item { padding: 8px 12px; cursor: pointer; display: flex; flex-direction: column; }
.ac-item b { color: var(--ink); font-weight: 600; }
.ac-item small { color: var(--muted); font-size: 12px; }
.ac-item.on, .ac-item:hover { background: var(--today); }
.ac-empty { padding: 10px 12px; font-size: 13px; color: var(--muted); }
.ac-foot { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-top: 1px solid var(--line); background: var(--bg); font-size: 11.5px; color: var(--muted); }
.ac-foot .err { color: var(--danger); }
.ac-foot button { margin-left: auto; border: 0; background: none; color: var(--accent); font-size: 12px; cursor: pointer; }
.bx-link { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.bx-link span { background: var(--ok-bg); color: var(--ok-ink); font-weight: 600; padding: 1px 8px; border-radius: 999px; }
.bx-link a { color: var(--accent); text-decoration: none; }
.bx-link button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; }
.bexio-status.ok { color: var(--ok-ink); }
.bexio-status.err { color: var(--danger); }
.linkish { border: 0; background: none; padding: 0; color: var(--accent); cursor: pointer; font-size: inherit; text-decoration: underline; }

/* Neuer Bexio-Kontakt – Aufbau wie in Bexio */
.ac-neu { border-top: 1px solid var(--line); }
.ac-neu b { color: var(--accent) !important; font-weight: 600; }
.bx-neu { align-self: flex-start; font-size: 12.5px; text-decoration: none; }
.kt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kt-box { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px 14px; margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kt-box legend { padding: 0 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.kt-typ { display: flex; gap: 18px; }
.kt-strasse { display: grid; grid-template-columns: 1fr 90px; gap: 10px; }
.kt-ort { display: grid; grid-template-columns: 90px 1fr; gap: 10px; }
.kt-4 { grid-template-columns: repeat(4, 1fr); }
#dlgKontakt { width: min(900px, calc(100vw - 32px)); }
@media (max-width: 720px) { .kt-grid, .kt-4 { grid-template-columns: 1fr; } }

/* Bexio-Offerten */
.of-pill { margin-top: 8px; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--bg); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.of-pill.s1 { background: #eef0f3; color: #4b5563; }
.of-pill.s2 { background: var(--warn-bg); color: var(--warn-ink); }
.of-pill.s3 { background: var(--ok-bg); color: var(--ok-ink); }
.of-pill.s4 { background: var(--bad-bg); color: var(--bad-ink); text-decoration: line-through; }
.of-box { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.of-box .lbl.sub { margin-top: 6px; }
.of-row { display: grid; grid-template-columns: 82px 1fr auto auto; gap: 4px 10px; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--bg); border-left: 4px solid #cbd5e1; font-size: 13px; }
.of-row.s2 { border-left-color: #f59e0b; } .of-row.s3 { border-left-color: #16a34a; } .of-row.s4 { border-left-color: #e11d48; opacity: .75; }
.of-nr { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.of-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.of-titel small { margin-left: 8px; color: var(--muted); }
.of-betrag { font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; }
.of-st { font-size: 12px; font-weight: 600; color: var(--muted); }
.s2 .of-st { color: var(--warn-ink); } .s3 .of-st { color: var(--ok-ink); } .s4 .of-st { color: var(--bad-ink); }
.of-akt { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.of-akt a.btn { text-decoration: none; }
.of-akt small { color: var(--muted); }
.of-x { margin-left: auto; border: 0; background: none; font-size: 17px; color: var(--muted); cursor: pointer; }
.of-tools { display: flex; gap: 8px; margin-top: 4px; }
.of-tools input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: var(--surface); }

/* Dialoge */
.dlg { border: 0; padding: 0; border-radius: 14px; background: var(--surface); color: var(--body); width: min(460px, calc(100vw - 32px)); box-shadow: var(--shadow-lift); }
.dlg.wide { width: min(760px, calc(100vw - 32px)); }
.dlg::backdrop { background: rgba(15, 17, 21, .45); }
.dlg form { display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.dlg header { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.dlg header h2 { font-size: 17px; }
.dlg .x { margin-left: auto; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; }
.dlg .body { padding: 16px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.dlg footer { display: flex; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); }
.dlg h3 { font-size: 14px; margin-top: 6px; }
.grow { flex: 1; }
label, .lbl { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
label input, label select, label textarea, .copy input { font-size: 14px; font-weight: 400; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-height: 38px; width: 100%; }
label textarea { resize: vertical; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.span2 { grid-column: span 2; }
.small { margin: -4px 0 0; font-size: 12.5px; color: var(--muted); }
code { font-size: 12px; background: var(--bg); padding: 1px 5px; border-radius: 4px; }
.copy { display: flex; gap: 8px; align-items: center; }
.ics-liste { display: grid; gap: 6px; }
.ics-name { flex: 0 0 150px; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ics-liste .copy input { min-height: 32px; padding: 5px 8px; font-size: 12px; }

.termine { display: flex; flex-direction: column; gap: 8px; }
.termine:empty::before { content: "Noch keine Termine – der Auftrag erscheint trotzdem als Zeile auf der Plantafel."; font-size: 13px; color: var(--muted); }
.termin { display: grid; grid-template-columns: 120px 1fr 1fr 200px auto; gap: 8px; align-items: center; padding: 8px; border-radius: 9px; background: var(--bg); border-left: 4px solid var(--c); }
.termin select, .termin input { border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; background: var(--surface); min-width: 0; width: 100%; }
.termin .chips { grid-column: 1 / 4; }
.termin select.erinnerung { grid-column: 4 / 6; font-size: 12.5px; }
.termin .del { border: 0; background: none; font-size: 18px; color: var(--muted); cursor: pointer; grid-row: 1; grid-column: 5; }
.zeit-vonbis { display: flex; align-items: center; gap: 4px; min-width: 0; }
.zeit-vonbis span { color: var(--muted); }
.add-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; cursor: pointer; color: var(--body); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }

.ordner { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.ordner .path { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--ink); word-break: break-all; flex: 1; min-width: 200px; }
.ordner .ok { color: var(--c-montage); font-weight: 600; }
.ordner .err { color: var(--danger); font-weight: 600; }
.ordner label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--ink); font-size: 13px; }
.ordner label.check input { width: auto; min-height: 0; }

.dlg.frage { width: min(440px, calc(100vw - 32px)); }
/* Fenster «Ordner auf dem NAS»: Pfad als Brotkrumen, darunter zum Anpassen */
.ordner-dlg { width: min(600px, calc(100vw - 32px)); }
.ordner-dlg header { gap: 12px; align-items: flex-start; }
.ordner-dlg .od-icon { font-size: 22px; line-height: 1; padding-top: 2px; }
.ordner-dlg .od-sub { color: var(--muted); font-size: 13px; margin-top: 3px; }
.od-krumen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 12px 14px; border-radius: 10px;
  background: color-mix(in srgb, var(--line) 35%, transparent); border: 1px solid var(--line); min-height: 46px; }
.od-krumen span { padding: 3px 8px; border-radius: 6px; background: var(--surface); color: var(--body); font-size: 13px; border: 1px solid var(--line); overflow-wrap: anywhere; }
.od-krumen span.neu { background: color-mix(in srgb, var(--c-montage) 16%, var(--surface)); border-color: color-mix(in srgb, var(--c-montage) 45%, transparent); color: var(--ink); font-weight: 650; }
.od-krumen i { color: var(--muted); font-style: normal; font-size: 13px; }
.od-feld { font-size: 12.5px; color: var(--muted); }
.od-feld input { width: 100%; margin-top: 4px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.od-basis { font-size: 12px; color: var(--muted); margin-top: -6px; overflow-wrap: anywhere; }
.od-unter > span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.od-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.od-chips span { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--body); }
#frageText { margin: 4px 0; white-space: pre-line; color: var(--ink); font-size: 14.5px; line-height: 1.5; }
.btn.danger-fill { background: var(--danger); border-color: var(--danger); color: #fff; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; background: var(--ink); color: var(--surface); padding: 10px 16px; border-radius: 10px; font-size: 13.5px; box-shadow: var(--shadow-lift); transition: .2s; pointer-events: none; max-width: calc(100vw - 32px); z-index: 200; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: var(--danger); color: #fff; }

@media (max-width: 720px) {
  .top { padding: 10px 16px; }
  #suche { order: 5; width: 100%; margin-left: 0; }
  .board { padding: 12px 16px; }
  .grid2 { grid-template-columns: 1fr; }
  .span2 { grid-column: auto; }
  .termin { grid-template-columns: 1fr 1fr; }
  .termin .del { grid-column: 2; justify-self: end; }
  .termin .chips { grid-column: 1 / -1; }
  .termin select.erinnerung { grid-column: 1 / -1; }
  .legend { display: none; }
  .plan { padding: 12px 16px; }
}

/* ---------- Plantafel: Ansicht wählen ---------- */
.ansicht-wahl { display: inline-flex; flex-direction: row; align-items: center; margin: 0; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.ansicht-wahl input { font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); border: 1px solid var(--accent); border-radius: 8px; background: var(--surface); padding: 5px 8px; width: 240px; }
.ansicht-edit { border: 0; background: none; color: var(--muted); font-size: 14px; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.ansicht-edit:hover { color: var(--ink); background: var(--weekend); }
.ansicht-wahl select { font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 5px 8px; cursor: pointer; }
.plan-grid:not(.v-team):not(.v-phasen):not(.day) { min-width: 0; }
.ev { cursor: grab; touch-action: none; user-select: none; }
.ev.drag { opacity: .9; z-index: 20; cursor: grabbing; box-shadow: var(--shadow-lift); position: relative; }
.kw-ev.drag { position: absolute; }
.ev.fertig { opacity: .5; }
.ziel { outline: 2px dashed var(--accent); outline-offset: -2px; }
.mini-av { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; background: var(--ink); color: var(--surface); font-size: 10px; font-weight: 700; letter-spacing: .02em; }

/* Team- und Phasen-Zeitleiste: grosse Balken mit zwei Zeilen */
.v-team .bar, .v-phasen .bar { border-radius: 3px; }
/* Tage klar abgrenzen: Linie an jedem Tagesanfang, am Wochenanfang kräftiger */
.v-team .p-bg span, .v-phasen .p-bg span { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--ink) 18%, transparent); }
/* Mittagspause in der Zeitleiste nur leicht – sie trennt Vor- und Nachmittag, nicht die Tage */
.v-team .p-track .p-bg span[title], .v-phasen .p-track .p-bg span[title] { --pause: rgba(120, 130, 150, .07); }
.v-team .p-bg .mon, .v-phasen .p-bg .mon { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--ink) 40%, transparent); }
.v-team .p-day, .v-phasen .p-day { border-left: 2px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.v-team .p-day.mon, .v-phasen .p-day.mon { border-left: 3px solid color-mix(in srgb, var(--ink) 40%, transparent); }
.p-halb { display: flex; justify-content: space-between; margin-top: 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.p-halb span { text-align: center; border-top: 2px solid var(--line); padding-top: 2px; }
.v-team .bar:not(.ini), .v-phasen .bar:not(.ini) { height: 50px; flex-direction: column; align-items: flex-start; justify-content: center; line-height: 1.2; padding: 0 9px; }
.v-team .bar.ini, .v-phasen .bar.ini { height: 50px; }
.v-team .bar b, .v-phasen .bar b { font-size: 13.5px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.v-team .bar small, .v-phasen .bar small { font-size: 11.5px; font-weight: 500; opacity: .92; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.v-team .bar .rs::after, .v-phasen .bar .rs::after { top: 12px; bottom: 12px; }
.phase-label { box-shadow: inset 4px 0 0 var(--c); }
.phase-label .l1 { color: var(--c); cursor: default; }
.phase-label .l1:hover { color: var(--c); }

/* Kalenderwoche */
.kw-kopf, .kw-ganzzeile, .kw-raster { display: grid; }
.kw-kopf { position: sticky; top: 0; z-index: 6; background: var(--surface); border-bottom: 1px solid var(--line); }
.kw-tagkopf { padding: 8px 6px; text-align: center; font-size: 12px; color: var(--muted); cursor: pointer; border-left: 1px solid var(--line); }
.kw-tagkopf b { font-size: 16px; color: var(--ink); margin-left: 3px; font-variant-numeric: tabular-nums; }
.kw-tagkopf.today b { background: var(--brand); color: #fff; border-radius: 7px; padding: 0 6px; }
.kw-tagkopf:hover { background: var(--bg); }
.kw-ganzzeile { border-bottom: 2px solid var(--line); }
.kw-uhr-l { font-size: 10.5px; color: var(--muted); padding: 6px 6px; text-align: right; }
.kw-ganztag { border-left: 1px solid var(--line); padding: 4px; display: flex; flex-direction: column; gap: 3px; min-height: 30px; cursor: copy; }
.kw-chip { background: color-mix(in srgb, var(--c) 16%, var(--surface)); color: var(--ink); border-left: 3px solid var(--c); border-radius: 5px; padding: 3px 6px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-chip.absenz { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 18%, var(--surface)) 0 6px, var(--surface) 6px 12px); }
.kw-raster { position: relative; }
.kw-uhr { position: relative; }
.kw-uhr span { position: absolute; right: 8px; transform: translateY(-50%); font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; background: var(--surface); padding: 0 2px; }
.kw-uhr span:first-child { transform: none; }
.kw-spalte { position: relative; border-left: 1px solid var(--line); cursor: copy;
  background-image: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px var(--hs)); }
.kw-spalte.we { background-color: var(--weekend); }
.kw-spalte.today { background-color: var(--today); }
.kw-pause { position: absolute; left: 0; right: 0; background: var(--pause); pointer-events: none; }
.kw-jetzt { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger); z-index: 3; pointer-events: none; }
.kw-jetzt::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
.kw-ev { position: absolute; z-index: 2; overflow: hidden; border-radius: 7px; background: color-mix(in srgb, var(--c) 17%, var(--surface)); border-left: 4px solid var(--c); padding: 4px 7px; color: var(--ink); display: flex; flex-direction: column; gap: 1px; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.kw-ev:hover { background: color-mix(in srgb, var(--c) 25%, var(--surface)); }
.kw-zeit { font-size: 11px; font-weight: 700; color: color-mix(in srgb, var(--c) 75%, #000); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-kunde { font-size: 13px; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-titel { font-size: 11.5px; color: var(--body); line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kw-wer { display: flex; gap: 3px; flex-wrap: wrap; margin-top: auto; padding-top: 2px; }
.kw-ev.klein { padding-top: 2px; }
.kw-ev .rs-unten { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; }
.kw-ev .rs-unten::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 22px; height: 2px; margin-left: -11px; border-radius: 1px; background: color-mix(in srgb, var(--c) 60%, transparent); }

/* Tages-Board */
.tb-woche { display: grid; gap: 10px; padding: 10px; align-items: stretch; min-height: calc(100vh - 220px); }
.tb-tag { background: var(--col); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 220px; }
.tb-tag.today { box-shadow: inset 0 0 0 2px var(--brand); }
.tb-tag.schmal { padding: 8px 4px; }
.tb-tag.schmal header small { display: none; }
.tb-tag > header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 2px 2px 0; }
.tb-tag > header > div { cursor: pointer; }
.tb-tag > header span { color: var(--muted); font-size: 12px; font-weight: 600; }
.tb-tag > header b { color: var(--ink); font-size: 14px; }
.tb-tag > header small { color: var(--muted); font-size: 11.5px; }
.tb-tag > header .add { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 18px; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; }
.tb-tag > header .add:hover { background: var(--surface); color: var(--ink); }
.tb-karte { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); border-left: 4px solid var(--c); padding: 9px 11px; display: flex; flex-direction: column; gap: 2px; }
.tb-karte:hover { box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.tb-oben { display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; }
.tb-typ { color: var(--c); font-weight: 700; }
.tb-zeit { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-kunde { font-size: 14.5px; font-weight: 700; color: var(--ink); margin-top: 2px; }
.tb-titel { font-size: 12.5px; color: var(--body); }
.tb-ort { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-fuss { display: flex; align-items: center; gap: 3px; margin-top: 5px; }
.tb-nr { margin-left: auto; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tb-offen { font-size: 11px; color: var(--muted); font-style: italic; }
.tb-abs { color: #fff; font-size: 12px; font-weight: 600; border-radius: 8px; padding: 6px 9px; background: repeating-linear-gradient(135deg, var(--c), var(--c) 6px, color-mix(in srgb, var(--c) 80%, #fff) 6px, color-mix(in srgb, var(--c) 80%, #fff) 12px); }
.tb-leer { margin: 4px; font-size: 12.5px; color: var(--muted); }

/* Auslastung pro Person */
.rm-zeile { display: grid; border-bottom: 1px solid var(--line); }
.rm-kopf { position: sticky; top: 0; z-index: 6; background: var(--surface); }
.rm-person { position: sticky; left: 0; z-index: 3; background: var(--surface); border-right: 1px solid var(--line); padding: 10px 12px; display: flex; align-items: center; gap: 10px; min-width: 0; }
.rm-kopf .rm-person { font-size: 12px; color: var(--muted); font-weight: 600; z-index: 7; }
.rm-person .avatar { margin: 0; width: 34px; height: 34px; font-size: 12px; flex: none; }
.rm-zeile.offen .avatar { background: var(--muted); }
.rm-person b { display: block; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-person small { color: var(--muted); font-size: 11.5px; }
.rm-tagkopf { position: relative; text-align: center; font-size: 11.5px; color: var(--muted); padding: 16px 2px 6px; cursor: pointer; border-left: 1px solid transparent; }
.rm-tagkopf b { color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; }
.rm-tagkopf i { position: absolute; top: 2px; left: 6px; font-style: normal; font-size: 10.5px; font-weight: 700; }
.rm-tagkopf.today b { background: var(--brand); color: #fff; border-radius: 6px; padding: 0 5px; }
.rm-tagkopf.we, .rm-zelle.we { background: var(--weekend); }
.rm-tagkopf.mon, .rm-zelle.mon { border-left-color: var(--line); }
.rm-zelle { border-left: 1px solid color-mix(in srgb, var(--line) 50%, transparent); padding: 6px 5px; display: flex; flex-direction: column; gap: 4px; min-height: 74px; cursor: copy; min-width: 0; }
.rm-zelle.today { background: var(--today); }
.rm-last { display: flex; align-items: center; gap: 6px; --rc: #16a34a; }
.rm-last.hoch { --rc: #f59e0b; }
.rm-last.voll { --rc: #e11d48; }
.rm-last.leer { opacity: .7; }
.rm-ring { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--rc) calc(var(--p) * 1%), var(--line) 0); }
.rm-ring span { width: 26px; height: 26px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-size: 8.5px; letter-spacing: -.02em; font-weight: 700; color: var(--ink); }
.rm-frei { font-size: 11.5px; font-weight: 600; color: var(--rc); white-space: nowrap; }
.rm-last.leer .rm-frei { color: var(--ok-ink); }
.rm-chip { font-size: 11.5px; font-weight: 600; color: var(--ink); background: color-mix(in srgb, var(--c) 17%, var(--surface)); border-left: 3px solid var(--c); border-radius: 5px; padding: 3px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-chip em { font-style: normal; color: color-mix(in srgb, var(--c) 75%, #000); font-variant-numeric: tabular-nums; }
.rm-abs { color: #fff; font-size: 12px; font-weight: 700; border-radius: 7px; padding: 8px 6px; text-align: center; background: repeating-linear-gradient(135deg, var(--c), var(--c) 6px, color-mix(in srgb, var(--c) 80%, #fff) 6px, color-mix(in srgb, var(--c) 80%, #fff) 12px); }
.kw-ev.mittel .kw-titel { -webkit-line-clamp: 1; }
.kw-ev.mittel .kw-wer { display: none; }
.board-leer { color: var(--muted); margin: 8px 4px; }
.sp-reiter { display: flex; margin-bottom: 8px; } .sp-reiter button { flex: 1; font-size: 12px; padding: 5px 6px; }
/* Offert-Stand auf der Karte */
button.of-pill { display: block; width: 100%; text-align: left; border: 0; font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.of-pill.of-offen { background: var(--surface); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.of-pill.of-offen:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--muted); }
.of-nach { margin-top: 4px; font-size: 11.5px; font-weight: 700; color: var(--danger); background: var(--bad-bg); border-radius: 6px; padding: 3px 8px; }
.of-antwort { display: flex; gap: 6px; margin-top: 6px; }
.of-antwort button { flex: 1; border: 1px solid var(--line); background: var(--surface); border-radius: 7px; padding: 4px 6px; font-size: 11.5px; font-weight: 600; cursor: pointer; color: var(--body); }
.of-antwort button[data-of-antwort="ja"]:hover { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); }
.of-antwort button[data-of-antwort="nein"]:hover { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad-ink); }

/* ---------- Kalkulation ---------- */
.dlg.kalk { width: min(1280px, calc(100vw - 24px)); }
.dlg.kalk form { height: calc(100vh - 32px); max-height: calc(100vh - 32px); }
.dlg.kalk header { gap: 10px; }
.dlg.kalk header h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlg.kalk header .x { margin-left: 0; }
.dlg.kalk header #kalkEinst { margin-left: auto; }
.kalk-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 240px 1fr; }
.kalk-seite { border-right: 1px solid var(--line); padding: 12px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; background: var(--bg); }
.kalk-liste { display: flex; flex-direction: column; gap: 6px; }
.kalk-li { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 9px; padding: 8px 10px; cursor: pointer; display: grid; gap: 1px; font: inherit; color: var(--body); }
.kalk-li.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.kalk-li-nr { font-size: 11px; color: var(--muted); font-weight: 600; }
.kalk-li b { color: var(--ink); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kalk-li span:last-child { font-size: 12px; font-variant-numeric: tabular-nums; }
.kalk-pos-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.kalk-seite select, .kalk-seite input { width: 100%; }
.kalk-vorlage-neu { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.kalk-main { overflow-y: auto; padding: 14px 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.kalk-kopf { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.kalk-kopf label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
.kalk-kopf .grow { flex: 1 1 320px; }
.kalk-kopf input, .kalk-kopf select { font-size: 14px; }
.kalk-preis { display: grid; grid-template-columns: auto auto; gap: 2px 12px; align-items: end; padding: 6px 12px; border-radius: 10px; background: var(--bg); }
.kalk-preis small { grid-column: 1; font-size: 11px; color: var(--muted); }
.kalk-preis b { grid-column: 1; font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; }
.kalk-preis label { grid-column: 2; grid-row: 1 / 3; }
.kalk-preis input { width: 110px; text-align: right; font-weight: 700; }
.kalk-sek { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.kalk-sek h4 { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink); margin: 0; }
.kalk-sek h4 > span { margin-left: auto; font-variant-numeric: tabular-nums; }
.kalk-sek h4 .linkish { font-weight: 500; }
.kalk-tab { display: grid; gap: 4px 8px; align-items: center; font-size: 13px; }
.kalk-tab > span:not(.z):not(.lbl2) { font-size: 11px; color: var(--muted); font-weight: 600; }
.kalk-tab input, .kalk-tab select { padding: 4px 7px; font-size: 13px; min-width: 0; }
.kalk-tab input[inputmode="decimal"] { text-align: right; }
.kalk-tab .z { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.kalk-tab .z small { color: var(--muted); }
.kalk-tab.arbeit { grid-template-columns: 22px minmax(180px, 320px) 80px 80px 90px; }
.kalk-tab.druck { grid-template-columns: 80px 80px 84px 64px 64px 72px minmax(150px, 1fr) 54px 60px 80px 24px; }
.kalk-tab .z.mat { color: var(--ok-ink); font-weight: 600; }
.kalk-tab input.aus-druck { background: var(--ok-bg); color: var(--ok-ink); font-weight: 600; }
.kalk-tab.material { grid-template-columns: minmax(220px, 1fr) 80px 50px 130px 90px 24px; }
.kalk-tab.fremd { grid-template-columns: minmax(200px, 1fr) 70px 90px 70px 90px 24px; }
.kalk-x { border: 0; background: none; color: var(--muted); font-size: 17px; cursor: pointer; border-radius: 6px; width: 24px; height: 24px; }
.kalk-x:hover { background: var(--bad-bg); color: var(--danger); }
.small.warn { color: var(--warn-ink); }
.kalk-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.kalk-felder label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); font-weight: 600; }
.kalk-vorschau summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.kalk-vorschau div { margin-top: 6px; padding: 10px 12px; border-radius: 8px; background: var(--bg); font-size: 13px; line-height: 1.5; }
.kalk-summe { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: flex-end; padding: 10px 20px; border-top: 1px solid var(--line); background: var(--bg); }
.kalk-summe > div { display: flex; flex-direction: column; gap: 1px; }
.kalk-summe small { font-size: 11px; color: var(--muted); }
.kalk-summe b { font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.kalk-summe .gross b { font-size: 18px; }
.kalk-summe .db { margin-left: auto; text-align: right; }
.kalk-summe .db b { color: var(--ok-ink); font-size: 14px; }
.kalk-rabatt span { display: flex; gap: 4px; }
.kalk-rabatt input { width: 70px; text-align: right; padding: 3px 6px; }
.kalk-rabatt select { padding: 3px 4px; }
.kalk-rabatt em { font-style: normal; font-size: 12px; color: var(--danger); }
.kalk-zeile { align-items: center; }
.dlg.kalk-einst { width: min(1000px, calc(100vw - 32px)); }
.ke-tabs { margin: 12px 20px 0; align-self: flex-start; flex: none; }
.ke-tab { display: grid; grid-template-columns: minmax(200px, 1fr) 70px 100px 100px 70px 140px 24px; gap: 4px 8px; align-items: center; }
.ke-tab.mat { grid-template-columns: 22px minmax(200px, 1fr) 70px 100px 100px 70px 140px 24px; }
.zieh-liste[data-zieh="ke-mat"] { gap: 4px; }
.ke-tab.arbeit { grid-template-columns: 22px minmax(200px, 1fr) 120px 24px; max-width: 500px; }
.ke-tab > span { font-size: 11px; color: var(--muted); font-weight: 600; }
.ke-tab input, .ke-tab select { padding: 4px 7px; font-size: 13px; min-width: 0; }
.ke-tab input[inputmode="decimal"] { text-align: right; }
.ke-tab input.fehlt { border-color: #f59e0b; background: var(--warn-bg); }
#keInhalt h4 { display: flex; gap: 10px; align-items: center; font-size: 13.5px; margin: 8px 0 0; color: var(--ink); }
.ke-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: 8px 14px; }
.ke-grid label, #keInhalt > label, .ke-texte label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); font-weight: 600; }
.ke-texte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; }
.ke-vorlagen { display: flex; flex-direction: column; gap: 6px; }
.ke-vorlagen div { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; }
.ke-vorlagen span { color: var(--muted); font-size: 12px; margin-left: auto; }
@media (max-width: 900px) {
  .kalk-body { grid-template-columns: 1fr; }
  .kalk-seite { border-right: 0; border-bottom: 1px solid var(--line); max-height: 220px; }
  .kalk-tab.arbeit { grid-template-columns: 22px minmax(120px, 1fr) 70px 70px 80px; }
  .kalk-felder, .ke-texte { grid-template-columns: 1fr; }
}
.kalk-tab input, .kalk-tab select, .ke-tab input, .ke-tab select, .kalk-seite input, .kalk-seite select, .kalk-rabatt input, .kalk-rabatt select {
  font-weight: 400; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 7px; min-height: 30px; }
.kalk-seite input, .kalk-seite select { padding: 6px 8px; font-size: 13px; }
.kalk-tab input:focus, .ke-tab input:focus, .kalk-seite input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 0; }
.ke-tab input:disabled { background: var(--bg); color: var(--muted); }
.kalk-preis label input { min-height: 34px; padding: 5px 8px; }
.kalk-sek > .linkish, .kalk-sek > span > .linkish { align-self: flex-start; }
/* Beschreibung: Feld mit Katalog-Auswahl, «weglassen», zusätzliche Felder */
.kalk-feld { display: flex; gap: 6px; }
.kalk-feld input { flex: 1; min-width: 0; }
.kalk-feld select { flex: 0 0 130px; font-size: 12.5px; font-weight: 400; color: var(--body); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; }
.kalk-felder label.weg input { color: var(--muted); text-decoration: line-through; background: var(--bg); }
.kalk-felder label em { font-style: normal; font-weight: 500; color: var(--muted); }
.kalk-zusatz { display: grid; grid-template-columns: 200px 1fr 24px; gap: 6px 8px; align-items: center; }
.kalk-zusatz > span { font-size: 11px; color: var(--muted); font-weight: 600; }
.kalk-zusatz input { font-weight: 400; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; min-width: 0; }
/* Vorschau Offerte – sieht aus wie ein Bexio-Dokument */
.dlg.kalk-vorschau-dlg { width: min(860px, calc(100vw - 32px)); }
.kalk-vorschau-dlg .body { background: #e9ebef; }
.doc { background: #fff; color: #111; padding: 48px 56px; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,.12); font-size: 13px; line-height: 1.5; }
.doc-kopf { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.doc-firma { font-weight: 800; letter-spacing: .06em; font-size: 15px; }
.doc-empf { min-width: 220px; }
.doc-meta { display: flex; gap: 24px; font-size: 12px; color: #555; border-bottom: 1px solid #ddd; padding-bottom: 8px; margin-bottom: 14px; }
.doc h1 { font-size: 18px; margin: 0 0 14px; }
.doc table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.doc th { text-align: left; font-size: 11.5px; color: #555; border-bottom: 1.5px solid #111; padding: 6px 6px; }
.doc td { vertical-align: top; padding: 10px 6px; border-bottom: 1px solid #e5e5e5; }
.doc .nr { width: 34px; }
.doc .zahl { text-align: right; white-space: nowrap; width: 80px; font-variant-numeric: tabular-nums; }
.doc-summe { margin-left: auto; width: 300px; display: flex; flex-direction: column; gap: 3px; margin-bottom: 20px; }
.doc-summe div { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.doc-summe .gross { border-top: 1.5px solid #111; padding-top: 5px; margin-top: 3px; font-size: 14.5px; }
.kalk-felder label em { display: none; }
.kalk-felder label.weg em { display: inline; }

/* Drag & Drop der Arbeitszeit-Zeilen */
.zieh-liste { display: flex; flex-direction: column; gap: 4px; }
.griff { cursor: grab; color: var(--muted); font-size: 13px; letter-spacing: -2px; text-align: center; user-select: none; touch-action: none; padding: 4px 0; border-radius: 5px; }
.griff:hover { background: var(--bg); color: var(--ink); }
[data-zeile].zieht { background: var(--surface); box-shadow: var(--shadow-lift); border-radius: 8px; position: relative; z-index: 2; }
[data-zeile].zieht .griff { cursor: grabbing; }
.kp-hinweis { font-size: 12px; color: var(--warn-ink); margin-top: 4px; line-height: 1.4; }
.kp-hinweis.ok { color: var(--ok-ink); }
.kp-hinweis .linkish { font-size: 12px; }
.kp-tausch { display: flex; align-items: flex-end; }
.kp-form { display: flex; align-items: center; gap: 18px; }
.kp-form .lbl { margin: 0; }
.kp-form label.radio { flex-direction: row; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink); font-weight: 500; cursor: pointer; }
.kp-form label.radio input { width: auto; min-height: 0; margin: 0; padding: 0; }
/* Beschreibung als sortierbare Liste */
.kalk-beschr { gap: 6px; }
.kalk-brow { display: grid; grid-template-columns: 22px 170px 1fr 24px; gap: 8px; align-items: center; padding: 2px 0; }
.kalk-blabel { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.kalk-blabel em { display: none; font-style: normal; font-weight: 500; }
.kalk-brow.weg .kalk-blabel em { display: inline; }
.kalk-brow.weg .kalk-feld input { color: var(--muted); text-decoration: line-through; background: var(--bg); }
.kalk-brow input { font-weight: 400; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; min-width: 0; font-size: 14px; }
.kalk-brow.eigen > input { font-size: 12.5px; font-weight: 600; color: var(--ink); }
/* Notizen mit Formatierung */
.notiz-box { display: flex; flex-direction: column; gap: 0; }
.notiz-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 5px 6px; border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--bg); }
.notiz-leiste button { border: 1px solid transparent; background: none; border-radius: 6px; min-width: 28px; height: 28px; padding: 0 7px; cursor: pointer; color: var(--ink); font-size: 13px; }
.notiz-leiste button:hover { background: var(--surface); border-color: var(--line); }
.notiz-leiste select { height: 28px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font-size: 12.5px; padding: 0 6px; }
.notiz-leiste .farbe { min-width: 22px; width: 22px; height: 22px; padding: 0; border-radius: 50%; background: var(--f); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); }
.notiz-leiste .trenner { width: 1px; height: 18px; background: var(--line); margin: 0 3px; }
.notiz-editor { min-height: 90px; max-height: 360px; overflow-y: auto; resize: vertical; border: 1px solid var(--line); border-radius: 0 0 8px 8px; padding: 9px 11px; background: var(--surface); color: var(--ink); font-size: 14px; line-height: 1.5; outline: none; }
.notiz-editor:focus { border-color: var(--accent); }
.notiz-editor ul, .notiz-editor ol { margin: 4px 0; padding-left: 22px; }
/* Notizzettel in den Mitarbeiter-Spalten */
.add-zeile { display: flex; align-items: center; }
.add-zeile .add-card { flex: 1; }
.add-zeile .add-zettel { flex: none; }
.zettel { background: var(--note-bg); border: 1px solid var(--note-line); border-radius: var(--r); box-shadow: var(--shadow); padding: 9px 11px 7px; display: flex; flex-direction: column; gap: 6px; transform: rotate(-.4deg); }
.zettel-text { color: var(--note-ink); font-size: 13.5px; line-height: 1.45; cursor: text; white-space: normal; word-break: break-word; }
.zettel-fuss { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--note-ink); }
.zettel-fuss span { margin-right: auto; font-weight: 600; }
.zettel-fuss button { border: 1px solid var(--note-line); background: var(--note-bg); color: #5c4f12; border-radius: 6px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; cursor: pointer; }
.zettel-fuss button:hover { background: #fff; }
.zettel.bearbeiten, .zettel-neu { transform: none; }
.zettel-neu { margin: 0 8px 6px; background: var(--note-bg); border: 1px solid var(--note-line); border-radius: var(--r); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.zettel textarea, .zettel-neu textarea { width: 100%; border: 1px solid var(--note-line); border-radius: 6px; background: var(--note-bg); padding: 6px 8px; font: inherit; font-size: 13.5px; resize: vertical; color: var(--note-ink); }
.zettel-knoepfe { display: flex; align-items: center; gap: 6px; }
.zettel-knoepfe small { margin-left: auto; color: var(--note-ink); font-size: 11px; }
/* Personen: Spalten und Bereiche verschieben */
.pp-head { cursor: grab; user-select: none; }
.column.person.zieht { opacity: .85; box-shadow: var(--shadow-lift); }
.column.person.zieht .pp-head { cursor: grabbing; }
.pp-sek { display: flex; flex-direction: column; gap: 6px; border-radius: 10px; }
.pp-sek.zieht { background: var(--col); box-shadow: var(--shadow-lift); padding-bottom: 6px; }
.pp-body h4 .griff { margin-right: 4px; font-size: 11px; padding: 2px 2px; letter-spacing: -2px; }
.pp-body h4 .griff:hover { background: var(--surface); }
.of-benutzer { align-items: center; }
.of-benutzer select, .kalk-benutzer select { font-size: 13px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); padding: 4px 8px; min-height: 30px; }
.kalk-benutzer { flex-direction: row !important; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); font-weight: 600; margin-left: 12px; }
.kalk-benutzer select { width: auto; }
/* Vorschau als A4-Seiten */
.dlg.kalk-vorschau-dlg { width: min(900px, calc(100vw - 32px)); }
.dlg.kalk-vorschau-dlg.ganz { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
.dlg.kalk-vorschau-dlg.ganz form { max-height: 100vh; height: 100vh; }
.dlg.kalk-vorschau-dlg.ganz .doc-seite { zoom: 1.25; }
.doc-seiten { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.doc-seite { width: 794px; height: 1123px; flex: none; padding: 64px 64px 40px; position: relative; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; }
.doc-inhalt { flex: none; }
.doc-seitenzahl { position: absolute; bottom: 24px; right: 64px; font-size: 10.5px; color: #777; }
.doc-zeile { display: grid; grid-template-columns: 34px 1fr 60px 80px 90px; gap: 8px; padding: 10px 4px; border-bottom: 1px solid #e5e5e5; position: relative; }
.doc-th { font-size: 11.5px; color: #555; border-bottom: 1.5px solid #111; padding: 6px 4px; margin-top: 12px; }
.doc-zeile .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc-pos .txt { line-height: 1.5; }
.doc-fuss { margin-top: 8px; }
.doc-summe { margin-top: 14px; }
.doc-umbruch-knopf { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 600; border: 1px dashed #9aa4b2; background: #fff; color: #555; border-radius: 999px; padding: 2px 10px; cursor: pointer; opacity: 0; transition: opacity .15s; }
.doc-pos:hover .doc-umbruch-knopf, .doc-umbruch-knopf.an { opacity: 1; }
.doc-umbruch-knopf.an { border-color: #c9372c; color: #c9372c; }
#kalkVorschauInfo { margin-left: 8px; align-self: center; }
.fertig-btn.weiter { background: var(--info-bg); border-color: var(--info-line); color: #2f5bea; }
.fertig-btn.weiter:hover { background: var(--info-line); }
/* Ablauf-Häkchen im Auftrag und Leiste auf der Karte */
.ablauf-wahl { display: flex; flex-direction: column; gap: 4px; }
.ablauf-chips { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ablauf-chips label.check { font-size: 13.5px; color: var(--ink); font-weight: 500; }
.ablauf-wahl small { color: var(--muted); font-size: 11.5px; }
.ablauf-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-top: 6px; font-size: 10.5px; font-weight: 600; color: var(--muted); }
.ablauf-leiste span { background: var(--bg); border-radius: 5px; padding: 1px 6px; }
.ablauf-leiste span.ok { background: var(--ok-bg); color: var(--ok-ink); }
.ablauf-leiste i { font-style: normal; opacity: .6; }
.informieren-hinweis { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 8px; border-radius: 6px; background: var(--warn-bg); color: var(--warn-ink); font-size: 11.5px; font-weight: 700; }
.informieren-hinweis button { margin-left: auto; border: 1px solid var(--warn-line); background: var(--warn-bg); color: var(--warn-ink); border-radius: 6px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; cursor: pointer; }
.informieren-hinweis button:hover { background: #fff; }
.of-zeile { display: flex; gap: 6px; align-items: stretch; }
.of-zeile .of-pill { flex: 1; margin-top: 8px; }
.of-keine-knopf { margin-top: 8px; border: 1px dashed var(--line); background: none; color: var(--muted); border-radius: 6px; font-size: 11px; padding: 0 8px; cursor: pointer; white-space: nowrap; }
.of-keine-knopf:hover { color: var(--ink); border-color: var(--muted); }
.of-pill.of-keine { background: var(--bg); color: var(--muted); font-style: italic; }
/* ---------- Anmeldung ---------- */
.anmeldung { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; background: linear-gradient(160deg, var(--info-bg), #dfe4ec); padding: 16px; }
.anmeldung[hidden] { display: none; }
.anmeldung-karte { width: min(380px, 100%); background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-lift); padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 12px; }
.anmeldung-logo { width: 52px; height: 52px; border-radius: 14px; background: #d6232a; color: #fff; font-weight: 800; font-size: 20px; display: grid; place-items: center; letter-spacing: .02em; }
.anmeldung-karte h1 { font-size: 20px; margin: 4px 0 0; color: var(--ink); }
.anmeldung-karte label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
.anmeldung-karte .btn { margin-top: 6px; padding: 10px; font-size: 14px; }
.anmeldung-fehler { margin: 0; color: var(--danger); font-size: 13px; font-weight: 600; }
/* angemeldete Person oben rechts */
.ich-box { position: relative; }
.ich-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 3px 12px 3px 3px; cursor: pointer; font: inherit; font-weight: 600; color: var(--ink); }
.ich-btn .avatar { margin: 0; width: 28px; height: 28px; font-size: 11px; }
.ich-menue { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 210px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lift); padding: 6px; display: flex; flex-direction: column; }
.ich-menue[hidden] { display: none; }
.ich-info { padding: 8px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; display: flex; flex-direction: column; }
.ich-info small { color: var(--muted); }
.ich-menue button { border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: 8px; cursor: pointer; font: inherit; color: var(--ink); }
.ich-menue button:hover { background: var(--bg); }
/* Benutzerverwaltung */
.benutzer-liste { display: flex; flex-direction: column; gap: 6px; }
.benutzer-zeile { display: grid; grid-template-columns: 30px minmax(110px, 1fr) 130px 140px 130px auto; gap: 8px; align-items: center; }
.benutzer-zeile .avatar { margin: 0; width: 28px; height: 28px; font-size: 10.5px; }
.benutzer-zeile select, .benutzer-zeile input { font: inherit; font-size: 13px; border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; background: var(--surface); min-width: 0; }
.benutzer-zeile .ok { color: var(--ok-ink); }
.benutzer-zeile .warn { color: var(--warn-ink); }
@media (max-width: 700px) { .benutzer-zeile { grid-template-columns: 30px 1fr 1fr; } }

/* ---------- Auftragsfenster: Abschnitte als Karten ---------- */
.dlg.auftrag-dlg { width: min(840px, calc(100vw - 32px)); }
.auftrag-dlg .body { background: var(--bg); gap: 10px; padding: 14px 16px; }
.a-sek { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.a-titel { display: flex; align-items: center; gap: 8px; margin: 0 !important; font-size: 13px !important; font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.a-titel i { font-style: normal; font-size: 14px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: var(--bg); }
.a-titel small { font-weight: 500; color: var(--muted); font-size: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.span3 { grid-column: 1 / -1; }
@media (max-width: 640px) { .grid3 { grid-template-columns: 1fr; } .auftrag-dlg .grid2 { grid-template-columns: 1fr; } .auftrag-dlg .span2 { grid-column: auto; } }
.auftrag-dlg label input:focus, .auftrag-dlg label select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
/* Ablauf: Schritte als Schalter statt kleiner Häkchen */
.auftrag-dlg .ablauf-chips { gap: 8px; }
.auftrag-dlg .ablauf-chips label.check { position: relative; border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px 6px 11px; background: var(--surface); cursor: pointer; gap: 6px; user-select: none; transition: background .12s, border-color .12s; }
.auftrag-dlg .ablauf-chips label.check:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.auftrag-dlg .ablauf-chips label.check input { position: absolute; opacity: 0; pointer-events: none; }
.auftrag-dlg .ablauf-chips label.check::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--muted); box-sizing: border-box; flex: none; }
.auftrag-dlg .ablauf-chips label.check:has(input:checked) { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color: var(--accent); color: var(--ink); font-weight: 600; }
.auftrag-dlg .ablauf-chips label.check:has(input:checked)::before { content: "✓"; border: 0; background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.auftrag-dlg .ablauf-chips label.check:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.auftrag-dlg .ablauf-wahl small { margin-top: -2px; }
/* Bearbeiten-Knopf rechts im Abschnittstitel */
.a-edit { margin-left: auto; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 3px 8px; border-radius: 6px; }
.a-edit:hover { color: var(--ink); background: var(--bg); }
.etiketten-edit { display: flex; flex-direction: column; gap: 6px; }
.etiketten-edit .et-knoepfe { display: flex; gap: 8px; margin-top: 4px; }
/* Etiketten etwas grösser */
.auftrag-dlg .etiketten-wahl .chip { padding: 5px 12px; font-size: 12.5px; font-weight: 600; }
.auftrag-dlg .notiz-box { gap: 0; }
.auftrag-dlg .notiz-box .a-titel { margin-bottom: 10px !important; }
/* «Fotos & Dateien» wie die anderen Abschnittstitel */
.auftrag-dlg .anhang-box > .lbl:first-child { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink); }
.auftrag-dlg .anhang-box > .lbl:first-child::before { content: "📎"; font-size: 14px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: var(--bg); }
.auftrag-dlg .ordner { background: var(--surface); }
.auftrag-dlg .of-box { border-radius: 10px; }
.auftrag-dlg footer { background: var(--surface); }

/* ---------- Bestellungen ---------- */
.tab-zahl { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: #e11d48; color: #fff; font-size: 11px; font-weight: 700; }
.bestell-hinweis { display: flex; align-items: center; gap: 12px; padding: 8px 20px; background: var(--warn-bg); color: var(--warn-ink); border-bottom: 1px solid var(--warn-line); font-size: 13.5px; }
.bestell-hinweis .btn { margin-left: 6px; }
.be-hin-x { margin-left: auto; border: 0; background: none; font-size: 20px; line-height: 1; color: inherit; cursor: pointer; opacity: .7; }
.bestellungen { display: flex; flex-direction: column; gap: 14px; padding: 16px 20px; overflow: auto; }
.be-eingabe { display: grid; grid-template-columns: 80px 2fr 2.4fr 1.1fr 1.4fr 1.4fr auto auto; gap: 10px; align-items: end; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.be-mengen { display: flex; flex-direction: column; gap: 4px; }
.be-mengen-felder { display: flex; gap: 6px; }
.be-mengen-felder label { flex-direction: row; align-items: center; gap: 0; position: relative; flex: 1; min-width: 0; }
.be-mengen-felder input { padding-right: 46px !important; text-align: right; }
.be-mengen-felder span { position: absolute; right: 8px; font-size: 11.5px; font-weight: 600; color: var(--muted); pointer-events: none; }
.be-eingabe .be-dringend { padding-bottom: 10px; white-space: nowrap; }
.be-knoepfe { display: flex; gap: 6px; }
.be-knoepfe .btn { min-height: 38px; white-space: nowrap; }
@media (max-width: 1100px) { .be-eingabe { grid-template-columns: 1fr 1fr; } .be-artikel { grid-column: 1 / -1; } }
.be-spalten { display: grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 900px) { .be-spalten { grid-template-columns: 1fr; } }
.be-spalte { background: var(--col, #eef0f3); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.be-spalte header h3 { font-size: 14px; display: flex; align-items: center; gap: 8px; }
.be-spalte header small { color: var(--muted); font-size: 12px; }
.be-zahl { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--surface); border-radius: 999px; padding: 0 8px; }
.be-liste { display: flex; flex-direction: column; gap: 8px; }
.be-gruppe { display: flex; flex-direction: column; gap: 6px; }
.be-gruppe + .be-gruppe { margin-top: 6px; }
.be-gruppe-kopf { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); padding: 0 2px; }
.be-gruppe-kopf span { color: var(--muted); font-size: 12px; }
.be-gruppe-kopf .be-btn { margin-left: auto; }
.be-karte { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--c-produktion); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.be-karte.bestellt { border-left-color: var(--c-besichtigung); }
.be-karte.angekommen { border-left-color: var(--c-montage); }
.be-karte.problem, .be-karte.spaet { border-left-color: #e11d48; }
.be-karte.dringend { background: color-mix(in srgb, #e11d48 5%, var(--surface)); }
.be-von { flex: none; align-self: center; margin-left: 0; width: 22px; height: 22px; font-size: 10px; }
.be-kopf { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; color: var(--ink); font-size: 14px; }
.be-menge-tag { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--bg); border-radius: 6px; padding: 1px 6px; }
.be-dringend-tag { font-size: 11px; font-weight: 700; color: #fff; background: #e11d48; border-radius: 6px; padding: 1px 6px; text-transform: uppercase; }
.be-auftrag-link { align-self: flex-start; border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; color: var(--accent); cursor: pointer; text-align: left; }
.be-auftrag-link:hover { text-decoration: underline; }
.be-notiz-text { font-size: 12.5px; color: var(--body); }
.be-problem { font-size: 12.5px; font-weight: 600; color: var(--bad-ink); }
.be-meta { font-size: 11.5px; color: var(--muted); }
.be-meta .spaet { color: #e11d48; }
.be-aktionen { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.be-btn { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 7px; padding: 4px 10px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.be-btn:hover { border-color: var(--muted); }
.be-btn.haupt { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.be-btn.haupt.ok { color: #fff; }
.be-btn.haupt.ok { background: var(--c-montage); border-color: var(--c-montage); }
.be-btn.warn { color: var(--bad-ink); }
.be-leer { font-size: 13px; color: var(--muted); padding: 8px 2px; }
.be-pill.offen { background: var(--warn-bg); color: var(--warn-ink); }
.be-pill.weg { background: var(--info-bg); color: var(--info-ink); }
.be-pill.da { background: var(--ok-bg); color: var(--ok-ink); }
.be-pill.problem { background: var(--bad-bg); color: var(--bad-ink); }

/* Reiter oben verschieben */
.tabs [role="tab"] { cursor: pointer; }
.tabs [role="tab"].zieht { opacity: .4; }

/* =====================================================================
   Design 2026: luftiger, weichere Formen, Hell/Dunkel, dezente Animationen
   (am Schluss, damit es die Grundregeln oben verfeinert)
   ===================================================================== */
body { background: var(--bg); }
::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); }

/* Kopfzeile: leicht durchscheinend, mit feiner Markenlinie */
.top { position: sticky; top: 0; z-index: 50; gap: 12px; padding: 12px 22px; background: var(--glass); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--line); }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--brand) 18%, color-mix(in srgb, var(--brand) 30%, var(--line)) 45%, var(--line) 70%, transparent); background-size: 300% 100%; opacity: .7; animation: markenlinie 18s linear infinite; pointer-events: none; }
@keyframes markenlinie { to { background-position: 300% 0; } }
.brand .logo path[fill="#e42e20"] { transform-origin: 524px 160px; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.brand:hover .logo path[fill="#e42e20"] { transform: rotate(-8deg) translateY(-6px); }

/* Reiter */
.tabs { gap: 2px; padding: 4px; border-radius: 12px; background: color-mix(in srgb, var(--col) 70%, transparent); }
.tabs button { padding: 7px 12px; border-radius: 9px; transition: background-color .18s, color .18s, box-shadow .18s; }
.tabs button:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* Suche mit Lupe */
#suche { width: 210px; height: 38px; border-radius: 10px; padding: 0 12px 0 36px; background: var(--surface) no-repeat 12px 50% / 15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b94a4' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); transition: border-color .15s, box-shadow .15s, width .25s; }
#suche:focus { width: 300px; outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }

/* Knöpfe */
.btn { height: 38px; border-radius: 10px; padding: 0 15px; transition: background-color .15s, border-color .15s, box-shadow .15s, transform .12s, filter .15s; }
.btn:hover { border-color: color-mix(in srgb, var(--muted) 60%, var(--line)); box-shadow: var(--shadow); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 86%, #888), var(--accent)); border-color: var(--accent); box-shadow: 0 1px 2px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .12); }
.btn.primary:hover { filter: none; box-shadow: 0 6px 16px rgba(0, 0, 0, .18), inset 0 -2px 0 var(--brand); }
.btn.sm { height: 32px; border-radius: 8px; }
.icon-btn { width: 38px; height: 38px; border-radius: 10px; transition: background-color .15s, border-color .15s, transform .15s; }
.icon-btn:hover { border-color: color-mix(in srgb, var(--muted) 60%, var(--line)); background: var(--bg); }
.icon-btn:hover svg { transform: rotate(25deg); }
.icon-btn svg { transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }

/* Hell/Dunkel-Knopf: im hellen Modus der Mond, im dunklen die Sonne */
.theme-btn .ic-sonne { display: none; }
:root[data-theme="dark"] .theme-btn .ic-sonne { display: block; color: #fbbf24; }
:root[data-theme="dark"] .theme-btn .ic-mond { display: none; }
.theme-btn:active svg { transform: rotate(90deg) scale(.85); }
html.theme-wechsel, html.theme-wechsel * { transition: background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease !important; }

/* Auswahlmenüs: eigene Form mit Pfeil statt Systemoptik */
select:not([multiple]) { -webkit-appearance: none; appearance: none; background-image: var(--chev); background-repeat: no-repeat; background-position: right 11px center; background-size: 12px; padding-right: 32px !important; cursor: pointer; border-radius: 10px; transition: border-color .15s, box-shadow .15s, background-color .15s; }
select:not([multiple]):hover { border-color: color-mix(in srgb, var(--muted) 55%, var(--line)); }
select:not([multiple]):focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
select option, select optgroup { background: var(--surface); color: var(--ink); }
.notiz-leiste select { padding: 4px 26px 4px 8px !important; background-position: right 7px center; border-radius: 7px; }

/* Eingabefelder */
label input, label select, label textarea, .copy input { border-radius: 10px; transition: border-color .15s, box-shadow .15s; }
label input:hover, label textarea:hover { border-color: color-mix(in srgb, var(--muted) 45%, var(--line)); }
label input:focus, label textarea:focus, .copy input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }

/* Auftragsübersicht: mehr Luft, weiche Karten */
.board { gap: 16px; padding: 20px 24px; }
.column { flex-basis: 284px; border-radius: 16px; background: var(--col); border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.column > header { padding: 14px 16px 10px; font-size: 14.5px; letter-spacing: -.01em; }
.cards { padding: 4px 10px 12px; gap: 10px; }
.card { border-radius: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-left-width: 3px; transition: box-shadow .18s, transform .18s, border-color .18s; }
.card:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.card .kunde { font-size: 14.5px; }
.pill { padding: 2px 8px; }
.add-card { border-radius: 10px; transition: background-color .15s, color .15s; }

/* Plantafel und Übersicht */
.plan { padding: 18px 24px 12px; gap: 12px; }
.plan-scroll { border-radius: 16px; box-shadow: var(--shadow); }
.seg { border-radius: 10px; }
.seg button { padding: 6px 12px; transition: background-color .15s, color .15s; }
.seg button:hover:not(.on) { background: var(--bg); }

/* Fenster: weich einblenden, Hintergrund leicht unscharf */
.dlg { border-radius: 18px; border: 1px solid var(--line); }
.dlg::backdrop { background: rgba(10, 14, 20, .38); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.dlg[open] { animation: fensterAuf .22s cubic-bezier(.2, .9, .3, 1.1); }
.dlg[open]::backdrop { animation: schleierAuf .22s ease-out; }
@keyframes fensterAuf { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes schleierAuf { from { opacity: 0; } }
.dlg header { padding: 18px 22px; }
.dlg footer { padding: 14px 22px; }
.dlg .x { width: 32px; height: 32px; border-radius: 8px; transition: background-color .15s, color .15s; }
.dlg .x:hover { background: var(--bg); color: var(--ink); }

/* Ansichten weich wechseln */
.view:not([hidden]) { animation: ansichtAuf .22s ease-out; }
@keyframes ansichtAuf { from { opacity: 0; transform: translateY(4px); } }

/* Meldungen unten */
.toast { border-radius: 12px; padding: 11px 18px; transition: opacity .22s, transform .28s cubic-bezier(.2, .9, .3, 1.2); }

/* Bestell-Hinweis: Wagen wackelt kurz */
.bestell-hinweis { padding: 9px 24px; }
.tab-zahl { animation: zahlAuf .4s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes zahlAuf { from { transform: scale(.4); opacity: 0; } }
.be-karte { transition: box-shadow .18s, transform .18s; }
.be-karte:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.be-btn { border-radius: 8px; transition: background-color .15s, border-color .15s, filter .15s; }
.be-btn.haupt:hover { filter: brightness(1.07); }

/* schlanke Bildlaufleisten */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 40%, transparent); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* Dunkel: Karten und Spalten etwas abheben */
:root[data-theme="dark"] .card, :root[data-theme="dark"] .be-karte, :root[data-theme="dark"] .a-sek { border-color: #414248; }
:root[data-theme="dark"] .column { border-color: #36373c; }
:root[data-theme="dark"] .avatar { background: #ececef; color: #25262a; }

/* Wer keine Bewegung möchte (Systemeinstellung), bekommt keine Animationen */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Grösser und mit mehr Luft (Schrift, Knöpfe, Felder, Reiter) ---------- */
body { font-size: 15px; }
.top { padding: 14px 24px; gap: 14px; }
.brand .logo { height: 32px; }
.brand span { font-size: 16px; }
.tabs { gap: 6px; padding: 5px; border-radius: 14px; }
.tabs button { font-size: 15px; padding: 9px 18px; border-radius: 10px; letter-spacing: .005em; }
.tab-zahl { min-width: 20px; height: 20px; font-size: 11.5px; }
#suche { height: 42px; font-size: 15px; }
.btn { height: 42px; font-size: 15px; padding: 0 17px; border-radius: 11px; }
.btn.sm { height: 34px; font-size: 14px; padding: 0 12px; }
.icon-btn { width: 42px; height: 42px; border-radius: 11px; }
.ich-btn { font-size: 15px; padding: 4px 14px 4px 4px; }
.ich-btn .avatar { width: 30px; height: 30px; font-size: 11.5px; }
label, .lbl { font-size: 13.5px; }
label input, label select, label textarea, .copy input { font-size: 15px; min-height: 42px; padding: 9px 12px; }
.column { flex-basis: 304px; }
.column > header { font-size: 15.5px; padding: 16px 16px 10px; }
.card { padding: 13px 15px; }
.card .nr { font-size: 12.5px; }
.card .kunde { font-size: 15.5px; }
.card .titel { font-size: 14.5px; }
.card .meta { font-size: 12.5px; }
.pill { font-size: 12.5px; padding: 3px 9px; }
.dlg header h2 { font-size: 19px; }
.dlg.auftrag-dlg { width: min(900px, calc(100vw - 32px)); }
.a-titel { font-size: 14px !important; }
.seg button { font-size: 14.5px; padding: 7px 13px; }
.ansicht-wahl select { font-size: 14.5px; }
.be-kopf { font-size: 15px; }
.be-btn { font-size: 13.5px; padding: 5px 11px; }
.toast { font-size: 14.5px; }
/* Breite Kopfzeile: auf schmaleren Bildschirmen wird zuerst der Schriftzug, dann die Suche kompakter */
@media (max-width: 1680px) { .brand span { display: none; } #suche { width: 170px; } }
@media (max-width: 1480px) { .tabs button { padding: 9px 14px; } #suche { width: 44px; padding-right: 0; color: transparent; cursor: pointer; } #suche:focus { width: 260px; color: inherit; cursor: text; } #suche::placeholder { color: transparent; } #suche:focus::placeholder { color: var(--muted); } }

/* ---------- Schwarz/Grau mit wenig Rot ---------- */
/* aktiver Reiter: kleiner roter Strich unten */
.tabs button { position: relative; }
.tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 18px; height: 2.5px; border-radius: 2px; background: var(--brand); transform: translateX(-50%); animation: strichAuf .25s ease-out; }
@keyframes strichAuf { from { width: 0; } }
/* Links und Schalter im Grau-Schema gut lesbar */
.be-auftrag-link { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--brand) 55%, transparent); text-underline-offset: 3px; }
.auftrag-dlg .ablauf-chips label.check:has(input:checked) { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.auftrag-dlg .ablauf-chips label.check:has(input:checked)::before { background: var(--brand); color: #fff; }
.chip[aria-pressed="true"]:not(.label-chip) { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ---------- Auswahlmenüs bearbeiten ---------- */
label.mit-aw { position: relative; }
.aw-edit { position: absolute; right: 0; top: -3px; border: 0; background: none; color: var(--muted); font-size: 13px; line-height: 1; padding: 3px 6px; border-radius: 6px; cursor: pointer; opacity: .7; transition: opacity .15s, background-color .15s, color .15s; }
label.mit-aw:hover .aw-edit, .aw-edit:focus-visible { opacity: 1; }
.aw-edit:hover { background: var(--bg); color: var(--ink); }
.aw-box { position: fixed; z-index: 300; width: 380px; max-width: calc(100vw - 24px); max-height: min(560px, calc(100vh - 24px)); display: flex; flex-direction: column; gap: 10px; background: var(--surface); color: var(--body); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lift); padding: 14px; animation: fensterAuf .18s ease-out; }
.aw-kopf { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 15px; }
.aw-x { margin-left: auto; border: 0; background: none; font-size: 20px; line-height: 1; color: var(--muted); cursor: pointer; border-radius: 6px; width: 28px; height: 28px; }
.aw-x:hover { background: var(--bg); color: var(--ink); }
.aw-liste { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; }
.aw-zeile { display: flex; align-items: center; gap: 6px; }
.aw-zeile input { flex: 1; min-width: 0; height: 36px; border: 1px solid var(--line); border-radius: 9px; padding: 0 10px; background: var(--surface); color: var(--ink); font-size: 14.5px; }
.aw-zeile input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.aw-zeile input[readonly] { background: var(--bg); color: var(--muted); }
.aw-zeile .aw-kurz { flex: 0 0 64px; text-transform: uppercase; text-align: center; font-weight: 600; }
.aw-zeile small { font-size: 11.5px; color: var(--muted); background: var(--bg); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.aw-zeile.weg input { text-decoration: line-through; opacity: .5; }
.aw-farbe { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.aw-weg { flex: none; width: 32px; height: 32px; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; color: var(--muted); cursor: pointer; font-size: 15px; }
.aw-weg:hover { color: var(--danger); border-color: var(--danger); }
.aw-hinweis { margin: 0; font-size: 12px; color: var(--muted); }
.aw-fuss { display: flex; gap: 6px; align-items: center; }

/* Logo grösser; Reiter auf die Höhe des Schriftzugs MAKEDESIGN (der Schriftzug sitzt im Logo unterhalb der Mitte) */
.brand .logo { height: 42px; }
.tabs, .brand span { position: relative; top: 8px; }
/* «Löschen»-Knöpfe im hellen Modus schwarz (rot erst beim Darüberfahren) */
:root:not([data-theme="dark"]) .btn.danger { color: var(--ink); }
:root:not([data-theme="dark"]) .btn.danger:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
/* Bestätigen in Rückfragen («Löschen»): hell schwarz, dunkel rot – immer gut lesbar */
.btn.primary.danger-fill, .btn.danger-fill { background: var(--ink); border-color: var(--ink); color: var(--surface); box-shadow: none; }
:root[data-theme="dark"] .btn.primary.danger-fill, :root[data-theme="dark"] .btn.danger-fill { background: #d9453b; border-color: #d9453b; color: #fff; }
.btn.danger-fill:hover { filter: brightness(1.08); }
/* Schriftzug «Auftragsplaner» weg – nach dem Logo bleibt etwas freier Raum */
.brand span { display: none !important; }
.brand { margin-right: 36px; }
/* Mehr Luft zwischen den Spalten und ein weicher Schatten an den Kanten */
.board { gap: 24px; padding: 24px 28px; }
.column, .be-spalte { box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 18px rgba(16, 24, 40, .07); }
.be-spalten { gap: 24px; }
.bestellungen { padding: 22px 28px; gap: 20px; }
:root[data-theme="dark"] .column, :root[data-theme="dark"] .be-spalte { box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .28); }
/* Logo bündig mit dem Spaltentitel darunter (Board-Rand 28 + Spaltenrand 1 + Titelabstand 16 = 45 px) */
.top { padding-left: 45px; }
.brand { margin-right: 22px; }
.top { padding-right: 28px; }
@media (max-width: 1760px) { .tabs { gap: 2px; } .tabs button { padding: 9px 14px; } }
@media (max-width: 1560px) { #suche { width: 44px; padding-right: 0; color: transparent; cursor: pointer; } #suche:focus { width: 240px; color: inherit; cursor: text; } #suche::placeholder { color: transparent; } #suche:focus::placeholder { color: var(--muted); } }
/* Zweitkarten (gestrichelt): verkleinern / ausblenden */
.spiegel-hinweis { justify-content: space-between; }
.spiegel-knoepfe { display: inline-flex; gap: 2px; margin-left: auto; opacity: .55; transition: opacity .15s; }
.card.spiegel:hover .spiegel-knoepfe { opacity: 1; }
.spiegel-knoepfe button { border: 0; background: none; color: var(--muted); font-size: 13px; line-height: 1; width: 22px; height: 20px; border-radius: 5px; cursor: pointer; }
.spiegel-knoepfe button:hover { background: var(--bg); color: var(--ink); }
.card.spiegel.klein { padding: 7px 12px; }
.card.spiegel.klein .spiegel-hinweis { margin-bottom: 2px; }
.spiegel-kurz { font-size: 13px; color: var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spiegel-kurz b { color: var(--ink); font-weight: 650; }
.spiegel-ausgeblendet { align-self: stretch; border: 1px dashed var(--line); background: none; color: var(--muted); font: inherit; font-size: 12.5px; border-radius: 9px; padding: 5px 8px; cursor: pointer; }
.spiegel-ausgeblendet:hover { color: var(--ink); border-color: var(--muted); }
/* Passwort anzeigen (Auge im Feld) */
.pw-feld { position: relative; display: block; }
.pw-feld input { width: 100%; padding-right: 44px !important; }
.pw-auge { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; background: none; color: var(--muted); border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
.pw-auge:hover { color: var(--ink); background: var(--bg); }
.pw-auge .auge-auf, .pw-feld.sichtbar .pw-auge .auge-zu { display: none; }
.pw-feld.sichtbar .pw-auge .auge-auf { display: block; }
/* Anmeldeseite im Schwarz/Grau-Design mit einem Hauch Rot */
.anmeldung { background: radial-gradient(1200px 600px at 15% 0%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 60%), linear-gradient(160deg, #2b2c30 0%, #4a4b51 55%, #d9d9dd 100%) !important; }
:root[data-theme="dark"] .anmeldung { background: radial-gradient(1200px 600px at 15% 0%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 60%), linear-gradient(160deg, #1c1d20 0%, #2f3035 60%, #46474d 100%) !important; }
/* Übersicht: «Nicht zugeteilt» aus- und einblenden */
.pp-offen-weg { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 20px; line-height: 1; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; }
.pp-offen-weg:hover { background: var(--surface); color: var(--ink); }
.pp-offen-zeigen { flex: none; align-self: flex-start; border: 1px dashed var(--line); background: none; color: var(--muted); font: inherit; font-size: 13.5px; border-radius: 12px; padding: 10px 16px; cursor: pointer; white-space: nowrap; }
.pp-offen-zeigen:hover { color: var(--ink); border-color: var(--muted); }
/* ---------- Ausrechnungsblatt ---------- */
.rp-scroll { overflow-x: auto; }
.rp-tab { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rp-tab th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 6px 8px; border-bottom: 1.5px solid var(--line); white-space: nowrap; }
.rp-tab td { padding: 7px 8px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; }
.rp-tab tfoot td { font-weight: 700; border-bottom: 0; border-top: 1.5px solid var(--line); }
.rp-tab .zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rp-tab .rp-chf td { font-weight: 500; color: var(--body); border-top: 0; font-size: 12.5px; }
.rp-rot { color: var(--bad-ink) !important; font-weight: 700; }
.rp-gruen { color: var(--ok-ink) !important; }
.klein-av { margin: 0; width: 24px; height: 24px; font-size: 10px; }
.rp-weg { border: 0; background: none; color: var(--muted); font-size: 17px; line-height: 1; width: 28px; height: 28px; border-radius: 7px; cursor: pointer; flex: none; }
.rp-weg:hover { color: var(--danger); background: var(--bg); }
.rp-neu { display: grid; grid-template-columns: 1.6fr 1fr .7fr .7fr 1fr 1.4fr auto; gap: 8px; align-items: end; padding: 12px; background: var(--bg); border-radius: 12px; margin-top: 10px; }
.rp-neu .btn { height: 42px; }
@media (max-width: 760px) { .rp-neu { grid-template-columns: 1fr 1fr; } .rp-was, .rp-notiz { grid-column: 1 / -1; } }
.rp-nach { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; gap: 8px; }
.rp-nach-kopf { display: flex; align-items: baseline; gap: 10px; color: var(--ink); }
.rp-nach small, .rp-nach-kopf small { color: var(--muted); font-size: 12px; }
.rapport-ueber { background: var(--bad-bg) !important; color: var(--bad-ink); }
/* Pflichtfenster beim Abschliessen */
.rp-kopf { margin: 0; color: var(--body); }
.rp-block { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.rp-block-kopf { display: flex; align-items: baseline; gap: 10px; color: var(--ink); flex-wrap: wrap; }
.rp-block-kopf small { font-size: 12px; color: var(--muted); background: var(--bg); border-radius: 6px; padding: 1px 7px; }
.rp-zeile { display: grid; grid-template-columns: 1.3fr 1fr 2fr auto; gap: 8px; align-items: center; }
.rp-zeile select, .rp-zeile input { height: 42px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; background: var(--surface); color: var(--ink); font-size: 15px; min-width: 0; }
.rp-zeile input:focus, .rp-zeile select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.rp-block > .btn { align-self: flex-start; }
.rp-kein { margin-top: 2px; }
@media (max-width: 600px) { .rp-zeile { grid-template-columns: 1fr 1fr auto; } .rp-zeile input[data-z="notiz"], .rp-zeile input[data-m="notiz"] { grid-column: 1 / -1; grid-row: 2; } }
.rp-neu { grid-template-columns: minmax(150px, 1.5fr) minmax(110px, 1fr) 84px 92px 158px minmax(120px, 1.2fr) auto; }
@media (max-width: 760px) { .rp-neu { grid-template-columns: 1fr 1fr; } }
/* Ausrechnungsblatt: Material mit Einheit, Kosten */
.rp-einheit-feld { position: relative; display: block; }
.rp-einheit-feld input { width: 100%; padding-right: 40px !important; }
.rp-einheit-feld em { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); pointer-events: none; }
.rp-zeilenname { display: block; font-size: 11px; color: var(--muted); }
.rp-ohne { font-size: 11.5px; color: var(--warn-ink); background: var(--warn-bg); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.rp-summen { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; margin-top: 8px; font-size: 13.5px; color: var(--body); }
.rp-summen b { color: var(--ink); margin-left: 4px; }
.rp-summen small { flex-basis: 100%; color: var(--muted); font-size: 12px; }
.rp-vergleich { display: flex; flex-wrap: wrap; gap: 10px; }
.rp-vergleich span { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); background: var(--bg); border-radius: 10px; padding: 8px 12px; }
.rp-vergleich b { font-size: 16px; color: var(--ink); }
.rp-vergleich .rp-rot b, .rp-vergleich .rp-rot { color: var(--bad-ink); }
.rp-vergleich .rp-gruen b, .rp-vergleich .rp-gruen { color: var(--ok-ink); }
.rp-neu input:disabled { opacity: .45; }
/* Daten im Auftragsfenster (erstellt · Montage · fertig) und Erstelldatum auf der Karte */
.dlg header .a-daten { display: flex; flex-wrap: wrap; gap: 6px; margin-left: 14px; }
.a-daten span { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); background: var(--bg); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.a-daten span b { color: var(--ink); font-weight: 600; }
.a-daten span i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.a-daten span.fertig { background: var(--ok-bg); color: var(--ok-ink); }
.a-daten span.fertig b { color: var(--ok-ink); }
.card .nr .nr-datum { margin-left: auto; font-size: 11.5px; color: var(--muted); opacity: .8; }
.card .nr .nr-datum + .folder-warn { margin-left: 8px; }
.rp-neu { grid-template-columns: minmax(160px, 1.6fr) minmax(100px, 1fr) 90px 92px 150px; }
.rp-neu .rp-notiz { grid-column: 1 / 5; }
.rp-neu > .btn { grid-column: 5; }
@media (max-width: 760px) { .rp-neu { grid-template-columns: 1fr 1fr; } .rp-neu .rp-notiz, .rp-neu > .btn { grid-column: 1 / -1; } }
/* Zweitkarten (gestrichelt) deutlicher: kräftiger gestrichelter Rahmen, leicht getönter Hintergrund, Hinweis als Etikett */
.card.spiegel { opacity: 1; border: 2px dashed color-mix(in srgb, var(--c-produktion) 60%, var(--line)); background: color-mix(in srgb, var(--c-produktion) 6%, var(--surface)); }
.card.spiegel[class*="t-"] { border-left: 4px dashed var(--c); }
:root[data-theme="dark"] .card.spiegel { border-color: color-mix(in srgb, var(--c-produktion) 70%, var(--line)); background: color-mix(in srgb, var(--c-produktion) 9%, var(--surface)); }
:root[data-theme="dark"] .card.spiegel[class*="t-"] { border-left-color: var(--c); }
.spiegel-hinweis > span:first-child { display: inline-block; background: var(--warn-bg); color: var(--warn-ink); border-radius: 6px; padding: 2px 8px; font-size: 11.5px; font-weight: 700; }
/* Ausrechnungsblatt: vorbereitete Zeilen (nur Stunden / Mengen eintragen) */
.rp-erfassen { margin-top: 10px; padding: 12px; background: var(--bg); border-radius: 12px; display: flex; flex-direction: column; gap: 8px; }
.rp-erfassen-kopf { display: flex; align-items: baseline; gap: 10px; color: var(--ink); flex-wrap: wrap; }
.rp-erfassen-kopf small { color: var(--muted); font-size: 12px; }
.aw-edit.aw-inline { position: static; margin-left: auto; opacity: 1; font-size: 12px; }
.rp-erfassen-fuss { display: flex; gap: 8px; align-items: center; }
.rp-v-liste { display: flex; flex-direction: column; gap: 6px; }
.rp-v { display: grid; grid-template-columns: 26px minmax(160px, 1.6fr) 120px 100px 84px minmax(120px, 1.3fr); gap: 8px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; }
.rp-v:has([data-v-an]:checked) { border-color: color-mix(in srgb, var(--ink) 35%, var(--line)); }
.rp-v-an { display: grid; place-items: center; }
.rp-v-an input { width: 18px; height: 18px; }
.rp-v-name { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.rp-v-name small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.rp-v input, .rp-v select { height: 38px; border: 1px solid var(--line); border-radius: 9px; padding: 0 10px; background: var(--surface); color: var(--ink); font-size: 14.5px; min-width: 0; width: 100%; }
.rp-v .rp-einheit-feld[hidden] { display: block !important; visibility: hidden; }
.rp-v input:focus, .rp-v select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.rp-v-frei select[data-v-was] { font-weight: 600; }
@media (max-width: 760px) { .rp-v { grid-template-columns: 26px 1fr 1fr; } .rp-v [data-v-notiz] { grid-column: 2 / -1; } }
#dlgRapport .rp-v { grid-template-columns: 26px minmax(150px, 1.5fr) 110px 96px 80px minmax(100px, 1fr); }
.pill.zusatz-mat { background: var(--warn-bg); color: var(--warn-ink); font-weight: 600; }
/* Karte in Druckvorstufe / Produktion / Montage ohne Termin auf der Plantafel */
.card.ungeplant { border-left: 4px solid #e11d48 !important; background: color-mix(in srgb, #e11d48 6%, var(--surface)); }
:root[data-theme="dark"] .card.ungeplant { background: color-mix(in srgb, #e11d48 11%, var(--surface)); }
.ungeplant-hinweis { display: inline-block; margin-bottom: 6px; font-size: 11.5px; font-weight: 700; color: var(--bad-ink); background: var(--bad-bg); border-radius: 6px; padding: 2px 8px; }
/* Uhrzeit als Textfeld (hh:mm) */
.zeit-feld { text-align: center; font-variant-numeric: tabular-nums; }
.zeit-vonbis .zeit-feld { width: 72px; flex: 1; }
/* Fotos beim Abschliessen */
.rp-foto-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rp-foto-liste { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rp-foto { position: relative; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.rp-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-foto button { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; }
.rp-foto-liste small { color: var(--muted); font-size: 12px; margin-left: 4px; }
/* «Zusätzliches Material oder Aufwand erfassen» – zugeklappt mit + */
.rp-erfassen:not(.offen) { padding: 10px 12px; }
.rp-erfassen-kopf b[data-rp-auf] { cursor: pointer; }
.rp-auf { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 18px; font-weight: 600; line-height: 1; cursor: pointer; display: grid; place-items: center; flex: none; align-self: center; }
.rp-auf:hover { border-color: var(--muted); }
/* ---------- Assistent: Chat ---------- */
.chat-knopf { position: fixed; right: 22px; bottom: 22px; z-index: 260; width: 54px; height: 54px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.22); transition: transform .15s; }
.chat-knopf:hover { transform: scale(1.06); }
.chat-zahl { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 11.5px; font-weight: 700; display: grid; place-items: center; padding: 0 5px; }
.chat-fenster { position: fixed; right: 22px; bottom: 88px; z-index: 270; width: min(400px, calc(100vw - 24px)); height: min(600px, calc(100vh - 120px)); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lift); display: flex; flex-direction: column; overflow: hidden; animation: fensterAuf .2s ease-out; }
.chat-fenster > header { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.chat-fenster > header > div { flex: 1; display: flex; flex-direction: column; color: var(--ink); }
.chat-fenster > header small { color: var(--muted); font-size: 12px; }
.chat-kopf-knopf { border: 0; background: none; color: var(--muted); font-size: 17px; min-width: 32px; height: 32px; border-radius: 8px; cursor: pointer; }
.chat-kopf-knopf:hover { background: var(--bg); color: var(--ink); }
.chat-verlauf { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); }
.chat-msg { max-width: 86%; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; color: var(--ink); background: var(--surface); border: 1px solid var(--line); align-self: flex-start; white-space: normal; }
.chat-msg.user { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.chat-msg.tippt { display: flex; gap: 4px; }
.chat-msg.tippt i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: tippen 1s infinite; }
.chat-msg.tippt i:nth-child(2) { animation-delay: .15s; } .chat-msg.tippt i:nth-child(3) { animation-delay: .3s; }
@keyframes tippen { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.chat-eingabe { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); align-items: flex-end; }
.chat-eingabe textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; font: inherit; font-size: 14.5px; background: var(--surface); color: var(--ink); max-height: 140px; }
.chat-eingabe textarea:focus { outline: none; border-color: var(--accent); }
.chat-vorschlaege { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.chat-vs-kopf { display: flex; align-items: center; justify-content: space-between; color: var(--ink); }
.chat-vs { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.chat-vs.erledigt { opacity: .55; }
.chat-vs small { display: block; color: var(--muted); font-size: 12px; }
.chat-vs p { margin: 0; font-size: 13.5px; color: var(--body); }
.chat-vs .btn { align-self: flex-start; }
@media (max-width: 600px) { .chat-fenster { right: 12px; left: 12px; width: auto; bottom: 80px; } .chat-knopf { right: 14px; bottom: 14px; } }