/* --------------------------------------------------------------------------------------------
   --------------------------------------------------------------------------------------------
	                Jessica Früh Marthaler  CSS         2017
   --------------------------------------------------------------------------------------------
   -------------------------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
@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-color: #fff;
	font-size: 1em;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;
	color:#434444;
	height: 101%;
	letter-spacing: 1.2px;
	}
.clear {clear:both;}

/* ----------------------------------------------
	          Titel / Absatz 
   ---------------------------------------------- */		
h1 {
	font-size:2em;
	margin: 0 0 10px 0;
	color: #666;
	font-weight: 300;
	}
h2 {
	font-size:1.2em;
	color:#434444;
	padding: 0 0 5px 0;
	letter-spacing: 2px;
	font-weight: 300;
	}
h3 {
	font-size:1em;
	color:#434444;
	padding: 0;
	letter-spacing: 2px;
	font-weight: 700;
	}
p {padding: 0 0 10px 0;	 hyphens: auto;}  
.bold {font-weight: 700;}
ol {
    list-style-position: outside;
    list-style-type: disc;
    hyphens: auto;
	margin-left: 15px;
	margin-bottom: 10px;
}

/* -------------------------------------
                Header 
   ------------------------------------- */
body>header {/* - erster Header im Body - */
	padding:20px 0 0 0;
	position:relative;	
	}
.header-segment {
	margin: 15px auto 0 auto;
	}
body>header>div img {padding-left: 15px;}

.menubutton {
    position:absolute;
    right:15px;
    top:30px;
    z-index: 400;
    font-size:1.5em;
	}
.menubutton a{color: #434444;}
.menubutton a:hover{color: #f8737a;}
	
ul.intro li  {border-bottom: 1px solid #c2c2c2;}
#mainnav ul.intro li:nth-of-type(2){border-top: none;}/*Border nach Icons und Sprachen auf Introseite ausblenden*/
#mainnav ul.intro {padding-top: 0;}
#mainnav .intro li img {padding: 0 5px 0 0;}/*Icons Introseite*/ 

img[alt^="logo.png"] {display: none;}/* - grosses Logo ausblenden - */

/* -------------------------------------
               navigavtion
   ------------------------------------- */ 
ul {list-style: none;}
#icons {display: none;}
#icons_mobile {float: right; text-align:right; margin: 7px 15px 5px 0;}
#mainnav #icons_mobile a, a:visited {float: right; text-align:right; padding:0; margin-left:5px; border-bottom: 2px solid #fff;}
#mainnav #icons_mobile a:hover {border-bottom: 2px solid #f8737a;}
#mainnav #icons_mobile .on {border-bottom: 2px solid #f8737a;}
#mainnav #icons_mobile img {padding:0;}


#descnav {display: none;}
#mainnav ul { 
	margin:0;
	border-top:1px solid #c2c2c2;
	padding-top: 7px;
	}
/*#mainnav ul li:nth-of-type(2){border-top: 1px solid #c2c2c2;}*//*Border nach Icons und Sprachen*/

#mainnav a, a:visited {
	font-size: 1em;
	display: block;
	letter-spacing: 2px;
	padding: 5px 15px;
	color: #434444;
	}
#mainnav .on {
	font-size: 1em;
	display: block;
	letter-spacing: 2px;
	padding: 5px 15px;
	color: #f8737a;
	}
#mainnav a:hover {	
	transition:all 0.8s ease-in-out 0s;	
	color: #f8737a;		
	}

/* -------------------------------------
                Inhaltsboxen    
   ------------------------------------- */
#boxen article {
	width: calc(100% / 1 - 0);
	padding: 15px;
	margin: 0;
	position: absolut;
	overflow: hidden;
	flex-grow: 1;
	flex-basis: auto;
	border-top: 1px solid #c2c2c2;
}
article img{max-width:100%;}
#boxen article:nth-child(4) {border: 0; padding:0;}
#introboxen article {/*Homepage*/
	width: calc(100% / 1 - 0);
	margin: 0;
	position: absolut;
	overflow: hidden;
	flex-grow: 1;
	flex-basis: auto;
	border-bottom: none;
}
#introboxen article:nth-child(1) {padding: 10px 10px 5px 10px;}
#introboxen article:nth-child(2) {padding: 0 10px 10px 10px;}

/* -------------------------------------
              Attribut-Selektoren    
   ------------------------------------- */
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: #f8737a;
   color: #fff;
   }
::-moz-selection {
   background: #f8737a;
   color: #fff;
   }
/*---   Hovering  ----*/
a, a:visited, a:active{ color: #434444; text-decoration:none;}
a:hover {color:#f8737a;}

#boxen a, a:visited, a:active{ color: #434444; text-decoration:none;}
#boxen a:hover {color:#f8737a;}

/* -------------------------------------
                Footer    
   ------------------------------------- */
footer{
	padding: 25px 15px 205px 15px;
	background-color:#585858;
	color:#a2a2a2;
	}
.footer-segment {margin: 0 0 20px;}
.left {float: left; margin-bottom: 15px; display:block;}
.right{float: left;  border-top: 1px solid #e0e0e0; padding-top: 15px;}

.footer .footer-segment a, a:visited{color:#a2a2a2;}
.footer a:hover{color: #f8737a;}

.galerie img {/*thumpnails*/
	width: 18.7%;
	 }

/* ----------------------------------------------
	    Media Queris min-width: 480px
   ---------------------------------------------- */
@media screen and (min-width: 480px) {
/*article img{max-width:70%;}*/
}
/* ----------------------------------------------
	    Media Queris min-width: 517px
   ---------------------------------------------- */
@media screen and (min-width: 517px) {
.right{float: right; text-align:right; border-top: none; padding-top: 0;}
}
/* ----------------------------------------------
	    Media Queris min-width: 650px
   ---------------------------------------------- */
@media screen and (min-width: 650px) {
article img{max-width:100%;}

img[alt^="logo_kl.png"] {display: none;}
img[alt^="logo.png"] {display: inline;}

#boxen {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	padding:0 10px 10px 0;
	}
#boxen article {
	width: calc(100% / 2 - 11px);
	margin: 10px 0 0 10px;
	border: 1px solid #c2c2c2;
	flex-grow: 1;
	flex-basis: auto;
	}
.galerie img {/*thumpnails*/
	width: 32%;
	 }
#introboxen {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	padding: 0;
	}
#introboxen article {
	width: calc(100% / 2 - 11px);
	flex-grow: 1;
	flex-basis: auto;
	}
#introboxen article:nth-child(1) {padding: 10px 0 10px 10px;}
#introboxen article:nth-child(2) {padding: 10px 0 10px 10px;	margin-right: 10px;}
}
/* ----------------------------------------------
	        Media Queris min-width: 850px
   ---------------------------------------------- */
@media screen and (min-width: 850px) {

body>header {border-bottom:none;}
#container {
	max-width:1100px;
	margin: 0 auto;
	position:relative;
	}
/* ---------  Inhaltsboxen --------*/
article {border-bottom: none;}
#boxen {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	padding:0 10px 10px 0;
	}
#boxen article {
	width: calc(100% / 3 - 11px);
	margin: 10px 0 0 10px;
	/*min-height: 510px;*/
	border: 1px solid #c2c2c2;
	flex-grow: 1;
	flex-basis: auto;
	}

	
.footer-segment {
	max-width:1070px;/*1100 minus 30 anstatt padding*/ 
	margin: 0 auto;
	}
}
/* ----------------------------------------------
	  Media Queris min-width: 1024px
   ---------------------------------------------- */
@media screen and (min-width: 1024px) {
/* ---------  Header --------*/
body>header {
	padding:20px 15px 0 15px;
	position:relative;
	}
.header-segment {
	max-width:1080px;
	margin: 25px auto 0 auto;
	}
.menubutton {display: none;}
	
body>header>div img {padding-left: 0;}/*icons ohne padding*/
#icons {display: inline; float: right; text-align:right; margin-top: 5px;}
#icons a:hover {border-bottom: 2px solid #f8737a;}
#icons img:hover {transition: transform 0.8s; cursor: pointer; transform: scale(1.05, 1.05);}
#icons .on {border-bottom: 2px solid #f8737a;}

/* ---------  Navigation --------*/
#mainnav{display: none;}
#descnav{
	display: inline;
	max-width:1100px;
	margin: 70px auto 0 auto;	
	border-bottom: none;
	}
#descnav:after{
	clear: left;
	content:' ' ;
	display: block;
	}
#descnav li{float:left;margin: 0 15px 1px 0;}
#descnav ul {border:none;}
#descnav a, a:visited {
	font-size: 1.2em;
	display: block;
	letter-spacing: 2px;
	padding: 5px 0;
	border-bottom:2px solid #fff;
	color:#434444;	
	}
#descnav a:hover {
	transition:all 0.8s ease-in-out 0s;
	border-bottom: 2px solid #f8737a;	
	color:#434444;			
	}
#descnav .on {
	font-size: 1.2em;
	letter-spacing: 2px;
	padding: 5px 0;
	color:#434444;
	border-bottom:2px solid #f8737a;
	}
#banner {
	max-width:1080px;
	margin: 0 auto;
	}
#introboxen article {
	margin-bottom: 15px;
	}
}