/* ==========================================================================
   radar-scope.css — Radar-Scope als Panel-Hintergrund
   --------------------------------------------------------------------------
   Entfernungsringe + Fadenkreuz + nachleuchtender Sweep-Keil + Monitor-
   Scanlines. Reines CSS: keine Bilddatei, scharf auf jedem Display, skaliert
   mit dem Container und passt sich per Variablen an.

   VERWENDUNG
     <div class="radar-scope"> … Inhalt … </div>

   Der Host sollte flex/grid sein (dann heben sich die Kinder automatisch über
   den Hintergrund) — sonst brauchen die Inhalte position:relative.
   Absolut positionierte Kinder (z. B. Bildunterschriften) bleiben unberührt,
   weil hier NUR z-index gesetzt wird, nie position.

   ANPASSEN (alles optional, per CSS-Variable am Host)
     --radar-color   Linienfarbe                     (Default Lagune-Cyan)
     --radar-alpha   Deckkraft der Linien            (Default .13)
     --radar-ring    Abstand der Entfernungsringe    (Default 33px)
     --radar-cx/-cy  Mittelpunkt des Scopes          (Default 50% / 52%)
     --radar-sweep   Startwinkel des Sweep-Keils     (Default 214deg)
     --radar-scan    Deckkraft der Scanlines         (Default .17)
     --radar-fade    Radius, ab dem ausgeblendet wird (Default 52%)

   Beispiel dezenter:  style="--radar-alpha:.07; --radar-ring:48px"
   ========================================================================== */

.radar-scope {
  position: relative;
  isolation: isolate;   /* eigener Stacking-Kontext → wirkt nicht nach außen */
}

.radar-scope::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Monitor-Scanlines */
    repeating-linear-gradient(0deg,
      rgba(2, 12, 20, var(--radar-scan, .17)) 0 1px, transparent 1px 3px),
    /* Fadenkreuz waagerecht */
    linear-gradient(0deg, transparent calc(var(--radar-cy, 52%) - .5px),
      rgba(var(--radar-color, 95, 208, 239), calc(var(--radar-alpha, .13) + .01)) calc(var(--radar-cy, 52%) - .5px) calc(var(--radar-cy, 52%) + .5px),
      transparent calc(var(--radar-cy, 52%) + .5px)),
    /* Fadenkreuz senkrecht */
    linear-gradient(90deg, transparent calc(var(--radar-cx, 50%) - .5px),
      rgba(var(--radar-color, 95, 208, 239), calc(var(--radar-alpha, .13) + .01)) calc(var(--radar-cx, 50%) - .5px) calc(var(--radar-cx, 50%) + .5px),
      transparent calc(var(--radar-cx, 50%) + .5px)),
    /* Entfernungsringe */
    repeating-radial-gradient(circle at var(--radar-cx, 50%) var(--radar-cy, 52%),
      transparent 0 calc(var(--radar-ring, 33px) - 1px),
      rgba(var(--radar-color, 95, 208, 239), var(--radar-alpha, .13)) calc(var(--radar-ring, 33px) - 1px) var(--radar-ring, 33px)),
    /* nachleuchtender Sweep-Keil */
    conic-gradient(from var(--radar-sweep, 214deg) at var(--radar-cx, 50%) var(--radar-cy, 52%),
      rgba(var(--radar-color, 95, 208, 239), calc(var(--radar-alpha, .13) + .03)),
      rgba(var(--radar-color, 95, 208, 239), 0) 58deg);
  /* weich zum Rand ausblenden, damit es nicht wie aufgeklebte Textur wirkt */
  -webkit-mask-image: radial-gradient(circle at var(--radar-cx, 50%) var(--radar-cy, 52%),
    #000 var(--radar-fade, 52%), transparent 92%);
  mask-image: radial-gradient(circle at var(--radar-cx, 50%) var(--radar-cy, 52%),
    #000 var(--radar-fade, 52%), transparent 92%);
}

/* Inhalte über den Hintergrund heben. Bewusst NUR z-index: ein position:relative
   wuerde absolut positionierte Kinder (Bildunterschriften) aus ihrer Lage reissen. */
.radar-scope > * { z-index: 1; }