@import url(mini-reset.css);


/* lato-300 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/lato-v24-latin-300.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* lato-regular - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/lato-v24-latin-regular.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* lato-700 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/lato-v24-latin-700.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* italiana-regular - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Italiana';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/italiana-v20-latin-regular.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* dancing-script-600 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Dancing Script';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/dancing-script-v25-latin-600.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



.button {
    display: inline-block;
    padding: 15px 40px;
    align-items: center;
    gap: 10px;

    border-radius: 10px;
    border: 2px solid var(--Blue, #00587C);
    background: var(--Gradient-1, linear-gradient(85deg, #177CA6 0.6%, #00587C 99.4%));

    color: #FFFAEE;
    text-align: center;
    font-family: Lato;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.button:hover {
    background: linear-gradient(85deg, #1D87B3 0.6%, #066B95 99.4%);
    color: #F3E4BB;
    border-bottom: 2px solid var(--Blue, #00587C);
}

a,
a:active,
a:visited {
    color: #FFFAEE;
    text-decoration: none;
    padding-bottom: 5px;
}

a:hover {
    border-bottom: 2px solid #FFFAEE;
}


body {
    background-color: #FFFAEE;
    font-family: lato;
    font-weight: 300;
}

p {
    color: #07334D;
    font-family: Lato;
    font-size: 25px;
    font-style: normal;
    font-weight: 300;
    line-height: 32px;
    padding-bottom: 25px;
}

.imprint-headline {
    color: #00587C;
    font-family: Lato;
    font-size: 34px;
    font-style: normal;
    font-weight: 400;
    line-height: 47px;
    padding-bottom: 10px;
}

.imprint-headline_3 {
    font-size: 25px;
}

.imprint-headline_3 {
    font-size: 20px;
}

a.imprint-link,
a:hover.imprint-link {
    color: #00587C;
    text-decoration: underline;
}

a.no-decoration,
a:hover.no-decoration {
    text-decoration: none;
    border: none;
}

header {
    /* background-color: #00587C; */
    background: linear-gradient(85deg, #15688A 0.6%, #044763 99.4%);
    width: 100%;
    flex-shrink: 0;
}

.header__wrapper {
    /* background: radial-gradient(202.59% 141.93% at 44.84% 58.88%, #177CA6 0.62%, #00587C 53.5%); */
    /* background: linear-gradient(85deg, #15688A 0.6%, #044763 99.4%); */
    max-width: 1512px; 
    margin: 0 auto;
    flex-shrink: 0;
}

.header__logo {
    max-width: 720px;
    height: auto;
    flex-shrink: 0;
    margin: 0 auto;
    width: 100%;
    padding: 10px 5%;
}


.description {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 80px 50px;
}

.description__headline {
    padding-bottom: 50px;
    color: #00587C;
    font-family: Lato;
    font-size: 34px;
    font-style: normal;
    font-weight: 400;
    line-height: 47px;
}

.description__headline_accentuate {
    font-family: Italiana;
    font-size: 50px;
    font-weight: 400;
    line-height: 47px;
}

.description__paragraph_capitals {
    text-transform: uppercase;
    color: #00587C;
}

.description__paragraph_bold {
    font-weight: 400;
}

.description__paragraph_blue {
    color: #00587C;
}

.description__paragraph_underline {
    text-decoration: underline;
}

ul {
    padding: 0 30px 25px 30px;
    margin-top: -15px
}

li {
    font-family: Lato;
    font-size: 25px;
    font-style: normal;
    font-weight: 300;
    line-height: 38px;
    list-style: circle;
    color: #07334D;
}

.illustration {
    /* background-color: #00587C; */
    background: linear-gradient(85deg, #15688A 0.6%, #044763 99.4%);
    margin: 0 auto;
}

.illustration__image-container {
    margin: 0 auto;
    width: 100%;
    max-width: 1512px;
}


.introduction {
    margin-top: 80px;
}

.introduction__portait {
    width: 100%;
    max-width: 490px;
    height: auto;
    float: right;
    margin-top: -180px;
    padding: 30px;
}

.introduction__headline {
    position: relative;
    left: -20px;
}

.introductionn__headline_big {
    color: #00587C;
    font-family: "Dancing Script";
    font-size: 80px;
    font-style: normal;
    font-weight: 400;
    line-height: 47px;
}

.introduction__text_special-position {
    position: relative;
    top: -50px;
    left: 20px;
}






.dark-background {
    /* background-color: #0B4B72; */
    background: linear-gradient(85deg, #15688A 0.6%, #044763 99.4%);
}

.full-width {
    width: 100%;
}

.get-in-touch {
    /* display: flex;
    flex-direction: row;
    justify-content: space-between; */
    max-width: 1024px;
    margin: auto;
}

.get-in-touch__wrapper {
    display: flex;
    flex-direction: row;
}

.contact-icons {
    display: flex;
    flex-direction: row;
    padding-left: 0;
    padding-top: 30px;
}

.contact-icons__element {
    list-style: none;
    margin-right: 20px;
    padding-bottom: 0;
}

.contact-icons__element a:hover {
    border: none;
    position: relative;
    top: 2px;
}

.get-in-touch_portrait {
    max-width: 500px;
    width: 100%;
    align-self: center;
}

h3 {
    color:#F3E4BB;
    font-family: Lato;
    font-size: 34px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.get-in-touch__content {
    padding: 40px 50px 0 50px;
}

.paragraph_color-light {
    color: #F3E4BB;
}


.get-in-touch__headline {
    margin-bottom: 30px;
}

.testimonials {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 80px 0;
}

.testimonial {
    /* background-color: #07334D; */
    background: linear-gradient(85deg, #15688A 0.6%, #044763 99.4%);
    padding: 40px 60px;
    position: relative;
}

.testimonial__text {
    color: #F3E4BB;
    font-family: "Dancing Script";
    font-weight: 400;
    padding-right: 70px;
    font-size: 30px;
    line-height: 40px;
}

.testimonial__name {
    color: #F3E4BB;
    padding-bottom: 0;
}

.testimonial__image {
    width: 118px;
    height: 129px;

    float: right;
    position: relative;
    left: 100px;
}


.teaser-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    max-width: 1400px;
    margin: 0 auto;
}

.teaser {
    background-color: #FBFAF8;
    border: 2px solid #C59A16;
    box-sizing: border-box;
    max-width: 30%;
}

.teaser_border-alternate {
    border-color: #0B4B72;
}

.teaser__image {
    width: 100%;
}

.teaser__content {
    padding: 30px;
}

.teaser__headline {
    color: #00587C;
    font-family: Lato;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px;
    padding-bottom: 20px;
}

.teaser__headline_accentuate {
    font-family: Italiana;
    font-size: 40px;
    font-weight: 400;
    line-height: 47px;
}

.teaser__text {
    font-size: 20px;
    line-height: 28px;
    padding-bottom: 40px;
}




.teaser__button {
    margin: 0 auto;
}


footer {
    background-color: #0B4B72;
    margin-top: 50px;
}

.footer-list {
    padding: 45px 0 100px 0;
    width: 100%;
    max-width: 1000px;
    margin:  0 auto;
    display: flex;
    flex-direction: row;
    justify-items: left;
    column-gap: 20px;
    flex-wrap: wrap;
}

.footer-list__item {
    list-style: none;
    color: #F3E4BB;
    font-size: 20px;
}

@media only screen and (max-width: 1024px) {
    
    .teaser__headline {
        font-size: 24px;
        line-height: 30px;
    }
    .teaser__headline_accentuate {
        font-size: 30px;
        line-height: 38px;
    }

    .testimonials {
        padding: 80px 8% 80px 5%;
    }

    .introduction__portait {
            max-width: 400px;
        }
}

@media only screen and (max-width: 900px) {
    
    p {
        font-size: 20px;
        line-height: 28px;
    }

    .button {
        font-size: 20px;
    }

    .teaser-container {
        flex-direction: column;
        row-gap: 30px;
    }

    .teaser {
        max-width: 60%;
        align-self: center;
    }

    .get-in-touch__headline {
        font-size: 24px;
        line-height: 30px;
        margin-bottom: 15px;
    }
    
    .introduction__portait {
        max-width: 300px;
    }

    .description__headline {
        padding-bottom: 25px;
    }
}

@media only screen and (max-width: 770px) {

    .description {
        width: 100%;
        max-width: 1000px;
        margin: 0 auto;
        padding: 40px 5%;
    }

    .description__headline {
        padding-bottom: 30px;
    }

    .description__headline_accentuate {
        font-size: 40px;
    }

    p {
        padding-bottom: 15px;
        font-size: 20px;
        line-height: 28px;
    }

    li {
        font-size: 20px;
        line-height: 28px;
    }

    .testimonial__image {
        padding: 0 0 0 5%;
        top: 0;
        left: 0;
    }
    .testimonial__text {
        /* padding-right   : 0px; */
    }
    .introduction {
        padding: 100px 5% 40px 5%;
    }
    .get-in-touch {
        width: 70%;
        margin: 0 auto;
        padding: 20px 0;
    }

    .get-in-touch__wrapper {
        flex-direction: column-reverse;
    }

    .get-in-touch__content {
        padding: 40px 0 0 0;
    }

    .introductionn__headline_big {
        font-size: 60px;
    }
    .description__headline {
        font-size: 28px;
        line-height: 28px;
    }
}

@media only screen and (max-width: 600px) {
    
    .teaser {
        max-width: 80%;
        align-self: center;
    }

    .testimonials {
        padding: 80px 0;
    }

    .testimonial {
        padding: 40px 12%;
    }
    .introduction__portait {
        float: none;
        margin: 0 auto;
    }
}