/* ===============================
   BASIS
=============================== */

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

body {
  height: 100vh;
  overflow: hidden;
  font-family: Georgia, "Times New Roman", serif;
  background: radial-gradient(circle at center, #111 0%, #000 100%);
  transition: color 1s ease, background 1.5s ease;
}

/* ===============================
   SCHRIFT-FARBLOGIK
=============================== */

body.time-day {
  color: #0b1f3a; /* dunkelblau */
}

body.time-night {
  color: #ff8a7a; /* hellrot */
}

body.time-auto {
  color: #0b1f3a;
}

/* alle Texte erben die Farbe */
h1, button {
  color: inherit;
}

/* ===============================
   ZENTRUM
=============================== */

.center-content {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
}

.logo {
  width: 240px;
  margin-bottom: 18px;
}

#poem {
  font-size: 2.1rem;
  padding: 14px 22px;
  border-radius: 10px;
  background: rgba(...);
  transition: color 1s ease, background 1s ease;
}
#poem,
button {
  text-shadow:
    0 0 6px currentColor,
    0 0 14px rgba(204,204,153,0.25);
	/* TAG → Blau + Gold */
body.time-day #poem,
body.time-day button {
  text-shadow:
    0 0 6px rgba(255, 180, 80, 0.45),
    0 0 16px rgba(255, 180, 80, 0.25),
    0 0 28px rgba(255, 180, 80, 0.15);
}

/* NACHT → Rot + Türkis */
body.time-night #poem,
body.time-night button {
  text-shadow:
    0 0 6px rgba(80, 220, 220, 0.55),
    0 0 18px rgba(80, 220, 220, 0.35),
    0 0 32px rgba(80, 220, 220, 0.18);
}

}
@keyframes glow-breathe {
  0%, 100% {
    text-shadow:
      0 0 6px currentColor,
      0 0 14px rgba(255,255,255,0.15);
  }
  50% {
    text-shadow:
      0 0 10px currentColor,
      0 0 24px rgba(255,255,255,0.3);
  }
}

#poem {
  animation: glow-breathe 8s ease-in-out infinite;
}

/* ===============================
   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;
  cursor: pointer;

  box-shadow:
    0 0 28px rgba(255,200,160,0.35),
    inset 0 0 18px rgba(255,255,255,0.25);
}

/* ===============================
   RADII & ZEITEN
=============================== */

.o1 { width: 120px; height: 120px; --r: 200px; animation-duration: 70s; }
.o2 { width: 160px; height: 160px; --r: 320px; animation-duration: 120s; }
.o3 { width: 200px; height: 200px; --r: 460px; animation-duration: 180s; }
.o4 { width: 240px; height: 240px; --r: 620px; animation-duration: 60s; }
.o5 { width: 280px; height: 280px; --r: 760px; animation-duration: 160s; }
.o6 { width: 220px; height: 220px; --r: 880px; animation-duration: 90s; }
.o7 { width: 125px; height: 125px; --r: 220px; animation-duration: 30s; }


/* ===============================
   ANIMATION
=============================== */

@keyframes orbit {
  from {
    transform: translate(-50%, -50%) rotate(0deg) translateX(var(--r));
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg) translateX(var(--r));
  }
}

/* ===============================
   STEUERUNG
=============================== */

.controls {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 20;
}

.controls button {
  background: rgba(0,0,0,0.55);
  border: 1px solid currentColor;
  padding: 8px 14px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.4s ease;
}

.controls button:hover {
  background: rgba(255,255,255,0.15);
}
body {
  height: 100vh;
  overflow: hidden;

  background-image: url("backgrounds/winter-day.jpg"); /* Beispiel */
  background-repeat: no-repeat;        /* 🔴 DAS FEHLT BEI DIR */
  background-size: cover;               /* skaliert auf Bildschirm */
  background-position: center center;   /* sauber zentriert */

  transition: background-image 1.5s ease;
  font-family: Georgia, "Times New Roman", serif;
}