/* ==========================================================================
   Desk-Theme – Nachbau des Xara-Desk-Designs (https://desk.afca.ch)
   Werte mit "(Desk)" sind 1:1 aus desk.css / den computed styles übernommen.
   Werte mit "(abgeleitet)" sind aus dem Screenshot nachgebaut – bei Bedarf
   mit dem Original-CSS (app.css) des Desk abgleichen.
   Einbinden:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=swap" rel="stylesheet">
   ========================================================================== */

:root {
  /* Flächen & Text (Desk) */
  --bg: #f4f5f8;
  --card: #ffffff;
  --ink: #1a1d23;
  --ink-2: #3f4550;
  --muted: #7a8091;
  --line: #e8eaee;

  /* Akzent (Desk) */
  --accent: #ea580c;
  --accent-2: #e11d48;
  --accent-grad: linear-gradient(135deg, #f97316 0%, #ea580c 55%, #e11d48 120%);
  --accent-line: #fdd3b8;
  --accent-soft: #fff1e8;

  /* Sekundär (Desk) */
  --indigo: #4c62d6;
  --indigo-deep: #3a4cb0;

  /* Status (Desk) */
  --ok-bg: #e5f7eb;   --ok-fg: #16803c;
  --info-bg: #e9effc; --info-fg: #3453c4;
  --warn-bg: #fff1e8; --warn-fg: #c2410c;
  --bad-bg: #fdeaea;  --bad-fg: #b42323;
  --off-bg: #eef0f3;  --off-fg: #6b7280;

  /* Form (Desk) */
  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(20, 24, 40, 0.05);
  --shadow-md: 0 1px 3px rgba(20, 24, 40, 0.06), 0 8px 24px -12px rgba(20, 24, 40, 0.14);
  --shadow-lift: 0 4px 8px rgba(20, 24, 40, 0.06), 0 16px 32px -16px rgba(234, 88, 12, 0.22);

  --font: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Basis (Desk) ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1 { font-size: 28px; font-weight: 800; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 16px; font-weight: 700; }
a { color: var(--accent); }

/* ---------- Kopfleiste (abgeleitet; Werte für Hintergrund/Padding aus Desk) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 2rem;
  height: 86px; padding: 0 1.4rem;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: 1.3rem; font-weight: 800; color: var(--ink); text-decoration: none;
}
.brand .dot {               /* oranger Punkt vor dem Namen */
  width: .8rem; height: .8rem; border-radius: 50%;
  background: var(--accent-grad);
  box-shadow: 0 0 10px rgba(234, 88, 12, .45);
}
.brand .brand-accent { color: var(--accent); }   /* z. B. "desk" */

.nav { display: flex; gap: .4rem; overflow-x: auto; }
.nav a {
  padding: .65rem 1.4rem; border-radius: 999px;
  font-weight: 700; color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.nav a:hover { background: var(--accent-soft); color: var(--accent); }
.nav a.active {
  background: var(--accent-grad); color: #fff;
  box-shadow: var(--shadow-lift);
}

/* ---------- Seitenaufbau ---------- */
.page { max-width: 1280px; margin: 0 auto; padding: 2rem 1.4rem 3rem; }
.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.page-head .sub { color: var(--muted); font-weight: 600; }

/* ---------- Kennzahl-Kacheln (Desk) ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .9rem; margin-bottom: 1.2rem; }
.kpi {
  display: flex; flex-direction: column; gap: .2rem;
  background: var(--card); border-radius: var(--radius);
  padding: 1rem 1.1rem; box-shadow: var(--shadow-sm);
  text-decoration: none; color: var(--ink);
  border-left: 4px solid var(--indigo);
}
.kpi:hover { box-shadow: var(--shadow-md); }
.kpi.warn { border-left-color: var(--warn-fg); }
.kpi.bad  { border-left-color: var(--bad-fg); }
.kpi.off  { border-left-color: var(--off-fg); }
.kpi-value { font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.kpi-label { color: var(--muted); font-size: .85rem; }
.kpi-label small { display: block; font-size: .7rem; color: var(--off-fg); }

/* ---------- Karten (Desk) ---------- */
.card { background: var(--card); border-radius: var(--radius); padding: 1.1rem 1.3rem; box-shadow: var(--shadow-sm); margin-bottom: 1rem; }
.card h2 { font-size: 1rem; margin: 0 0 .7rem; display: flex; align-items: center; gap: .5rem; }
.card h2 .count { background: var(--off-bg); color: var(--off-fg); border-radius: 999px; padding: 0 .55em; font-size: .8rem; }
.card h2 .right { margin-left: auto; }
.card.warn-card { border-left: 4px solid var(--warn-fg); }

/* ---------- Tabellen (Desk) ---------- */
.table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.table th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: .7rem .9rem; border-bottom: 1px solid var(--line); font-weight: 700; }
.table td { padding: .65rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; font-size: .95rem; }
.table tr:last-child td { border-bottom: 0; }
.table.compact td, .table.compact th { padding: .45rem .6rem; }
.table .strong { font-weight: 700; }
.table tr.row-link { cursor: pointer; }
.table tr.row-link:hover td { background: var(--accent-soft); }
.table tr.overdue td:first-child { box-shadow: inset 4px 0 0 var(--bad-fg); }

/* ---------- Chips & Status-Badges (Desk) ---------- */
.chip, .status-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  border-radius: 999px; padding: .18em .65em;
  font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  background: var(--off-bg); color: var(--off-fg);
}
.chip.ok,   .status-badge.ok   { background: var(--ok-bg);   color: var(--ok-fg); }
.chip.info, .status-badge.info { background: var(--info-bg); color: var(--info-fg); }
.chip.warn, .status-badge.warn { background: var(--warn-bg); color: var(--warn-fg); }
.chip.bad,  .status-badge.bad  { background: var(--bad-bg);  color: var(--bad-fg); }
.chip.member { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); }
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- Buttons (abgeleitet aus Navigation/Akzent) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font: inherit; font-size: .95rem; font-weight: 700;
  padding: .55em 1.1em; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  cursor: pointer; text-decoration: none;
}
.btn:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.btn.primary { background: var(--accent-grad); color: #fff; border: 0; box-shadow: var(--shadow-lift); }
.btn.primary:hover { filter: brightness(1.05); }
.btn.danger { color: var(--bad-fg); border-color: var(--bad-bg); }
.btn.small { font-size: .8rem; padding: .3em .7em; }
.btn.tiny  { font-size: .75rem; padding: .15em .5em; line-height: 1.2; }

/* ---------- Formulare (abgeleitet) ---------- */
input, select, textarea {
  font: inherit; font-size: .95rem; color: var(--ink);
  padding: .5em .7em; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type="checkbox"] { width: 1rem; height: 1rem; padding: 0; accent-color: var(--accent); }
label { font-size: .85rem; font-weight: 600; color: var(--ink-2); }

/* ==========================================================================
   Erweiterungen swarkn (abgeleitet) – Bausteine für die Fachseiten.
   Nur Variablen aus :root verwenden, keine neuen Farben.
   ========================================================================== */

/* ---------- Kopfleiste: dichte Navigation & Benutzer ---------- */
.nav.dense a { padding: .55rem 1rem; }
.topbar .user { margin-left: auto; text-decoration: none; display: flex; align-items: center; gap: .6rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
.topbar .user .avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line);
  font-size: .8rem; font-weight: 800;
}

/* ---------- Formulare: Felder, Raster, Werkzeugleiste ---------- */
.field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.field.inline { flex-direction: row; align-items: center; gap: .5rem; }
.field .hint { font-size: .75rem; color: var(--muted); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--bad-fg); }
.field.invalid .hint { color: var(--bad-fg); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .9rem 1rem; }
.form-grid .span-all { grid-column: 1 / -1; }
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; margin-bottom: 1rem; }
.toolbar .spacer { flex: 1; }
.toolbar .field { width: auto; }
.toolbar input[type="date"] { width: 10.5rem; }

/* ---------- Liste links / Detail rechts ---------- */
.split { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.list { list-style: none; margin: 0; padding: 0; max-height: 70vh; overflow-y: auto; }
.list li { padding: .5rem .7rem; border-radius: var(--radius-sm); cursor: pointer; font-weight: 600; color: var(--ink-2); }
.list li small { display: block; font-weight: 500; color: var(--muted); }
.list li:hover { background: var(--accent-soft); color: var(--accent); }
.list li.active { background: var(--accent-soft); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }

/* ---------- Tabellen: Zahlen, Inline-Bearbeitung, Hervorhebungen ---------- */
.table .num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table td.edit { padding: .25rem .35rem; }
.table td.edit input, .table td.edit select { padding: .35em .5em; }
.table tr.selected td { background: var(--accent-soft); }
.table tr.running td:first-child { box-shadow: inset 4px 0 0 var(--ok-fg); }
.table tr.not-billable td { background: var(--warn-bg); }
.table tr.linked .text { background: var(--info-bg); border-radius: var(--radius-sm); }
.table tfoot td { font-weight: 800; border-top: 1px solid var(--line); border-bottom: 0; }

/* ---------- Meldungen & Leerzustand ---------- */
.alert { padding: .7rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-weight: 600; background: var(--info-bg); color: var(--info-fg); }
.alert.ok { background: var(--ok-bg); color: var(--ok-fg); }
.alert.warn { background: var(--warn-bg); color: var(--warn-fg); }
.alert.bad { background: var(--bad-bg); color: var(--bad-fg); }
.empty { color: var(--muted); text-align: center; padding: 2rem 1rem; }

/* ---------- Dialog (Modal) ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: flex-start; justify-content: center; padding: 8vh 1rem;
  background: rgba(26, 29, 35, .35); backdrop-filter: blur(2px);
}
.modal { width: min(640px, 100%); max-height: 84vh; overflow-y: auto; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 1.3rem 1.4rem; }
.modal.wide { width: min(1000px, 100%); }
.modal h2 { margin: 0 0 1rem; font-size: 1.1rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.2rem; }

/* ---------- Arbeitsanzeige ---------- */
.busy { position: relative; }
.busy::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: rgba(255, 255, 255, .6);
}
.spinner {
  display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  border: 3px solid var(--accent-line); border-top-color: var(--accent);
  animation: spin .8s linear infinite; vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Baum (Work Items, Auswertung) ---------- */
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul { padding-left: 1.1rem; border-left: 1px dashed var(--line); margin-left: .45rem; }
.tree li > .node { display: flex; align-items: center; gap: .4rem; padding: .25rem .4rem; border-radius: var(--radius-sm); font-size: .9rem; }
.tree li > .node:hover { background: var(--accent-soft); }
.tree .toggle { width: 1rem; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0; font: inherit; }
.tree [draggable="true"] { cursor: grab; }

/* ---------- Zeitleiste (Abwesenheiten) ---------- */
.timeline { display: grid; grid-template-columns: 180px repeat(var(--days, 40), minmax(22px, 1fr)); font-size: .75rem; overflow-x: auto; }
.timeline .head, .timeline .name, .timeline .day { border-bottom: 1px solid var(--line); min-height: 2rem; display: flex; align-items: center; justify-content: center; }
.timeline .head { color: var(--muted); font-weight: 700; flex-direction: column; }
.timeline .name { justify-content: flex-start; padding-right: .5rem; font-weight: 600; color: var(--ink-2); }
.timeline .name.me { color: var(--accent); }
.timeline .day.weekend { background: var(--off-bg); }
.timeline .day.holiday { background: var(--info-bg); }
.timeline .day.today, .timeline .head.today { box-shadow: inset 0 0 0 2px var(--accent-line); }
.timeline .bar { height: 1.1rem; width: 100%; border-radius: 4px; background: var(--ok-bg); border: 1px solid var(--ok-fg); cursor: pointer; }
.timeline .bar.half { width: 50%; }
.timeline .bar.zivilschutz { background: var(--info-bg); border-color: var(--info-fg); }
.timeline .bar.militaer { background: var(--warn-bg); border-color: var(--warn-fg); }
.timeline .bar.krank { background: var(--bad-bg); border-color: var(--bad-fg); }

/* ---------- Bewertung & Ampel (Projektzustand) ---------- */
.rating { display: inline-flex; gap: .15rem; }
.rating button { border: 0; background: none; padding: 0 .1rem; font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--line); }
.rating button.on { color: var(--accent); }
.ampel { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; background: var(--off-fg); vertical-align: middle; }
.ampel.ok { background: var(--ok-fg); }
.ampel.info { background: var(--info-fg); }
.ampel.warn { background: var(--warn-fg); }
.ampel.bad { background: var(--bad-fg); }

/* ---------- Ausklappmenü (z. B. Projektfilter) ---------- */
.dropdown { position: relative; }
.dropdown > summary { list-style: none; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown-panel {
  position: absolute; z-index: 20; top: calc(100% + .35rem); left: 0;
  min-width: 300px; max-height: 55vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); padding: .4rem;
}
.dropdown-panel label { display: flex; align-items: center; gap: .5rem; padding: .3rem .4rem; border-radius: 6px; cursor: pointer; font-weight: 500; }
.dropdown-panel label:hover { background: var(--accent-soft); }

/* ---------- Ungültige Eingabe direkt am Feld ---------- */
input.invalid, select.invalid { border-color: var(--bad-fg); background: var(--bad-bg); }

/* ---------- Tabelle mit festen Spalten (Inline-Bearbeitung) ---------- */
.table.entries { table-layout: fixed; }
.table.entries td.edit select, .table.entries td.edit input { text-overflow: ellipsis; }
.table.entries td:last-child { white-space: nowrap; }
.table.entries td:last-child .btn.tiny { padding: .2em .38em; }

/* ---------- Seitenleiste rechts (Scrum / Work Items) ---------- */
.drawer {
  position: fixed; top: 86px; right: 0; bottom: 0; z-index: 30;
  width: min(440px, 100vw); display: flex; flex-direction: column;
  background: var(--card); border-left: 1px solid var(--line); box-shadow: var(--shadow-md);
}
.drawer-head { display: flex; align-items: center; gap: .5rem; padding: .9rem 1rem; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 0; font-size: 1rem; }
.drawer-head .right { margin-left: auto; display: flex; gap: .35rem; }
.drawer-body { flex: 1; overflow-y: auto; padding: .6rem .8rem 1.2rem; }
.drawer-body .hint { font-size: .78rem; color: var(--muted); margin: 0 0 .6rem; }
.tree .node .titel { flex: 1; min-width: 0; }
.tree .node .titel small { display: block; color: var(--muted); font-size: .72rem; }
.drop-ziel { outline: 2px dashed var(--accent); outline-offset: 1px; }
/* Inhalt rückt nach links, solange die Seitenleiste offen ist (Ablage per Drag&Drop bleibt sichtbar) */
body.drawer-offen .page { max-width: none; margin: 0 min(440px, 100vw) 0 0; }
@media (max-width: 900px) { body.drawer-offen .page { margin-right: 0; } }

/* ==========================================================================
   Erweiterungen swarkn II – Bedienleisten, Icon-Buttons, Eintragsliste
   ========================================================================== */

/* ---------- Icon-Buttons (SVG-Icons, siehe Swarkn.Web/Shared/Icon.razor) ---------- */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; padding: 0; flex: none;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  background: transparent; color: var(--ink-2); cursor: pointer; text-decoration: none;
}
.icon-btn svg { width: 1.05rem; height: 1.05rem; }
.icon-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.icon-btn.go { color: var(--ok-fg); }
.icon-btn.go:hover { background: var(--ok-bg); color: var(--ok-fg); border-color: transparent; }
.icon-btn.stop { background: var(--bad-bg); color: var(--bad-fg); }
.icon-btn.stop:hover { border-color: var(--bad-fg); }
.icon-btn.danger:hover { background: var(--bad-bg); color: var(--bad-fg); border-color: transparent; }
.icon-btn.small { width: 1.7rem; height: 1.7rem; }
.icon-btn.small svg { width: .9rem; height: .9rem; }
.icon-btn:disabled { opacity: .4; cursor: default; }
.btn svg { width: 1rem; height: 1rem; flex: none; }

/* ---------- Bedienleiste: alles auf einer Linie, gleiche Höhe ---------- */
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.controls > * { flex: none; }
.controls input:not([type="checkbox"]), .controls select, .controls > .btn, .controls .segmented, .controls .dropdown > summary { height: 2.5rem; }
.controls > .btn, .controls .dropdown > summary { padding-top: 0; padding-bottom: 0; }
.controls .grow { flex: 1 1 16rem; min-width: 12rem; width: auto; }
.controls .label { font-size: .85rem; font-weight: 700; color: var(--ink-2); }
.controls .date { width: 7.6rem; }
.controls .check { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.controls .divider { width: 1px; align-self: stretch; background: var(--line); margin: 0 .4rem; }
.controls .spacer { flex: 1; }

.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--card); }
.segmented button {
  font: inherit; font-size: .85rem; font-weight: 700; color: var(--ink-2);
  border: 0; border-right: 1px solid var(--line); background: transparent; padding: 0 .7rem; cursor: pointer;
}
.segmented button:last-child { border-right: 0; }
.segmented button:hover { background: var(--accent-soft); color: var(--accent); }
.segmented button.active { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }

.card .card-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.card .card-head h2 { margin: 0; }
.card .card-head .right { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

/* ---------- Eintragsliste: zwei Zeilen pro Eintrag ---------- */
.entry-list { --entry-cols: 7.4rem minmax(11rem, 2fr) minmax(9rem, 1.4fr) minmax(8rem, 1fr) 5.6rem 5.6rem 9.6rem; }
.entry-head, .entry-line, .entry-foot { display: grid; grid-template-columns: var(--entry-cols); gap: .5rem; align-items: center; }
.entry-head {
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  padding: 0 .75rem .5rem; border-bottom: 1px solid var(--line);
}
.entry { padding: .75rem; border-bottom: 1px solid var(--line); }
.entry:hover { background: var(--bg); }
.entry .num, .entry-head .num, .entry-foot .num { text-align: right; }
.entry .num input { text-align: right; }
.entry .actions { display: flex; justify-content: flex-end; gap: .1rem; }
.entry-text { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; }
.entry-text input { flex: 1; }
.entry-text .chip { flex: none; }
.entry.running { box-shadow: inset 4px 0 0 var(--ok-fg); }
.entry.not-billable { background: var(--warn-bg); }
.entry.invalid { box-shadow: inset 4px 0 0 var(--bad-fg); }
.entry.linked .entry-text input { background: var(--info-bg); border-color: var(--info-bg); }
.entry .laufzeit { display: flex; justify-content: flex-end; margin-top: .3rem; }
.entry-foot { padding: .8rem .75rem 0; font-weight: 800; }
@media (max-width: 1100px) {
  .entry-list { --entry-cols: 1fr 1fr 1fr; }
  .entry-head { display: none; }
}

/* ---------- Lasche am rechten Rand (öffnet die Seitenleiste) ---------- */
.edge-tab {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 25;
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  padding: 1rem .55rem; font: inherit; font-size: .82rem; font-weight: 800; letter-spacing: .03em;
  background: var(--accent-grad); color: #fff; border: 0; border-radius: var(--radius) 0 0 var(--radius);
  box-shadow: var(--shadow-lift); cursor: pointer;
}
.edge-tab span { writing-mode: vertical-rl; transform: rotate(180deg); }
.edge-tab svg { width: 1.1rem; height: 1.1rem; }
.edge-tab:hover { filter: brightness(1.05); }

/* ---------- Einklappbare Karte ---------- */
details.card > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary h2 { margin: 0; }
details.card > summary .chev { display: inline-flex; color: var(--muted); transition: transform .15s; }
details.card > summary .chev svg { width: 1rem; height: 1rem; }
details.card[open] > summary .chev { transform: rotate(90deg); }
details.card > summary .right { margin-left: auto; color: var(--muted); font-weight: 600; font-size: .9rem; }
details.card[open] > summary { margin-bottom: .8rem; }

/* ---------- Work Items in der Seitenleiste ---------- */
.wi {
  display: flex; align-items: flex-start; gap: .5rem; margin: .35rem 0; padding: .55rem .6rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); cursor: grab;
}
.wi:hover { border-color: var(--accent-line); box-shadow: var(--shadow-sm); }
.wi .grip { color: var(--muted); display: inline-flex; margin-top: .1rem; }
.wi .grip svg { width: .95rem; height: .95rem; }
.wi .titel { flex: 1; min-width: 0; font-size: .88rem; font-weight: 600; }
.wi .titel small { display: block; margin-top: .2rem; color: var(--muted); font-weight: 500; font-size: .74rem; }
.wi .meta { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.tree-gruppe { display: flex; align-items: center; gap: .35rem; width: 100%; padding: .45rem .2rem; border: 0; background: none; font: inherit; font-weight: 800; color: var(--ink); cursor: pointer; text-align: left; }
.tree-gruppe svg { width: 1rem; height: 1rem; color: var(--muted); }
.tree-gruppe .count { margin-left: auto; }

/* ---------- Kompakte Kennzahl-Kacheln (z. B. Statusleiste der Erfassung, 7 Kacheln auf einer Zeile) ---------- */
.kpi-grid.compact { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: .6rem; }
.kpi-grid.compact .kpi { padding: .6rem .8rem; border-left-width: 3px; gap: .1rem; }
.kpi-grid.compact .kpi-value { font-size: 1.35rem; }
.kpi-grid.compact .kpi-label { font-size: .78rem; white-space: nowrap; }
.kpi-grid.compact .kpi-label small { font-size: .66rem; }

/* ---------- Sekundär-Buttons: dezent in Indigo (Orange bleibt der primären Aktion vorbehalten) ---------- */
.btn.secondary, .icon-btn.secondary { background: var(--info-bg); color: var(--indigo-deep); border-color: var(--info-bg); }
.btn.secondary:hover, .icon-btn.secondary:hover { background: var(--info-bg); color: var(--indigo-deep); border-color: var(--indigo); }
.btn.secondary:disabled, .icon-btn.secondary:disabled { background: var(--off-bg); color: var(--off-fg); border-color: var(--off-bg); cursor: default; }
.dropdown[open] > summary.btn.secondary { border-color: var(--indigo); }

/* ---------- Zeitleiste Abwesenheiten (Raster: Namen + 40 Tage, explizite Platzierung) ---------- */
.zeitleiste-scroll { overflow-x: auto; }
.zeitleiste {
  display: grid; grid-template-columns: 190px repeat(40, minmax(24px, 1fr)); grid-auto-rows: 2.5rem;
  min-width: 1150px; font-size: .78rem; position: relative;
}
.zeitleiste .monat { display: flex; align-items: flex-end; padding: 0 .4rem .25rem; font-weight: 800; color: var(--ink-2); border-left: 2px solid var(--line); white-space: nowrap; overflow: hidden; }
.zeitleiste .monat.aktuell { color: var(--accent); }
.zeitleiste .kopf { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--line); }
.zeitleiste .kopf small { font-size: .62rem; font-weight: 600; text-transform: uppercase; }
.zeitleiste .kopf.wochenende { background: var(--off-bg); }
.zeitleiste .kopf.feiertag { background: var(--info-bg); color: var(--info-fg); }
.zeitleiste .kopf.heute { background: var(--accent-grad); color: #fff; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.zeitleiste .name {
  position: sticky; left: 0; z-index: 2; display: flex; align-items: center; gap: .45rem;
  padding: 0 .6rem; background: var(--card); border-bottom: 1px solid var(--line);
  font-size: .86rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden;
}
.zeitleiste .name .kuerzel { font-size: .68rem; font-weight: 800; color: var(--muted); }
.zeitleiste .name.ich { color: var(--accent); font-weight: 800; background: var(--accent-soft); }
.zeitleiste .zelle { border-bottom: 1px solid var(--line); }
.zeitleiste .zelle.wochenende { background: var(--off-bg); }
.zeitleiste .zelle.feiertag { background: var(--info-bg); }
.zeitleiste .zelle.heute { box-shadow: inset 2px 0 0 var(--accent-line), inset -2px 0 0 var(--accent-line); }
.zeitleiste .zelle.monatsgrenze { border-left: 2px solid var(--line); }
.zeitleiste .zelle.klickbar { cursor: copy; }
.zeitleiste .zelle.klickbar:hover { background: var(--accent-soft); }
.zeitleiste .balken {
  z-index: 1; align-self: center; height: 1.6rem; margin: 0 2px; padding: 0 .45rem;
  display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  border-radius: 6px; font-size: .72rem; font-weight: 800;
  background: var(--ok-bg); color: var(--ok-fg); border: 1px solid var(--ok-fg);
}
.zeitleiste .balken.halb { justify-self: start; width: calc(50% - 2px); padding: 0 .2rem; }
.zeitleiste .balken.zivilschutz { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-fg); }
.zeitleiste .balken.militaer { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-fg); }
.zeitleiste .balken.krank { background: var(--bad-bg); color: var(--bad-fg); border-color: var(--bad-fg); }
.zeitleiste .balken.eigen { cursor: pointer; }
.zeitleiste .balken.eigen:hover { box-shadow: var(--shadow-md); }
.legende { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; font-size: .82rem; color: var(--ink-2); font-weight: 600; }
.legende span { display: inline-flex; align-items: center; gap: .35rem; }
.legende i { width: .9rem; height: .9rem; border-radius: 4px; background: var(--ok-bg); border: 1px solid var(--ok-fg); }
.legende i.zivilschutz { background: var(--info-bg); border-color: var(--info-fg); }
.legende i.militaer { background: var(--warn-bg); border-color: var(--warn-fg); }
.legende i.krank { background: var(--bad-bg); border-color: var(--bad-fg); }
.legende i.feiertag { background: var(--info-bg); border-color: var(--info-bg); }
.legende i.wochenende { background: var(--off-bg); border-color: var(--off-bg); }
.monatsnavigation { display: flex; align-items: center; gap: .5rem; }
.monatsnavigation .titel { min-width: 11rem; text-align: center; font-size: 1.15rem; font-weight: 800; }

/* ---------- Liste/Detail mit drei Spalten (Kunde → Projekt → Detail) ---------- */
.split.drei { grid-template-columns: minmax(220px, 280px) minmax(220px, 300px) 1fr; }
@media (max-width: 1100px) { .split.drei { grid-template-columns: minmax(220px, 280px) 1fr; } .split.drei > :last-child { grid-column: 1 / -1; } }
.list-pane .controls { margin-bottom: .6rem; }
.list-pane input[type="search"] { width: 100%; }
.list li .chip { margin-left: .35rem; }
.list li.inaktiv { color: var(--muted); }

/* ---------- Kontaktkarten ---------- */
.kontakt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .8rem; }
.kontakt {
  position: relative; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); font-size: .88rem; line-height: 1.45; color: var(--ink-2);
}
.kontakt:hover { border-color: var(--accent-line); box-shadow: var(--shadow-sm); }
.kontakt .wer { font-weight: 800; color: var(--ink); font-size: .95rem; margin-bottom: .15rem; padding-right: 2rem; }
.kontakt .wo { color: var(--muted); font-size: .8rem; margin-bottom: .45rem; }
.kontakt .zeile { display: flex; gap: .4rem; align-items: baseline; }
.kontakt .zeile span:first-child { min-width: 3.4rem; color: var(--muted); font-size: .76rem; font-weight: 700; }
.kontakt .icon-btn { position: absolute; top: .5rem; right: .5rem; }
.adresse { white-space: pre-line; line-height: 1.5; }

/* ---------- Checkbox-Raster (Projektbeteiligte) ---------- */
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .35rem .8rem; }
.check-grid label { display: flex; align-items: center; gap: .5rem; padding: .3rem .4rem; border-radius: 6px; font-weight: 600; cursor: pointer; }
.check-grid label:hover { background: var(--accent-soft); }
.check-grid label small { color: var(--muted); font-weight: 700; font-size: .7rem; }

/* Grid-Spalten dürfen schrumpfen (sonst schneiden breite Tabellen/Formulare die Detailspalte ab) */
.split > * { min-width: 0; }
/* Zwei Listen übereinander in der linken Spalte (z. B. Kunden + Rechnungen) */
.stapel { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.stapel .card { margin-bottom: 0; }
.list-pane.kompakt .list { max-height: 32vh; }

/* Deaktivierte Buttons sichtbar abgrenzen (auch primary/danger) */
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; filter: none; }
.btn:disabled:hover { background: var(--card); border-color: var(--line); }
.btn.secondary:disabled:hover { background: var(--off-bg); border-color: var(--off-bg); }
/* Dichte Tabelle für viele Spalten (z. B. Arbeitszeiten auf der Rechnung) */
.table.dicht th, .table.dicht td { font-size: .82rem; padding: .4rem .45rem; }
/* Gesperrte Eingabefelder (z. B. gestellte Rechnung) */
input:disabled, select:disabled, textarea:disabled { background: var(--bg); color: var(--ink-2); cursor: not-allowed; }

/* ---------- Detail links / Seitenspalte rechts (Controlling: Rechnungen + Fakturiert pro Kunde) ---------- */
.split.seite { grid-template-columns: 1fr minmax(240px, 320px); }
@media (max-width: 900px) { .split.seite { grid-template-columns: 1fr; } }
.table td.leer { color: var(--bad-fg); font-weight: 700; }
.table td.aktionen { white-space: nowrap; width: 1%; }
.table td.aktionen .icon-btn + .icon-btn { margin-left: .2rem; }
.summen-liste { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; }
.summen-liste li { display: flex; gap: .6rem; align-items: baseline; padding: .35rem 0; border-bottom: 1px solid var(--line); font-size: .86rem; }
.summen-liste li:last-child { border-bottom: 0; }
.summen-liste li span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-weight: 600; }
.summen-liste li span:last-child { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }

/* ---------- Projektzustand: Soll/Ist-Raster, Kennzahlen im Listeneintrag, Soft Facts ---------- */
.list li .kennzahlen { display: grid; grid-template-columns: auto 1fr; gap: .05rem .5rem; margin-top: .25rem; font-size: .74rem; font-weight: 500; color: var(--muted); }
.list li .kennzahlen b { font-weight: 700; color: var(--ink-2); }
.soll-ist { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem 1.6rem; }
.soll-ist h3 { margin: 0 0 .6rem; font-size: .8rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: .5rem; }
.soll-ist h3 .right { margin-left: auto; }
.wert-zeile { display: grid; grid-template-columns: 1fr 8rem; align-items: center; gap: .6rem; padding: .22rem 0; }
.wert-zeile > label, .wert-zeile > span:first-child { font-size: .86rem; font-weight: 600; color: var(--ink-2); }
.wert-zeile input { text-align: right; }
.wert-zeile .wert { padding: .45rem .7rem; border-radius: var(--radius-sm); background: var(--bg); text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.wert-zeile .wert small { font-weight: 600; color: var(--muted); margin-right: .35rem; }
.wert-zeile.invalid input { border-color: var(--bad-fg); }
.fragen { display: flex; flex-direction: column; }
.fragen .frage { display: flex; align-items: center; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.fragen .frage:last-child { border-bottom: 0; }
.fragen .frage span { flex: 1; font-size: .88rem; font-weight: 600; color: var(--ink-2); }
.rating button:hover, .rating button:focus-visible { color: var(--accent-line); }
.rating button:disabled { cursor: default; }
/* Segment-Schalter als Formularfeld (z. B. Abwicklungsart) und breitere Felder */
.form-grid .span-2 { grid-column: span 2; }
@media (max-width: 700px) { .form-grid .span-2 { grid-column: 1 / -1; } }
.segmented button { white-space: nowrap; }
.field .segmented { display: flex; width: 100%; min-height: 2.45rem; }
.field .segmented button { flex: 1; }
.table.dicht th { white-space: nowrap; }
/* Controlling: unter 1500px Tabelle volle Breite, „pro Kunde“ darüber in Spalten */
@media (max-width: 1500px) {
  .split.seite { grid-template-columns: 1fr; }
  .split.seite > :last-child { order: -1; }
  .split.seite .summen-liste { columns: 3 220px; column-gap: 1.6rem; max-height: none; }
  .split.seite .summen-liste li { break-inside: avoid; }
}

/* ---------- Arbeitszeitauswertung: Projekt-Checkliste und Baum-Tabelle ---------- */
.check-liste { list-style: none; margin: 0; padding: 0; max-height: 62vh; overflow-y: auto; }
.check-liste li label { display: flex; align-items: flex-start; gap: .5rem; padding: .32rem .45rem; border-radius: 6px; font-size: .86rem; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.check-liste li label:hover { background: var(--accent-soft); }
.check-liste li label input { margin-top: .15rem; }
.check-liste li.inaktiv label { color: var(--muted); font-weight: 500; }
.list-pane .auswahl-zeile { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .5rem; }
.list-pane .auswahl-zeile .kpi-label { margin-left: auto; }
.table tr.gruppe td { font-weight: 800; color: var(--ink); background: var(--bg); }
.table tr.gruppe td:first-child { display: flex; align-items: center; gap: .35rem; }
.table tr.gruppe .icon-btn { flex: none; }
.table td.einzug { padding-left: 2.6rem; }
.table td.einzug a { color: var(--ink-2); text-decoration: none; }
.table td.einzug a:hover { color: var(--accent); text-decoration: underline; }
.table td.leer-text { color: var(--muted); font-style: italic; }

/* Deaktivierter Primär-Button bleibt beim Überfahren sichtbar (sonst weisse Schrift auf weissem Grund) */
.btn.primary:disabled:hover, .btn.primary[disabled]:hover { background: var(--accent-grad); border-color: transparent; }
/* Zweite Zeile mit Aktionen unter einer Auswahl-Zeile */
.controls.aktionen { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); }

/* Eingeklappte Karte: nur Kopfzeile (z. B. Projekte im Projektzustand) */
.card.eingeklappt .card-head { margin-bottom: 0; }
.card-head h2 .icon-btn { vertical-align: middle; margin-right: .2rem; }

/* Zwei gleich breite Formularspalten (z. B. Rechnungsadresse und Bemerkung) */
.form-grid.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
@media (max-width: 700px) { .form-grid.zwei { grid-template-columns: 1fr; } }

/* Tabellen ohne horizontales Scrollen: Text bricht um, Zahlen und Datum nicht; zweite Zeile in einer Zelle */
.table.umbruch td, .table.umbruch th { white-space: normal; }
.table.umbruch td.num, .table.umbruch th.num, .table.umbruch td:nth-child(2) { white-space: nowrap; }
.table.umbruch td.text { min-width: 14rem; }
.table td .zweite { display: block; margin-top: .15rem; color: var(--muted); font-size: .76rem; font-weight: 600; }

/* Titel breit, daneben ein schmales Feld (z. B. Status der Rechnung) */
.form-grid.titel-zeile { grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem); }
@media (max-width: 700px) { .form-grid.titel-zeile { grid-template-columns: 1fr; } }
.field .status-anzeige { display: flex; align-items: center; gap: .4rem; min-height: 2.5rem; flex-wrap: wrap; }

/* Radio-Buttons wie Checkboxen – sonst erben sie Breite, Rahmen und Innenabstand der Eingabefelder */
input[type="radio"] { width: 1rem; height: 1rem; padding: 0; margin: 0; border: 0; box-shadow: none; accent-color: var(--accent); flex: none; }
.radio-liste { display: flex; flex-direction: column; gap: .7rem; }
.radio-liste label { display: flex; align-items: center; gap: .55rem; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.radio-liste .einzug { margin-left: 1.55rem; }
/* Vier gleich breite Formularspalten (z. B. Zeitraum, Datum und Frist der Rechnung) */
.form-grid.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .form-grid.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.table th .zweite { text-transform: none; letter-spacing: 0; }
.table th .zweite { display: block; margin-top: .1rem; font-size: .68rem; font-weight: 600; color: var(--muted); }