@charset "utf-8";

/* ------ Reset ------ */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, img, small, strong,
ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

ol, ul {
	list-style: none;
}

:focus {
	outline: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ------ @Font-Face ------ */

/* first for IE 4–8 */
@font-face {
  font-family: KievitWeb-Book;
  src: url("../fonts/KievitWeb-Book.eot");
}

/* then for WOFF-capable browsers */
@font-face {
  font-family: KievitWeb-Book;
  src: url("../fonts/KievitWeb-Book.woff") format("woff");
}

/* first for IE 4–8 */
@font-face {
  font-family: KievitWeb-Bold;
  src: url("../fonts/KievitWeb-Bold.eot");
}

/* then for WOFF-capable browsers */
@font-face {
  font-family: KievitWeb-Bold;
  src: url("../fonts/KievitWeb-Bold.woff") format("woff");
}

/* ------ Main ------ */

html {
	height: 100%;
}

body {
	background: #cccfc7;
	color: #7e876d;
	/*font-family: Tahoma, Geneva, sans-serif;*/
	font-family: 'KievitWeb-Book', Tahoma, sans-serif;
	font-size: 14px;
	height: 100%;
	line-height: 1;
	width: 100%;
}

a {
	text-decoration: none;
}

.clr {
	clear: both;
}

.container {
	bottom: 0;
	left: 0;
	height: 558px;
	margin: auto;
	position: absolute;
	right: 0;
	top: 0;
	width: 900px;
}

	.links {
		background: #fff;
		float: left;
		font-family: 'KievitWeb-Book', Tahoma, sans-serif;
		height: 558px;
		position: relative;
		width: 220px;
	}
	
	.rechts {
		background: #fff;
		float: left;
		height: 496px;
		padding: 62px 20px 0 20px;
		position: relative;
		width: 180px;
	}
	
	.mitte {
		background: #fff;
		float: left;
		height: 457px;
		margin: 0 5px;
		padding: 68px 20px 33px 20px;
		position: relative;
		width: 410px;
	}

.footermenue{
	position:relative;
}

.footermenue .menue-level1 {
	margin: 0;
	height:23px;
}
	
.footermenue .impressum,
.footermenue .datenschutz{
	float: right;
	height: 22px;
	line-height: 22px;
}

	ul.menue-level1 li.impressum a,
	ul.menue-level1 li.datenschutz a{
		color: #7e876d;
		font-family: 'KievitWeb-Book', Tahoma, sans-serif;
		font-size: 13px;
	}

	ul.menue-level1 li.impressum a:hover,
	ul.menue-level1 li.datenschutz a:hover{
		border-bottom: 1px solid #7e876d;
	}
	
/* ------ Links ------ */

.logo {
	display: block;
	margin: 0 auto;
	text-align: center;
	width: 140px;
}

	.logo img {
		margin: 0 0 15px 0;
	}
	
	.logo span {
		color: #7e876d;
		font-size: 16px;
		line-height: 120%;
	}
	
.kontaktinfo {
	bottom: 30px;
	font-size: 12px;
	line-height: 160%;
	padding: 0 20px;
	position: absolute;
}

	.kontaktinfo span {
		color: #c8b852;
	}

	.kontaktinfo a {
		color: #7e876d;
	}
	
	.kontaktinfo a:hover {
		color: #c8b852;
	}

.balken {
	background: #c8b852;
	bottom: 0;
	height: 8px;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	width: 50px;
}

/* ------ Mitte ------ */

.bild {
	margin: -6px 0 30px 0;
}

.startseitenbild {
	bottom: 37px;
	margin: 0;
	position: absolute;
}

.mobile-slideshow-navi{
	display: none;
}


.slideshow {
	height: 307px;
	margin: -6px 0 0 0;
	overflow: hidden;
	position: relative;
	width: 100%;
	
}
	
	.slideshow div {
		display: none;
		left: 0;
		position: absolute;
		top: 0;
		width:100%;
		max-height:307px;
		background-size: contain;
		background-repeat: no-repeat;
	}

	.slideshow img {
		max-width:100%;
		max-height:307px;
		display: block;
		/*visibility: hidden;*/
	}
	
.slideshow-navi {
	height: 13px;
	margin: 8px 0 35px 0;
}

	.slideshow-navi .vor,
	.slideshow-navi .zurueck {
		background-image: url(../img/pfeile.png);
		background-repeat: no-repeat;
		float: left;
		height: 13px;
		margin: 0 3px 0 0;
		width: 10px;
	}
	
	.slideshow-navi .vor {
		background-position: -10px 0;
	}
	
	.slideshow-navi .vor-aktiv {
		background-position: -10px -13px;
		cursor: pointer;
	}
	
	.slideshow-navi .zurueck {
		background-position: 0 0;
	}
	
	.slideshow-navi .zurueck-aktiv {
		background-position: 0 -13px;
		cursor: pointer;
	}
		
.projekte .text,
.contentseite .pos {
	bottom: 33px;
	position: absolute;
	width: 410px;
}

.contentseite h1,
.projekte h1 {
	font-size: 15px;
	line-height: 130%;
	margin: 0 0 18px 0;
}

.contentseite h2 {
	font-size: 14px;
	line-height: 130%;
}

.contentseite h2 a {
	border-bottom: 0;
	color: #c8b852;
	text-decoration: none;	
}

.contentseite p,
.projekte p,
.contentseite ul,
.projekte ul {
	font-size: 13px;
	line-height: 135%;
	margin: 0 0 17px 0;
}

.text p:last-child,
.text ul:last-child {
	margin: 0;
}

.contentseite a,
.mitte .text a {
	border-bottom: 1px solid #c8b852;
	color: #7e876d;
	padding: 0 0 1px 0;
}

.contentseite a:hover {
	color: #c8b852;
}

/* ------ Rechts ------ */

.menue-level1 {
	margin: 0 0 20px 0;
}

	.menue-level1 .level1 a {
		font-family: 'KievitWeb-Bold', Tahoma, sans-serif;
		font-size: 15px;
	}
	
		.menue-level2 .level2 a {
			background: url(../img/pfeile.png) no-repeat -35px -9px;
			font-family: 'KievitWeb-Book', Tahoma, sans-serif;
			font-size: 13px;
			padding: 0 0 0 10px;
		}
		
		.menue-level2 .level2 a:hover,
		.menue-level2 .level2 a.aktiv {
			background: url(../img/pfeile.png) no-repeat -35px -29px;
		}
			
	.rechts a {
		color: #7e876d;
		line-height: 155%;
	}
			
	.rechts a:hover,
	.rechts a.aktiv {
		color: #c8b852;
	}

.scroller {
	height: 457px;
	padding: 0 30px 0 0;
	width: 410px;
}


#popup{
	position: fixed;
	right: 30px;
	bottom: 30px;
	width: 445px;
	height: 323px;
	background-image: url(/img/offene-baustelle.jpg);
	display: none;
	box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.27);
}

#popupclose{
	position: absolute;
	top: 0;
	right: 0;
	width: 30px;
	height: 30px;
	cursor: pointer;
}

.mobilefooter{
	display: none;
}

/* --- perfect-scrollbar v0.7.0 --- */

.ps {
	-ms-touch-action: auto;
	touch-action: auto;
	overflow: hidden !important;
	-ms-overflow-style: none;
}

@supports (-ms-overflow-style: none) {

	 .ps {
	 	overflow: auto !important;
	 }
	 
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

	.ps {
		overflow: auto !important;
	}
	
}

.ps.ps--active-y > .ps__scrollbar-y-rail {
	display: block;
	background-color: #cccfc7;
}

.ps.ps--in-scrolling.ps--y > .ps__scrollbar-y-rail {
	background-color: #cccfc7;
}

.ps.ps--in-scrolling.ps--y > .ps__scrollbar-y-rail > .ps__scrollbar-y {
	background-color: #c8B852;
	width: 15px;
}

.ps > .ps__scrollbar-x-rail {
	display: none;
}

.ps > .ps__scrollbar-y-rail {
	display: none;
	position: absolute;
	right: -5px !important;
	top: 20px !important;
	width: 5px;
	z-index: 1;
}

.ps > .ps__scrollbar-y-rail > .ps__scrollbar-y {
	cursor: pointer;
	position: absolute;
	background-color: #c8B852;
	right: -5px;
	width: 15px;
}

.ps > .ps__scrollbar-y-rail:hover > .ps__scrollbar-y,
.ps > .ps__scrollbar-y-rail:active > .ps__scrollbar-y {
	width: 15px;
}

.mm_toggle{
	width: 30px;
	height: 30px;
	position: absolute;
	right: 10px;
	top: 10px;
	background-image: url(/img/menu1.svg);
	background-size: contain;
}

.mm-wrapper_opened .mm_toggle{
	background-image: url(/img/menu2.svg);
}


@media (min-width: 481px) {
	.mm-page{
		position: absolute !important;
	}
	#menu, .mm_toggle,
	.slideshow-navi svg{
		display: none !important;
	}
	
}

@media (max-width: 480px) {
	
	body{
		background-color: #8f9882;
	}
	
	.container, .links, .mitte, .rechts {
		float: none;
		width: 100%;
		box-sizing: border-box;
		height: auto;
		margin: 0;
	}
	
	.links{
		padding-bottom: 8px;
		background-color: #fff;
	}
	
	.rechts{
		display: none;
	}
	
	.mitte{
		padding: 0;
		background-color: #fff;
	}
	
	.mitte .text{
		padding: 20px;
		box-sizing: border-box;;
	}
	
	.projekte .text{
		width: 100%;
		position: relative;
		bottom: auto;
	}
	
	.slideshow{
		width: 100%;
		margin: 0;
	}
	
	.slideshow div{
		background-color: #eee;
	}
	
	.slideshow img{
		/*height: 307px;*/
	}
	
	.slideshow-navi{
		display: none;
	}
	
	.slideshow-navi{
		display: block;
	}
	
	.slideshow-navi{
		height: 12px;
		position: relative;
		margin: 16px 0 10px 0;
		padding: 0 20px;
	}
	.slideshow-navi .vor{
		height: 12px;
		width: 12px;
		position: absolute;
		right: 22px;
		margin: 0;
		top: 0;
		background-image: none;
	}
	
	.slideshow-navi .zurueck{
		height: 12px;
		width: 12px;
		position: absolute;
		background-image: none;
		margin: 0;
		left: 22px;
		top: 0;
	}
	

	.slideshow-navi .icon-arrow path {
	  fill: none;
	  stroke: #ccc;
	  stroke-width: 10px;
	  stroke-linecap: round;
	  stroke-dasharray: none;
	  transform: scale(0.12);
	}

	.slideshow-navi .vor-aktiv .icon-arrow path,
	.slideshow-navi .zurueck-aktiv .icon-arrow path{
		stroke: #7a7a7a;
	}	
	
	.slideshow-navi .icon-arrow {
	  width: 12px;
	  height: 12px;
	  transform-origin: 50% 50%;
	  display: inline-block;
	}
	
	.slideshow-navi .icon-arrow--right {
	  transform: rotate(-135deg);
	}
	
	.slideshow-navi .vor .icon-arrow--left {
	  transform: rotate(45deg);
	}
	
	/*

	.slideshow-navi .icon-arrow {
	  width: 20px;
	  height: 20px;
	  transform-origin: 50% 50%;
	  display: inline-block;
	}


	.slideshow-navi .vor-aktiv .icon-arrow path,
	.slideshow-navi .zurueck-aktiv .icon-arrow path{
	  stroke: #666;
	}

	.slideshow-navi .icon-arrow--right {
	  transform: rotate(-135deg);
	}
	.slideshow-navi .vor .icon-arrow--left {
	  transform: rotate(45deg);
	}

	*/	
	
	
	.links .kontaktinfo,
	.links .balken{
		display: none;
	}
	
	.mobilefooter{
		background-color: #8f9882;
		display: block;
	}
	
	.mobilefooter .kontaktinfo {
		bottom: 0;
		font-size: 13px;
		line-height: 160%;
		padding: 17px 20px;
		position: relative;
		color: #fff;
	}
	
	.mobilefooter .kontaktinfo a, .mobilefooter span{
		color: #fff;
	}
	

	.contentseite p, .projekte p, .contentseite ul, .projekte ul {
		font-size: 13px;
		line-height: 150%;
		margin: 0 0 17px 0;
	}
	
	.contentseite h1, .projekte h1 {
	  font-size: 14px;
	  line-height: 130%;
	  margin: 0 0 18px 0;
	}
	
	.mm-listitem::after{
		left: 0 !important;
	}
	
	.mm-menu, .mm-navbar {
		background-color: #fff !important;
	}
	
	.mm-navbar {
		color: #cab853 !important;
		font-weight: bold;
	}
	
	.mm-panel{
		background-color: #fff !important;
	}
	
	.mm-color-border{
		
	}
	
	.startseitenbild{
		top: 0;
		bottom: auto;
	}
	
	.startseitenbild img{
		display: block;
		max-width: 100%;
	}
	
	.startseite .text{
		padding-top: 135px;
	}
	
	.contentseite .text{
		position: relative;
		top: 0;
		width: 100%;
		box-sizing: border-box;
		
	}
	
	.contentseite .bild{
		margin: 0;
		background-color: #eee;
	}
	
	.contentseite .bild img{
		display: block;
	}
	
	
	.scroller {
		width: 100%;
		padding: 0;
		height: auto;
	}
	
	.footermenue{
		display: none;
	}
	
	#popup{
		position: relative;
		width: 100%;
		box-shadow: none;
		height: auto;
		padding-top: 72.58%;
		right: 0;
		top: 0;
		background-size: cover;
		
	}
	

	

}