html{
    zoom: 75%;
    box-sizing: border-box;
    background-color: black;
    height: 100%;
}
body{
    overflow-x: hidden;
    margin: 0px;
}
header nav{
    display:inline;
}
.roas{
    display: grid;
    grid-row: 2%;
}
.roas a{
    visibility: hidden;
}
.roas a:hover{
    visibility: visible;
}
.kont{
    display: grid;
    grid-template-rows: 2%;
}
header nav ul ul li{
    display: grid;
    grid-template-rows: 2%;
}
header ul{
    position: relative;
    padding:0px;
}
header li{
    list-style-type: none;
    display:inline-block;
    text-align: center;
}
 header nav{
    display:grid;
    position: relative;
    bottom: 125px;
    left: 300px;
}
header nav ul{
   display: flex;
   flex-direction: row;
   gap: 105px;
   font-size: 25px;
}
header nav a{
    color: #dc02ff;
}
header ul{
    color: #dc02ff;
}
header li:hover ul{
    display: block;
}
header li{
    color: #dc02ff;
    list-style-type: none;
}
header a{
    text-decoration: none;
    color: #dc02ff;
}
.krallen_container{
    position: relative;
}
.balken{
    width: 100%;
    border: solid 40px;
    border-color: #dc02ff;
    border-right: none;
    border-left: none;
    
}
.kralle1{
    position: absolute;
    bottom: 0px;
    left: 25%;
    height: 100%;
    opacity: 0.7;
}
.kralle2{
    position: absolute;
    bottom: 0px;
    left: 40%;
    height: 100%;
    opacity: 0.7;
}
.kralle3{
    position: absolute;
    bottom: 0px;
    left: 55%;
    height: 100%;
    opacity: 0.7;
}
.p{
    border: #dc02ff solid 3px;
    
}
section	h3{
    color: #dc02ff;
    font-size: 300%;
    padding-top: 8%;
    padding-left: 10%;
}
section nav li{
    position: relative;
    background-color: white;
    color: white;
    padding: 10%;
    padding-right:70%;
    padding-bottom: 5%;
    width: min-content;
    left:10%;
    border-radius: 20px;
}
.foto{
   position: absolute;
   left: 10%;
   top: 12%;
   margin-top: 5%;
   font-size: 150%;
}
.pos{
    position: absolute;
    left: 18%;
    top: 12%;
    padding-top: 5%;
    font-size: 150%;
 }
.daten{
    position: absolute;
    top: 22%;
    left: 27%;  
    font-size: 150%;
}
.on{
    position: absolute;
    top: 22%;
    left: 50%;
    font-size: 150%;
}
.ftb{
    transform: rotate(-90deg);
    position: relative;
    left: 60%;
    top: 50%;
    padding-top: 10%;
}
.kal-container{
    position: absolute;
}
.kalender{
    color: #dc02ff;
    list-style: none;
}
.ja{
    position: absolute;
    left:15%;
    top: 25%;
    width: 1%;
    background-color: white;
    padding: 5%;
    text-align: center;
}
.fe{
    position: absolute;
    left:28%;
    top: 25%;
    width: 1%;
    background-color: white;
    padding: 5%;
}
.mä{
    position: absolute;
    left:41%;
    top: 25%;
    width: 1%;
    background-color: white;
    padding: 5%;
}
.ap{
    position: absolute;
    left:54%;
    top: 25%;
    width: 1%;
    background-color: white;
    padding: 5%;
}
.ma{
    position: absolute;
    left: 15%;
    top: 50%;
    width: 1%;
    background-color: white;
    padding: 5%;
}
.jun{
    position: absolute;
    left:28%;
    top: 50%;
    width: 1%;
    background-color: white;
    padding: 5%;
}
.jul{
    position: absolute;
    left:41%;
    top: 50%;
    width: 1%;
    background-color: white;
    padding: 5%;
}
.au{
    position: absolute;
    left:54%;
    top: 50%;
    width: 1%;
    background-color: white;
    padding: 5%;
}
.se{
    position: absolute;
    left:15%;
    top: 75%;
    width: 1%;
    background-color: white;
    padding: 5%;
    
}
.ok{
    position: absolute;
    left:28%;
    top: 75%;
    width: 1%;
    background-color: white;
    padding: 5%;
}
.no{
    position: absolute;
    left:41%;
    top: 75%;
    width: 1%;
    background-color: white;
    padding: 5%;
}
.de{
    position: absolute;
    left:54%;
    top: 75%;
    width:1%;
    background-color: white;
    padding: 5%;
}
main h1{
    color: #dc02ff;
    position: absolute;
    top:15%;
    left:8%;
    font-size: 400%;
}
.new1{
    position: absolute;
    top: 30%;
    left: 8%;
    padding-left:5%;
    padding-right: 16%;
    padding-top: 3%;
    padding-bottom: 3%;
    background-color: white;
    color: white;
    width: auto;
    list-style: none;
}
.new2{
    position: absolute;
    top: 55%;
    left: 8%;
    padding-left:5%;
    padding-right: 16%;
    padding-top: 8%;
    padding-bottom: 10%;
    background-color: white;
    color: white;
    width: auto;
    list-style: none;
}
.new3{
    position: absolute;
    top: 30%;
    left: 38%;
    padding-left:5%;
    padding-right: 16%;
    padding-top: 0%;
    padding-bottom: 30%;
    background-color: white;
    color: white;
    width: auto;
    list-style: none;
}
.new4{
    position: absolute;
    top: 30%;
    left: 68%;
    padding-left:5%;
    padding-right: 16%;
    padding-top: 0%;
    padding-bottom: 30%;
    background-color: white;
    color: white;
    width: auto;
    list-style: none;
}
.shop{
    font-size: 250%;
    position: absolute;
    left:4%;
    top: 40%;
    text-align: center;
}
h2{
    color: red;
}
h4{
    color: #dc02ff;
}
p{
    color: #dc02ff;
}
.rang{
    color: #dc02ff;
    list-style: none;
    font-size: 250%;
    position: absolute;
    top:35%;
    left: 20%;
}
.email{
    color: #dc02ff;
    list-style: none;
    font-size:250%;
    position: absolute;
    top: 35%;
    left: 60%;
}
.animation-list0{
    position: absolute;
    top: 85%;
    left: 20%;
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 25%;
    color: black;
   list-style: none;
   animation: example-animation 10s linear infinite;
   z-index: 2;
   font-size: 300%;
}
.animation-bar0{
    position: absolute;
    top:87%;
    left: 0;
    width: 100%;
    height:10%;
    background-color: #dc02ff;
    z-index: 1;
    
}
@keyframes example-animation{
    0%{
       transform: translateX(100%);
    }
    100%{
        transform: translateX(-100%);
    }
}
.animation-list1{
    position: absolute;
    top: 29%;
    left: 20%;
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 25%;
    color: black;
   list-style: none;
   animation: example-animation 10s linear infinite;
   z-index: 2;
   font-size: 300%;
}
.animation-bar1{
    position: absolute;
    top:30%;
    left: 0;
    width: 100%;
    height:10%;
    background-color: #dc02ff;
    z-index: 1;   
}
.animation-list3{
    position: absolute;
    top: 49%;
    left: 20%;
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 25%;
    color: black;
   list-style: none;
   animation: example-animation 10s linear infinite;
   z-index: 2;
   font-size: 300%;
}
.animation-bar3{
    position: absolute;
    top:50%;
    left: 0;
    width: 100%;
    height:10%;
    background-color: #dc02ff;
    z-index: 1;   
}
.animation-list4{
    position: absolute;
    top: 69%;
    left: 20%;
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 25%;
    color: black;
   list-style: none;
   animation: example-animation 10s linear infinite;
   z-index: 2;
   font-size: 300%;
}
.animation-bar4{
    position: absolute;
    top:70%;
    left: 0;
    width: 100%;
    height:10%;
    background-color: #dc02ff;
    z-index: 1;   
}
.erk{
    color: #dc02ff;
    font-size: 300%;
    position: absolute;
    left: 6%;
}
.kategorie{
    color: #dc02ff;
    list-style: none;
    display: flex;
    flex-direction: row;
    font-size: 200%;
    gap: 12rem;
    position: absolute;
    left: 5%;
    top: 32%; 
}
.kategorie a{
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.erklärung{
    color: #dc02ff;
    list-style: none;
    font-size: 200%;
    position: absolute;
    top: 50%;
    left: 5%;
}
.ga{
padding-top: 4rem;
list-style: circle;
}
.erkl-pos{
    position: absolute;
    top: 8%;
    right: 15%;
    list-style-type: none;
    font-size: 150% ;
    color: #dc02ff;
    border: #dc02ff solid 3px;
    padding-left: 2%;
    padding-right:2%;
    padding-top: 1%;
    padding-bottom: 1%;
}
.erkl-pos a{
    text-decoration: none;
    color:inherit;
    cursor: pointer; 
}
.komplet-body{
    list-style-type: none;
}
.h-kalender{
    color: #dc02ff;
    font-size: 250%;
    width: max-content;
    position: relative;
    left: 70%;
    top: 10%;
    
}
.kalender-eintrag{
    color: black;
    list-style: none;
    background-color: white;
    font-size: 160%;
    width: max-content;
    position: absolute;
    top:27%;
    right: 10%;
    padding-left: 1%;
    padding-right: 10%;
    padding-top: 1%;
    padding-bottom: 4%;
}