:root{
  --opal:#005f4e; --opal-dark:#00453a; --opal-tint:#e6efed;
  --paper:#f7f8f7; --ink:#1c2321; --muted:#6b7975; --line:#d5dcda;
  --gruen:#2e7d55; --gruen-bg:#e8f4ec;
  --rot:#a4232b; --rot-bg:#fbeaea;
  --amber:#8a6100; --amber-bg:#fdf3e0;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:'Raleway',system-ui,sans-serif; font-size:15px; line-height:1.5}
h1,h2,h3{font-family:'Montserrat',system-ui,sans-serif}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}

header{background:var(--opal); color:#fff; padding:16px 24px; display:flex;
  align-items:center; gap:16px; flex-wrap:wrap; position:sticky; top:0; z-index:20}
header .brand{font-family:'Montserrat'; font-weight:700; letter-spacing:.14em; font-size:14px}
header .sub{font-size:13px; opacity:.85}
header .env{font-size:10px; letter-spacing:.12em; font-weight:600; font-family:'Montserrat';
  background:rgba(255,255,255,.16); padding:4px 9px; border-radius:2px}
header .spacer{flex:1}
header button.link{background:none; border:1px solid rgba(255,255,255,.4); color:#fff;
  font-size:13px; padding:7px 13px; border-radius:2px; font-family:'Montserrat'; cursor:pointer}
header button.link:hover{background:rgba(255,255,255,.14)}
main{max-width:1120px; margin:0 auto; padding:26px}

.card{background:#fff; border:1px solid var(--line); border-radius:3px; margin-bottom:18px}
.card > .head{padding:13px 19px; border-bottom:1px solid var(--line); display:flex;
  align-items:center; gap:11px; flex-wrap:wrap}
.card > .head h2{margin:0; font-size:13px; letter-spacing:.09em; text-transform:uppercase; color:var(--opal)}
.card > .body{padding:19px}
.step{font-family:'IBM Plex Mono'; font-size:12px; color:#fff; background:var(--opal);
  width:22px; height:22px; border-radius:2px; display:inline-grid; place-items:center; flex:none}

label.fld{display:block; margin-bottom:14px}
label.fld > span{display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin-bottom:5px; font-family:'Montserrat'}
label.fld > span .req{color:var(--rot)}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],select,textarea{
  font-family:inherit; font-size:15px; padding:10px 12px; width:100%; min-height:44px;
  border:1px solid var(--line); border-radius:2px; background:#fff; color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--opal); outline-offset:1px; border-color:var(--opal)}
input.invalid,select.invalid{border-color:var(--rot); background:#fff8f8}
textarea{resize:vertical; min-height:76px}
.row{display:flex; gap:14px; flex-wrap:wrap}
.row > *{flex:1 1 220px}
button{font-family:'Montserrat'; font-weight:600; font-size:14px; padding:10px 20px;
  border-radius:2px; cursor:pointer; border:1px solid var(--opal); background:var(--opal); color:#fff}
button:hover{background:var(--opal-dark)}
button:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
button.ghost{background:#fff; color:var(--opal)}
button.ghost:hover{background:var(--opal-tint)}
button.small{font-size:13px; padding:7px 14px}

.meta{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:15px 22px}
.meta div > dt{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  font-weight:600; font-family:'Montserrat'; margin-bottom:3px}
.meta div > dd{margin:0; font-size:14.5px}

.scroll{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:14px}
th{text-align:left; font-family:'Montserrat'; font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); font-weight:600;
  padding:9px 10px; border-bottom:1.5px solid var(--line); white-space:nowrap}
td{padding:8px 10px; border-bottom:1px solid #edf0ef; vertical-align:middle}
th.num,td.num{text-align:right}
tbody tr:hover{background:#fbfcfb}
tbody tr.hasqty{background:var(--opal-tint)}
tbody tr.toolrow{background:var(--amber-bg)}
tbody tr.toolrow.hasqty{background:var(--opal-tint)}
.pos{font-family:'IBM Plex Mono'; font-size:12.5px; color:var(--muted)}
.art{font-family:'IBM Plex Mono'; font-size:13px}
.bez{font-weight:500}
.attr{font-size:11.5px; color:var(--muted); margin-top:2px; max-width:300px}
td input[type=number]{width:92px; text-align:right; padding:6px 8px; font-family:'IBM Plex Mono'}
.tag{display:inline-block; margin-left:6px; font-size:10px; font-weight:700; font-family:'Montserrat';
  color:var(--muted); background:#f2f4f3; border:1px solid var(--line); border-radius:2px;
  padding:1px 5px; vertical-align:middle}
.tag.tool{color:var(--amber); background:#fff; border-color:#e8d5a8}
.warnflag{display:inline-block; margin-left:6px; font-size:10px; font-weight:700; color:var(--amber);
  background:var(--amber-bg); border:1px solid #e8d5a8; border-radius:2px; padding:1px 5px;
  cursor:help; font-family:'Montserrat'}

.freerow{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-top:6px}
.freerow > .grow{flex:1 1 300px}
.freerow > .qty{flex:0 0 120px}
.chip{display:inline-flex; align-items:center; gap:8px; border-radius:2px;
  padding:6px 8px 6px 11px; font-size:13px; margin:4px 6px 0 0}
.chip.neu{background:var(--rot-bg); border:1px solid #e6b9ba}
.chip.neu button{color:var(--rot)}
.chip.pos{background:var(--opal-tint); border:1px solid #c3d6d1}
.chip.pos button{color:var(--opal)}
.chip button{background:none; border:none; font-size:16px; padding:0 2px; line-height:1; cursor:pointer}

.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips button{border:1px solid var(--line); background:#fff; color:var(--ink); font-weight:500;
  padding:9px 15px; border-radius:99px; font-family:inherit; font-size:14px; min-height:44px}
.chips button[aria-pressed="true"]{background:var(--opal); color:#fff; border-color:var(--opal); font-weight:600}

.check{display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-top:1px solid #edf0ef}
.check:first-of-type{border-top:none}
.check input{width:24px; height:24px; flex:0 0 24px; accent-color:var(--opal); margin:2px 0 0}
.check span{font-size:15px}

details{border:1px solid var(--line); border-radius:3px; background:#fbfcfb; padding:13px 15px; margin-top:14px}
details summary{font-family:'Montserrat'; font-weight:600; color:var(--opal); cursor:pointer; font-size:14px}
details ul{margin:10px 0 0; padding-left:20px; font-size:14.5px}
details li{margin-bottom:6px}
a.doclink{display:inline-block; margin-top:12px; font-family:'Montserrat'; font-weight:600;
  font-size:13.5px; color:var(--opal)}

.notice{border-left:3px solid var(--amber); background:var(--amber-bg);
  padding:12px 16px; font-size:13.5px; margin-bottom:18px}
.notice.info{border-color:var(--opal); background:var(--opal-tint)}
.notice.cost{border-color:var(--rot); background:var(--rot-bg)}
.notice strong{font-family:'Montserrat'}
.hint{font-size:12.5px; color:var(--muted); margin-top:6px}
.hidden{display:none !important}
.err{color:var(--rot); font-size:13.5px; margin-top:10px; min-height:18px; font-weight:500}

/* Login + Hub */
#gate{min-height:72vh; display:grid; place-items:center; padding:26px}
#gate .box{background:#fff; border:1px solid var(--line); padding:30px; max-width:390px; width:100%}
#gate h2{margin:0 0 4px; font-size:19px; color:var(--opal)}
#gate p{margin:0 0 20px; font-size:13.5px; color:var(--muted)}
.hubgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-top:22px}
.hubcard{background:#fff; border:1px solid var(--line); border-radius:3px; padding:22px;
  text-align:left; cursor:pointer; font-family:inherit; color:var(--ink); font-weight:400;
  font-size:15px; display:block; width:100%}
.hubcard:hover{border-color:var(--opal); background:var(--opal-tint)}

.hubsplit{display:flex; align-items:center; gap:14px; margin:30px 0 14px; color:var(--muted)}
.hubsplit::before,.hubsplit::after{content:""; flex:1; height:1px; background:var(--line)}
.hubsplit span{font-family:'Montserrat'; font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; font-weight:600}

.hubinfo{display:flex; justify-content:center}
.infocard{display:flex; align-items:flex-start; gap:15px; text-align:left; max-width:560px; width:100%;
  background:#f2f4f3; border:1px solid var(--line); border-radius:3px; padding:18px 20px;
  color:var(--ink); font-family:inherit; font-weight:400; font-size:15px}
.infocard:hover{background:#eceeed; border-color:var(--muted)}
.infocard .ic{flex:none; width:36px; height:36px; border-radius:2px; background:#dfe3e2;
  color:var(--muted); display:grid; place-items:center; font-size:17px}
.infocard .it b{font-family:'Montserrat'; font-size:16px; color:var(--muted); display:block}
.infocard .it small{display:block; margin-top:4px; font-size:13.5px; color:var(--muted); line-height:1.5}

.procbar{display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:#f2f4f3;
  border:1px solid var(--line); border-bottom:none; border-radius:3px 3px 0 0; padding:12px 18px}
.procbar b{font-family:'Montserrat'; font-size:14px; color:var(--muted)}
.procbar small{display:block; font-size:12.5px; color:var(--muted)}
.procbar button{margin-left:auto}
#procFrame{width:100%; height:calc(100vh - 230px); min-height:460px; border:1px solid var(--line);
  border-radius:0 0 3px 3px; background:#fff; display:block}
.hubcard .n{font-family:'IBM Plex Mono'; font-size:12px; color:#fff; background:var(--opal);
  padding:3px 8px; border-radius:2px; display:inline-block; margin-bottom:12px}
.hubcard h3{margin:0 0 6px; font-size:18px; color:var(--opal)}
.hubcard p{margin:0; font-size:14px; color:var(--muted); line-height:1.5}

/* Ausgabe */
.sheet{background:#fff; border:1px solid var(--line); padding:32px; max-width:900px; margin:0 auto}
.sheet .ph{border-bottom:2px solid var(--opal); padding-bottom:14px; margin-bottom:20px}
.sheet .ph .t{font-family:'Montserrat'; font-weight:700; font-size:19px; color:var(--opal)}
.sheet .ph .s{font-size:13px; color:var(--muted); margin-top:3px}
tr.st-gruen{background:var(--gruen-bg)}
tr.st-rot{background:var(--rot-bg)}
.badge{font-family:'Montserrat'; font-size:10px; font-weight:700; letter-spacing:.06em;
  padding:2px 6px; border-radius:2px; white-space:nowrap}
.badge.g{color:var(--gruen); background:#fff; border:1px solid #b8dcc6}
.badge.r{color:var(--rot); background:#fff; border:1px solid #e6b9ba}
.badge.n{color:var(--muted); background:#fff; border:1px solid var(--line)}
.legend{display:flex; gap:18px; flex-wrap:wrap; font-size:13px; margin-bottom:16px;
  max-width:900px; margin-left:auto; margin-right:auto}
.legend span{display:inline-flex; align-items:center; gap:7px}
.sw{width:13px; height:13px; border-radius:2px; border:1px solid rgba(0,0,0,.14)}

.rsum{margin-top:16px; padding:14px 16px; background:var(--opal-tint); border-radius:2px}
.rsum > div:first-child{display:flex; justify-content:space-between; align-items:baseline; gap:14px}
.rsum span{font-family:'Montserrat'; font-weight:600; font-size:13px; color:var(--opal-dark)}
.rsum b{font-family:'IBM Plex Mono'; font-size:19px; color:var(--opal)}
.zu{display:flex; gap:11px; align-items:flex-start; padding:9px 0; border-top:1px solid #edf0ef}
.zu:first-child{border-top:none}
.zu input[type=checkbox]{width:22px; height:22px; flex:0 0 22px; accent-color:var(--opal); margin:1px 0 0}
.zu .zt{flex:1; font-size:14px}
.zu .zt small{display:block; color:var(--muted); font-size:12px}
.zu .zb{font-family:'IBM Plex Mono'; font-size:14px; white-space:nowrap}
.zu input[type=number]{width:74px; min-height:36px; padding:5px 7px; text-align:right;
  font-family:'IBM Plex Mono'; font-size:13px}
.gegen{margin-top:24px; border:1px solid var(--line); border-radius:2px; overflow:hidden}
.gegen .gz{display:flex; justify-content:space-between; gap:14px; padding:10px 15px;
  border-bottom:1px solid #edf0ef; font-size:14px}
.gegen .gz:last-child{border-bottom:none}
.gegen .gz.tot{background:var(--opal-tint); font-family:'Montserrat'; font-weight:700}
.gegen .gz .v{font-family:'IBM Plex Mono'; white-space:nowrap}
.sig{margin-top:34px; padding-top:18px; border-top:1px solid var(--line);
  display:flex; gap:44px; flex-wrap:wrap}
.sig > div{flex:1 1 230px}
.sig .sigline{border-bottom:1px solid var(--ink); height:44px}
.sig small{font-size:11.5px; color:var(--muted)}
.pasteInfo{max-width:900px; margin:18px auto 0; display:flex; gap:14px; align-items:flex-start;
  background:var(--opal-tint); border-left:4px solid var(--opal); padding:14px 18px; font-size:14px}
.pasteInfo .pi-badge{flex:none; font-family:'IBM Plex Mono'; font-size:12px; background:var(--opal);
  color:#fff; padding:6px 10px; border-radius:2px; white-space:nowrap}
.pasteInfo strong{font-family:'Montserrat'; color:var(--opal-dark); display:block; margin-bottom:2px}
.sendStatus{max-width:900px; margin:14px auto 0; padding:11px 15px; font-size:13.5px; display:none}
.sendStatus.ok{display:block; background:var(--gruen-bg); border-left:3px solid var(--gruen)}
.sendStatus.warn{display:block; background:var(--amber-bg); border-left:3px solid var(--amber)}
.sendStatus strong{font-family:'Montserrat'}
.outbar{max-width:900px; margin:16px auto 0; display:flex; gap:11px; flex-wrap:wrap}
footer{padding:22px; font-size:12px; color:var(--muted); text-align:center}
@media print{header,footer,.noprint{display:none !important}
  body{background:#fff} .sheet{border:none; padding:0; max-width:none}}

/* Web app additions: sync warning banner, logout link */
.syncwarn{border-left:3px solid var(--amber); background:var(--amber-bg); padding:11px 24px;
  font-size:13.5px}
header .link + .link{margin-left:8px}