/*
	CSS Stylesheet
	
	Immowelt – Mobile Held
    Frontend Template
	style.css
	
	Immowelt
    www.immowelt.de/mobile-held/
	aktion.immowelt.de/mobile-held/de/
	
		
	-----------------------
	TABLE OF CONTENT
	-----------------------

    0. Allgemein
    1. Hero
    2. Vorteile
    3. Überischt
    4. Zahlen
    5. Gestaltung
    6. Kontakt

	-----------------------

*/


/* 0. Allgemein
__________________________________________________________________________
*/
.button-white,
.button-yellow {
    padding: 8px 64px !important;
    border-radius: 120px !important;
    width: auto !important;
}

html {
    scroll-behavior: smooth;
}

@media (max-width: 479.98px) {
    .button-yellow,
    .button-white {
        width: 100% !important;
        max-width: none !important;
    }
}


/* 1. Hero
__________________________________________________________________________
*/
#hero {
    background-image: url("../DE/img/background-mobile-held.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    overflow: hidden;
    height: auto;
    padding-bottom: 12em;
}

    #hero h2 {
        padding-bottom: 1.75em;
    }

#img-device {
    height: auto;
    filter: drop-shadow(0px 0px 30px rgba(0, 0, 0, 0.25));
}


@media (max-width: 1399.98px) {
}

@media (max-width: 1199.98px) {
}

@media (max-width: 991.98px) {
    #hero {
        padding-bottom: 10em;
        margin-bottom: 3em;
    }

    #img-device {
        height: 100%;
    }
}

@media (max-width: 767.98px) {
    #hero {
        background-image: url("../DE/img/background-mobile-held_mobile_sm.svg");
        padding-bottom: 12em;
    }

    #img-device {
        height: 100%;
        width: 120%;
        padding-bottom: 3em;
    }
}

@media (max-width: 575.98px) {
    #hero {
    }

    #img-device {
        height: 100%;
        width: 160%;
        padding-bottom: 3em;
    }
}



/* 2. Vorteile
__________________________________________________________________________
*/
#vorteile {
    padding-bottom: 5em;
}
.vorteile-hl {
    margin-bottom: 2em;
}

.kachel-vorteile {
    background-color: #fff;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25);
    border-radius: 16px;
    border: none;
    overflow: hidden;
    height: 100%;
    margin: 0 10px 10px 0;
}

.kachel-header {
    padding: 24px 24px 0 24px;
    background-color: #fff;
    border-bottom: 0px;
}

.kachel-body {
    padding: 12px 24px;
}


@media (max-width: 1399.98px) {
}

@media (max-width: 1199.98px) {
}

@media (max-width: 991.98px) {
}

@media (max-width: 767.98px) {
}

@media (max-width: 575.98px) {
}



/* 3. Übersicht
__________________________________________________________________________
*/
#img-ueberblick {
    background: #F7F7F8;
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(247,247,248,1) 50%, rgba(247,247,248,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(50%, rgba(255,255,255,1)), color-stop(50%, rgba(247,247,248,1)), color-stop(100%, rgba(247,247,248,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(247,247,248,1) 50%, rgba(247,247,248,1) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(247,247,248,1) 50%, rgba(247,247,248,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(247,247,248,1) 50%, rgba(247,247,248,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(247,247,248,1) 50%, rgba(247,247,248,1) 100%);
}

#ueberblick {
    background-color: #F7F7F8;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding-bottom: 5em;
}


.box-text {
    height: 100%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.box-image {
    height: auto;
    padding: 0 40px 0 40px;
    margin: 60px 0 60px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .box-image img {
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25);
        border-radius: 8px;
    }

#bannerplatzierung {
    width: 50%;
    height: auto;
    filter: drop-shadow(0px 0px 30px rgba(0, 0, 0, 0.25));
}


@media (max-width: 1399.98px) {
    .box-text {
        height: 100%;
    }

}

@media (max-width: 1199.98px) {
    #ueberblick {
        padding-bottom: 5em;
    }
    .ueberblick-hl {
        margin-bottom: 2em;
    }
    .box-image {
        margin: 40px 0 40px 0;
    }
}

@media (max-width: 991.98px) {
    #ueberblick {
        padding-bottom: 5em;
    }
    .ueberblick-hl {
        margin-bottom: 2em;
    }
    #bannerplatzierung {
        width: 60%;
    }
    .box-text {
    }
    .box-image {
        padding: 0 20px 0 20px;
        margin: 30px 0 30px 0;
    }
}


@media (max-width: 767.98px) {
    #bannerplatzierung {
        width: 80%;
    }
    .box-text {
        height: auto;
        margin: 0px 0 20px 0;
    }
    .box-image {
        height: auto;
        margin: 0 0 10px 0;
    }
}


@media (max-width: 575.98px) {
    #ueberblick {
        padding-bottom: 0em;
    }
    .ueberblick-hl {
        margin-bottom: 3em;
    }
    #bannerplatzierung {
        width: 80%;
    }
    .box-text {
        margin: 20px 0 40px 0;
    }
    .box-image {
        margin: 0 0 10px 0;
    }
}


/* 4. Zahlen
__________________________________________________________________________
*/
.box-chart {
    height: auto;
    padding: 0 30px 0 30px;
    margin: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#zahlen {
    margin-top: 2em;
}

    #zahlen img {
        max-width: 260px;
    }

.zahlen-hl {
    margin-bottom: 4em;
}


@media (max-width: 1399.98px) {
    #zahlen {
        margin-top: 0em;
    }

    .zahlen-hl {
        margin-bottom: 3em;
    }
}

@media (max-width: 1199.98px) {
    #zahlen {
    }
    .zahlen-hl {
    }
}

@media (max-width: 991.98px) {
    #zahlen {
    }
    .zahlen-hl {
        margin-bottom: 1em;
    }
}

@media (max-width: 767.98px) {
    #zahlen {
        margin-top: 3em;
    }
    .zahlen-hl {
    }
}

@media (max-width: 575.98px) {
    #zahlen {
    }
    .zahlen-hl {
    }
}


/* 5. Gestaltung
__________________________________________________________________________
*/
#gestaltung {
    background-image: url("../DE/img/background-gestaltung.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    padding-bottom: 5em;
}

    #gestaltung img {
        max-width: 100%;
        height: auto;
    }

.container-gestaltung {
    padding-top: 16em;
}



@media (max-width: 1399.98px) {
    .container-gestaltung {
        padding-top: 12em;
    }
}

@media (max-width: 1199.98px) {
    .container-gestaltung {
        padding-top: 12em;
    }
}

@media (max-width: 991.98px) {
    #gestaltung {
        padding-bottom: 3em;
    }
    .container-gestaltung {
        padding-top: 15em;
        margin-top: -3em;
    }
}

@media (max-width: 767.98px) {
    #gestaltung {
        background-image: url("img/background-gestaltung_sm.svg");
        padding-bottom: 4em;
    }
    .container-gestaltung {
        padding-top: 20em;
        margin-top: -8em;
    }
    #gestaltung img {
        display: block;
        margin-right: auto;
        margin-left: auto;
        padding-bottom: 2em;
        max-width: 200px;
    }
    #gestaltung h3, #gestaltung h4, #gestaltung p {
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    #gestaltung {
        padding-bottom: 1em;
    }
    .container-gestaltung {
        padding-top: 16em;
        margin-top: -8em;
    }
    #gestaltung img {
        max-width: 140px;
    }
}


/* 6. Kontakt  
__________________________________________________________________________
*/
#kontakt {
    background-color: #F7F7F8;
    border-bottom: 2px solid #f7f7f8;
}

#kontakt h3 {
    font-size: 1.5em;
}

@media (max-width: 1399.98px) {
}

@media (max-width: 1199.98px) {
}

@media (max-width: 991.98px) {
}

@media (max-width: 767.98px) {
    #kontakt {
        padding-top: 5em;
    }
        #kontakt h3 {
            font-size: 1.25em;
        }

        #kontakt .small-txt {
            padding-top: 0;
        }
}

@media (max-width: 575.98px) {
    #kontakt {
        padding-top: 4em;
    }
}

#kontakt h3 {
    line-height: 140%;
    padding-bottom: 0.5em;
}

/* FORMULAR
__________________________________________________________________________
*/


.formular dl {
    margin-bottom: 0;
}

.formular input,
.formular select,
select,
textarea {
    width: 100%;
    max-width: 400px;
}

.formular .plz input {
    width: 30%;
    max-width: 100px;
    display: inline-block;
    float: left;
    margin-right: 10px;
}

.formular .ort input {
    width: 70%;
    max-width: 290px;
    float: left;
    display: inline-block;
}

.formular .alert {
    padding: 0;
    margin: 0;
}

.formular label.label_07 {
    margin-top: -25px;
}

@media(max-width:400px) {
    .formular .plz input {
        width: 30%;
        max-width: 100px;
        display: inline-block;
        float: left;
        margin-right: 5%;
    }

    .formular .ort input {
        width: 65%;
        max-width: 290px;
        float: left;
        display: inline-block;
    }
}