/* ==========================================================================
   Questia MC – landscape.css
   Hero-Hintergrund: Minecraft-Nachtlandschaft, nur HTML/CSS.
   Ebenen von hinten nach vorn: Himmel → Sterne → Mond → Berge (fern, mittel, nah)
   Markup: includes/landscape.php – wählt je Bergebene zufällig eine von 4 Varianten.
   Enthält auch die zugehörigen Animationen (Funkeln, Lichthof, Parallaxe).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Szene und Nachthimmel
   -------------------------------------------------------------------------- */
/* Nachthimmel: Verlauf fast Schwarz → Blau → Violett, Lichtschein am Horizont */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  /* Unten weich in den Seitenhintergrund auslaufen (Übergang zur Season-Sektion) */
  mask-image: linear-gradient(#000 calc(100% - 6rem), transparent);
  -webkit-mask-image: linear-gradient(#000 calc(100% - 6rem), transparent);
  background:
    radial-gradient(ellipse 70% 28% at 50% 78%, rgb(var(--c-questia-rgb) / 0.09), transparent 70%),
    radial-gradient(ellipse 55% 30% at 18% 82%, rgb(124 58 237 / 0.16), transparent 70%),
    linear-gradient(180deg, #04030a 0%, #0a0b26 42%, #1b1240 76%, #2b1a52 100%);
}

/* Abdunklung hinter dem Hero-Text für bessere Lesbarkeit */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 42% at 50% 45%, rgb(var(--c-bg-rgb) / 0.45), transparent 75%);
}

/* Sterne: drei Ebenen (klein/dezent, mittel, hell mit Schimmer) */
.stars,
.stars::before,
.stars::after {
  position: absolute;
  inset: 0;
}

.stars::before,
.stars::after {
  content: "";
}

.stars {
  background-image:
    radial-gradient(1px 1px at 14.2% 52.7%, rgb(255 255 255 / 0.45) 100%, transparent),
    radial-gradient(1px 1px at 26.0% 31.2%, rgb(200 230 255 / 0.35) 100%, transparent),
    radial-gradient(1px 1px at 47.3% 24.2%, rgb(255 255 255 / 0.45) 100%, transparent),
    radial-gradient(1px 1px at 10.2% 2.7%, rgb(200 230 255 / 0.35) 100%, transparent),
    radial-gradient(1px 1px at 43.4% 47.5%, rgb(255 255 255 / 0.45) 100%, transparent),
    radial-gradient(1px 1px at 69.2% 17.2%, rgb(255 255 255 / 0.45) 100%, transparent),
    radial-gradient(1px 1px at 58.9% 7.2%, rgb(200 230 255 / 0.35) 100%, transparent),
    radial-gradient(1px 1px at 4.0% 2.6%, rgb(255 255 255 / 0.45) 100%, transparent),
    radial-gradient(1px 1px at 93.0% 24.3%, rgb(255 255 255 / 0.45) 100%, transparent),
    radial-gradient(1px 1px at 96.0% 45.3%, rgb(255 255 255 / 0.45) 100%, transparent),
    radial-gradient(1px 1px at 75.8% 58.3%, rgb(255 255 255 / 0.45) 100%, transparent),
    radial-gradient(1px 1px at 34.9% 42.3%, rgb(200 230 255 / 0.35) 100%, transparent),
    radial-gradient(1px 1px at 94.3% 57.5%, rgb(200 230 255 / 0.35) 100%, transparent),
    radial-gradient(1px 1px at 83.1% 34.9%, rgb(255 255 255 / 0.45) 100%, transparent),
    radial-gradient(1px 1px at 19.2% 61.5%, rgb(200 230 255 / 0.35) 100%, transparent),
    radial-gradient(1px 1px at 12.8% 21.3%, rgb(200 230 255 / 0.35) 100%, transparent),
    radial-gradient(1px 1px at 50.8% 56.5%, rgb(255 255 255 / 0.45) 100%, transparent),
    radial-gradient(1px 1px at 30.7% 36.8%, rgb(200 230 255 / 0.35) 100%, transparent),
    radial-gradient(1px 1px at 83.9% 31.8%, rgb(255 255 255 / 0.45) 100%, transparent),
    radial-gradient(1px 1px at 48.1% 46.4%, rgb(200 230 255 / 0.35) 100%, transparent),
    radial-gradient(1px 1px at 41.6% 11.6%, rgb(200 230 255 / 0.35) 100%, transparent),
    radial-gradient(1px 1px at 9.5% 41.5%, rgb(255 255 255 / 0.45) 100%, transparent),
    radial-gradient(1px 1px at 77.3% 32.8%, rgb(200 230 255 / 0.35) 100%, transparent),
    radial-gradient(1px 1px at 37.3% 45.7%, rgb(200 230 255 / 0.35) 100%, transparent),
    radial-gradient(1px 1px at 5.3% 43.9%, rgb(200 230 255 / 0.35) 100%, transparent),
    radial-gradient(1px 1px at 64.4% 11.3%, rgb(255 255 255 / 0.45) 100%, transparent),
    radial-gradient(1px 1px at 97.2% 48.0%, rgb(255 255 255 / 0.45) 100%, transparent),
    radial-gradient(1px 1px at 40.6% 22.0%, rgb(200 230 255 / 0.35) 100%, transparent),
    radial-gradient(1px 1px at 46.0% 17.4%, rgb(255 255 255 / 0.45) 100%, transparent),
    radial-gradient(1px 1px at 38.6% 53.3%, rgb(255 255 255 / 0.45) 100%, transparent),
    radial-gradient(1px 1px at 51.8% 35.2%, rgb(200 230 255 / 0.35) 100%, transparent),
    radial-gradient(1px 1px at 94.1% 30.3%, rgb(200 230 255 / 0.35) 100%, transparent),
    radial-gradient(1px 1px at 56.9% 13.2%, rgb(200 230 255 / 0.35) 100%, transparent),
    radial-gradient(1px 1px at 48.5% 22.8%, rgb(200 230 255 / 0.35) 100%, transparent),
    radial-gradient(1px 1px at 1.2% 33.9%, rgb(200 230 255 / 0.35) 100%, transparent),
    radial-gradient(1px 1px at 45.9% 2.7%, rgb(255 255 255 / 0.45) 100%, transparent),
    radial-gradient(1px 1px at 63.3% 34.6%, rgb(255 255 255 / 0.45) 100%, transparent),
    radial-gradient(1px 1px at 85.4% 49.7%, rgb(200 230 255 / 0.35) 100%, transparent),
    radial-gradient(1px 1px at 4.2% 58.6%, rgb(255 255 255 / 0.45) 100%, transparent),
    radial-gradient(1px 1px at 9.2% 2.0%, rgb(255 255 255 / 0.45) 100%, transparent),
    radial-gradient(1px 1px at 74.9% 18.2%, rgb(200 230 255 / 0.35) 100%, transparent),
    radial-gradient(1px 1px at 11.7% 39.1%, rgb(200 230 255 / 0.35) 100%, transparent),
    radial-gradient(1px 1px at 29.4% 11.2%, rgb(200 230 255 / 0.35) 100%, transparent),
    radial-gradient(1px 1px at 52.7% 11.3%, rgb(200 230 255 / 0.35) 100%, transparent),
    radial-gradient(1px 1px at 64.5% 19.0%, rgb(200 230 255 / 0.35) 100%, transparent),
    radial-gradient(1px 1px at 49.7% 8.0%, rgb(200 230 255 / 0.35) 100%, transparent),
    radial-gradient(1px 1px at 38.9% 26.7%, rgb(255 255 255 / 0.45) 100%, transparent),
    radial-gradient(1px 1px at 26.3% 16.5%, rgb(255 255 255 / 0.45) 100%, transparent);
}

.stars::before {
  background-image:
    radial-gradient(1.5px 1.5px at 94.7% 58.8%, rgb(255 255 255 / 0.8) 100%, transparent),
    radial-gradient(1.5px 1.5px at 10.0% 23.0%, rgb(255 255 255 / 0.8) 100%, transparent),
    radial-gradient(1.5px 1.5px at 73.1% 41.9%, rgb(190 240 255 / 0.75) 100%, transparent),
    radial-gradient(1.5px 1.5px at 25.7% 13.9%, rgb(255 255 255 / 0.8) 100%, transparent),
    radial-gradient(1.5px 1.5px at 58.0% 10.7%, rgb(190 240 255 / 0.75) 100%, transparent),
    radial-gradient(1.5px 1.5px at 63.6% 50.0%, rgb(190 240 255 / 0.75) 100%, transparent),
    radial-gradient(1.5px 1.5px at 54.3% 28.1%, rgb(190 240 255 / 0.75) 100%, transparent),
    radial-gradient(1.5px 1.5px at 89.3% 54.1%, rgb(190 240 255 / 0.75) 100%, transparent),
    radial-gradient(1.5px 1.5px at 46.6% 20.4%, rgb(190 240 255 / 0.75) 100%, transparent),
    radial-gradient(1.5px 1.5px at 42.5% 54.9%, rgb(255 255 255 / 0.8) 100%, transparent),
    radial-gradient(1.5px 1.5px at 55.9% 15.4%, rgb(255 255 255 / 0.8) 100%, transparent),
    radial-gradient(1.5px 1.5px at 18.3% 11.6%, rgb(190 240 255 / 0.75) 100%, transparent),
    radial-gradient(1.5px 1.5px at 98.9% 42.1%, rgb(255 255 255 / 0.8) 100%, transparent),
    radial-gradient(1.5px 1.5px at 98.5% 28.2%, rgb(190 240 255 / 0.75) 100%, transparent),
    radial-gradient(1.5px 1.5px at 73.0% 56.3%, rgb(190 240 255 / 0.75) 100%, transparent),
    radial-gradient(1.5px 1.5px at 78.4% 22.6%, rgb(190 240 255 / 0.75) 100%, transparent),
    radial-gradient(1.5px 1.5px at 16.8% 47.0%, rgb(190 240 255 / 0.75) 100%, transparent),
    radial-gradient(1.5px 1.5px at 65.2% 16.2%, rgb(190 240 255 / 0.75) 100%, transparent),
    radial-gradient(1.5px 1.5px at 91.6% 31.6%, rgb(190 240 255 / 0.75) 100%, transparent),
    radial-gradient(1.5px 1.5px at 65.8% 28.7%, rgb(190 240 255 / 0.75) 100%, transparent),
    radial-gradient(1.5px 1.5px at 35.4% 45.3%, rgb(190 240 255 / 0.75) 100%, transparent),
    radial-gradient(1.5px 1.5px at 48.7% 14.5%, rgb(190 240 255 / 0.75) 100%, transparent),
    radial-gradient(1.5px 1.5px at 80.8% 51.9%, rgb(190 240 255 / 0.75) 100%, transparent),
    radial-gradient(1.5px 1.5px at 76.8% 30.3%, rgb(190 240 255 / 0.75) 100%, transparent),
    radial-gradient(1.5px 1.5px at 94.8% 44.1%, rgb(190 240 255 / 0.75) 100%, transparent),
    radial-gradient(1.5px 1.5px at 31.6% 13.7%, rgb(190 240 255 / 0.75) 100%, transparent);
}

.stars::after {
  background-image:
    radial-gradient(2px 2px at 24.3% 34.2%, #bff4ff 100%, transparent),
    radial-gradient(6px 6px at 24.3% 34.2%, rgb(191 244 255 / 0.22), transparent),
    radial-gradient(2px 2px at 90.8% 29.9%, #e6ccff 100%, transparent),
    radial-gradient(6px 6px at 90.8% 29.9%, rgb(191 244 255 / 0.22), transparent),
    radial-gradient(2px 2px at 7.4% 1.8%, #bff4ff 100%, transparent),
    radial-gradient(6px 6px at 7.4% 1.8%, rgb(191 244 255 / 0.22), transparent),
    radial-gradient(2px 2px at 26.4% 15.3%, #e6ccff 100%, transparent),
    radial-gradient(6px 6px at 26.4% 15.3%, rgb(191 244 255 / 0.22), transparent),
    radial-gradient(2px 2px at 47.1% 52.0%, #bff4ff 100%, transparent),
    radial-gradient(6px 6px at 47.1% 52.0%, rgb(191 244 255 / 0.22), transparent),
    radial-gradient(2px 2px at 39.9% 53.5%, #ffffff 100%, transparent),
    radial-gradient(6px 6px at 39.9% 53.5%, rgb(191 244 255 / 0.22), transparent),
    radial-gradient(2px 2px at 63.2% 54.0%, #e6ccff 100%, transparent),
    radial-gradient(6px 6px at 63.2% 54.0%, rgb(191 244 255 / 0.22), transparent),
    radial-gradient(2px 2px at 39.2% 1.9%, #ffffff 100%, transparent),
    radial-gradient(6px 6px at 39.2% 1.9%, rgb(191 244 255 / 0.22), transparent),
    radial-gradient(2px 2px at 16.6% 59.4%, #ffffff 100%, transparent),
    radial-gradient(6px 6px at 16.6% 59.4%, rgb(191 244 255 / 0.22), transparent),
    radial-gradient(2px 2px at 30.5% 2.9%, #bff4ff 100%, transparent),
    radial-gradient(6px 6px at 30.5% 2.9%, rgb(191 244 255 / 0.22), transparent),
    radial-gradient(2px 2px at 47.3% 44.8%, #bff4ff 100%, transparent),
    radial-gradient(6px 6px at 47.3% 44.8%, rgb(191 244 255 / 0.22), transparent),
    radial-gradient(2px 2px at 71.0% 57.2%, #bff4ff 100%, transparent),
    radial-gradient(6px 6px at 71.0% 57.2%, rgb(191 244 255 / 0.22), transparent);
}

/* Quadratischer Minecraft-Mond mit Pixel-Kratern */
.moon {
  position: absolute;
  top: 13%;
  right: 12%;
  width: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  aspect-ratio: 1;
  background:
    linear-gradient(#b9cde4 0 0) 20% 24% / 22% 22% no-repeat,
    linear-gradient(#c9dbee 0 0) 74% 16% / 14% 14% no-repeat,
    linear-gradient(#b9cde4 0 0) 64% 70% / 26% 18% no-repeat,
    linear-gradient(#c9dbee 0 0) 16% 80% / 12% 12% no-repeat,
    #eaf8ff;
  box-shadow:
    0 0 6px rgb(var(--c-questia-rgb) / 0.8),
    0 0 28px rgb(var(--c-questia-rgb) / 0.45);
}

/* Weicher Lichthof um den Mond */
.moon::after {
  content: "";
  position: absolute;
  inset: -120%;
  background: radial-gradient(circle, rgb(var(--c-questia-rgb) / 0.14), transparent 60%);
}

@media (orientation: portrait) {
  .moon {
    top: 11%;
    right: 8%;
  }
}

/* Berge: blockige Silhouette per clip-path.
   ::before = Neon-Kante, ::after = dunkler Körper (um --rim-w nach unten versetzt),
   der drop-shadow auf dem Container erzeugt den Glow entlang der Kontur. */
.mountains {
  --shape: polygon(0% 60%, 100% 60%, 100% 100%, 0% 100%); /* Rückfall: flacher Boden */
  position: absolute;
  bottom: 0;
  left: 50%;
  width: max(100%, 56rem); /* schmale Screens: Ausschnitt statt gestauchter Blöcke */
  translate: -50% 0;
  filter: drop-shadow(0 0 6px var(--glow));
}

.mountains::before,
.mountains::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: var(--shape);
}

.mountains::before {
  background: var(--rim);
}

.mountains::after {
  translate: 0 var(--rim-w);
  background: linear-gradient(var(--fill-top), var(--fill-bottom));
}

/* Fern: kleine Blöcke, dezent violett */
.mountains--far {
  --rim: rgb(167 139 250 / 0.5);
  --rim-w: 1.5px;
  --glow: rgb(139 92 246 / 0.3);
  --fill-top: #161339;
  --fill-bottom: #1d1745;
  height: 48%;
}

/* Mitte: etwas heller, blau */
.mountains--mid {
  --rim: rgb(109 139 255 / 0.7);
  --rim-w: 2px;
  --glow: rgb(80 110 255 / 0.4);
  --fill-top: #1c1f47;
  --fill-bottom: #121433;
  height: 36%;
}

/* Nah: am dunkelsten, Questia-Cyan, mit Fichten */
.mountains--near {
  --rim: var(--c-questia);
  --rim-w: 2px;
  --glow: rgb(var(--c-questia-rgb) / 0.55);
  --fill-top: #0b0b16;
  --fill-bottom: var(--c-bg);
  height: 24%;
}

@media (orientation: portrait) {
  .mountains--far  { height: 34%; }
  .mountains--mid  { height: 26%; }
  .mountains--near { height: 17%; }
}

/* --------------------------------------------------------------------------
   2. Bergformen: je Ebene 4 Varianten (blockige Silhouetten per clip-path)
   -------------------------------------------------------------------------- */
/* Fern */
.mountains--far-1 {
  --shape: polygon(
    0% 100%, 0% 56.25%, 7.81% 56.25%, 7.81% 18.75%, 10.94% 18.75%, 10.94% 31.25%, 12.5% 31.25%,
    12.5% 37.5%, 15.62% 37.5%, 15.62% 56.25%, 18.75% 56.25%, 18.75% 50%, 21.88% 50%,
    21.88% 31.25%, 25% 31.25%, 25% 12.5%, 26.56% 12.5%, 26.56% 6.25%, 29.69% 6.25%, 29.69% 0%,
    31.25% 0%, 31.25% 6.25%, 34.38% 6.25%, 34.38% 18.75%, 35.94% 18.75%, 35.94% 37.5%,
    37.5% 37.5%, 37.5% 50%, 40.62% 50%, 40.62% 68.75%, 43.75% 68.75%, 43.75% 62.5%,
    45.31% 62.5%, 45.31% 50%, 46.88% 50%, 46.88% 43.75%, 48.44% 43.75%, 48.44% 37.5%,
    53.12% 37.5%, 53.12% 56.25%, 56.25% 56.25%, 56.25% 62.5%, 60.94% 62.5%, 60.94% 56.25%,
    64.06% 56.25%, 64.06% 50%, 65.62% 50%, 65.62% 37.5%, 70.31% 37.5%, 70.31% 12.5%,
    71.88% 12.5%, 71.88% 0%, 76.56% 0%, 76.56% 12.5%, 78.12% 12.5%, 78.12% 31.25%,
    82.81% 31.25%, 82.81% 43.75%, 85.94% 43.75%, 85.94% 56.25%, 90.62% 56.25%, 90.62% 43.75%,
    93.75% 43.75%, 93.75% 37.5%, 95.31% 37.5%, 95.31% 31.25%, 96.88% 31.25%, 96.88% 25%,
    98.44% 25%, 98.44% 31.25%, 100% 31.25%, 100% 100%
  );
}

.mountains--far-2 {
  --shape: polygon(
    0% 100%, 0% 68.75%, 4.69% 68.75%, 4.69% 56.25%, 6.25% 56.25%, 6.25% 50%, 7.81% 50%,
    7.81% 43.75%, 14.06% 43.75%, 14.06% 25%, 15.62% 25%, 15.62% 31.25%, 17.19% 31.25%,
    17.19% 25%, 18.75% 25%, 18.75% 43.75%, 20.31% 43.75%, 20.31% 50%, 25% 50%, 25% 62.5%,
    26.56% 62.5%, 26.56% 56.25%, 29.69% 56.25%, 29.69% 43.75%, 32.81% 43.75%, 32.81% 37.5%,
    35.94% 37.5%, 35.94% 25%, 40.62% 25%, 40.62% 12.5%, 46.88% 12.5%, 46.88% 43.75%,
    48.44% 43.75%, 48.44% 50%, 50% 50%, 50% 56.25%, 53.12% 56.25%, 53.12% 68.75%,
    59.38% 68.75%, 59.38% 75%, 60.94% 75%, 60.94% 62.5%, 64.06% 62.5%, 64.06% 50%, 67.19% 50%,
    67.19% 37.5%, 68.75% 37.5%, 68.75% 31.25%, 71.88% 31.25%, 71.88% 37.5%, 75% 37.5%,
    75% 43.75%, 76.56% 43.75%, 76.56% 56.25%, 79.69% 56.25%, 79.69% 50%, 90.62% 50%,
    90.62% 31.25%, 92.19% 31.25%, 92.19% 37.5%, 93.75% 37.5%, 93.75% 50%, 95.31% 50%,
    95.31% 56.25%, 98.44% 56.25%, 98.44% 62.5%, 100% 62.5%, 100% 100%
  );
}

.mountains--far-3 {
  --shape: polygon(
    0% 100%, 0% 62.5%, 1.56% 62.5%, 1.56% 68.75%, 6.25% 68.75%, 6.25% 56.25%, 10.94% 56.25%,
    10.94% 43.75%, 12.5% 43.75%, 12.5% 50%, 14.06% 50%, 14.06% 37.5%, 15.62% 37.5%,
    15.62% 43.75%, 17.19% 43.75%, 17.19% 37.5%, 21.88% 37.5%, 21.88% 50%, 28.12% 50%,
    28.12% 62.5%, 29.69% 62.5%, 29.69% 56.25%, 37.5% 56.25%, 37.5% 37.5%, 43.75% 37.5%,
    43.75% 12.5%, 45.31% 12.5%, 45.31% 18.75%, 46.88% 18.75%, 46.88% 25%, 51.56% 25%,
    51.56% 43.75%, 59.38% 43.75%, 59.38% 37.5%, 60.94% 37.5%, 60.94% 43.75%, 64.06% 43.75%,
    64.06% 62.5%, 67.19% 62.5%, 67.19% 68.75%, 70.31% 68.75%, 70.31% 62.5%, 73.44% 62.5%,
    73.44% 56.25%, 75% 56.25%, 75% 50%, 78.12% 50%, 78.12% 31.25%, 81.25% 31.25%, 81.25% 12.5%,
    82.81% 12.5%, 82.81% 25%, 84.38% 25%, 84.38% 43.75%, 85.94% 43.75%, 85.94% 62.5%,
    87.5% 62.5%, 87.5% 68.75%, 92.19% 68.75%, 92.19% 62.5%, 93.75% 62.5%, 93.75% 68.75%,
    95.31% 68.75%, 95.31% 75%, 96.88% 75%, 96.88% 62.5%, 100% 62.5%, 100% 100%
  );
}

.mountains--far-4 {
  --shape: polygon(
    0% 100%, 0% 37.5%, 3.12% 37.5%, 3.12% 31.25%, 9.38% 31.25%, 9.38% 37.5%, 12.5% 37.5%,
    12.5% 43.75%, 15.62% 43.75%, 15.62% 50%, 17.19% 50%, 17.19% 62.5%, 23.44% 62.5%,
    23.44% 68.75%, 28.12% 68.75%, 28.12% 62.5%, 32.81% 62.5%, 32.81% 50%, 35.94% 50%,
    35.94% 37.5%, 39.06% 37.5%, 39.06% 18.75%, 40.62% 18.75%, 40.62% 6.25%, 42.19% 6.25%,
    42.19% 0%, 46.88% 0%, 46.88% 12.5%, 48.44% 12.5%, 48.44% 25%, 50% 25%, 50% 37.5%,
    51.56% 37.5%, 51.56% 43.75%, 53.12% 43.75%, 53.12% 50%, 56.25% 50%, 56.25% 37.5%,
    64.06% 37.5%, 64.06% 43.75%, 65.62% 43.75%, 65.62% 62.5%, 67.19% 62.5%, 67.19% 56.25%,
    71.88% 56.25%, 71.88% 37.5%, 75% 37.5%, 75% 31.25%, 76.56% 31.25%, 76.56% 18.75%,
    78.12% 18.75%, 78.12% 12.5%, 79.69% 12.5%, 79.69% 6.25%, 81.25% 6.25%, 81.25% 0%,
    84.38% 0%, 84.38% 6.25%, 85.94% 6.25%, 85.94% 18.75%, 89.06% 18.75%, 89.06% 25%,
    90.62% 25%, 90.62% 43.75%, 93.75% 43.75%, 93.75% 50%, 95.31% 50%, 95.31% 62.5%,
    96.88% 62.5%, 96.88% 68.75%, 98.44% 68.75%, 98.44% 62.5%, 100% 62.5%, 100% 100%
  );
}

/* Mitte */
.mountains--mid-1 {
  --shape: polygon(
    0% 100%, 0% 63.64%, 6.25% 63.64%, 6.25% 72.73%, 8.33% 72.73%, 8.33% 54.55%, 10.42% 54.55%,
    10.42% 45.45%, 12.5% 45.45%, 12.5% 27.27%, 18.75% 27.27%, 18.75% 36.36%, 20.83% 36.36%,
    20.83% 45.45%, 27.08% 45.45%, 27.08% 72.73%, 29.17% 72.73%, 29.17% 54.55%, 33.33% 54.55%,
    33.33% 45.45%, 37.5% 45.45%, 37.5% 36.36%, 41.67% 36.36%, 41.67% 54.55%, 45.83% 54.55%,
    45.83% 72.73%, 50% 72.73%, 50% 63.64%, 52.08% 63.64%, 52.08% 72.73%, 54.17% 72.73%,
    54.17% 63.64%, 56.25% 63.64%, 56.25% 45.45%, 58.33% 45.45%, 58.33% 18.18%, 60.42% 18.18%,
    60.42% 9.09%, 62.5% 9.09%, 62.5% 18.18%, 64.58% 18.18%, 64.58% 36.36%, 66.67% 36.36%,
    66.67% 45.45%, 72.92% 45.45%, 72.92% 63.64%, 77.08% 63.64%, 77.08% 54.55%, 79.17% 54.55%,
    79.17% 45.45%, 85.42% 45.45%, 85.42% 36.36%, 89.58% 36.36%, 89.58% 54.55%, 91.67% 54.55%,
    91.67% 63.64%, 93.75% 63.64%, 93.75% 72.73%, 97.92% 72.73%, 97.92% 63.64%, 100% 63.64%,
    100% 100%
  );
}

.mountains--mid-2 {
  --shape: polygon(
    0% 100%, 0% 63.64%, 8.33% 63.64%, 8.33% 54.55%, 10.42% 54.55%, 10.42% 45.45%, 12.5% 45.45%,
    12.5% 36.36%, 25% 36.36%, 25% 63.64%, 29.17% 63.64%, 29.17% 72.73%, 33.33% 72.73%,
    33.33% 63.64%, 35.42% 63.64%, 35.42% 72.73%, 37.5% 72.73%, 37.5% 63.64%, 39.58% 63.64%,
    39.58% 72.73%, 43.75% 72.73%, 43.75% 63.64%, 45.83% 63.64%, 45.83% 54.55%, 50% 54.55%,
    50% 36.36%, 52.08% 36.36%, 52.08% 45.45%, 58.33% 45.45%, 58.33% 54.55%, 60.42% 54.55%,
    60.42% 63.64%, 68.75% 63.64%, 68.75% 81.82%, 72.92% 81.82%, 72.92% 72.73%, 75% 72.73%,
    75% 63.64%, 77.08% 63.64%, 77.08% 54.55%, 79.17% 54.55%, 79.17% 45.45%, 81.25% 45.45%,
    81.25% 36.36%, 87.5% 36.36%, 87.5% 18.18%, 91.67% 18.18%, 91.67% 36.36%, 95.83% 36.36%,
    95.83% 54.55%, 100% 54.55%, 100% 100%
  );
}

.mountains--mid-3 {
  --shape: polygon(
    0% 100%, 0% 72.73%, 2.08% 72.73%, 2.08% 63.64%, 4.17% 63.64%, 4.17% 72.73%, 6.25% 72.73%,
    6.25% 81.82%, 8.33% 81.82%, 8.33% 72.73%, 16.67% 72.73%, 16.67% 36.36%, 18.75% 36.36%,
    18.75% 45.45%, 20.83% 45.45%, 20.83% 54.55%, 25% 54.55%, 25% 72.73%, 29.17% 72.73%,
    29.17% 81.82%, 31.25% 81.82%, 31.25% 72.73%, 33.33% 72.73%, 33.33% 81.82%, 35.42% 81.82%,
    35.42% 72.73%, 37.5% 72.73%, 37.5% 81.82%, 39.58% 81.82%, 39.58% 72.73%, 45.83% 72.73%,
    45.83% 54.55%, 47.92% 54.55%, 47.92% 36.36%, 50% 36.36%, 50% 18.18%, 54.17% 18.18%,
    54.17% 9.09%, 58.33% 9.09%, 58.33% 27.27%, 60.42% 27.27%, 60.42% 36.36%, 64.58% 36.36%,
    64.58% 54.55%, 68.75% 54.55%, 68.75% 45.45%, 72.92% 45.45%, 72.92% 36.36%, 85.42% 36.36%,
    85.42% 54.55%, 89.58% 54.55%, 89.58% 72.73%, 93.75% 72.73%, 93.75% 63.64%, 95.83% 63.64%,
    95.83% 72.73%, 100% 72.73%, 100% 100%
  );
}

.mountains--mid-4 {
  --shape: polygon(
    0% 100%, 0% 72.73%, 6.25% 72.73%, 6.25% 63.64%, 8.33% 63.64%, 8.33% 72.73%, 16.67% 72.73%,
    16.67% 36.36%, 22.92% 36.36%, 22.92% 45.45%, 25% 45.45%, 25% 63.64%, 35.42% 63.64%,
    35.42% 54.55%, 37.5% 54.55%, 37.5% 45.45%, 39.58% 45.45%, 39.58% 36.36%, 41.67% 36.36%,
    41.67% 27.27%, 47.92% 27.27%, 47.92% 36.36%, 50% 36.36%, 50% 54.55%, 54.17% 54.55%,
    54.17% 81.82%, 58.33% 81.82%, 58.33% 72.73%, 66.67% 72.73%, 66.67% 63.64%, 72.92% 63.64%,
    72.92% 72.73%, 75% 72.73%, 75% 63.64%, 77.08% 63.64%, 77.08% 72.73%, 81.25% 72.73%,
    81.25% 63.64%, 85.42% 63.64%, 85.42% 45.45%, 87.5% 45.45%, 87.5% 36.36%, 89.58% 36.36%,
    89.58% 27.27%, 91.67% 27.27%, 91.67% 45.45%, 97.92% 45.45%, 97.92% 63.64%, 100% 63.64%,
    100% 100%
  );
}

/* Nah */
.mountains--near-1 {
  --shape: polygon(
    0% 100%, 0% 66.67%, 2.5% 66.67%, 2.5% 44.44%, 3.75% 44.44%, 3.75% 27.78%, 5% 27.78%,
    5% 16.67%, 7.5% 16.67%, 7.5% 27.78%, 8.75% 27.78%, 8.75% 44.44%, 10% 44.44%, 10% 55.56%,
    13.75% 55.56%, 13.75% 38.89%, 15% 38.89%, 15% 27.78%, 17.5% 27.78%, 17.5% 38.89%,
    18.75% 38.89%, 18.75% 55.56%, 20% 55.56%, 20% 77.78%, 25% 77.78%, 25% 44.44%,
    26.25% 44.44%, 26.25% 27.78%, 27.5% 27.78%, 27.5% 16.67%, 30% 16.67%, 30% 27.78%,
    31.25% 27.78%, 31.25% 44.44%, 32.5% 44.44%, 32.5% 66.67%, 47.5% 66.67%, 47.5% 77.78%,
    65% 77.78%, 65% 55.56%, 66.25% 55.56%, 66.25% 38.89%, 67.5% 38.89%, 67.5% 27.78%,
    70% 27.78%, 70% 38.89%, 71.25% 38.89%, 71.25% 55.56%, 72.5% 55.56%, 72.5% 33.33%,
    73.75% 33.33%, 73.75% 16.67%, 75% 16.67%, 75% 5.56%, 77.5% 5.56%, 77.5% 16.67%,
    78.75% 16.67%, 78.75% 33.33%, 80% 33.33%, 80% 77.78%, 87.5% 77.78%, 87.5% 55.56%,
    88.75% 55.56%, 88.75% 38.89%, 90% 38.89%, 90% 27.78%, 92.5% 27.78%, 92.5% 38.89%,
    93.75% 38.89%, 93.75% 55.56%, 95% 55.56%, 95% 66.67%, 100% 66.67%, 100% 100%
  );
}

.mountains--near-2 {
  --shape: polygon(
    0% 100%, 0% 77.78%, 2.5% 77.78%, 2.5% 55.56%, 3.75% 55.56%, 3.75% 38.89%, 5% 38.89%,
    5% 27.78%, 7.5% 27.78%, 7.5% 38.89%, 8.75% 38.89%, 8.75% 55.56%, 10% 55.56%, 10% 77.78%,
    15% 77.78%, 15% 55.56%, 16.25% 55.56%, 16.25% 38.89%, 17.5% 38.89%, 17.5% 27.78%,
    20% 27.78%, 20% 38.89%, 21.25% 38.89%, 21.25% 55.56%, 22.5% 55.56%, 22.5% 33.33%,
    23.75% 33.33%, 23.75% 16.67%, 25% 16.67%, 25% 5.56%, 27.5% 5.56%, 27.5% 16.67%,
    28.75% 16.67%, 28.75% 33.33%, 30% 33.33%, 30% 66.67%, 35% 66.67%, 35% 44.44%,
    36.25% 44.44%, 36.25% 27.78%, 37.5% 27.78%, 37.5% 16.67%, 40% 16.67%, 40% 27.78%,
    41.25% 27.78%, 41.25% 44.44%, 42.5% 44.44%, 42.5% 55.56%, 45% 55.56%, 45% 66.67%,
    55% 66.67%, 55% 55.56%, 57.5% 55.56%, 57.5% 33.33%, 58.75% 33.33%, 58.75% 16.67%,
    60% 16.67%, 60% 5.56%, 62.5% 5.56%, 62.5% 16.67%, 63.75% 16.67%, 63.75% 33.33%, 65% 33.33%,
    65% 77.78%, 82.5% 77.78%, 82.5% 66.67%, 85% 66.67%, 85% 55.56%, 87.5% 55.56%, 87.5% 66.67%,
    95% 66.67%, 95% 77.78%, 100% 77.78%, 100% 100%
  );
}

.mountains--near-3 {
  --shape: polygon(
    0% 100%, 0% 77.78%, 7.5% 77.78%, 7.5% 88.89%, 15% 88.89%, 15% 77.78%, 22.5% 77.78%,
    22.5% 44.44%, 23.75% 44.44%, 23.75% 27.78%, 25% 27.78%, 25% 16.67%, 27.5% 16.67%,
    27.5% 27.78%, 28.75% 27.78%, 28.75% 44.44%, 30% 44.44%, 30% 77.78%, 40% 77.78%, 40% 66.67%,
    50% 66.67%, 50% 77.78%, 57.5% 77.78%, 57.5% 66.67%, 67.5% 66.67%, 67.5% 77.78%, 70% 77.78%,
    70% 55.56%, 71.25% 55.56%, 71.25% 38.89%, 72.5% 38.89%, 72.5% 27.78%, 75% 27.78%,
    75% 38.89%, 76.25% 38.89%, 76.25% 55.56%, 77.5% 55.56%, 77.5% 77.78%, 82.5% 77.78%,
    82.5% 66.67%, 85% 66.67%, 85% 44.44%, 86.25% 44.44%, 86.25% 27.78%, 87.5% 27.78%,
    87.5% 16.67%, 90% 16.67%, 90% 27.78%, 91.25% 27.78%, 91.25% 44.44%, 92.5% 44.44%,
    92.5% 66.67%, 97.5% 66.67%, 97.5% 77.78%, 100% 77.78%, 100% 100%
  );
}

.mountains--near-4 {
  --shape: polygon(
    0% 100%, 0% 77.78%, 12.5% 77.78%, 12.5% 66.67%, 20% 66.67%, 20% 77.78%, 27.5% 77.78%,
    27.5% 55.56%, 28.75% 55.56%, 28.75% 38.89%, 30% 38.89%, 30% 27.78%, 32.5% 27.78%,
    32.5% 38.89%, 33.75% 38.89%, 33.75% 55.56%, 35% 55.56%, 35% 77.78%, 60% 77.78%, 60% 44.44%,
    61.25% 44.44%, 61.25% 27.78%, 62.5% 27.78%, 62.5% 16.67%, 65% 16.67%, 65% 27.78%,
    66.25% 27.78%, 66.25% 44.44%, 68.75% 44.44%, 68.75% 27.78%, 70% 27.78%, 70% 16.67%,
    72.5% 16.67%, 72.5% 27.78%, 73.75% 27.78%, 73.75% 44.44%, 76.25% 44.44%, 76.25% 27.78%,
    77.5% 27.78%, 77.5% 16.67%, 80% 16.67%, 80% 27.78%, 81.25% 27.78%, 81.25% 44.44%,
    82.5% 44.44%, 82.5% 77.78%, 87.5% 77.78%, 87.5% 44.44%, 88.75% 44.44%, 88.75% 27.78%,
    90% 27.78%, 90% 16.67%, 92.5% 16.67%, 92.5% 27.78%, 93.75% 27.78%, 93.75% 44.44%,
    95% 44.44%, 95% 66.67%, 100% 66.67%, 100% 100%
  );
}

/* --------------------------------------------------------------------------
   3. Animationen
   -------------------------------------------------------------------------- */

/* Sterne funkeln */
@keyframes twinkle {
  0%,
  100% { opacity: 1; }
  50%  { opacity: 0.35; }
}

/* Lichthof des Mondes pulsiert */
@keyframes glow-breathe {
  0%,
  100% {
    opacity: 0.8;
    scale: 0.95;
  }
  50% {
    opacity: 1;
    scale: 1.05;
  }
}

/* Scroll: Ebenen bewegen sich unterschiedlich schnell (Tiefenwirkung) */
@keyframes parallax {
  to {
    transform: translateY(var(--parallax));
  }
}

@media (prefers-reduced-motion: no-preference) {
  .stars::before {
    animation: twinkle 5s ease-in-out infinite;
  }

  .stars::after {
    animation: twinkle 3.5s ease-in-out -1.2s infinite;
  }

  .moon::after {
    animation: glow-breathe 8s ease-in-out infinite;
  }

  /* Parallaxe: je weiter hinten, desto langsamer */
  @supports (animation-timeline: scroll()) {
    .stars,
    .moon,
    .mountains {
      animation: parallax linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100svh;
    }

    .stars           { --parallax: 32svh; }
    .moon            { --parallax: 36svh; }
    .mountains--far  { --parallax: 22svh; }
    .mountains--mid  { --parallax: 12svh; }
    .mountains--near { --parallax: 4svh; }
  }
}