/* =========================================================
   Variante 2 – Startbereich mit bewegtem Weltall
   (ergänzt style.css, gilt nur für variante-2.html)
   ========================================================= */

.start-v2 {
  background:
    radial-gradient(ellipse at 50% 45%, #0d1a33 0%, #070b18 45%, #02040a 100%);
  isolation: isolate;
}
.start-v2 #sterne { display: none; }
.start-v2::after { /* sanfter Übergang in den nächsten Bereich */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: 3;
  background: linear-gradient(180deg, transparent, var(--weltall));
  pointer-events: none;
}
.weltall { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.start-v2 .start-inhalt, .start-v2 .runter { z-index: 5; }

/* ---------- Nebel (leuchtende Farbwolken) ---------- */
.nebel {
  position: absolute; z-index: 0; border-radius: 50%;
  filter: blur(80px); opacity: .55; pointer-events: none;
  animation: nebel-treiben 38s ease-in-out infinite alternate;
}
.nebel-blau {
  width: 60vw; height: 60vw; left: -18vw; top: -10vw;
  background: radial-gradient(circle, rgba(46, 140, 255, .55), rgba(46, 197, 255, .12) 55%, transparent 70%);
}
.nebel-gold {
  width: 50vw; height: 50vw; right: -14vw; bottom: -18vw;
  background: radial-gradient(circle, rgba(255, 140, 30, .45), rgba(255, 90, 40, .12) 55%, transparent 70%);
  animation-duration: 46s; animation-delay: -12s;
}
@keyframes nebel-treiben {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(6vw, 4vw) scale(1.15); }
}

/* ---------- Planeten ---------- */
.v2-szene { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.v2-planet {
  position: absolute; border-radius: 50%;
  /* Maus-Parallaxe: --px/--py kommen aus variante-2.js */
  translate: calc(var(--px, 0) * var(--tiefe, 20) * 1px) calc(var(--py, 0) * var(--tiefe, 20) * 1px);
  transition: translate .9s cubic-bezier(.2, .7, .2, 1);
}
.v2-planet::before { /* Schatten-Seite für 3D-Wirkung */
  content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 30% 28%, transparent 38%, rgba(2, 4, 10, .55) 68%, rgba(2, 4, 10, .92) 100%);
}
.v2-baender {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden; z-index: 1;
}
.v2-baender::before { /* die Oberfläche dreht sich langsam */
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 200%;
  animation: drehen 40s linear infinite;
}
@keyframes drehen { to { transform: translateX(-50%); } }

/* Großer Sonnen-Riese unten rechts (wie die Sonnen-Lampen im Restaurant) */
.v2-riese {
  --tiefe: 14;
  width: 560px; height: 560px; right: -170px; bottom: -230px;
  box-shadow: 0 0 90px rgba(255, 140, 30, .55), 0 0 220px rgba(255, 100, 0, .3);
  animation: schweben 14s ease-in-out infinite;
}
.v2-riese .v2-baender::before {
  /* glühende, wolkige Oberfläche wie die Sonnen-Lampen im Restaurant */
  background:
    radial-gradient(ellipse 9% 14% at 12% 30%, rgba(255, 245, 190, .7), transparent 70%),
    radial-gradient(ellipse 12% 9% at 33% 62%, rgba(232, 90, 20, .55), transparent 70%),
    radial-gradient(ellipse 8% 12% at 58% 25%, rgba(255, 235, 170, .6), transparent 70%),
    radial-gradient(ellipse 10% 8% at 80% 70%, rgba(220, 80, 15, .5), transparent 70%),
    radial-gradient(ellipse 7% 10% at 92% 38%, rgba(255, 240, 180, .55), transparent 70%),
    linear-gradient(172deg, #ffc65a 0%, #ff9a2a 18%, #ffb848 30%, #f07a1e 46%, #ffbe55 60%, #ee6f1a 76%, #ffad3d 100%);
  filter: blur(3px);
  animation-duration: 90s;
}

/* Ring-Planet oben links (wie Jupiter/Saturn-Lampen) */
.v2-ring-planet {
  --tiefe: 28;
  width: 150px; height: 150px; left: 7%; top: 16%;
  box-shadow: 0 0 50px rgba(255, 210, 140, .35);
  animation: schweben 11s ease-in-out infinite; animation-delay: -4s;
}
.v2-ring-planet .v2-baender::before {
  background: linear-gradient(180deg, #f7e6c4 0%, #e0b47a 14%, #f4dcb0 24%, #c98a4b 36%, #f2d6a2 47%, #d7a064 60%, #f6e2bc 72%, #c58448 84%, #efd3a0 100%);
  filter: blur(1.2px);
  animation-duration: 30s;
}
.v2-ring {
  position: absolute; z-index: 3; left: -38%; top: 34%; width: 176%; height: 32%;
  border-radius: 50%;
  border: 6px solid rgba(240, 215, 170, .55);
  border-top-color: rgba(240, 215, 170, .15);
  box-shadow: 0 0 18px rgba(255, 220, 160, .25);
  transform: rotate(-16deg);
}

/* Kleine blaue Erde */
.v2-erde {
  --tiefe: 40;
  width: 64px; height: 64px; left: 18%; bottom: 20%;
  box-shadow: 0 0 34px rgba(46, 160, 255, .55);
  animation: schweben 9s ease-in-out infinite; animation-delay: -2s;
}
.v2-erde .v2-baender::before {
  background:
    radial-gradient(ellipse 12% 22% at 15% 40%, #5fbf5a 60%, transparent 62%),
    radial-gradient(ellipse 10% 14% at 40% 65%, #6fcf65 60%, transparent 62%),
    radial-gradient(ellipse 14% 20% at 65% 35%, #5fbf5a 60%, transparent 62%),
    radial-gradient(ellipse 9% 12% at 90% 70%, #6fcf65 60%, transparent 62%),
    linear-gradient(180deg, #4fb2ff, #1f6fd0);
  animation-duration: 24s;
}

/* Mond oben rechts */
.v2-mond {
  --tiefe: 24;
  width: 70px; height: 70px; right: 14%; top: 14%;
  background:
    radial-gradient(circle at 30% 35%, rgba(170, 160, 140, .55) 0 9%, transparent 10%),
    radial-gradient(circle at 62% 60%, rgba(170, 160, 140, .5) 0 12%, transparent 13%),
    radial-gradient(circle at 70% 28%, rgba(170, 160, 140, .4) 0 6%, transparent 7%),
    radial-gradient(circle at 40% 40%, #fffaf0, #e7dcc4 60%, #bdb097);
  box-shadow: 0 0 40px rgba(255, 244, 220, .35);
  animation: schweben 12s ease-in-out infinite; animation-delay: -7s;
}

/* ---------- Umlaufbahn um das Logo ---------- */
.v2-logo-orbit { position: relative; display: grid; place-items: center; }
.v2-logo-orbit .start-logo { position: relative; z-index: 2; }
.v2-orbit {
  position: absolute; z-index: 1; left: 50%; top: 52%;
  width: min(760px, 118vw); height: min(170px, 26vw);
  transform: translate(-50%, -50%) rotate(-7deg);
  border-radius: 50%;
  border: 1px solid rgba(46, 197, 255, .28);
  box-shadow: 0 0 22px rgba(46, 197, 255, .12), inset 0 0 22px rgba(46, 197, 255, .08);
  pointer-events: none;
}
.v2-orbit span { /* kleiner Planet auf der Umlaufbahn – Position setzt variante-2.js */
  position: absolute; left: 50%; top: 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #bff0ff, #2ec5ff 55%, #0b5f9c);
  box-shadow: 0 0 14px #2ec5ff, 0 0 30px rgba(46, 197, 255, .6);
}
.v2-orbit.vorne { z-index: 3; }

/* ---------- Umschalter zwischen den Varianten ---------- */
.varianten-wahl {
  position: fixed; left: 16px; bottom: 16px; z-index: 90;
  display: flex; gap: 4px; padding: 4px;
  border: 1px solid var(--rand); border-radius: 999px;
  background: rgba(7, 10, 18, .85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: .8rem; font-weight: 600;
}
.varianten-wahl a { padding: .4rem .9rem; border-radius: 999px; color: var(--text-leise); }
.varianten-wahl a[aria-current="page"] { background: var(--gold); color: #1a0f00; }

/* ---------- Handy ---------- */
@media (max-width: 900px) {
  .v2-riese { width: 340px; height: 340px; right: -130px; bottom: -120px; }
  .v2-ring-planet { width: 84px; height: 84px; left: 5%; top: 13%; }
  .v2-ring { border-width: 4px; }
  .v2-erde { width: 44px; height: 44px; left: 8%; bottom: 16%; }
  .v2-mond { width: 46px; height: 46px; right: 8%; top: 11%; }
  .nebel { filter: blur(60px); }
}
@media (max-width: 600px) {
  .v2-ring-planet { width: 62px; height: 62px; left: 4%; top: 9%; }
  .v2-mond { width: 40px; height: 40px; top: 10%; }
  .v2-erde { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-planet { transition: none; }
  .nebel { animation: none; }
}