/* CSS Document */ 

:root {
  --prim-color: #5b085a; 
  --sec-color: #D9CBDF; 
  --sec2-color: transparent; 
  --sec3-color: #8d0449; 
  --sec4-color: #d70000; 
  --sec5-color: #fff;  
  --sec6-color: #F9F0F6;  
  --sec7-color: #E6E6E6;  

}

* {
  margin: 0;
  box-sizing: border-box;
}

body {
	overflow-y: hidden;
}



a {
  color: var(--prim-color);
  text-decoration: none;
}



img {
  height: 100%;
}


.gem-volk-stocontain h3 {
  font-size: 3rem;
  font-size: clamp(16px, 3rem, 36px);
    font-style: normal;
    font-weight: 400;
    margin-bottom: 2rem;
    padding-right: 2.5rem;
    max-width: 90%;

}

.h2-bus{
     font-size: 3.2rem;
  line-height: 1.1;
}

.gem-volk-body {
  margin: 0;
  display: flex;
  overflow-y: clip;
background: linear-gradient(180deg, var(--sec6-color) 46rem, var(--sec7-color) 56rem);
width: calc(600rem + 935rem + 1185rem + 1185rem + 1035rem + 214rem);
}
/* Add your styles here */
.gem-volk-bg img, .gem-volk-fg img {
  height: 100%;
max-width: initial;
  background-color: var(--sec2-color); /* Updated to use --sec2-color */
}
.gem-volk-bg, .gem-volk-fg {
  height: 100rem;
  position: absolute;
  top: 0;
    pointer-events: none;
opacity: 0.3;
}
.gem-volk-fg {
	z-index: 20;
}

.gem-volk-butt span {
  font-size: 2.5rem;
}

#gem-volk-st1 {
  width: 600rem;
  height: 100rem;
  
}
#gem-volk-st2 {
  width: 935rem;
  height: 100rem;
}
#gem-volk-st3 {
  width: 1185rem;
  height: 100rem;
}

#gem-volk-st4 {
  width: 1185rem;
height: 100rem;

}

#gem-volk-st5 {
  width: 1035rem;
height: 100rem;
}


#gem-volk-diartzt {
  position: absolute;
  margin-left: 140rem;
  margin-top: 29rem;
  height: 46.2rem;
    left: auto;
    right: auto;
    top: 0;
    bottom: 0;
}
#gem-volk-diartzt img {
  height: 100%;
}
#walk-head {
  width: 114rem;
  height: 100rem;
display: flex;
flex-direction: column;
  position: relative;
  flex-wrap: wrap;
  overflow-x: clip;
    background-color: var(--sec-color);
}
.material-symbols-outlined {
  color: #005894 !important;
  font-size: clamp(4rem, 4vw, 6rem);
  position: absolute;
  background-color: white;
  margin: 0.5rem;
}


#gemVertScrollc {
	  overflow-x: scroll;
    overflow-y: hidden;

}

.gem-volk-stocontain {
	position: relative;
  overflow: clip;
}

.walk-caracter {
  height: 60rem;
  width: 30rem;
  position: fixed;
  margin-left: 0rem;
  margin-right: auto;
  z-index: 10;
  left: -7rem;
  right: 0;
  top: 37rem;
  bottom: 0;
  pointer-events: none;
}

#gem-volk-lea {
  /* Set the initial height or any other styles you need */
		opacity: 1;
  transition: opacity 0.5s ease, transform 0.5s, visibility 0.5s ease;
transform-origin: top;
	display: block;
	visibility: collapse;
	z-index: 11;


}

#gem-volk-nina {
	  /* Set the initial height or any other styles you need */
	opacity: 0;
	
  transition: opacity 0.5s ease, transform 0.5s, visibility 0.5s ease, transform 0.5s ease;
transform-origin: top;

	display: block;
	visibility: collapse;

}

.lottie-container {
	height: 100%;
	width: 100%;
	margin-left: 15%;
}


#gem-nina-text10 {
	  margin-left: 12rem;
  margin-top: 8.4rem;
}

#gem-volk-fakt-5 {
     top:0;
    left: 211rem;
    z-index: 55;
    position: absolute;
    height: 100%;
    background-color: var(--prim-color);
    padding: 8rem;
  color: #fff;
    display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 250px;
  width: 66rem;  
}

#ex5b2 {
position: relative;
color: #fff;    
}

#gem-volk-mig-ill {
 z-index: 1;
position: absolute;
opacity: 1;
	transition: opacity 0.5s ease, transform 0.5s;
	top: 0;
}

#tbox1954 {
	  margin-left: 112rem;
	animation: licht 4s ease infinite forwards;
    width: 40rem;

	
}

@keyframes licht {
	0% {
			text-shadow: #FFF 1px 0 1px;

	}
50% {
			text-shadow: #FFF 1px 0 5px;

	}
	100% {
		text-shadow: #FFF 1px 0 1px;

	}
}

#ex3b2 {
    position: relative;
}
	
	#gem-volk-digi_uhr {
    position: absolute;
  margin-left: 369rem;
  margin-top: 10rem;
  height: 8rem;
    left: auto;
    right: auto;
    top: 0;
    bottom: 0;
}

#gem-volk-fakt-6 {
    z-index: 55;
    background-color: var(--prim-color);
    padding: 8rem;
  color: #fff;
    display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 250px;
  width: 66rem;  
    left: 394rem;
}

gem-volk-overhead_img{
  display:flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
}


#tbox1956 {
margin-left: 161rem;
    width: 40rem;
}


#ex4b2 {
    position: relative;
    color: #fff;
}


#gem-nina-text13 {
    margin-left:117rem;
    margin-top:55rem;
}

#gem-nina-text14 {
  z-index: 8;
    position: absolute;
    background-color: var(--sec6-color);
    padding: 1.5rem;
    display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 250px;
	width: 40rem;
    left:554rem;
}

#gem-nina-text15 {
    margin-top:4rem;
    margin-left: 615rem;
}

#gem-volk-fakt-7 {
 margin-top: 4rem;
  margin-left: 689rem;
}

.gem-volk-erkrank_St2 {
      margin-top:30rem;
    margin-left:475rem;
    column-gap: 30rem;
    display: flex;
gap: 2rem;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  flex-shrink: 0;
  position: relative;
    z-index:3;
width: fit-content;
}

#lea-insulin {
    z-index:60;
}

#lea-smartphone {
    z-index: 60;
}

#gem-nina-text17 {
    margin-left: 620rem;
    margin-top: 8rem;
}

#gem-volk-helmut {
    	  /* Set the initial height or any other styles you need */
	opacity: 1;

  transition: opacity 0.5s ease, transform 0.5s, visibility 0.5s ease;
transform-origin: top;

	display: block;
visibility: collapse;
}

.gem-volk-navmain {
	display: flex;
  margin-left: 3rem;
  margin-bottom: 1rem;
}

.walk-head-container {
    display: flex;
max-width: 100rem;
align-items: flex-start;
align-content: flex-start;
gap: 6rem;
flex-shrink: 0;
flex-wrap: wrap;
    margin-left:5rem;
  margin-top: 5rem;
flex-direction:column;
     max-height: 20rem;
 z-index: 2;
}


#ex11b {
    position: relative;
    
}

.gem-volk-spalte {
  display: flex;
  flex-direction: row;
  gap: 3rem;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  flex-shrink: 0;
  position: relative;
  min-width: 250px;
  width: 42rem;
  font-size: 2rem;
}

.gem-volk-people {
position: absolute;
  left: 3rem;
  height: 100%;
  width: 140rem;
  top: 0;
  overflow: hidden;
}

.gem-volk-people img {
	margin-top: 2.5rem;
	pointer-events: none; width: 100%; height: 100%;
}



#ex10b3 {
  margin-left: 188rem;
  margin-top: 11rem;
}


#gem-helmut-text3 {
margin-left: 106rem;
  margin-top: 5rem;
}

#gem-helmut-text6 {
	margin-left: 544rem;
  margin-top: 5rem;
}

#gem-helmut-text {
	margin-left: 15rem;
	margin-top: 6rem;
}

#gem-helmut-text2 {
	margin-top: 5rem;
	margin-left: 62rem;
}

#gem-helmut-text4 {
	margin-left: 260rem;
	margin-top: 5rem;
}

#op-machine {
	width: 21rem;
  position: absolute;
  left: 173rem;
  top: 27rem;
  z-index: 1;
}

#op-men {
left: 229rem;
  width: 20rem;
  position: absolute;
  top: 24rem;
  z-index: 1;
}

#op-woman {
width: 20rem;
  position: absolute;
  left: 326rem;
  top: 24rem;
  z-index: 1;
}

#daughter-maria {
width: 14rem;
  position: absolute;
  left: 353rem;
  top: 24rem;
  z-index: 1;
}

#doc {
width: 35rem;
  position: absolute;
  left: 589.2rem;
  top: 36rem;
  z-index: 1;
}

#doc-desk {
width: 35rem;
  position: absolute;
  left: 589.2rem;
  top: 34rem;
  z-index: 1;
}

#chat {
width: 22.5rem;
  position: absolute;
  left: 593rem;
  top: -2rem;
  z-index: 1;
}

#docu {
width: 20rem;
  position: absolute;
  left: 207rem;
  top: 24rem;
  z-index: 1;
}

#gem-helmut-text7 {
margin-left: 700rem;
  margin-top: 49rem;
}

#gem-helmut-text8 {
margin-left: 834rem;
  margin-top: 3rem;
}

#gem-helmut-text5 {
margin-left: 413rem;
  margin-top: 5rem;
}

#gem-volk-fakt-8 {
margin-left: 316rem;
  border-bottom: none;
  margin-top: 4rem;
}

#gem-volk-fakt-9 {
margin-left: 358rem;
  margin-top: 1rem;
}

#gem-volk-fakt-10 {
	margin-left: 471rem;
  margin-top: 1rem;
}

#ex9b3 {
  margin-left: 544rem;
  margin-top: 47rem;
}

#headLea {
top: 61rem;
left: 14rem;
	opacity: 1;
	
  transition: opacity 0.5s ease, transform 0.5s, visibility 0.5s ease;
}

.gem-volk-butt-pers {
	font-size: 1rem;
  border-radius: 1.5rem;
  background-color: #D9E0EC;
  color: black;
  border: none;
  padding: 1.4rem;
  transform: scale(1);
  cursor: pointer;
  text-align: left;
}


#headHelmut {
	top: 42rem;
  left: 72rem;
	opacity: 1;
	
  transition: opacity 0.5s ease, transform 0.5s, visibility 0.5s ease;
}

#headNina {
	top: 52rem;
  left: 87rem;
	opacity: 1;
	
  transition: opacity 0.5s ease, transform 0.5s, visibility 0.5s ease;
}

.walk-head-box {
        position: absolute;
    width: 40rem;
  border-radius: 1.5625rem;
border-bottom: 5px solid var(--prim-color); 
background: var(--prim-color); /* Updated to use --prim-color */
padding: 5rem;
    opacity: 1;
	left: 50%;
  transform: translate(-50%, -0%);
	margin-top: 28rem;
  z-index: 1;
    
}

.walk-head-over {
    width: 100vw;
    margin-left: auto;
  margin-right: auto;
	position: relative;
}

#helm-onko-triger {
	margin-left: 33rem;
}

#helmut_home {
width: 55rem;
  position: absolute;
  left: 407rem;
  top: 35rem;
  z-index: 21;
}

#person_wheelchair_call {
position: absolute;
  left: 21rem;
  height: 54rem;
width: 76rem;
  top: 28rem;
  z-index: 15;
 
}

#person_call {
position: absolute;
  left: 101rem;
  height: 49rem;
  top: 26rem;
width: 24rem;
}

#person_wave {
position: absolute;
  left: 121rem;
    height: 48rem;
    top: 27rem;
    width: 23rem;
}

#gem-nina-text17a {
margin-left: 572rem;
  margin-top: 4rem;
}

#gem-volk-joseph {
z-index: 2;
  left: -21rem;
		opacity: 1;
  transition: opacity 0.5s ease, transform 0.5s, visibility 0.5s ease;
	display: block;
visibility: collapse;
}

#st4-demenz-fg {
left: 113rem;
  top: 0;
  position: absolute;
  z-index: 10;
}

#volk-k-st4-demenz {
	left: 104rem;
  top: 24rem;
  position: absolute;
  width: 72rem;
  z-index: 22;
}

#lupe {
left: 406rem;
  top: 18rem;
  position: absolute;
  width: 64rem;
  z-index: 1;
}

#volk-k-st4-freude-net {
left: 231rem;
  top: 34rem;
  position: absolute;
  width: 68rem;
  z-index: 11;
}

#volk-k-st4-joseph-mob {
left: 825rem;
  top: 9rem;
  position: absolute;
  width: 68rem;
  z-index: 21;
}

#gem-volk-renate {
		opacity: 1;
	
  transition: opacity 0.5s ease, transform 0.5s, visibility 0.5s ease;
transform-origin: top;

	display: block;
visibility: collapse;
}

#volk-k-st4-uhr {
left: 384rem;
  top: 72rem;
  position: absolute;
  width: 53rem;
  z-index: 10;
}



#volk-k-st4-blitzicon {
left: 168rem;
  top: 46rem;
  position: absolute;
  z-index: 21;
	padding: 3rem;
}

#volk-k-st4-apa-akt {
left: 766rem;
  top: 5rem;
  position: absolute;
  width: 28rem;
  z-index: 1;
}

#headRenate {
	top: 51rem;
  left: 114rem;
	opacity: 1;
	
  transition: opacity 0.5s ease, transform 0.5s, visibility 0.5s ease;

}

#gem-renate-eRez {
margin-left: 853.5rem;
  margin-top: 45rem;
}

#gem-volk-fakt-140 {
margin-left: 904rem;
  margin-top: 2rem;
}


#ex10b6 {
	left: 20rem;
  top: 40rem;
}

#leawalk {
		  /* Set the initial height or any other styles you need */
	opacity: 1;
	
  transition: opacity 0.5s ease, transform 0.5s, visibility 0.5s ease, transform 0.5s ease;
transform-origin: top;

	display: block;

}

#ex11b4 {
	left: 162rem;
  top: 52rem;
}

#gem-vincent-text1 {
	left: 6rem;
  top: 2rem;
  width: 42rem;
}

#gem-vincent-text2 {
	left: 80rem;
	top: 2rem;
}

#gem-vincent-text3 {
	left: 172rem;
  width: 39rem;
  top: 2rem;
}

#gem-vincent-text4 {
	left: 247rem;
	top: 2rem;
}

#gem-vincent-text5 {
	left: 327rem;
  top: 2rem;
  width: 41rem;
}

#gem-vincent-text6 {
		left: 391rem;
  top: 2rem;
  width: 51rem;
}

#gem-vincent-text7 {
	left: 519rem;
  top: 2rem;
  width: 44rem;
}

#gem-vincent-text8 {
	left: 640rem;
	top: 2rem;
}

#gem-vincent-text9 {
	left: 746rem;
  width: 42rem;
  top: 2rem;
}


#gem-vincent-text10 {
	left: 822rem;
	top: 2rem;
}

#gem-volk-fakt-20 {
	left: 50rem;
  top: 50rem;
}

#gem-volk-fakt-19 {
	left: 115rem;
  top: 57rem;
}

#gem-volk-fakt-18 {
	left: 364rem;
  top: 53rem;
}

#gem-volk-fakt-17 {
	left: 448rem;
  top: 2rem;
}

#gem-volk-fakt-22 {
	left: 868rem;
	top: 2rem;
}

#ex9b6 {
	left: 295rem;
  top: 49rem;
    max-width: 29rem;
}

#ex9b7 {
left: 371rem;
  top: 49rem;
}



#headVincent {
	top: 42rem;
  left: 101rem;
	opacity: 1;
	
  transition: opacity 0.5s ease, transform 0.5s, visibility 0.5s ease;
	
}

#vin-chat1 {
left: 136rem;
  top: 15rem;
  padding: 1rem;
  font-size: 1.5rem !important;
  width: 24rem;
    height: 12rem;
  min-width: 0;
  background-color: var(--prim-color); /* Updated to use --prim-color */
  border-bottom: 0;
  color: white;

}

#vin-chat2 {
    right: 11.3rem;
    top: 19rem;
    padding: 1rem;
    font-size: 2rem;
    width: 29rem;
    min-width: 0;
    background-color: #D3DDEA;
    border-bottom: 0;
    color: #000E52;
}

#ex9b10 {
left: 595rem;
  top: 28rem;
}

#gem-volk-vincent {
		  /* Set the initial height or any other styles you need */
	opacity: 1;
	
  transition: opacity 0.5s ease, transform 0.5s, visibility 0.5s ease, transform 0.5s ease;
transform-origin: top;

	display: block;
	visibility: collapse;
}



.gem-laser-scan {
	animation: moveUpDown 2s infinite alternate;
}

   @keyframes moveUpDown {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(15%); /* Adjust this value for desired vertical movement */
        }
    }
#gem-miguel-text {
	margin-top: 7rem;	
margin-left: 8rem;}

#gem-miguel-text3 {
		margin-top: 7rem;	
margin-left:  83rem;}


#gem-miguel-text4 {
		margin-top: 7rem;	
margin-left:  250rem;}

#gem-miguel-text5 {
	
		margin-top: 7rem;	
margin-left:  335rem;
}



#gem-miguel-text6 {
	
		margin-top: 7rem;	
margin-left:  430rem;
}

#gem-miguel-text7 {
	margin-top: 7rem;	
margin-left:  622rem;
	
}

#gem-miguel-text8 {
		margin-top: 7rem;	
margin-left:  768rem;
}

#gem-miguel-text17 {
		margin-top: 7rem;	
margin-left:  823rem;
}

#gem-volk-fakt-12 {
	
    margin-top: 6rem;
  margin-left: 570rem;
    
}

#gem-volk-fakt-11 {
    margin-top: 45rem;
  margin-left: 380rem;
    }


#gem-volk-fakt-16 {
	
    margin-top: 6rem;
  margin-left: 170rem;
    
}
#gem-volk-fakt-21 {
	  margin-top: 6rem;
  margin-left: 880rem;
    
}


#headMiguel {
	margin-top: 36rem; margin-left: 38rem
}



.shake-hori {
display: inline-block; /* Damit das span-Element transformierbar ist */
animation: shake-hori 10s ease 0s infinite normal none;
font-family: "Ebert";
}



/* Copy this code after the above code */
@keyframes shake-hori {
  0%,
  100% {
	transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70% {
	transform: translateX(-10px);
  }

  20%,
  40%,
  60% {
	transform: translateX(10px);
  }

  80% {
	transform: translateX(8px);
  }

  90% {
	transform: translateX(-8px);
  }
}

.fes-zeit-trenner {
  background-color: var(--prim-color);
  height: 100%;
  width: 100rem;
  z-index: 6;
  position: absolute;
  color: white;
  font-size: 6rem;
  padding: 7rem;
}


.fes-img-text {
  position: absolute;
  color: var(--sec5-color);
  font-size: 1.7rem !important;
  font-style: normal;
  font-weight: 400;
  max-width: 35rem;
    line-height: 2rem !important;
  z-index: 10;
  padding: 0.5rem;
  margin-left: -0.5rem;
}

.ebert-kap-headline {
    top: 10rem;
    left: 50rem;
    color: white;
}

.ebert-img-kapitel {
    position: absolute;
    width: auto;
    height: 69.8rem;
  z-index: 10;
  bottom: 0;
}

    
.fes-zeit-trenner_small {
    position: relative;
  font-size: clamp(16px, 7.7rem, 90px);font-size: clamp(16px, 7.7rem, 90px);
  background-color: var(--prim-color);
    z-index: 10;
    padding: 1rem;
    padding: 1rem 1rem 0 1rem;
    
}

.fes-zeit-img {
  height: 100%;
  width: auto;
  z-index: 2;
  position: absolute;
 font-size: 6rem;
  padding: 8rem;
    
}

.fes-zeit-neg {
      top: 0;
      height: 100%;
      background-color: var(--prim-color) !important;
      color: var(--sec5-color) !important;
      z-index: 8;
}

.fes-jahr-img {
display: flex !important;
flex-direction: row !important;
position: relative;
}
#ex2b9 {
    position: relative;
}

#ex2b10 {
    position: relative;
}

#ex1b2 {
    position: relative;
}

.fes-zeit-linie {
    position: absolute;
    z-index: 8;
    top: 31rem;
    height: 24rem;
    width: 102%;
    background: var(--fes-linie, linear-gradient(90deg, #D9CADF 20.07%, #BA120F 32.18%, #BA120F 87.88%, #D9CADF 97.08%));
  background-size: 100% 9%;
  background-repeat: no-repeat;
  background-position: bottom;
    pointer-events: none;
  border-radius: 0rem 0 0 5rem;
  right: 0;

}

.fes-zeit-linie img {
  position: absolute;
  right: 0;
}


#ex2b11 {
    position: relative;
}

#ex1969 {
    position: relative;
}

 

#ex7 {
    color: #000;
}

#ex2009 {
    color:#fff;
    position: relative;
}



.fes-zeit-linie_st3 {
      position: absolute;
      z-index: 7;
    top: 29rem;
        left: 70rem;
    height: 25rem;
}

#ex2012 {
    position: relative;
}

#ex16 {
    color: #FFF;
}


#confeti {
  overflow-y: hidden;
  overflow-x: hidden;
  margin: 0;
  width: 100%;
  height: 100%;
}

.fes-zeit-trenner-nega button {
  color: white;
}