/* ------------------------------------------------------------------------------------------------------------------------------------*/

/* ------------------------------------------------------------ CUSTOM CSS ------------------------------------------------------------*/

/* ------------------------------------------------------------------------------------------------------------------------------------*/

html,body{
	height:100%;
	font-family: 'Lato', sans-serif;
	color:rgb(28,28,28);
	background-color:rgb(255,255,255);
	font-size:16px;
}

::-moz-selection{
}

::selection{
}

a{
	color:inherit;
}

.inner{
	position:relative;
	width: calc(100% - 80px);
	max-width: 1380px;
	margin: 0 auto;
}

.col-1{
	width:calc(100% / 12);
}

.col-2{
	width:calc((100vw / 12) * 2);
	max-width:calc((1380px / 12) * 2);
}

.col-3{
	width:calc((100% / 12) * 3);
}

.col-4{
	width:calc((100% / 12) * 4);
}

.col-5{
	width:calc((100% / 12) * 5);
}

.col-6{
	width:calc((100% / 12) * 6);
}

.col-7{
	width:calc((100% / 12) * 7);
}

.col-8{
	width:calc((100% / 12) * 8);
}

.col-9{
	width:calc((100% / 12) * 9);
}

.col-10{
	width:calc((100% / 12) * 10);
}

.col-11{
	width:calc((100% / 12) * 11);
}

.col-12{
	width:100%;
}

h1{

}

.page_alone{
	padding-top: 290px;
}

.page_alone h1,
.page_alone h2,
.page_alone h3{
	font-family:'Vidaloka',serif;
	margin-top:1.5em;
}

/* ------------------------------------------------------------ NAV-BAR ------------------------------------------------------------*/

.nav-bar{
	position:fixed;
	width:100%;
	height:290px;
	top:0;
	z-index:999;
	display:flex;
	align-items:center;
	background-color:rgba(28,28,28,0);
	transition: all 300ms ease;
}

.nav-bar .id-wrap{
	height:140px;
	transition: all 300ms ease;
}

.nav-bar .id-logo{
	height:100%;
	width:auto;
	transition: all 300ms ease;
}

.nav-bar.small{
	height:100px;
	background-color:rgba(28,28,28,1);
}

.nav-bar.small .id-wrap{
	height:70px;
}

/* ------------------------------------------------------------ START-HERO ------------------------------------------------------------*/

.hero-wrap{
	min-height:100vh;
	background-image:url(../img/kg-hero.jpg);
	background-size:cover;
	background-position:center center;
	color:rgb(255,255,255);
	display:flex;
	align-items:center;
	overflow-x:hidden;
}

.hero-wrap h2{
	font-family:'Vidaloka',serif;
	font-size:3.5em;
	text-shadow: 0px 4px 10px rgba(0,0,0,0.5);
	padding-right:3em;
	//display:none;
	position:absolute;
	opacity:0;
	top:0;
	width:100%;
	left:200%;
	height:100px;
	transition: all 300ms ease;	
}

.hero-wrap h2.active{
	//display:block;
	left:0;
	transition: all 300ms ease;	
	opacity:1;
}

.hero-wrap h2.hidden{
	left:-200%;
	opacity:0;
}


.hero-content{
	padding-left:calc(100% / 12);
	margin-top:3em;
	height:100px;
}

.hero-content .top-line{
	height:1px;
	width:calc((100% / 12) * 3);
	background:linear-gradient(to right, rgba(165,135,85,1) 0%,rgba(255,230,165,1) 50%,rgba(230,180,85,1) 100%);
	margin-bottom:0.5em;
}

.hero-content p{
	font-size:1.5em;
	width:calc((100% / 12) * 4);
	opacity:0;
	height:0;
	transition: opacity 300ms ease;	
}

.hero-content p.active{
	opacity:1;
	height:auto;
}

.hero-content .button{
	font-family:'Vidaloka',serif;
	font-size:1.5em;
	border: 1px solid rgb(255,255,255);
	width:calc((100% / 12) * 2);
	padding:0.5em;
	text-decoration:none;
	display:inline-block;
	text-align:center;
	text-transform:uppercase;
	cursor:pointer;
	margin-top:1em;
}

.sublines{
	position:relative;
	height:120px;
}

/* ------------------------------------------------------------ START-BEREICHE ------------------------------------------------------------*/

.bereiche-wrap{
	background-image:url(../images/goldenglanz.svg);
	background-size:cover;
	padding:6em 0;
}

.bereiche-wrap .inner{
	display:flex;
}

.bereiche-item{
	padding-right:2em;
}

.bereiche-wrap .inner div:last-of-type{
	padding-right:0;
}

.bereich-icon{
	width:65px;
	height:65px;
	margin-bottom:1em;
	background-size:contain;
	background-position:bottom left;
	background-repeat:no-repeat;
}

.bereich-icon.ks{
	background-image:url(../img/icon-ks.svg);
}

.bereich-icon.em{
	background-image:url(../img/icon-em.svg);
}

.bereich-icon.me{
	background-image:url(../img/icon-me.svg);
}

.bereich-icon.ck{
	background-image:url(../img/icon-ck.svg);
}

.bereiche-item h3{
	font-family:'Vidaloka',serif;
	font-size:1.75em;
}

.bereiche-item .bold{
	display: inline-block;
	margin-bottom: 1em;
	font-weight: 700;
	margin-top: 0.5em;
}

/* ------------------------------------------------------------ START-MOIN ------------------------------------------------------------*/

.moin-wrap{
	padding:6em 0;
}

.moin-wrap .inner{
	display:flex;
}

.moin-wrap .moin-hl{
	font-family:'Vidaloka',serif;
	font-size:3.5em;
	margin-bottom: 0.125em;
}

.moin-content{
	padding-right:3em;
}

.moin-content p{
	font-size:1.25em;
	margin-bottom:0.5em;
}

.moin-content .bold{
	font-weight:700;
}

.moin-bottom{
	display:flex;
	justify-content:space-between;
}

.moin-bottom .unterschrift{
	display:block;
	width:185px;
	height:90px;
}

.moin-bottom .name{
	font-family:'Vidaloka',serif;
	font-size:1.25em;
}

.moin-bottom a{
	align-self:flex-end;
	font-family:'Vidaloka',serif;
	font-size:1.5em;
	border: 1px solid rgb(28,28,28);
	padding:0.5em 1em;
	text-decoration:none;
	display:inline-block;
	text-align:center;
	text-transform:uppercase;
}

.moin-img{
	background-image:url(../img/ck-portrait.jpg);
	background-size:cover;
	background-position:center center;
}

/* ------------------------------------------------------------ START-GRUPPE ------------------------------------------------------------*/

.gruppe-wrap{
	background-color:rgb(245,245,245);
	padding:6em 0;
}

.gruppe-wrap .gruppe-hl{
	font-family:'Vidaloka',serif;
	font-size:3.5em;
	margin-bottom: 0.125em;
}

.gruppe-wrap p{
	font-size:1.25em;
}

.gruppe-wrap .bold{
	font-weight:700;
}

.gruppe-wrap .gruppe-top{
	margin-bottom:4em;
}

.netzwerk-wrap{
	display:flex;
	flex-wrap:wrap;
}

.netzwerk-item{
	position:relative;
	width:25%;
	padding-right:4em;
	margin-bottom:6em;
}

.netzwerk-item .logo{
	position:absolute;
	z-index:1;
	height:5em;
	width:14em;
	display:none;
	background-size:contain;
	background-position:left center;
	background-repeat:no-repeat;
}

.netzwerk-item .watermark{
	font-family:'Vidaloka',serif;
	font-size:8.125em;
	color:rgb(228,228,228);
	line-height:1;
	height:0.75em;
	position:relative;
	z-index:1;
}

.netzwerk-item .firma{
	font-family:'Vidaloka',serif;
	font-size:1.5em;
	position:relative;
	z-index:1;
}

.netzwerk-item .line{
	height:1px;
	width:3em;
	background-color:rgb(28,28,28);
	margin:0.25em 0;
	position:relative;
	z-index:1;
}

.netzwerk-item .desc{
	position:relative;
	z-index:1;
}

.netzwerk-item .full-desc{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	display:none;
	z-index:100;
}

.netzwerk-item .info-text{
	position:relative;
	padding-top:2em;
	z-index:1;
	width:100%;
}

.netzwerk-item .overlay-bg{
	position:absolute;
	top:-2em;
	right:2em;
	bottom:-2em;
	left:-2em;
	background:rgb(245,245,245);
	box-shadow:0px 8px 20px 0px rgba(0,0,0,0.3);
	display:none;
}

.netzwerk-item:hover .full-desc, .netzwerk-item.active .full-desc{
	display:inline-block;
	padding-right:4em;
}

.netzwerk-item:hover .overlay-bg, .netzwerk-item.active .overlay-bg{
	display:block;
}

.netzwerk-item:hover .watermark, .netzwerk-item.active .watermark{
	cursor:default;
	opacity:0;
}

.netzwerk-item:hover .logo, .netzwerk-item.active .logo{
	display:block;
}



/* ------------------------------------------------------------ START-FAKTEN ------------------------------------------------------------*/

.fakten-wrap{
	background-color:rgb(28,28,28);
	padding:6em 0;
	color:rgb(255,255,255);
}

.fakten-wrap .inner{
	display:flex;
	justify-content:space-between;
}

.fakten-wrap .fakt-item{
	max-width:25%;
}

.fakten-wrap .number{
	font-family:'Vidaloka',serif;
	font-size:11.25em;
	color:rgb(55,55,55);
	line-height:1;
	height:0.75em;
}

.fakten-wrap .desc{
	font-family:'Vidaloka',serif;
	font-size:1.5em;
}

.fakten-wrap .line{
	height:1px;
	width:8em;
	background:linear-gradient(to right, rgba(165,135,85,1) 0%,rgba(255,230,165,1) 50%,rgba(230,180,85,1) 100%);
	margin-top:0.5em;
}

/* ------------------------------------------------------------ START-PREFOOTER ------------------------------------------------------------*/

.prefooter-wrap{
	background-image:url(../images/goldenglanz.svg);
	background-size:cover;
	padding:6em 0;
}

.prefooter-wrap .inner{
	font-family:'Vidaloka',serif;
	font-size:3.5em;
	text-align:center;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}

.prefooter-quote{
	margin-bottom:0.5em;
}

.prefooter-source{
	font-size:0.4em;
	text-align:left;
}

.quote-line{
	height:1px;
	width:5em;
	background-color:rgb(28,28,28);
	margin-bottom:0.5em;
}

/* ------------------------------------------------------------ FOOTER ------------------------------------------------------------*/

.footer-wrap{
	background-color:rgb(28,28,28);
	padding:6em 0;
	color:rgb(255,255,255);
}

.footer-top{
	margin-bottom:3em;
}

.footer-wrap h1{
	font-family:'Vidaloka',serif;
	font-size:3.125em;
}

.footer-bottom{
	font-size:0.875em;
	display:flex;
}

.footer-bottom .kontakt{
	margin-bottom:3em;
}

.footer-bottom .kontakt .icon{
	width: 30px;
	height: 30px;
	float: left;
	margin-right: 1em;
	background-repeat:no-repeat;
	background-position:center center;
	margin-bottom:20px;
}

.footer-bottom .kontakt.tel .icon{
	background-image:url(../img/icon-tel.svg);
	background-size:70%;
}

.footer-bottom .kontakt.mail .icon{
	background-image:url(../img/icon-mail.svg);
	background-size:70%;
}

.footer-bottom .kontakt.ad .icon{
	background-image:url(../img/icon-ad.svg);
	background-size:50%;
}

.footer-bottom .kontakt .label{
	text-transform:uppercase;
}

.footer-bottom .kontakt a{
	text-decoration:none;
}

.footer-bottom .footer-about img{
	width:50%;
	margin-top:2em;
}

.footer-bottom .footer-meta{
	padding-left:6.25%;
}

.footer-bottom .footer-meta a{
	text-decoration:none;
}

/* ------------------------------------------------------------ FOOTER ------------------------------------------------------------*/

.main-page.impressum,
.main-page.agb{
	background-color:rgb(28,28,28);
	color:white;
}