body{background:#111317;color:#E6EAF0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
  input,select,textarea{background:#222631;border:1px solid #2C323E;border-radius:.75rem;padding:.5rem .75rem;width:100%;outline:none;color:#E6EAF0;color-scheme:dark}
  input:focus,select:focus,textarea:focus{border-color:var(--accent)}
  .btn{background:var(--accent);color:var(--on-accent);font-weight:600;border-radius:9999px;padding:.55rem 1.1rem}
  .btn2{background:#222631;border:1px solid #2C323E;border-radius:9999px;padding:.5rem 1rem}
  .btn2.on{background:var(--accentd);border-color:var(--accent)}
  .sidebar{transform:translateX(-100%);transition:transform .25s}.sidebar.open{transform:none}
  ::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background:#2C323E;border-radius:8px}

  /* ---------- Hallenszene (CSS-3D, orthografisch) ---------- */
  #stage{transition:height .9s cubic-bezier(.4,0,.2,1)}
  #scaler{position:absolute;left:50%;top:50%;width:760px;height:420px;margin:-210px 0 0 -380px;transition:transform .9s cubic-bezier(.4,0,.2,1)}
  #world{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateZ(var(--rz,0deg));transition:transform .9s cubic-bezier(.4,0,.2,1)}
  .floor{position:absolute;inset:0;background:#171B22;border:3px solid #2A3140;border-radius:6px;
    background-image:linear-gradient(#1F242D 1px,transparent 1px),linear-gradient(90deg,#1F242D 1px,transparent 1px);background-size:40px 40px}
  .box{position:absolute;transform-style:preserve-3d;cursor:pointer}
  .face{position:absolute;left:0;top:0;transform-origin:0 0;background:var(--c)}
  .f-s{filter:brightness(.8)}.f-e{filter:brightness(.62)}.f-n,.f-w{filter:brightness(.5)}
  .f-top{display:flex;align-items:center;justify-content:center;overflow:hidden}
  .toplbl{font-size:14px;font-weight:700;color:#fff;text-shadow:0 1px 2px #000;text-align:center;line-height:1.1}
  .toplbl.v{writing-mode:vertical-rl}
  .carlbl{font-size:12px;font-weight:700;color:#fff;text-shadow:0 1px 2px #000;text-align:center;line-height:1.1}
  .cells{display:grid;width:100%;height:100%}
  .cell{border:1px solid rgba(0,0,0,.4);background:rgba(255,255,255,.07)}
  .cell.has{background:rgb(var(--accent-rgb) / .28)}
  .cell.hl{background:var(--accent);animation:glow 1s infinite alternate}
  .hlbox .f-top{box-shadow:inset 0 0 0 4px var(--accent)}
  .stall{position:absolute;border:2px dashed #6b8a5a;background:rgba(107,138,90,.18);border-radius:4px;cursor:pointer;transform:translateZ(.5px);
    font-weight:800;font-size:18px;color:#d9e8cf;padding:3px 6px}
  .stall.perm{border-color:#c0584a;background:rgba(192,88,74,.2);color:#ffd2cb}
  .stall.now{border-color:#d9a43a;background:rgba(217,164,58,.2);color:#FFF1C9}
  .stall.hl{animation:glow2 1s infinite alternate;border-style:solid;border-color:var(--accent)}
  .zonebox .toplbl{font-size:11px}
  .pin{position:absolute;width:0;height:0;transform-origin:0 0;pointer-events:none}
  .pin-in{position:absolute;left:0;bottom:0;transform:translateX(-50%) scale(calc(1 / var(--s,1)));transform-origin:50% 100%;white-space:nowrap;text-align:center;animation:bob .8s infinite alternate}
  .pin-in b{display:block;background:var(--accent);color:var(--on-accent);border-radius:9999px;padding:3px 10px;font-size:14px;box-shadow:0 2px 8px #000a}
  .pin-in i{display:block;font-style:normal;color:var(--accent);font-size:20px;line-height:1;text-shadow:0 2px 4px #000}
  @keyframes glow{from{box-shadow:0 0 0 0 var(--accent),inset 0 0 6px #fff}to{box-shadow:0 0 14px 4px var(--accent),inset 0 0 12px #fff}}
  @keyframes glow2{from{background:rgb(var(--accent-rgb) / .2)}to{background:rgb(var(--accent-rgb) / .6)}}
  @keyframes bob{from{margin-bottom:0}to{margin-bottom:10px}}
/* ---------- v3: hochwertige 3D-Optik ---------- */
#stage{background:radial-gradient(ellipse at 50% 25%,#363E4B 0%,#1B2029 55%,#0B0D11 100%)}
#stage::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 15% 0%,rgba(150,200,255,.20),transparent 55%),radial-gradient(ellipse at 50% 115%,rgba(0,0,0,.55),transparent 60%)}
#stage.editing{touch-action:none;user-select:none;-webkit-user-select:none}
.floor{--fl:radial-gradient(ellipse at 30% 20%,rgba(190,220,255,.12),transparent 62%),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .56 0 0 0 0 .64 0 0 0 .25 0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>") 0 0/300px 300px,linear-gradient(rgba(0,0,0,.28) 1px,transparent 1px) 0 0/160px 160px,linear-gradient(90deg,rgba(0,0,0,.28) 1px,transparent 1px) 0 0/160px 160px,linear-gradient(135deg,#343C49,#232832 55%,#2E3541);
  background:var(--fl);border:3px solid #3E4757;border-radius:6px;box-shadow:inset 0 0 80px rgba(0,0,0,.55)}
/* Raster nur im Bearbeitungsmodus sichtbar */
.floor.edit{background:linear-gradient(rgb(var(--accent-rgb) / .18) 1px,transparent 1px) 0 0/20px 20px,linear-gradient(90deg,rgb(var(--accent-rgb) / .18) 1px,transparent 1px) 0 0/20px 20px,linear-gradient(rgb(var(--accent-rgb) / .42) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgb(var(--accent-rgb) / .42) 1px,transparent 1px) 0 0/40px 40px,var(--fl)}
.shadow{position:absolute;background:rgba(4,6,10,.6);filter:blur(7px);transform:translateZ(.2px);pointer-events:none;border-radius:6px}
.f-top{background:linear-gradient(145deg,rgba(255,255,255,.24),rgba(255,255,255,0) 55%,rgba(0,0,0,.22)),var(--ct,var(--c))}
.f-s,.f-e,.f-n,.f-w{background:linear-gradient(to bottom,rgba(255,255,255,.16),rgba(0,0,0,.42)),var(--c)}
.f-s{filter:brightness(.88)}.f-e{filter:brightness(.66)}
.wall,.wall *{pointer-events:none}
.wall .f-s,.wall .f-e{background:linear-gradient(to bottom,#cdd4de,#9aa4b3 70%,#808a99)}
.wall .face::after{content:'';position:absolute;left:0;right:0;bottom:0;height:7%;background:#3a414d}
.win{position:absolute;top:22%;width:56px;height:38%;background:linear-gradient(160deg,#d8eeff,#86aed4 55%,#4f7ca8);border:3px solid #3a414d;box-shadow:inset 0 0 10px #fff9,0 2px 4px #0006}
.gate{position:absolute;height:6px;background:linear-gradient(90deg,#5d6b80,#454E5E);border-radius:3px;transform:translateZ(.3px)}
.hazard{background:repeating-linear-gradient(45deg,#f2c200 0 8px,#222 8px 16px)}
.cells{gap:2px;padding:2px;box-sizing:border-box}
.cell{position:relative;background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(0,0,0,.2));border:1px solid rgba(0,0,0,.55);border-radius:2px}
.cell::after{content:'';position:absolute;right:4px;top:50%;width:3px;height:36%;transform:translateY(-50%);background:#dcdcdc;border-radius:2px;box-shadow:0 0 2px #000}
.cell.has{background:linear-gradient(135deg,rgb(var(--accent-rgb) / .5),rgb(var(--accent-rgb) / .16))}
.stall{border:3px solid rgba(150,215,130,.85);border-radius:3px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(0,0,0,.12));color:rgba(214,240,200,.95);text-shadow:0 1px 3px #000a;box-shadow:inset 0 0 22px rgba(0,0,0,.3)}
.stall.perm{border-color:#e0786a;background:linear-gradient(180deg,rgba(192,88,74,.32),rgba(192,88,74,.14));color:#ffd6cf}
.stall.now{border-color:#e6b84f;background:linear-gradient(180deg,rgba(217,164,58,.3),rgba(217,164,58,.12));color:#FFF1C9}
.stall.hl{border-color:var(--accent);border-style:solid}
.stall.sel{outline:3px solid #4ade80;outline-offset:2px}
.selbox .f-top{box-shadow:inset 0 0 0 4px #4ade80}
/* ---------- v4: Kamera ---------- */
#scaler,#world{transition:none!important}
#stage{touch-action:pan-y;cursor:grab}
#stage:active{cursor:grabbing}
.cbtn{width:38px;height:38px;border-radius:9999px;background:rgba(26,29,36,.86);border:1px solid #2C323E;color:var(--accent);font-size:18px;line-height:1;backdrop-filter:blur(4px)}
.cbtn:hover{background:var(--accentd)}
.wgrp,.wgrp *{transition:none}
.wgrp.wfront{visibility:hidden}
.wallplane{position:absolute;left:0;top:0;transform-origin:0 0;transform-style:preserve-3d}
.wo{position:absolute;box-sizing:border-box;cursor:pointer}
.wo.sel{outline:3px solid #4ade80;outline-offset:2px}
.wwin{background:linear-gradient(160deg,#d8eeff,#86aed4 55%,#4f7ca8);border:3px solid #3a414d;box-shadow:inset 0 0 10px #fff9,inset 0 0 0 2px #c4cbd6,0 2px 4px #0006}
.wwin::after{content:'';position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:#3a414d}
.wposter{background-size:cover;background-position:center;border:4px solid #EDF1F7;box-shadow:0 3px 8px #0008}
.wholder{background:radial-gradient(circle,#0006 1.2px,transparent 1.6px) 0 0/9px 9px,linear-gradient(160deg,#566071,#3A4352);border:3px solid #5d6b80;border-radius:3px;box-shadow:0 3px 6px #0007;overflow:hidden}
.wholder i{position:absolute;display:block;border-radius:2px;top:14%}
.wgrp{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.wgrp .wo,.wgrp .box{pointer-events:auto}
.wall,.wall *{pointer-events:none!important}
.wall .f-n,.wall .f-w{background:linear-gradient(to bottom,#c4cbd6,#97a1b0 70%,#7d8796);filter:brightness(.78)}
.wall .f-w{filter:brightness(.7)}
.crate .f-top{background:repeating-linear-gradient(90deg,#7a90ad 0 6px,#6a7f9a 6px 7px)}
.toplbl:not(.v),.carlbl{transform:rotate(calc(40deg - var(--rz,40deg)))}
#lpRing{position:fixed;z-index:80;width:84px;height:84px;margin:-42px 0 0 -42px;pointer-events:none;display:none;filter:drop-shadow(0 2px 6px #000a)}
#lpRing.on{display:block}
#lpRing svg{width:100%;height:100%;transform:rotate(-90deg)}
#lpRing .trk{stroke:rgba(10,12,16,.7)}
#lpRing .bar{stroke:var(--accent);stroke-linecap:round}
#lpRing.done{animation:lpPop .26s ease-out}
@keyframes lpPop{0%{transform:scale(1)}50%{transform:scale(1.3)}100%{transform:scale(1)}}
#editSheet{position:fixed;left:0;right:0;bottom:0;z-index:45;max-height:46vh;overflow-y:auto;background:#1A1D24;border-top:2px solid var(--accentd);border-radius:24px 24px 0 0;padding:14px 16px 20px;box-shadow:0 -10px 30px #000b}
#stage.editing{-webkit-touch-callout:none;-webkit-user-select:none}
.wlabel{position:absolute;left:0;right:0;bottom:-18px;text-align:center;font-size:11px;font-weight:700;color:#DDE3EC;text-shadow:0 1px 2px #000;white-space:nowrap;pointer-events:none}
/* ---- Plattform-Ergänzungen ---- */
.mailpop{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:16px}
.mailbox{background:#1A1D24;border:1px solid var(--accentd);border-radius:24px;max-width:440px;width:100%;padding:20px;box-shadow:0 20px 60px #000}
.mailcode{font-size:2rem;letter-spacing:.35em;text-align:center;font-weight:800;color:var(--accent);background:#222631;border-radius:16px;padding:12px 0 12px .35em}
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--accent);color:var(--on-accent);font-weight:600;padding:10px 18px;border-radius:9999px;opacity:0;pointer-events:none;transition:.25s;z-index:120}
#toast.on{opacity:1;transform:translate(-50%,0)}
.tab{padding:.55rem 1rem;border-radius:9999px;background:#222631;border:1px solid #2C323E;white-space:nowrap}
.tab.on{background:var(--accentd);border-color:var(--accent)}
.sw{width:2.75rem;height:1.5rem;background:#2C323E;border-radius:9999px;position:relative;transition:.2s;display:inline-block}
.sw::after{content:'';position:absolute;top:.125rem;left:.125rem;width:1.25rem;height:1.25rem;border-radius:9999px;background:#fff;transition:.2s}
input:checked+.sw{background:var(--accent)}input:checked+.sw::after{transform:translateX(1.25rem)}
input:disabled+.sw{opacity:.4}
table.tbl{width:100%;font-size:.875rem;border-collapse:collapse}
table.tbl th{color:rgba(255,255,255,.5);text-align:left;font-weight:500;padding:.5rem}
table.tbl td{padding:.6rem .5rem;border-top:1px solid #2C323E;vertical-align:middle}
.hidden{display:none!important}
/* ---- v4: Carbon/Cyan-Design, Shell, ⋮-Menü ---- */
:root{--accent-rgb:0 168 232;--accent:rgb(0 168 232);--accentd-rgb:0 50 70;--accentd:rgb(0 50 70);--on-accent:#0b0f14}
body{background:#111317 radial-gradient(1200px 500px at 80% -10%,rgb(var(--accent-rgb) / .07),transparent 60%) no-repeat}
.hdrbar{background:linear-gradient(180deg,#1B1F27,#15181E);box-shadow:0 1px 0 rgb(var(--accent-rgb) / .45),0 8px 24px #0008}
.pill{background:#20242D;border:1px solid #2C323E}
.more{width:46px;height:46px;border-radius:9999px;background:#20242D;border:1px solid #2C323E;font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.more:hover,.more.on{border-color:var(--accent);color:var(--accent)}
.menu{position:absolute;right:0;top:100%;margin-top:10px;min-width:270px;background:#1A1D24;border:1px solid #2C323E;border-radius:22px;padding:8px;box-shadow:0 22px 60px #000d;z-index:60}
.menu a,.menu .mrow{display:flex;gap:12px;align-items:center;padding:.7rem .9rem;border-radius:14px;cursor:pointer;color:inherit;text-decoration:none}
.menu a:hover{background:#222631}.menu a.on{background:var(--accentd);color:#fff}
.menu .sep{height:1px;background:#2C323E;margin:6px 6px}
.menu .mhead{display:flex;gap:10px;align-items:center;padding:.6rem .9rem}
.sbhead{background:linear-gradient(135deg,#1F242D,#171A20);border-bottom:2px solid var(--accent)}
.sbrow{width:100%;text-align:left;padding:.7rem 1rem;border-radius:16px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.sbrow:hover{background:#222631}.sbrow.on{background:var(--accentd)}
.lockbox{background:#1A1D24;border:1px solid #2C323E;border-radius:24px;padding:2.5rem;text-align:center}
/* ---- 3D-Modelle (Sprites) ---- */
.msprite{position:absolute;width:0;height:0;transform-origin:0 0;pointer-events:none}
.msprite img{position:absolute;left:0;top:0;transform:translate(-50%,-50%);max-width:none;pointer-events:auto;cursor:pointer;user-select:none;-webkit-user-drag:none}
.fp{position:absolute;transform:translateZ(.4px);border:2px solid transparent;border-radius:4px;cursor:pointer}
#stage.editing .fp{border:2px dashed rgba(255,255,255,.28)}
.fp.sel{border:2px solid var(--accent);background:rgb(var(--accent-rgb) / .16)}
.fp.hl{border:3px solid var(--accent);animation:glow2 .9s infinite alternate}