/* ============================================================
   fiberONE · Überblick 360° (Prototyp 23.10.2026) – Stile
   Gehört zu assets/overview-360.js. Alles mit Präfix ov-.
   ============================================================ */

/* Einstiegsknopf (unten links, Photon sitzt unten rechts) */
/* über die Cookie-Leiste per translate statt bottom: Verschiebungen per transform zählen nicht als Layout-Shift (CLS) */
.ov-fab{position:fixed;left:max(14px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));translate:0 calc(-1 * var(--ov-fab-hub,0px));z-index:84; /* unter Drawer (85) und Modals (100) */
  display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 17px 0 12px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(57,194,255,.5);background:rgba(4,9,20,.66);-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);
  color:#E6F7FF;font:600 14px/1 var(--body,system-ui,sans-serif);letter-spacing:.02em;
  box-shadow:0 0 0 1px rgba(57,194,255,.08) inset,0 0 26px rgba(57,194,255,.28);transition:transform .2s ease,box-shadow .2s ease,translate .3s ease;
  -webkit-tap-highlight-color:transparent}
.ov-fab:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(57,194,255,.14) inset,0 0 34px rgba(57,194,255,.45)}
.ov-fab:focus-visible{outline:2px solid #AEE4FF;outline-offset:3px}
.ov-fab svg{width:24px;height:24px;flex:none;overflow:visible}
/* Orbit nur zweimal nach dem Laden, danach bei Zeiger/Fokus (die SVG-Animation malt sonst im Leerlauf jedes Bild neu) */
.ov-fab .ov-orbit{transform-origin:12px 12px;animation:ov-kreisen 6s linear 2}
.ov-fab:hover .ov-orbit,.ov-fab:focus-visible .ov-orbit{animation:ov-kreisen2 6s linear infinite}   /* eigener Name: startet bei 0° */
.ov-fab.ov-laedt{opacity:.7}
.ov-fab small{font:500 10px/1 var(--mono,ui-monospace,monospace);letter-spacing:.16em;color:#8FD7FF;text-transform:uppercase;margin-left:2px}
@keyframes ov-kreisen{to{transform:rotate(360deg)}}
@keyframes ov-kreisen2{to{transform:rotate(360deg)}}
/* ältere Browser ohne die Eigenschaft translate (Chrome < 104, Safari < 14.1): wie früher per bottom */
@supports not (translate:0){.ov-fab{bottom:calc(max(14px,env(safe-area-inset-bottom)) + var(--ov-fab-hub,0px))}}
@media (prefers-reduced-motion:reduce){.ov-fab .ov-orbit{animation:none}.ov-fab{transition:none}}
/* Schalter „Bewegung pausieren“ der Seite (bewegung.js) wie reduzierte Bewegung */
html.bewegung-aus .ov-fab .ov-orbit,html.bewegung-aus #ov360 .ov-licht i{animation:none}
html.bewegung-aus .ov-fab{transition:none}
html.bewegung-aus #ov360.glanz-weg .ov-licht,html.bewegung-aus #ov360.glanz-weg .ov-glanz i{transition:none}
@media print{.ov-fab{display:none!important}}

/* Seite während des Überblicks: ausgeblendet, nicht scrollbar */
html.ov-on,html.ov-on body{overflow:hidden!important;overscroll-behavior:none}
html.ov-on body>*:not(#ov360){visibility:hidden!important}

/* Bühne */
#ov360{position:fixed;left:0;top:0;width:100%;height:100%;z-index:2147483000;overflow:hidden;background:#04070F;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;color:#F2F7FC}
#ov360[hidden]{display:none}
#ov360 .ov-gl{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;transition:opacity 1s ease}
#ov360.gl-an .ov-gl{opacity:1}
#ov360 .ov-view{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden}
#ov360 .ov-cam{position:absolute;left:0;top:0;transform-style:preserve-3d;pointer-events:none}

/* Panels = echte Sektionen der Seite, im Raum */
/* Kein overflow/contain am Panel selbst: Chrome trifft 3D-transformierte Elemente mit eigenem Clip nicht mehr
   (elementFromPoint/Klick gehen ins Leere, getestet 23.10.2026) – beschnitten wird im inneren .ov-clip. */
#ov360 .ov-panel{position:absolute;left:0;top:0;box-sizing:border-box;border-radius:22px;pointer-events:auto;cursor:pointer;
  background:rgba(5,10,21,.82);border:1px solid rgba(57,194,255,.30);outline:none}
/* Leuchten als eigene Ebene, nur die Deckkraft wechselt (läuft auf dem Compositor; ein animierter box-shadow
   müsste das ganze Panel samt Sektion bei jedem Fokuswechsel neu rastern) */
#ov360 .ov-panel::before{content:"";position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;z-index:-1;border-radius:22px;pointer-events:none;
  box-shadow:0 0 36px rgba(57,194,255,.34),0 0 80px rgba(57,194,255,.13);opacity:.45;transition:opacity .35s ease;will-change:opacity}
#ov360 .ov-panel.is-fokus::before{opacity:1}
#ov360 .ov-panel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16%;pointer-events:none;border-radius:0 0 21px 21px;
  background:linear-gradient(rgba(5,10,21,0),rgba(5,10,21,.94))}
#ov360 .ov-clip{position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;border-radius:21px;pointer-events:none}
#ov360 .ov-panel.is-fokus{border-color:rgba(150,222,255,.9)}
#ov360 .ov-panel:focus-visible{outline:4px solid #fff;outline-offset:10px}
#ov360:focus,[data-ov-ziel]:focus{outline:none}
#ov360 .ov-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#ov360 .ov-inner{position:absolute;left:0;top:0;width:100%;pointer-events:none;display:flow-root}
#ov360 .reveal{opacity:1!important;transform:none!important;transition:none!important}
/* backdrop-filter ist in 3D-Kontexten in allen Engines fehlerhaft (WebKit 252181, Gecko 1952612) – im Raum aus */
#ov360 .ov-panel *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* Schwebende Titel vor den Panels */
#ov360 .ov-tag{position:absolute;left:0;top:0;white-space:nowrap;pointer-events:none;
  font:600 23px/1 var(--mono,ui-monospace,monospace);letter-spacing:.14em;text-transform:uppercase;color:#CDEEFF;
  text-shadow:0 0 10px rgba(57,194,255,.95),0 0 30px rgba(57,194,255,.55);transition:opacity .4s ease}
#ov360 .ov-tag b{color:#39C2FF;font-weight:600;margin-right:.7em}

/* HUD (flach, vor allem) */
#ov360 .ov-hud{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;transition:opacity .35s ease}
#ov360.hud-aus .ov-hud{opacity:0}
#ov360 .ov-top{position:absolute;left:max(14px,env(safe-area-inset-left));top:max(14px,env(safe-area-inset-top));animation:ov-weg .8s ease 4s forwards}
@keyframes ov-weg{to{opacity:0}}
#ov360 .ov-pill{display:inline-block;font:600 10.5px/1 var(--mono,ui-monospace,monospace);letter-spacing:.22em;text-transform:uppercase;padding:7px 12px;border-radius:999px;
  border:1px solid rgba(57,194,255,.38);background:rgba(4,7,15,.58);color:#9FDCFF}
#ov360 .ov-titel{position:absolute;left:50%;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 56px);transform:translateX(-50%);width:max-content;max-width:90vw;text-align:center;
  font:600 16px/1.3 var(--display,system-ui,sans-serif);letter-spacing:.02em;color:#EAF7FF;text-shadow:0 0 14px rgba(4,7,15,.95),0 0 22px rgba(57,194,255,.6)}
#ov360 .ov-titel span{font:500 11px/1 var(--mono,ui-monospace,monospace);letter-spacing:.14em;color:#7FCBF5;margin-left:8px}
#ov360 .ov-reticle{position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;
  border:1.5px solid rgba(174,228,255,.5);box-shadow:0 0 12px rgba(57,194,255,.45);transition:transform .3s ease,border-color .3s ease}
#ov360.fokus-an .ov-reticle{transform:scale(1.45);border-color:rgba(174,228,255,.95)}
#ov360 .ov-hinweis{position:absolute;left:50%;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 92px);transform:translateX(-50%);
  width:max-content;max-width:88vw;text-align:center;font:500 13px/1.45 var(--body,system-ui,sans-serif);color:#D9F1FF;
  padding:9px 15px;border-radius:14px;background:rgba(4,7,15,.62);border:1px solid rgba(57,194,255,.25);transition:opacity .8s ease}
#ov360 .ov-hinweis.weg{opacity:0}
/* solange der Hinweis steht, weicht der Abschnittstitel (sonst überlappen beide auf schmalen Handys) */
#ov360 .ov-titel{transition:opacity .4s ease}
#ov360.hinweis-an .ov-titel{opacity:0}
#ov360 .ov-bar{position:absolute;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:8px;pointer-events:auto}
#ov360 .ov-btn{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 15px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(57,194,255,.42);background:rgba(4,7,15,.64);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#E2F5FF;font:600 13px/1 var(--body,system-ui,sans-serif);white-space:nowrap}
#ov360 .ov-btn[aria-pressed="true"]{background:rgba(57,194,255,.2);border-color:rgba(150,222,255,.8)}
#ov360 .ov-btn:focus-visible{outline:2px solid #AEE4FF;outline-offset:2px}
#ov360 .ov-btn svg{width:16px;height:16px}
#ov360 .ov-btn[hidden]{display:none}
@media (max-width:420px){#ov360 .ov-btn{padding:0 12px;font-size:12.5px}#ov360 .ov-btn .ov-lang{display:none}}

/* Holodeck-Station: durchsichtiger Rahmen im Ring, das Hologramm zeichnet WebGL dahinter. Kein overflow/contain am
   transformierten Element selbst (Chrome trifft es sonst nicht mehr, siehe .ov-panel). Maße in CSS-px der Station
   (wird im Raum ~0,7-fach verkleinert) – deshalb große Schrift und 64-px-Knöpfe. */
#ov360 .ov-holo{position:absolute;left:0;top:0;box-sizing:border-box;border-radius:22px;pointer-events:auto;touch-action:none;cursor:grab;
  border:1px solid rgba(57,194,255,.26);
  background:radial-gradient(ellipse 70% 38% at 50% 74%,rgba(57,194,255,.13),rgba(57,194,255,0) 70%),
             linear-gradient(rgba(5,10,21,.35),rgba(5,10,21,0) 22%,rgba(5,10,21,0) 62%,rgba(5,10,21,.55))}
#ov360 .ov-holo:active{cursor:grabbing}
#ov360 .ov-holo-kopf{position:absolute;left:26px;right:26px;top:22px;display:flex;justify-content:space-between;align-items:center;
  font:600 20px/1 var(--mono,ui-monospace,monospace);letter-spacing:.2em;text-transform:uppercase;color:#9FDCFF;
  text-shadow:0 0 12px rgba(57,194,255,.7)}
#ov360 .ov-holo-zahl{letter-spacing:.12em;color:#CDEEFF}
#ov360 .ov-holo-fuss{position:absolute;left:14px;right:14px;bottom:138px;display:flex;align-items:center;gap:8px;padding:12px 10px;
  border-radius:18px;background:rgba(5,10,21,.74);border:1px solid rgba(57,194,255,.3);box-shadow:0 0 30px rgba(57,194,255,.12)}
#ov360 .ov-holo-text{flex:1;min-width:0;text-align:center}
#ov360 .ov-holo-name{display:block;font:700 24px/1.15 var(--display,system-ui,sans-serif);color:#EAF7FF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 0 16px rgba(57,194,255,.55)}
#ov360 .ov-holo-ort{display:block;margin-top:5px;font:500 16px/1.3 var(--body,system-ui,sans-serif);color:#9FDCFF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ov360 .ov-holo-pfeil{flex:none;width:56px;height:56px;border-radius:50%;cursor:pointer;padding:0;
  border:1px solid rgba(57,194,255,.55);background:rgba(4,7,15,.75);color:#E2F5FF;font:500 38px/1 var(--body,system-ui,sans-serif)}
#ov360 .ov-holo-pfeil:hover{background:rgba(57,194,255,.18)}
#ov360 .ov-holo-pfeil:focus-visible{outline:3px solid #fff;outline-offset:3px}
#ov360 .ov-holo-hinweis{position:absolute;left:12px;right:12px;bottom:12px;margin:0;text-align:center;
  font:500 13px/1.4 var(--body,system-ui,sans-serif);color:rgba(174,228,255,.72)}
#ov360 .ov-holo-rein{position:absolute;left:50%;bottom:70px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;
  min-height:54px;padding:0 26px;border-radius:999px;cursor:pointer;white-space:nowrap;
  border:1px solid rgba(150,222,255,.85);background:rgba(57,194,255,.22);color:#F2FBFF;font:700 19px/1 var(--body,system-ui,sans-serif);
  letter-spacing:.02em;box-shadow:0 0 28px rgba(57,194,255,.38),inset 0 0 18px rgba(57,194,255,.18)}
#ov360 .ov-holo-rein svg{width:22px;height:22px}
#ov360 .ov-holo-rein:hover{background:rgba(57,194,255,.34)}
#ov360 .ov-holo-rein:focus-visible{outline:3px solid #fff;outline-offset:3px}
#ov360 .ov-holo-rein[hidden]{display:none}
@media (prefers-reduced-motion:reduce){#ov360 .ov-holo{cursor:default}}

/* Im Holodeck: flaches HUD statt Ring-Bedienung */
#ov360.innen .ov-bar,#ov360.innen .ov-titel,#ov360.innen .ov-reticle,#ov360.innen .ov-top{display:none}
#ov360 .ov-innen[hidden]{display:none}
#ov360 .ov-innen-kopf{position:absolute;left:50%;top:max(14px,env(safe-area-inset-top));transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);
  box-sizing:border-box;text-align:center;padding:10px 18px;border-radius:16px;background:rgba(4,7,15,.55);border:1px solid rgba(57,194,255,.28);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#ov360 .ov-innen-marke{display:block;font:600 10.5px/1 var(--mono,ui-monospace,monospace);letter-spacing:.22em;text-transform:uppercase;color:#7FCBF5}
#ov360 .ov-innen-name{display:block;margin-top:6px;font:700 19px/1.2 var(--display,system-ui,sans-serif);color:#EAF7FF;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;text-shadow:0 0 14px rgba(57,194,255,.55)}
#ov360 .ov-innen-ort{display:block;margin-top:3px;font:500 13px/1.3 var(--body,system-ui,sans-serif);color:#9FDCFF}
#ov360 .ov-innen-bar{position:absolute;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:8px;pointer-events:auto}
#ov360 .ov-innen-pfeil{width:44px;padding:0;justify-content:center;font-size:26px;font-weight:500}

/* Raumlicht: die Lichtquelle im Raum (in der CSS-3D-Ebene, damit Panels sie verdecken) und ihre Spiegelungen auf den
   Panels. Die Glanz-Elemente sind eigene Ebenen und werden nur per transform/opacity bewegt (Compositor). */
#ov360 .ov-licht{position:absolute;left:0;top:0;width:360px;height:360px;pointer-events:none}
#ov360 .ov-licht i{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;will-change:opacity;
  background:radial-gradient(circle,#fff 0,rgba(240,251,255,.96) 2.6%,rgba(190,236,255,.6) 6%,rgba(110,212,255,.22) 15%,rgba(57,194,255,.07) 32%,rgba(57,194,255,0) 60%);
  animation:ov-atmen 5.5s ease-in-out infinite}
#ov360 .ov-licht i::after{content:"";position:absolute;left:-30%;right:-30%;top:50%;height:3px;margin-top:-1.5px;
  background:linear-gradient(90deg,rgba(174,228,255,0),rgba(225,247,255,.6) 50%,rgba(174,228,255,0))}
@keyframes ov-atmen{50%{opacity:.78}}
#ov360 .ov-glanz{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:50}   /* über Inhalten mit eigenem z-index */
#ov360 .ov-glanz i{position:absolute;left:0;top:0;opacity:0;pointer-events:none;will-change:transform,opacity}
#ov360 .ov-glanz-fleck{width:256px;height:256px;margin:-128px 0 0 -128px;border-radius:50%;
  background:radial-gradient(circle,rgba(228,247,255,.7) 0,rgba(170,228,255,.3) 16%,rgba(90,200,255,.1) 38%,rgba(57,194,255,0) 66%)}
#ov360 .ov-glanz-kern{width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.85) 0,rgba(226,246,255,.45) 24%,rgba(160,225,255,0) 70%)}
#ov360 .ov-glanz-h{width:520px;height:2px;margin-left:-260px;
  background:linear-gradient(90deg,rgba(174,228,255,0),rgba(240,251,255,.95) 50%,rgba(174,228,255,0))}
#ov360 .ov-glanz-v{width:2px;height:520px;margin-top:-260px;
  background:linear-gradient(rgba(174,228,255,0),rgba(240,251,255,.95) 50%,rgba(174,228,255,0))}
@media (prefers-reduced-motion:reduce){#ov360 .ov-licht i{animation:none}}
/* Schließen: Licht und Glanz blenden aus (die Glanzpunkte bleiben dabei stehen). Das Neigungslicht der Seite
   (html.fg-neigung) nimmt overview-360.js für die Dauer des Überblicks weg – die Glaskanten bleiben im Ruhezustand. */
#ov360.glanz-weg .ov-licht,#ov360.glanz-weg .ov-glanz i{opacity:0!important;transition:opacity .3s ease}
@media (prefers-reduced-motion:reduce){#ov360.glanz-weg .ov-licht,#ov360.glanz-weg .ov-glanz i{transition:none}}
/* Glaskacheln im Raum: Lichtkante und Leuchtfläche wie beim Neigen am Handy, auf allen Geräten (im Raum gibt es kein
   Hover). Die Lage (--mx/--my) setzt overview-360.js aus der Spiegelung des Raumlichts je Panel (glasLicht). Die
   „Beliebt“-Karte behält ihren eigenen Ring. */
html.ov-glas #ov360 .glass{--spec-soft:rgba(174,228,255,.26);--g-pool-a:rgba(57,194,255,.085);--g-spot:300px;--g-pool:360px}
html.ov-glas #ov360 .glass:not(.hot)::before,html.ov-glas #ov360 .glass::after{opacity:1}