:root{
  --bg:#0c0a14; --panel:#15121f; --panel2:#1b1729; --line:#2a2540; --text:#ece9f6; --mute:#9a94b3;
  --green:#39ff14; --violet:#8b5cf6; --danger:#ff5d73;
  --r:16px;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.shell{max-width:1180px;margin:0 auto;padding:18px 18px 48px}
.loading,.err{color:var(--mute)}
.err{color:var(--danger)}

/* Kopf */
.top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
h1{margin:0;font-size:clamp(1.5rem,3.4vw,2.2rem);line-height:1.1;letter-spacing:-.02em;
   background:linear-gradient(90deg,var(--green),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{margin:.3rem 0 0;color:var(--mute)}
.adminbar{font-size:.85rem;background:rgba(139,92,246,.15);border:1px solid rgba(139,92,246,.5);padding:6px 12px;border-radius:999px}
.adminbar a{color:var(--green)}

/* Layout */
.layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:22px;align-items:start}
.stage-col{position:sticky;top:12px}
.right{display:flex;flex-direction:column;gap:18px}
.stage{border-radius:22px;padding:18px;border:1px solid var(--line);
  background:radial-gradient(70% 55% at 50% 38%,#2b1c52 0%,#150f26 62%,#0f0b1b 100%)}
.proto{position:relative;width:100%;aspect-ratio:763/685}
.layer,.fixed{position:absolute;inset:0;width:100%;height:100%}
.layer{background-color:var(--c,#888);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;transition:background-color .25s ease}
.fixed{pointer-events:none;user-select:none}
.mini{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;padding:10px 16px;border-radius:14px;
  background:var(--panel);border:1px solid var(--line);color:var(--text);text-decoration:none}
.mini span{color:var(--mute);font-size:.85rem}.mini strong{font-size:1.35rem;color:var(--green);font-variant-numeric:tabular-nums}
.mini::after{content:'Stückliste ↓';color:var(--mute);font-size:.8rem;order:2;margin-left:auto;padding-left:12px}
.mini strong{order:1;margin-left:12px}
.stage-note{margin:.7rem .2rem 0;color:var(--mute);font-size:.85rem}

/* Optionen */
.group{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.group h2{margin:0 0 .15rem;font-size:1rem}
.group .meta{color:var(--mute);font-size:.82rem;margin:0 0 .7rem}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:9px;padding:5px 13px 5px 5px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel2);color:var(--text);font:inherit;font-size:.9rem;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .05s}
.chip:hover:not(:disabled){border-color:#4a4270}
.chip:active:not(:disabled){transform:scale(.98)}
.chip:focus-visible,.seg button:focus-visible,.btn:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.chip .dot{width:26px;height:26px;border-radius:50%;background:var(--c);border:1px solid rgba(255,255,255,.4);flex:none}
.chip .pr{color:var(--mute);font-size:.8rem}
.chip[aria-pressed=true]{border-color:var(--green);box-shadow:0 0 0 1px var(--green),0 0 14px rgba(57,255,20,.25)}
.chip:disabled{opacity:.4;cursor:not-allowed}
.chip:disabled .nm{text-decoration:line-through}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.seg button{background:var(--panel2);color:var(--text);border:0;padding:8px 18px;font:inherit;cursor:pointer;border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed=true]{background:var(--green);color:#0c0a14;font-weight:700}
.checks{display:flex;flex-direction:column;gap:8px}
.check{display:flex;align-items:center;gap:10px;cursor:pointer}
.check input{accent-color:var(--green);width:18px;height:18px}
.check .pr{margin-left:auto;color:var(--mute);font-size:.85rem}

/* Stückliste */
.sum{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.sum h2{margin:0 0 .6rem;font-size:1.05rem}
.sum h3{margin:1rem 0 .25rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--violet)}
.sum table{width:100%;border-collapse:collapse}
.sum td{padding:5px 0;border-bottom:1px solid var(--line);vertical-align:top;font-size:.92rem}
.sum td.a{text-align:right;white-space:nowrap;padding-left:14px;font-variant-numeric:tabular-nums}
.sum small{display:block;color:var(--mute);font-size:.78rem}
.total{display:flex;justify-content:space-between;align-items:baseline;margin-top:1rem;padding-top:.8rem;border-top:2px solid var(--green)}
.total span{font-size:1rem}.total strong{font-size:1.8rem;color:var(--green);font-variant-numeric:tabular-nums}
.vat{color:var(--mute);font-size:.8rem;margin:.4rem 0 0}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:1rem}
.btn{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:8px 14px;font:inherit;font-size:.9rem;cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--violet)}
.btn.primary{background:var(--violet);border-color:var(--violet);color:#fff}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--green);color:#0c0a14;padding:8px 16px;border-radius:999px;font-weight:700;opacity:0;transition:opacity .2s;pointer-events:none;z-index:20}
.toast.on{opacity:1}
footer{margin-top:28px;color:var(--mute);font-size:.82rem}footer a{color:var(--mute)}

/* Mobil: Vorschau bleibt beim Scrollen sichtbar */
@media (max-width:820px){
  .layout{grid-template-columns:1fr;gap:14px}
  .stage-col{top:0;z-index:5;background:linear-gradient(var(--bg) 85%,transparent);padding:6px 0 10px;margin:0 -18px;padding-left:18px;padding-right:18px}
  .stage{padding:8px}
  .proto{width:min(100%,calc(32vh * 763 / 685));margin:0 auto}
  .stage-note{display:none}
  .mini{margin-top:6px;padding:6px 14px}
}

/* Druck: Vorschau + Stückliste */
@media print{
  body{background:#fff;color:#000}
  .adminbar,.btns,.stage-note,.opts,.toast,.mini,footer a{display:none!important}
  .layout{grid-template-columns:1fr 1fr}
  .stage-col{position:static}
  .sum,.group{background:#fff;border-color:#bbb;color:#000}
  .sum td{border-color:#ccc}.sum small,.vat{color:#444}.sum h3{color:#5b3bb5}
  .total strong{color:#000}.total{border-color:#000}
  h1{color:#000;background:none;-webkit-text-fill-color:#000}
}