/* Aquapark Bayern · Bewegung. Nur aktiv mit html.an (siehe animation.js). */
html.an .an-wartet { opacity: 0; transform: translateY(28px); }
html.an .an-wartet.an-da { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--an-verzug, 0ms); }

@keyframes an-auf { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
html.an .an-auf { animation: an-auf .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--an-verzug, 0ms); }

@keyframes an-zoom { from { transform: scale(1.1); } to { transform: scale(1); } }
html.an .an-hero { overflow: hidden; }
html.an .an-zoom { animation: an-zoom 14s cubic-bezier(.2,.6,.3,1) both; transform-origin: 50% 40%; }

html.an .an-karte { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
html.an .an-karte:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(31,27,23,.18); }
html.an .an-karte img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
html.an .an-karte:hover img { transform: scale(1.04); }

html.an a[style*="border-radius: 26px"], html.an a[style*="border-radius: 24px"], html.an a[style*="border-radius: 20px"],
html.an button[style*="border-radius"] { transition: transform .15s, filter .2s; }
html.an a[style*="border-radius: 26px"]:active, html.an a[style*="border-radius: 24px"]:active, html.an button:active { transform: scale(.97); }

@keyframes an-tick { 0% { transform: translateY(-30%); opacity: .2; } 100% { transform: none; opacity: 1; } }
html.an .an-tick { animation: an-tick .45s cubic-bezier(.2,.7,.2,1); display: inline-block; }

/* Lageplan: die Punkte am Ort atmen leicht. */
@keyframes an-puls { 0%, 100% { r: 11; } 50% { r: 15; } }
html.an svg[viewBox="0 0 1306 820"] a circle[r="11"] { animation: an-puls 2.6s ease-in-out infinite; }
html.an svg[viewBox="0 0 1306 820"] a:hover circle[r="46"] { filter: brightness(1.25); }

html.an .dk-nav { transition: box-shadow .3s, background .3s; }
html.an .dk-nav.an-gescrollt { box-shadow: 0 10px 30px rgba(31,27,23,.10); }

@media (prefers-reduced-motion: reduce) {
  html.an *, html.an *::before, html.an *::after { animation: none !important; transition: none !important; }
  html.an .an-wartet { opacity: 1; transform: none; }
}