﻿* {
    box-sizing: border-box;
    font-family: Roboto;
}


/*Das Grid*/
.grid1 {
    width: 6.25%;
}
/* eine Spalte*/
.grid2 {
    width: 12.5%;
}
/* zwei Spalte*/
.grid3 {
    width: 18.75%;
}
/* drei Spalte*/
.grid4 {
    width: 25%;
}
/* vier Spalte*/
.grid5 {
    width: 31.25%;
}
/* fünf Spalte*/
.grid6 {
    width: 37.5%;
}
/* sechs Spalte*/
.grid7 {
    width: 43.75%;
}
/* sieben Spalte*/
.grid8 {
    width: 50%;
}
/* acht Spalte*/
.grid9 {
    width: 56.25%;
}
/* neun Spalte*/
.grid10 {
    width: 62.5%;
}
/* zehn Spalte*/
.grid11 {
    width: 68.75%;
}
/* elf Spalte*/
.grid12 {
    width: 75%;
}
/* zwölf Spalte*/
.grid13 {
    width: 81.25%;
}
/* dreizehnte Spalte*/
.grid14 {
    width: 87.5%;
}
/* vierzehnte Spalte*/
.grid15 {
    width: 93.75%;
}
/* fünfzehnte Spalte*/
.grid16 {
    width: 100%;
}
/* sechszehnte Spalte*/

.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11, .grid12, .grid13, .grid14, .grid15, .grid16 {    
    float: left;
    overflow: hidden;
}

.row {
    clear: both;
}

body {
    background-color: whitesmoke;
    background-image: url("/bilder/er-time_1.jpg");
    background-size: contain;
    /*min-height: 100px;*/
    background-repeat: repeat-y;
    margin: 0px;
    padding: 0px;
}

.header {
    background-color: rgba(245, 245, 245, 0.7);
    height: 140px;
}

.left {
    text-align: right;
}

#inhalt h2 {
    color: white;
    text-align: center;
    background-color: black;
    margin-top: 0px;
    margin-bottom: 10px;
    padding: 6px 20px 6px 20px;
}

#inhalt ul {    
    list-style-image: url('/bilder/icons/check.png');
    list-style-position: inside;
}

#inhalt ul li{
    padding-bottom: 10px;
}

.text {
    color: white;
    padding: 10px 20px 40px 20px;
    font-size: 19px;
    margin: 0px;
}

.logo {    
    height: auto;
    text-align: center;    
}

.logintxt{
    font-size: 17px;
    padding: 4px 6px 4px 6px;
    margin: 4px 4px;
}

.loginbt {
    font-size: 17px;
    padding: 3px 4px 3px 4px;
    margin: 3px 4px;
}

nav {   
    position: relative;
    top:-40px;
    height: 40px;
    padding-top: 10px;
    text-align: center;
    font-size: 19px;
    /*background-color: gray;*/
}

a{
    color: black;
    text-decoration: none;
}

a:hover {
    color: red;
}

#inhalt {    
    min-height: 2700px;
    background-color: rgba(0, 0, 0, 0.7);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

footer {
    /*height: 80px;*/
    background-color: whitesmoke;
    padding-top: 40px;
    padding-bottom: 40px;
}

#divmobile {
    text-align: right;
}

#platzhalterformdesktop {
    text-align: right;
    height: 80px;
    padding-top: 20px;
    font-size: 50px;
}

#nachoben {
    position: fixed;
    bottom: 10px;
    right: 10px;    
    width: auto;
    background-color: whitesmoke;
    border-radius: 5px;
}

/*Cookies*/
#div-coockie {
    position: fixed;
    min-height: 150px;    
    background-color: rgba(245, 245, 245, 1);
    color: black;
    text-align: center;
    padding: 0px 20px 20px 20px;
    border: solid 2px black;
    /*border-bottom: solid 4px black;*/
}

#div-coockie a {
    color: green;    
}

#div-coockie a:hover {
    color: blue;
}

#div-coockie button {
    color: green;    
    padding: 4px 10px 4px 10px;
    margin-top: 20px;
}

#div-coockie button:hover {
    color: blue;
}

fieldset{
    background-color: black;
}

legend {
    border: 1px solid white;
    padding: 4px 4px 4px 4px;
    margin-bottom: 4px;
    color: green;
    background-color: black;
}

.txtanmeldeform {
    border: 1px solid black;
    padding: 4px 4px 4px 4px;
    margin-bottom: 4px;
}

.btanmeldeform {
    color: green;    
    padding: 4px 10px 4px 10px;
    margin-top: 20px;
}

/*Desktop*/
@media only screen and (min-width: 1200px) {
    #divmobile {
        display: none;
    }

    #navmobile {
        display: none;
    }

    #platzhalterformdesktop {
        display: none;
    }

    #divformdesktop {
        position: static;
        visibility: visible;
    }

    .grid8 {
        width: 50%;
    }

    #inhalt h2 {
        font-size: 22px;
    }

    #div-coockie {
        font-size: 18px;
        width: 20%;
        bottom: 0%;
        right: 0px;
    }

    #div-coockie button {
        font-size: 18px;        
    }

    #nachoben {        
        height: 40px;       
    }

    .txtanmeldeform, .btanmeldeform, legend{
        font-size: 19px;
    }
    
}

/*Mobile*/
@media only screen and (max-width: 1199px) {

    #navdesktop {
        display: none;
    }

    #platzhalterformdesktop{
        display: block;
    }

    #divformdesktop {
        position: absolute; 
        visibility: hidden;
        background-color: whitesmoke;
        top: 100px;
        width: 100%;
        height: 500px;
        padding-top: 40px;
    }

    #formdesktop select {
        display: block;
        position: relative;
        left: 10%;
        width: 80%;
        padding: 10px 4px;
        margin-bottom: 20px;
        font-size: 50px;
    }

    #formdesktop input {
        display: block;
        position: relative;
        left: 10%;
        width: 80%;
        padding: 10px 4px;
        margin-bottom: 20px;
        font-size: 50px;
    }


    #navmobile {
        display: block;
        text-align: left;   
        position: absolute;
        top: 100px;
        left: 50%;
        width: 50%;
        height: 80%;
        background-color: whitesmoke;
        border: black 1px solid;
    }

    .mobilemenuicon{
        padding-top: 10px;
        height: 90px;
        width: auto;
    }

    #navmobile ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    #navmobile ul li a{
        border-top: 1px solid black;
        border-bottom: 1px solid black;
        font-size: 50px;
        padding: 10px 10px 10px 20px;
        margin-bottom: 10px;       
    }

    #navmobile ul li a:hover{
        background-color: lightsteelblue;
    }
       
    #mobileMenuCloseImg{
        height: 30px;
        width: auto;        
    }

    .text {
        font-size: 36px;
    }

   .grid8{
       width: 100%;
   }

    #inhalt h2 {
        font-size: 48px;
    }

    #div-coockie {
        font-size: 36px;
        width: 100%;
        bottom: 0%;
        right: 0px;
    }

    #div-coockie button {
        font-size: 48px;
    }

    #nachoben {
        height: 80px;
    }

    .txtanmeldeform, .btanmeldeform, legend {
        font-size: 39px;
    }
}
