/* Animation Code */
.animation {
	will-change: transform;
}
/* ----------------Rotate In ----------------- */
@media screen and (min-width: 768px) {
     .rotate-in-desktop {
        opacity: 0;
		transition: 2500ms all ease-in-out;
     }

    .rotate-in-desktop.animate {
        opacity: 1;
		-webkit-animation: rotate-in-desktop 1.65s linear both;
	    animation: rotate-in-desktop 1.65s linear both;
     }

@-webkit-keyframes rotate-in-desktop {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
            transform: scale(1) rotateZ(0);
  }
  50% {
    -webkit-transform: scale(2) rotateZ(180deg);
            transform: scale(2) rotateZ(180deg);
  }
  100% {
    -webkit-transform: scale(1) rotateZ(360deg);
            transform: scale(1) rotateZ(360deg);
  }
}
@keyframes rotate-in-desktop {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
            transform: scale(1) rotateZ(0);
  }
  50% {
    -webkit-transform: scale(2) rotateZ(180deg);
            transform: scale(2) rotateZ(180deg);
  }
  100% {
    -webkit-transform: scale(1) rotateZ(360deg);
            transform: scale(1) rotateZ(360deg);
  }
}

/* ----------------Rotate In mit Fade In 2x----------------- */
.rotate-in-ver-desktop {
        opacity: 0;
		transition: 2500ms all ease-in-out;
}

.rotate-in-ver-desktop.animate {
    opacity: 1;
	-webkit-animation: rotate-in-ver-desktop 2.5s cubic-bezier(0.600, 0.040, 0.980, 0.335) 2 both;
	        animation: rotate-in-ver-desktop 2.5s cubic-bezier(0.600, 0.040, 0.980, 0.335) 2 both;
}

/* ----------------Abdunkelung Header Home----------------- */
.xxx h2{
	transition: transform 15s ease;
	background-color: rgb(255, 255, 255);
}

@keyframes abdunkeln {
  0% {
background-color: rgba(255, 255, 255,0.8);
  }
  50% {
background-color: rgba(0, 0, 0,0.3);
  }
  100% {
	background-color: rgba(0, 0, 0,0.4);
  }
}

.xxx h2 .animate {
animation: abdunkeln 4s linear both;
}

/* ----------------Sliderbild Scale Home----------------- */
.image-scale{
transition: transform 5s ease;
	transform: scale(1);
}


.image-scale .animate {
	transform: scale(1.8);
}

/* ----------------Rotate In mit Fade In 2x----------------- */
@-webkit-keyframes rotate-in-ver-desktop {
  0% {
    -webkit-transform: rotateY(-360deg);
            transform: rotateY(-360deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    opacity: 1;
  }
}
@keyframes rotate-in-ver-desktop {
  0% {
    -webkit-transform: rotateY(-360deg);
            transform: rotateY(-360deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    opacity: 1;
  }
}


/* ----------------Slide In von oben rechts----------------- */
    .slide-in-or-desktop {
    opacity: 0;
    transition: 2500ms all ease-in-out;
     }

     .slide-in-or-desktop.animate {
    opacity: 1;
	-webkit-animation: slide-in-or 2.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: slide-in-or 2.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
     }

@-webkit-keyframes slide-in-or {
  0% {
    -webkit-transform: translateY(-1000px) translateX(1000px);
            transform: translateY(-1000px) translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-or{
  0% {
    -webkit-transform: translateY(-1000px) translateX(1000px);
            transform: translateY(-1000px) translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0);
    opacity: 1;
  }
}

	.fade-left-desktop,
	.fade-right-desktop {
		opacity: 0;
		transition: 2500ms all ease-in-out;
	}
	.fade-left-desktop {
		transform: translateX(50px);
	}
	.fade-right-desktop {
		transform: translateX(-50px);
	}
	.fade-left-desktop.animate,
	.fade-right-desktop.animate {
		opacity: 1;
		transform: translateX(0);
	}
	.fade-down-desktop,
	.fade-up-desktop {
		opacity: 0;
		transition: 1500ms all ease-in-out;
		transform: translateY(70px);
	}
	.fade-up-desktop {
		transform: translateY(70px);
	}
	.fade-down-desktop {
		transform: translateY(-50px);
	}
	.fade-down-desktop.animate,
	.fade-up-desktop.animate {
		opacity: 1;
		transform: translateY(0px);
	}
	.grow-left-desktop,
	.grow-right-desktop {
		transform: scaleX(0);
		transform-origin: left;
		transition: 1200ms all ease-in-out;
	}
	.grow-left-desktop {
		transform-origin: right;
	}
	.grow-right-desktop {
		transform-origin: left;
	}
	.grow-left-desktop.animate,
	.grow-right-desktop.animate {
		transform: scaleX(1);
	}
	.grow-down-desktop,
	.grow-up-desktop {
		transform: scaleY(0);
		transition: 1200ms all ease-in-out;
	}
	.grow-up-desktop {
		transform-origin: bottom;
	}
	.grow-down-desktop {
		transform-origin: top;
	}
	.grow-down-desktop.animate,
	.grow-up-desktop.animate {
		transform: scaleY(1);
	}
	.stagger-desktop-1 {
		transition-delay: 300ms;
	}
	.stagger-desktop-2 {
		transition-delay: 600ms;
	}
	.stagger-desktop-3 {
		transition-delay: 900ms;
	}
	.stagger-desktop-4 {
		transition-delay: 1200ms;
	}
}
@media screen and (max-width: 767px) {
	.fade-down-mobile,
	.fade-up-mobile {
		opacity: 0;
		transition: 1500ms all ease-in-out;
	}
	.fade-up-mobile {
		transform: translateY(50px);
	}
	.fade-down-mobile {
		transform: translateY(-50px);
	}
	.fade-down-mobile.animate,
	.fade-up-mobile.animate {
		opacity: 1;
		transform: translateY(0);
	}
	.grow-left-mobile,
	.grow-right-mobile {
		transform: scaleX(0);
		transition: 1200ms all ease-in-out;
	}
	.grow-left-mobile {
		transform-origin: right;
	}
	.grow-right-mobile {
		transform-origin: left;
	}
	.grow-left-mobile.animate,
	.grow-right-mobile.animate {
		transform: scaleX(1);
	}
	.grow-down-mobile,
	.grow-up-mobile {
		transform: scaleY(0);
		transform-origin: top;
		transition: 1200ms all ease-in-out;
	}
	.grow-up-mobile {
		transform-origin: bottom;
	}
	.grow-down-mobile {
		transform-origin: top;
	}
	.grow-down-mobile.animate,
	.grow-up-mobile.animate {
		transform: scaleY(1);
	}
	.fade-mobile {
		opacity: 0;
		transition: 1000ms all ease-in-out;
	}
	.fade-mobile.animate {
		opacity: 1;
	}
}


/* ================================================================
   Logo Pop-In Animation (Intersection Observer)
   Verwendung:  class="logo-pop-in logo-stagger-1"
                class="logo-pop-in logo-stagger-2"  usw.
   ================================================================ */

/* --- Ausgangszustand: unsichtbar, minimal verkleinert ----------- */
.logo-pop-in {
	opacity: 0;
	-webkit-transform: scale(0.6);
	        transform: scale(0.6);
	will-change: transform, opacity;
}

/* --- Aktiver Zustand: Klasse .animate wird per JS gesetzt ------- */
.logo-pop-in.animate {
	-webkit-animation: logo-pop-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
	        animation: logo-pop-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* --- Keyframes: klein → leicht überschwingen → Normalgröße ------ */
@-webkit-keyframes logo-pop-in {
	0% {
		opacity: 0;
		-webkit-transform: scale(0.6);
		        transform: scale(0.6);
	}
	60% {
		opacity: 1;
		-webkit-transform: scale(1.12);
		        transform: scale(1.12);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		        transform: scale(1);
	}
}
@keyframes logo-pop-in {
	0% {
		opacity: 0;
		-webkit-transform: scale(0.6);
		        transform: scale(0.6);
	}
	60% {
		opacity: 1;
		-webkit-transform: scale(1.12);
		        transform: scale(1.12);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		        transform: scale(1);
	}
}

/* --- Verzögerungen für die Links-nach-rechts-Staffelung --------- */
/*                                                                  */
/*  WICHTIG: Die Selektoren müssen .animate einschließen!           */
/*  Die animation-Kurzschreibweise in .logo-pop-in.animate setzt    */
/*  implizit animation-delay: 0s. Ohne .animate im Selektor         */
/*  würde die höhere Spezifität (0,2,0) von .logo-pop-in.animate    */
/*  die Stagger-Delays (Spezifität 0,1,0) überschreiben.            */
/*  Mit .animate im Selektor erreichen die Stagger-Klassen          */
/*  dieselbe Spezifität (0,2,0) und stehen weiter unten im          */
/*  Stylesheet – dadurch gewinnen sie die Kaskade.                  */
/*                                                                  */
.logo-stagger-1.animate { -webkit-animation-delay:  0ms;  animation-delay:  0ms; }
.logo-stagger-2.animate { -webkit-animation-delay: 150ms; animation-delay: 150ms; }
.logo-stagger-3.animate { -webkit-animation-delay: 300ms; animation-delay: 300ms; }
.logo-stagger-4.animate { -webkit-animation-delay: 450ms; animation-delay: 450ms; }
.logo-stagger-5.animate { -webkit-animation-delay: 600ms; animation-delay: 600ms; }
.logo-stagger-6.animate { -webkit-animation-delay: 750ms; animation-delay: 750ms; }
.logo-stagger-7.animate { -webkit-animation-delay: 900ms; animation-delay: 900ms; }
.logo-stagger-8.animate { -webkit-animation-delay:1050ms; animation-delay:1050ms; }

/* ================================================================
   Section Reveal — beim Scrollen einblenden
   Klasse wird per JS (initSectionReveal) dynamisch gesetzt
   ================================================================ */
.section-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.section-reveal.animate {
  opacity: 1;
  transform: translateY(0);
}

/* ================================================================
   Lazy-Image Fade-In
   Klassen werden per JS (initLazyImages) dynamisch gesetzt
   ================================================================ */
.lazy-img {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.lazy-img.lazy-loaded {
  opacity: 1;
}