* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  overflow: hidden;
  font-family: Georgia, "Times New Roman", serif;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 1.5s ease, color 1s ease;
}

/* TAG / NACHT */
body.time-day { color: #0b1f3a; }
body.time-night { color: #ff8a7a; }

/* ZENTRUM */
.center-content {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
  padding: 0 16px;
}

.logo {
  width: 180px;
  margin-bottom: 16px;
}

#poem {
  font-size: 1.4rem;
  line-height: 1.4;
  text-shadow:
    0 0 6px currentColor,
    0 0 18px rgba(255,255,255,0.2);
  animation: glow 8s ease-in-out infinite;
}

@keyframes glow {
  0%,100% { opacity: 0.85; }
  50% { opacity: 1; }
}

/* ORBITS */
.scene {
  position: fixed;
  inset: 0;
  z-index: 2;
}

.orbital {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  animation: orbit linear infinite;
  transform-origin: center;
  box-shadow:
    0 0 18px rgba(255,200,160,0.35),
    inset 0 0 12px rgba(255,255,255,0.25);
}

/* MOBILE RADII */
.o1 { width: 72px; height: 72px; --r: 120px; animation-duration: 30s; }
.o2 { width: 90px; height: 90px; --r: 190px; animation-duration: 45s; }
.o3 { width: 110px; height: 110px; --r: 260px; animation-duration: 65s; }
.o4 { width: 130px; height: 130px; --r: 330px; animation-duration: 90s; }
.o5 { width: 150px; height: 150px; --r: 400px; animation-duration: 120s; }
.o6 { width: 60px; height: 60px; --r: 160px; animation-duration: 50s; }
@keyframes orbit {
  from {
    transform: translate(-50%, -50%) rotate(0deg) translateX(var(--r));
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg) translateX(var(--r));
  }
}

/* FOOTER */
.legal-footer {
  position: fixed;
  bottom: 12px;
  width: 100%;
  text-align: center;
  font-size: 0.75rem;
  opacity: 0.65;
}
/* RESET */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; font-family: Georgia, serif; color: #f4f2ea; overflow-x: hidden; } /* HINTERGRUND */ body { background-size: cover; background-position: center; background-repeat: no-repeat; transition: background-image 2s ease, filter 2s ease; } /* TAG / NACHT */ body.day { filter: brightness(1); } body.night { filter: brightness(0.75); } 

/* JAHRESZEITEN – TAG */ body.day.spring { background-image: url("../../backgrounds/spring-day.jpg"); } body.day.summer { background-image: url("../../backgrounds/summer-day.jpg"); } body.day.autumn { background-image: url("../../backgrounds/autumn-day.jpg"); } body.day.winter { background-image: url("../../backgrounds/winter-day.jpg"); }

/* JAHRESZEITEN – NACHT */ body.night.spring { background-image: url("../../backgrounds/spring-night.jpg"); } body.night.summer { background-image: url("../../backgrounds/summer-night.jpg"); } body.night.autumn { background-image: url("../../backgrounds/autumn-night.jpg"); } body.night.winter { background-image: url("../../backgrounds/winter-night.jpg"); } /* ZENTRUM */ .center-content { text-align: center; padding-top: 2.5rem; } .logo { width: 140px; margin-bottom: 1.2rem; } /* ORBIT */ .scene { position: relative; width: 100%; height: 320px; margin-top: 2rem; } .orbital { position: absolute; width: 64px; height: 64px; border-radius: 50%; background-size: cover; background-position: center; animation: orbit 40s linear infinite; } .o1 { top: 50%; left: 50%; } .o2 { top: 20%; left: 20%; } .o3 { top: 20%; right: 20%; } .o4 { bottom: 20%; left: 30%; } .o5 { bottom: 20%; right: 30%; } .o6 { top: 70%; left: 50%; } @keyframes orbit { from { transform: rotate(0deg) translateX(90px) rotate(0deg); } to { transform: rotate(360deg) translateX(90px) rotate(-360deg); } } /* FOOTER */ .legal-footer { position: absolute; bottom: 0.8rem; width: 100%; text-align: center; font-size: 0.7rem; opacity: 0.7; } /* TOUCH */ body { touch-action: pan-y; }