/* Dansk Cottage · Wetter- und Jahreszeiten-Szene (ENTWURF 2026-10-18) – eigene Ebene im Startbereich (main.hero) */

/* Ebene hinter Logo und Text; unten weich in den Seitenhintergrund auslaufend */
main.hero { isolation: isolate; }
.wx-szene {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, #cbdbea 0%, #e6edf1 45%, var(--cream, #fbf9f4) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}
.wx-sonne {
  position: absolute; top: 7%; right: 10%; width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle, #fff3c4 0%, #ffe9a8 60%, rgba(255,233,168,0) 75%);
}
.wx-wolken {
  position: absolute; inset: 0 0 40% 0; opacity: .8;
  background-image:
    radial-gradient(ellipse 90px 26px at 12% 18%, rgba(255,255,255,.9), transparent 70%),
    radial-gradient(ellipse 120px 32px at 68% 10%, rgba(255,255,255,.85), transparent 70%),
    radial-gradient(ellipse 70px 20px at 42% 30%, rgba(255,255,255,.8), transparent 70%),
    radial-gradient(ellipse 110px 28px at 88% 34%, rgba(255,255,255,.75), transparent 70%);
  background-size: 100vw 100%; background-repeat: repeat-x;
}
@media (max-width: 700px) { .wx-sonne { width: 60px; height: 60px; right: 6%; } }

/* Übergang, damit der Himmel nach dem Laden weich in die Wetterfarbe wechselt */
.wx-szene.wx { transition: background 1.6s ease; }
.wx-szene .wx-sonne, .wx-szene .wx-wolken { transition: opacity 1.6s ease, filter 1.6s ease, background 1.6s ease; }

/* ---------- Wolken ziehen langsam (Tempo kommt aus der Windstärke) */
.wx-szene .wx-wolken { animation: wx-wolken var(--wx-wolken-dauer, 220s) linear infinite; }
@keyframes wx-wolken { from { background-position: 0 0; } to { background-position: 100vw 0; } }

/* ---------- Wetterzustände (Tag) */
.wx-szene.wx-klar     { background: linear-gradient(180deg, #b6d5ef 0%, #e4eef5 45%, var(--cream, #fbf9f4) 100%); }
.wx-szene.wx-klar .wx-wolken { opacity: .35; }
.wx-szene.wx-wolkig   { background: linear-gradient(180deg, #cbdbea 0%, #f5f3ea 72%); }
.wx-szene.wx-bedeckt  { background: linear-gradient(180deg, #c9cfd8 0%, #efeee9 72%); }
.wx-szene.wx-bedeckt .wx-sonne { opacity: .25; filter: blur(6px); }
.wx-szene.wx-bedeckt .wx-wolken, .wx-szene.wx-regen .wx-wolken, .wx-szene.wx-gewitter .wx-wolken { opacity: 1; filter: saturate(.6) brightness(.95); }
.wx-szene.wx-nebel    { background: linear-gradient(180deg, #d8dcdf 0%, #f1f0ec 72%); }
.wx-szene.wx-nebel .wx-sonne { opacity: .3; filter: blur(10px); }
.wx-szene.wx-regen    { background: linear-gradient(180deg, #aeb8c6 0%, #e9eae8 75%); }
.wx-szene.wx-regen .wx-sonne, .wx-szene.wx-gewitter .wx-sonne, .wx-szene.wx-schnee .wx-sonne { opacity: 0; }
.wx-szene.wx-gewitter { background: linear-gradient(180deg, #8d97a8 0%, #e2e3e2 75%); }
.wx-szene.wx-schnee   { background: linear-gradient(180deg, #d4dbe3 0%, #f4f4f2 72%); }

/* ---------- Dämmerung: warmes Licht am Horizont */
.wx-szene.tz-daemmerung { background: linear-gradient(180deg, #9fb4d6 0%, #f3c9a5 55%, #f7ecdc 80%); }
.wx-szene.tz-daemmerung .wx-sonne { background: radial-gradient(circle, #ffd9a0 0%, #ffbf7a 60%, rgba(255,191,122,0) 75%); top: 18%; }
.wx-szene.tz-daemmerung.wx-bedeckt, .wx-szene.tz-daemmerung.wx-regen, .wx-szene.tz-daemmerung.wx-nebel
                   { background: linear-gradient(180deg, #9aa3b4 0%, #dcc4b4 60%, #eee7de 85%); }

/* ---------- Nacht: dunkler Himmel, Mond statt Sonne – unten bleibt es hell, damit Texte lesbar bleiben */
.wx-szene.tz-nacht { background: linear-gradient(180deg, #24335f 0%, #5a6b9e 9%, #b9c2da 20%, #dfe2ea 42%, var(--cream, #fbf9f4) 70%); }
/* nachts: Logo bekommt einen weichen hellen Schein, damit es auf dem dunkleren Himmel lesbar bleibt */
.wx-szene.tz-nacht ~ .scene .logo-hero { filter: drop-shadow(0 0 14px rgba(255,255,255,.9)) drop-shadow(0 0 28px rgba(255,255,255,.6)); }
.wx-szene.tz-nacht .wx-sonne {
  width: 58px; height: 58px; top: 9%;
  background: radial-gradient(circle at 38% 40%, #fffdf2 0%, #f1ecd8 55%, rgba(241,236,216,0) 72%);
  box-shadow: 0 0 36px 6px rgba(255,250,225,.25);
}
.wx-szene.tz-nacht .wx-wolken { opacity: .35; filter: brightness(.75); }
.wx-szene.tz-nacht.wx-bedeckt, .wx-szene.tz-nacht.wx-regen, .wx-szene.tz-nacht.wx-nebel, .wx-szene.tz-nacht.wx-gewitter
              { background: linear-gradient(180deg, #303a58 0%, #646d8a 12%, #b2b6c4 26%, #e2e3e7 42%, var(--cream, #fbf9f4) 70%); }
.wx-szene.tz-nacht.wx-bedeckt .wx-sonne, .wx-szene.tz-nacht.wx-regen .wx-sonne, .wx-szene.tz-nacht.wx-nebel .wx-sonne { opacity: .15; }

/* ---------- Sterne (nur nachts und bei klarem/leicht bewölktem Himmel) */
.wx-sterne {
  position: absolute; inset: 0 0 78% 0; opacity: 0; pointer-events: none;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 27% 8%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 41% 22%, #fff, transparent), radial-gradient(1px 1px at 55% 12%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 68% 26%, #fff, transparent), radial-gradient(1px 1px at 79% 6%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 88% 20%, #fff, transparent), radial-gradient(1px 1px at 6% 32%, #fff, transparent),
    radial-gradient(1px 1px at 34% 34%, #fff, transparent), radial-gradient(1.2px 1.2px at 62% 38%, #fff, transparent),
    radial-gradient(1px 1px at 95% 34%, #fff, transparent), radial-gradient(1px 1px at 47% 4%, #fff, transparent);
}
.wx-szene.tz-nacht.wx-klar .wx-sterne, .wx-szene.tz-nacht.wx-wolkig .wx-sterne { opacity: .9; animation: wx-funkeln 5s ease-in-out infinite alternate; }
.wx-szene.tz-daemmerung.wx-klar .wx-sterne { opacity: .35; }
@keyframes wx-funkeln { from { opacity: .55; } to { opacity: .95; } }

/* ---------- Nebel: zwei weiche Schleier, die langsam treiben */
.wx-nebel {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 18% at 30% 55%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(ellipse 55% 16% at 75% 40%, rgba(255,255,255,.45), transparent 70%);
  animation: wx-nebel 40s ease-in-out infinite alternate;
}
@keyframes wx-nebel { from { transform: translateX(-4%); } to { transform: translateX(4%); } }

/* ---------- Gewitter: kurzes Aufhellen */
.wx-szene.wx-blitz::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.55); pointer-events: none; }

/* ---------- Partikel-Ebene (Regen, Schnee, Laub, Blüten, Funken) */
.wx-partikel { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; transition: opacity .2s linear; }

/* ---------- Sankt Hans: warmer Schein am unteren Rand */
.wx-szene.saison-sanktHans::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 35%; pointer-events: none;
  background: radial-gradient(ellipse 40% 60% at 50% 100%, rgba(255,150,60,.28), transparent 70%);
  animation: wx-feuer 2.4s ease-in-out infinite alternate;
}
@keyframes wx-feuer { from { opacity: .7; } to { opacity: 1; } }

/* ---------- Rücksicht: ohne Bewegung, nur Farben */
@media (prefers-reduced-motion: reduce) {
  .wx-szene .wx-wolken, .wx-sterne, .wx-nebel, .wx-szene.saison-sanktHans::before { animation: none !important; }
  .wx-szene.wx-blitz::after { display: none; }
}