/* ===== Grundlayout ===== */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0b1030;
  transition: background 2.5s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;          /* kein Doppeltipp-Zoom auf Tablets */
  -webkit-tap-highlight-color: transparent;
}
body.tag { background: #8fd3ff; }

#welt { display: block; width: 100vw; height: 100vh; }

@keyframes puls { 50% { transform: scale(1.08); } }

/* ===== Startbildschirm ===== */
#start {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: #0b1030;
}
#start.weg { display: none; }
#startKnopf {
  width: 40vmin; height: 40vmin; border-radius: 50%; border: none;
  background: #fff4c2; color: #0b1030; font-size: 18vmin; cursor: pointer;
  box-shadow: 0 0 60px #fff4c2;
  animation: puls 1.6s ease-in-out infinite;
}

/* ===== Weiter-Pfeil ===== */
#weiter {
  position: fixed; right: 4vmin; bottom: 4vmin;
  width: 20vmin; height: 20vmin; border-radius: 50%; border: none;
  background: #ffd23f; color: #5a3d00; font-size: 12vmin; cursor: pointer;
  box-shadow: 0 0 30px rgba(255, 210, 63, .8);
  animation: puls 1.2s ease-in-out infinite;
  transition: opacity .5s;
}
#weiter.versteckt { opacity: 0; pointer-events: none; }

/* ===== Zurück zum Menü ===== */
#home {
  position: fixed; left: 3vmin; top: 3vmin; z-index: 20;
  width: 12vmin; height: 12vmin; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .25);
  font-size: 7vmin; text-decoration: none;
}

/* ===== Himmel ===== */
#himmelNachtHell, #himmelTag { opacity: 0; transition: opacity 2.5s; }
.mondAn #himmelNachtHell { opacity: 1; }
.tag #himmelTag { opacity: 1; }

#sterne, #mond { transition: opacity 2.5s; }
.tag #sterne, .tag #mond { opacity: 0; pointer-events: none; }

.stern { fill: #fff; animation: funkeln 3s ease-in-out infinite; }
@keyframes funkeln { 50% { opacity: .2; } }

/* ===== Mond ===== */
#mondGlow { opacity: 0; transition: opacity 1s; }
.mondAn #mondGlow { opacity: 1; }
#mondKoerper { fill: #7d8296; transition: fill 1s; }
.mondAn #mondKoerper { fill: #fff4c2; }
.krater { fill: #000; opacity: .12; }
#mondKlick { cursor: pointer; }

/* ===== Sonne ===== */
#sonne { transform: translateY(800px); transition: transform 2.5s ease-in-out; }
.tag #sonne { transform: translateY(0); }
#strahlen {
  transform-box: view-box; transform-origin: 1250px 190px;
  animation: drehen 30s linear infinite;
}
@keyframes drehen { to { transform: rotate(360deg); } }

/* ===== Landschaft ===== */
#boden { fill: #14261c; transition: fill 2.5s; }
.tag #boden { fill: #6cc24a; }
.stamm { fill: #2e2017; transition: fill 2.5s; }
.tag .stamm { fill: #7a5230; }
.krone { fill: #10301c; transition: fill 2.5s; }
.tag .krone { fill: #3f9b3f; }

/* ===== Eule ===== */
#eule { cursor: pointer; transform-box: view-box; transform-origin: 600px 580px; }
.fluegel { fill: #6e4529; transform-box: view-box; }
#fluegelL { transform-origin: 510px 400px; }
#fluegelR { transform-origin: 690px 400px; }
#kopf { transform-box: view-box; transform-origin: 600px 440px; }

.lid { transform-box: fill-box; transform-origin: 50% 0%; transition: transform .4s; }
.wach .lid { transform: scaleY(0); }

#eule.ruft #kopf { animation: nicken .35s ease-in-out 2 alternate; }
#eule.ruft #fluegelL { animation: flatternL .2s ease-in-out 6 alternate; }
#eule.ruft #fluegelR { animation: flatternR .2s ease-in-out 6 alternate; }
@keyframes nicken { to { transform: translateY(-10px) rotate(-3deg); } }
@keyframes flatternL { to { transform: rotate(15deg); } }
@keyframes flatternR { to { transform: rotate(-15deg); } }

#eule.wackelt { animation: wackeln .15s ease-in-out 4 alternate; }
@keyframes wackeln {
  from { transform: rotate(-3deg); }
  to   { transform: rotate(3deg); }
}

/* Zzz, solange die Eule schläft */
#zzz { opacity: 0; transition: opacity .6s; pointer-events: none; }
#welt:not(.wach) #zzz { opacity: 1; }
#zzz text {
  fill: #fff; font-family: sans-serif; font-weight: bold;
  animation: schweben 2.4s ease-in-out infinite;
}
#zzz text:nth-child(2) { animation-delay: .4s; }
#zzz text:nth-child(3) { animation-delay: .8s; }
.tag #zzz text { fill: #2a3a6a; }
@keyframes schweben { 50% { transform: translateY(-15px); opacity: .5; } }

/* Schallwellen beim Ruf */
.welle {
  fill: none; stroke: #fff; stroke-width: 5; pointer-events: none;
  transform-box: fill-box; transform-origin: center;
  animation: welle 1.6s ease-out forwards;
}
@keyframes welle {
  from { transform: scale(1); opacity: .9; }
  to   { transform: scale(6); opacity: 0; }
}

/* ===== Uhr ===== */
#uhr {
  opacity: 0; pointer-events: none; transition: opacity 1.5s;
  transform-box: view-box; transform-origin: 1150px 520px;
}
.tag #uhr { opacity: 1; pointer-events: auto; }
#uhrKlick { cursor: pointer; }
.glocke { fill: #e0b030; }
.uhrpunkt { fill: #4a90d9; }
#uhr.klingelt { animation: klingeln .08s linear 14 alternate; }
@keyframes klingeln {
  from { transform: rotate(-4deg); }
  to   { transform: rotate(4deg); }
}

/* ===== Wolken (Level 2) ===== */
#dunkel { opacity: 0; pointer-events: none; transition: opacity .8s; }
#wolken { opacity: 0; pointer-events: none; transition: opacity 1s; }
.wolkenLevel #wolken { opacity: 1; pointer-events: auto; }
.wolke {
  fill: #aab2c5; cursor: pointer;
  transform-box: fill-box; transform-origin: center;
  transition: transform 1.3s ease-in, opacity 1.3s ease-in;
}
.wolke.weg { transform: translate(1000px, -150px) scale(.5); opacity: 0; pointer-events: none; }