/* „Unser Büro“ – virtueller Büroplan in CD-Farben (Indigo, Cyan, Amber), reines SVG/CSS, Avatare laufen zwischen den Räumen */
.of{--of-floor:#F4F4FB;--of-wood:#E9DCC7;--of-wood-2:#D9C6A6;--of-glass:rgba(54,98,255,.07);--of-room:#FFFFFF;font-family:var(--font)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .of{--of-floor:#1A1A25;--of-wood:#4A3F33;--of-wood-2:#3A3128;--of-glass:rgba(41,198,224,.08);--of-room:#17171F}}
:root[data-theme="dark"] .of{--of-floor:#1A1A25;--of-wood:#4A3F33;--of-wood-2:#3A3128;--of-glass:rgba(41,198,224,.08);--of-room:#17171F}
.of-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.of-head h3{margin:0;font-size:18px;display:flex;align-items:center;gap:8px}
.of-live{font-size:12px;font-weight:500;color:var(--good)}
/* Grundriss */
.of-plan{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:
  linear-gradient(90deg,transparent 0 calc(100% - 1px),var(--line) 0) 0 0/32px 32px,linear-gradient(transparent 0 calc(100% - 1px),var(--line) 0) 0 0/32px 32px,var(--of-floor)}
.of-hall{position:absolute;left:0;right:0;top:46%;height:8%;background:repeating-linear-gradient(90deg,transparent 0 18px,rgba(248,198,111,.35) 18px 30px) center/100% 2px no-repeat}
.of-room{position:absolute;box-sizing:border-box;border:2px solid var(--line-2);border-radius:14px;background:var(--of-room);opacity:.97}
.of-room>span{position:absolute;left:10px;top:6px;font-size:12px;font-weight:600;color:var(--muted)}
.of-room.office{border-top:4px solid var(--indigo)}.of-room.team{border-top:4px solid var(--amber)}.of-room.meeting{border-top:4px solid var(--indigo-2,#4644C4)}.of-room.away{border-top:4px solid var(--cyan);background:repeating-linear-gradient(135deg,var(--of-room) 0 14px,var(--accent-soft) 14px 16px)}
.of-art{position:absolute;inset:14% 4% 4% 4%;width:92%;height:82%}
.of-deskp{position:absolute;width:9%;transform:translate(-50%,-62%);z-index:2;pointer-events:none}
.of-deskp svg{width:100%;height:auto;display:block}.of-deskp i{position:absolute;left:0;top:-30%;font-style:normal;font-size:clamp(10px,1.4vw,18px)}
.of-table{fill:var(--of-wood)}.of-leg{fill:var(--of-wood-2)}.of-monitor{fill:#2B2A4A}.of-screen{fill:#3E3D66}.of-screen.lit{fill:#E6F8FB;animation:of-glow 3s ease-in-out infinite}
.of-machine{fill:#45446E}.of-laptop{fill:#2B2A4A}.of-vant{font-size:7px;font-weight:700;fill:#fff;font-family:var(--font)}
/* Avatare */
.of-av{position:absolute;width:4.6%;min-width:26px;transform:translate(-50%,-100%);z-index:3;transition:left .8s ease-in-out,top .8s ease-in-out;cursor:default;outline:none}
.of-av svg{width:100%;height:auto;display:block;overflow:visible}
.of-av b{position:absolute;left:50%;top:100%;transform:translateX(-50%);font-size:clamp(8px,.9vw,11px);font-weight:600;background:var(--surface);border:1px solid var(--line);border-radius:var(--pill);padding:0 6px;white-space:nowrap;box-shadow:var(--shadow)}
.of-av:focus-visible b,.of-av:hover b{border-color:var(--cyan);color:var(--indigo)}
.of-av.s-working{z-index:1}.of-av.walk{z-index:5}
.of-sh{fill:rgba(25,25,60,.12)}.of-ini{font-size:6px;font-weight:700;fill:#fff;font-family:var(--font)}
.of-acc{display:none}.s-break .of-acc.cup,.s-shooting .of-acc.cam{display:inline}
.of-body{transform-origin:20px 44px;animation:of-breathe 3.4s ease-in-out infinite}
.of-eyes{animation:of-look 7s ease-in-out infinite}
.s-working .arm{animation:of-type .45s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:top}.s-working .arm.r{animation-delay:.22s}
.s-working .of-legs{display:none}
.s-meeting .of-head{animation:of-nod 4s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom}
.s-break .arm.r{transform:rotate(-35deg);transform-box:fill-box;transform-origin:top}.of-stm{animation:of-steam 2.4s ease-in-out infinite}
.s-shooting .of-fl{animation:of-flash 2.6s infinite}
.walk .lg.l{animation:of-step .4s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:top}.walk .lg.r{animation:of-step .4s ease-in-out infinite alternate-reverse;transform-box:fill-box;transform-origin:top}
.walk .of-legs{display:inline!important}.walk .of-body{animation:of-bounce .4s ease-in-out infinite alternate}
.of-van{animation:of-van 6s ease-in-out infinite}.of-flash2{animation:of-flash 3.2s infinite}
.of-gone{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.of-chip{display:inline-flex;gap:6px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--pill);padding:2px 10px 2px 2px;font-size:12px;opacity:.8}
.of-chip i{width:22px;height:22px;border-radius:50%;color:#fff;font-style:normal;font-size:9px;font-weight:700;display:grid;place-items:center}.of-chip small{color:var(--muted)}
/* KI-Team & Ticker */
.of-lower{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:14px;margin-top:14px}
.of-zone{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 14px;box-shadow:var(--shadow);min-width:0;position:relative}
.of-zone h4{margin:0 0 8px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px}
.of-count{font-size:11px;font-weight:500;color:var(--muted);background:var(--surface-2);border-radius:var(--pill);padding:1px 8px}
.of-glass{position:relative;border-radius:14px;padding:10px;background:linear-gradient(135deg,var(--of-glass),transparent 60%),repeating-linear-gradient(90deg,transparent 0 22px,rgba(54,98,255,.08) 22px 23px);border:1.5px solid rgba(54,98,255,.35)}
.of-bots{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px}
.of-bot{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;font:inherit;color:inherit;text-align:center}
.of-bot:hover,.of-bot:focus-visible{border-color:var(--cyan);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.of-bot svg{width:50px;height:58px}.of-bot b{font-size:12px;font-weight:600}.of-bot small{font-size:10.5px;color:var(--muted);line-height:1.25}.of-bot.on small{color:var(--good)}
.of-badge{position:absolute;top:6px;right:6px;font-style:normal;font-size:10px;font-weight:700;background:var(--amber);color:#3a2a00;border-radius:var(--pill);padding:0 6px}
.of-ant{fill:#B9B8DE}.of-eye{fill:#7C7BBE}
.of-bot.on .of-ant{fill:var(--amber);animation:of-blink 1.2s infinite}.of-bot.on .of-eye{fill:var(--cyan)}
.of-bot.on svg{animation:of-bounce 1s ease-in-out infinite alternate}.of-bot.on .of-arm{animation:of-wave 1s ease-in-out infinite alternate;transform-origin:center top;transform-box:fill-box}
.of-pop{position:absolute;z-index:6;right:12px;top:12px;width:min(280px,calc(100% - 24px));background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:12px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:6px}
.of-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:6px;margin-top:4px}
.of-stats div{background:var(--surface-2);border-radius:10px;padding:6px 8px;display:flex;flex-direction:column}.of-stats b{font-size:17px}.of-stats span{font-size:10.5px;color:var(--muted)}
.of-tick{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow:auto}.of-tick div{display:flex;gap:8px;font-size:12px;align-items:baseline}.of-tick i{color:var(--muted)}
.of.demo .of-plan{border:2px dashed var(--amber)}
@keyframes of-breathe{50%{transform:scaleY(1.02)}}
@keyframes of-look{0%,40%,100%{transform:none}45%,55%{transform:translateX(-1.3px)}60%,70%{transform:translateX(1.3px)}}
@keyframes of-type{to{transform:rotate(-12deg)}}
@keyframes of-nod{50%{transform:rotate(5deg)}}
@keyframes of-step{from{transform:rotate(-18deg)}to{transform:rotate(18deg)}}
@keyframes of-bounce{to{transform:translateY(-1.5px)}}
@keyframes of-steam{0%{opacity:0;transform:translateY(2px)}50%{opacity:.8}100%{opacity:0;transform:translateY(-4px)}}
@keyframes of-flash{0%,86%,100%{opacity:.3}90%{opacity:1}}
@keyframes of-glow{50%{fill:#CFF2F8}}
@keyframes of-van{50%{transform:translateX(-3px)}}
@keyframes of-blink{50%{opacity:.25}}
@keyframes of-wave{to{transform:rotate(-14deg)}}
@media (max-width:760px){.of-plan{aspect-ratio:4/5}.of-av{width:9%}.of-deskp{width:14%}.of-lower{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.of *{animation:none!important;transition:none!important}}