/**
 * PX ERK Hintergrund – Geometrie und Ebenen.
 *
 * Die Bewegung kommt aus erk-bg.js (Anime.js v4 / WAAPI) und läuft
 * komplett auf dem Compositor: nur transform + opacity, kein Layout,
 * kein Repaint. Die CSS-Variablen setzt das Plugin aus den Optionen.
 */

.erk-bg{
  position: fixed;
  inset: 0;
  z-index: var(--erk-z, 0);
  overflow: hidden;
  pointer-events: none;
  opacity: var(--erk-alpha, .25);    /* kein Intro – ab dem ersten Frame da */
  filter: blur(var(--erk-blur, 0px));
}

/* Eine Ebene pro Bewegungsart – so kollidiert kein transform mit einem
   anderen. Leere Divs sind billig, Property-Konflikte sind es nicht. */
.erk-bg__stage{ position:absolute; inset:0; }   /* Zeiger-Parallaxe */

/* Cluster = die vier Kreise in Logo-Anordnung, rotiert extrem langsam */
.erk-bg__cluster{
  position: absolute;
  top: var(--erk-y, 92%);
  left: var(--erk-x, 90%);
  width: var(--erk-size, 46vmax);
  height: var(--erk-size, 46vmax);
  margin: calc(var(--erk-size, 46vmax) / -2) 0 0 calc(var(--erk-size, 46vmax) / -2);
}

.erk-bg__c{
  position: absolute;
  border-radius: 50%;
}

/* Geometrie 1:1 aus dem Logo abgeleitet */
.erk-bg__c--fill{ width:57%; height:57%; left:12.9%; top: 1.5%; background: var(--erk-fill, #dde4d4); }
.erk-bg__c--tr  { width:61%; height:61%; left:36.2%; top: 0;     border:1px solid var(--erk-line, #748873); }
.erk-bg__c--l   { width:61%; height:61%; left: 2.3%; top:20.8%;  border:1px solid var(--erk-line, #748873); }
.erk-bg__c--br  { width:61%; height:61%; left:33.1%; top:38.6%;  border:1px solid var(--erk-line, #748873); }

/* Mobil größer im Verhältnis, aber blasser. Die Werte kommen als eigener
   Satz aus den Optionen – siehe px-erk-hintergrund.php. */
@media (max-width: 782px){
  .erk-bg{ opacity: var(--erk-alpha-m, .18); }
  .erk-bg__cluster{
    top: var(--erk-y-m, 90%);
    left: var(--erk-x-m, 84%);
    width: var(--erk-size-m, 60vmax);
    height: var(--erk-size-m, 60vmax);
    margin: calc(var(--erk-size-m, 60vmax) / -2) 0 0 calc(var(--erk-size-m, 60vmax) / -2);
  }
}

/* Kein JS-Fallback nötig: die Deckkraft steht im CSS. Lädt erk-bg.js
   nicht, steht das Motiv einfach still da. */