/* Business Calls: Besprechungstisch, Bildschirm teilen, Marker (aus Entwurf 1). Nur Grüntöne und Weiß. */
.callwrap{display:flex;gap:12px;flex:1;min-height:0}
.callmain{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;gap:10px}
.call{position:relative;flex:1;min-height:0;border-radius:16px;background:radial-gradient(ellipse at 50% 45%,#f7fbf8 0%,#e3efe7 75%);overflow:hidden;border:1px solid var(--line)}
.tisch{position:absolute;left:21%;right:21%;top:25%;bottom:25%;border-radius:50%;background:radial-gradient(ellipse at 50% 38%,#dcefe2 0%,#c2e0cc 70%,#acd4ba 100%);border:2px solid #9fcfb0;box-shadow:inset 0 -10px 28px rgba(6,48,30,.12),0 22px 44px rgba(6,48,30,.14)}
.tisch::after{content:"Drive Green";position:absolute;left:50%;bottom:9%;transform:translateX(-50%);font-weight:800;letter-spacing:.2em;font-size:11px;color:rgba(6,48,30,.28);text-transform:uppercase}
.tile{position:absolute;transform:translate(-50%,-50%);aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#1f6b45,#0b462c);color:#fff;box-shadow:0 8px 22px rgba(6,48,30,.25);display:grid;place-items:center;transition:box-shadow .35s}
.tile.static{position:relative;transform:none;width:100%}
.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile video[data-self]{transform:scaleX(-1)}
.tile .ini{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;font-size:19px;font-weight:700;letter-spacing:.02em}
.tile.mod .ini,.tile.static .ini{width:96px;height:96px;font-size:34px}
.tile .nm{position:absolute;left:8px;bottom:7px;font-size:11.5px;font-weight:600;background:rgba(6,48,30,.6);padding:2px 9px;border-radius:999px;display:flex;gap:5px;align-items:center;max-width:calc(100% - 16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .modb{position:absolute;left:8px;top:7px;font-size:10.5px;font-weight:700;background:#7cc097;color:#06301e;padding:1px 9px;border-radius:999px}
.tile .gastb{position:absolute;left:8px;top:7px;font-size:10.5px;font-weight:700;background:#fff;color:#0b462c;padding:1px 9px;border-radius:999px}
.tile .hand{position:absolute;right:8px;top:7px;background:#fff;color:#0b462c;border-radius:999px;padding:3px}
.tile.speak{box-shadow:0 0 0 3px #7cc097,0 0 0 7px rgba(124,192,151,.35),0 8px 22px rgba(6,48,30,.25)}
.tile.self{outline:2px dashed rgba(255,255,255,.55);outline-offset:-5px}
.tile .slide{position:absolute;inset:0;background:#fff;color:var(--ink);padding:6% 7%;display:flex;flex-direction:column;gap:6%}
.tile .slide h4{font-size:clamp(12px,1.6vw,22px);color:var(--g900)}
.tile .slide .bars{flex:1;display:flex;align-items:flex-end;gap:5%}
.tile .slide .bars i{flex:1;background:var(--g500);border-radius:4px 4px 0 0}
.tile .slide .bars i:nth-child(2){background:var(--g900)}
.tile .inset{position:absolute;right:8px;top:8px;width:24%;aspect-ratio:16/9;border-radius:8px;background:linear-gradient(135deg,#1f6b45,#0b462c);display:grid;place-items:center;font-weight:700;font-size:12px;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.notice{position:absolute;left:14px;top:14px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(6,48,30,.16);padding:10px 12px;display:flex;gap:10px;align-items:center;max-width:380px;z-index:5}
.dock{flex:none;display:flex;justify-content:center;gap:6px;padding:2px 0}
.db{width:68px;height:54px;border-radius:12px;border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10.5px;font-weight:600;color:var(--ink)}
.db:hover{border-color:var(--g400);background:var(--g50)}
.db.on{background:var(--g900);border-color:var(--g900);color:#fff}
.db.aus{background:var(--g100);color:var(--muted)}
.db.leave{width:auto;padding:0 18px;flex-direction:row;gap:7px;font-size:12.5px;background:var(--g950);border-color:var(--g950);color:#fff;margin-left:14px}
.cside{width:310px;flex:none}
.msg{display:flex;flex-direction:column;gap:2px;padding:7px 0}
.msg .h{font-size:11px;color:var(--muted)}
.msg .x{background:var(--g50);border-radius:10px;padding:6px 9px;font-size:12.5px}
.msg.me{align-items:flex-end}.msg.me .x{background:var(--g900);color:#fff}
.prejoin{display:grid;grid-template-columns:1.45fr 1fr;gap:16px;flex:1;min-height:0;align-items:center}
.pj-left{display:flex;flex-direction:column;gap:12px;min-width:0;max-height:100%}
.pj-left .tile{max-height:calc(100vh - 230px);width:auto;margin:0 auto}
.pj-left .row{justify-content:center}
.livechip{background:var(--g900);color:#fff}
.livechip::before{content:"";width:7px;height:7px;border-radius:50%;background:#7cc097;display:inline-block;margin-right:2px;animation:puls 1.4s infinite}
@keyframes puls{50%{opacity:.25}}
.call{container-type:size}
.tile.duo-gross{left:50%;top:50%;width:min(82cqw, calc(88cqh * 16 / 9))}
.tile.duo-gross .ini{width:120px;height:120px;font-size:42px}
.tile.duo-klein{left:auto;top:auto;right:16px;bottom:16px;transform:none;width:min(22cqw, calc(28cqh * 16 / 9));z-index:3;border:2px solid #fff}
.tile .allein{position:absolute;left:50%;bottom:16%;transform:translateX(-50%);background:rgba(6,48,30,.6);padding:4px 12px;border-radius:999px;font-size:12.5px;white-space:nowrap}
.tile.static .gastb{z-index:2}
.db.wide{width:auto;padding:0 14px;flex-direction:row;gap:7px;height:42px;font-size:12px}
.tile.static .allein{bottom:12%}

/* Bildschirm teilen */
.stage{position:absolute;inset:0;background:#0d2419;display:grid;place-items:center;cursor:none;overflow:hidden}
.stage video{width:100%;height:100%;object-fit:contain;display:block}
.slide-gross{width:min(92%, calc(88cqh * 16 / 9));aspect-ratio:16/9;background:#fff;border-radius:10px;padding:5% 6%;display:flex;flex-direction:column;gap:3%}
.slide-gross h3{font-size:clamp(16px,2.4cqw,34px);color:var(--g900)}
.slide-gross p{color:var(--muted)}
.slide-gross .bars{flex:1;display:flex;align-items:flex-end;gap:5%}
.slide-gross .bars i{flex:1;background:var(--g500);border-radius:6px 6px 0 0}
.slide-gross .bars i:nth-child(2){background:var(--g900)}
.stage .banner{position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.95);border-radius:999px;padding:5px 12px;font-size:12px;cursor:default;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.stage .banner .muted2{color:var(--muted)}
.stage .vollbild{position:absolute;right:12px;top:12px;cursor:pointer}
.zeiger{position:absolute;pointer-events:none;z-index:6;transform:translate(-2px,-2px);filter:drop-shadow(0 0 3px rgba(124,192,151,.9)) drop-shadow(0 3px 5px rgba(0,0,0,.45))}
.zeiger svg{display:block}
.kreis{position:absolute;width:46px;height:46px;border-radius:50%;border:3px solid #7cc097;transform:translate(-50%,-50%) scale(.25);animation:kreis .6s ease-out forwards;pointer-events:none;z-index:5}
@keyframes kreis{to{transform:translate(-50%,-50%) scale(1.5);opacity:0}}
.wahlk{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;border:1px solid var(--line);border-radius:12px;background:#fff;padding:16px;color:var(--g900);min-height:150px}
.wahlk:hover{border-color:var(--g600);background:var(--g50);box-shadow:inset 0 0 0 1px var(--g600)}
.wahlk b{font-size:14px;color:var(--ink)}
.wahlk span{font-size:12px;color:var(--muted)}

/* Marker beim Bildschirmteilen */
.stagebar{position:absolute;right:12px;top:12px;display:flex;gap:6px;align-items:center;cursor:default;z-index:7}
.stagebar .seg{box-shadow:0 4px 14px rgba(0,0,0,.25)}
.stagebar .btn{box-shadow:0 4px 14px rgba(0,0,0,.25)}
.markerlayer{position:absolute;inset:0;pointer-events:none;z-index:4}
.marker{position:absolute;width:34px;height:34px;transform:translate(-50%,-50%);border-radius:50%;border:3px solid #7cc097;background:rgba(124,192,151,.18);display:grid;place-items:center;pointer-events:auto;cursor:none}
.marker::before,.marker::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:3px solid #7cc097;animation:markerpuls 1.8s ease-out infinite;pointer-events:none}
.marker::after{animation-delay:.9s}
.marker b{width:20px;height:20px;border-radius:50%;background:#0b462c;color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 1px #fff}
.marker:hover{background:rgba(255,255,255,.35)}
@keyframes markerpuls{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.1);opacity:0}}

/* Mitarbeiterbereich und Gästeseite */
.stage-inhalt{--ar:1.7778;position:relative;aspect-ratio:var(--ar);width:min(100cqw, calc(100cqh * var(--ar)));max-height:100%;cursor:default}
.stage.eigen .stage-inhalt{cursor:none}
.stage-inhalt video{width:100%;height:100%;object-fit:contain;display:block}
.marker.fremd{pointer-events:none;cursor:default}
.call-g{display:grid;grid-template-columns:380px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:12px;flex:1;min-height:0}
.callwrap{min-height:0}
.ma-wahl{display:flex;flex-wrap:wrap;gap:5px}
.ma-wahl button.chip{border:0;cursor:pointer}
.gast-seite{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--app-bg)}
.gast-kopf{display:flex;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid var(--line);background:#fff;flex:none}
.gast-kopf h1{font-size:16px;color:var(--g950)}
.gast-inhalt{flex:1;min-height:0;padding:14px 18px;display:flex;flex-direction:column;gap:12px}
.gast-karte{width:min(820px,100%);margin:0 auto;display:flex;flex-direction:column;gap:12px;overflow:auto}
@media (max-width:760px){.call-g{grid-template-columns:1fr;grid-template-rows:auto}.cside{width:100%}.callwrap{flex-direction:column}.db{width:56px}.db span{font-size:9.5px}}
.stage{cursor:default}
.gast-seite a,.cside a{color:var(--g800)}
/* Hintergrund, Geräte, Kachel ohne Kamera (15.10.2026) */
.tile video[data-self][data-hg]{transform:none}
.klogo{display:flex;flex-direction:column;align-items:center;gap:8px;color:#fff;pointer-events:none}
.klogo .kb{width:clamp(30px,22%,74px);aspect-ratio:1;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.22)}
.klogo .kb img{width:68%;height:68%}
.klogo .kt{font-weight:800;font-size:clamp(10px,1.5vw,20px);letter-spacing:.01em}
.klogo .kt b{color:#9be3b5;font-weight:800}
.ck-geraete .field{margin:0}
.pegel{display:inline-block;width:160px;height:8px;border-radius:99px;background:var(--line);overflow:hidden;vertical-align:middle}
.pegel i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2e8b57,#9be3b5);transition:width .08s linear}