/* =====================================================================
   glow.css – Hintergrund mit Punktraster und langsam kreisendem Farbverlauf,
   dazu der wandernde rote Lichtrand um Kennzahlenleiste und Kartenfenster.
   Rein additiv und nach motion.css geladen. Bei „Bewegung reduzieren“ stehen die Effekte still,
   im Bildschirm-Modus (body.monitor) sind sie aus.
   ===================================================================== */
@property --gl-a{syntax:"<angle>";inherits:false;initial-value:0deg}
:root{--gl-red:#E0483B; --gl-red2:#FF8A5B; --gl-glow:rgba(195,53,45,.16); --gl-dot:rgba(20,32,42,.16)}
:root[data-theme="dark"]{--gl-glow:rgba(234,91,81,.20); --gl-dot:rgba(214,226,236,.14)}

body:not(.monitor){position:relative;isolation:isolate}
body:not(.monitor)::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:radial-gradient(var(--gl-dot) 1.1px,transparent 1.2px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 85% 70% at 50% 0%,#000 25%,transparent 78%);
          mask-image:radial-gradient(ellipse 85% 70% at 50% 0%,#000 25%,transparent 78%)}
body:not(.monitor)::after{content:"";position:fixed;left:50%;top:-22vh;width:120vw;height:60vh;translate:-50% 0;z-index:-1;pointer-events:none;filter:blur(70px);opacity:.9;
  background:conic-gradient(from var(--gl-a) at 50% 60%,var(--gl-glow),transparent 22%,rgba(90,168,226,.14) 40%,transparent 58%,rgba(169,141,230,.14) 76%,var(--gl-glow));
  animation:glSpin 24s linear infinite}
@keyframes glSpin{to{--gl-a:360deg}}

/* Lichtrand: Kennzahlenleiste (bekommt dafür Kartenform) und Kartenfenster */
body:not(.monitor) .kpis{position:relative;background:var(--surface);border:1px solid var(--line-strong);border-radius:18px;overflow:clip}
body:not(.monitor) .kpis::after,body:not(.monitor) #mapPanel::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--gl-a),transparent 0 78%,var(--gl-red) 90%,var(--gl-red2) 96%,transparent 100%);
  -webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-clip:content-box,border-box;-webkit-mask-composite:xor;
          mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-clip:content-box,border-box;mask-composite:exclude;
  animation:glSpin 6s linear infinite}
body:not(.monitor) #mapPanel::after{animation-duration:11s;opacity:.8}
#mapPanel{position:relative}

@media (max-width:700px){ body:not(.monitor)::after{filter:blur(50px)} }
@media (prefers-reduced-motion:reduce){
  body:not(.monitor)::after,body:not(.monitor) .kpis::after,body:not(.monitor) #mapPanel::after{animation:none!important}
}

/* ---------- Aufbau-Choreografie nach dem Start-Intro (Steuerung im Skript am Seitenanfang) ----------
   Während html.bd-hold sind die Inhalte der Fenster verborgen; jedes Fenster bekommt erst einen Lichtrand,
   der sich einmal rundherum zieht (bd-ring), danach blenden die Inhalte gestaffelt ein (bd-in). */
@property --bd-p{syntax:"<percentage>";inherits:false;initial-value:0%}
html.bd-hold .top>*,html.bd-hold .disclaimer>*,html.bd-hold .disclaimer,html.bd-hold #lageband>*,html.bd-hold .kpis>*,html.bd-hold #mapPanel>*,html.bd-hold .side>*{opacity:0}
html.bd-hold .kpis:not(.bd-seen)::after,html.bd-hold #mapPanel:not(.bd-seen)::after{display:none}
html.bd-hold .top:not(.bd-in)>*{opacity:0}
html.bd-hold .bd-ring{position:relative}
html.bd-hold .bd-ring::after,html.bd-hold .kpis.bd-ring::after,html.bd-hold #mapPanel.bd-ring::after{content:"";display:block;position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;z-index:3;opacity:1;
  background:conic-gradient(from -90deg,transparent 0%,#E0483B calc(var(--bd-p) - 20%),#FFB27A var(--bd-p),transparent calc(var(--bd-p) + .1%));
  -webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-clip:content-box,border-box;-webkit-mask-composite:xor;
          mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-clip:content-box,border-box;mask-composite:exclude;
  filter:drop-shadow(0 0 6px rgba(255,106,61,.7));
  animation:bdSweep 1.1s cubic-bezier(.45,.05,.25,1) forwards,bdRingOut .7s ease-in-out 1s forwards}
@keyframes bdSweep{from{--bd-p:0%}to{--bd-p:100%}}
@keyframes bdRingOut{to{opacity:0}}
html.bd-hold .top.bd-in>*,html.bd-hold .disclaimer.bd-in,html.bd-hold .bd-in.bd-in>*{opacity:1;animation:bdIn 1.1s cubic-bezier(.22,.9,.3,1) calc(var(--n,0)*60ms) backwards}
html.bd-hold .disclaimer.bd-in>*{opacity:1}
@keyframes bdIn{from{opacity:0;transform:translateY(-8px);filter:blur(4px)}}
@media (prefers-reduced-motion:reduce){ html.bd-hold .top>*,html.bd-hold .disclaimer,html.bd-hold #lageband>*,html.bd-hold .kpis>*,html.bd-hold #mapPanel>*,html.bd-hold .side>*{opacity:1!important} }

/* „Karte fokussieren“: Dort nutzt .kpis::after schon für den Text „Kennzahlen anzeigen“.
   Der Lichtrand läuft deshalb über ::before, und ::after bleibt reine Beschriftung. */
body:not(.monitor) .wrap.explore .kpis::after{background:none;-webkit-mask:none;mask:none;animation:none;padding:0;border-radius:0;z-index:auto;left:auto;bottom:auto}
body:not(.monitor) .wrap.explore .kpis::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--gl-a),transparent 0 78%,var(--gl-red) 90%,var(--gl-red2) 96%,transparent 100%);
  -webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-clip:content-box,border-box;-webkit-mask-composite:xor;
          mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-clip:content-box,border-box;mask-composite:exclude;
  animation:glSpin 6s linear infinite}
@media (prefers-reduced-motion:reduce){ body:not(.monitor) .wrap.explore .kpis::before{animation:none!important} }

/* Neuer Einsatz: roter Beam läuft um die Gemeinde-Karte in der Liste (ca. 9 s), dazu ein kurzes rotes Aufleuchten */
@property --nb-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.grp.newbeam{position:relative;animation:nbFlash 2.4s ease-out}
.grp.newbeam::after{content:"";position:absolute;inset:0;padding:2.5px;pointer-events:none;z-index:3;border-radius:6px;
  background:conic-gradient(from var(--nb-a),transparent 0 62%,var(--gl-red,#E0483B) 84%,#FFB27A 96%,transparent 100%);
  -webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-clip:content-box,border-box;-webkit-mask-composite:xor;
          mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-clip:content-box,border-box;mask-composite:exclude;
  filter:drop-shadow(0 0 7px rgba(255,90,60,.75));
  animation:nbSpin 1.8s linear 5 forwards,nbOut .8s ease 8.2s forwards}
@keyframes nbSpin{to{--nb-a:360deg}}
@keyframes nbOut{to{opacity:0}}
@keyframes nbFlash{0%{box-shadow:inset 0 0 0 999px rgba(224,72,59,.22)}100%{box-shadow:inset 0 0 0 999px rgba(224,72,59,0)}}
@media (prefers-reduced-motion:reduce){.grp.newbeam::after{animation:nbOut .8s ease 8.2s forwards}.grp.newbeam{animation:none}}

/* Letzter laufender Einsatz: der Lichtrand läuft zeitversetzt immer wieder einmal herum, bis der nächste Einsatz eintrifft */
.grp.beamloop:not(.newbeam){position:relative}
.grp.beamloop:not(.newbeam)::after{content:"";position:absolute;inset:0;padding:2px;pointer-events:none;z-index:3;border-radius:6px;opacity:0;
  background:conic-gradient(from var(--nb-a),transparent 0 62%,var(--gl-red,#E0483B) 84%,#FFB27A 96%,transparent 100%);
  -webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-clip:content-box,border-box;-webkit-mask-composite:xor;
          mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-clip:content-box,border-box;mask-composite:exclude;
  filter:drop-shadow(0 0 6px rgba(255,90,60,.6));
  animation:nbLoop 7s linear 1.2s infinite}
@keyframes nbLoop{0%{--nb-a:0deg;opacity:0}3%{opacity:.9}26%{--nb-a:360deg;opacity:.9}31%{--nb-a:360deg;opacity:0}100%{--nb-a:360deg;opacity:0}}
@media (prefers-reduced-motion:reduce){.grp.beamloop:not(.newbeam)::after{animation:none}}