/* =========================================================
   Oynak Hub – Prototyp
   Gestaltung: „Kalk & Bitumen“
   Werkstoffe des Verputzers als Farbwelt: Kalkweiß, Putzgrau,
   Bitumen-Schwarz, Baustellenorange (RAL 2004), Kalkgrün, Ocker.
   Kennzeichen: die Lotlinie – hängt ein Vorgang im Lot, ist er
   im Plan; kippt das Lot, ist er im Verzug.
   ========================================================= */

:root{
  /* Farbwerte */
  --ink:#15191A;
  --ink-2:#22282A;
  --ink-3:#3B4244;
  --muted:#6E7672;
  --muted-2:#8B9490;
  --paper:#F2F2ED;
  --surface:#FFFFFF;
  --surface-2:#FAFAF7;
  --line:#E4E5DE;
  --line-2:#CBCDC4;

  --orange:#DE5217;          /* Baustellenorange – Aktion, Fokus */
  --orange-2:#B93F0F;
  --orange-soft:#FCEAE1;

  --green:#1C6B57;           /* Kalkgrün – erledigt, freigegeben */
  --green-soft:#E2EFEA;

  --amber:#A9740F;           /* Ocker – Beobachtung, Nachfassen */
  --amber-soft:#F8EFD9;

  --blue:#27577F;            /* Stahlblau – Information, Planung */
  --blue-soft:#E6EEF5;

  --red:#B03024;             /* Signalrot – Verzug, Abweichung */
  --red-soft:#FAE6E2;

  --violet:#5B4B8A;          /* Graphitviolett – Einkauf, KI */
  --violet-soft:#ECE8F4;

  /* Typografie */
  --display:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --body:'Public Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;

  /* Maße */
  --r-sm:3px;
  --r:6px;
  --r-lg:10px;
  --pad-card:14px;
  --row-pad:8px;
  --rail-w:250px;
  --shadow-1:0 1px 0 rgba(21,25,26,.04), 0 1px 2px rgba(21,25,26,.06);
  --shadow-2:0 8px 28px -10px rgba(21,25,26,.28), 0 2px 6px rgba(21,25,26,.08);
  --dur:.16s;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--body);
  font-size:14px;
  line-height:1.45;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.compact{--pad-card:10px;--row-pad:5px;font-size:13px}
h1,h2,h3,h4{font-family:var(--display);margin:0;letter-spacing:-.018em}
p{margin:0 0 8px}
a{color:var(--blue);text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ---------- Rahmen ---------- */
.app{display:grid;grid-template-columns:var(--rail-w) 1fr;min-height:100vh}

.rail{
  background:var(--ink);
  color:#D9DCD7;
  display:flex;flex-direction:column;
  padding:16px 12px 12px;
  position:sticky;top:0;height:100vh;
  overflow-y:auto;
}
.brand{display:flex;gap:10px;align-items:center;padding:2px 6px 14px}
.brand-mark{
  width:34px;height:34px;flex:0 0 34px;border-radius:var(--r-sm);
  background:var(--orange);color:#fff;
  font-family:var(--display);font-weight:800;font-size:19px;
  display:grid;place-items:center;
}
.brand-text{display:flex;flex-direction:column;line-height:1.2}
.brand-text b{font-family:var(--display);font-size:15px;color:#fff;letter-spacing:-.01em}
.brand-text i{font-style:normal;font-size:11px;color:var(--muted-2);letter-spacing:.02em}

.rail-section{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:#7C8580;padding:10px 6px 6px;
}
.role-switch{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
.role-btn{
  display:flex;gap:8px;align-items:center;
  background:transparent;border:1px solid transparent;border-radius:var(--r-sm);
  padding:6px 8px;text-align:left;cursor:pointer;color:#C3C9C4;font-size:12.5px;
  transition:background var(--dur),color var(--dur);
}
.role-btn:hover{background:#20262A}
.role-btn[aria-pressed="true"]{background:#252C30;border-color:#39423F;color:#fff}
.role-btn .role-badge{margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--muted-2)}

.nav{display:flex;flex-direction:column;gap:1px;margin-top:10px}
.nav-group{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#69726E;padding:12px 8px 4px;
}
.nav-group:first-child{padding-top:2px}
.nav a{
  display:flex;gap:9px;align-items:center;
  padding:6px 8px;border-radius:var(--r-sm);color:#CBD1CC;font-size:13px;
  border-left:2px solid transparent;transition:background var(--dur),color var(--dur);
}
.nav a:hover{background:#20262A;color:#fff}
.nav a.active{background:#282F33;color:#fff;border-left-color:var(--orange)}
.nav a .n-ico{width:15px;height:15px;flex:0 0 15px;opacity:.85}
.nav a .n-count{
  margin-left:auto;font-family:var(--mono);font-size:10px;
  background:#333B3E;color:#E7EAE6;border-radius:2px;padding:1px 5px;
}
.nav a .n-count.alert{background:var(--orange);color:#fff}
.rail-foot{margin-top:auto;padding:14px 6px 4px;border-top:1px solid #2A3134}
.rail-note{font-size:11.5px;color:#9AA39E;line-height:1.4}
.rail-note b{display:block;color:#E4E7E3;font-family:var(--display);font-size:12px;margin-bottom:3px}
.rail-credit{font-family:var(--mono);font-size:10px;color:#6C7571;margin-top:10px;letter-spacing:.02em}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:16px;
  padding:11px 22px;background:rgba(242,242,237,.93);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
.topbar-title .eyebrow{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.topbar-title h1{font-size:19px;font-weight:700}
.topbar-tools{margin-left:auto;display:flex;align-items:center;gap:7px}
.search{
  position:relative;display:flex;align-items:center;gap:7px;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:5px 9px;min-width:270px;
  transition:border-color var(--dur),box-shadow var(--dur);
}
.search:focus-within{border-color:var(--orange);box-shadow:0 0 0 3px rgba(222,82,23,.12)}
.search svg{width:14px;height:14px;fill:none;stroke:var(--muted);stroke-width:1.6}
.search input{border:0;background:transparent;font:inherit;font-size:13px;width:100%;outline:none}
.hint-key{
  font-family:var(--mono);font-size:10px;color:var(--muted-2);border:1px solid var(--line);
  border-radius:2px;padding:0 4px;background:var(--surface-2);
}
.search-results{
  position:absolute;top:calc(100% + 5px);left:0;right:0;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow-2);
  max-height:340px;overflow-y:auto;z-index:40;padding:5px;
}
.sr-item{display:flex;gap:9px;align-items:flex-start;padding:7px 8px;border-radius:var(--r-sm);cursor:pointer}
.sr-item:hover,.sr-item.on{background:var(--surface-2)}
.sr-item .sr-t{font-family:var(--display);font-weight:600;font-size:12.5px}
.sr-item .sr-s{font-size:11.5px;color:var(--muted)}
.sr-empty{padding:9px;font-size:12.5px;color:var(--muted)}
.view{padding:20px 22px 72px;max-width:1580px;animation:fade var(--dur) ease-out}
@keyframes fade{from{opacity:.4;transform:translateY(3px)}to{opacity:1;transform:none}}

/* ---------- Bausteine ---------- */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line-2);background:var(--surface);
  border-radius:var(--r-sm);padding:6px 11px;cursor:pointer;
  font-size:13px;font-weight:500;white-space:nowrap;
  transition:background var(--dur),border-color var(--dur),color var(--dur);
}
.btn:hover{border-color:var(--ink-3);background:var(--surface-2)}
.btn-primary{background:var(--orange);border-color:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange-2);border-color:var(--orange-2)}
.btn-dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-2);border-color:var(--ink-2)}
.btn-ghost{background:transparent}
.btn-sm{padding:3px 8px;font-size:12px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.on{border-color:var(--ink-3);background:var(--ink);color:#fff}
.dot{width:7px;height:7px;border-radius:50%;background:var(--orange);display:inline-block}
.dot-ki{background:var(--violet)}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-1);
}
.card-head{
  display:flex;align-items:center;gap:10px;padding:11px var(--pad-card);
  border-bottom:1px solid var(--line);flex-wrap:wrap;
}
.card-head h3{font-size:14px;font-weight:700}
.card-head .sub{font-size:12px;color:var(--muted)}
.card-head .right{margin-left:auto;display:flex;gap:6px;align-items:center}
.card-body{padding:var(--pad-card)}
.pad{padding:var(--pad-card)}

.grid{display:grid;gap:14px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-2-1{grid-template-columns:2fr 1fr}
.g-1-2{grid-template-columns:1fr 2fr}
@media (max-width:1360px){.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1180px){.g-3,.g-2-1,.g-1-2{grid-template-columns:1fr}}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .rail{position:relative;height:auto}
  .g-2,.g-4{grid-template-columns:1fr}
  .topbar{flex-wrap:wrap}
  .topbar-tools{width:100%;flex-wrap:wrap}
  .search{min-width:0;flex:1}
}

.tag{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 6px;border-radius:2px;background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink-3);
  white-space:nowrap;
}
.tag-orange{background:var(--orange-soft);border-color:#F0C4AF;color:var(--orange-2)}
.tag-green{background:var(--green-soft);border-color:#B6D7CB;color:var(--green)}
.tag-amber{background:var(--amber-soft);border-color:#E5CE95;color:var(--amber)}
.tag-red{background:var(--red-soft);border-color:#EBBAB3;color:var(--red)}
.tag-blue{background:var(--blue-soft);border-color:#B8CEE0;color:var(--blue)}
.tag-violet{background:var(--violet-soft);border-color:#C6BCE0;color:var(--violet)}

.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:12px}
.right{text-align:right}
.nowrap{white-space:nowrap}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---------- Lotlinie (Signatur) ---------- */
.lot{width:12px;height:26px;position:relative;flex:0 0 12px;display:inline-block}
.lot::before{
  content:"";position:absolute;left:5px;top:0;width:1px;height:22px;
  background:var(--line-2);transform-origin:top center;
}
.lot::after{
  content:"";position:absolute;left:1px;bottom:0;width:9px;height:6px;
  background:var(--ink-3);border-radius:1px;
}
.lot i{
  position:absolute;left:5px;top:1px;width:1px;height:21px;background:var(--ink-3);
  transform-origin:top center;display:block;transition:transform var(--dur);
}
.lot-ok i{background:var(--green)}
.lot-warn i{background:var(--amber);transform:rotate(11deg)}
.lot-bad i{background:var(--red);transform:rotate(20deg)}
.lot-ok::after{background:var(--green)}
.lot-warn::after{background:var(--amber)}
.lot-bad::after{background:var(--red)}

/* ---------- KPI ---------- */
.kpi{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:12px var(--pad-card);position:relative;overflow:hidden;
}
.kpi .k-label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.kpi .k-value{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.025em;margin:4px 0 2px}
.kpi .k-value small{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}
.kpi .k-foot{font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.kpi .k-spark{margin-top:8px;opacity:.9}
.kpi.is-alert{border-left:3px solid var(--red)}
.kpi.is-warn{border-left:3px solid var(--amber)}
.kpi.is-good{border-left:3px solid var(--green)}

/* ---------- Tabellen ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{
  text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:500;padding:7px 10px;border-bottom:1px solid var(--line-2);white-space:nowrap;
  background:var(--surface);
}
.tbl thead.sticky th{position:sticky;top:56px;z-index:5;box-shadow:0 1px 0 var(--line-2)}
.tbl-wrap .tbl thead.sticky th{top:0;z-index:6;box-shadow:0 1px 0 var(--line-2),0 -6px 8px -6px rgba(21,25,26,.18)}
.tbl th.srt{cursor:pointer;user-select:none}
.tbl th.srt:hover{color:var(--ink)}
.tbl th .arw{opacity:0;margin-left:5px;font-size:9px}
.tbl th.on .arw{opacity:1;color:var(--orange)}
.tbl td{padding:var(--row-pad) 10px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tbody tr{transition:background var(--dur),box-shadow var(--dur)}
.tbl tbody tr:hover{background:var(--surface-2);box-shadow:inset 3px 0 0 var(--orange)}
.tbl tbody tr.clickable{cursor:pointer}
.tbl .num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.tbl .pos{font-family:var(--mono);color:var(--muted);font-size:12px}
.tbl .total td{border-top:1px solid var(--line-2);border-bottom:0;font-weight:600;background:var(--surface-2)}
.tbl-wrap{max-height:520px;overflow:auto}

.bar{height:5px;background:var(--line);border-radius:2px;overflow:hidden;min-width:56px}
.bar i{display:block;height:100%;background:var(--ink-3);transition:width .35s ease}
.bar.good i{background:var(--green)}
.bar.warn i{background:var(--amber)}
.bar.bad i{background:var(--red)}

/* ---------- Kanban ---------- */
.board{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 10px;align-items:flex-start}
.col{
  flex:0 0 262px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
  display:flex;flex-direction:column;max-height:calc(100vh - 232px);
  transition:background var(--dur),border-color var(--dur);
}
.col-head{padding:9px 11px;border-bottom:1px solid var(--line)}
.col-head h4{font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:6px}
.col-head .ch-meta{font-size:11px;color:var(--muted);margin-top:2px;display:flex;gap:8px}
.col-body{padding:9px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;min-height:64px}
.col.drop{background:#EDF1EC;border-color:var(--green);border-style:dashed}
.col.drop .col-body{background:transparent}

.pcard{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--line-2);
  border-radius:var(--r-sm);padding:9px 10px;cursor:grab;box-shadow:var(--shadow-1);
  transition:box-shadow var(--dur),transform var(--dur),border-color var(--dur);
}
.pcard:hover{border-color:var(--line-2);box-shadow:var(--shadow-2);transform:translateY(-1px)}
.pcard:active{cursor:grabbing}
.pcard.dragging{opacity:.5;transform:rotate(1.2deg)}
.pcard.late{border-left-color:var(--red)}
.pcard.watch{border-left-color:var(--amber)}
.pcard.ontrack{border-left-color:var(--green)}
.pcard h5{margin:0 0 3px;font-family:var(--display);font-size:13px;font-weight:600}
.pcard .pc-sub{font-size:11.5px;color:var(--muted)}
.pcard .pc-row{display:flex;gap:6px;align-items:center;margin-top:7px;flex-wrap:wrap}
.pcard .pc-age{margin-left:auto;font-family:var(--mono);font-size:10.5px}
.pcard .pc-age.bad{color:var(--red)}
.pcard .pc-age.warn{color:var(--amber)}
.pcard .pc-owner{
  width:20px;height:20px;border-radius:50%;background:var(--ink-2);color:#fff;
  font-size:9.5px;font-family:var(--mono);display:grid;place-items:center;
}
.col-empty{
  border:1px dashed var(--line-2);border-radius:var(--r-sm);padding:12px 10px;text-align:center;
  font-size:11.5px;color:var(--muted);
}

/* ---------- Wochenraster ---------- */
.week{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;min-width:900px}
.week th,.week td{border-bottom:1px solid var(--line);padding:6px}
.week thead th{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--line-2);text-align:center;font-weight:500;
}
.week thead th.crew{text-align:left;width:158px}
.week thead th.today{color:var(--orange);border-bottom-color:var(--orange)}
.week tbody th{
  text-align:left;font-family:var(--display);font-weight:700;font-size:12.5px;
  background:var(--surface-2);position:sticky;left:0;
}
.week tbody th small{display:block;font-family:var(--mono);font-weight:400;font-size:10px;color:var(--muted)}
.week tbody tr:hover td{background:#FBFBF8}
.slot{
  background:var(--blue-soft);border:1px solid #BDD2E3;border-radius:var(--r-sm);
  padding:4px 6px;font-size:11.5px;line-height:1.25;
}
.slot b{display:block;font-size:11.5px}
.slot.warn{background:var(--amber-soft);border-color:#E2CB92}
.slot.bad{background:var(--red-soft);border-color:#E9B6AF}
.slot.good{background:var(--green-soft);border-color:#B2D3C7}
.slot.free{background:repeating-linear-gradient(135deg,#F1F1EC,#F1F1EC 6px,#F7F7F3 6px,#F7F7F3 12px);border-color:var(--line);color:var(--muted)}
.slot .m{font-family:var(--mono);font-size:10px;color:var(--ink-3)}

/* ---------- Prozessband ---------- */
.pipe{display:flex;gap:0;align-items:stretch;overflow-x:auto;padding-bottom:2px}
.pipe .step{
  flex:1 0 auto;min-width:136px;padding:10px 12px 10px 20px;position:relative;
  background:var(--surface);border:1px solid var(--line);border-left:0;
}
.pipe .step:first-child{border-left:1px solid var(--line);border-radius:var(--r) 0 0 var(--r)}
.pipe .step:last-child{border-radius:0 var(--r) var(--r) 0}
.pipe .step::before{
  content:"";position:absolute;left:-6px;top:50%;width:11px;height:11px;background:var(--surface);
  border:1px solid var(--line-2);transform:translateY(-50%) rotate(45deg);
}
.pipe .step:first-child::before{display:none}
.pipe .step .s-no{font-family:var(--mono);font-size:10px;color:var(--muted)}
.pipe .step .s-t{font-family:var(--display);font-weight:700;font-size:12.5px;margin:2px 0}
.pipe .step .s-n{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.pipe .step.ok{border-top:2px solid var(--green)}
.pipe .step.warn{border-top:2px solid var(--amber)}
.pipe .step.bad{border-top:2px solid var(--red);background:var(--red-soft)}

/* ---------- Detail-Drawer ---------- */
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(580px,100vw);background:var(--surface);
  border-left:1px solid var(--line-2);box-shadow:var(--shadow-2);z-index:60;
  display:flex;flex-direction:column;animation:slide var(--dur) ease-out;
}
@keyframes slide{from{transform:translateX(26px);opacity:.4}to{transform:none;opacity:1}}
.drawer-head{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.drawer-head h2{font-size:16px}
.drawer-head .sub{font-size:12px;color:var(--muted)}
.drawer-head .x{margin-left:auto;background:transparent;border:0;font-size:20px;line-height:1;cursor:pointer;color:var(--muted)}
.drawer-head .x:hover{color:var(--ink)}
.drawer-body{padding:16px;overflow-y:auto}
.drawer-foot{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;background:var(--surface-2);flex-wrap:wrap}

.modal{position:fixed;inset:0;background:rgba(21,25,26,.46);z-index:70;display:grid;place-items:center;padding:24px;animation:fade var(--dur) ease-out}
.modal-box{
  background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-2);
  width:min(780px,100%);max-height:86vh;display:flex;flex-direction:column;overflow:hidden;
}
.modal-box header{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line)}
.modal-box header h2{font-size:15px}
.modal-box header .x{margin-left:auto;background:transparent;border:0;font-size:20px;line-height:1;cursor:pointer;color:var(--muted)}
.modal-box header .x:hover{color:var(--ink)}
.modal-box .m-body{padding:16px;overflow-y:auto}
.modal-box footer{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;background:var(--surface-2)}

/* ---------- Formularelemente ---------- */
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.field label{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  font:inherit;font-size:13px;padding:6px 9px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--orange);outline:none;box-shadow:0 0 0 3px rgba(222,82,23,.12)}
.field.bad input,.field.bad select{border-color:var(--red);background:var(--red-soft)}
.field .err{font-size:11.5px;color:var(--red)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chk{display:flex;gap:8px;align-items:flex-start;padding:5px 0}
.chk input{margin-top:2px}

.kv{display:grid;grid-template-columns:140px 1fr;gap:5px 12px;font-size:13px}
.kv dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.kv dd{margin:0}

/* ---------- Notizen ---------- */
.note{
  border-left:3px solid var(--line-2);background:var(--surface-2);padding:9px 12px;
  border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:12.5px;
}
.note.warn{border-left-color:var(--amber);background:var(--amber-soft)}
.note.bad{border-left-color:var(--red);background:var(--red-soft)}
.note.good{border-left-color:var(--green);background:var(--green-soft)}
.note.ki{border-left-color:var(--violet);background:var(--violet-soft)}
.note b{font-family:var(--display)}

.alert-item{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border-bottom:1px solid var(--line);cursor:pointer;transition:background var(--dur)}
.alert-item:last-child{border-bottom:0}
.alert-item:hover{background:var(--surface-2);box-shadow:inset 3px 0 0 var(--orange)}
.alert-item .ai-t{font-family:var(--display);font-weight:600;font-size:13px}
.alert-item .ai-s{font-size:11.5px;color:var(--muted)}

/* ---------- Assistent ---------- */
.assist-q{
  display:block;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-sm);padding:8px 10px;margin-bottom:6px;cursor:pointer;font-size:12.5px;
  transition:border-color var(--dur),background var(--dur);
}
.assist-q:hover{border-color:var(--orange);background:var(--orange-soft)}
.chat{display:flex;flex-direction:column;gap:10px}
.msg{max-width:90%;padding:9px 12px;border-radius:var(--r);font-size:13px}
.msg.user{align-self:flex-end;background:var(--ink);color:#fff}
.msg.bot{align-self:flex-start;background:var(--violet-soft);border:1px solid #C6BCE0}
.msg.bot ul{margin:6px 0 0;padding-left:18px}
.ask-row{display:flex;gap:8px;margin-top:10px}
.ask-row input{flex:1;font:inherit;font-size:13px;padding:7px 10px;border:1px solid var(--line-2);border-radius:var(--r-sm)}
.ask-row input:focus{border-color:var(--orange);outline:none}

/* ---------- Toasts ---------- */
.toasts{position:fixed;bottom:18px;right:18px;z-index:95;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.toast{
  background:var(--ink);color:#fff;border-radius:var(--r-sm);padding:9px 13px;font-size:13px;
  box-shadow:var(--shadow-2);display:flex;gap:9px;align-items:center;max-width:420px;
  animation:fade var(--dur) ease-out;
}
.toast .t-tag{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#9FA8A3;white-space:nowrap}

/* ---------- Diagramme ---------- */
.spark{display:block;width:100%;height:52px}
.spark.mini{height:26px}
.spark path.line{fill:none;stroke:var(--violet);stroke-width:1.6}
.spark path.area{fill:var(--violet-soft);stroke:none}
.spark text{font-family:var(--mono);font-size:8px;fill:var(--muted)}

.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);align-items:center}
.legend span{display:inline-flex;gap:5px;align-items:center}
.legend i{width:9px;height:9px;border-radius:2px;display:inline-block}

.section-title{display:flex;align-items:baseline;gap:10px;margin:22px 0 10px;flex-wrap:wrap}
.section-title h2{font-size:16px}
.section-title .sub{font-size:12.5px;color:var(--muted)}

.stack{display:flex;flex-direction:column;gap:10px}
.rowflex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spacer{margin-left:auto}
hr.sep{border:0;border-top:1px solid var(--line);margin:14px 0}
.toolbar{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.toolbar .filter-input{
  font:inherit;font-size:12.5px;padding:5px 9px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--surface);min-width:190px;
}
.toolbar .filter-input:focus{border-color:var(--orange);outline:none}

/* =========================================================
   Präsentationsmodus
   ========================================================= */
.tour-scrim{position:fixed;inset:0;background:rgba(21,25,26,.28);z-index:80;animation:fade var(--dur) ease-out}
.tour{
  position:fixed;left:50%;transform:translateX(-50%);bottom:20px;z-index:90;
  width:min(820px,calc(100vw - 40px));background:var(--ink);color:#E8EAE6;
  border-radius:var(--r-lg);box-shadow:var(--shadow-2);padding:16px 18px 14px;
  animation:rise .2s ease-out;
}
@keyframes rise{from{transform:translate(-50%,14px);opacity:.4}to{transform:translate(-50%,0);opacity:1}}
.tour-top{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.tour-step{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.tour h3{font-family:var(--display);font-size:17px;color:#fff;margin:0}
.tour p{margin:0;font-size:13.5px;color:#C6CCC7;max-width:70ch}
.tour .tour-note{
  margin-top:10px;border-left:2px solid var(--orange);padding:2px 0 2px 10px;
  font-size:12.5px;color:#AEB6B0;
}
.tour .tour-note b{color:#E8EAE6;font-family:var(--display)}
.tour-bottom{display:flex;align-items:center;gap:8px;margin-top:12px}
.tour-dots{display:flex;gap:5px;margin-right:auto}
.tour-dots i{width:6px;height:6px;border-radius:50%;background:#454D4F;display:block;cursor:pointer;transition:background var(--dur),transform var(--dur)}
.tour-dots i.on{background:var(--orange);transform:scale(1.35)}
.tour .btn{background:transparent;border-color:#454D4F;color:#E8EAE6}
.tour .btn:hover{background:#252C30;border-color:#5A6365}
.tour .btn-primary{background:var(--orange);border-color:var(--orange);color:#fff}
.tour .btn-primary:hover{background:var(--orange-2);border-color:var(--orange-2)}
.tour-hint{font-family:var(--mono);font-size:10px;color:#7C8580}

.tour-target{
  position:relative;z-index:85;
  box-shadow:0 0 0 3px var(--orange), 0 0 0 12px rgba(222,82,23,.16), var(--shadow-2)!important;
  border-radius:var(--r-sm);transition:box-shadow var(--dur);
}
body.tour-on{overflow:hidden}
body.tour-on .view{padding-bottom:300px}
body.tour-on .toasts{bottom:auto;top:74px}

/* Kopfzeile im Präsentationsmodus ruhig stellen */
body.tour-on .topbar-tools .btn{opacity:.35;pointer-events:none}
body.tour-on .topbar-tools #btnTour{opacity:1;pointer-events:auto}
/* =========================================================
   Ergänzungen für den Dauerbetrieb als Website
   ========================================================= */

/* Fingergeräte: Karten ohne Zieh-Geste weiterschieben */
.pc-move{
  display:none;align-items:center;justify-content:center;
  width:22px;height:22px;padding:0;border:1px solid var(--line-2);border-radius:3px;
  background:var(--surface);color:var(--ink-3);font-size:13px;line-height:1;cursor:pointer;
}
.pc-move:hover{border-color:var(--orange);color:var(--orange)}
@media (hover: none){
  .pc-move{display:inline-flex}
  .pcard{cursor:default}
}

/* Sauberer Stand auf kleinen Bildschirmen */
@media (max-width: 640px){
  .topbar{padding:10px 14px}
  .view{padding:14px 14px 56px}
  .col{flex:0 0 82vw}
  .kpi .k-value{font-size:23px}
  .tour{bottom:10px;padding:13px 14px 12px}
  .tour p{font-size:13px}
  .tour-hint{display:none}
}

/* Drucken: Kennzahlen und Tabellen ohne Bedienoberfläche */
@media print{
  .rail,.topbar-tools,.tour,.tour-scrim,.toasts,.drawer,.modal,.search,.toolbar,.pc-move{display:none!important}
  .app{display:block}
  .view{padding:0;max-width:none;animation:none}
  body{background:#fff;font-size:11px}
  .card,.kpi{break-inside:avoid;box-shadow:none}
  .tbl-wrap{max-height:none;overflow:visible}
  .board{display:block}
  .col{max-height:none;break-inside:avoid;flex:none;width:100%;margin-bottom:8px}
  .col-body{overflow:visible}
  .bar,.lot{print-color-adjust:exact;-webkit-print-color-adjust:exact}
}
/* =========================================================
   Fehlerbehebung: Elemente mit dem Attribut „hidden“ müssen
   auch dann ausgeblendet bleiben, wenn ihre Klasse ein
   display festlegt. Vorher lag der Dialoghintergrund dauerhaft
   über der Seite und der Detailbereich stand offen am Rand.
   ========================================================= */
[hidden]{display:none !important}
/* =========================================================
   Rollenauswahl als Dropdown · Menüpunkte in Weiß
   ========================================================= */

.role-switch{margin-bottom:8px}
.role-select{position:relative;display:block}
.role-select select{
  width:100%;appearance:none;-webkit-appearance:none;
  background:#20262A;color:#FFFFFF;
  border:1px solid #3C4548;border-radius:var(--r-sm);
  padding:8px 30px 8px 10px;font:inherit;font-size:13px;font-weight:500;
  cursor:pointer;transition:border-color var(--dur),background var(--dur);
}
.role-select select:hover{background:#242B2F;border-color:#5A6365}
.role-select select:focus-visible{outline:2px solid var(--orange);outline-offset:1px}
.role-select select option{background:#15191A;color:#FFFFFF}
.role-arrow{
  position:absolute;right:9px;top:50%;transform:translateY(-50%);
  width:12px;height:12px;fill:none;stroke:#A8B1AC;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;pointer-events:none;
}
.role-hint{font-size:11px;color:#9AA39E;margin-top:5px;line-height:1.35}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Menüpunkte heller und besser lesbar */
.nav a{color:#FFFFFF;font-size:13px;font-weight:500}
.nav a:hover{background:#232A2E;color:#FFFFFF}
.nav a.active{background:#2C3438;color:#FFFFFF;border-left-color:var(--orange)}
.nav a .n-ico{opacity:1}
.nav a .n-count{background:#3B4448;color:#F2F4F1}
.nav a .n-count.alert{background:var(--orange);color:#FFFFFF}
.nav-group{color:#8E9793}
.rail-section{color:#8E9793}
.rail-note{color:#B9C1BB}
.rail-note b{color:#FFFFFF}
.rail-credit{color:#8E9793}
/* Namenszeile unter dem Rollen-Dropdown */
.role-hint b{color:#FFFFFF;font-family:var(--display);font-weight:600;letter-spacing:0}