/* ZSA-Kreise (Kunde, 03.11.2026) – nur Startseite, siehe inc/zsa-spheres.php.
   Rein dekorativ: keine Klicks, kein Screenreader. */

.zsa-spheres {
  pointer-events: none;
}

.zsa-sphere {
  display: block;
  width: var(--zsa-sphere-size);
  height: var(--zsa-sphere-size);
}

.zsa-sphere__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Folie 2: blau mit magenta Bogen, unten rechts im Hero (.hero-cover ist
   als wp-block-cover bereits position: relative). */
.zsa-spheres--hero {
  --zsa-sphere-size: 40px;
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, var(--zsa-sphere-size));
  grid-template-rows: repeat(4, var(--zsa-sphere-size));
}

.zsa-spheres--hero .zsa-sphere__bg {
  fill: #AEC9E5;
}

.zsa-spheres--hero .zsa-sphere__arc {
  fill: #EC008B;
}

/* Folie 3: magenta mit blauem Bogen, Reihe mittig unter der Galerie */
.zsa-spheres--row {
  --zsa-sphere-size: 40px;
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: 32px;
}

.zsa-spheres--row .zsa-sphere__bg {
  fill: #EC008B;
}

.zsa-spheres--row .zsa-sphere__arc {
  fill: #AEC9E5;
}

@media (min-width: 782px) {

  .zsa-spheres--hero {
    --zsa-sphere-size: 64px;
    right: 20px;
    bottom: 16px;
  }

  .zsa-spheres--row {
    --zsa-sphere-size: 64px;
    margin-top: 48px;
  }
}

@media (min-width: 1280px) {

  .zsa-spheres--hero {
    --zsa-sphere-size: 80px;
    right: 24px;
  }

  .zsa-spheres--row {
    --zsa-sphere-size: 88px;
  }
}