@import url("../fonts/webfontkit-lora/stylesheet.css");
@import url("../fonts/webfontkit-hind/stylesheet.css");


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

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

* {
	margin: 0;
	padding:0;
	border: 0;
}

html {
	overflow-y: scroll; /*Rechte Scrollbar immer einblenden*/
	font: 100%;
}

/*================================================*/
/* FARBSCHEMA */
/*================================================*/
/* #f39868 ORANGE */
/* #0e4094 BLAU */

/*================================================*/
/* BILDER */
/*================================================*/
img {
	display: block;/*Bild verhält sich nicht mehr wie Text*/
	max-width: 100%;/*Bild wird skaliert*/
	height: auto;
	margin-top: 1em;
	margin-bottom: 0.5em;
}

.logo, .oben {
	margin: 0 auto;
}

.unternehmer {
	margin-top: 2em;
	margin-bottom: 1em;
}

/*================================================*/
/* TYPOGRAFIE */
/*================================================*/
h1, h2, h3, h4, h5, h6 {
	font-family: 'hindbold', sans-serif;	
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 2px;
}

h1 {
	font-size: 1rem;
	line-height: 1em;
	color: #f39868;
	padding-top: 1em;
	padding-bottom: 0.5em;
}

h2, h3 {
	font-size: 1.25rem;
	line-height: 1.25em;
	color: #0e4094;
	padding-bottom: 0.5em;
}

h2.orange {
	color: #f39868;
	padding-top: 1em;
}

h3 {
	padding-top: 1em;
}

p {
	font-family: 'loraregular', serif;
	font-weight: normal;
	font-size: 0.9rem;
	line-height: 1.5em;
	color: #0e4094;
	margin-bottom: 0.5em;
}

.zentriert {
	text-align: center;
}

article ul.serif {
	font-family: 'loraregular', serif;
	font-size: 0.9rem;
	line-height: 1.5em;
	color: #0e4094;
	margin-bottom: 0.5em;
	list-style-position: outside;
	list-style-image: url(../images/aufz_blau.gif);
	margin-left: 1.5em;
}

article ul.sans {
	font-family: 'hindmedium', sans-serif;
	font-size: 0.9rem;
	line-height: 1.5em;
	color: #0e4094;
	margin-bottom: 0.5em;
	list-style-position: outside;
	list-style-image: url(../images/aufz_orange.gif);
	margin-left: 1.5em;
}

article ul.orangesans {
	font-family: 'hind_regularregular', sans-serif;
	font-weight: normal;
	font-size: 0.9rem;
	line-height: 1.5em;
	color: #f39868;
	margin-bottom: 0.5em;
	list-style-position: outside;
	list-style-image: url(../images/aufz_orange.gif);
	margin-left: 1.5em;
}

article ul.serif li, article ul.sans li, article ul.orangesans li {
	padding-bottom: 0.25em;
}

.zentral {
	font-family: 'hindmedium', sans-serif;
	font-weight: normal;
	font-size: 1rem;
	color: #f39868;
}

.bigwhite, .white {
	color: #fff;
}

.bigwhite {
	font-size: 1rem;
	line-height: 1.75em;
	padding-bottom: 0.5em;
}

article a:link, article a:visited, article a:hover, article a:focus {
	color: #f39868;
	font-family: 'hindbold', sans-serif;
	font-weight: normal;
}

/*================================================*/
/* HEADER */
/*================================================*/
header {
	margin-top: 2em;
}

/*================================================*/
/* SMARTPHONE-NAVIGATION mit MENUBUTTON per CSS */
/*================================================*/

/*Bezugspunkt für die absolute Positionierung des Menübuttons*/
 .menuwrapper {
	 position: relative;
 }
 
 /*Menübutton positionieren*/
div.menubutton {
	display: block;
	position: absolute;
	right: 1em;
	top: 1em;
	z-index: 10;
}
	
/*Menübutton gestalten*/
div.menubutton a {
		display: block;
		color: #f39868;
		background: white;
		text-decoration: none;
		padding: 0.5rem;
		border-radius: 0.25rem;
		border: none;
}
	
/*Menübutton ausblenden*/
div .menubutton a.hidemenu {
		display: none;
	}
  
.navmain {
	background: #f39868;
	font-family: 'hindsemibold', sans-serif;
	font-size: 0.8rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: normal;
}

.navmain ul {
	list-style: none;
	overflow: hidden;
	max-height: 0;/*blendet die Navigation aus*/
}

.navmain ul li {
	padding-top: 1em;
	padding-right: 1em;
	padding-bottom: 1em;
	padding-left: 1em;
}

.navmain ul li a {
	color: #0e4094;
	text-decoration: none;
	display: block;
}

.navmain ul li a:hover {
	color: #fff;
}

/*Wenn #menu in der URL steht, Navigation einblenden*/
#menu:target .navlist {
	max-height: 400px;
}

/*Menu verbergen*/
#menu:target a.showmenu {
	display: none;
}
	
/*Menu einblenden*/
#menu:target a.hidemenu {
	display: block;
}

#menu:target .impressum {
	margin-top: 0;
}

/*================================================*/
/* ARTICLE */
/*================================================*/
article, section {
	padding: 1em;
}

/* #01 #home */
/*================================================*/
#home {
	margin-top: 2em;
	background-color: #0e4094;
	background-image: url(../images/Schreibtisch_Haende_500.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	position: relative;
}

#home h1 {
	padding-top: 1em;
}

#home img {
	margin: 1em auto;
}

p.fragestellung {
	font-family: 'hindsemibold', sans-serif;	
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 1.25rem;
	line-height: 1.25em;
	color: #f39868;
	padding-top: 1em;
	margin-top: 10em;
}

/* #02 #schnelltest */
/*================================================*/
#schnelltest h2 {
	padding-top: 1em;
}

/* #03 #leistungen */
/*================================================*/
#leistungen h2 {
	padding-top: 0.5em;
}

/* #04 #stellhebel */
/*================================================*/
#stellhebel {
	background-image: url(../images/HighFive_800.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 330px;
	margin-top: 1em;
}

#stellhebel h2.orange {
	margin-bottom: 1em;
}

/* #05 #ansatz */
/*================================================*/
#ansatz {
	background-image: url(../images/Meeting_500.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 430px;
	margin-top: 1em;
}

#ansatz h2 {
	margin-bottom: 1em;
	padding-top: 1em;
}

/* #06 #wir */
/*================================================*/
#wir {
	border-bottom: 10px solid #f39868;
	margin-top: 1em;
	margin-bottom: 1.5em;
	background-image: url(../images/Handschlag_half_800.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 1em;
}

/* #07 #kontakt */
/*================================================*/
#kontakt {
	background: #0e4094;
	margin-top: 1em;
}

#kontakt img {
	margin: 0 auto;
}

/*================================================*/
/* KONTAKTBUTTON */
/*================================================*/
.mailbutton {
	background: #f39868;
	font-family: 'hindsemibold', sans-serif;
	font-size: 0.8rem;
	font-weight: normal;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: center;
	padding: 2em;
	overflow: hidden;
	max-width: 200px;
	margin: 3em auto;
}

.mailbutton a:link {
	color: #0e4094;
	text-decoration: none;
}

.mailbutton a:hover {
	color: #fff;
}

/*================================================*/
/* IMPRESSUM */
/*================================================*/
.impressum {
	background-color: #0e4094;
	margin-top: 4.5em;
}

.impressum h2 {
	color: #f39868;
	padding-top: 2em;
}

.impressum h3 {
	color: #f39868;
	font-size: 1rem;
	font-weight: 500;
}

.impressum p {
	color: #fff;
	padding-bottom: 0.5em;
}

.impressum p a:link, .impressum p a:visited {
	color: #fff;
}

.impressum p a:hover, .impressum p a:focus {
	color: #f39868;
}

/*================================================*/
/* FOOTER */
/*================================================*/
footer {
	background-color: #0e4094;
	color: #fff;
	font-family: 'hindmedium', sans-serif;
	text-transform: uppercase;
	text-align: center;
	font-size: 0.8rem;
	line-height: 1.4em;
	padding: 1em;
	margin-top: 0.5em;
}

footer a:link, footer a:visited {
	text-decoration: none;
	color: #f39868;
	padding-left: 1em;
}

footer a:hover, footer a:focus {
	text-decoration: none;
	color: #fff;
	padding-left: 1em;
}

footer a.current {
	color: #fff;
}

/*===================================================================================================*/
/* CODE für Smartphones & kleine Tablets */
/*===================================================================================================*/
@media screen and (min-width: 500px) {
	
	/*++++++++++++++++++++++++++++++++++++++++*/
	/* SCHRIFTGROESSEN ANPASSEN */
    h1 {
      font-size: 1.25rem;
    }
	p, article ul.serif, article ul.sans, article ul.orangesans {
		font-size: 1rem;
	}
	
	#home {
		background-image: url(../images/Schreibtisch_Haende_800.jpg);
	}
	
	#ansatz {
		background-image: url(../images/Meeting_800.jpg);
		padding-top: 760px;
	}
	
	#ansatz h2 {
		font-size: 1.625rem;
	}
	
	#wir p {
		max-width: 500px;
	}
	
}

/*===================================================================================================*/
/* CODE für Tablets */
/*===================================================================================================*/
@media screen and (min-width: 800px) {
	
	h1, h2, p.fragestellung {
		font-size: 2rem;
		line-height: 1.625em;
	}
	
	h3 {
		font-size: 1.625rem;
		line-height: 1.3em;
	}
	
	ul.sans, ul.serif, ul.orangesans {
		font-size: 1.2rem;
		line-height: 1.625em;
		max-width: 500px;
	}
	
	p, .zentral {
		font-size: 1.1rem;
		line-height: 1.625em;
	}
	
	article, section {
		padding: 2em;
	}
	
	.desktopwrapper {
		max-width: 800px;
		margin: 0 auto;
	}
	
	/*++++++++++++++++++++++++++++++++++++++++*/
	/* #01 #home */
	#home {
		background-image:url(../images/Schreibtisch_Haende_3000.jpg);
	}
		
	/*++++++++++++++++++++++++++++++++++++++++*/
	/* #02 #schnelltest */
	#schnelltest p {
		max-width: 500px;
	}
	
	/*++++++++++++++++++++++++++++++++++++++++*/
	/* #03 #leistungen */
	#leistungen p {
		max-width: 500px;
	}
	
	/*++++++++++++++++++++++++++++++++++++++++*/
	/* #04 #stellhebel */
	#stellhebel {
		background-image:url(../images/HighFive_3000.jpg);
		padding-top: 600px;
	}
	#stellhebel p, #stellhebel h3 {
		max-width: 500px;
	}
	
	/*++++++++++++++++++++++++++++++++++++++++*/
	/* #05 #ansatz */
	#ansatz {
		background-image:url(../images/Meeting_1200.jpg);
		padding-top: 930px;
	}
	#ansatz p, #ansatz ul.orangesans {
		max-width: 500px;
	}
	
	/*++++++++++++++++++++++++++++++++++++++++*/
	/* #06 #wir */
	#wir {
		background-image: url(../images/Handschlag_half_1000.jpg);
	}
	#wir p.zentral {
		font-size: 1.2rem;
		padding-top: 0.5em;
	}
	
}

/*===================================================================================================*/
/* CODE für Desktop */
/*===================================================================================================*/
@media screen and (min-width: 1000px) {
	
	/*++++++++++++++++++++++++++++++++++++++++*/
	/* NAVIGATION FÜR GROSSE VIEWPORTS */
	div.menubutton {
		display: none;
	}
	
	.navmain {
		font-size: 0.8rem;
	}
	
	.navmain ul {
		list-style: none;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		max-height: 10em;
	}

	.navmain ul li {
		margin-left: 0.75em;
		padding-top: 1.5em;
		padding-bottom: 1.5em;
	}

	.navmain ul li:first-child {
		margin-left: 0;
	}
	
	/*++++++++++++++++++++++++++++++++++++++++*/
	/* #06 #wir */
	#wir {
		background-image:url(../images/Handschlag_half_3000.jpg);
		padding-top: 4em;
		border-bottom: 20px solid #f39868;
		padding-bottom: 3em;
	}
	.unternehmer {
		margin-top: 3em;
	}
	
	/*++++++++++++++++++++++++++++++++++++++++*/
	/* #07 #kontakt */
	#kontakt {
		margin-top: 2em;
		background-image:url(../images/HighFive_3000_kontakt.jpg);
		background-repeat: no-repeat;
		background-position: center top;
		padding-top: 4.5em;
	}
	#kontakt div.desktopwrapper {
		max-width: 400px;
		margin-bottom: 35em;
	}
	#kontakt p.zentral {
		padding-bottom: 2em;
	}
	#kontakt img {
		margin-bottom: 1em;
	}
	
	.logo {
		margin-top: 3em;
	}
	
	.impressum {
		margin-top: 0;
	}
		
}