@font-face {
    font-family: 'Outfit';
    src: url('./fonts/Outfit-VariableFont_wght.ttf');
}

body {
    font-family: 'Outfit', sans-serif;
    margin: 0;
}
.main {
    background-color: rgba(2, 69, 122, 1);
}
.head, .headline {
    background-color: rgba(2, 69, 122, 1);
}

.light {
    font-weight: 300;
}

.regular {
    font-weight: 400;
}

.semibold {
    font-weight: 600;
}

.bold {
    font-weight: 700;
}

h1 {
    color: white;
    font-size: 3em;
}
h2 {
    color: #02457a;
}
h3 {
    color: #97cadb;
}
h4 {
    color: #02457a;
    margin-bottom: -1em;
}
.main {
    padding: 0;
    /*background-image: url("./res/Schluesselbund-im-Schubfach-KEMAS-klein.jpg");*/
    /*background-repeat: no-repeat;*/
    /*background-size: cover;*/
}
.head {
    display: flex;
    justify-content: space-between;
}

.headline {
    justify-content: center;
    max-width: 50%;
    margin-left: 25%;
    text-align: center;
    margin-top: 7em;
    padding-bottom: 6em;
}
.headline h3 {
    font-weight: normal;
}

.logo {
    width: 120px;
    height: auto;
    margin: 1em 0 0 2em;

}

.menu {
    color: white;
    margin: 2em 2em 0 0;
    display: flex;
    justify-content: space-between;
    width: 40%;

}
a:link, a:visited {
    text-decoration: none;
    color: white;
}

.content-light {
    background-color:#97cadb;
    /*width: fit-content;*/
    border-radius: 0px 100px 0px 0px;
    display: flex;
    padding-bottom: 7em;
    padding-left: 3em;
    padding-right: 3em;
}
.content-light .inner-left {
    padding-top: 3em;
}

.logo-left {
    position: absolute;
    width: 10%;
    height: auto;
    left: 2em;
    margin-top: -4em;
    max-width: 160px;
}
.logo-right {
    position: absolute;
    width: 10%;
    height: auto;
    right: 2em;
    margin-top: -4em;
    max-width: 160px;
}


.inner-left {
    max-width: 40%;
    /*padding-left: 4em;*/
}
.inner-left img {
    width: 7em;
    margin: 2em 0 -1em 0;
    margin-top: 8em;
}
.inner-right {
    max-width: 40%;
    margin-left: 5%;
    padding-top: 10em;
}
.inner-right img {
    width: 7em;
    margin: 2em 0 -1em 0;
    margin-top: 8em;
}
.right {
    margin-left: 50%;
}

.content-white {
    background-color:white;
    width: fit-content;
    padding-bottom: 15em;
    overflow: auto;
}
.content-white .center .inner-left {
    margin-top: 8em;
    max-width: 55%;
    margin-bottom: 3em;
    text-align: left;
    padding: 0 6em
}

.content-light .inner-right {
    padding-top: 0;
}

.center {
    text-align: center;
}
.flex {
    display: flex;
    padding-left: 3em;
}
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2em;
}
button {
    background-color: #001b48;
    border-radius: 20px;
    padding: .5em 2em;
    outline: none;
    box-shadow: none;
    border-color: #001b48;
    border-style: solid;
    margin: 1em;
}
button.big-button {
    background-color: #02457a;
    border-radius: 0 20px 0 0;
    padding: 1em 5em;
    outline: none;
    box-shadow: none;
    border-color: #02457a;
    border-style: solid;
    margin: 1em;
    flex-basis: auto;
    color: white;
    font-size: 1.2em;
    position: relative;
    height: 4.5em;
    width: 40%;
}
button.big-button p {
    position: absolute;
    left: -.23em;
    bottom: -1.35em;
    color: #97cadb;
    font-size: 3em;
    font-family: Outfit, sans-serif;
}

.extra-big {
    font-size: 10em;
    color: #02457a;
}

input, textarea {
    border: none;
    padding: .5em 1em;
    border-radius: 5px;
    margin: .5em 0;
    font-family: Outfit, sans-serif;
}

input.full, textarea.full {
    width: 100%;
    font-family: Outfit, sans-serif;
}
input.half {
    width: 45%;
    font-family: Outfit, sans-serif;
}
textarea {
    column-count: 5;
    font-family: Outfit, sans-serif;
}

.footer {
    background-color: #001b48;
    min-height: 6em;
    padding-top: .5em;
}
.footer-flex {
    float: right;
    width: 50%;
    justify-content: space-between;
    margin-right: 2em;
    color: white;
    font-size: .7em;
    padding-top: .5em;
}

ul {
    list-style-type: none;
    text-decoration: none;
    color: white;
    margin-top: .5em;
    text-align: right;
}
ul li {
   margin-bottom: .5em;
}
ul.dots {
    list-style: unset;
}
ul.dots li {
    color: black;
    text-align: left;
}


@media screen and (max-width: 600px) {
    .footer-flex {
        max-width: unset;
    }
    .inner-right, .inner-left {
        max-width: unset;
        padding: 1em 1em;
        max-width: 70%;
    }
    .content-light {
        display: block;
    }
    .flex {
        display: block;
        padding-left: 0;
    }
    .flex-center {
        padding: 0;
    }
    .head {
        display: block;
        padding: 1em;
    }
    .menu {
        width: unset;
    }
    form {
        max-width: 75%;
    }
    .form-wrapper {
        padding-left: 0;
    }
    .footer {
        min-height: 8em;
    }
    .content-white .center .inner-left {
        max-width: unset;
    }
    .extra-big {
        margin-top: 0 !important;
    }
    button.big-button {
        width: 90%;
    }
    .logo-right, .logo-left {
        margin-top: -2em;
    }
;
}

.form-wrapper {
    padding-top: 4em !important;
}

@media screen and (min-width: 1200px) {
    .form-wrapper {
        margin-left: 10em;
    }
}