/*  *****************************************************  HEROTITLE SMALL-MEDIUM SCREENS     ***************************** */
@media screen and (max-width:1179px) {
.jump-s {
  display:block;
  padding-left:0.5rem;
  padding-right:0.5rem;
}
.jump-l {
  display:none;
} 
}
@media screen and (min-width:1180px) {
.jump-s {
  display:none;
}                 
.jump-l {
  display:block;
} 
}

/*  *****************************************************  SMALL SCREENS     ***************************** */
@media screen and (max-width:29.99rem) {
.dropping_banknote {
  display:none;
}
.zentrieren_pages1{
/*  margin-top:200px;  */
  height: 60vh;
  display:flex;
	flex-flow: row nowrap;
	justify-content: center; 
	align-items: center; 
  position: relative;
}
.zentrieren_pages2{
  margin-top:50px;
  height:45vh;
  display:flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items:center;
  position: relative;
}
.design11 .zentrieren_pages2{
  margin-top:0px;
  height:40vh;
}
.zentrieren_pages1 img, .zentrieren_pages2 img {
  height:240px;
  width:auto;
  object-fit:contain;
}
.zentrieren_pages3 {
  margin-left:50%;   
  height: 35vh;
  width:100%;
  margin-top:1rem;
}
.zentrieren_pages3 img {
  height:22vh;
  width:auto;
}
}

/*  *****************************************************  MEDIUM-LARGE SCREENS     ***************************** */
@media screen and (min-width:30rem) {

/* .mod_article.zentrieren_pages1, .mod_article.zentrieren_pages2{
  max-width:100%;
  margin-top:50px;
  height: 60vh;
  display:flex;
	flex-flow: row nowrap;
	justify-content: center; 
	align-items: center; 
  position: relative;
} */
.stable_banknote {
  display:none;
}

.zentrieren_pages1 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
  width:100%;
}
.zentrieren_pages1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: calc(120px + 30vw);
    max-height: 700px;
}
.zentrieren_pages2 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
  width:100%;
  margin-top:1rem;
}
.kunden11 .zentrieren_pages2, .spezialangebot11 .zentrieren_pages2 {
  height:30px;
}
.zentrieren_pages1 img, .zentrieren_pages2 img {
  width:450px;
  height:auto;
  margin-top:2rem;
  object-fit:contain;
}
.kunden11 .zentrieren_pages1 img, .kunden11 .zentrieren_pages2 img {
  height:300px;
  width:auto;
  margin-top:5rem;
  object-fit:contain;
}
.zentrieren_pages3 {
  margin-left:33%;   
  height: 48vh;
  width:100%;
  margin-top:6rem;
}
.zentrieren_pages3 img {
  height:20vh;
  width:auto;
}
.animate__animated.animate__hinge {
    --animate-duration: 2s;
}
}
@media screen and (max-width:799px) {
.order2 {
	order:2;
}
.zentrieren_pages1 {
	height:40vh;
}
.kunden11 .zentrieren_pages1, .spezialangebot11 .zentrieren_pages1 {
	height:250px;
}
}
/*  *****************************************************  HEROTITLE SMALL-MEDIUM SCREENS     ***************************** */
@media screen and (max-width:1179px) {
.herotitle h1 {
  font-family:BebasNeue,Roboto,Sans-Serif;
  animation-name: title-s;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}
.herotitle h1 {
	font-size: 2.0rem;
	color: white;
  margin:0;
}
/*
.herotitle h2 {
  font-family:BebasNeue,Roboto,Sans-Serif;
  animation-name: title2-s;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}
*/
.herotitle h2 {
	font-size: 2rem;
	color: yellow;

}
.herotitle2 h1 {
  font-family:BebasNeue,Roboto,Sans-Serif;
  animation-name: title-s2;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}
.herotitle2 h1 {
	font-size: 2.0rem;
  padding-top:6vh;
	color: white;
  margin:0;
}
/*
.design11 .herotitle2 h1 {
  padding-top:16vh;
}
*/
/*
.herotitle2 h2 {
  font-family:BebasNeue,Roboto,Sans-Serif;
  animation-name: title2-s;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
} */
.herotitle2 h2 {
	font-size: 2rem;

}
}
@media screen and (max-width:29.999rem){
  .design11 .herotitle2 h1 {
  padding-top:6vh;
}
}
@keyframes title2-s {
  0% {font-size:2rem;}
  20% {font-size:2rem;}
  100% {font-size:2.8rem;}
}
@keyframes title-s {
  0% {font-size:2rem; line-height:3rem;}
  20% {font-size:2rem; line-height:3rem;}
  100% {font-size:6rem; line-height:3rem;}
}
@keyframes title-s2 {
  0% {font-size:2rem; line-height:3rem; padding-top:6vh;}
  20% {font-size:2rem; line-height:3rem; padding-top:6vh;}
  100% {font-size:4.4rem; line-height:3rem; padding-top:6vh;}
}
@media screen and (max-width:1179px) {
.herotitle h1 {
	font-size: 6rem;
	line-height:3rem;
}
.herotitle2 h1 {
  font-family:BebasNeue,Roboto,Sans-Serif;
	font-size: 4.4rem;
	line-height:3rem;
	text-shadow: 2px 2px black;
  padding-top:6vh;
	color: white;
  margin:0;
}
}

@media screen and (max-width:1179px) {
.herotitle h2 {
  font-family:BebasNeue,Roboto,Sans-Serif;
	font-size: 2.8rem;
}
.herotitle2 h2 {
  font-family:BebasNeue,Roboto,Sans-Serif;
	font-size: 2.8rem;
}

.aside_pages_cheetah {
  max-width:200%;
  height:45vh;
  padding-top:8px;
  position: absolute;
  left:0;
  display:flex;
	flex-flow: row nowrap;
	justify-content: flex-start; 
	align-items: center; 
	z-index:5;
}
.aside_pages_cheetah img {
  height:110px;
  width:auto;
  margin-left:-250px;
  margin-bottom:-80px;
  animation-name: cheetah-s;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
}}

@keyframes cheetah-s {
  0% {margin-left:-250px; margin-bottom:-80px;}
  26% {margin-bottom:60px;}
  45% {margin-bottom:-50px;}
  62% {margin-bottom:60px;}
  82%  {margin-bottom:-60px;}
  100% {margin-left:110vw; margin-bottom:-60px;}
}
@media screen and (max-width:1179px) {
.aside_pages_cheetah img {
  margin-left:calc(100vw + 250px);
  margin-bottom:-60px;
}}


/*  *****************************************************  HEROTITLE LARGE SCREENS     ***************************** */

@media screen and (min-width:1180px) {
.herotitle h1 {
  font-family:BebasNeue,Roboto,Sans-Serif;
  animation-name: title11;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}
.herotitle h1 {
	font-size: 2.0rem;
	line-height: 2.3rem;
	color: white;

}
h1.herotitle2  {
  font-family:BebasNeue,Roboto,Sans-Serif;
  animation-name: title21;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}
h1.herotitle2  {
	font-size: 2.0rem;
	line-height: 2.3rem;
	color: white;
}
}
@keyframes title11 {
  0% {font-size:2rem; line-height:2.3rem;}
  20% {font-size:2rem; line-height:2.3rem;}
  100% {font-size:8.6rem; line-height:9.6rem;}
}
@keyframes title21 {
  0% {font-size:2rem; line-height:2.3rem;}
  20% {font-size:2rem; line-height:2.3rem;}
  100% {font-size:5.6rem; line-height:6.0rem;}
}
@media screen and (min-width:1180px) {
.herotitle h1 {
	font-size: 8.6rem;
	line-height: 9.6rem;
}

h1.herotitle2  {
	font-size: 5.6rem;
	line-height: 6.0rem;
	color: white;
}
}

@media screen and (min-width:1180px) {
.herotitle2 h2 {
  font-family:BebasNeue,Roboto,Sans-Serif;
  animation-name: title22;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}
.herotitle2 h2 {
  font-family:BebasNeue,Roboto,Sans-Serif;
	font-size: 2rem;
	line-height: 2.3rem;
	color: white;
}
}

@keyframes title22 {
  0% {font-size:2rem; line-height:2.3rem;}
  20% {font-size:2rem; line-height:2.3rem;}
  100% {font-size:3.0rem; line-height:3.2rem;}
} 
@media screen and (min-width:1180px) {
.herotitle2 h2 {
  font-family:BebasNeue,Roboto,Sans-Serif;
	font-size: 3.0rem;
	line-height: 3.2rem;
}

.aside_pages_cheetah {
  max-width:100%;
  height:45vh;
  padding-top:8px;
  position: absolute;
  left:0;
  display:flex;
	flex-flow: row nowrap;
	justify-content: flex-start; 
	align-items: center; 
}
.aside_pages_cheetah img {
  height:100px;
  width:auto;
  margin-left:-300px;
  margin-bottom:-150px;
  animation-name: cheetah;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
}}

@keyframes cheetah {
  0% {margin-left:-250px; margin-bottom:-150px;}
  26% {margin-bottom:130px;}
  45% {margin-bottom:-120px;}
  62% {margin-bottom:150px;}
  82%  {margin-bottom:-150px;}
  100% {margin-left:110vw; margin-bottom:-170px;}
}
@media screen and (min-width:1180px) {
.aside_pages_cheetah img {
  margin-left:calc(100vw + 250px);
  margin-bottom:-200px;
}
}


/*  *****************************************************  ALL SCREENS     ***************************** */
.home11 p, .test11 p, .angebot11 p, .web11 p, .design11 p, .kunden11 p, .spezialangebot11 p, .datenschutz11 p, .home11 li, .test11 li, .angebot11 li, .web11 li, .design11 li, .kunden11 li, .spezialangebot11 li, .datenschutz11 li {
  color:white;
}
.home11 h2, .web11 h2, .angebot11 h2, .design11 h2, .fairtrade11 h2, .kunde11 h2, .spezialangebot11 h2, .datenschutz11 h2 {
    font-family:BebasNeue,Roboto,Sans-Serif;
}
.zentrieren{
  width:100%;
  height:100vh;
  display:flex;
	flex-flow: row nowrap;
	justify-content: center; 
/*  top: 50vh; */
	align-items: center; 
  position: relative;
}

.mod_article.aside_pages{
  max-width:100%;
  padding-top:10px;
  position: absolute;
  right:0;
  display:flex;
	flex-flow: row nowrap;
	justify-content: flex-end; 
	align-items: center; 
}
.aside_pages img {
  max-height:75vh;
  width:auto;
  margin-right:-300px;
  animation-name: right-in;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}
@keyframes right-in {
  0% {margin-right:-300px; height:20vh;}
  20% {margin-right:-300px;}
  100% {margin-right:0px; height:88vh;}
}
.mod_article.aside_pages2{
  max-width:100%;
  padding-top:10px;
  position: absolute;
  right:0;
  display:flex;
	flex-flow: row nowrap;
	justify-content: flex-end; 
	align-items: center;
	z-index:-1;
}
.aside_pages2 img {
  max-height:88vh;
  width:auto;
  opacity:0;
  animation-name: fade-in;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}
@keyframes fade-in {
  0% {opacity:0;}
  20% {opacity:0;}
  100% {opacity:1;}
}
.aside_pages2 img {
  opacity:1;
}
.mod_article.aside_pages_left{
  max-width:100%;
  max-height:250vh;
  padding-top:10px;
  position: absolute;
  left:0;
  display:flex;
	flex-flow: row nowrap;
	justify-content: flex-start; 
	align-items: flex-end;
	z-index:-1;
}
.aside_pages_left img {
  max-height:110vh;
  top:110vh;
  position:relative;
  width:auto;
  animation-name: bottom-up;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}
@keyframes bottom-up {
  0% {top:110vh; height:110vh;}
  20% {top:105vh;}
  100% {top:0vh; height:110vh;}
}
.aside_pages_left img {
  top:0vh;
  max-height:110vh;
}
#fade_image {
  transition: opacity 0.3s ease; /* Smooth transition for fade effect */
}
.aside_pages img {
  margin-right:0;
  margin-top: 2rem;
}


/*
.home1 .snake {
	display:block;
	width:300px;
	height:auto;
  margin-left:100px;
  margin-top:300px;
}
*/
body {
      margin: 0;
      height: 100vh; /* Genügend Platz zum Scrollen */
      background:#020202;
    }
.home11 .scalingImageBox {
position: fixed;
  display: flex;
  justify-content: center;
  z-index: 10;
  top: 50px;
  overflow: visible;
}

.test11 .scalingImageBox {
position: absolute;
  display: flex;
  justify-content: center;
  z-index: 10;
  top: 64vh;
  overflow: visible;
}
@media screen and (max-width:799px) {
#scalingImage {
      position: fixed;
      width: 210px; /* Startbreite */
      transition: width 0.1s ease, top 0.1s ease; /* Sanfter Übergang */
    }
}
@media screen and (min-width:800px) {
#scalingImage {
      position: fixed;
      width: 400px; /* Startbreite */
      transition: width 0.07s ease, top 0.1s ease; /* Sanfter Übergang */
    }}
    /*
.scalingImage img {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 300px; /* Startbreite */
 /*     transition: width 0.1s ease; /* Sanfter Übergang */
 /*   }
*/
.moveBox {
  position: relative;
  margin-top: 50px;
  z-index:20;
  background: linear-gradient(rgba(4,4,4,0.000004) 0%, rgba(4,4,4,0.1) 1%, rgba(4,4,4,0.5) 8%, rgba(4,4,4,0.7) 100%);
}
.moveBox.home11 {
  padding-top:100px;
}
.moveBox p, .moveBox h4, .moveBox h5 {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.moveBox h3 {
  padding-top: 50px;
}
.moveBox p {
  color:white;
}