/* --------------------------------------------------------------------------------------------
   --------------------------------------------------------------------------------------------
	                Hauser Concept CSS         2016
   --------------------------------------------------------------------------------------------
   -------------------------------------------------------------------------------------------- */
@import url(https://fonts.googleapis.com/css?family=Raleway:300,700);
@import url("../font-awesome/css/font-awesome.css");/*Icon-Fonts*/


*{margin: 0; padding: 0; box-sizing: border-box;}

html{ 
	font-size:100%;
	-webkit-text-size-adjust: none;
	height: 100%;
	}
body {
	background-image:url(../Bilder/hg.gif);
	font-size: 1em;
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	color:#fff;
	height: 101%;
	letter-spacing: 1.2px;
	padding:15px;
	 
	}
.backgr {background-color: white;}
.kl {font-size: 10px;}
/* ----------------------------------------------
	          Titel / Absatz 
   ---------------------------------------------- */		
p {margin-bottom: 10px; line-height: 1.5em;}
.bold {font-weight: 700;}
.fett {font-weight: bold;}

.homestory {color: #a2c3d3;}
/* -------------------------------------
                Header 
   ------------------------------------- */
body>header {/* - erster Header im Body - */
	padding:20px 0 15px 0;
	position:relative;	
	min-height: 30px;
	background-color:rgba(91,91,91,0.2);
	}

.menubutton {
    position:absolute;
    right:0;
    top:15px;
    z-index: 400;
    font-size:1.5em;
	}
.menubutton a{color: #9b9ba4;}
.menubutton a:hover{color: #ffffff;}
li{margin: 9px 0;}

img[alt^="logo.gif"] {display: none;}/* - grosses Logo ausblenden - */
img[alt^="logo_kl.gif"] {padding-top: 0;}

/* -------------------------------------
               navigavtion
   ------------------------------------- */ 
ul {list-style: none; color: #363636;}
#descnav {display: none;}
#mainnav ul {margin: 25px 0 0 0; letter-spacing: 2px;}
#mainnav li a, a:visited {color: #fff;}
#mainnav li:hover a, a:visited {color: #363636;}
#mainnav .on {color: #363636;}
#mainnav a:hover {transition:all 0.8s ease-in-out 0s; color: #363636;}

.eins, .zwei, .drei, .vier, .fuenf, .sechs {
    background-color: transparent;
    width: 100%;
    transition-property: background-color, color, width;
    transition-duration: 1s, 2s, 700ms ;
    transition-timing-function: linear, ease-in, ease;
    transition-delay: 0s, 700ms, 0s;
}
.eins:hover {
    background-color: #efcdd3;
    width: 100%;
}
.eins:before {
	content: " ";
	border-left: 20px solid #efcdd3;
	padding-left: 10px;
}
.einssub, .zweisub, .dreisub, .viersub, .furenfsub, .sechssub {
    background-color: transparent;
    width: 90%;
    transition-property: background-color, color, width;
    transition-duration: 1s, 2s, 700ms ;
    transition-timing-function: linear, ease-in, ease;
    transition-delay: 0s, 700ms, 0s;
	margin-left: 30px;	
}
.einssub:hover {background-color: #efcdd3; width: 90%;}
.einssub:before {
	content: " ";
	border-left: 7px solid #efcdd3;
	padding-left: 10px;
}
.einson {background-color: #efcdd3; padding-left: 30px;}
#mainnav .einson a, a:visited, a:active {color: #363636;}

.rosa {color: #efcdd3; font-weight:700; margin-bottom:0;}/*Titel im Text*/
.rosa2 {color: #efcdd3; font-weight:700; margin-top: 0; margin-bottom:10px;}

.zwei:hover {
    background-color: #a2c3d3;
    width: 100%;
}
.zwei:before {
	content: " ";
	border-left: 20px solid #a2c3d3;
	padding-left: 10px;
}
.zweisub:hover {background-color: #a2c3d3; width: 90%;}
.zweisub:before {
	content: " ";
	border-left: 7px solid #a2c3d3;
	padding-left: 10px;
}
.zweion {background-color: #a2c3d3; padding-left: 30px;}
#mainnav .zweion a, a:visited, a:active {color: #363636;}

.gru {color: #a2c3d3; font-family:"Times New Roman", Times, serif; font-size: 1.2em; margin-bottom: 25px;}
.blau {color: #a2c3d3; font-weight:700; margin-top: 20px; margin-bottom:0;}/*Titel im Text HOMESTORY*/
.blau3 {color: #a2c3d3; font-weight:700; margin-bottom:0;}/*Titel im Text HOMESTORY first*/
.blau2 {color: #a2c3d3; font-weight:700; margin-top: 10px; margin-bottom:0;}/*Titel im Text*/

.drei:hover {
    background-color: #e9edbc;
    width: 100%;
}
.drei:before {
	content: " ";
	border-left: 20px solid #e9edbc;
	padding-left: 10px;
}
.dreisub:hover {background-color: #e9edbc; width: 90%;}
.dreisub:before {
	content: " ";
	border-left: 7px solid #e9edbc;
	padding-left: 10px;
}
.dreion {background-color: #e9edbc; padding-left: 30px;}
#mainnav .dreion a, a:visited, a:active {color: #363636;}

.gelb {color: #e9edbc; font-weight:700; margin-bottom:0;}
.gelb2 {color: #e9edbc; font-weight:700; margin-top: 10px; margin-bottom:0;}

.vier:hover {
    background-color: #b2d5cf;
    width: 100%;
}
.vier:before {
	content: " ";
	border-left: 20px solid #b2d5cf;
	padding-left: 10px;
}
.viersub:hover {background-color: #b2d5cf; width: 90%;}
.viersub:before {
	content: " ";
	border-left: 7px solid #b2d5cf;
	padding-left: 10px;
}
.vieron {background-color: #b2d5cf; padding-left: 30px;}
/*#mainnav .vieron:hover {width: 100%;}*/
#mainnav .vieron a, a:visited, a:active {color: #363636;}

.gruen {color: #b2d5cf; font-weight:700; margin-bottom:0;}
.gruen2 {color: #b2d5cf; font-weight:700; margin-top: 10px; margin-bottom:0;}

.fuenf:hover {
    background-color: #9b9ba4;
    width: 100%;
}
.fuenf:before {
	content: " ";
	border-left: 20px solid #9b9ba4;
	padding-left: 10px;
}
.fuenfsub:hover {background-color: #9b9ba4; width: 90%;}
.fuenfsub:before {
	content: " ";
	border-left: 7px solid #9b9ba4;
	padding-left: 10px;
}
.fuenfon {background-color: #9b9ba4; padding-left: 30px;}
#mainnav .fuenfon a, a:visited, a:active {color: #363636;}

.grau {color: #9b9ba4; font-weight:700; margin-bottom:0;}
.grau2 {color: #9b9ba4; font-weight:700; margin-top: 10px; margin-bottom:0;}

.sechs:hover {
    background-color: #e5bf8f;
    width: 100%;
}
.sechs:before {
	content: " ";
	border-left: 20px solid #e5bf8f;
	padding-left: 10px;
}
.sechssub:hover {background-color: #e5bf8f; width: 90%;}
.sechssub:before {
	content: " ";
	border-left: 7px solid #e5bf8f;
	padding-left: 10px;
}
.sechson {background-color: #e5bf8f; padding-left: 30px;}
#mainnav .sechson a, a:visited, a:active {color: #363636;}

.orange {color: #e5bf8f; font-weight:700; margin-bottom:0;}
.orange2 {color: #e5bf8f; font-weight:700; margin-top: 10px; margin-bottom:0;}

/* -------------------------------------
                Inhaltsboxen    
   ------------------------------------- */
#boxen article {
	width: calc(100% / 1 - 0);
	padding: 15px 0 0 0 ;
	margin: 0;
	position: absolut;
	overflow: hidden;
	flex-grow: 1;
	flex-basis: auto;
}
#boxen article img{max-width:100%; margin-bottom: 5px;}
.first {background-color:rgba(91,91,91,0.2);}/*article links*/


/* -------------------------------------
              Attribut-Selektoren    
   ------------------------------------- */
.top {
	font-size:2rem;
	position:fixed;
	bottom:25px;
	right:15px;
	padding: 2px 15px;
	box-sizing:border-box;
	box-shadow: 1px 3px 10px -5px #000, 
	-9px -8px 30px 0 #fff inset;
	background:#9b9ba4;
}
.top:hover {
	background-color:#fff;
	padding: 0 15px 4px 15px;
	transition:all 0.5s ease-in-out 0s;
	box-shadow: 2px 2px 22px #ffffff inset;
}
a[href ^="#top"]:before {
	font-family: 'FontAwesome';
	content: "\f106";
	color:#464646;
}
.top a:hover {
	color:#464646;
}
a[href ^="mailto"]:before {
	content: "\f003";
	font-family: 'FontAwesome';
	margin-right: 5px;
	} 
	
a[href ^="http://"]:before {
	content: "\f08e";
	font-family: 'FontAwesome';
	margin-right: 5px;
}

a[href *=".pdf"]:before {
	content: "\f1c1";
	font-family: 'FontAwesome';
	margin-right: 5px;
	font-size:1em;
   }

/* -------------------------------------
                  Other    
   ------------------------------------- */   
::selection {
   background: #9b9ba4;
   color: #fff;
   }
::-moz-selection {
   background: #9b9ba4;
   color: #fff;
   }
.intro img[alt^="logo_kl.gif"] {padding-bottom: 15px;}
ol{
	list-style-position: outside;
	list-style-type: disc;
	padding-left: 15px;
	margin-bottom: 10px!important;
}
ol li {margin: 0; line-height: 1.5em;}
.bild {display: none;}
.bild2 {float: none; margin-right: 0; margin-bottom: 15px;}
.eb2 img {	display: inline; width:100px; height:80px;}
.hallointernet2 img {display: inline; width:150px; height:57px;}
.eb img {display:none;}
.hallointernet img {display:none;}
.tipps img {display:inline;}
.tipps2 img {display:none;}

/* -------------------------------------
                Footer    
   ------------------------------------- */
footer{
	padding: 25px 0/*15px*/ 250px 0/*15px*/;
	/*border-top: 1px solid #9b9ba4;*/
	color:#9b9ba4;
	background-color:rgba(91,91,91,0.2);
	}
.footer-segment {margin: 0;}
.left {float: left; margin-bottom: 15px;  border-bottom: 1px solid #e0e0e0; display:block; min-width:300px;}
.right{float: left; padding-top: 15px;}

footer .footer-segment a, a:visited, a:active{color:#9b9ba4;}
footer .footer-segment a:hover{color: #fff;}

.left img[alt^="logo_kl.gif"] {display: none;}

/* -------------------------------------
                Hoovering    
   ------------------------------------- */
a, a:visited, a:active{ color: #ffffff; text-decoration:none;}
a:hover {color:#9b9ba4;}

#boxen .second a, a:visited, a:active{ color: #ffffff; text-decoration:underline;}
#boxen .second a:hover {color:#9b9ba4;}
#boxen .first a, a:visited, a:active{ color: #ffffff; text-decoration:none;}
#boxen .first a:hover {color: #9b9ba4;}
h1 a, a:visited, a:active {color:#ffffff;	}
h2 a, a:visited, a:active {color:#ffffff;	}
h3 a, a:visited, a:active {color:#ffffff;	}
h1 a:hover {color:#9b9ba4;	}
h2 a:hover {color:#9b9ba4;	}
h3 a:hover {color:#9b9ba4;	}

/* ----------------------------------------------
	        Media Queris min-width: 480px
   ---------------------------------------------- */
@media screen and (min-width: 517px) {
.right{float: right; text-align:right; padding-top: 0;}
.left {border-bottom: none;}
}

/* ----------------------------------------------
	        Media Queris min-width: 850px
   ---------------------------------------------- */
@media screen and (min-width: 850px) {
.menubutton {right:0; top:15px;}
body>header {/* - erster Header im Body - */
	padding:20px 15px 15px 15px;
	}
/*#mainnav ul {margin: 25px 15px 0 15px;}*/
#boxen {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	}
#boxen article {
	width: calc(100% / 2 - 0);
	margin: 0;
	padding: 15px;
	position: absolut;
	overflow: hidden;
	flex-grow: 1;
	flex-basis: auto;
}
.second img{/*width: 49% !important; height:100%;*/}
.first img{width: 100%}
.eb img {display: inline; width:100px; height:80px;}
.hallointernet img {display: inline; width:150px; height:57px;}
.eb2 img {display:none;}
.hallointernet2 img {display:none;}
.tipps img {display:none;}
.tipps2 img {display:inline;}

.first {width:30%;/* float: left;*/background-color:rgba(91,91,91,0.2); padding: 15px !important;}/*article links*/
.second {width:70%;}/*article rechts*/

article {border-bottom: none;}

.footer-segment {
	max-width:1070px;
	margin: 0 auto;
	}
.footer {margin-top: 20px; padding-left: 15px; padding-right: 15px;}
}
/* ----------------------------------------------
	  Media Queris min-width: 1024px
   ---------------------------------------------- */
@media screen and (min-width: 1024px) {
	
li{margin: 0 0 15px 0;}
#descnav {display: inline;}
#descnav ul {margin:0; letter-spacing: 2px;}
#descnav li a, a:visited {2px; color: #fff;}
#descnav li:hover a, a:visited {color: #363636;}
.eins, .zwei, .drei, .vier, .fuenf, .sechs {width: 500px;}

#descnav .einson a, a:visited, a:active {color: #363636;}/*subnavi-links*/
#descnav .einson a:hover {color:#ffffff;}
#descnav .vieron a, a:visited, a:active {color: #363636;}/*subnavi-links*/
#descnav .vieron a:hover {color:#ffffff;}
#descnav .sechson a, a:visited, a:active {color: #363636;}/*subnavi-links*/
#descnav .sechson a:hover {color:#ffffff;}


/*subnavi bei hover einblenden*/
/*.eins .subnav{display: none;}
.eins:hover .subnav{display: inline;}*/
.subnav, .subnavon{margin-left: 70px;}
.subnav:before, .subnavon:before {
	font-family: 'FontAwesome';
	content: "\f105";
}
.subnavon {color:#ffffff;}

.left img[alt^="logo_kl.gif"] {display: inline;}
img[alt^="logo_kl.gif"] {display: none;}
img[alt^="logo.gif"] {display: inline; margin: 30px 0;}

body>header {
	padding:15px 0;
	position:relative;
	border-bottom:none;
	}
.header-segment {
	max-width:1100px;
	margin: 0 auto;
	padding-bottom:10px;
	}
.menubutton {display: none;}
#mainnav{display: none;}
body>header>div img {padding-left: 0;}

#banner {
	max-width:1100px;
	margin: 0 auto;
	padding-left: 15px;
	}
	
#container {
	max-width:1100px;
	margin: 20px auto 0 auto;
	}
.bild {display:inline; float: left; margin-right: 15px;}
.bild2 {display: none;}
footer .footer-segment a, a:visited, a:active{color:#9b9ba4;}
footer .footer-segment a:hover{color: #fff;}
}