/* Fernrohr-Intro: Okular füllt das Fenster, Zähler zeigt den Ladestand */
.fr-scope{position:absolute;inset:0;z-index:50;pointer-events:none;container-type:size;--d:min(calc(100cqh - 20px),calc(100cqw - 20px));--p:0;background:#000}
.fr-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(.55 + .45 * var(--p)));filter:blur(calc((1 - var(--p)) * 6px))}
.fr-lens,.fr-ret{position:absolute;left:50%;top:50%;width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);border-radius:50%;transform:scale(calc(.74 + .26 * var(--p)))}
.fr-lens{box-shadow:0 0 0 4000px #020306,inset 0 0 60px 24px rgba(0,0,0,.85);outline:5px solid #1c2232}
.fr-ret svg{display:block;width:100%;height:100%}
.fr-data{position:absolute;left:20px;bottom:16px;font:11px/1.9 var(--f-data,'IBM Plex Mono',Consolas,monospace);letter-spacing:.08em;color:#9aa4b8;white-space:nowrap}
.fr-data b{color:#ffc907;font-weight:500}
.fr-lbl{position:absolute;left:50%;top:calc(50% + var(--d) * .27);transform:translateX(-50%);text-align:center;font-family:var(--f-data,'IBM Plex Mono',Consolas,monospace);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#ffc907;text-shadow:0 0 10px #000,0 0 4px #000;white-space:nowrap}
.fr-lbl b{display:block;margin-top:4px;font-size:28px;font-weight:500;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.fr-ret,.fr-data,.fr-lbl{transition:opacity .35s}
.fr-scope.open{background:transparent}
.fr-scope.open .fr-lens{transform:scale(7);transition:transform 1.3s cubic-bezier(.5,0,.3,1)}
.fr-scope.open .fr-img{opacity:0;transition:opacity .6s 1.1s}
.fr-scope.open .fr-ret,.fr-scope.open .fr-data,.fr-scope.open .fr-lbl{opacity:0}
.fr-scope.done{display:none}
@media (max-width:640px){.fr-data{display:none}}
@media (prefers-reduced-motion:reduce){.fr-scope.open .fr-lens{transform:none;opacity:0}}