#animataglance img {
            animation: fadeImgIn 1s linear both paused;
            animation-delay: calc(var(--scroll-progress, 0) * -1s);
        }

        @keyframes fadeImgIn {
            0% {
                opacity: 0;
                transform: translateY(100px);
            }

            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .ballunten:after {
            animation: ballAnimation 1s linear both paused;
            animation-delay: calc(var(--scroll-progress, 0) * -1s);
        }

        @keyframes ballAnimation {
            0% {
                opacity: 0;
                top: 100%;
            }

            50% {
                opacity: 1;
                top: 52%;
            }
        }


  


        @keyframes ballAnimationlinks {
            0% {
                transform: translate(-100%, -10.5%);
            }

            50% {
                transform: translate(-50%, -10.5%);
            }


        }


.balllinks:before {
            animation: ballAnimationlinks 1s linear both paused;
            animation-delay: calc(var(--scroll-progress, 0) * -1s);
        }



        @keyframes ballAnimationlinks {
            0% {
                transform: translate(-100%, -10.5%);
            }

            50% {
                transform: translate(-50%, -10.5%);
            }


        }



        @keyframes ballAnimationlinks {
            0% {
                transform: translate(-100%, -10.5%);
            }

            50% {
                transform: translate(-50%, -10.5%);
            }


        }


.ballrechts:before {
            animation: ballAnimationrechts  1s linear both paused;
            animation-delay: calc(var(--scroll-progress, 0) * -1s);
        }



        @keyframes ballAnimationrechts  {
            0% {
    
                transform: translate(100%, -12.5%);
            }

            50% {
                transform: translate(50%, -12.5%);
            }


        }





      .decorechts .frame-inner:before {
            animation: decoAnimationrechts 1s linear both paused;
            animation-delay: calc(var(--scroll-progress, 0) * -1s);
        }

 @keyframes decoAnimationrechts {
            0% {
      
                     transform: translate(50%, 100%);
            }

            60% {
                    transform: translate(50%, 0%);
            }


        }

      .decolinks .frame-inner:before {
            animation: decoAnimationlinks 1s linear both paused;
            animation-delay: calc(var(--scroll-progress, 0) * -1s);
        }

 @keyframes decoAnimationlinks {
            0% {
      
                     transform: translate(-50%, 100%);
            }

            60% {
                    transform: translate(-50%, 0%);
            }


        }





        .animkreise {
            animation-delay: calc(var(--scroll-progress, 0) * -2s);
        }

        .animkreise li:nth-of-type(1) {
            animation: kreise1 1s linear both paused;
            animation-delay: calc(var(--scroll-progress, 0) * -1s);
        }

        .animkreise li:nth-of-type(2) {
            animation: kreise2 1s linear both paused;
            animation-delay: calc(var(--scroll-progress, 0) * -1s);
        }

        .animkreise li:nth-of-type(3) {
            animation: kreise3 1s linear both paused;
            animation-delay: calc(var(--scroll-progress, 0) * -1s);
        }

        @keyframes kreise1 {
            20% {
                transform: translate(0, 0);
                background: white;
            }

            40% {
                transform: translate(20%, -15%) scale(1.3);
                background: #D1FF5C;
            }

            60% {
                transform: translate(-20%, 20%);
                background: white;
            }

            80% {
                transform: translate(-15%, 30%);
                background: white;
            }

            100% {
                transform: translate(0, 0);
                background: white;
            }
        }


        @keyframes kreise2 {
            20% {
                transform: translate(0, 0);
                background: white;
            }

            40% {
                transform: translate(20%, 35%);
                background: white;
            }

            60% {
                transform: translate(0%, -15%) scale(1.3);
                background: #D1FF5C;
            }

            80% {
                transform: translate(-25%, -10%);
                background: white;
            }

            100% {
                transform: translate(0, 0);
                background: white;
            }
        }

        @keyframes kreise3 {
            20% {
                transform: translate(0, 0);
                background: white;
            }

            40% {
                transform: translate(-4%, -20%);
                background: white;
            }

            60% {
                transform: translate(2%, 30%);
                background: white;
            }

            80% {
                transform: translate(0, 20%) scale(1.3);
                background: #D1FF5C;
            }

            100% {
                transform: translate(0, 0);
                background: white;
            }
        }



        .animkreise li:nth-of-type(1):before {
            transform-origin: 200% 50%;
            animation: kreise1before 1s linear both paused;
            animation-delay: calc(var(--scroll-progress, 0) * -1s);
        }

        .animkreise li:nth-of-type(2):before {
            transform-origin: 200% 50%;
            animation: kreise2before 1s linear both paused;
            animation-delay: calc(var(--scroll-progress, 0) * -1s);
        }

        .animkreise li:nth-of-type(3):before {
            transform-origin: 200% 50%;
            animation: kreise3before 1s linear both paused;
            animation-delay: calc(var(--scroll-progress, 0) * -1s);
        }

        .animkreise li:nth-of-type(3):after {
            transform-origin: -100% 50%;
            animation: kreise3after 1s linear both paused;
            animation-delay: calc(var(--scroll-progress, 0) * -1s);
        }


        @keyframes kreise1before {
            20% {
                transform: rotate(0)
            }

            40% {
                transform: rotate(-20deg)
            }

            60% {
                transform: rotate(0)
            }

            80% {
                transform: rotate(20deg)
            }

            100% {
                transform: rotate(0)
            }
        }


        @keyframes kreise2before {
            20% {
                transform: rotate(0)
            }

            25% {
                transform: rotate(-7deg)
            }


            40% {
                transform: rotate(-1deg)
            }

            50% {
                transform: rotate(-20deg)
            }

            60% {
                transform: rotate(-26deg)
            }

            70% {
                transform: rotate(-28deg)
            }

            80% {
                transform: rotate(-30deg)
            }

            100% {
                transform: rotate(0)
            }
        }

        @keyframes kreise3before {
            20% {
                transform: rotate(0)
            }

            25% {
                transform: rotate(10deg)
            }

            35% {
                transform: rotate(5deg)
            }


            40% {
                transform: rotate(0deg)
            }


            50% {
                transform: rotate(28deg)
            }

            55% {
                transform: rotate(34deg)
            }

            60% {
                transform: rotate(34deg)
            }

            65% {
                transform: rotate(30deg)
            }

            70% {
                transform: rotate(27deg)
            }

            75% {
                transform: rotate(22deg)
            }

            80% {
                transform: rotate(18deg)
            }

            100% {
                transform: rotate(0)
            }
        }

        @keyframes kreise3after {
            20% {
                transform: rotate(0)
            }

            40% {
                transform: rotate(10deg)
            }

            60% {
                transform: rotate(-20deg)
            }

            80% {
                transform: rotate(20deg)
            }

            100% {
                transform: rotate(0)
            }
        }


        /* Animation Top */

        .animHi .frame-inner ul:first-child li {
            opacity: 0;
            transform: scale(0);
            animation: hi 4s ease-in-out 0s forwards;

        }

        @keyframes hi {
            10% {
                opacity: 0;
                transform: scale(0)
            }

            20% {
                opacity: 1;
                transform: scale(1.7)
            }

            22% {
                opacity: 1;
                transform: scale(1.4)
            }

            25% {
                opacity: 1;
                transform: scale(1.5)
            }

            90% {
                opacity: 1;
                ;
                transform: scale(1.5)
            }

            100% {
                opacity: 0;
                ;
                transform: scale(1.5)
            }

        }

        .animHi .frame-inner {

            opacity: 0;
            transform: scale(0);
            animation: hiinner 4s ease-in-out 0s forwards;
        }


        @keyframes hiinner {
            7% {
                opacity: 0;
                transform: scale(0)
            }

            20% {
                opacity: 1;
                transform: scale(1.1)
            }

            22% {
                opacity: 1;
                transform: scale(0.9)
            }

            28% {
                opacity: 1;
                transform: scale(1)
            }

            90% {
                opacity: 1;
                ;
                transform: scale(1)
            }

            100% {
                opacity: 1;
                ;
                transform: scale(1)
            }

        }


        .animHi .frame-inner ul:last-child li {
            opacity: 0;
            pointer-events: none;
            /* unsichtbare Links deaktivieren */
            animation: fadeInOut 16s infinite;
        }

        .animHi .frame-inner ul:last-child li:nth-child(1) {
            animation-delay: calc(0s + 4s);
        }

        .animHi .frame-inner ul:last-child li:nth-child(2) {
            animation-delay: calc(4s + 4s);
        }

        .animHi .frame-inner ul:last-child li:nth-child(3) {
            animation-delay: calc(8s + 4s);
        }

        .animHi .frame-inner ul:last-child li:nth-child(4) {
            animation-delay: calc(12s + 4s);
        }

        @keyframes fadeInOut {
            0% {
                opacity: 0;
                pointer-events: none;
            }

            3% {
                opacity: 1;
                pointer-events: auto;
            }

            22% {
                opacity: 1;
                pointer-events: auto;
            }

            25% {
                opacity: 0;
                pointer-events: none;
            }

            100% {
                opacity: 0;
                pointer-events: none;
            }
        }

        .animHi .frame-inner:after {

            transform: translate(-10%, -10%);
            animation: pfeilanim 16s infinite;
            animation-delay: 4s;
        }

        @keyframes pfeilanim {
            0% {
                transform: translate(-10%, -10%);
            }

            23% {
                transform: translate(-10%, -10%);
            }

            28% {
                transform: translate(180%, -10%);
            }

            47% {
                transform: translate(180%, -10%);
            }

            52% {
                transform: translate(180%, 180%);
            }

            72% {
                transform: translate(180%, 180%);
            }

            77% {
                transform: translate(-10%, 180%);
            }

            97% {
                transform: translate(-10%, 180%);
            }

            100% {
                transform: translate(-10%, -10%);
            }
        }


        /* Anführungszeichen */

        div.slide-image:after {
            animation: anfuehrungszeichen 1s linear both paused;
            transform: rotate(-45deg) translateX(-50px);
            animation-delay: calc(var(--scroll-progress, 0) * -1s);
        }


        @keyframes anfuehrungszeichen {
            10% {
                transform: rotate(-45deg) translateX(-50px)
            }

            40% {
                transform: rotate(0deg) translateX(0px)
            }
            
            100% {
                transform: rotate(0deg) translateX(0px)
            }
        }


.swiper-button-next:not(.month) {
            animation: swipernext 1s linear both paused;
            transform: translateX(-50px) ;
            opacity:0;
            animation-delay: calc(var(--scroll-progress, 0) * -1s);
        }


        @keyframes swipernext {
            10% {
                transform: translateX(-50px);
                  opacity:0;
            }

            30% {
                transform: translateX(0px);
                  opacity:1;
            }
            
            100% {
                transform: translateX(0px);
                opacity:1;
            }
        }


.swiper-button-prev:not(.month) {
            animation: swiperprev 1s linear both paused;
            transform: translateX(50px) ;
            opacity:0;
            animation-delay: calc(var(--scroll-progress, 0) * -1s);
        }


 @keyframes swiperprev{
            10% {
                transform: translateX(50px);
                  opacity:0;
            }

            30% {
                transform: translateX(0px);
                  opacity:1;
            }
            
            100% {
                transform: translateX(0px);
                opacity:1;
            }
        }




        /* Allgemein */


        /* Animation */



        .row > div:not(.flowimg, .flowtext),
        div:not(.caption-body) > p,
        ul:not(.navbar-nav, .sociallinks-list) > li,
        section:not(.footer-section),
        .carousel-item-bodytext > *,
        .slick-slide,
        .accordion-item,
        .article,
        .ce-col > div {
            transform: translateY(50px);
            opacity: 0;
        }




        .row > div.in-view:not(.flowimg, .flowtext),
        div:not(.caption-body) > p.in-view,
        ul > li.in-view,
        section.in-view,
        .carousel-item-bodytext > *.in-view,
        .slick-slide.in-view,
        .accordion-item.in-view,
        .article.in-view,
        .ce-col > div.in-view {
            opacity: 1;
            transform: none;
            transition: all 0.8s, transform 0.8s ease;
        }


/* no anmation */

footer p, footer li, .modal-body div, li.nav-item, .powermail-errors-list li, .fnbb_article_main p, .pswp__scroll-wrap, #dcrt_dps_content p{  opacity: 1  !important;
            transform: none !important;}





/**
 * Splitting.js – H1 Zeilen-Animation
 * Variante: Einblenden von unten
 */

/* Overflow verstecken damit Zeilen "hereinfliegen" können */

h1.splitting>span:first-child{display:none}

.line-wrapper {
  overflow: hidden;
  display: block;
}

.line-wrapper .word{margin-right:0.2em}

/* Ausgangszustand jeder Zeile */
.line-wrapper {
  display: block;
  opacity: 0;
  transform: translateY(100%);
  animation: line-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;

  /* Verzögerung: jede Zeile 120ms nach der vorherigen */
  animation-delay: calc(var(--line-index) * 120ms);
}

/* Animation: von unten nach oben einblenden */
@keyframes line-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* -----------------------------------------------------------------------
   Weitere Varianten – einfach line-in ersetzen
   ----------------------------------------------------------------------- */

/* Variante: Von links */
/*
@keyframes line-in {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
*/

/* Variante: Einblenden ohne Bewegung */
/*
@keyframes line-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
*/

/* Variante: Blur-Effekt */
/*
@keyframes line-in {
  from { opacity: 0; filter: blur(8px); }
  to   { opacity: 1; filter: blur(0); }
}
*/

/* respnsive */

@media (max-width:767px) {
    
    .splitting  .char, .char, .word {
    opacity: 1;
    transform: none;
}
    
}