*{
    box-sizing: border-box;
    font-family: 'Lucida Sans', Geneva, Verdana, sans-serif;
    font-size: 16px;
}
:root{
    
     --blue: #1e90ff;
     --white: #f7eeee;
     --hell: rgb(107, 68, 68);
     --gesamtbreite:calc(screen.width*0.8);
     --einheit:10vw;
}
body{
    background-color: rgb(42, 42, 85);
    margin: 0;
    padding: 0;
    color:#f7eeee;
}
header{
    height: 50px;
}

h1{
    font-size: 2rem;
    color:var(--white);
    text-align: center;
}
h2{
    margin-top: 20px;
    color:rgb(189, 189, 233);

}
.billd{
    width: 90%;
    margin: 40px;
    margin-left: auto;
    margin-right: auto;
    
}

.gross{
    color: rgb(214, 208, 208);
    text-align: center;
    padding: 20px;
    position: relative;

    font-size: 2rem;
}
.inf{
    width: 80%;
    margin-left:100px;
    margin-top: 10px;
}
.kasten{
    width: 80%;
   position: absolute;
   top:650px;
}

/*==========Navigationsleiste 1 einfach===================*/
.nav1{
    display: flex;
    width: 100%;
    height:4em;
    background-color: rgb(60, 55, 77);
    justify-content: flex-end;
    align-items: center;
    text-align: center;
}
.navmobile{
    width:100%;
    height: 50px;
 
    margin-top: 10px;

}
.ham{
    position: absolute;
    right: 0;
    width: 40px;
    background-color: rgb(200, 208, 212);
    display: none;
}
.klappmenue{
    position: relative;
    top:30px;right:100px;
    display:none;
}
.klappmenue a{  
    width: 100px;
    display:none;
}
#h1{
    display:none;
}
a{
    width: 10%;
    color: rgb(216, 207, 207);
    text-decoration: none;
    background-color: rgb(41, 46, 63, 0.5);
    font-size: 0.8rem;
    margin: 0 15px;
    padding:0 10px ;
    border: 1px solid rgb(39, 35, 35);
    box-shadow: 3px 3px 3px  rgb(187, 177, 177);
    cursor: pointer;
}
a:hover{
  
    color: white;
}
.aktiv{
    border: 1px solid rgb(216, 207, 207);
    border-radius: 4px;
    box-shadow: 3px 3px 3px  rgb(165, 157, 157);
}
a:active{
    color: rgb(151, 138, 138);
    border: 1px solid rgb(216, 207, 207);
    border-radius: 6px;
}
/*===========================================================================*/

.bild{
    width: 60px;
    position: absolute;
    top:10px;
    left:5px;
}
footer{
    position: fixed;
    bottom: 0;
    display: flex;
    width: 100%;
    height:4rem;
    background-color:rgb(19, 18, 24);
    justify-content: space-around;
    align-items: center;
    text-align: center;
}
footer a{
    box-shadow: none;
    
}
.unten{
    width: 20%;
    font-size: 0.8rem;
    background-color: rgb(33, 32, 37);
}
.hell{
    color: rgb(218, 210, 210);
    font-size: 0.8rem;
}
.bild-bewegen{
    width: 30%;
    position:absolute;
    top:30vh;left:20vw;
    animation: bewegeBild 4s  calc(1);
    margin-left: auto;
    margin-right: auto;   
}
.bild-bewegen2{
    width: 30%;
    position:absolute;
    top:20vh;left:40vw;
    animation: bewegeBild2 4s  calc(1);
    margin-left: auto;
    margin-right: auto;   
}
.bild-bewegen3{
    width: 30%;
    position:absolute;
    top:50vh;left:50vw;
    animation: bewegeBild3 4s  calc(1);
    margin-left: auto;
    margin-right: auto;   
}
.bild-bewegen4{
    width: 30%;
    position:absolute;
    top:25vh;left:65vw;
    animation: bewegeBild4 4s  calc(1);
    margin-left: auto;
    margin-right: auto;   
}
#texti{
    width: 30vw;
    color:  #f7eeee;
    position:absolute;
    top:74vh;left:25vw;
    animation: bewegeText 6s  calc(10);
    margin-left: auto;
    margin-right: auto;
    
}
#drei{
    cursor: pointer;
}
@keyframes bewegeText{
    from{transform: translateX(-100px);}
    to{transform: translateX(1000px);}
   
}
@keyframes bewegeBild{
    0%{transform: translate(-1200px,300px);}
    50%{transform: translate(0);}
    52%{transform: translate(15px,-20px);}
    54%{transform: translate(-15px,20px);}
    55%{transform: rotate(180deg);}
    60%{transform: rotateZ(-300deg);}
    100%{transform: translate(-1200px);}
}
@keyframes bewegeBild2{
    0%{transform: translate(1200px,300px);}
    50%{transform: translate(0);}
    52%{transform: translate(15px,-20px);}
    54%{transform: translate(-15px,20px);}
    55%{transform: rotate(180deg);}
    60%{transform: rotateZ(-300deg);}
    100%{transform: translate(-1200px);}
}
@keyframes bewegeBild3{
    0%{transform: translate(1200px,600px);}
    50%{transform: translate(0);}
    52%{transform: translate(15px,-20px);}
    100%{transform: translate(-1200px);}
}
@keyframes bewegeBild4{
    0%{transform: translate(200px,200px);}
    52%{transform: translate(15px,-20px);}
    100%{transform: translate(1200px,1200px);}
}
.key{
    display: block;
    width: 30%;
    margin-left: auto;
    margin-right: auto;
}
/*=====================================canvas===============*/
#canvas1{
    
    width: 80vw;
    height:auto;
    display: block;
    margin-left: auto; margin-right: auto;
}
#canvas0{
 
    width: 5vw;
    height:100vh;
    margin-left: 10vw;
    margin-top: 1vh;
}
.aus{
    display:none;
}
.auswahl{
 
    width: 50%;
    height:400px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-left: auto;
    margin-right: auto;
}
.grid-item{
    width: 90%;
    height: 100px;
    border-radius: 10%;
    padding: 20px;
    font-size: 1.8rem;
    border: 2px solid beige;
    display:flex;
    justify-content: center;
    align-items: center;
}
.grid-item a{  
    font-size: 1.3rem;
    text-align: center;
   display:flex;
   justify-content: center;
   align-items: center;
    margin: 0;
    border: none;
    box-shadow: none;
}
h2{
    font-size: 1.2rem;
    color:var(--white);
    text-align: center; 
    margin-top: 10px;
    margin-bottom: 2vh;
}
/*===============================================================*/
@media (max-width:300px){
    .grid-item a{
        font-size: 0.7rem;
    }
    #canvas1{ 
        width: 50vw;
        height:80vh;
        margin-left: 1vw;
        margin-top: 1vh;
        display: block;
    }

}
@media (max-width:500px){
    .navmobile{   
        display: block;
        background-color: rgb(60, 55, 77);
    }
    .klappmenue{
        position: relative;
        left:74vw;
        top:30px;
        display: block;
        border: 2px solid grey;
    }
    .ham{
        position: absolute;
        right: 0;
        width: 30px;
        border: 2px solid black;
        background-color: rgb(200, 208, 212);
        display: block;
    }
    .klappmenue a{
        display: block;  
        width: 100px;
        border: none;
        padding: 4px;
        box-shadow: none;
    }
    
    .nav1{
        display: none;
     
    }
    #canvas1{
        width: 300px;
        height:auto;
    }
}
.liste{
padding: 8vw;
   width: 70vw;
   height: 50vh;
   margin-left: auto;
   margin-right: auto;
   background-color: rgb(14, 14, 90,0.3);
   list-style-type: square;
}
.liste a{
    box-shadow: 3px 3px 3px  rgb(81, 72, 114);
}
.zeile{
    font-size: 1rem;
    line-height: 40px;

}
/*===================================Dreiecksinfos=========================*/
.dreiecksinfos{   
   /* background-color:rgba(41, 41, 90, 0.8);*/
    width: 100%;
    height:100vh;
    display: block;
    margin: 0;
}
.dreiecksinfos img{
    width: 100%;
    height: 100%;
}
.text1{
    font-size: 1.3rem;
    padding: 40px;
    display: flex;
    justify-content: space-between;
    height: auto;
    background-color: rgb(97, 86, 72);
}

.text2{
    font-size: 1.3rem;
    height: auto;
    padding: 40px; display: flex;
    background-color: rgb(97, 86, 72);
    justify-content: space-between;
}
.parallax{
    background-image: url(../bilder/hinterg.png); 
    background-size: cover;
    background-attachment: fixed;
    height: 200px;
    width: 100%;
}
.text1 a{
    width: 150px;
    height: 30px;
}
.text2 a{
    width: 150px;
    height: 30px;
}

main{
    margin: 20px;
    display: block;
}
.wahlbereich{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
}
.butti{
    width: 200px;
    background-color: rgb(49, 44, 68); 
    color: rgb(233, 226, 226);
    margin-left: 5%;margin-right: 5%;
    border: 2px solid rgb(39,35,35);
    border-radius: 5px;
    box-shadow: 3px 3px 3px  rgb(187, 177, 177);
}
.text2 .klein{

    display: flex;
    justify-content: center;
    width: 10%;
    height: auto;

}
.text1 .klein{

    display: flex;
    justify-content: center;
    width: 10%;
    height: auto;

}
.laufbilder{
    width: 80%;
    display: flex;
    justify-content: space-around;
   
}
.lauf1{

    position:absolute;
     left:30vw;  
    animation: lauf 3s calc(4) ease-in-out; 
}
.lauf2{
    position:absolute;
     left:10vw;  
    animation: lauf 6s calc(3) ease-in-out; 
}
.lauf3{
    position:absolute;
     left:70vw;  
    animation: lauf 5s calc(2) ease-in-out; 
}
@keyframes lauf{
    10%{transform: translateX(-500px);}
    100%{transform: translateX(1600px);}
}
.weiter{
    position: absolute;
    top:500px;left:200px;
}
.klappe{
    width: 100px;
    position: absolute;
    top:40px;
    font-size: 0.8rem;
    display: none;
    color: #000;
    background-color: rgb(201, 201, 33);
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
a:hover ul{
    background-color: aqua;
    display: block;
}
.aufklapp{  
    width: 90px;
    height: 80px;
    align-items: left;
    display:none;
    padding-top:3px;
    font-size: 0.9rem;
    position: relative;
    left: 5px;top:30px;
    color: white;
    list-style: none;
    padding: 0;
    margin-right: 15px;
    border: 2px solid rgb(14, 11, 11,0.4);
}
.aufklapp a{
    border:none;
    box-shadow: none;
}
.eins{
    display:block;
}