/* Anmeldeseite: Bühne mit Himmel, Bergen und der schwebenden Insel (anmelden.js), darüber die Karte aus Glas.
   Die Farben des Himmels setzt anmelden.js nach dem Sonnenstand als --b-…; die Karte nutzt konto.css. */
body.anmelden { padding: 0; display: block; min-height: 100vh; overflow-x: hidden; background: #16213f; }

/* ---------- Bühne ---------- */
.buehne {
  position: fixed; inset: 0; overflow: hidden; z-index: 0; user-select: none; -webkit-user-select: none;
  --b-oben: #3f8fdc; --b-unten: #bfe2f5; --b-fern: #a9bccd; --b-mitte: #8a9db1; --b-nah: #4f6e5c; --b-wald: #3a5e47;
  --b-dunst: #d9edf8; --b-wolke: #fff; --b-schneefarbe: #fff; --b-sterne: 0; --b-hell: 1; --b-satt: 1; --b-warm: 0; --b-gluehen: 0;
  --b-zx: 0; --b-zy: 0; --b-gx: 70%; --b-gy: 20%;
  background: var(--b-unten);
}
.b-wurzel { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease; }
.buehne.bereit .b-wurzel { opacity: 1; }
.b-himmel { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--b-oben), var(--b-unten) 78%); }
.zeitraffer .b-himmel, .zeitraffer .b-berge path { transition: none; }

.b-sterne { position: absolute; left: 0; top: 0; width: 100%; height: 70%; fill: #fff; opacity: var(--b-sterne); transform: translate(calc(var(--b-zx) * -4px), calc(var(--b-zy) * -3px)); }
.b-sterne .funkelt { animation: b-funkeln 3.2s ease-in-out infinite alternate; }
@keyframes b-funkeln { from { opacity: 0.25; } to { opacity: 1; } }
.b-sternschnuppe {
  position: absolute; left: 62%; top: 9%; width: 140px; height: 2px; border-radius: 2px; opacity: 0;
  background: linear-gradient(to left, #fff, rgb(255 255 255 / 0)); transform: rotate(-24deg);
}
.ist-nacht .b-sternschnuppe { animation: b-schnuppe 13s ease-in 4s infinite; }
@keyframes b-schnuppe {
  0% { opacity: 0; transform: rotate(-24deg) translateX(0); }
  2% { opacity: calc(var(--b-sterne) * 1); }
  6% { opacity: 0; transform: rotate(-24deg) translateX(-360px); }
  100% { opacity: 0; transform: rotate(-24deg) translateX(-360px); }
}

/* Sonne und Mond: antippen spult den Tag im Zeitraffer vor */
.b-gestirn {
  position: absolute; left: var(--b-gx); top: var(--b-gy); width: clamp(54px, 9vmin, 96px); aspect-ratio: 1; padding: 0; border: 0; background: none;
  transform: translate(-50%, -50%) translate(calc(var(--b-zx) * -8px), calc(var(--b-zy) * -5px)); cursor: pointer; border-radius: 50%;
  transition: left 1.2s linear, top 1.2s linear;
}
.zeitraffer .b-gestirn { transition: none; }
.b-gestirn:focus-visible { outline: none; }
.b-sonne {
  position: absolute; inset: 14%; border-radius: 50%; display: none;
  background: radial-gradient(circle at 42% 40%, #fffbe6, #ffe28a 45%, #ffbf4a 100%);
  box-shadow: 0 0 40px 14px rgb(255 214 120 / 0.55), 0 0 120px 60px rgb(255 226 160 / 0.28);
  animation: b-sonne 6s ease-in-out infinite alternate;
}
@keyframes b-sonne { from { box-shadow: 0 0 36px 12px rgb(255 214 120 / 0.5), 0 0 110px 50px rgb(255 226 160 / 0.24); } to { box-shadow: 0 0 46px 18px rgb(255 214 120 / 0.62), 0 0 140px 70px rgb(255 226 160 / 0.32); } }
.b-mond { position: absolute; inset: 18%; display: none; overflow: visible; filter: drop-shadow(0 0 18px rgb(244 240 220 / 0.45)); }
.ist-tag .b-sonne { display: block; }
.ist-nacht .b-mond { display: block; }

/* Berge mit Parallaxe; das Alpenglühen (Enrosadira) liegt als Verlauf über den Drei Zinnen */
.b-berge { position: absolute; left: -4%; bottom: 0; width: 108%; height: 64%; }
.b-berge path, .b-berge rect { transition: fill 1.5s linear; }
.b-lage-fern { transform: translate(calc(var(--b-zx) * -8px), calc(var(--b-zy) * -3px)); }
.b-lage-mitte { transform: translate(calc(var(--b-zx) * -18px), calc(var(--b-zy) * -6px)); }
.b-lage-nah { transform: translate(calc(var(--b-zx) * -34px), calc(var(--b-zy) * -10px)); }
.b-rinnen path { stroke: rgb(0 0 0 / 0.13); stroke-width: 3; fill: none; }
.b-gluehen { opacity: var(--b-gluehen); mix-blend-mode: screen; }
.b-schnee { opacity: 0.12; }
.saison-winter .b-schnee { opacity: 1; }
.saison-fruehling .b-schnee { opacity: 0.6; }
.saison-herbst .b-schnee { opacity: 0.35; }

.b-wolken { position: absolute; inset: 0 0 34% 0; transform: translateX(calc(var(--b-zx) * -14px)); }
.b-wolke { position: absolute; left: 0; fill: var(--b-wolke); animation: b-ziehen 120s linear infinite; will-change: transform; }
.b-wolke g { filter: drop-shadow(0 6px 6px rgb(0 0 0 / 0.06)); }
@keyframes b-ziehen { from { transform: translateX(-30vw); } to { transform: translateX(115vw); } }
.b-voegel { position: absolute; inset: 0; pointer-events: none; transition: opacity 2s; }
.ist-nacht .b-voegel { opacity: 0; }
.b-vogel { position: absolute; left: 0; width: 18px; animation: b-fliegen 52s linear infinite; }
.b-vogel svg { display: block; width: 100%; fill: none; stroke: #27303a; stroke-width: 1.7; stroke-linecap: round; animation: b-flattern 0.42s ease-in-out infinite alternate; transform-origin: 50% 60%; }
.b-vogel:nth-child(2n) svg { animation-duration: 0.5s; }
@keyframes b-fliegen { 0% { transform: translate(-6vw, 0); } 50% { transform: translate(50vw, -3vh); } 100% { transform: translate(108vw, 2vh); } }
@keyframes b-flattern { from { transform: scaleY(1); } to { transform: scaleY(-0.55); } }

/* ---------- Die Insel ---------- */
.b-insel-rahmen { position: absolute; left: 0; top: 0; bottom: 0; width: 58%; display: grid; place-items: center; perspective: 1400px; }
.b-insel { transform: rotateX(calc(var(--b-zy) * -5deg)) rotateY(calc(var(--b-zx) * 7deg)); transform-style: preserve-3d; }
.b-welt { position: relative; animation: b-schweben 7s ease-in-out infinite alternate; }
@keyframes b-schweben { from { transform: translateY(-6px); } to { transform: translateY(8px); } }
.b-welt > * { position: absolute; left: 0; top: 0; }
.b-grund, .b-dinge { filter: brightness(var(--b-hell)) saturate(var(--b-satt)) sepia(calc(var(--b-warm) * 0.45)); }
.b-dinge { width: 100%; height: 100%; }
.b-ding { position: absolute; line-height: 0; pointer-events: none; }
.b-ding .modell-svg { display: block; overflow: visible; }
.b-grund { overflow: visible; }
.b-fall-strich { animation: b-fallen 0.8s linear infinite; }
@keyframes b-fallen { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -400; } }
.b-bach-glanz { animation: b-fliessen 1.6s linear infinite; }
@keyframes b-fliessen { to { stroke-dashoffset: 40; } }
.b-gischt { animation: b-gischt 2.2s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes b-gischt { from { opacity: 0.55; transform: scale(0.9); } to { opacity: 0.95; transform: scale(1.12); } }

/* Haus: Rauch aus dem Kamin, Fenster leuchten am Abend, die Tür geht auf */
.b-haus .rauch { transform-box: fill-box; transform-origin: 50% 100%; animation: b-rauch 3.6s ease-out infinite; }
.b-haus .rauch.r2 { animation-delay: -1.2s; }
.b-haus .rauch.r3 { animation-delay: -2.4s; }
@keyframes b-rauch { 0% { transform: translate(0, 40%) scale(0.5); opacity: 0; } 25% { opacity: 0.8; } 100% { transform: translate(30%, -120%) scale(1.5); opacity: 0; } }
.b-haus .fenster { transition: fill 1.2s; }
.lichter .b-haus .fenster { fill: #ffd683; }
.b-haus .tuer { transition: fill 0.4s; }
.b-haus.offen .tuer { fill: #ffe0a0; }
/* Feuer brennt nur am Abend und in der Nacht */
.buehne:not(.feuer) .b-feuerschale .m-flamme, .buehne:not(.feuer) .b-feuerschale .m-leuchtet { display: none; }
.modell-svg .m-flamme { transform-box: fill-box; transform-origin: 50% 100%; animation: m-flackern 0.7s ease-in-out infinite alternate; }
@keyframes m-flackern { from { transform: scale(0.92, 0.86); opacity: 0.85; } to { transform: scale(1.04, 1.08); opacity: 1; } }

.b-licht { pointer-events: none; mix-blend-mode: screen; overflow: visible; }
.b-licht circle { opacity: 0; transition: opacity 1.4s; }
.lichter .b-licht .l-fenster, .lichter .b-licht .l-laterne { opacity: 1; }
.feuer .b-licht .l-feuer { opacity: 1; animation: b-glut 0.9s ease-in-out infinite alternate; }
@keyframes b-glut { from { opacity: 0.7; } to { opacity: 1; } }

/* Figuren: der Anker ist der Punkt zwischen den Füßen */
.b-figur { position: absolute; left: 0; top: 0; width: 0; height: 0; transition: opacity 0.35s; }
.b-figur.drinnen { opacity: 0; }
.b-figur .b-bild { position: absolute; left: 0; bottom: calc(var(--c) * -0.076); transform: translateX(-50%); line-height: 0; cursor: pointer; }
.b-figur .figur-svg { display: block; height: calc(var(--c) * 1.26); width: calc(var(--c) * 0.63); overflow: visible; }
.b-figur.rechts .figur-svg { transform: scaleX(-1); }
.b-katze .b-bild { bottom: calc(var(--c) * -0.05); }
.b-katze .tier-svg { display: block; width: calc(var(--c) * 0.8); height: calc(var(--c) * 0.59); overflow: visible; }
.b-schatten { position: absolute; left: 0; top: 0; width: calc(var(--c) * 0.5); height: calc(var(--c) * 0.2); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / 0.3), rgb(0 0 0 / 0)); z-index: -1; }
.b-katze .b-schatten { width: calc(var(--c) * 0.6); }
.b-figur .b-bild svg * { pointer-events: visiblePainted; }

/* Plumbob über ihr, wie im Spiel; die Farbe zeigt, was gerade los ist */
.b-plumbob { position: absolute; left: 0; bottom: calc(var(--c) * 1.4); width: calc(var(--c) * 0.3); transform: translateX(-50%); animation: b-plumbob 2.6s ease-in-out infinite; pointer-events: none; transition: opacity 0.3s; }
.b-plumbob svg { display: block; width: 100%; overflow: visible; animation: b-drehen 3.4s linear infinite; filter: drop-shadow(0 0 4px rgb(80 255 140 / 0.6)); }
.b-plumbob .p-a { fill: #2fbf62; } .b-plumbob .p-b { fill: #8ef0a8; } .b-plumbob .p-c { fill: #4fdc7c; } .b-plumbob .p-d { fill: #1f9a4a; }
.b-plumbob path { transition: fill 0.4s; }
.b-figur.drinnen .b-plumbob { opacity: 0; }
@keyframes b-plumbob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12%; } }
@keyframes b-drehen { 0% { transform: scaleX(1); } 25% { transform: scaleX(0.4); } 50% { transform: scaleX(-1); } 75% { transform: scaleX(0.4); } 100% { transform: scaleX(1); } }
[data-modus="warten"] .b-plumbob .p-a { fill: #e2b13c; } [data-modus="warten"] .b-plumbob .p-b { fill: #fbe39a; } [data-modus="warten"] .b-plumbob .p-c { fill: #f2c94c; } [data-modus="warten"] .b-plumbob .p-d { fill: #b98a1f; }
[data-modus="warten"] .b-plumbob svg { animation-duration: 0.8s; filter: drop-shadow(0 0 4px rgb(255 210 80 / 0.7)); }
[data-modus="fehler"] .b-plumbob .p-a { fill: #d9453a; } [data-modus="fehler"] .b-plumbob .p-b { fill: #f59b8f; } [data-modus="fehler"] .b-plumbob .p-c { fill: #e8685a; } [data-modus="fehler"] .b-plumbob .p-d { fill: #a32d24; }
[data-modus="fehler"] .b-plumbob svg { filter: drop-shadow(0 0 5px rgb(255 90 70 / 0.75)); }
[data-modus="erfolg"] .b-plumbob svg { animation: b-drehen 0.5s linear infinite, b-regenbogen 1s linear infinite; }
@keyframes b-regenbogen { from { filter: hue-rotate(0deg) drop-shadow(0 0 6px #fff); } to { filter: hue-rotate(360deg) drop-shadow(0 0 6px #fff); } }

/* Sprechblasen über den Köpfen */
.b-blasen { width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.b-blase {
  position: absolute; left: 0; top: 0; translate: -50% -100%; scale: 0.6; opacity: 0; transform-origin: 50% 100%;
  font: 600 13px/1.25 Fredoka, system-ui, sans-serif; color: #18292a; background: #fff; padding: 6px 11px; border-radius: 14px;
  white-space: nowrap; box-shadow: 0 6px 16px rgb(10 25 40 / 0.22); transition: scale 0.22s cubic-bezier(.3,1.6,.6,1), opacity 0.18s;
}
.b-blase::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: #fff; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.b-blase.an { scale: 1; opacity: 1; }

/* Partikel (Schnee, Laub, Blüten, Glühwürmchen, Konfetti) und die Blende beim Hineinfliegen */
.b-teilchen { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.b-blende { position: absolute; inset: 0; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity 0.55s ease-in 0.45s; }
.buehne.flug .b-blende { opacity: 1; }

/* Bildfolgen der Figuren (wie style.css im Spiel) */
.f-takt-vier .f-bild, .f-takt-zwei .f-bild, .f-takt-blinzeln .f-bild { visibility: hidden; }
.f-takt-vier .f-bild { animation: f-vier var(--takt, 0.6s) linear infinite; }
.f-takt-vier .f-bild-1 { animation-delay: calc(var(--takt, 0.6s) * -0.75); }
.f-takt-vier .f-bild-2 { animation-delay: calc(var(--takt, 0.6s) * -0.5); }
.f-takt-vier .f-bild-3 { animation-delay: calc(var(--takt, 0.6s) * -0.25); }
.f-takt-zwei .f-bild { animation: f-zwei var(--takt, 0.6s) linear infinite; }
.f-takt-zwei .f-bild-1 { animation-delay: calc(var(--takt, 0.6s) * -0.5); }
.f-takt-blinzeln .f-bild-0 { animation: f-auf 4.6s linear infinite var(--blinzel, 0s); }
.f-takt-blinzeln .f-bild-1 { animation: f-zu 4.6s linear infinite var(--blinzel, 0s); }
@keyframes f-vier { 0%, 24.9% { visibility: visible; } 25%, 100% { visibility: hidden; } }
@keyframes f-zwei { 0%, 49.9% { visibility: visible; } 50%, 100% { visibility: hidden; } }
@keyframes f-auf { 0%, 95.9% { visibility: visible; } 96%, 100% { visibility: hidden; } }
@keyframes f-zu { 0%, 95.9% { visibility: hidden; } 96%, 100% { visibility: visible; } }

/* ---------- Karte ---------- */
main.anmelde {
  position: relative; z-index: 1; max-width: none; min-height: 100vh; min-height: 100dvh; margin: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 14px;
  padding: 32px clamp(16px, 7vw, 120px); pointer-events: none;
}
main.anmelde > * { pointer-events: auto; width: 100%; max-width: 400px; }
.karte.glas {
  background: var(--flaeche); background: color-mix(in srgb, var(--flaeche) 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgb(255 255 255 / 0.45); border-radius: 24px; padding: 26px 26px 20px;
  box-shadow: 0 30px 70px -24px rgb(4 12 30 / 0.55), 0 1px 0 rgb(255 255 255 / 0.5) inset;
  animation: k-rein 0.8s cubic-bezier(.2,.9,.3,1.1) 0.15s both;
}
@media (prefers-color-scheme: dark) { .karte.glas { border-color: rgb(255 255 255 / 0.12); box-shadow: 0 30px 70px -24px rgb(0 0 0 / 0.7), 0 1px 0 rgb(255 255 255 / 0.08) inset; } }
@keyframes k-rein { from { opacity: 0; transform: translateY(26px) scale(0.97); } to { opacity: 1; transform: none; } }
.karte.glas.wackeln { animation: k-wackeln 0.5s cubic-bezier(.36,.07,.19,.97); }
@keyframes k-wackeln { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }
.karte.glas.weg { animation: none; transition: opacity 0.4s, transform 0.5s cubic-bezier(.5,0,.8,.3); opacity: 0; transform: translateY(14px) scale(0.96); }
.kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.kopf .marke { margin: 0; font-size: 1.9rem; text-align: left; }
.kopf .plumbob { width: 18px; flex: none; animation: k-schweben 2.6s ease-in-out infinite; }
.kopf .plumbob svg { display: block; width: 100%; animation: b-drehen 3.4s linear infinite; filter: drop-shadow(0 0 5px rgb(47 191 98 / 0.5)); }
@keyframes k-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.ortszeit { margin-left: auto; font-size: 0.78rem; color: var(--leise); text-align: right; line-height: 1.3; font-variant-numeric: tabular-nums; }
.karte.glas h1 { font-size: 1.25rem; }
.karte.glas input[type="text"], .karte.glas input[type="password"] { background: color-mix(in srgb, var(--flaeche-2) 85%, transparent); transition: border-color 0.2s, box-shadow 0.2s; }
.karte.glas input:focus { border-color: var(--akzent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--akzent) 18%, transparent); outline: none; }
.karte.glas input:focus-visible { outline: none; }
#los { position: relative; overflow: hidden; transition: transform 0.15s, box-shadow 0.2s; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--akzent) 70%, transparent); }
#los:hover:not(:disabled) { transform: translateY(-1px); }
#los::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.35) 50%, transparent 70%); transform: translateX(-100%); }
#los:hover:not(:disabled)::after { animation: k-glanz 0.9s ease; }
@keyframes k-glanz { to { transform: translateX(100%); } }
#los.laedt { color: transparent; opacity: 1; }
#los.laedt::before { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2.5px solid var(--akzent-tinte); border-right-color: transparent; animation: k-drehen 0.7s linear infinite; }
@keyframes k-drehen { to { transform: rotate(360deg); } }
.anmelde .fuss { width: auto; align-self: flex-end; margin: 0; padding: 6px 14px; border-radius: 999px; color: rgb(255 255 255 / 0.9); background: rgb(8 16 32 / 0.28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.anmelde .fuss a { color: inherit; }
.tipp { font-size: 0.78rem; color: var(--leise); margin: 10px 0 0; text-align: center; }

/* Schmal (Handy): die Insel oben, die Karte darunter */
@media (max-width: 860px) {
  .b-insel-rahmen { width: 100%; bottom: auto; height: 50%; }
  main.anmelde { justify-content: flex-start; align-items: center; padding: 46vh 16px 24px; }
  .anmelde .fuss { align-self: center; }
  .b-berge { height: 74%; }
}
@media (max-width: 860px) and (max-height: 600px) {
  .b-insel-rahmen { height: 100%; width: 50%; }
  main.anmelde { padding: 16px; align-items: flex-end; justify-content: center; }
  .b-berge { bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .buehne *, .buehne *::before, .buehne *::after, .karte.glas, .kopf .plumbob, .kopf .plumbob svg { animation: none !important; transition: none !important; }
  .figur-svg .f-bild { visibility: hidden; }
  .figur-svg .f-bild-0 { visibility: visible; }
  /* Ohne Bewegung: Wolken verteilt stehen lassen, keine Vögel */
  .b-wolke { transform: translateX(var(--x, 0)); }
  .b-voegel { display: none; }
}