@charset "utf-8";
/* CSS Document */

html{box-sizing: border-box;}
*,*::befor,*::after {box-sizing:inherit;}

body {
font-family: 'Ubuntu', sans-serif;
color:#6d6d6d;
text-align:center;
}

.main_index {
width:700px;
margin:auto;
}

/** Log in Button **/

.log {
	border-radius: 15px;
	width: 90px;
	display: inline;
	padding:4px 10px;
	text-align:center;
	background-color:#fe7800;
}


/** Txt Anpassung **/
/** Neu bei MCL **/
h2.gross {
	text-transform: uppercase;
	padding-bottom:50px;
	padding-top:80px;

}

/** Bilder**/

img.bild_700px {
	max-width:700px;
}

/** Basis Listen **/

.schritte_mobil {
	display:none;
}

.schritte_mobil .schritt {
	border-bottom: solid 2px orange;
	width:280px;
	margin:auto;
	padding-bottom:15px;
}

.schritte_mobil .schritt h6
{
padding-top:20px;
}

.kosten_inhalt p {
	width:400px;
	margin:auto;
}

.burger_menu{
	display:none;
}

input {
	display:none;
}



/*** Header allgemein ****/

header {
	background-image: url("../image/header_desktop.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	height:650px;
}

.header_text img {
	width:120px;
	padding-top:100px;
}

.logo img {
	width:150px;
	position:absolute;
	top:10px;
	left:80px;
}



/*** Main ****/

section {
	padding-top:30px;
}

/**** Index ***/

main img.logo_mcl{
	padding:70px 0px;
	width:400px;
}


/*** Neu bei MCSL ***/

.task_app_bilder img:first-child{
	width:400px;
	margin:auto;
}

.task_app_bilder img {
	padding-bottom:60px;
	padding-top:20px;
}

img.breites_bild {
	max-width:2200px;
	width:100%;
}

.dreier_Bild {
	width:700px;
	padding-top:70px;
	display:inline-flex;
	justify-content: space-between;
	margin-bottom:100px;
}

.kreis_bild
{
	width:200px;
	display:block;
	margin:auto;
	padding-top:50px;
}

/*** Eigene Listen ***/

.abschnitt {
	width:500px;
	margin:auto;
	padding-bottom:30px;
	padding-top:20px;
}


/******** Auflistung*********/

.auflistung {
	border: solid white 2px;
	padding-top:20px;
	width:580px;
	margin:auto;
}

.auflistung_left, .auflistung_right {
	width:280px;
	display:inline-block;
}

.punkt_auflistung img {
	width:30px;
	height:auto;
	display:inline-block;
	padding-right:25px;
	
}

.punkt_auflistung p{
	width:200px;
	text-align:left;
	display:inline-block;
	line-height: 1.2;
}


/****** Mehrkosten*******/

.mehrkosten img {
	width:35px;
	height:auto;
}

.mehrkosten h3 {
	color:white;
}

.mehrkosten .mehrkosten_inhalt p {
	width:120px;
	line-height:1.4;
	padding-top:15px;
}

.mehrkosten_inhalt
{
	width:120px;
}

.mehrkosten_inhalt img {
	width:55px;
}

.mehrkosten_klassen
{
	display:flex;
	flex-direction: row;
	flex-wrap:wrap;
    width:500px;
	margin:auto;
	padding-bottom:60px;
	border-top:solid 2px white;
	padding-top:20px;
}

/**** Kundenspezifische Lösungen***/

.loesungen .loesungen_aufteilung p {
	width:180px;
	text-align:center;
	line-height: 1.4;
	margin:5px;
}

.loesungen_aufteilung
{
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding-top:20px;
	padding-bottom:50px;
	width:580px;
	margin:auto;
	border-top: 2px solid white;
}

.loesungen {
	margin-top:70px;
}


/**** Kosten****/

.kosten {
	background-color:#fe7800;
	color:white;
	padding:80px 20px;
	margin-top:100px;
	height:auto;
}

.kosten_preis {
	display:inline-flex;
	/*width:700px;*/
	justify-content: space-between;
}



.preis {
	border: solid 2px white;
	width:200px;
	margin:40px 10px;
	padding:8px;
}


/** Basis Listen ***/
 
/* Desktop + Tablet */
.schritte {
	display:inline-flex;
	justify-content: space-between;
	margin:120px 0px;

}

.schritte_links {
	width:350px;
	border-right: solid 4px #fe7800;
}

.schritte_rechts {
	width:350px;
	margin-top:200px;
}

.schritt h6 {
	padding-top:50px;
	margin:25px;
	margin-top:40px;
}

.schritt p {
	color:#289ebe;
	font-weight: 600;
	width:300px;
	margin:auto;
}

.schritt img {
	width:250px;
	max-width:200px;
	margin:auto;
	padding-bottom:20px;
}


/** Abschnitte bei den Basis Listen ****/

.qualitaet img:first-child, .einarbeitung img:first-child, img#marktrundgang {
	width:120px;
	padding-top:40px;
}

.qualitaet img:last-child, .checkliste img{
	width:300px;
	padding-top:40px;
	padding-bottom:50px;
}

.checkliste img
{
	padding:10px 0px;
}

/*** Marktrundgang ***/

.marktrundgang
{
	width:700px;
	margin:auto;
	padding-top:40px;
}

/** Impressum + Datenschutz **/

.impressum_datenschutz
{
	text-align: justify;
	padding-top:60px;
	min-height:680px;
}



.impressum_datenschutz h4
{
	text-align:left;
	padding-left:20px;
}

/*** Beispiel Seite ***/

.beispiel img {
    height: auto;
    width: 80px;
}

.zweispaltig {
    width: 700px;
    column-count: 2;
    margin: auto;
    column-gap: 35px;
}

h3#beispielseite {
    width: 500px;
    margin: auto;
    padding-bottom: 50px;
}

.zweispaltig p {
    text-align: justify;
}

.zweispaltig h3:nth-child(2) {
    column-break-after: column;
}

.beispiel h2 {
    padding-left: 20px;
    padding-right: 20px;
}

#kontakt_button {
    border-radius: 25px;
    background-color: #fe7800;
    text-align: center;
    border-style: none;
    padding: 10px;
    padding-left: 25px;
    padding-right: 25px;
    margin-top: 50px;
    margin-bottom: 100px;
}

    #kontakt_button a {
        color: white;
        text-transform: none;
    }


.more {
    width: 500px;
    margin: auto;
    padding-bottom: 80px;
    padding-top: 40px;
}

    .more img {
        width: 300px;
        height: auto;
    }

    .more h2 {
        text-transform: uppercase;
    }

#kontakt {
    background-color: #fe7800;
    color: white;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 40px;
}

    #kontakt h3 {
        color: white;
    }

    #kontakt p a {
        color: white;
        text-transform: none;
    }

    #kontakt p {
        font-size: 16px;
    }

    #kontakt img {
        width: 100px;
        height: auto;
        padding-top: 15px;
    }