html {overflow-x: hidden;}

body {
 background-color: #00535A;
 background-size: 100%;  
}

#preloader {
/*    transition: all 1000ms ease;*/
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    background: #f5efd7;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#preloader img {
   width: 11%; 
   min-width: 150px;   
   margin-bottom: 7vh;    
}

#auto {
/*
    position: fixed;
    top: 0px;
    left: 0px;
*/
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#auto img {
   width: 25%;     
   min-width: 300px; 
   margin-bottom: 15vh;    
}

#content {
  display: none;
}

@font-face {
    font-family: 'Butler';
    src: url('../fonts/Butler/Butler.woff');
}

@font-face {
    font-family: 'Butler-Black';
    src: url('../fonts/Butler/Butler-Black.woff');
}

@font-face {
    font-family: 'Meriva';
    src: url('../fonts/Meriva/MerivaBold.otf');
}

#OpeningSoon {
    width: 20%; 
    position:fixed; 
    left:70vw; 
    z-index: 0;
    display:block; 
    margin-top: 50vh;
    z-index: 0;

} 

@media screen and (max-width: 992px) { 
    #OpeningSoon{ 
width: 25%;
margin-top: 53vh;        
left:65vw; 
} 
    }

@media screen and (max-width: 576px) { 
    #OpeningSoon{ 
width: 35%;
margin-top: 55vh;        
left:60vw;         
} 
    }

#animate-area {
  position: absolute;
  object-fit: cover!important;    
  height: 100vh;
  width: 100vw;
  left:0;    
  background-image: url(/sbagliato-svg/sbagliato_cover.jpg);
  background-size: cover;
  background-repeat: repeat-x;
/*  z-index:10;*/
}

.Text {
    font-family: 'Butler';
    font-size: 1.1em;
    line-height: 1.4em;
    color: black;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.Text2 {
    font-family: 'Butler';
    font-size: 1.1em;
    line-height: 1.4em;
    color: black;
    opacity: 20%;
    hyphens: auto;
    -webkit-hyphens: auto;
}

h1 {
    font-family: 'Meriva';
    font-size: 1.1em;
    line-height: 1.4em;
/*    letter-spacing: 0.03em;*/
    color: black;
    hyphens: auto;
    -webkit-hyphens: auto;
}

h1#tabelle {
    font-family: 'Meriva';
    font-size: 1.1em;
    line-height: 1.4em;
    color: black;
/*    opacity: 20%;*/
    hyphens: auto;
    -webkit-hyphens: auto;
}

/*
h1.tabelle:hover {
opacity: 100%;
}
*/

h2 {
    font-family: 'Meriva';
    font-size: 2.3vw;
    line-height: 2.8vw;
    letter-spacing: -0.03vw;
    color: white;
}

@media screen and (max-width: 768px) {
   h2 { 
    font-family: 'Meriva';
    font-size: 4.0vw;
    line-height: 5.0vw;
    letter-spacing: -0.03vw; 
}    
}

@media screen and (max-width: 768px) {
   h2#arrow { 
    font-family: 'Meriva';
    font-size: 4.0vw;
    line-height: 5.0vw;
    letter-spacing: -0.03vw; 
    }
}

@media screen and (max-width: 768px) {
   h2#signature { 
    font-family: 'Meriva';
    font-size: 4.0vw;
    line-height: 5.0vw;
    letter-spacing: -0.03vw; 
    }
}

h2#signature { 
     z-index: 100;!important
    }

/*Animierter Pfeil*/
.wrap {
  height: 100%;
  width: 100%;
  text-align: center;
}


.wrap h2.arrow {
  margin: 0px 0 0 -40px;
  line-height: 60px;
  position: absolute;
  left: 50%;
  bottom: 0px;
}

.bounce {
  animation-iteration-count: infinite;
  animation-duration: 1.5s;
  animation: bounce 5.6s ease infinite;
  transform-origin: 50% 50%;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  5.55556% {
    transform: translateY(0);
  }
  11.11111% {
    transform: translateY(0);
  }
  22.22222% {
    transform: translateY(-30px);
  }
  27.77778% {
    transform: translateY(0);
  }
  33.33333% {
    transform: translateY(-60px);
  }
  44.44444% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}

a.link {
    font-family: 'Meriva';
    font-size: 2.3vw;
    line-height: 2.8vw;
    letter-spacing: -0.03vw;
    color: white;
    z-index: 10;
} 

@media screen and (max-width: 768px) {
a.link {
    font-family: 'Meriva';
    font-size: 4.0vw;
    line-height: 5.0vw;
    letter-spacing: -0.03vw; 
    color: white;
    z-index: 10;
}
}    

a:hover.link {
    color: white;
    text-decoration-line: line-through;
}

a.button {    
  font-family: 'Butler';
  font-size: 1.1em;
  line-height: 1.4em;
  text-decoration: none;    
  color: black;
  hyphens: auto;
}

a:hover.button {
    background-color: #4B8EA7;
    transition: 0.8s;
}

a.navi {    
    font-family: 'Meriva';
    font-size: 2.3vw;
    line-height: 2.8vw;
    letter-spacing: -0.03vw;
    text-decoration: none;
    color: white;
    padding: 1vw;
    z-index: 10;
}

@media screen and (max-width: 768px) {
   a.navi { 
    font-family: 'Meriva';
    font-size: 4.0vw;
    line-height: 2.8vw;
    letter-spacing: -0.03vw; 
    }
}

a.navi:hover { 
    font-style: oblique;
/*
    color: white;
    text-decoration-line: line-through;
*/
}

a.footer:hover {
    color: white;
    text-decoration-line: line-through;
}

a.button{
  position: relative;       
  background-color: white;
  border: 0;
  box-shadow: 0 0 0 0.5px;
  outline: none !important;    
  padding: 15px 20px;
  padding-top: 20px!important;
  margin-left: 30px; 
  margin-right: 0px;
  margin-bottom: 0rem;    
  text-align: center;
  text-decoration: none;
  font-family: 'Butler';
  font-size: 1.1em;
  line-height: 1.4em;
  color: black;
  display:block;
  width:150px;  
  hyphens: auto;
}

@media screen and (max-width: 768px) {
   a.button { 
  display:block;
  width:50%;
  max-width:150px;        
  padding: 15px 20px;      
  margin-left: auto; 
  margin-right: auto;
  margin-bottom: 2rem;       
    }
}

a.button:hover {
  background-color: #FF5FA2;
  color: white;
  outline: none !important;   
  transition: none !important;
}

a.buttonn:active{
  background-color: #FF5FA2;
  color: white;
  outline: none !important;   
  transition: none !important;  
} 

.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th,
.table-borderless > tfoot > tr > td,
.table-borderless > tfoot > tr > th,
.table-borderless > thead > tr > td,
.table-borderless > thead > tr > th {
    border: none;
}

.table > tbody > tr:first-child > td {
    border: none;
}

th {
    border: none;
    display:none;
}

td {
    padding: 0!important;
}

h1#tabelle { 
opacity: 15%; 
    }

h1#tabelle:hover {
opacity: 100%;   
}

@media screen and (max-width: 768px) {
   #tabelle { 
    padding-right:30px;     
    }
}

@media screen and (max-width: 768px) {
   #col3 { 
    margin-top:10%;
    }
}

#col4 {
    margin-top:10%;
}

@media screen and (max-width: 768px) {
   #col4 { 
    margin-top:12%;
    }
}

#col5 {
    margin-top:10%;
    z-index: 10;
}

@media screen and (max-width: 768px) {
   #col5 { 
    margin-top:5%;
    }
}

  .todaysDay {
    color: #FF5FA2!important;
    opacity: 100%!important;  
  }

/*Bewegtes Cover*/

@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}

#animate {
    margin-top:10%;
/*    margin-left: -10%;*/
/*    width: 120%;*/
    
    -ms-transform: rotate(-10deg); /* IE 9 */
    -webkit-transform: rotate(-10deg); /* Safari */
    transform: rotate(-10deg); /* Standard syntax */
}

/*line-one*/

 #line-1 {
      padding-bottom: 2vh;
      -moz-animation: marquee-1 60s linear infinite;
      -webkit-animation: marquee-1 60s linear infinite;
      animation: marquee-1 60s linear infinite;
      }

      @-moz-keyframes marquee-1 {
      0% { transform: translateX(0%); }
      100% { transform: translateX(-200%); }
      }
      @-webkit-keyframes marquee-1 {
      0% { transform: translateX(0%); }
      100% { transform: translateX(-200%); }
      }
      @keyframes marquee-1 {
      0% { 
      -moz-transform: translateX(0%);
      -webkit-transform: translateX(0%);
      transform: translateX(0%) }
      100% { 
      -moz-transform: translateX(-200%);
      -webkit-transform: translateX(-200%);
      transform: translateX(-200%); }
      }

@media screen and (max-width: 992px) {
    #line-1 { 
      -moz-animation: marquee-1 20s linear infinite;
      -webkit-animation: marquee-1 20s linear infinite;
      animation: marquee-1 20s linear infinite;
        
        
      @-moz-keyframes marquee-1 {
      0% { transform: translateX(0%); }
      100% { transform: translateX(-200%); }
      }
      @-webkit-keyframes marquee-1 {
      0% { transform: translateX(0%); }
      100% { transform: translateX(-200%); }
      }
      @keyframes marquee-1 {
      0% { 
      -moz-transform: translateX(0%);
      -webkit-transform: translateX(0%);
      transform: translateX(0%) }
      100% { 
      -moz-transform: translateX(-200%);
      -webkit-transform: translateX(-200%);
      transform: translateX(-200%); }    
} 
    } } 

@media screen and (max-width: 576px) {
    #line-1 { 
        
      @-moz-keyframes marquee-1 {
      0% { transform: translateX(0%); }
      100% { transform: translateX(-100%); }
      }
      @-webkit-keyframes marquee-1 {
      0% { transform: translateX(0%); }
      100% { transform: translateX(-100%); }
      }
      @keyframes marquee-1 {
      0% { 
      -moz-transform: translateX(0%);
      -webkit-transform: translateX(0%);
      transform: translateX(0%) }
      100% { 
      -moz-transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%); }
}    
    } } 


 #line-2 {
      padding-bottom: 2vh;
      -moz-animation: marquee-2 90s linear infinite;
      -webkit-animation: marquee-2 90s linear infinite;
      animation: marquee-2 90s linear infinite;
      }

      @-moz-keyframes marquee-2 {
      0% { transform: translateX(-200%); }
      100% { transform: translateX(0%); }
      }
      @-webkit-keyframes marquee-2 {
      0% { transform: translateX(-200%); }
      100% { transform: translateX(0%); }
      }
      @keyframes marquee-2 {
      0% { 
      -moz-transform: translateX(-200%);
      -webkit-transform: translateX(-200%);
      transform: translateX(-200%) }
      100% { 
      -moz-transform: translateX(0%);
      -webkit-transform: translateX(0%);
      transform: translateX(0%); }
      }

@media screen and (max-width: 992px) {
    #line-2 { 
      -moz-animation: marquee-2 40s linear infinite;
      -webkit-animation: marquee-2 40s linear infinite;
      animation: marquee-2 40s linear infinite; 

    
      @-moz-keyframes marquee-2 {
      0% { transform: translateX(-200%); }
      100% { transform: translateX(0%); }
      }
      @-webkit-keyframes marquee-2 {
      0% { transform: translateX(-200%); }
      100% { transform: translateX(0%); }
      }
      @keyframes marquee-2 {
      0% { 
      -moz-transform: translateX(-200%);
      -webkit-transform: translateX(-200%);
      transform: translateX(-200%) }
      100% { 
      -moz-transform: translateX(0%);
      -webkit-transform: translateX(0%);
      transform: translateX(0%); }
      }
        
    } } 
    
    @media screen and (max-width: 576px) {
    #line-2 { 
        
      @-moz-keyframes marquee-2 {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(0%); }
      }
      @-webkit-keyframes marquee-2 {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(0%); }
      }
      @keyframes marquee-2 {
      0% { 
      -moz-transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%) }
      100% { 
      -moz-transform: translateX(0%);
      -webkit-transform: translateX(0%);
      transform: translateX(0%); }
}    
    } } 

 #line-3 {
      padding-bottom: 2vh;
      -moz-animation: marquee-3 90s linear infinite;
      -webkit-animation: marquee-3 90s linear infinite;
      animation: marquee-3 90s linear infinite;
      }

      @-moz-keyframes marquee-3 {
      0% { transform: translateX(0%); }
      100% { transform: translateX(-200%); }
      }
      @-webkit-keyframes marquee-3 {
      0% { transform: translateX(0%); }
      100% { transform: translateX(-200%); }
      }
      @keyframes marquee-3 {
      0% { 
      -moz-transform: translateX(0%);
      -webkit-transform: translateX(0%);
      transform: translateX(0%) }
      100% { 
      -moz-transform: translateX(-200%);
      -webkit-transform: translateX(-200%);
      transform: translateX(-200%); }
      }

@media screen and (max-width: 992px) {
    #line-3 { 
      -moz-animation: marquee-3 40s linear infinite;
      -webkit-animation: marquee-3 40s linear infinite;
      animation: marquee-3 40s linear infinite;
        
      @-moz-keyframes marquee-3 {
      0% { transform: translateX(0%); }
      100% { transform: translateX(-200%); }
      }
      @-webkit-keyframes marquee-3 {
      0% { transform: translateX(0%); }
      100% { transform: translateX(-200%); }
      }
      @keyframes marquee-3 {
      0% { 
      -moz-transform: translateX(0%);
      -webkit-transform: translateX(0%);
      transform: translateX(0%) }
      100% { 
      -moz-transform: translateX(-200%);
      -webkit-transform: translateX(-200%);
      transform: translateX(-200%); }
      }    
    } } 
        
    @media screen and (max-width: 576px) {
    #line-3 { 
        
      @-moz-keyframes marquee-3 {
      0% { transform: translateX(0%); }
      100% { transform: translateX(-100%); }
      }
      @-webkit-keyframes marquee-3 {
      0% { transform: translateX(0%); }
      100% { transform: translateX(-100%); }
      }
      @keyframes marquee-3 {
      0% { 
      -moz-transform: translateX(0%);
      -webkit-transform: translateX(0%);
      transform: translateX(0%) }
      100% { 
      -moz-transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%); }
}    
    } } 

 #line-4 {
      padding-bottom: 2vh;
      -moz-animation: marquee-4 60s linear infinite;
      -webkit-animation: marquee-4 60s linear infinite;
      animation: marquee-4 60s linear infinite;
      }

      @-moz-keyframes marquee-4 {
      0% { transform: translateX(-200%); }
      100% { transform: translateX(0%); }
      }
      @-webkit-keyframes marquee-4 {
      0% { transform: translateX(-200%); }
      100% { transform: translateX(0%); }
      }
      @keyframes marquee-4 {
      0% { 
      -moz-transform: translateX(-200%);
      -webkit-transform: translateX(-200%);
      transform: translateX(-200%) }
      100% { 
      -moz-transform: translateX(0%);
      -webkit-transform: translateX(0%);
      transform: translateX(0%); }
      }

@media screen and (max-width: 992px) {
    #line-4 { 
      -moz-animation: marquee-4 20s linear infinite;
      -webkit-animation: marquee-4 20s linear infinite;
      animation: marquee-4 20s linear infinite;
        
      @-moz-keyframes marquee-4 {
      0% { transform: translateX(-200%); }
      100% { transform: translateX(0%); }
      }
      @-webkit-keyframes marquee-4 {
      0% { transform: translateX(-200%); }
      100% { transform: translateX(0%); }
      }
      @keyframes marquee-4 {
      0% { 
      -moz-transform: translateX(-200%);
      -webkit-transform: translateX(-200%);
      transform: translateX(-200%) }
      100% { 
      -moz-transform: translateX(0%);
      -webkit-transform: translateX(0%);
      transform: translateX(0%); }
      }    
    } } 
        
   @media screen and (max-width: 576px) {
    #line-4 { 
        
      @-moz-keyframes marquee-4 {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(0%); }
      }
      @-webkit-keyframes marquee-4 {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(0%); }
      }
      @keyframes marquee-4 {
      0% { 
      -moz-transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%) }
      100% { 
      -moz-transform: translateX(0%);
      -webkit-transform: translateX(0%);
      transform: translateX(0%); }
}    
    } } 

 #line-5 {
      padding-bottom: 2vh;
      -moz-animation: marquee-5 60s linear infinite;
      -webkit-animation: marquee-5 60s linear infinite;
      animation: marquee-5 60s linear infinite;
      }

      @-moz-keyframes marquee-5 {
      0% { transform: translateX(0%); }
      100% { transform: translateX(-200%); }
      }
      @-webkit-keyframes marquee-5 {
      0% { transform: translateX(0%); }
      100% { transform: translateX(-200%); }
      }
      @keyframes marquee-5 {
      0% { 
      -moz-transform: translateX(0%);
      -webkit-transform: translateX(0%);
      transform: translateX(0%) }
      100% { 
      -moz-transform: translateX(-200%);
      -webkit-transform: translateX(-200%);
      transform: translateX(-200%); }
      }

@media screen and (max-width: 992px) {
    #line-5 { 
      -moz-animation: marquee-5 20s linear infinite;
      -webkit-animation: marquee-5 20s linear infinite;
      animation: marquee-5 20s linear infinite; 
        
      @-moz-keyframes marquee-5 {
      0% { transform: translateX(0%); }
      100% { transform: translateX(-200%); }
      }
      @-webkit-keyframes marquee-5 {
      0% { transform: translateX(0%); }
      100% { transform: translateX(-200%); }
      }
      @keyframes marquee-5 {
      0% { 
      -moz-transform: translateX(0%);
      -webkit-transform: translateX(0%);
      transform: translateX(0%) }
      100% { 
      -moz-transform: translateX(-200%);
      -webkit-transform: translateX(-200%);
      transform: translateX(-200%); }
      }    
    } } 
       
   @media screen and (max-width: 576px) {
    #line-5 { 
        
      @-moz-keyframes marquee-5 {
      0% { transform: translateX(0%); }
      100% { transform: translateX(-100%); }
      }
      @-webkit-keyframes marquee-5 {
      0% { transform: translateX(0%); }
      100% { transform: translateX(-100%); }
      }
      @keyframes marquee-5 {
      0% { 
      -moz-transform: translateX(0%);
      -webkit-transform: translateX(0%);
      transform: translateX(0%) }
      100% { 
      -moz-transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%); }
}    
    } }      

 #line-6 {
      padding-bottom: 2vh;
      -moz-animation: marquee-6 90s linear infinite;
      -webkit-animation: marquee-6 90s linear infinite;
      animation: marquee-6 90s linear infinite;
      }

      @-moz-keyframes marquee-6 {
      0% { transform: translateX(-200%); }
      100% { transform: translateX(0%); }
      }
      @-webkit-keyframes marquee-6 {
      0% { transform: translateX(-200%); }
      100% { transform: translateX(0%); }
      }
      @keyframes marquee-6 {
      0% { 
      -moz-transform: translateX(-200%);
      -webkit-transform: translateX(-200%);
      transform: translateX(-200%) }
      100% { 
      -moz-transform: translateX(0%);
      -webkit-transform: translateX(0%);
      transform: translateX(0%); }
      }

@media screen and (max-width: 992px) {
    #line-6 { 
      -moz-animation: marquee-6 40s linear infinite;
      -webkit-animation: marquee-6 40s linear infinite;
      animation: marquee-6 40s linear infinite;
        
      @-moz-keyframes marquee-6 {
      0% { transform: translateX(-200%); }
      100% { transform: translateX(0%); }
      }
      @-webkit-keyframes marquee-6 {
      0% { transform: translateX(-200%); }
      100% { transform: translateX(0%); }
      }
      @keyframes marquee-6 {
      0% { 
      -moz-transform: translateX(-200%);
      -webkit-transform: translateX(-200%);
      transform: translateX(-200%) }
      100% { 
      -moz-transform: translateX(0%);
      -webkit-transform: translateX(0%);
      transform: translateX(0%); }
      }    
    } } 

   @media screen and (max-width: 576px) {
    #line-6 { 
        
      @-moz-keyframes marquee-6 {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(0%); }
      }
      @-webkit-keyframes marquee-6 {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(0%); }
      }
      @keyframes marquee-6 {
      0% { 
      -moz-transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%) }
      100% { 
      -moz-transform: translateX(0%);
      -webkit-transform: translateX(0%);
      transform: translateX(0%); }
}    
    } }       

/*Bilder*/    

.visible {
  opacity: 1;
}

.mein-element {
  opacity: 0;
  transition: all .1s linear;
}

.mein-element:nth-of-type(odd) {
  transform: translateX(-15%);
}

.mein-element:nth-of-type(even) {
  transform: translateX(90%);
}

.mein-element.visible {
  transform:translateX(0);
  opacity: 1;
}

#crew_3 {
  position: relative;    
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;  
  margin-top: 65%;
  z-index: 8;  
  transition: transform 0.7s;
}

@media screen and (max-width: 768px) {
   #crew_3 { 
  margin-top: 25%;
  z-index: 8;     
    }
}

#Verace_7 {
  position: relative;    
  width: 100%; 
  margin-top: -10%;
  z-index: 10;
  transition: transform 0.7s;    
}

@media screen and (max-width: 768px) {
#Verace_7 {
  margin-top: -35%;
  z-index: 7;    
}
}

#Verace_3 {
  position: relative;    
  width: 100%; 
  left:-10%;    
  margin-top: -50%;  
  z-index: 8;
  transition: transform 0.7s;
}

@media screen and (max-width: 768px) {
#Verace_3 {
  position: relative;    
  width: 100%; 
  left:-10%;    
  margin-top: -115%;  
  z-index: 8;
  transition: transform 0.7s;
}
}

#Verace_10{
  position: relative;    
  width: 100%; 
  left: 25%;    
  margin-top: 40%;  
  z-index: 7;
  transition: transform 0.7s;    
}

@media screen and (max-width: 768px) {
#V10{
  position: relative;    
  width: 100%; 
  left: 10%;     
}
}

#Verace_6 {
  position: relative;    
  width: 100%; 
  margin-top: -10%;
  z-index: 8;
  transition: transform 0.7s;    
}

@media screen and (max-width: 768px) {
   #Verace_6 {
  position: relative;    
  width: 100%; 
  margin-top: -23%;
  z-index: 8;
  transition: transform 0.7s;   
}
}

@media screen and (min-width: 768px) {
   #V6 {
   position: relative; 
   padding-left: 30px; 
   padding-right: 0px;   
}
}

@media screen and (max-width: 768px) {
   #V6 {
   position: relative;
   padding-left:  0px;
   padding-right: 0px;    
}
}

#crew_2 {
  position: relative;    
  width: 85%; 
  margin-top: 75%;       
  z-index: 8;
  transition: transform 0.7s;    
}

@media screen and (max-width: 768px) {
#crew_2 { 
  width: 100%; 
  margin-top: 25%;       
  z-index: 8;
  transition: transform 0.7s;    
}
}    

#Verace_1 {
  position: relative;    
  width: 100%; 
  left:-10%;    
  margin-top: 0%;  
  z-index: 8; 
  transition: transform 0.7s;    
}

@media screen and (max-width: 768px) {
#Verace_1 {
  position: relative;    
  width: 100%; 
  left: 0%;    
  margin-top: -60%;  
  z-index: 8; 
  transition: transform 0.7s;    
}
}   

#Pixa_1 {
  position: relative;    
  width: 100%; 
  margin-top: -30%;
  z-index: 8; 
  transition: transform 0.7s;    
}

@media screen and (max-width: 768px) {
#Pixa_1 {
  margin-top: 15%;
}
}    


#Verace_5 {
  position: relative;    
  width: 100%;    
  margin-top: 10%;
  z-index: 8;  
  transition: transform 0.7s;    
}

#Verace_2 {
  position: relative;    
  left: -30%;
  width: 100%;  
  margin-top: -20%;
  z-index: 7;
  transition: transform 0.7s;    
}

@media screen and (max-width: 768px) {
   #block1 { 
margin-top: 2rem;      
    }
}

@media screen and (max-width: 768px) {
   #block2 { 
margin-bottom: 2rem;        
    }
}

@media screen and (max-width: 768px) {
   #spalte1 { 
margin-top: 2rem;
margin-bottom: 0rem;
text-align: center;        
    }
}

@media screen and (max-width: 768px) {
   #spalte3 { 
margin-top: 2rem;
margin-bottom: 0rem;
text-align: center;        
    }
}

#spalte5 { 
z-index: 10;     
    }

@media screen and (max-width: 768px) {
   #spalte5 { 
margin-top: 2rem;
margin-bottom: 0rem;
text-align: center;        
    }

@media screen and (max-width: 768px) {
   #spalte2 { 
margin-bottom: 2rem; 
text-align: center;       
    }
}

@media screen and (max-width: 768px) {
   #spalte4 { 
margin-bottom: 2rem;
text-align: center;          
    }
}

@media screen and (max-width: 768px) {
   #spalte6 { 
margin-bottom: 2rem;
text-align: center;          
    }
}

/*
.background {   
 position: relative;
 width: 100%;
 height: 100%;    
 background-color: #f5efd7; 
 z-index: 10000;    
}
    
*/
/* 
Farben
beige: #f5efd7
rgba(255, 0, 0, 0.3);

dunkelrot: #841f1c
rgba(255, 0, 0, 0.3);

Tischdecke: #de4540
rgba(255, 0, 0, 0.3);

hell: #f2ccd0
rgba(255, 0, 0, 0.3);

grau: b3a7af
*/