@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: 'Allerta Stencil';
    src: url('Allerta_Stencil/AllertaStencil-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}



*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'Allerta Stencil', sans-serif;
    margin:0px;
    padding:0px;
}  
       
body{    
   background-color:#ffee00;
}
     .wrapper{
         width: 1300px; 
         margin:auto;
        }
         nav{
           width: 1300px;
           height: 155px;
           background-color:#000;
           float:left;
             text-align: center;
        } 

       header {
           width: 1300px;
           min-height: 200px;
           background-color:#000;
           float:left;
        }
/*.striche{
  width: 1300px;
  height: 63px;
    background-color:#ffee00;
    float:left;
    transform: scale(1, 1) skew(5deg, -15deg);
    -webkit-transform: scale(1, 1) skew(5deg, -15deg);
-moz-transform: scale(1, 1) skew(5deg, -15deg);
-o-transform: scale(1, 1) skew(5deg, -15deg);
}*/
        
        


       .haupttext{
           width: 1300px;
           min-height: 400px;
           background-color:#000;
           float:left;
           padding: 20px 300px 0px 300px;

        }

.striche{
  width: 1300px;
  height: 300px;
    display: block;
    background-color: #000;
        background-size: cover; /* Bild füllt den gesamten Bereich */ background-position: center; /* Bild wird zentriert */ 
        background-repeat: no-repeat;/* Kein Kacheln */ 
    background-image:url("bilder/Tape.png");
    float:left;
}

       article{
           width: 1300px;
           min-height: 400px;
           background-color:#000;
           float:left;


        }
            h1{
                
               font-size: 30px;
               color:#ffee00;
                background-color:#000;
               margin:50px 0px 20px 0px;
                text-align: center;
                    font-family: 'Allerta Stencil', sans-serif;
            }
     /*       h2{
                
               font-size: 20px;
                color:#63B8ED;
                margin-bottom:20px;
            }*/
            p{
                font-size: 18px;
                margin-bottom:20px;
                color:#ffee00;
                    font-family: 'Allerta Stencil', sans-serif;
            }
figure{
                width: 500px;
            min-height: 350px;
            background-color:#000;
        background-size: cover; /* Bild füllt den gesamten Bereich */ background-position: center; /* Bild wird zentriert */ 
        background-repeat: no-repeat;/* Kein Kacheln */ 
            float:left;
}
    .aa{
                background-image:url("bilder/Lee_Marx_1.png");
       padding-left:-2px;

    }
    .bb{
                background-image:url("bilder/Jacqueline_Gieser_4.png");

    }
    .cc{
                background-image:url("bilder/Paraskevi_Karagkouni_3.png");

    }
    .dd{
                background-image:url("bilder/Leoni_Ackermann_9.png");

    }
    .ee{
                background-image:url("bilder/Enya_Gooessling_5.png");

    }
    .ff{
                background-image:url("bilder/Evelyn_Gordok_7.png");

    }
    .gg{
                background-image:url("bilder/Ebrar_Sahtiyan_6.png");

    }
    .hh{
                background-image:url("bilder/Lasse_Groh_11.png");

    }
    .ii{
                background-image:url("bilder/Mia_Jarczewski_10.png");

    }
    .jj{
                background-image:url("bilder/Isabel_Wohlert_8.png");

    }
    .kk{
                background-image:url("bilder/Luca_Balzen_12.png");

    }

    .ubersch{
            width: 800px;
            min-height: 200px;
            background-color:#000;
            float:left;
    }
    .stext{
            width: 1300px;
            min-height: 200px;
            background-color:#000;
            float:left;
        padding: 100px 300px;
        border-bottom: 2px solid #ffee00 !important;
    }

footer{
    min-height: 20px;
     font-size: 14px;
     background-color:#000;
     text-align: center;
    padding:20px;


}
a,a:hover{
    text-decoration: none;
    color:#ffee00;
    font-family: 'Allerta Stencil', sans-serif;
    font-size:16px;
    margin:16px;
     border-top: 2px solid #ffee00 !important;
}
.fastunten{
    position:fixed;
    bottom:55px;
    right:20px;  
}
.unten{
    position:fixed;
    bottom:5px;
    right:20px;  
}
button {
  background: #000;
  background-image: -webkit-linear-gradient(top, #000, #777);
  background-image: -moz-linear-gradient(top, #000, #777);
  background-image: -ms-linear-gradient(top, #000, #777);
  background-image: -o-linear-gradient(top, #000, #777);
  background-image: linear-gradient(to bottom, #000, #777);
  -webkit-border-radius: 30;
  -moz-border-radius: 30;
  border-radius: 30px;
  text-shadow: 2px 2px 3px #444;
  font-family: 'Allerta Stencil', sans-serif;
  color: #ffee00;
  font-size: 15px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

button:hover {
  background: #777;
  background-image: -webkit-linear-gradient(top, #777, #000);
  background-image: -moz-linear-gradient(top, #777, #000);
  background-image: -ms-linear-gradient(top, #777, #000);
  background-image: -o-linear-gradient(top, #777, #000);
  background-image: linear-gradient(to bottom, #777, #000);
  text-decoration: none;
}
 @media all and (max-width: 1400px), all and (max-device-width:1400px)
{
    

      .wrapper{
         width: 800px; 
         margin:auto;
        }
         nav{
           width: 800px;
           height: 155px;
           background-color:#000;
           float:left;
             text-align: center;
        } 

       header {
           width: 800px;
           min-height: 200px;
           background-color:#000;
           float:left;
        }
/*.striche{
  width: 1300px;
  height: 63px;
    background-color:#ffee00;
    float:left;
    transform: scale(1, 1) skew(5deg, -15deg);
    -webkit-transform: scale(1, 1) skew(5deg, -15deg);
-moz-transform: scale(1, 1) skew(5deg, -15deg);
-o-transform: scale(1, 1) skew(5deg, -15deg);
}*/
        
        


       .haupttext{
           width: 800px;
           min-height: 400px;
           background-color:#000;
           float:left;
           padding: 100px 100px;

        }

.striche{
  width: 800px;
  height: 180px;
    background-color:#000;

}

       article{
           width: 800px;
           min-height: 400px;
           background-color:#000;
           float:left;


        }
            h1{
                
               font-size: 30px;
               color:#ffee00;
                background-color:#000;
               margin:50px 0px 20px 0px;
                text-align: center;
                    font-family: 'Allerta Stencil', sans-serif;
            }
     /*       h2{
                
               font-size: 20px;
                color:#63B8ED;
                margin-bottom:20px;
            }*/
            p{
                font-size: 18px;
                margin-bottom:20px;
                color:#ffee00;
                    font-family: 'Allerta Stencil', sans-serif;
            }

    figure{
            width: 300px;
            min-height: 210px;
            background-color:#000;
            float:left;
    }
    .ubersch{
            width: 500px;
            min-height: 200px;
            background-color:#000;
            float:left;
    }
    .stext{
            width: 800px;
            min-height: 200px;
            background-color:#000;
            float:left;
        padding: 100px 60px;
    }

footer{
     font-size: 14px;
}
    
    
}

 @media all and (max-width: 900px), all and (max-device-width:900px)
{
         .wrapper{
         width: 360px; 
         margin:auto;
        }
         nav{
           width: 360px;
           height: 155px;
           background-color:#000;
           float:left;
             text-align: center;
        } 

       header {
           width: 360px;
           min-height: 200px;
           background-color:#000;
           float:left;
        }
/*.striche{
  width: 1300px;
  height: 63px;
    background-color:#ffee00;
    float:left;
    transform: scale(1, 1) skew(5deg, -15deg);
    -webkit-transform: scale(1, 1) skew(5deg, -15deg);
-moz-transform: scale(1, 1) skew(5deg, -15deg);
-o-transform: scale(1, 1) skew(5deg, -15deg);3
}*/
        
        


       .haupttext{
           width: 360px;
           min-height: 400px;
           background-color:#000;
           float:left;
           padding: 30px 20px;

        }

.striche{
  width: 360px;
  height: 80px;
    background-color:#000;
    float:left;
}

       article{
           width: 360px;
           min-height: 400px;
           background-color:#000;
           float:left;


        }
            h1{
                
               font-size: 20px;
               color:#ffee00;
                background-color:#000;
               margin:20px 0px 20px 0px;
                text-align: center;
                    font-family: 'Allerta Stencil', sans-serif;
            }
     /*       h2{
                
               font-size: 20px;
                color:#63B8ED;
                margin-bottom:20px;
            }*/
            p{
                font-size: 14px;
                margin-bottom:10px;
                color:#ffee00;
                    font-family: 'Allerta Stencil', sans-serif;
            }

    figure{
            width: 100%;
            min-height: 250px;
            background-color:#000;
            float:left;


    }
    .ubersch{
            width: 360px;
            min-height: 60px;
            background-color:#000;
            float:left;
    }
    .stext{
            width: 360px;
            min-height: 60px;
            background-color:#000;
            float:left;
        padding: 100px 20px;
    }

footer{
     font-size: 14px;
}
}