/* pxMEDIA AI — Das Büro (js/buero.js). Eigenständig, nutzt nur die Tokens
   --c-ki / --c-mensch / --c-text / --font, mit Rückfallwerten — damit das
   Modul auch in der Präsentation und im AI-Workspace ohne diese Datei-Kette läuft.
   Figuren skalieren mit der Breite des Containers (cqw). */
.buero{--bk:var(--c-ki,#06B6D4);--bm:var(--c-mensch,#A594F9);--bt:var(--c-text,#f4f4f4);
  container-type:inline-size;width:100%;max-width:100%;margin:0 auto}
.buero__rahmen{position:relative;width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  border-radius:var(--radius,14px);background:radial-gradient(ellipse 70% 60% at 50% 40%,rgba(6,182,212,.07),transparent 70%)}
.buero__rahmen::-webkit-scrollbar{height:6px}
.buero__rahmen::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:6px}
.buero__plan{display:block;width:100%;height:auto;min-width:900px}
.buero__figuren{position:absolute;inset:0;min-width:900px;pointer-events:none}
.buero__flur{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.1);stroke-width:1}
.buero__boden{fill:rgba(255,255,255,.06);stroke:rgba(6,182,212,.22);stroke-width:1}
.buero__wand{fill:rgba(20,26,36,.92);stroke:rgba(6,182,212,.35);stroke-width:1}
.buero__wand--west{fill:rgba(26,32,44,.92)}
.buero__fenster{fill:rgba(6,182,212,.16);stroke:rgba(6,182,212,.5);stroke-width:1}
.buero__bruestung{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.14);stroke-width:1}
.buero__tisch{fill:rgba(255,255,255,.14);stroke:rgba(255,255,255,.22);stroke-width:1}
.buero__tisch-kante{fill:rgba(255,255,255,.07)}
.buero__schild{font:700 11px var(--font,system-ui,sans-serif);fill:rgba(244,244,244,.62);letter-spacing:.06em;text-transform:uppercase}
.buero__raum:hover .buero__boden{fill:rgba(6,182,212,.08)}

/* Figur: Porträt im Kreis auf einem kleinen Körper, Namensschild darunter, Gedankenblase darüber */
.buero__figur{position:absolute;transform:translate(-50%,-92%);z-index:calc(var(--tiefe,0) + 1);width:4.6cqw;min-width:44px;max-width:64px;
  pointer-events:auto;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:var(--bt);display:flex;flex-direction:column;align-items:center}
.buero__figur img{position:relative;z-index:2;width:100%;aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:50% 12%;
  border:2px solid rgba(6,182,212,.8);box-shadow:0 6px 16px rgba(0,0,0,.55);background:#222;transition:transform .25s ease,border-color .25s ease}
.buero__koerper{width:66%;height:.9cqw;min-height:7px;margin-top:-2px;border-radius:0 0 40% 40%/0 0 100% 100%;
  background:linear-gradient(180deg,rgba(6,182,212,.55),rgba(75,48,137,.55));box-shadow:0 4px 10px rgba(0,0,0,.5)}
.buero__name{position:absolute;top:100%;left:50%;transform:translate(-50%,4px);white-space:nowrap;display:flex;flex-direction:column;align-items:center;gap:1px;
  font-size:max(9px,1.05cqw);line-height:1.15;opacity:0;transition:opacity .2s ease;pointer-events:none;
  padding:.25em .55em;border-radius:6px;background:rgba(12,14,20,.92);border:1px solid rgba(255,255,255,.14)}
.buero__name b{font-weight:800}
.buero__name i{font-style:normal;color:rgba(244,244,244,.7);font-size:.9em}
.buero__figur:hover .buero__name,.buero__figur:focus-visible .buero__name,.buero__figur--vorn .buero__name{opacity:1}
.buero__figur:hover img,.buero__figur:focus-visible img{transform:translateY(-3px) scale(1.08);border-color:var(--bm)}
.buero__figur:focus-visible{outline:2px solid var(--bk);outline-offset:3px;border-radius:50%}
.buero__figur--vorn,.buero__figur:hover{z-index:60}
.buero__blase{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-30%,6px) scale(.9);transform-origin:20% 100%;
  max-width:min(240px,34cqw);width:max-content;padding:.4em .7em;border-radius:12px 12px 12px 3px;
  font-size:max(9px,1.1cqw);line-height:1.25;font-weight:600;color:#0c0e14;background:#e8fbff;border:1px solid var(--bk);
  box-shadow:0 8px 24px rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:opacity .3s ease,transform .3s cubic-bezier(.34,1.4,.4,1),visibility 0s .3s;
  white-space:normal;text-align:left;pointer-events:none;z-index:70}
.buero__blase::after{content:"";position:absolute;left:14%;top:100%;width:8px;height:8px;background:#e8fbff;border-right:1px solid var(--bk);border-bottom:1px solid var(--bk);
  transform:translateY(-4px) rotate(45deg)}
.buero__blase--an{opacity:1;visibility:visible;transform:translate(-30%,0) scale(1);transition:opacity .3s ease,transform .3s cubic-bezier(.34,1.4,.4,1)}
.buero__figur[data-denkt] img{border-color:var(--bm);box-shadow:0 0 0 3px rgba(165,148,249,.25),0 6px 16px rgba(0,0,0,.55)}
.buero__hinweis{margin:.6rem 0 0;font-size:.84rem;color:rgba(244,244,244,.65);text-align:center}

/* Atmen: die Figuren stehen nicht wie angenagelt */
@keyframes buero-atmen{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.buero:not(.buero--statisch) .buero__figur img{animation:buero-atmen 3.4s ease-in-out infinite;animation-delay:calc(var(--tiefe,0) * -.37s)}
.buero:not(.buero--statisch) .buero__figur:hover img,.buero:not(.buero--statisch) .buero__figur:focus-visible img{animation:none}
@media (prefers-reduced-motion:reduce){.buero__figur img{animation:none !important}.buero__blase{transition:none}}

/* Schmale Geräte: der Plan bleibt 640 px breit und ist waagerecht rollbar — die Räume werden nie zum Streifen */
@media (max-width:699px){
  .buero__figur{width:44px;min-width:44px}
  .buero__name{font-size:9px}
  .buero__blase{font-size:10px;max-width:180px}
  .buero__hinweis{font-size:.78rem}
}