/* Diamond Design – Gestaltung (hell und dunkel) */
:root{
  --bg:#F3F4F9;--surface:#FFFFFF;--sunk:#E9EBF3;--ink:#1A1F3D;--muted:#5B6184;--line:#D9DCE8;
  --brand:#23307A;--brand-ink:#FFFFFF;--accent:#C81E63;--cyan:#0E8FB3;--wood:#B9844A;
  --ok:#1E7F55;--ok-bg:#E1F3EA;--warn:#9A6212;--warn-bg:#FBEFD9;--bad:#B4322B;--bad-bg:#F9E3E1;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#121529;--surface:#1B1F38;--sunk:#252A4A;--ink:#ECEEF8;--muted:#A4A9C8;--line:#30365C;
  --brand:#8C99FF;--brand-ink:#121529;--accent:#FF5C9A;--cyan:#4CC6E8;--wood:#D9A56B;
  --ok:#5FD39C;--ok-bg:#183A2C;--warn:#F2B860;--warn-bg:#3D2E14;--bad:#FF8A80;--bad-bg:#43201F;color-scheme:dark}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:16px/1.5 "Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
h1,h2,h3{font-family:"Bricolage Grotesque","Atkinson Hyperlegible",system-ui,sans-serif;line-height:1.15;margin:0}
h1{font-size:1.8rem;margin-bottom:6px}h2{font-size:1.6rem}h3{font-size:1.1rem;margin-bottom:12px}
a{color:var(--brand)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
[hidden]{display:none!important}

.top{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:10px 16px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.1rem}
.logo svg{width:30px;height:30px;flex:none}
.brand{display:grid;line-height:1.15}
.brand small{font-family:"Atkinson Hyperlegible",system-ui,sans-serif;font-weight:400;font-size:.74rem;color:var(--muted)}
.userbox{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.userbox span{display:grid;line-height:1.2;text-align:right;margin-right:4px}
.userbox small{color:var(--muted);font-size:.78rem}

.admin{display:grid;grid-template-columns:230px 1fr;min-height:calc(100vh - 60px)}
.side{border-right:1px solid var(--line);padding:18px 10px;background:var(--surface)}
.side a,.side .navsoon{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:var(--muted);font-weight:700;text-decoration:none}
.side a[aria-current="page"]{background:var(--sunk);color:var(--ink);box-shadow:inset 3px 0 0 var(--accent)}
.side a:hover{background:var(--sunk)}
.navsoon{opacity:.55;cursor:default}
.navsoon em{margin-left:auto;font-style:normal;font-size:.7rem;border:1px solid var(--line);border-radius:999px;padding:0 7px}
.main{padding:24px clamp(14px,3vw,36px) 90px;max-width:1150px;width:100%}
.head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px;margin-bottom:18px}
.head p{margin:4px 0 0;color:var(--muted)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:18px}
.row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.sub{color:var(--muted);font-size:.88rem}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.8rem;font-weight:700;background:var(--sunk);color:var(--muted);white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)}.pill.warn{background:var(--warn-bg);color:var(--warn)}.pill.bad{background:var(--bad-bg);color:var(--bad)}
.btn{display:inline-block;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 14px;cursor:pointer;font-weight:700;color:var(--ink);text-decoration:none}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn.accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.small{padding:5px 10px;font-size:.88rem}
.form{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));align-items:end}
.stack{display:grid;gap:12px}
label{display:grid;gap:4px;font-size:.88rem;color:var(--muted);font-weight:700}
input,select,textarea{font-weight:400;border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:9px 10px;width:100%}
.flash{border-radius:10px;padding:12px 14px;margin-bottom:16px;font-weight:700}
.flash.ok{background:var(--ok-bg);color:var(--ok)}.flash.info{background:var(--sunk);color:var(--ink)}
.flash.bad{background:var(--bad-bg);color:var(--bad)}.flash.warn{background:var(--warn-bg);color:var(--warn)}
.actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;align-items:center}
.actions form{margin:0}
.actions select{width:auto;padding:5px 8px}
.teamrow.inactive{opacity:.6}
.tblwrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tbl th{text-align:left;font-size:.85rem;color:var(--muted);border-bottom:1px solid var(--line);padding:6px 8px}
.tbl td{padding:8px;border-bottom:1px solid var(--line)}
.matrix th{white-space:normal;font-size:.8rem;vertical-align:bottom}
.matrix td:not(:first-child),.matrix th:not(:first-child){text-align:center}

.powered{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:8px 16px 8px 10px}
.powered span{display:grid;line-height:1.15}
.powered small{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700}
.powered b{font-family:"Bricolage Grotesque",sans-serif}
.side .powered{margin:20px 8px 0}

.loginmain{max-width:440px;margin:0 auto;padding:clamp(24px,8vh,80px) 16px 40px}
.loginbox h1{margin-bottom:2px}
.loginbox .sub{margin:0 0 16px}
.loginfoot{display:flex;justify-content:center;margin-top:10px}

.mnav{display:none}
@media (max-width:820px){
  .admin{grid-template-columns:1fr}
  .side{display:none}
  .mnav{display:flex;overflow-x:auto;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
  .mnav a,.mnav .navsoon{flex:1 0 70px;display:grid;justify-items:center;gap:2px;padding:9px 2px 8px;font-size:.72rem;font-weight:700;color:var(--muted);text-decoration:none}
  .mnav a[aria-current="page"]{color:var(--accent)}
  .mnav .navsoon em{display:none}
  .mnav span{font-size:1.15rem}
  .row{grid-template-columns:1fr}
  .actions{justify-content:flex-start}
  .userbox span{display:none}
}

/* ---------- Stufe 2: Lager und Geräte ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 14px;font-weight:700;color:var(--muted);text-decoration:none;font-size:.92rem}
.chip[aria-current="true"]{border-color:var(--ink);color:var(--ink);background:var(--sunk)}
.warnpanel{border-color:var(--bad);background:linear-gradient(var(--bad-bg),var(--bad-bg)) top/100% 4px no-repeat,var(--surface)}
.num{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;font-weight:700}
.plus{color:var(--ok)}.minus{color:var(--bad)}
.stockrow{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}
.stockrow:last-child{border-bottom:0}
.stockinfo{display:flex;gap:10px;align-items:flex-start}
.stockact{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.swatch{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none;margin-top:2px}
.meter{height:6px;border-radius:3px;background:var(--sunk);overflow:hidden;margin-top:6px;max-width:260px}
.meter i{display:block;height:100%;background:var(--ok)}
.meter i.low{background:var(--bad)}
.movebox{grid-column:1/-1;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.movebox summary{cursor:pointer;font-weight:700;color:var(--brand);padding:2px 0}
.movebox[open] summary{margin-bottom:10px}
.btnpair{display:flex;gap:8px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.cards .panel{margin:0}
.devhead{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.devhead h3{margin:0 0 2px}
dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:12px 0;font-size:.92rem}
dt{color:var(--muted)}dd{margin:0}
details.panel summary{cursor:pointer}
.tbl .r{text-align:right;white-space:nowrap}
.printdoc{background:#fff;color:#111;padding:24px;max-width:900px;margin:0 auto}
.printdoc .tbl th,.printdoc .tbl td{border-color:#ccc;color:#111}
.signrow{display:flex;gap:40px;margin-top:60px}.signrow div{flex:1;border-top:1px solid #111;padding-top:4px;font-size:.85rem}
@media print{.noprint{display:none}.printdoc{padding:0}}
@media (max-width:820px){.stockrow{grid-template-columns:1fr}.stockact{justify-content:flex-start}}

/* ---------- Stufe 3: Kunden, Bestellungen, Belege ---------- */
.crow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:12px 6px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;border-radius:6px}
.crow:last-child{border-bottom:0}
.crow:hover{background:var(--sunk)}
.searchrow{display:flex;gap:8px;margin-bottom:8px}
.searchrow input{flex:1}
.kpi{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:0 10px 10px 0;padding:12px 16px;display:grid}
.kpi span{color:var(--muted);font-size:.9rem}
.kpi b{font-family:"Bricolage Grotesque",sans-serif;font-size:1.6rem;font-variant-numeric:tabular-nums}
.addr{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:grid;gap:8px;margin:0}
.addr legend{font-weight:700;color:var(--muted);font-size:.88rem;padding:0 4px}
.addr .two{display:grid;grid-template-columns:110px 1fr;gap:8px}
.check{display:flex;gap:8px;align-items:center;color:var(--ink);font-weight:400}
.check input{width:auto}
.itemrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;padding:10px 0;border-bottom:1px dashed var(--line)}
.btn.danger{color:var(--bad)}
.tbl tr.sum td{font-weight:700;border-bottom:0}
.docpage{background:#e9ebf3;color:#1b1f2a;padding:16px}
.doctools{max-width:210mm;margin:0 auto 12px;display:flex;gap:8px;flex-wrap:wrap}
.doc{background:#fff;color:#1b1f2a;max-width:210mm;margin:0 auto;padding:clamp(18px,5vw,56px);font:14px/1.45 "Atkinson Hyperlegible",Arial,sans-serif;border:1px solid #d5d8e2}
.doc h1{font-family:"Bricolage Grotesque",Arial,sans-serif;font-size:24px;margin:28px 0 4px;color:#1b1f2a}
.doc table{width:100%;border-collapse:collapse;margin:18px 0}
.doc th{text-align:left;border-bottom:2px solid #1b1f2a;padding:6px 4px;font-size:12px}
.doc td{border-bottom:1px solid #d5d8e2;padding:6px 4px;vertical-align:top}
.doc .r{text-align:right;white-space:nowrap}
.doc .pos{width:42px}
.doc .dhead{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.doc .dlogo{font-family:"Bricolage Grotesque",Arial,sans-serif;font-weight:800;font-size:20px;color:#23307A}
.doc .meta{text-align:right;font-size:13px}
.doc .small{font-size:11px;color:#555}
.doc .sender{font-size:10px;text-decoration:underline;color:#555;margin-top:36px}
.doc .rcpt{margin-top:6px;min-height:90px;font-size:15px}
.doc .sumrow td{font-weight:700;border-bottom:2px solid #1b1f2a;font-size:15px}
.doc .sign{margin-top:60px;display:flex;gap:40px}.doc .sign div{flex:1;border-top:1px solid #1b1f2a;padding-top:4px;font-size:12px}
.doc .paybox{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:10px 0}
.doc .powerline{display:flex;align-items:center;gap:8px;margin-top:14px}
.doc.labelpage{display:grid;place-items:center}
.label{width:100mm;max-width:100%;min-height:62mm;border:1px dashed #888;padding:5mm 6mm;display:flex;flex-direction:column;justify-content:space-between}
.label .from{font-size:9px;border-bottom:1px solid #ccc;padding-bottom:3px}
.label .to{font-size:17px;line-height:1.3;font-weight:700}
.label .ref{font-size:10px;display:flex;justify-content:space-between}
@media print{.docpage{background:#fff;padding:0}.doc{border:0;padding:0;max-width:none}@page{size:A4;margin:14mm}}

/* ---------- Stufe 4: Kassenbuch und Prüfung ---------- */
.kpi.k-paypal{border-left-color:var(--cyan)}.kpi.k-bar{border-left-color:var(--wood)}.kpi.k-sum{border-left-color:var(--accent)}
.kpis{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.lrow{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.lrow:last-child{border-bottom:0}
.struck{text-decoration:line-through;opacity:.7}
fieldset.plain{border:0;margin:0;padding:0;min-width:0}
fieldset.plain[disabled] input,fieldset.plain[disabled] select,fieldset.plain[disabled] textarea{opacity:.7}
.printdoc h3{margin-top:22px}

/* ---------- Stufe 5: Produkte ---------- */
.prow{display:flex;gap:12px;align-items:center}
.pthumb{width:52px;height:52px;border-radius:8px;background:var(--sunk);display:grid;place-items:center;overflow:hidden;flex:none}
.pthumb img{width:100%;height:100%;object-fit:cover}.pthumb svg{width:70%}
.crow.inactive{opacity:.55}
.ithumb{width:44px;height:44px;border-radius:6px;object-fit:cover;float:left;margin-right:10px}

/* ---------- Auswertung und Belege ---------- */
.chart{width:100%;height:auto;max-height:320px}
.share{margin:10px 0}
.sharehead{display:flex;justify-content:space-between;gap:10px}
.meter.wide{max-width:none}
a.pill{text-decoration:none}