/* ====================================================================
   RAUM v2 — Glas/Carbon-Tisch, Kristallkugel-Avatare, Holo-Monitore
   ==================================================================== */
#roomView{ position:fixed; inset:0; display:flex; z-index:var(--z-panels); background:#05070f; }
.scene-area{ position:relative; flex:1; min-width:0; }
.stage{
  position:absolute; inset:0; overflow:hidden; perspective:1500px; perspective-origin:50% 38%;
  background:
    radial-gradient(70% 45% at 50% 0%, rgba(79,179,255,.14), transparent 60%),
    radial-gradient(60% 40% at 15% 60%, rgba(176,107,255,.10), transparent 60%),
    radial-gradient(60% 40% at 85% 60%, rgba(79,179,255,.08), transparent 60%),
    linear-gradient(180deg,#0a1230 0%, #070b1c 45%, #05070f 100%);
}
/* Boden mit Fluchtlinien */
.stage::before{
  content:""; position:absolute; left:50%; top:58%; width:220vw; height:150vh;
  transform:translateX(-50%) rotateX(72deg); transform-origin:top center;
  background:
    repeating-linear-gradient(90deg, transparent 0 78px, rgba(79,179,255,.07) 78px 80px),
    repeating-linear-gradient(0deg, transparent 0 78px, rgba(176,107,255,.06) 78px 80px),
    radial-gradient(60% 55% at 50% 0%, rgba(30,44,90,.6), transparent 70%);
  -webkit-mask-image:radial-gradient(60% 70% at 50% 12%, #000 0%, transparent 72%);
          mask-image:radial-gradient(60% 70% at 50% 12%, #000 0%, transparent 72%);
  pointer-events:none;
}
/* Decken-Neonbogen */
.stage::after{
  content:""; position:absolute; left:50%; top:-6vh; width:120vw; height:26vh; transform:translateX(-50%);
  border-radius:50%; border:2px solid rgba(79,179,255,.55); box-shadow:0 0 30px rgba(79,179,255,.35), inset 0 -20px 40px rgba(176,107,255,.12);
  pointer-events:none;
}

.room-topbar{ position:absolute; left:0; right:0; top:0; z-index:12; display:flex; align-items:center; gap:10px; padding:12px 14px; background:linear-gradient(#05070fdd,#05070f00); }
.room-topbar .spacer{ flex:1; }
#ownerTools .btn{ padding:6px 12px; font-size:12.5px; }
#ownerTools .chip{ font-size:11.5px; }
#ownerTools .chip .x{ cursor:pointer; margin-left:4px; color:var(--ink-3); }
#ownerTools .chip .x:hover{ color:var(--bad); }

/* Namensschild des Raums (wie das Türschild) */
.room-sign{
  position:absolute; left:50%; top:60px; transform:translateX(-50%); z-index:8; width:min(640px, 92vw); padding:12px 20px 12px;
  background:linear-gradient(180deg, rgba(12,28,64,.62), rgba(8,18,44,.82)); border:1.5px solid #5fe0ff; border-radius:16px;
  box-shadow:0 0 22px rgba(79,179,255,.45), inset 0 0 26px rgba(79,179,255,.10); text-align:center; animation:holoFlicker 7s infinite;
}
.room-sign .t{ font-family:var(--font-display); font-size:clamp(24px, 3.6vw, 40px); font-weight:600; color:#f2f9ff; line-height:1.05; letter-spacing:.01em; text-shadow:0 0 14px rgba(79,179,255,.5); }
.room-sign .i{ font-size:12px; color:#9fd8ff; margin-top:4px; }
.room-sign .s{ margin-top:6px; display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.room-sign .s .chip{ font-size:11px; padding:3px 9px; }
.room-sign.archiviert{ border-color:#8a94a8; box-shadow:0 0 14px rgba(138,148,168,.35); }

/* Holo-Monitore an der Rückwand */
.monitors{
  position:absolute; left:50%; top:clamp(128px, 24vh, 176px); transform:translateX(-50%) perspective(1400px); z-index:7;
  display:flex; gap:14px; width:min(1080px, 96vw); align-items:stretch; justify-content:center;
}
.monitor{
  flex:1 1 0; min-width:0; max-width:360px; height:clamp(120px, 26vh, 172px); overflow:hidden; padding:10px 12px;
  background:linear-gradient(180deg, rgba(10,24,58,.66), rgba(6,14,36,.86)); border:1px solid rgba(79,179,255,.65); border-radius:12px;
  box-shadow:0 0 18px rgba(79,179,255,.35), inset 0 0 30px rgba(79,179,255,.08); color:#dff2ff; font-size:12.5px; position:relative;
}
.monitor:nth-child(1){ transform:rotateY(14deg); } .monitor:nth-child(3){ transform:rotateY(-14deg); }
.monitor::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg, transparent 0 3px, rgba(79,179,255,.035) 3px 4px); pointer-events:none; }
.monitor .mh{ font-family:var(--font-mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:#8fd1ff; margin-bottom:6px; display:flex; justify-content:space-between; align-items:center; }
.monitor .mh b{ color:#fff; letter-spacing:.05em; font-size:10.5px; }
.monitor ul{ list-style:none; margin:0; padding:0; }
.monitor li{ padding:3px 0; border-top:1px solid rgba(79,179,255,.12); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.monitor li.done{ color:#7fb0d0; text-decoration:line-through; }
.monitor li .b{ display:inline-block; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; padding:1px 6px; border-radius:999px; margin-right:6px; border:1px solid rgba(79,179,255,.4); color:#9fd8ff; }
.monitor li .b.gut{ color:#3dff8a; border-color:rgba(61,255,138,.5); } .monitor li .b.fehler{ color:#ff6b6b; border-color:rgba(255,107,107,.5); }
.monitor li .b.entscheidung{ color:#ffd27a; border-color:rgba(255,210,122,.5); } .monitor li .b.rueckblick{ color:#b06bff; border-color:rgba(176,107,255,.5); }
.monitor .lage{ display:grid; grid-template-columns:78px 1fr; gap:10px; align-items:center; }
.monitor .gauge{ width:78px; height:78px; }
.monitor .gauge text{ font:600 16px var(--font-ui); fill:#fff; }
.monitor .kv{ display:flex; justify-content:space-between; gap:8px; padding:2px 0; font-size:12px; }
.monitor .kv .dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:#8a94a8; box-shadow:0 0 8px currentColor; margin-right:6px; vertical-align:middle; }
.monitor .kv .dot.on{ background:#3dff8a; color:#3dff8a; } .monitor .kv .dot.off{ background:#ff6b6b; color:#ff6b6b; } .monitor .kv .dot.warn{ background:#ffb347; color:#ffb347; }
.monitor .bar{ height:6px; border-radius:99px; background:rgba(79,179,255,.15); overflow:hidden; margin-top:3px; }
.monitor .bar i{ display:block; height:100%; background:linear-gradient(90deg,#4fb3ff,#b06bff); }
.monitor .leer{ color:#7fb0d0; padding:6px 0; }
.monitor .rb{ font-size:11.5px; color:#dff2ff; white-space:normal; line-height:1.35; max-height:60px; overflow:hidden; }

/* Tisch */
.table-wrap{ position:absolute; left:50%; top:60%; transform:translate(-50%,-50%); z-index:3; width:min(980px, 96vw); pointer-events:none; }
.table-img{ width:100%; display:block; filter:drop-shadow(0 40px 60px rgba(0,0,0,.7)); opacity:.96; }
.holo{ position:absolute; left:50%; top:38%; width:120px; height:120px; transform:translate(-50%,-50%); }
.holo .ring{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(79,179,255,.6); box-shadow:0 0 14px rgba(79,179,255,.35); animation:spin 9s linear infinite; }
.holo .ring:nth-child(2){ inset:14px; border-color:rgba(176,107,255,.55); animation-duration:6s; animation-direction:reverse; }
.holo .ring:nth-child(3){ inset:28px; border-style:dashed; animation-duration:13s; }
.holo .core{ position:absolute; left:50%; top:50%; width:18px; height:18px; border-radius:50%; transform:translate(-50%,-50%); background:#7ee0ff; box-shadow:0 0 22px #4fb3ff, 0 0 60px rgba(79,179,255,.5); animation:pulse 2.4s ease-in-out infinite; }
.holo .label{ position:absolute; left:50%; top:calc(100% + 6px); transform:translateX(-50%); font-family:var(--font-mono); font-size:10px; letter-spacing:.24em; color:#8fd1ff; white-space:nowrap; }
@keyframes spin{ to{ transform:rotate(360deg) } } @keyframes pulse{ 50%{ transform:translate(-50%,-50%) scale(1.25); opacity:.8 } }

/* Datei-Karten auf dem Tisch */
.file-cards{ position:absolute; left:14%; right:14%; top:52%; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; pointer-events:auto; }
.file-card{
  padding:5px 9px; font-family:var(--font-mono); font-size:10px; color:#dff2ff; background:rgba(10,24,58,.7); border:1px solid rgba(79,179,255,.6); border-radius:6px;
  box-shadow:0 0 12px rgba(79,179,255,.35); transform:rotateX(38deg); max-width:150px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; animation:cardFloat 4s ease-in-out infinite;
}
.file-card:nth-child(2n){ animation-delay:-1.3s; border-color:rgba(176,107,255,.6); box-shadow:0 0 12px rgba(176,107,255,.35); }
@keyframes cardFloat{ 50%{ transform:rotateX(38deg) translateY(-3px) } }

/* Sitzplätze: Kristallkugeln */
#seats{ position:absolute; inset:0; z-index:8; pointer-events:none; }
.seat{ position:absolute; transform:translate(-50%,-50%); width:var(--sz,90px); text-align:center; pointer-events:auto; cursor:pointer; transition:transform .2s; }
.seat:hover{ transform:translate(-50%,-50%) scale(1.06); }
.seat .orb{ width:calc(var(--sz,90px) * .62); height:auto; display:block; margin:0 auto; filter:drop-shadow(0 0 14px rgba(79,179,255,.6)); animation:orbPulse 3.2s ease-in-out infinite; }
.seat.k-raumleiter .orb{ filter:drop-shadow(0 0 18px rgba(255,210,122,.75)); animation-duration:2.4s; }
.seat.k-honcho .orb{ filter:drop-shadow(0 0 16px rgba(61,255,138,.65)); animation-delay:-1s; }
.seat.k-paperclip .orb{ filter:drop-shadow(0 0 16px rgba(61,255,138,.5)); animation-delay:-2s; }
.seat.human .orb{ filter:drop-shadow(0 0 18px rgba(79,179,255,.8)); }
.seat.idle .orb{ opacity:.55; animation:none; }
@keyframes orbPulse{ 50%{ transform:translateY(-6px) scale(1.05); } }
.seat .who{ margin-top:2px; font-weight:600; font-size:12.5px; color:#fff; text-shadow:0 2px 10px #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.seat .role{ font-size:10.5px; color:#9fd8ff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.seat .status{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; color:#7fb0d0; margin-top:1px; }
.seat.k-raumleiter .status, .seat.k-raumleiter .role{ color:#ffd27a; }
.seat .plate{ display:inline-block; margin-top:2px; font-family:var(--font-mono); font-size:9px; letter-spacing:.12em; padding:1px 7px; border-radius:999px; border:1px solid rgba(79,179,255,.45); color:#9fd8ff; }
.seat.k-raumleiter .plate{ border-color:rgba(255,210,122,.6); color:#ffd27a; }

.hint-bar{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:9; display:flex; gap:8px; flex-wrap:wrap; justify-content:center; max-width:96vw; }
.hint-bar .chip{ background:rgba(8,18,44,.75); border-color:rgba(79,179,255,.4); color:#dff2ff; }

.dust{ position:absolute; width:2px; height:2px; border-radius:50%; background:#9fd8ff; box-shadow:0 0 6px #4fb3ff; animation:dustFloat linear infinite; pointer-events:none; }
@keyframes dustFloat{ from{ transform:translateY(0) } to{ transform:translateY(-70vh) } }

/* Dock (mobil als Sheet) */
.dock-toggle{ display:none; position:fixed; right:14px; bottom:14px; z-index:30; }
@media (max-width:900px){
  #roomView{ flex-direction:column; }
  #panelsMount{ position:fixed !important; left:0; right:0; bottom:0; width:100% !important; height:62vh; transform:translateY(100%); transition:transform .3s; z-index:25; background:var(--bg-1); border-top:1px solid var(--line); }
  #roomView.dock-open #panelsMount{ transform:translateY(0); }
  .dock-toggle{ display:inline-flex; }
  .monitors{ top:158px; width:96vw; gap:8px; }
  .monitor{ height:130px; font-size:11px; padding:8px; }
  .monitor:nth-child(1), .monitor:nth-child(3){ transform:none; }
  .monitor .lage{ grid-template-columns:56px 1fr; } .monitor .gauge{ width:56px; height:56px; }
  .room-topbar{ padding:8px 10px; gap:6px; flex-wrap:nowrap; overflow-x:auto; }
  .room-topbar .back{ white-space:nowrap; padding:6px 10px; font-size:12.5px; }
  .room-sign{ top:58px; padding:8px 12px; width:min(640px, 94vw); }
  .room-sign .t{ font-size:22px; }
  .hint-bar{ display:none; }
  .table-wrap{ top:64%; width:120vw; }
  .file-cards{ display:none; }
  .seat .who{ font-size:11px; } .seat .role{ display:none; }
  .hint-bar{ bottom:70px; }
  #ownerTools .chip{ display:none; }
}