/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/css.css to edit this template
*/
/* 
    Created on : 05.11.2023, 20:08:05
    Author     : andreas
*/
*,
*:before,
*:after{
    padding: 0;
    margin: 0;
}

html {
  overflow: hidden;
  position: relative;
  z-index: -10;
}

body{
  margin: 0;
  padding: 0; 
  overflow-y: scroll;
  height: 100vh;
  width: 100%;
 scroll-snap-type: y mandatory; /* Vertikal Scrollen und Snap Points streng einhalten */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scroll-padding: 0;
  position: relative;  
  }  
  
@keyframes umformen {
  0%        {opacity: 0; width: var(--b1); height:  var(--h1); left: calc(50vw - (var(--b1) / 2)); top: calc(50vh - (var(--h1) / 2));}
  10%, 50%  {opacity: 1; width: var(--b1); height:  var(--h1); left: calc(50vw - (var(--b1) / 2)); top: calc(50vh - (var(--h1) / 2));}
  60%, 70%  {opacity: 1; width: var(--b1); height:  var(--h2); left: calc(50vw - (var(--b1) / 2)); top: calc(50vh - (var(--h2) / 2));}
  80%, 90%  {opacity: 1; width: var(--b2); height:  var(--h2); left: calc(50vw - (var(--b2) / 2)); top: calc(50vh - (var(--h2) / 2));}
  100%      {opacity: 0;}
}
  
  
@keyframes nachoben {
  0%        {opacity: 0; translate: 0px 0px;}
  10%, 50%  {opacity: 1; translate: 0px 0px;}
  65%, 75%  {opacity: 1; translate: 0px -54%;}
  75%, 85%  {opacity: 1; translate: 52% -52%;}
  100%      {opacity: 0; translate: 52% -52%;}
  }


@keyframes nachunten {
  0%       {opacity: 0; translate: 0px 0px;}
  10%, 50% {opacity: 1; translate: 0px 0px;}
  65%, 75% {opacity: 1; translate: 0 52%;}
  75%, 85% {opacity: 1; translate: -52% 52%;}
  100%     {opacity: 0; translate: -52% 52%;}
  }

@keyframes blender {
  0%       {opacity: 0;}
  10%, 90% {opacity: 1;}
  100%     {opacity: 0;}
  }  
  
@keyframes blenderslow {
  0%       {opacity: 0;}
  40%, 60% {opacity: 1;}
  100%     {opacity: 0;}
  }
   
  
  
  /*___________________________________________________________________________________________*/
  
 @media screen and (orientation: portrait){
      

section{
    height: 100%;
    width: 100%;
    padding: 25vh 8vw 5vh 3vw; 
    float:left;
    
    } 
    
#G1{
height: 100%;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
background-size: cover;
background-image: url("Diplomarbeit02V.jpg");
z-index: 1;
opacity: 0;
animation-name: blenderslow;
animation-duration: 7s;
animation-iteration-count: 1;
animation-delay: 2s;
}



 #part_1S{
    background: #000000;
     } 
     
#schwarz {
  --a: 1.5;
  --h1: calc(12.2641509433962vw * var(--a));
  --b1: calc(34.748427672956vw * var(--a));
  --h2: calc(18.8679245283019vw * var(--a));
  --b2: calc(20.3616352201258vw * var(--a));
  position: fixed;
  background-color: #555555;
  animation-name: umformen;
  animation-duration: 10s;
  animation-iteration-count: 1;
  z-index: 5;
  opacity: 0;
}

#wie {
  --a: 1.5;
  --auf: calc(-1 * 3,30188679245283vw * var(--a));
  --seitlich: calc(7,23270440251572vw * var(--a));
    
  position: fixed;
  background-image: url("Wie.png");
  background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
  background-size: cover;
  z-index: 10;
  width: calc(14.2295597vw * var(--a));
  height: calc(5.42452830188679vw * var(--a));
  animation-name: nachoben;
  animation-duration: 10s;
  animation-iteration-count: 1;
  left: calc(50vw - (34.748427672956vw * var(--a)) / 2 + 2.51572327044025vw * var(--a));
  top: calc(50vh - (12.2641509433962vw * var(--a)) / 2 + 2.51572327044025vw * var(--a));
  opacity: 0;
  } 
  
#ser {
  --a: 1.5;
  --auf: calc(3,30188679245283vw * var(--a));
  --seitlich: calc(-1 * 7,23270440251572vw * var(--a));
    
  position: fixed;
  background-image: url("ser.png");
  background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
  background-size: cover;
  z-index: 20;
  width: calc(14.0723270440252vw * var(--a));
  height: calc(5.73899371069182vw * var(--a));
  animation-name: nachunten;
  animation-duration: 10s;
  animation-iteration-count: 1;
  left: calc(50vw - (34.748427672956vw * var(--a)) / 2 + 18.0817610062893vw * var(--a));
  top: calc(50vh - (12.2641509433962vw * var(--a)) / 2 + 2.51572327044025vw * var(--a));
  opacity: 0;
  }

#B1{
height: 6vh;
width: calc(15vw + 115px);
left: calc(50vw - (15vw + 115px)/2);
top: 80vh;
position: fixed;
z-index: 50;
text-align: center;
opacity: 0;
animation-name: blender;
animation-duration: 15s;
animation-iteration-count: 1;
}  
  
  
#B2{
height: 6vh;
width: calc(10vw + 180px);
left: calc(50vw - (10vw + 180px)/2);
top: 47vh;
position: fixed;
z-index: 50;
opacity: 0;
animation-name: blender;
animation-duration: 4s;
animation-iteration-count: 1;
animation-delay: 10s;
text-align: center;
}

#B3{
height: 6vh;
width: calc(10vw + 180px);
left: calc(50vw - (10vw + 180px)/2);
top: 37vh;
position: fixed;
z-index: 50;
opacity: 0;
animation-name: blender;
animation-duration: 3s;
animation-iteration-count: 1;
animation-delay: 11s;
text-align: center;
}

#B4{
height: 6vh;
width: calc(10vw + 180px);
left: calc(50vw - (10vw + 180px)/2);
top: 57vh;
position: fixed;
z-index: 50;
opacity: 0;
animation-name: blender;
animation-duration: 2s;
animation-iteration-count: 1;
animation-delay: 12s;
text-align: center;
}

#B5{
height: 24vh;
width: 70vw;
top: 2vh;
left: 2vw;
position: fixed;
z-index: 50;
opacity: 0;
animation-name: blender;
animation-duration: 15s;
animation-iteration-count: 1;

}


  h1{
    font-size: calc(4px + 0.7vw);
    font-family: arial;
    color: #FFFFFF;
    letter-spacing: 0.1vh;
    font-weight: normal;
}
    
.h6{
    /* font-size: calc(11px + 1.54vw);*/
    padding: calc(4px + 0.59vw) 0 calc(4px + 0.59vw) 8px;
    font-size: calc(8px + 1.18vw);
    font-family:arial;
    text-decoration: none;
    /*font-weight: bold;*/
    font-weight: normal;
    font-family: arial;
    color: #FFFFFF;
    border-color: #FFFFFF;
    border-style: solid;
    border-width: 1px 0 1px 0;
    }
    
 .h6:hover {
  color: #999999;
}   
    
  p{
    font-size: calc(25px + 2.05vw);
    font-family:arial;
    font-weight: normal;
    letter-spacing: 0.1vw;
    color: #FFFFFF;
    } 
   }     
 
 @media screen and (orientation: portrait) and (min-width:600px){
      


section{
    height: 74vh;
    width: 87vw;
    padding: 25vh 8vw 5vh 3vw; 
    float:left;
    } 
    
#G1{
height: 100%;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
background-size: cover;
background-image: url("Diplomarbeit02VG.jpg");
z-index: 1;
opacity: 0;
animation-name: blenderslow;
animation-duration: 7s;
animation-iteration-count: 1;
animation-delay: 2s;
}

 #part_1S{
    background: #FFFFFF;
     } 
     
#schwarz {
  --a: 2.0;
  --h1: calc(12.2641509433962vw * var(--a));
  --b1: calc(34.748427672956vw * var(--a));
  --h2: calc(18.8679245283019vw * var(--a));
  --b2: calc(20.3616352201258vw * var(--a));
  position: fixed;
  background-color: #555555;
  animation-name: umformen;
  animation-duration: 10s;
  animation-iteration-count: 1;
  z-index: 5;
  opacity: 0;
}

#wie {
  --a: 2.0;
  --auf: calc(-1 * 3,30188679245283vw * var(--a));
  --seitlich: calc(7,23270440251572vw * var(--a));
    
  position: fixed;
  background-image: url("Wie.png");
  background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
  background-size: cover;
  z-index: 10;
  width: calc(14.2295597vw * var(--a));
  height: calc(5.42452830188679vw * var(--a));
  animation-name: nachoben;
  animation-duration: 10s;
  animation-iteration-count: 1;
  left: calc(50vw - (34.748427672956vw * var(--a)) / 2 + 2.51572327044025vw * var(--a));
  top: calc(50vh - (12.2641509433962vw * var(--a)) / 2 + 2.51572327044025vw * var(--a));
  opacity: 0;
  } 
  
#ser {
  --a: 2.0;
  --auf: calc(3,30188679245283vw * var(--a));
  --seitlich: calc(-1 * 7,23270440251572vw * var(--a));
    
  position: fixed;
  background-image: url("ser.png");
  background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
  background-size: cover;
  z-index: 20;
  width: calc(14.0723270440252vw * var(--a));
  height: calc(5.73899371069182vw * var(--a));
  animation-name: nachunten;
  animation-duration: 10s;
  animation-iteration-count: 1;
  left: calc(50vw - (34.748427672956vw * var(--a)) / 2 + 18.0817610062893vw * var(--a));
  top: calc(50vh - (12.2641509433962vw * var(--a)) / 2 + 2.51572327044025vw * var(--a));
  opacity: 0;
  }

#B1{
height: 6vh;
width: calc(15vw + 115px);
left: calc(50vw - (15vw + 115px)/2);
top: 80vh;
position: fixed;
z-index: 50;
text-align: center;
opacity: 0;
animation-name: blender;
animation-duration: 15s;
animation-iteration-count: 1;
}  
  
  
#B2{
height: 6vh;
width: calc(10vw + 180px);
left: calc(50vw - (10vw + 180px)/2);
top: 47vh;
position: fixed;
z-index: 50;
opacity: 0;
animation-name: blender;
animation-duration: 4s;
animation-iteration-count: 1;
animation-delay: 10s;
text-align: center;
}

#B3{
height: 6vh;
width: calc(10vw + 180px);
left: calc(50vw - (10vw + 180px)/2);
top: 37vh;
position: fixed;
z-index: 50;
opacity: 0;
animation-name: blender;
animation-duration: 3s;
animation-iteration-count: 1;
animation-delay: 11s;
text-align: center;
}

#B4{
height: 6vh;
width: calc(10vw + 180px);
left: calc(50vw - (10vw + 180px)/2);
top: 57vh;
position: fixed;
z-index: 50;
opacity: 0;
animation-name: blender;
animation-duration: 2s;
animation-iteration-count: 1;
animation-delay: 12s;
text-align: center;
}

#B5{
height: 24vh;
width: 80vw;
top: 2vh;
left: 2vw;
position: fixed;
z-index: 50;
opacity: 0;
animation-name: blender;
animation-duration: 15s;
animation-iteration-count: 1;

}


h1{
    font-size: calc(7px + 0.65vw);
    font-family: arial;
    letter-spacing: 1vw;
    font-weight: normal;
    color: #000000;
}
    
.h6{
    /* font-size: calc(11px + 1.54vw);*/
    padding: calc(4px + 0.59vw) 0 calc(4px + 0.59vw) 8px;
    font-size: calc(8px + 1.18vw);
    font-family:arial;
    color: #333;
    text-decoration: none;
    /*font-weight: bold;*/
    font-weight: normal;
    font-family: arial;
    color: #999999;
    border-color: #333;
    border-style: solid;
    border-width: 1px 0 1px 0;
    }
  
    
 .h6:hover {
  color: #999999;
}   
    
  p{
    font-size: calc(25px + 2.05vw);
    font-family:arial;
    font-weight: normal;
    letter-spacing: 0.1vw;
    color: #000000;
    }
 }    
   
   /*___________________________________________________________________________________________*/  
  
  
@media screen and (orientation: landscape) {  
      

section{
    height: 74vh;
    width: 87vw;
    padding: 25vh 8vw 5vh 3vw; 
    float:left;
    } 
    
#G1{
height: 100%;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
background-size: cover;
background-image: url("Diplomarbeit02Q.jpg");
z-index: 1;
opacity: 0;
animation-name: blenderslow;
animation-duration: 7s;
animation-iteration-count: 1;
animation-delay: 2s;
}

 #part_1S{
    background: #FFFFFF;
     } 
     
#schwarz {
  --a: 1.0;
  --h1: calc(12.2641509433962vw * var(--a));
  --b1: calc(34.748427672956vw * var(--a));
  --h2: calc(18.8679245283019vw * var(--a));
  --b2: calc(20.3616352201258vw * var(--a));
  position: fixed;
  background-color: #000000;
  animation-name: umformen;
  animation-duration: 10s;
  animation-iteration-count: 1;
  z-index: 5;
  opacity: 0;
}

#wie {
  --a: 1.0;
  --auf: calc(-1 * 3,30188679245283vw * var(--a));
  --seitlich: calc(7,23270440251572vw * var(--a));
    
  position: fixed;
  background-image: url("Wie.png");
  background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
  background-size: cover;
  z-index: 10;
  width: calc(14.2295597vw * var(--a));
  height: calc(5.42452830188679vw * var(--a));
  animation-name: nachoben;
  animation-duration: 10s;
  animation-iteration-count: 1;
  left: calc(50vw - (34.748427672956vw * var(--a)) / 2 + 2.51572327044025vw);
  top: calc(50vh - (12.2641509433962vw * var(--a)) / 2 + 2.51572327044025vw);
  opacity: 0;
  } 
  
#ser {
  --a: 1.0;
  --auf: calc(3,30188679245283vw * var(--a));
  --seitlich: calc(-1 * 7,23270440251572vw * var(--a));
    
  position: fixed;
  background-image: url("ser.png");
  background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
  background-size: cover;
  z-index: 20;
  width: calc(14.0723270440252vw * var(--a));
  height: calc(5.73899371069182vw * var(--a));
  animation-name: nachunten;
  animation-duration: 10s;
  animation-iteration-count: 1;
  left: calc(50vw - (34.748427672956vw * var(--a)) / 2 + 18.0817610062893vw);
  top: calc(50vh - (12.2641509433962vw * var(--a)) / 2 + 2.51572327044025vw);
  opacity: 0;
  }

#B1{
height: 6vh;
width: calc(15vw + 115px);
left: calc(50vw - (15vw + 115px)/2);
top: 80vh;
position: fixed;
z-index: 50;
text-align: center;
opacity: 0;
animation-name: blender;
animation-duration: 15s;
animation-iteration-count: 1;
}  
  
  
#B2{
height: 6vh;
width: calc(10vw + 180px);
left: calc(50vw - (10vw + 180px)/2);
top: 47vh;
position: fixed;
z-index: 50;
opacity: 0;
animation-name: blender;
animation-duration: 4s;
animation-iteration-count: 1;
animation-delay: 10s;
text-align: center;
}

#B3{
height: 6vh;
width: calc(10vw + 180px);
left: calc(50vw - (10vw + 180px)/2);
top: 37vh;
position: fixed;
z-index: 50;
opacity: 0;
animation-name: blender;
animation-duration: 3s;
animation-iteration-count: 1;
animation-delay: 11s;
text-align: center;
}

#B4{
height: 6vh;
width: calc(10vw + 180px);
left: calc(50vw - (10vw + 180px)/2);
top: 57vh;
position: fixed;
z-index: 50;
opacity: 0;
animation-name: blender;
animation-duration: 2s;
animation-iteration-count: 1;
animation-delay: 12s;
text-align: center;
}

#B5{
height: 24vh;
width: 70vw;
top: 2vh;
left: 2vw;
position: fixed;
z-index: 50;
opacity: 0;
animation-name: blender;
animation-duration: 15s;
animation-iteration-count: 1;

}


h1{
    font-size: calc(7px + 0.65vw);
    font-family: arial;
    letter-spacing: 1vw;
    font-weight: normal;
}
    
.h6{
    /* font-size: calc(11px + 1.54vw);*/
    padding: calc(4px + 0.59vw) 0 calc(4px + 0.59vw) 8px;
    font-size: calc(8px + 1.18vw);
    font-family:arial;
    color: #333;
    text-decoration: none;
    /*font-weight: bold;*/
    font-weight: normal;
    font-family: arial;
    color: #999999;
    border-color: #333;
    border-style: solid;
    border-width: 1px 0 1px 0;
    }
    
 .h6:hover {
  color: #999999;
}   
    
  p{
    font-size: calc(25px + 2.05vw);
    font-family:arial;
    font-weight: normal;
    letter-spacing: 0.1vw;
    }
 }