/* Solskin Project Approval – Gestaltung angelehnt an solskin.swiss
 * Anthrazit #242323 · Kupfer #CEA273 · Hellgrau #C8C8C8 · Avenir Light, Versalien mit Sperrung
 */
:root {
  --ink: #242323;
  --ink-2: #2e2d2d;
  --ink-3: #3a3838;
  --stone: #c8c8c8;
  --mute: #8a8786;
  --copper: #cea273;
  --copper-l: #e0b783;
  --copper-d: #ba8e5f;
  --copper-t: #8c6338;      /* Kupfer als Text auf Hell (Kontrast ≥ 4.5:1) */
  --paper: #f4f2ee;
  --card: #ffffff;
  --line: #e4dfd7;
  --line-2: #efebe5;
  --text: #2a2828;
  --text-2: #615d5a;
  --calc: #f3f1ed;
  --ok: #3f7d5c;  --ok-bg: #e6f0ea;
  --warn: #9a6416; --warn-bg: #fbf0dc;
  --bad: #a3392f;  --bad-bg: #f8e4e1;
  --c-in: #1a7fa3; --c-out: #c0803a;
  --font: "Avenir Next", "Avenir", "Avenir LT Std", "Nunito Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --radius: 2px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); font-weight: 400; font-size: 14.5px; line-height: 1.5; color: var(--text); background: var(--paper); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
a { color: var(--copper-t); }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- Kopfzeile ---------- */
.top { position: sticky; top: 0; z-index: 30; height: 64px; display: flex; align-items: center; gap: 24px; padding: 0 24px; background: var(--ink); color: var(--stone); border-bottom: 1px solid #000; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--stone); }
.logo-mark { width: 34px; height: 34px; fill: var(--copper); }
.brand .word { font-size: 25px; font-weight: 300; letter-spacing: .02em; color: #d6d3d0; }
.brand .app { font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--copper); border-left: 1px solid #4a4747; padding-left: 12px; margin-left: 2px; }
.top-c { flex: 1; display: flex; justify-content: center; }
.psel { display: flex; align-items: center; gap: 10px; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.psel select { min-width: 300px; max-width: 460px; background: var(--ink-2); color: #eee; border: 1px solid #4a4747; border-radius: var(--radius); padding: 7px 10px; letter-spacing: normal; text-transform: none; font-size: 14px; }
.top-r { display: flex; gap: 8px; }
.flash { position: absolute; right: 24px; top: 100px; background: var(--ink); color: var(--copper-l); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 6px 12px; opacity: 0; transition: opacity .25s; pointer-events: none; }
.flash.show { opacity: .95; }
.flash.bad { color: #ffb4a8; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border: 1px solid var(--copper-d); background: transparent; color: var(--copper-t); padding: 9px 18px; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; border-radius: var(--radius); transition: background .15s, color .15s; white-space: nowrap; }
.btn:hover { background: var(--copper); color: var(--ink); }
.btn.primary { background: var(--ink); color: var(--copper-l); border-color: var(--ink); }
.btn.primary:hover { background: var(--copper); color: var(--ink); border-color: var(--copper); }
.btn.ghost { color: var(--stone); border-color: #555; padding: 7px 14px; }
.btn.ghost:hover { border-color: var(--copper); color: var(--ink); }
.btn.ghost-d { border-color: var(--line); color: var(--text-2); }
.btn.ghost-d:hover { border-color: var(--copper); }
.btn.small { padding: 6px 12px; font-size: 10.5px; }
.btn.danger:hover { background: var(--bad); color: #fff; border-color: var(--bad); }
.btn:focus-visible, .seg button:focus-visible, .nav-i:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }

/* ---------- Grundlayout ---------- */
.shell { display: grid; grid-template-columns: 272px 1fr; height: calc(100vh - 64px); }
.side { background: var(--ink-2); color: var(--stone); overflow-y: auto; padding: 18px 0 24px; }
.side-label { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--mute); padding: 14px 22px 8px; }
.nav-i { display: flex; align-items: center; gap: 10px; padding: 9px 18px 9px 22px; color: #cfccc9; text-decoration: none; font-size: 13.5px; border-left: 2px solid transparent; }
.nav-i b { font-weight: 600; color: var(--copper); letter-spacing: .06em; margin-right: 2px; }
.nav-i:hover { background: var(--ink-3); color: #fff; }
.nav-i.active { background: var(--ink); border-left-color: var(--copper); color: #fff; }
.nav-i.child { padding-left: 50px; font-size: 13px; color: #b3b0ad; }
.nav-group .nav-i.child { display: none; }
.nav-group.open .nav-i.child, .nav-group:hover .nav-i.child { display: flex; }
.nav-t { flex: 1; min-width: 0; }
.nav-ring { width: 18px; display: inline-flex; }
.ring { width: 18px; height: 18px; }
.ring .r0 { fill: none; stroke: #4c4949; stroke-width: 2; }
.ring .r1 { fill: none; stroke: var(--copper); stroke-width: 2; stroke-linecap: round; }
.nav-chip .chip { font-size: 9.5px; padding: 1px 6px; }
.side-foot { margin: 26px 22px 0; font-size: 11px; color: var(--mute); line-height: 1.5; border-top: 1px solid var(--ink-3); padding-top: 14px; }
.main { overflow-y: auto; scroll-behavior: smooth; }
.page { max-width: 1240px; margin: 0 auto; padding: 34px 40px 60px; }

/* ---------- Seitenkopf ---------- */
.page-h { margin-bottom: 22px; }
.eyebrow { font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--copper-t); margin-bottom: 6px; }
.page-h h1 { font-size: 30px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; margin: 0 0 6px; color: var(--ink); line-height: 1.2; }
.page-h .sub { color: var(--text-2); margin: 0; max-width: 900px; }
.projline { white-space: pre-wrap; }
.prog-wrap { display: block; margin-top: 16px; }
.prog { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--text-2); }
.prog .bar { width: 220px; height: 3px; background: var(--line); }
.prog .bar i { display: block; height: 100%; background: var(--copper); transition: width .3s; }
.prog .done { color: var(--ok); font-weight: 600; letter-spacing: .06em; }

/* ---------- Karten ---------- */
.card { background: var(--card); border: 1px solid var(--line); margin-bottom: 20px; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px 0; }
.card-h h3 { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.card-b { padding: 16px 22px 20px; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.cols2 > .card { margin-bottom: 20px; }
.cols2.tight { gap: 28px; align-items: center; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 28px; }

/* ---------- Formularzeilen ---------- */
.row { display: grid; grid-template-columns: minmax(170px, 42%) 1fr; align-items: center; gap: 4px 16px; padding: 6px 0; border-bottom: 1px solid var(--line-2); }
.row:last-child { border-bottom: 0; }
.row .lbl { color: var(--text-2); font-size: 13.5px; }
.row .hint { grid-column: 2; font-size: 12px; color: var(--mute); }
.stack .row, .gate-card > .card-b > .row { grid-template-columns: 1fr; }
.stack .row .hint, .gate-card > .card-b > .row .hint { grid-column: 1; }
.grid2 .row, .grid3 .row { grid-template-columns: 1fr; }
.grid2 .row .hint, .grid3 .row .hint { grid-column: 1; }

.in { width: 100%; background: #fff; border: 1px solid #d9d2c7; border-radius: var(--radius); padding: 7px 9px; min-height: 34px; transition: border-color .15s, box-shadow .15s, background .15s; }
textarea.in { resize: vertical; min-height: 38px; line-height: 1.45; }
select.in { appearance: none; padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--copper-d) 50%), linear-gradient(135deg, var(--copper-d) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.in:hover { border-color: var(--copper-d); }
.in:focus { outline: none; border-color: var(--copper); box-shadow: 0 0 0 3px rgba(206, 162, 115, .25); }
.in:disabled { background: var(--calc); color: var(--mute); cursor: not-allowed; }
.in.missing { background: #fdf7ef; border-color: var(--copper); border-left-width: 3px; }
.numwrap { display: flex; align-items: center; gap: 6px; }
.numwrap .in { text-align: right; }
.numwrap i { font-style: normal; color: var(--mute); font-size: 12px; min-width: 14px; }
td .numwrap { min-width: 110px; }

.seg { display: inline-flex; border: 1px solid #d9d2c7; border-radius: var(--radius); overflow: hidden; background: #fff; }
.seg button { border: 0; background: transparent; padding: 6px 12px; font-size: 12.5px; cursor: pointer; color: var(--text-2); border-right: 1px solid var(--line); min-width: 44px; }
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--paper); }
.seg button.on { background: var(--ink); color: #fff; }
.seg button.on.ok { background: var(--ok); }
.seg button.on.warn { background: #c48a2c; }
.seg button.on.neutral { background: #7d7976; }
.seg.missing { border-color: var(--copper); border-left-width: 3px; background: #fdf7ef; }
.pulse { animation: pulse 1.1s ease-out; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(206, 162, 115, .8); } 100% { box-shadow: 0 0 0 14px rgba(206, 162, 115, 0); } }

/* ---------- Berechnete Werte ---------- */
.calc { display: inline-block; background: var(--calc); padding: 6px 10px; min-width: 64px; border-radius: var(--radius); color: var(--text); }
td.r .calc, td .calc { display: block; text-align: right; }
.calc.strong { font-weight: 600; }
.bad-t { color: var(--bad); }
.warn-t { color: var(--warn); }
.src { font-size: 11.5px; color: var(--copper-t); letter-spacing: .03em; margin-left: 8px; white-space: nowrap; }
.muted { color: var(--mute); }

.chip { display: inline-block; font-size: 11.5px; padding: 2px 9px; border-radius: 20px; background: #ebe8e4; color: #4b4846; white-space: nowrap; letter-spacing: .02em; }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }
.chip.neutral { background: #ebe8e4; color: #5d5a57; }

.note { border-left: 3px solid var(--copper); background: #fbf6ef; padding: 10px 14px; margin: 0 0 14px; font-size: 13.5px; }
.note.ok { border-color: var(--ok); background: var(--ok-bg); }
.note.warn { border-color: #c48a2c; background: var(--warn-bg); }
.note ul { margin: 6px 0 0; padding-left: 18px; color: var(--text-2); }
.reco { display: inline-block; font-size: 17px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 12px 20px; border: 1px solid; margin: 4px 0 10px; }
.reco.ok { color: var(--ok); border-color: var(--ok); background: var(--ok-bg); }
.reco.warn { color: var(--warn); border-color: #c48a2c; background: var(--warn-bg); }
.reco.bad { color: var(--bad); border-color: var(--bad); background: var(--bad-bg); }
.reco.neutral { color: var(--text-2); border-color: var(--line); background: var(--calc); }
.reco.accent { color: var(--ink); border-color: var(--copper); background: #f7ecdf; }
.foot { font-size: 12.5px; color: var(--mute); margin: 12px 0 0; }
.hint-inline, .req { font-size: 12px; font-style: normal; }
.req { color: var(--copper-t); font-weight: 600; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }

/* ---------- Kennzahlen ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 20px; }
.tiles.five { grid-template-columns: repeat(5, 1fr); }
.tiles.three { grid-template-columns: repeat(3, 1fr); }
.card .tiles { margin: 0; }
.tile { background: #fff; padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; }
.t-l { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); }
.t-v { font-size: 24px; font-weight: 300; color: var(--ink); letter-spacing: .01em; }
.t-s { font-size: 12px; color: var(--mute); }
.tile.accent { background: var(--ink); }
.tile.accent .t-l { color: var(--copper); } .tile.accent .t-v { color: #fff; } .tile.accent .t-s { color: var(--stone); }
.tile.warn .t-v { color: var(--bad); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 24px; margin-bottom: 8px; }
.facts.three { margin-top: 14px; }
.facts div { display: flex; flex-direction: column; border-left: 2px solid var(--copper); padding-left: 10px; }
.facts span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.facts b { font-weight: 600; }

/* ---------- Tabellen ---------- */
.scroll { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); padding: 8px 8px; border-bottom: 1px solid var(--ink); white-space: nowrap; }
.tbl td { padding: 5px 8px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.tbl .r { text-align: right; } .tbl .c { text-align: center; }
.tbl tr.grp td { background: var(--paper); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--copper-t); padding-top: 12px; }
.tbl tr.tot td { border-top: 1px solid #cfc8bd; font-weight: 600; }
.tbl tr.db td { background: #faf7f3; }
.tbl tr.key td { background: var(--ink); color: #fff; }
.tbl tr.key .calc { background: transparent; color: var(--copper-l); }
.tbl tfoot td { border-top: 1px solid var(--ink); border-bottom: 0; font-weight: 600; padding-top: 10px; }
.tbl .code { color: var(--copper-t); font-weight: 600; width: 34px; }
.tbl .w-seg { width: 130px; } .tbl .w-seg3 { width: 220px; }
.tbl.risk { table-layout: fixed; min-width: 860px; }
.tbl.risk th { white-space: normal; letter-spacing: .1em; } .tbl.risk th.c { text-align: center; } .tbl.risk td:last-child { padding-left: 14px; }
.tbl.risk col.c-f { width: auto; } .tbl.risk col.c-a { width: 178px; } .tbl.risk col.c-w { width: 64px; } .tbl.risk col.c-b { width: 86px; }
.tbl.risk col.c-k { width: 88px; } .tbl.risk col.c-t { width: 56px; } .tbl.risk col.c-n { width: 24%; }
.tbl.risk td:first-child { min-width: 0; }
.tbl.risk .seg button { padding: 6px 10px; min-width: 0; }
.tbl.reg td:nth-child(2) { min-width: 240px; } .tbl.reg td:nth-child(3) { min-width: 220px; } .tbl.reg td:nth-child(8) { min-width: 190px; } .tbl.reg td:nth-child(9), .tbl.reg td:nth-child(10) { min-width: 150px; }
.tbl.kalk td:nth-child(2) { min-width: 210px; } .tbl.kalk td:nth-child(3) { min-width: 170px; max-width: 200px; } .tbl.kalk td:last-child { min-width: 130px; }
.tbl.kalk td .numwrap { min-width: 112px; }
.v-cf .tbl td:first-child .in { min-width: 220px; }
.tbl.mplan { font-size: 12px; } .tbl.mplan td:first-child { white-space: nowrap; font-weight: 600; } .tbl.mplan td, .tbl.mplan th { padding: 5px 7px; }
.hit { color: var(--bad); }

/* ---------- Diagramm ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 18px; font-size: 12.5px; color: var(--text-2); margin-bottom: 6px; }
.legend i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border-radius: 2px; }
.lg-in { background: var(--c-in); } .lg-out { background: var(--c-out); } .lg-cum { background: var(--ink); height: 2px !important; vertical-align: 3px !important; }
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--line-2); } .chart .axis { stroke: #8f8a84; }
.chart .ylab { font-size: 11px; fill: var(--mute); text-anchor: end; } .chart .xlab { font-size: 11px; fill: var(--mute); text-anchor: middle; }
.chart .b-in { fill: var(--c-in); } .chart .b-out { fill: var(--c-out); }
.chart .cum { fill: none; stroke: var(--ink); stroke-width: 2; }
.chart .dot { fill: var(--ink); stroke: #fff; stroke-width: 2; }
.chart .hit { fill: transparent; } .chart .hit:hover { fill: rgba(206, 162, 115, .14); }

/* ---------- Freigabe ---------- */
.gate-card { border-top: 3px solid var(--copper); }
.sign { display: none; }
.pager { display: flex; justify-content: space-between; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.howto { display: grid; grid-template-columns: 180px 1fr; gap: 10px 20px; margin: 0; }
.howto dt { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--copper-t); font-weight: 600; padding-top: 2px; }
.howto dd { margin: 0; color: var(--text-2); }

/* ---------- Projekte ---------- */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.pcard { background: #fff; border: 1px solid var(--line); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.pcard.cur { border-top: 3px solid var(--copper); }
.pc-h { display: flex; justify-content: space-between; gap: 10px; } .pc-h b { font-size: 16px; } .pc-h span { color: var(--mute); }
.pc-m { color: var(--text-2); font-size: 13px; }
.pc-g { display: flex; gap: 6px; }
.gdot { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; padding: 3px 7px; border-radius: 2px; background: #ebe8e4; color: #6b6764; }
.gdot.ok { background: var(--ok-bg); color: var(--ok); } .gdot.warn { background: var(--warn-bg); color: var(--warn); } .gdot.bad { background: var(--bad-bg); color: var(--bad); }
.pc-a { display: flex; gap: 8px; }

.print-only { display: none; }

/* ---------- Responsiv ---------- */
@media (max-width: 1100px) {
  .shell { grid-template-columns: 220px 1fr; }
  .cols2, .grid3 { grid-template-columns: 1fr; }
  .tiles, .tiles.five { grid-template-columns: repeat(2, 1fr); }
  .page { padding: 26px 22px 50px; }
  .brand .app, .top-r .btn:not([data-act="new"]) { display: none; }
}
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; height: auto; }
  .side { display: none; }
  .grid2 { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; } .row .hint { grid-column: 1; }
  .psel select { min-width: 160px; }
}

/* ---------- Druck: Approval-Vorlage ---------- */
@media print {
  @page { size: A4; margin: 14mm 12mm; }
  body { background: #fff; font-size: 10.5pt; }
  .top, .side, .pager, .no-print, .actions, .prog-wrap, .btn, .flash { display: none !important; }
  .shell { display: block; height: auto; }
  .main { overflow: visible; }
  .page { padding: 0; max-width: none; }
  .print-only { display: block; margin-top: 4px; color: var(--text-2); }
  .page-h h1 { font-size: 18pt; }
  .card { border: 0; border-top: 1px solid #999; margin-bottom: 10px; break-inside: avoid; }
  .card-h, .card-b { padding-left: 0; padding-right: 0; }
  .in { border: 0; border-bottom: 1px solid #bbb; border-radius: 0; padding: 2px 0; min-height: 0; background: none !important; }
  select.in { background-image: none; }
  .numwrap .in { text-align: right; }
  .seg { border: 0; } .seg button { display: none; padding: 0; } .seg button.on { display: inline; background: none !important; color: #000; font-weight: 600; }
  .seg.missing { background: none; }
  .in.missing { border-left-width: 0; border-color: #bbb; }
  .calc { background: none; padding: 0; }
  .tiles { break-inside: avoid; }
  .tile.accent { background: #fff; } .tile.accent .t-v { color: #000; } .tile.accent .t-l { color: var(--copper-t); }
  .tbl tr.key td { background: #eee; color: #000; } .tbl tr.key .calc { color: #000; }
  .scroll { overflow: visible; }
  .sign { display: flex; align-items: flex-end; gap: 16px; margin-top: 26px; }
  .sign span { font-size: 10pt; color: var(--text-2); white-space: nowrap; }
  .sign i { flex: 1; border-bottom: 1px solid #000; height: 34px; max-width: 320px; }
  .v-cf .card:last-of-type { break-before: page; }
}

/* ---------- v3: Datenbank, PDF-Menü, HubSpot ---------- */
.dbstat { align-self: center; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; padding: 4px 10px 4px 22px; border-radius: 20px; position: relative; color: #bdb9b5; border: 1px solid #4a4747; white-space: nowrap; }
.dbstat::before { content: ''; position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #888; }
.dbstat.ok::before { background: #6fbf8e; } .dbstat.busy::before { background: var(--copper); animation: blink 1s infinite; }
.dbstat.warn::before { background: #e0b04a; } .dbstat.bad { color: #ffb4a8; border-color: #8a3b33; } .dbstat.bad::before { background: #e5675a; }
@keyframes blink { 50% { opacity: .3; } }
.menu { position: relative; }
.menu > summary { list-style: none; } .menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background: var(--copper); color: var(--ink); border-color: var(--copper); }
.menu-b { position: absolute; right: 0; top: calc(100% + 8px); width: 380px; background: #fff; color: var(--text); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(0, 0, 0, .25); padding: 8px 0; z-index: 50; }
.menu-b .menu-h { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--mute); padding: 8px 16px 4px; }
.menu-b button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 16px; cursor: pointer; font-size: 13.5px; color: var(--text); }
.menu-b button b { color: var(--copper-t); font-weight: 600; margin-right: 6px; letter-spacing: .04em; }
.menu-b button em { font-style: normal; font-size: 11px; color: var(--mute); margin-left: 6px; }
.menu-b button:hover, .menu-b button.cur { background: var(--paper); }
.hs-search { display: flex; gap: 10px; margin-bottom: 12px; } .hs-search .in { max-width: 460px; }
.hs-gate { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.checks { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 4px; } .checks input { accent-color: var(--copper-d); margin-right: 8px; }
.howto-d { margin-top: 12px; color: var(--text-2); } .howto-d summary { cursor: pointer; color: var(--copper-t); font-weight: 600; } .howto-d ol { margin: 8px 0 0; padding-left: 20px; } .howto-d li { margin: 4px 0; }
code { font-family: ui-monospace, Menlo, monospace; font-size: 12px; background: var(--calc); padding: 1px 5px; border-radius: 2px; }
.pc-t { font-size: 12px; color: var(--mute); }
.gdot.hs { background: #fbe6dc; color: #b8502a; }
.conflict { margin-bottom: 20px; } .conflict .actions { margin: 10px 0 0; }
.boot-err { max-width: 560px; margin: 15vh auto; padding: 30px; background: #fff; border-top: 3px solid var(--bad); }
.pcard .pc-a { flex-wrap: wrap; }
@media print { .dbstat, .menu, .hs-gate { display: none !important; } }

/* ---------- Sperre nach No-Go / On hold ---------- */
.note.lock { border-color: var(--bad); background: var(--bad-bg); }
.lockchip { display: inline-block; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; padding: 1px 6px; border-radius: 20px; background: #4a2b28; color: #f2b3aa; }
.lockt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--bad); font-weight: 600; }
.seg button:disabled { cursor: not-allowed; opacity: .55; }
.seg button:disabled:hover { background: transparent; }
.seg button.on:disabled { opacity: .7; }
.pc-lock { font-size: 12.5px; color: var(--bad); background: var(--bad-bg); padding: 4px 8px; }

/* ---------- v4: Login, Benutzer, Rechte, Demo ---------- */
.login { min-height: 100vh; background: var(--ink); display: grid; grid-template-columns: minmax(320px, 460px) minmax(300px, 460px); gap: 40px; align-content: center; justify-content: center; padding: 40px 24px; position: relative; }
.login-brand { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; color: var(--stone); margin-bottom: 8px; }
.login-brand .logo-mark { width: 44px; height: 44px; fill: var(--copper); }
.login-brand .word { font-size: 34px; font-weight: 300; color: #d6d3d0; }
.login-brand .app { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--copper); border-left: 1px solid #4a4747; padding-left: 14px; }
.login-card { background: #fff; padding: 32px 34px 30px; border-top: 3px solid var(--copper); }
.login-card h1 { font-size: 26px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; margin: 4px 0 18px; }
.login-card .row { grid-template-columns: 1fr; border: 0; padding: 4px 0; }
.btn.wide { width: 100%; justify-content: center; margin-top: 14px; padding: 12px; }
.login-demo { color: var(--stone); }
.login-demo .eyebrow { color: var(--copper); }
.login-demo p { margin: 4px 0 14px; font-size: 13.5px; } .login-demo code { background: #3a3838; color: #fff; }
.demo-users { display: flex; flex-direction: column; gap: 8px; }
.demo-u { text-align: left; background: var(--ink-2); border: 1px solid #444; color: #e8e6e3; padding: 10px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; border-radius: var(--radius); }
.demo-u b { font-weight: 600; } .demo-u span { font-size: 12px; color: #a9a5a1; }
.demo-u:hover { border-color: var(--copper); background: #34312f; }
@media (max-width: 860px) { .login { grid-template-columns: 1fr; } }
.demobar { position: sticky; top: 64px; z-index: 29; background: var(--copper); color: var(--ink); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; text-align: center; padding: 5px 10px; display: flex; justify-content: center; align-items: center; gap: 14px; }
.demobar .btn { padding: 2px 10px; font-size: 10px; color: var(--ink); border-color: rgba(36,35,35,.5); }
.shell.with-demo { height: calc(100vh - 64px - 27px); }
.menu.user .umenu { padding: 4px; border-radius: 50%; }
.avatar { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; background: var(--copper); color: var(--ink); align-items: center; justify-content: center; font-weight: 600; letter-spacing: .04em; font-size: 12px; }
.menu-u { padding: 10px 16px 12px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.menu-u span { font-size: 12px; color: var(--mute); }
.menu.user .menu-b { width: 300px; }
.acc { display: inline-block; font-size: 11px; padding: 2px 9px; border-radius: 20px; }
.acc.w { background: var(--ok-bg); color: var(--ok); } .acc.r { background: #ebe8e4; color: #5d5a57; }
.pc-acc { margin-top: -4px; }
.tbl.users td { vertical-align: middle; } .tbl.users select.in { min-width: 140px; }
.fn { display: inline-flex; gap: 12px; flex-wrap: wrap; } .fn label { display: inline-flex; gap: 4px; align-items: center; font-size: 12.5px; white-space: nowrap; }
.fn input, .sw input { accent-color: var(--copper-d); }
tr.inactive td { opacity: .55; }
.howto.small { margin-top: 16px; font-size: 13px; } .howto.small dt { font-size: 10.5px; }
.note.ro { margin-bottom: 18px; }
.hs-log { font-size: 12.5px; color: var(--text-2); }
@media print { .demobar { display: none !important; } }