body { margin: 0; background: #fff; }

/* Responsive Bühne mit exakt 1920:1080 Verhältnis */
.sun{
  position: relative;
  width: min(1920px, 100vw);
  aspect-ratio: 1920 / 1080;
  margin: 0 auto;
}

/* Hintergrund füllt die Bühne */
.bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  user-select: none;
  pointer-events: none;
}

/* Icons: Position über Prozent, Größe responsive über clamp() */
.icon{
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  transform-origin: center;
  cursor: pointer;
  user-select: none;

  /* Icon-Größe responsive: min / ideal / max */
  width: clamp(18px, 6vw, 140px);

  transition: transform 180ms ease, filter 180ms ease;
}

/* Hover: translate muss bleiben */
.icon:hover{
  transform: translate(-50%, -50%) scale(1.12);
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.25));
}

/* --- Positionen in % (aus deinen px-Werten umgerechnet) --- */
.center { left: 48.9583%; top: 48.1481%; }

.r1 { left: 64.0625%; top: 13.8889%; }
.r2 { left: 75.0000%; top: 44.4444%; }
.r3 { left: 64.0625%; top: 86.1111%; }
.r4 { left: 33.8542%; top: 86.1111%; }
.r5 { left: 22.9167%; top: 44.4444%; }
.r6 { left: 33.8542%; top: 12.0370%; }