.flex-header { 
        display: flex; 
        width: 100%;
        justify-content: center; 
        align-items: center;
    }
    
    .picture-header{
        max-width: 100%;
        width: 100%;
        justify-content: center; 
        align-items: center;
    }

body{
        margin: 0;
}

.grid-container{
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;

        grid-template-areas: 
                        "al Titel1 Titel1 Titel1 Titel1 Titel1 Titel1 ar"
                        "al firstname firstname firstname lastname lastname lastname ar"
                        "al gender gender gender gender gender gender ar"
                        "al nationality nationality nationality nationality nationality nationality ar"
                        "al date_of_birth date_of_birth date_of_birth date_of_birth date_of_birth date_of_birth ar"
                        "al phone_nr phone_nr phone_nr email email email ar"
                        "al Titel2 Titel2 Titel2 Titel2 Titel2 Titel2 ar"
                        "al arrival arrival arrival departure departure departure ar"
                        "al over18 over18 over18 under18 under18 under18 ar"
                        "al Titel3 Titel3 Titel3 Titel3 Titel3 hinweis1 ar"
                        "al message message message message message message ar"
                        "al newsletter newsletter newsletter hinweis2 hinweis2 hinweis2 ar"
                        "al submit submit submit submit submit submit ar"
                        ;
}

/* Titel */
.grid-title1{
        grid-area: Titel1;
        font-family: "montserrat";
        text-align: left;
        font-size: 2.5vw;
        font-weight: bolder;
        margin-top: 2vw;
}

.grid-title2{
        grid-area: Titel2;
        font-family: "montserrat";
        text-align: left;
        font-size: 2.5vw;
        font-weight: bolder;
        margin-top: 4.5vw;
}

.grid-title3{
        grid-area: Titel3;
        font-family: "montserrat";
        text-align: left;
        font-size: 2.5vw;
        font-weight: bolder;
        margin-top: 4.5vw;
}

/* Hinweise */
.hinweis1{
        grid-area: hinweis1;
        margin-top: 5.3vw;
        font-family: "montserrat";
        font-weight: thin;
        font-size: 1.7vw;
}

.hinweis2{
        grid-area: hinweis2;
        margin-top: 2.6vw;
        font-family: "montserrat";
        font-weight: thin;
        font-size: 1.7vw;
        text-align: left;
}

/* Aside & Footer */
.asidelinks{
        grid-area: al;
}

.asiderechts{
        grid-area: ar;
}


/* Eingabefelder */
#message_input, #Guests_under_18_input, #Guests_over_18_input,
#Date_of_departure_choose, #Date_of_arrival_choose,
#choosenationality, #Name_first, #Name_last{
        padding: 0.75vw;
        border: 2px solid #ababaa;
        margin-top: 0.5vw;
        width: 80%;
        border-radius: 7px;
        font-family: "montserrat";
        color: #5e8dbe;
        font-size: 1.5vw;
}


/* Vor- und Nachname */
.c-fname{
        grid-area: firstname;
        font-size: 2vw;
        font-family: "montserrat";
}

.c-lname{
        grid-area: lastname;
        font-size: 2vw;
        font-family: "montserrat";
}

/* Geschlecht */
.gendertitel{
        grid-area: gendertitel;
        text-align: left;
        font-size: 2vw;
        font-family: "montserrat";
}

.c-gender{
        grid-area: gender;
        text-align: left;
        font-size: 2vw;
        font-family: "montserrat";
        margin-top: 4vw;   
        }

#male{
        border: solid #ababaa;
        accent-color: #d91a82;
        -webkit-appearance:button;
        -moz-appearance:button;
        appearance:button;
    }

#female{
        margin-left: 5vw;
        border: solid #ababaa;
        accent-color: #d91a82;
        border-width: auto;
    }

#divers{
        margin-left: 5vw;
        border: solid #ababaa;
        accent-color: #d91a82;
        border-width: auto;
    }

.gendercolor{
        color: #ababaa;
        margin-top: 1vw;
}

/* Nationalitaet */
.c-nationality{
        margin-top: 4vw;
        grid-area: nationality;
        text-align: left;
        font-size: 2vw;
        font-family: "montserrat";
}

/* Date of Birth */
#c-Date_of_birth{
        grid-area: date_of_birth;
        margin-top: 4vw;
        font-family: "montserrat";
        text-align: left;
        font-size: 2vw;
}

#Date_of_birth_choose{
        padding: 0.75vw;
        border: 2px solid #ababaa;
        margin-top: 0.5vw;
        border-radius: 7px;
        font-family: "montserrat";
        color: #5e8dbe;
        font-size: 1.5vw;
}

/* Phonenumer & E-Mail */
#c-phone_nr{
        grid-area: phone_nr;
        margin-top: 4vw;
        font-family: "montserrat";
        font-size: 2vw;
}

#choose_phone_nr{
        padding: 0.75vw;
        border: 2px solid #ababaa;
        margin-top: 0.5vw;
        width: 70%;
        border-radius: 7px;
        font-family: "montserrat";
        color: #5e8dbe;
        font-size: 1.5vw;
}

#c-email{
        grid-area: email;
        margin-top: 4vw;
        font-family: "montserrat";
        font-size: 2vw;
}

#choose_email{
        padding: 0.75vw;
        border: 2px solid #ababaa;
        margin-top: 0.5vw;
        width: 100%;
        border-radius: 7px;
        font-family: "montserrat";
        color: #5e8dbe;
        font-size: 1.5vw;
}

.beispiel_phone_number{
        font-family: "montserrat";
        text-align: left;
        margin-top: 1vw;
        color: #ababaa;
        font-size: 1.5vw;
}

.beispiel_email{
        font-family: "montserrat";
        text-align: left;
        margin-top: 1vw;
        color: #ababaa;
        font-size: 1.5vw;
}

/* Ankunft & Rueckkehr */
#c-Date_of_arrival{
        grid-area: arrival;
        margin-top: 0.5vw;
        font-family: "montserrat";
        text-align: left;
        font-size: 2vw;
}

#Date_of_arrival_choose{
        padding: 0.75vw;
        border: 2px solid #ababaa;
        margin-top: 0.5vw;
        width: 40%;
        border-radius: 7px;
        font-family: "montserrat";
        color: #5e8dbe;
        font-size: 1.5vw;
}

#c-Date_of_departure{
        grid-area: departure;
        margin-top: 0.5vw;
        font-family: "montserrat";
        text-align: left;
        font-size: 2vw;
}

#Date_of_departure_choose{
        padding: 0.75vw;
        border: 2px solid #ababaa;
        margin-top: 0.5vw;
        width: 40%;
        border-radius: 7px;
        font-family: "montserrat";
        color: #5e8dbe;
        font-size: 1.5vw;
}

/* Personenanzahl */
#c-Guests_over_18{
        grid-area: over18;
        margin-top: 4vw;
        font-family: "montserrat";
        text-align: left;
        font-size: 2vw;
}

#Guests_over_18_input{
        padding: 0.75vw;
        border: 2px solid #ababaa;
        margin-top: 0.5vw;
        width: 40%;
        border-radius: 7px;
        font-family: "montserrat";
        color: #5e8dbe;
        font-size: 1.5vw;
}

#c-Guests_under_18{
        grid-area: under18;
        margin-top: 4vw;
        font-family: "montserrat";
        text-align: left;
        font-size: 2vw;
}

#Guests_under_18_input{
        padding: 0.75vw;
        border: 2px solid #ababaa;
        margin-top: 0.5vw;
        width: 40%;
        border-radius: 7px;
        font-family: "montserrat";
        color: #5e8dbe;
        font-size: 1.5vw;
}

/* Kommentare- / Fragebox */
#c-message{
        grid-area: message;
        margin-top: 0.5vw;
        font-family: "montserrat";
        text-align: left;
        font-size: 2vw;
}

/* Monatliches Infoblatt */
#newsletter{
        grid-area: newsletter;
        margin-top: 5vw;
        font-family: "montserrat";
        font-size: 2vw;
        margin-bottom: 1vw;
}

.switch {
        position: relative;
        display: inline-block;
        width: 6vw;
        height: 3.5vw;
        }
        
.switch input {
        opacity: 0;
        width: 0;
        height: 0;
        }
        
.slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
        }
        
.slider:before {
        position: absolute;
        content: "";
        height: 2.6vw;
        width: 2.6vw;
        left: 0.4vw;
        bottom: 0.4vw;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
        }
        
 input:checked + .slider {
        background-color: #d91a82;
        }
        
input:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
        }
          
input:checked + .slider:before {
        -webkit-transform: translateX(2.7vw);
        -ms-transform: translateX(2.7vw);
        transform: translateX(2.7vw);
        }
        
.slider.round {
        border-radius: 34px;
        }
        
.slider.round:before {
        border-radius: 50%;
        }

/* Send-Button */
.submit{
        grid-area: submit;
        margin-top: 8vw;
        padding-top: 1vw;
        padding-bottom: 1vw;
        padding-left: 3vw;
        padding-right: 3vw;
        width: 40%;

        border: 2px solid black;
        border-radius: 15px;

        font-family: "montserrat";
        color: white;
        font-size: 3.5vw;
        font-weight: bolder;
        text-align: venter;
        font-size: 2vw;  
        background-color: #5e8dbe;
}

input:focus {
        outline-color: #d91a82;
        border-radius: 7px;
}