/* ============================================================
   DESIGN TOKENS
   Bauakte / Laufzettel: kühles Papier, Tiefsee-Petrol als
   Prozessfarbe, Ocker als Budget-Signal.
   ============================================================ */
:root{
  --ink:#12161C;
  --ink-2:#1B222B;
  --paper:#EBEDF0;
  --surface:#FFFFFF;
  --surface-2:#F6F7F9;
  --line:#D7DBE1;
  --line-soft:#E7EAEF;
  --muted:#5C6572;
  --muted-2:#868E9B;

  --petrol:#0E5450;
  --petrol-soft:#E0EDEB;
  --petrol-line:#B9D5D2;

  --ochre:#A96A10;
  --ochre-soft:#FAF0DE;
  --ochre-line:#EBD6AC;

  --red:#96262B;
  --red-soft:#FBE9E9;
  --green:#2C6A45;
  --green-soft:#E6F1EA;
  --blue:#1D4E86;
  --blue-soft:#E7EEF7;

  --r:3px;
  --r-lg:5px;
  --shadow:0 1px 2px rgba(18,22,28,.06), 0 8px 24px -12px rgba(18,22,28,.18);
  --sidebar-w:236px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--petrol)}
button{font:inherit;color:inherit}

/* --- Utility type ------------------------------------------------- */
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted-2);
}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.num{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
h1,h2,h3,h4{margin:0; letter-spacing:-.015em; font-weight:600}
h1{font-size:22px}
h2{font-size:16px}
h3{font-size:14px}
.dim{color:var(--muted)}
.small{font-size:12.5px}
.tiny{font-size:11.5px}

/* ============================================================
   APP SHELL
   ============================================================ */
.app{display:flex; min-height:100vh}

/* --- Sidebar ------------------------------------------------------- */
.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:var(--ink); color:#C8CFD9;
  position:fixed; inset:0 auto 0 0; z-index:40;
  display:flex; flex-direction:column; overflow-y:auto;
}
.brand{padding:18px 18px 16px; border-bottom:1px solid rgba(255,255,255,.08)}
.brand .mark{
  display:flex; align-items:center; gap:9px; color:#fff;
  font-weight:600; font-size:14px; letter-spacing:-.01em;
}
.brand .mark span.dot{
  width:20px;height:20px;border-radius:2px;background:var(--petrol);
  display:grid;place-items:center;font-family:"IBM Plex Mono",monospace;
  font-size:11px;color:#fff;flex:0 0 20px;
}
.brand .client{margin-top:9px; font-size:11.5px; color:#7C8797; line-height:1.35}
.brand .client strong{display:block; color:#B9C2CE; font-weight:500}

.nav{padding:12px 10px 24px; flex:1}
.nav-group{margin-bottom:16px}
.nav-group > .eyebrow{padding:0 8px 6px; display:block; color:#66717F}
.nav-item{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:6px 8px; margin-bottom:1px; border:0; background:none;
  border-radius:var(--r); cursor:pointer; text-align:left;
  color:#C0C8D2; font-size:13px;
}
.nav-item:hover{background:rgba(255,255,255,.06); color:#fff}
.nav-item.is-active{background:var(--petrol); color:#fff}
.nav-item .ic{
  width:15px; flex:0 0 15px; opacity:.85; font-family:"IBM Plex Mono",monospace;
  font-size:11px; text-align:center;
}
.nav-item .badge{
  margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:10.5px;
  background:rgba(255,255,255,.12); padding:1px 5px; border-radius:8px;
}
.nav-item.is-active .badge{background:rgba(255,255,255,.22)}
.nav-item .badge.alert{background:var(--ochre); color:#1B1200}

/* --- Main ---------------------------------------------------------- */
.main{margin-left:var(--sidebar-w); flex:1; min-width:0; display:flex; flex-direction:column}

.topbar{
  position:sticky; top:0; z-index:30;
  background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:14px; padding:0 20px; height:52px;
}
.ctx{display:flex; align-items:center; gap:8px}
.ctx label{font-size:11px; color:var(--muted-2); font-family:"IBM Plex Mono",monospace; letter-spacing:.08em; text-transform:uppercase}
select.ctx-select{
  appearance:none; border:1px solid var(--line); background:var(--surface);
  border-radius:var(--r); padding:5px 26px 5px 9px; font-size:13px; max-width:280px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235C6572' fill='none' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; cursor:pointer;
}
select.ctx-select:focus-visible{outline:2px solid var(--petrol); outline-offset:1px}
.topbar .spacer{margin-left:auto}
.role-chip{
  display:flex; align-items:center; gap:7px; border:1px solid var(--line);
  border-radius:var(--r); padding:4px 8px 4px 6px; background:var(--surface-2);
}
.role-chip .av{
  width:22px;height:22px;border-radius:50%;background:var(--ink-2);color:#fff;
  display:grid;place-items:center;font-size:10px;font-family:"IBM Plex Mono",monospace;
}
.btn{
  border:1px solid var(--line); background:var(--surface); border-radius:var(--r);
  padding:5px 11px; font-size:13px; cursor:pointer; display:inline-flex;
  align-items:center; gap:6px; white-space:nowrap;
}
.btn:hover{background:var(--surface-2); border-color:#C3C9D2}
.btn:focus-visible{outline:2px solid var(--petrol); outline-offset:1px}
.btn.danger{border-color:#E4B8B8; color:var(--red); background:var(--surface)}
.btn.danger:hover{background:var(--red-soft)}
.btn.tiny{padding:3px 8px; font-size:11px}

.btn.primary{background:var(--petrol); border-color:var(--petrol); color:#fff}
.btn.primary:hover{background:#0B4643}
.btn.ghost{border-color:transparent; background:none}
.btn.ghost:hover{background:var(--surface-2)}
.btn.sm{padding:3px 8px; font-size:12px}
.btn[disabled]{opacity:.42; cursor:not-allowed}
.btn .k{font-family:"IBM Plex Mono",monospace; font-size:11px; opacity:.6}

.conn{display:inline-flex; align-items:center; gap:6px; font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:10.5px; letter-spacing:.06em; color:var(--muted-2); text-transform:uppercase}
.conn i{width:7px;height:7px;border-radius:50%; background:var(--muted-2); flex:0 0 7px}
.conn.is-online i{background:var(--green)}
.conn.is-online{color:var(--green)}
.conn.is-offline i{background:var(--ochre)}
.upload-bar{height:3px;background:var(--line-soft);border-radius:2px;margin-top:4px;overflow:hidden}
.upload-bar > i{display:block;height:100%;background:var(--petrol);width:0;transition:width .15s linear}

.lang-switch{display:inline-flex; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface-2)}
.lang-btn{
  border:0; background:none; padding:4px 9px; cursor:pointer;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.06em;
  color:var(--muted); border-right:1px solid var(--line);
}
.lang-btn:last-child{border-right:0}
.lang-btn:hover{background:var(--surface); color:var(--ink)}
.lang-btn.is-active{background:var(--petrol); color:#fff}
.lang-btn:focus-visible{outline:2px solid var(--petrol); outline-offset:-2px}

.jf-btn{position:relative}
.jf-btn .live{
  width:6px;height:6px;border-radius:50%;background:var(--red);
  animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

/* --- View container ------------------------------------------------ */
.view{display:none; padding:20px 20px 64px}
.view.is-active{display:block}
.view-head{display:flex; align-items:flex-start; gap:16px; margin-bottom:16px; flex-wrap:wrap}
.view-head .actions{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
.view-head p.lede{margin:4px 0 0; color:var(--muted); font-size:13px; max-width:70ch}

/* --- Card ---------------------------------------------------------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg)}
.card + .card{margin-top:14px}
.card-head{
  display:flex; align-items:center; gap:10px; padding:11px 14px;
  border-bottom:1px solid var(--line-soft);
}
.card-head .actions{margin-left:auto; display:flex; gap:6px}
.card-body{padding:14px}
.card-body.tight{padding:0}
.grid{display:grid; gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.g-1-2{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)} .g3,.g-2-1,.g-1-2{grid-template-columns:1fr}}
@media (max-width:720px){.g2,.g4{grid-template-columns:1fr}}

/* --- KPI ----------------------------------------------------------- */
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:12px 14px}
.kpi .label{display:block; margin-bottom:7px}
.kpi .val{font-family:"IBM Plex Mono",monospace; font-size:22px; font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.kpi .sub{font-size:11.5px; color:var(--muted); margin-top:3px}
.kpi.accent{border-left:3px solid var(--petrol)}
.kpi.warn{border-left:3px solid var(--ochre)}
.kpi.danger{border-left:3px solid var(--red)}

/* --- Tabellen ------------------------------------------------------ */
table.tbl{width:100%; border-collapse:collapse; font-size:13px}
table.tbl th{
  text-align:left; font-family:"IBM Plex Mono",monospace; font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2);
  font-weight:500; padding:8px 12px; border-bottom:1px solid var(--line);
  background:var(--surface-2); white-space:nowrap;
}
table.tbl td{padding:9px 12px; border-bottom:1px solid var(--line-soft); vertical-align:top}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl tbody tr:hover{background:#FBFCFD}
table.tbl td.r, table.tbl th.r{text-align:right}
table.tbl td.num{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; white-space:nowrap}
.row-link{color:var(--ink); text-decoration:none; font-weight:500; border-bottom:1px solid var(--line)}
.row-link:hover{border-color:var(--petrol); color:var(--petrol)}
.id-tag{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--muted)}

/* --- Status-Pills -------------------------------------------------- */
.pill{
  display:inline-flex; align-items:center; gap:5px; padding:2px 7px;
  border-radius:2px; font-size:11.5px; font-weight:500; white-space:nowrap;
  border:1px solid transparent;
}
.pill::before{content:""; width:5px;height:5px;border-radius:50%; background:currentColor}
.pill.neutral{background:var(--surface-2); color:var(--muted); border-color:var(--line)}
.pill.info{background:var(--blue-soft); color:var(--blue); border-color:#C9DCF0}
.pill.ok{background:var(--green-soft); color:var(--green); border-color:#C4DECF}
.pill.warn{background:var(--ochre-soft); color:var(--ochre); border-color:var(--ochre-line)}
.pill.danger{background:var(--red-soft); color:var(--red); border-color:#EFCBCB}
.pill.petrol{background:var(--petrol-soft); color:var(--petrol); border-color:var(--petrol-line)}
.pill.plain::before{display:none}

/* --- Fortschrittsbalken -------------------------------------------- */
.bar{height:5px; background:var(--line-soft); border-radius:2px; overflow:hidden; min-width:70px}
.bar > i{display:block; height:100%; background:var(--petrol)}
.bar > i.warn{background:var(--ochre)}
.bar > i.danger{background:var(--red)}

/* ============================================================
   SIGNATURE: RECOM-LAUFZETTEL
   ============================================================ */
.laufzettel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:0; overflow:hidden;
}
.lz-head{
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  border-bottom:1px solid var(--line-soft); background:var(--surface-2);
}
.lz-rail{display:flex; overflow-x:auto}
.lz-step{
  flex:1 1 0; min-width:118px; border:0; border-right:1px solid var(--line-soft);
  background:none; padding:11px 12px 12px; cursor:pointer; text-align:left;
  position:relative; display:block;
}
.lz-step:last-child{border-right:0}
.lz-step:hover{background:#FBFCFD}
.lz-step:focus-visible{outline:2px solid var(--petrol); outline-offset:-2px}
.lz-step .n{
  font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:600;
  width:20px;height:20px;border-radius:2px; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--muted-2); background:var(--surface);
}
.lz-step .t{display:block; font-size:12px; font-weight:500; margin-top:7px; line-height:1.3}
.lz-step .meta{display:block; margin-top:5px; font-family:"IBM Plex Mono",monospace; font-size:10px; color:var(--muted-2)}
.lz-step::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:transparent}
.lz-step.done .n{background:var(--petrol); border-color:var(--petrol); color:#fff}
.lz-step.done .t{color:var(--ink)}
.lz-step.current{background:var(--petrol-soft)}
.lz-step.current .n{background:var(--surface); border-color:var(--petrol); color:var(--petrol); box-shadow:0 0 0 3px var(--petrol-soft)}
.lz-step.current::after{background:var(--petrol)}
.lz-step.open .t{color:var(--muted-2)}
.lz-step.locked{background:repeating-linear-gradient(135deg,transparent,transparent 6px,#F4F5F7 6px,#F4F5F7 12px)}
.lz-step .lock{position:absolute; top:10px; right:10px; font-size:11px; color:var(--muted-2)}
.lz-step.is-selected{box-shadow:inset 0 0 0 2px var(--ink)}

/* --- Schrittdetail -------------------------------------------------- */
.step-panel{display:none}
.step-panel.is-active{display:block}
.field{margin-bottom:12px}
.field > label{display:block; margin-bottom:4px; font-size:12px; font-weight:500; color:var(--muted)}
.field input[type=text], .field input[type=date], .field input[type=number], .field select, .field textarea{
  width:100%; border:1px solid var(--line); border-radius:var(--r); padding:6px 9px;
  font:inherit; font-size:13px; background:var(--surface);
}
.field textarea{min-height:78px; resize:vertical}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--petrol); outline-offset:-1px; border-color:var(--petrol)}
.field .hint{font-size:11.5px; color:var(--muted-2); margin-top:3px}
fieldset.ro{border:0;padding:0;margin:0}
fieldset.ro[disabled] .field{opacity:.6}

.readonly-note{
  display:flex; gap:8px; align-items:center; padding:7px 11px; font-size:12.5px;
  background:var(--ochre-soft); border:1px solid var(--ochre-line);
  border-radius:var(--r); color:#6E4508; margin-bottom:12px;
}

/* --- Kommentare ----------------------------------------------------- */
.comments{border-top:1px solid var(--line-soft); background:var(--surface-2)}
.comments-head{display:flex; align-items:center; gap:8px; padding:9px 14px}
.comment-list{padding:0 14px; margin:0; list-style:none}
.comment{display:flex; gap:9px; padding:9px 0; border-top:1px solid var(--line-soft)}
.comment .av{
  width:24px;height:24px;flex:0 0 24px;border-radius:50%;background:var(--ink-2);color:#fff;
  display:grid;place-items:center;font-size:9.5px;font-family:"IBM Plex Mono",monospace;
}
.comment .body{min-width:0}
.comment .who{font-size:12px; font-weight:600}
.comment .when{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--muted-2); margin-left:6px}
.comment .txt{font-size:13px; margin-top:2px}
.comment .tools{margin-top:4px; display:flex; gap:6px}
.comment.in-jf{border-left:2px solid var(--petrol); padding-left:9px; margin-left:-11px}
.comment-form,
.comment-form-look{display:flex; gap:8px; padding:11px 14px; align-items:flex-start}
.comment-form textarea{
  flex:1; min-height:34px; border:1px solid var(--line); border-radius:var(--r);
  padding:7px 9px; font:inherit; font-size:13px; resize:vertical; background:var(--surface);
}
.comment-form textarea:focus{outline:2px solid var(--petrol); outline-offset:-1px}
.cf-actions{display:flex; flex-direction:column; gap:6px}

/* --- Budgetblock ---------------------------------------------------- */
.budget-block{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.bb-row{
  display:grid; grid-template-columns:1fr 132px; align-items:center;
  padding:8px 13px; border-bottom:1px solid var(--line-soft); font-size:13px;
}
.bb-row:last-child{border-bottom:0}
.bb-row.head{background:var(--ink); color:#fff; font-family:"IBM Plex Mono",monospace;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase}
.bb-row.sub{background:var(--surface-2)}
.bb-row .v{text-align:right; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-weight:500}
.bb-row .scope{font-family:"IBM Plex Mono",monospace; font-size:10px; color:var(--muted-2); display:block}
.bb-row.total{background:var(--petrol-soft); font-weight:600}
.bb-row.negative .v{color:var(--red)}

/* --- Drawer Jour Fixe ------------------------------------------------ */
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:394px; max-width:92vw;
  background:var(--surface); border-left:1px solid var(--line); z-index:60;
  transform:translateX(100%); transition:transform .22s ease; display:flex; flex-direction:column;
  box-shadow:-14px 0 40px -20px rgba(18,22,28,.4);
}
.drawer.is-open{transform:translateX(0)}
.drawer-head{padding:12px 14px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:9px}
.drawer-body{flex:1; overflow-y:auto; padding:12px 14px}
.drawer-foot{border-top:1px solid var(--line); padding:11px 14px; display:flex; gap:8px}
.scrim{position:fixed; inset:0; background:rgba(18,22,28,.28); z-index:55; display:none}
.scrim.is-open{display:block}
.jf-entry{border-left:2px solid var(--line); padding:0 0 12px 11px; position:relative}
.jf-entry::before{content:""; position:absolute; left:-4px; top:5px; width:6px;height:6px;border-radius:50%; background:var(--petrol)}
.jf-entry .h{display:flex; gap:7px; align-items:baseline; flex-wrap:wrap}
.jf-entry .t{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--muted-2)}
.jf-entry .src{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--petrol)}
.jf-entry .txt{font-size:13px; margin-top:3px}
.jf-entry.type-beschluss::before{background:var(--green)}
.jf-entry.type-aufgabe::before{background:var(--ochre)}

/* --- Timeline -------------------------------------------------------- */
.timeline{list-style:none; margin:0; padding:0}
.timeline li{position:relative; padding:0 0 13px 18px; border-left:1px solid var(--line)}
.timeline li:last-child{border-left-color:transparent; padding-bottom:0}
.timeline li::before{content:""; position:absolute; left:-4px; top:4px; width:7px;height:7px;border-radius:50%; background:var(--petrol); border:1px solid var(--surface)}
.timeline .when{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--muted-2)}
.timeline .what{font-size:13px}

/* --- Checkliste / KYC ------------------------------------------------- */
.check-list{list-style:none; margin:0; padding:0}
.check-list li{display:flex; gap:9px; align-items:flex-start; padding:7px 0; border-bottom:1px solid var(--line-soft); font-size:13px}
.check-list li:last-child{border-bottom:0}
.check-list .st{flex:0 0 16px; text-align:center; font-family:"IBM Plex Mono",monospace; font-size:12px}
.check-list .st.ok{color:var(--green)}
.check-list .st.no{color:var(--red)}
.check-list .st.open{color:var(--muted-2)}
.check-list .meta{margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--muted-2); white-space:nowrap}

/* --- Tabs -------------------------------------------------------------- */
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:14px; overflow-x:auto}
.tab{
  border:0; background:none; padding:7px 12px; font-size:13px; cursor:pointer;
  border-bottom:2px solid transparent; color:var(--muted); white-space:nowrap;
}
.tab:hover{color:var(--ink)}
.tab.is-active{color:var(--ink); border-bottom-color:var(--petrol); font-weight:500}
.tabpane{display:none}
.tabpane.is-active{display:block}

/* --- Diverses ------------------------------------------------------------ */
.kv{display:grid; grid-template-columns:132px 1fr; gap:5px 12px; font-size:13px}
.kv dt{color:var(--muted); font-size:12px}
.kv dd{margin:0}
.empty{padding:26px 14px; text-align:center; color:var(--muted)}
.empty strong{display:block; color:var(--ink); margin-bottom:3px}
.split{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.doc-chip{
  display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line);
  border-radius:var(--r); padding:4px 8px; font-size:12px; background:var(--surface-2);
}
.doc-chip .ext{font-family:"IBM Plex Mono",monospace; font-size:10px; color:var(--muted-2)}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--muted)}
.legend i{display:inline-block; width:9px;height:9px;border-radius:2px; margin-right:5px; vertical-align:-1px}

/* --- Freigabeblatt (Druck) ------------------------------------------------ */
.sheet{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:34px 38px; max-width:880px; margin:0 auto; box-shadow:var(--shadow);
}
.sheet-head{display:flex; justify-content:space-between; gap:20px; border-bottom:2px solid var(--ink); padding-bottom:12px; margin-bottom:18px}
.sheet h2.doc-title{font-size:19px}
.sheet section{margin-bottom:20px}
.sheet section > h3{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line);
  padding-bottom:5px; margin-bottom:9px; font-weight:500;
}
.sign-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:26px}
.sign-box{border-top:1px solid var(--ink); padding-top:6px; font-size:11.5px; color:var(--muted)}
.sign-box strong{display:block; color:var(--ink); font-size:12.5px; font-weight:600}
.sign-line{height:44px; border-bottom:1px dotted var(--line); margin-bottom:5px}
.decision{display:flex; gap:16px; flex-wrap:wrap}
.decision label{display:flex; gap:7px; align-items:center; font-size:13px; border:1px solid var(--line); padding:7px 12px; border-radius:var(--r)}
@media print{
  .sidebar,.topbar,.drawer,.scrim,.no-print{display:none !important}
  .main{margin-left:0}
  .view{padding:0}
  .sheet{border:0; box-shadow:none; max-width:none; padding:0}
  body{background:#fff}
}

/* --- Upload / Dropzone ------------------------------------------------------ */
.dz{
  border:1px dashed var(--line); border-radius:var(--r); padding:16px 14px;
  text-align:center; background:var(--surface-2); cursor:pointer;
}
.dz:hover{border-color:var(--petrol); background:var(--petrol-soft)}
.dz.is-over{border-color:var(--petrol); background:var(--petrol-soft)}
.dz strong{display:block; font-size:13px; margin-bottom:2px}
.dz .rule{font-size:11.5px; color:var(--muted-2); font-family:"IBM Plex Mono",monospace}
.file-list{list-style:none; margin:9px 0 0; padding:0}
.file-list li{display:flex; align-items:center; gap:9px; padding:6px 0; border-bottom:1px solid var(--line-soft); font-size:12.5px}
.file-list li:last-child{border-bottom:0}
.file-list .ext-badge{
  font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.06em;
  background:var(--ink); color:#fff; padding:2px 5px; border-radius:2px; flex:0 0 auto;
}
.file-list .fname{font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.file-list .fmeta{margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--muted-2); white-space:nowrap}
.file-list .err{color:var(--red)}

/* --- Übergabe / Zuweisung ---------------------------------------------------- */
.handover{border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.handover-row{display:flex; gap:9px; padding:9px 11px; border-bottom:1px solid var(--line-soft); font-size:12.5px; align-items:flex-start}
.handover-row:last-child{border-bottom:0}
.handover-row .dir{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; padding:1px 5px; border-radius:2px; flex:0 0 auto;
}
.handover-row .dir.fwd{background:var(--petrol-soft); color:var(--petrol)}
.handover-row .dir.back{background:var(--red-soft); color:var(--red)}
.handover-row .when{margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--muted-2); white-space:nowrap}

/* --- Rechte-Matrix ---------------------------------------------------------- */
table.matrix td.c{text-align:center; font-family:"IBM Plex Mono",monospace; font-size:11.5px}
table.matrix th.rot{writing-mode:vertical-rl; transform:rotate(180deg); height:118px; vertical-align:bottom; padding:8px 4px}
.rgt{display:inline-block; width:19px;height:19px;line-height:18px; border-radius:2px; font-size:10.5px; font-weight:600}
.rgt.n{background:var(--surface-2); color:#C2C8D0; border:1px solid var(--line-soft)}
.rgt.l{background:var(--blue-soft); color:var(--blue)}
.rgt.b{background:var(--petrol-soft); color:var(--petrol)}
.rgt.f{background:var(--green-soft); color:var(--green)}

@media (max-width:900px){
  :root{--sidebar-w:0px}
  .sidebar{transform:translateX(-100%); transition:transform .2s}
  .sidebar.is-open{transform:translateX(0); width:236px; flex-basis:236px}
  .main{margin-left:0}
  .menu-toggle{display:inline-flex !important}
}
.menu-toggle{display:none}


/* ---------- Anmeldung ---------- */
.auth-scrim{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--petrol) 14%, #0B1B1A 60%);
  backdrop-filter: blur(2px);
}
.auth-card{
  width:min(400px, calc(100vw - 32px)); background:var(--surface);
  border:1px solid var(--line); border-radius:8px; padding:26px 26px 22px;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.auth-scrim[hidden]{ display:none }   /* sonst gewinnt display:flex gegen [hidden] */

.auth-brand{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin-bottom:18px;
  display:flex; align-items:center; gap:8px;
}
.auth-brand .dot{width:9px;height:9px;border-radius:50%;background:var(--petrol)}
.auth-card h2{margin:0 0 12px; font-size:19px}
.auth-hint{font-size:12px; color:var(--muted); line-height:1.5; margin:10px 0 0}
.auth-err{
  background:var(--red-soft); border:1px solid #EFCBCB; color:var(--red);
  border-radius:var(--r); padding:8px 10px; font-size:12px; margin-bottom:10px;
}
.btn.wide{width:100%; justify-content:center; padding:9px 12px}
.whoami{display:inline-flex; align-items:center; gap:8px; margin-left:2px}
.whoami .nm{font-size:12px; color:var(--muted); max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pm-select{font-size:11px; padding:2px 4px; border:1px solid var(--line); border-radius:4px; background:var(--surface)}
.pm-select.changed{outline:2px solid var(--ochre); outline-offset:-1px}