/* =====================================================================
   ANIMATIONEN – Der Dorfmetzger Reck
   Alle Bewegungen der Seite an einem Ort:
   - Laufband, drehendes Siegel, pulsierender „geöffnet“-Punkt, Linie
   - Einblenden beim Scrollen (.dm-rv, per JS mit .dm-in)
   - Zitat färbt sich Wort für Wort ein (per JS)
   - Hover-Effekte (Buttons, Kacheln, Bild-Zoom)
   Barrierefreiheit:
   - Der Schalter „Animationen anhalten“ setzt .dm-paused auf <body>
     und stoppt alle Endlos-Animationen (WCAG 2.2.2).
   - Bei „Bewegung reduzieren“ im Betriebssystem ist alles aus.
   ===================================================================== */
#top .dm-tile>img.dm-bg{transition:transform .7s cubic-bezier(.2,.7,.2,1)}


#top .dm-tile:hover>img.dm-bg{transform:scale(1.05)}


#top .dm-btn{transition:transform .2s ease}


#top .dm-btn .dm-ic{transition:transform .3s cubic-bezier(.3,1.5,.5,1)}


#top .dm-btn:hover{transform:translateY(-2px)}


#top .dm-btn:hover .dm-ic{transform:rotate(45deg)}


#top .dm-round{transition:transform .3s cubic-bezier(.3,1.5,.5,1)}


#top .dm-round:hover{transform:rotate(45deg)}


#top .dm-marquee-track{animation:dm-run 38s linear infinite}


#top .dm-marquee:hover .dm-marquee-track{animation-play-state:paused}


@keyframes dm-run{to{transform:translateX(-50%)}}


#top .dm-badge svg{animation:dm-spin 22s linear infinite}


@keyframes dm-spin{to{transform:rotate(360deg)}}


#top .dm-pill.dm-open::before{animation:dm-pulse 1.6s ease-in-out infinite}


@keyframes dm-pulse{50%{opacity:.25}}


#top .dm-quote .dm-w{color:var(--dm-ink);transition:color .4s}


#top.dm-js .dm-quote .dm-w{color:var(--dm-faint)}


#top.dm-js .dm-quote .dm-w.dm-on{color:var(--dm-ink)}


#top .dm-plus .dm-cap{transition:transform .4s cubic-bezier(.2,.8,.2,1)}


#top .dm-cat .dm-tile img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}


#top .dm-cat:hover .dm-tile img{transform:scale(1.05)}


#top .dm-cat-meta .dm-arr{transition:transform .3s}


#top .dm-cat:hover .dm-arr{transform:translate(3px,-3px)}


#top .dm-rule::before{animation:dm-slide 6s ease-in-out infinite alternate}


@keyframes dm-slide{to{transform:translateX(233%)}}


#top .dm-chip{transition:background .2s,color .2s}


#top .dm-course{transition:transform .3s,background .3s}


#top .dm-course:hover .dm-round{transform:rotate(45deg)}


#top.dm-js .dm-rv{transform:translateY(24px);transition:transform .8s cubic-bezier(.2,.7,.2,1)}


#top.dm-js .dm-rv.dm-in{transform:none}


#top .dm-subnav a{transition:background .2s,color .2s}


#top .dm-tabs button{transition:background .2s,color .2s}


#top .dm-card{transition:transform .3s}


#top .dm-card:hover{transform:translateY(-4px)}


@keyframes dm-enter{from{transform:translateY(10px)}to{transform:none}}



/* Enfold-Spalten als Kacheln: leicht anheben beim Überfahren */
#top .flex_column.dm-col-card,#top .flex_column.dm-col-stop{transition:transform .3s}


#top .flex_column.dm-col-card:hover,#top .flex_column.dm-col-stop:hover{transform:translateY(-4px)}



/* Seitenkopf der Unterseiten gleitet beim Laden hinein */
#top .dm-page-hero{animation:dm-enter .45s cubic-bezier(.2,.7,.2,1) both}



/* Schalter „Animationen anhalten“ */
#top.dm-paused *,#top.dm-paused *::before,#top.dm-paused *::after{animation-play-state:paused!important}



/* „Bewegung reduzieren“ im Betriebssystem: alles aus */
@media (prefers-reduced-motion:reduce){
#top *,#top *::before,#top *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}


#top.dm-js .dm-quote .dm-w{color:var(--dm-ink)}


#top.dm-js .dm-rv{transform:none}
}