/* app v26: Titelbild-Effekte, Anlass-Symbol am Logo und Öffnungsanimation (js/anlass.js) */

/* ---------- Symbol neben dem Logo ---------- */
.wordmark .anl-acc { display: inline-flex; width: 26px; height: 26px; margin-left: 5px; align-self: center; transform-origin: 50% 100%; animation: anl-acc-pop .6s .2s both; }
.wordmark .anl-acc.anl-acc-still { animation: none; }
.wordmark .anl-acc svg { width: 26px; height: 26px; display: block; }
@keyframes anl-acc-pop { 0% { transform: scale(0) rotate(-20deg); } 60% { transform: scale(1.25) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }

/* ---------- Titelbild: Schnee (Advent) / Glitzer (Silvester) ---------- */
.anl-herofx { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.anl-herofx i { position: absolute; display: block; border-radius: 50%; background: #fff; }
.anl-herofx-advent i { top: -6px; animation: anl-hero-schnee linear infinite; }
@keyframes anl-hero-schnee { from { transform: translate3d(0, -10px, 0); } to { transform: translate3d(14px, 270px, 0); } }
.anl-herofx-silvester i { width: 3px; height: 3px; background: #f5c400; box-shadow: 0 0 6px 1px rgba(245, 196, 0, .7); animation: anl-funkeln ease-in-out infinite; }
@keyframes anl-funkeln { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.2); } }

/* ---------- Öffnungsanimation ---------- */
.anl-splash { position: fixed; inset: 0; z-index: 3000; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.anl-splash.anl-weg { animation: anl-raus .45s ease forwards; }
.anl-splash.anl-weg-schnell { animation: anl-raus .22s ease forwards; }
@keyframes anl-raus { to { opacity: 0; transform: scale(1.04); visibility: hidden; } }
.anl-mitte { position: relative; z-index: 2; width: min(100vw, 430px); display: flex; flex-direction: column; align-items: center; }
.anl-art { width: 100%; height: auto; max-height: 58vh; display: block; overflow: visible; }
.anl-text { text-align: center; margin-top: 4px; animation: anl-hoch .5s .45s both; }
.anl-logo { font-weight: 900; font-size: 2.5rem; letter-spacing: -.5px; color: #fff; line-height: 1.1; }
.anl-logo span { color: #5fc7c9; }
.anl-gruss { font-weight: 700; font-size: 1.0625rem; color: #fff; opacity: .92; margin-top: 8px; }
.anl-jahr { font-family: var(--cond, inherit); font-weight: 700; font-size: .9375rem; letter-spacing: 3px; color: #f5c400; margin-bottom: 4px; }
.anl-skip { position: absolute; left: 0; right: 0; bottom: calc(30px + env(safe-area-inset-bottom)); text-align: center; font-size: .8125rem; color: rgba(255, 255, 255, .55); z-index: 3; }
@keyframes anl-hoch { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes anl-pop { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes anl-fade { from { opacity: 0; } to { opacity: 1; } }
.anl-splash .anl-pop { transform-box: fill-box; transform-origin: center; animation: anl-pop .65s .05s both; }
.anl-splash .anl-unten { transform-origin: 50% 100%; }
.anl-splash .anl-fade { animation: anl-fade .6s both; }

/* Halloween */
.anl-halloween { background: radial-gradient(circle at 50% 30%, #2b2350 0%, #16142b 70%); }
.anl-halloween .anl-logo span { color: #ff9a3c; }
.anl-halloween .anl-glow { animation: anl-fade .5s .4s both; }
.anl-halloween .anl-face { animation: anl-fade .15s .55s both; }
.anl-halloween .anl-flicker { animation: anl-flicker .9s .7s infinite; }
@keyframes anl-flicker { 0%, 100% { opacity: 1; } 20% { opacity: .55; } 35% { opacity: 1; } 55% { opacity: .7; } 70% { opacity: 1; } }
.anl-halloween .anl-bat { animation: anl-bat 1.6s linear both; }
@keyframes anl-bat { from { transform: translate(-120px, 40px); } to { transform: translate(460px, -60px); } }
.anl-halloween .anl-flap { transform-box: fill-box; transform-origin: center; animation: anl-flap .18s linear infinite; }
@keyframes anl-flap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(-.5); } }

/* Silvester */
.anl-silvester { background: linear-gradient(#0b1630, #1d365f); }
.anl-silvester .anl-rise { animation: anl-rise .35s ease-out both, anl-rakete-aus .5s both; }
@keyframes anl-rise { to { stroke-dashoffset: 0; } }
@keyframes anl-rakete-aus { 0%, 80% { opacity: .9; } 100% { opacity: 0; } }
.anl-silvester .anl-burst { transform-box: fill-box; transform-origin: center; animation: anl-burst .55s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes anl-burst { 0% { transform: scale(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: scale(1); opacity: .85; } }
.anl-silvester .anl-spark { animation: anl-funkeln 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.anl-skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: min(140px, 18vh); z-index: 1; }

/* Advent */
.anl-advent { background: linear-gradient(#1d365f, #2c4f7c); }
.anl-advent .anl-twinkle { transform-box: fill-box; transform-origin: center; animation: anl-twinkle 1.2s .7s ease-in-out infinite; }
@keyframes anl-twinkle { 0% { transform: scale(1) rotate(0); } 50% { transform: scale(1.3) rotate(36deg); } 100% { transform: scale(1) rotate(72deg); } }
.anl-schnee { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.anl-schnee i { position: absolute; top: -8px; display: block; border-radius: 50%; background: #fff; animation: anl-schnee linear infinite; }
@keyframes anl-schnee { from { transform: translate3d(0, -10px, 0); } to { transform: translate3d(20px, 105vh, 0); } }
.anl-boden { position: absolute; left: -10%; right: -10%; bottom: -40px; height: min(130px, 13vh); background: #eef4f7; border-radius: 50% 50% 0 0 / 60px 60px 0 0; z-index: 1; }
.anl-advent .anl-skip { color: rgba(29, 54, 95, .6); }
.anl-advent .anl-text, .anl-silvester .anl-text { text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.anl-mitte { padding-bottom: min(70px, 8vh); }

/* Ostern */
.anl-ostern { background: linear-gradient(#cfeaf3 0%, #eef8ea 100%); }
.anl-ostern .anl-logo { color: #1d365f; }
.anl-ostern .anl-logo span { color: #17767b; }
.anl-ostern .anl-gruss { color: #1d365f; }
.anl-ostern .anl-skip { color: rgba(29, 54, 95, .5); }
.anl-ostern .anl-egg { animation: anl-egg .6s cubic-bezier(.3, .8, .3, 1) both; }
@keyframes anl-egg { 0% { transform: translateY(90px); } 60% { transform: translateY(-14px); } 80% { transform: translateY(4px); } 100% { transform: translateY(0); } }
.anl-ostern .anl-peek { animation: anl-peek .55s .7s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes anl-peek { from { transform: translateY(230px); } to { transform: translateY(0); } }
.anl-ostern .anl-wiggle { transform-box: fill-box; transform-origin: 50% 100%; animation: anl-wiggle .6s 1.25s both; }
@keyframes anl-wiggle { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-10deg); } 60% { transform: rotate(8deg); } }
.anl-ostern .anl-sway { transform-box: fill-box; transform-origin: 50% 100%; animation: anl-sway 1.4s ease-in-out infinite; }
@keyframes anl-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

/* niedrige Bildschirme (Handy quer): Bild kleiner, kein Hinweis unten */
@media (max-height: 480px) {
  .anl-art { max-height: 44vh; }
  .anl-logo { font-size: 2rem; }
  .anl-skip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .anl-splash { display: none; }
  .anl-herofx { display: none; }
  .wordmark .anl-acc { animation: none; }
}