.story-controls{position:fixed;z-index:49;left:50%;bottom:26px;transform:translateX(-50%);display:flex;align-items:center;gap:7px;padding:5px;border-radius:30px;background:#0c3028e8;border:1px solid #c5e8d277;box-shadow:0 4px 24px #061e2330;color:#fff}
.story-play{display:flex;align-items:center;justify-content:center;gap:7px;min-height:39px;min-width:86px;padding:6px 12px;border-radius:22px;background:#e7f5ed;color:#153d31;font-size:12px}
.story-play b{font-weight:500}.story-play>span{font-size:13px}.reference-beacon{display:flex;align-items:center;gap:9px;min-height:39px;padding:6px 16px 6px 12px;font-size:13px;white-space:nowrap;letter-spacing:.01em}
.beacon-dot{width:8px;height:8px;background:#b3e7c7;border-radius:50%;box-shadow:0 0 0 4px #b3e7c71c;animation:reference-heartbeat 2.8s ease-in-out infinite}
@keyframes reference-heartbeat{0%,60%,100%{transform:scale(1);box-shadow:0 0 0 4px #b3e7c71c}20%,36%{transform:scale(1.32);box-shadow:0 0 0 7px #b3e7c72c}28%{transform:scale(1.06)}}
.story-controls a:focus-visible,.story-controls button:focus-visible{outline:2px solid white;outline-offset:2px}
.motion-switch{bottom:94px!important}
html:has(dialog[open]) .story-controls,html:has(#mobile-nav:not([hidden])) .story-controls{visibility:hidden}
#reference-dialog{inset:0;margin:auto;width:100vw!important;max-width:100vw!important;height:100svh;max-height:100svh!important;padding:70px 64px 48px!important;border:0!important;border-radius:0;background:#0b100ff5;overflow:hidden}
#reference-dialog .reference-detail-media{display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden}
#reference-dialog .reference-detail-media img,#reference-dialog .reference-detail-media video{display:block;width:auto;height:auto;max-width:100%!important;max-height:100%!important;object-fit:contain}
#reference-dialog h2{position:absolute;top:24px;left:28px;margin:0!important;max-width:calc(100% - 180px);font-size:15px!important;line-height:1.3;color:#fff}
#reference-dialog>.reference-detail-close{top:16px;right:20px;min-height:44px;padding:8px 14px;border:1px solid #ffffff60;border-radius:24px;background:#173c30cc;color:white;font-size:12px}
#reference-dialog>.reference-detail-prev,#reference-dialog>.reference-detail-next{position:absolute;top:50%;right:auto;transform:translateY(-50%);width:46px;height:62px;padding:0;background:#162d25b8;border:1px solid #ffffff60;color:#fff;border-radius:25px;font-size:36px;line-height:1;z-index:2}
#reference-dialog>.reference-detail-prev{left:12px}#reference-dialog>.reference-detail-next{right:12px;left:auto}
.reference-detail-count{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);font-size:12px;color:#d5e7dd;letter-spacing:.08em}
@media(max-width:700px),(max-aspect-ratio:6/5){
 .story-controls{bottom:83px;gap:4px;padding:3px;max-width:calc(100vw - 32px);background:#0c3028f2}
 .story-play{min-width:75px;min-height:33px;font-size:11px;padding:5px 9px}
 .reference-beacon{min-height:33px;padding:5px 12px;font-size:12px;gap:8px}
 .motion-switch{bottom:127px!important}
 .immersive-story .scene.mobile-focus .phone-scene-note{bottom:128px!important}
 #referenzen .narrative-inner>.reference-section{padding-bottom:126px!important}
 #reference-dialog{padding:68px 5px 50px!important}
 #reference-dialog h2{left:14px;top:25px;font-size:13px!important;max-width:calc(100% - 135px)}
 #reference-dialog>.reference-detail-close{right:10px;top:15px;padding:7px 11px}
 #reference-dialog>.reference-detail-prev,#reference-dialog>.reference-detail-next{width:38px;height:54px;font-size:29px;background:#102b23b8;box-shadow:0 2px 12px #0005}
 #reference-dialog>.reference-detail-prev{left:7px}#reference-dialog>.reference-detail-next{right:7px}
}
@media(prefers-reduced-motion:reduce){.beacon-dot{animation:none}}

html:has(#reference-dialog[open]){overflow:hidden}
.reference-beacon{border-radius:22px;animation:reference-breathe 2.8s ease-in-out infinite}
@keyframes reference-breathe{0%,60%,100%{transform:scale(1);background:#b3e7c700}24%,38%{transform:scale(1.025);background:#b3e7c712}31%{transform:scale(1.008)}}
@media(prefers-reduced-motion:reduce){.reference-beacon{animation:none}}
html.reduced .reference-beacon,html.reduced .beacon-dot{animation:none}