@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/montserrat-v25-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/montserrat-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/montserrat-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/montserrat-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/montserrat-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/montserrat-v25-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: 'Montserrat-bold';
    font-style: bold;
    font-weight: 600;
    src: url('../fonts/montserrat-v25-latin-600.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/montserrat-v25-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/montserrat-v25-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/montserrat-v25-latin-600.woff') format('woff'), /* Modern Browsers */
         url('../fonts/montserrat-v25-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/montserrat-v25-latin-600.svg#Montserrat') format('svg'); /* Legacy iOS */
}
  

body {
    font-family: 'Montserrat';
    /* , sans-serif */
    font-size: large;
    letter-spacing: 0.3px;
    line-height: 1.5em;
    margin: 0;
    width: 100%;
    max-width: 1366px;
    margin: auto;
    background-color: #565656;
    box-shadow: 0px 0px 10px #333;
    color: #361627;
}

a:link {
    color: #361627;
    text-decoration: none;
}

a:visited {
    color: #361627;
    text-decoration: none;
}

a:hover {
    color: #361627;
    text-decoration: none;
    font-family: 'Montserrat-bold';
}

a:active {
    color: #361627;
    text-decoration: none;
}

h1 {
    margin-top: 90px;
    margin-bottom: 60px;
}

h3 {
    margin-bottom: 10px;
}

/* ------------------------------------------------------------*/
/* structure */
/* ------------------------------------------------------------*/

.boldtext {
    font-family: 'Montserrat-bold';
}

.width100 {
    width: 100%;
}

.hline {
    height: 1px;
    width: 70%;
    border-top: 1px solid #9c838e;
    margin: 30px auto 30px auto;
}

.btnsend {
    width: 100%;
    height: 56px;
    background-color: #361627;
    color: white;
    text-align: center;
    line-height: 56px;
    user-select: none;
    cursor: pointer;
    border-radius: 28px;
    font-family: 'Montserrat';
    font-size: large;
    border: none;
}

.btnsend:hover {
    font-family: 'Montserrat-bold';
}

.btnsend:active {
    background-color: #9c838e;
}

.errormessage {
    width: 100%;
    background-color: red;
    color: white;
    text-align: left;
    margin: auto auto 10px auto;
    padding-left: 10px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: none;
}

.button {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: inline-block;
    padding: 10px 15px 10px 15px;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    background-color: #e1d9dd;
    color: #361627;
    border: 2px solid #9c838e;
    margin-top: 20px;
    width: 88%;
    text-align: center;
}

.button:hover {
    background-color: white;
    font-family: 'Montserrat';
}

.clear {
    clear: both;
}

/* ------------------------------------------------------------*/
/* content */
/* ------------------------------------------------------------*/

#headerimage {
    width: 100%;
    height: 761px;
    background-image: url(../img/headera.png);
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    overflow: hidden;
}

#sglogo {
    width: 90%;
    max-width: 594px;
    height: 122px;
    margin: auto;
    margin-top: 110px;
    /* border: 1px solid white; */
    background-image: url(../img/sglogo2.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
}

#menu {
    width: 90%;
    max-width: 980px;
    height: 56px;
    margin: auto;
    background-color: rgba(0, 0, 0, .4);
    border-radius: 28px;
    margin-top: 410px;
    display: flex;
    justify-content: space-between;
    line-height: 56px;
    color: white;
}

#menu1 {
    text-align: center;
    width: 30%;
}

#menu2 {
    text-align: center;
    width: 20%;
}

#menu3 {
    text-align: center;
    width: 30%;
}

.menublind {
    width: 20%;
}

.menuitem {
    user-select: none;
}

.menuitem :link {
    color: white;
}

.menuitem :visited {
    color: white;
}

.menuitem :hover {
    color: white;
    font-family: 'Montserrat-bold';
}

.menuitem :active {
    color: white;
}

/* ---------------------------------------------- */

#textbox1 {
    background-color: #e1d9dd;
    padding: 1% 15% 1% 15%;
    width: 70%;
    text-align: center;
}

#textboxAGB {
    background-color: #e1d9dd;
    padding: 1% 15% 1% 15%;
    width: 70%;
    text-align: left;
}

.sublist {
    list-style-type: lower-alpha;
}

/* ---------------------------------------------- */

#eag {
    background-color: white;
    /* padding: 1% 10% 1% 10%;
    width: 80%; */
    width: 100%;
    text-align: center;
    overflow: hidden;
}

#eagcont {
    display: flex;
    justify-content: space-between;
}

#img2 {
    width: 50%;
    height: 460px;
    background-image: url(../img/img2.png);
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    border-radius: 0 28px 28px 0;
}

/* #img2 img {
    width: 100%;
    height: auto;
} */

#textbox2 {
    background-color: white;
    width: 30%;
    text-align: left;
    padding: 60px 10% 0 10%;
}

/* ---------------------------------------------- */

#servicegarant {
    background-color: white;
    padding: 1% 10% 1% 10%;
    width: 80%;
    text-align: center;
    overflow: hidden;
}

/* #servicegarant h1 {
    margin-top: 20px;
} */

#servicegarantmarke {
    width: 93%;
    margin: 0 1% 30px 1%;
    padding: 2%;
    border-radius: 28px;
    background-color: white;
    border: 2px solid #9c838e;
    text-align: left;
}

#servicegarantmarke h3 {
    text-align: center;
}

#servicegarantcont {
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
}

.sgcont {
    width: 26%;
    height: 560px;
    margin: 0 1% 0 1%;
    padding: 2%;
    border-radius: 28px;
    background-color: white;
    border: 2px solid #9c838e;
    text-align: left;
}

.sgcont h3 {
    text-align: center;
    margin-top: 0;
}

.sgcont .hline {
    margin-top: 0;
    width: 100%;
}

/* ---------------------------------------------- */

#anmeldung {
    background-color: #361627;
    overflow: hidden;
}

#anmeldungform {
    background-color: #e1d9dd;
    /* height: 400px; */
    width: 76%;
    margin: auto;
    margin-top: 10%;
    margin-bottom: 10%;
    padding: 2%;
    border-radius: 28px;
    /* text-align: center; */
}

#anmeldungform a:link {
    text-decoration: underline;
}

#anmeldungform h3 {
    text-align: center;
    margin-bottom: 70px;
    margin-top: 70px;
}

#anmeldungform input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
    font-size: large;
    border: 1px solid #361627;
    background-color: #e1d9dd;
    padding: 5px 5px 5px 5px;
    margin: 5px 0 5px 0;
    border-radius: 10px;
    color: #361627;
}

/* #AnmeldungFormCheckbox {
    margin-bottom: 40px;
} */

#anmeldungform label {
    font-size: medium;
}

#anmeldungsenden {
    margin-top: 20px;
}

/* ---------------------------------------------- */

#about {
    background-color: white;
    padding: 1% 10% 1% 10%;
    width: 80%;
    text-align: center;
    overflow: hidden;
}

#about h1 {
    text-align: center;
}

.portraitcont {
    width: 200px;
}

#portraits {
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
}

.portrait {
    width: 200px;
    height: 240px;
    border-radius: 28px;
}

#aboutimg1 {
    background-image: url(../img/portrait1.jpg);
    margin: auto;
    background-repeat: no-repeat;  
    background-position: center top;
    background-size: 100% auto;
}

#aboutimg2 {
    background-image: url(../img/portrait2.jpg);
    margin: auto;
    background-repeat: no-repeat;  
    background-position: center top;
    background-size: 100% auto;
}

#aboutimg3 {
    background-image: url(../img/portrait3.jpg);
    margin: auto;
    background-repeat: no-repeat;  
    background-position: center top;
    background-size: 100% auto;
}

#aboutimg4 {
    background-image: url(../img/portrait4.jpg);
    margin: auto;
    background-repeat: no-repeat;  
    background-position: center top;
    background-size: 100% auto;
}

#aboutimg5 {
    background-image: url(../img/portrait5.jpg);
    margin: auto;
    background-repeat: no-repeat;  
    background-position: center top;
    background-size: 100% auto;
}

.subline {
    margin-top: 0;
}

/* ---------------------------------------------- */

#kontakt {
    background-color: #e1d9dd;
    padding: 60px 10% 60px 10%;
    width: 80%;
    text-align: center;
    overflow: hidden;
}

#kontakt p {
    text-align: left;
}

#kontakt input[type="text"], #kontakt textarea {
    width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
    font-size: large;
    border: 1px solid #361627;
    background-color: #e1d9dd;
    padding: 5px 5px 5px 5px;
    margin: 5px 0 5px 0;
    border-radius: 10px;
    color: #361627;
}

#kontakt textarea {
    width: 420px;
    height: 180px;
    font-family: 'Montserrat';
    font-size: large;
    color: #361627;
}

#formcont {
    display: flex;
    justify-content: space-between;
}

#form1, #form2 {
    width: 48%;
    padding: 0 2% 0 0;
    text-align: left;
}

#form2 {
    width: 48%;
    padding: 0 0 0 2%;
    text-align: left;
}

#formCheckbox {
    margin-top: 28px;
}

/* ---------------------------------------------- */

#footer {
    background-color: white;
    text-align: center;
    display: flex;
    justify-content: space-between;
    z-index: 10;
}

#footertext {
    width: 100%;
    text-align: center;
    margin-top: 50px;
    margin-left: 300px;
}

#comic {
    width: 300px;
    height: 463px;
    background-image: url(../img/comic.png);
    background-repeat: no-repeat;
    margin-right: 60px;
    margin-top: -300px;
}

#legals {
    background-color: #361627;
    color: white;
    padding: 5px 5px 5px 30px;
    overflow: hidden;
}

#legals a {
    margin-right: 20px;
}

#legals a:link {
    color: white;
}

#legals a:visited {
    color: white;
}

#legals a:hover {
    color: white;
}

#legals a:active {
    color: white;
}

#legal1 {
    width: 68px;
    float: left;
}

#legal2 {
    width: 133px;
    float: left;
}

#legal3 {
    width: 100px;
    float: left;
}




@media screen and (width < 1366px) {
    #eagcont {
        display: block;
    }

    #img2 {
        border-radius: 28px;
        margin: auto;
        width: 80%;
        background-position: center center;
    }

    #textbox2 {
        margin: auto;
        width: 80%;
    }

    #anmeldungform {
        padding: 2% 2% .5% 2%;
    }
    
    #anmeldungform label {
        font-size: small;
        line-height: normal;
    }

    #anmeldungsenden {
        margin-bottom: 30px;
    }

    #servicegarantmarke {
        width: 96%;
    }

    #servicegarantcont {
        display: block;
    }

    .sgcont {
        height: auto;
        width: 96%;
        margin: auto auto 20px auto;
    }

    #about {
        width: 90%;
        padding: 1% 5% 1% 5%;
    }

    #comic {
        display: none;
    }

    #footertext {
        margin-left: 0;
        margin-top: 0;
    }
  }

  @media screen and (width < 1220px) {
    #portraits{
        display: flex;
        justify-content: center;
        flex-direction: column;
        margin-bottom: 60px;
    }

    .portraitcont {
        align-self: center;
    }
  }

  @media screen and (width < 950px) {
    h1 {
        line-height: normal;
    }

    /* #portraits{
        display: block;
    } */

    #formcont {
        display: block;
    }

    #form1, #form2 {
        width: 100%;
    }

    #form2 {
        padding: 0;
        margin-top: 20px;
    }

    #kontakt textarea {
        width: 100%;
    }

    .menuitem {
        width: 33% !important;
    }

    .menublind {
        width: 0;
      }
  }