/* =============================================================================
   SPHÄREN – Zentrales Gestaltungselement der Universität zu Köln
   Überlappende Kreise symbolisieren Vollkommenheit, Exzellenz und
   Interdisziplinarität (Markenhandbuch S. 14–17)
   ============================================================================= */

/* --- Basis-Sphäre --- */
.sphere {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  flex-shrink: 0;
}

/* Outline-Variante (100% Deckkraft) */
.sphere--outline {
  background: transparent;
  border: 2px solid currentColor;
}

/* Flächen-Variante mit variabler Deckkraft */
.sphere--filled {
  background: currentColor;
}

/* --- Farbvarianten --- */
.sphere--blau {
  color: var(--color-uni-blau);
}

.sphere--tuerkis {
  color: var(--color-tuerkis);
}

.sphere--korall {
  color: var(--color-korall);
}

.sphere--white {
  color: var(--color-white);
}

/* --- Größen (abgeleitet vom Gestaltungsraster) --- */
.sphere--xs  { width: 120px;  height: 120px; }
.sphere--sm  { width: 200px;  height: 200px; }
.sphere--md  { width: 350px;  height: 350px; }
.sphere--lg  { width: 500px;  height: 500px; }
.sphere--xl  { width: 700px;  height: 700px; }
.sphere--2xl { width: 900px;  height: 900px; }

/* --- Dekorative Sphären-Komposition (mind. 2 überlappende Kreise) --- */
.spheres-composition {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Hero-Sphären: Blaue Seite */
.spheres-composition--hero .sphere:nth-child(1) {
  width: 500px;
  height: 500px;
  right: -80px;
  top: -100px;
  background: rgba(0, 157, 204, 0.15);
  border-radius: 50%;
}

.spheres-composition--hero .sphere:nth-child(2) {
  width: 350px;
  height: 350px;
  right: 150px;
  bottom: -120px;
  background: rgba(234, 86, 79, 0.12);
  border-radius: 50%;
}

/* Format-abfallender Kreis (mind. einer muss formatfüllend sein, Markenhandbuch S. 17) */
.spheres-composition--hero .sphere:nth-child(3) {
  width: 700px;
  height: 700px;
  right: -250px;
  top: 50%;
  transform: translateY(-50%);
  border: 2px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  border-radius: 50%;
}

/* --- Sphären-Overlay für helle Sektionen --- */
.spheres-composition--light .sphere:nth-child(1) {
  width: 600px;
  height: 600px;
  right: -150px;
  top: -200px;
  background: var(--color-tuerkis-10);
  border-radius: 50%;
}

.spheres-composition--light .sphere:nth-child(2) {
  width: 400px;
  height: 400px;
  right: 100px;
  bottom: -150px;
  background: var(--color-korall-10);
  border-radius: 50%;
}

.spheres-composition--light .sphere:nth-child(3) {
  width: 300px;
  height: 300px;
  left: -100px;
  bottom: 0;
  border: 2px solid var(--color-uni-blau-10);
  background: transparent;
  border-radius: 50%;
}

/* --- Sphären-Dekoration für Cards/Teaser --- */
.card__sphere-accent {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  top: -40px;
  right: -40px;
  pointer-events: none;
}

.card__sphere-accent--blau { background: var(--color-uni-blau-10); }
.card__sphere-accent--tuerkis { background: var(--color-tuerkis-10); }
.card__sphere-accent--korall { background: var(--color-korall-10); }

/* --- Sphären-Hintergrund für Footer --- */
.site-footer .spheres-composition .sphere:nth-child(1) {
  width: 500px;
  height: 500px;
  right: -100px;
  bottom: -150px;
  background: rgba(0, 157, 204, 0.08);
  border-radius: 50%;
}

.site-footer .spheres-composition .sphere:nth-child(2) {
  width: 300px;
  height: 300px;
  left: -80px;
  top: -100px;
  border: 2px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  border-radius: 50%;
}

.site-footer .spheres-composition .sphere:nth-child(3) {
  width: 200px;
  height: 200px;
  left: 120px;
  top: 40px;
  background: rgba(234, 86, 79, 0.08);
  border-radius: 50%;
}

/* --- Animierte Sphären (subtil, Claude-Ästhetik) --- */
@media (prefers-reduced-motion: no-preference) {
  .sphere--animated {
    animation: sphere-float 8s ease-in-out infinite;
  }

  .sphere--animated:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
  }

  .sphere--animated:nth-child(3) {
    animation-delay: -6s;
    animation-duration: 12s;
  }
}

@keyframes sphere-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

/* --- Profilbild / Avatar als Sphäre --- */
.avatar-sphere {
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1;
  border: 3px solid var(--color-tuerkis-30);
}

/* --- Feature-Kreis (Inhaltsdarstellung in Kreis) --- */
.feature-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: var(--space-6);
  background-color: var(--color-uni-blau);
  color: var(--color-white);
  position: relative;
}

.feature-circle__value {
  font-family: var(--font-sans);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.feature-circle__label {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: var(--space-2);
}