/** VARIABLES **/

:root{
	--font-color-light: #888888;
	--color-very-light: #C7C7C7;
	--font-color-dark: #000000;
	
	--seitenbreite: 90vw;
	--header-height: 100px;
	--header-height-scrolled: 50px;
	
	--submenu-top: var(--header-height);
	
	--margin-projekte: 20px;
	--hover-transition-duration: 0.3s;
	
	--mobile-projekt-title-height: 75px;
	
	--full-font-size: 15px;
	--navigation-font-size: 13px;
}


.grid-sizer, .projekt-box, .buero-publikationen-page .publikationen-box{
	width: 100%;
	box-sizing: border-box;
}

.projekt-seite .projekt-box, .buero-publikationen-page .publikationen-box{
	margin: var(--margin-projekte) 0;
}

strong{
	color: var(--font-color-light);
}

#projekt-liste .mod_newslist{
	margin: 0 auto;
}

/** GENERAL **/

body{
	font-family: NettoComp, Sans-Serif;
	max-width: var(--seitenbreite);
	margin: 0 auto;
}

p, .start-box{
	font-size: 13px;
}

p, .start-box{
	color: var(--font-color-light);
	line-height: 1.4;
}

*:focus{
	outline: none;
}

a{
	color: var(--font-color-light);
	transition: var(--hover-transition-duration);
}

a:hover{
	color: var(--font-color-dark);
}


/** HEADER **/

header .inside{
	height: var(--header-height);
	width: calc(var(--seitenbreite) + 2px);
	margin: 0 auto;
	transition: 0.5s;
	padding-bottom: 1px;
}

header.scrolled .inside{
	height: var(--header-height-scrolled);
}

header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #fff;
	z-index: 1000;
}

.main-menu{
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-transform: uppercase;
	position: absolute;
	width: 100%;
	top: 50%;
	height: 100%;
	transform: translateY(-50%);
}

header.scrolled .main-menu{
	align-items: center;
}

.main-menu .logo a{
	font-size: 17px;
	transition: var(--hover-transition-duration);
}

header .main-menu .logo{
	transition: 0.6s;
}

header.scrolled .main-menu .logo{
	transform: translateY(-100%);
	opacity: 0;
}

.mobile-btn{
	width: 25px;
	height: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.mobile-btn span{
	width: 100%;
	height: 2px;
	background: var(--font-color-dark);
}

.main-menu nav a{
	font-size: var(--navigation-font-size);
	transition: color var(--hover-transition-duration);
}

.main-menu a{
	text-decoration: none;
	color: var(--font-color-light);
}

.main-menu nav a:hover{
	color: var(--font-color-dark);
}

.main-menu a strong{
	color: var(--font-color-dark);
}

.mainnav{
	display: none;
}

.main-menu .mainnav ul{
	list-style: none;
	display: flex;
	padding: 0;
	margin: 0;
	position: relative;
}

.main-menu .mainnav ul li:nth-child(1)::after, .footer-menu .links a:nth-child(1)::after{
	content:".";
	color: var(--font-color-light);
	margin: 0 15px;
}

.main-menu .mainnav ul li:nth-child(2)::after, .footer-menu .links a:nth-child(2)::after{
	content:".";
	color: var(--font-color-light);
	margin: 0 15px;
}

.main-menu li.instagram {
	background-image: url(/files/KA/img/icons/kuckert-insta-g.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50%;
	display: inline-block;
	height: 1em;
}

.main-menu li.instagram:hover {
	background-image: url(/files/KA/img/icons/kuckert-insta-s.svg);

}

.main-menu .instagram span {
	color: transparent;
}

.projekte-menu, .buero-menu{
	position: relative;
	top: var(--header-height);
	background: #fff;
	text-align: center;
	text-transform: uppercase;
	line-height: 1.4;
	padding-bottom: 20px;
	transition: var(--hover-transition-duration);
	transform: translateY(0);
}

.buero-menu{
	display: none;
}

header.open .projekte-menu, header.open .buero-menu{
	transform: translateY(calc(var(--submenu-top) - 5px));
}

header.scrolled .buero-menu, header.scrolled .projekte-menu{
	top: var(--header-height-scrolled);
}

.projekte-menu a, .buero-menu a{
	margin: 0 5px;
	text-decoration: none;
	color: var(--font-color-light);
}

.projekte .main-menu nav ul a.projekte, .buero .main-menu nav ul a.buero{
	color: var(--font-color-dark);
}

.main-menu nav ul li *{
	line-height: 1.3;
}

.mobilenav{
	position: absolute;
	width: 100%;
	top: var(--header-height);
	left: 0;
	background: #fff;
	transition: var(--hover-transition-duration);
	transform: translateY(calc(-100% - var(--header-height)));
	z-index: -1;
	opacity: 0;
}

header.open .mobilenav{
	transform: translateY(0);
	opacity: 1;
}

header.scrolled .mobilenav{
	top: var(--header-height-scrolled);
}

.mobilenav ul{
	list-style: none;
	margin: 0;
	padding: 0;
	padding-bottom: 25px;
}

.mobilenav ul li{
	padding: 0.5em 0;
}

.mobilenav ul li a{
	color: var(--font-color-dark);
}


/** STARTSEITE **/

#start-slider-article{
	margin-top: var(--header-height);
	position: relative;
	overflow: visible;
}

#start-slider .image_container img{
	height: calc(90vh - var(--header-height));
	object-fit: cover;
	width: 100%;
}

#start-slider .slick-dots{
	padding: 0;
	margin : 0;
	float: left;
	display: flex;
	list-style: none;
}

#start-slider .slick-dots li{
	height: 12px;
	width: 12px;
	margin-right: 12px;
}

#start-slider .slick-dots li button{
	color: transparent;
	border: 1px solid var(--color-very-light);
	border-radius: 50%;
	padding: 0;
	height: 12px;
	width: 12px;
	background: #fff;
	transition: var(--hover-transition-duration);
}

#start-slider .slick-dots li button:hover{
	cursor: pointer;
	background: var(--font-color-light);
}

#start-slider .slick-dots li.slick-active button{
	background: var(--font-color-light);
}

#start-slider-sub{
	
}

#start-slider-article .slick-list .slick-slide h4{
	margin: 0;
	padding-top: 5px;
	float: right;
	max-width: 75%;
	text-align: right;
	font-size: 13px;
	font-weight: 300;
	color: var(--font-color-light);
}


#start-boxen-article{
	margin-top: 50px;
}

.start-box, #start-boxen-article .rs-columns{
	line-height: 1.4;
	margin-bottom: 35px;
}

.start-box .image_container img{
	display: block;
}

.start-box .wrapper{
	padding: 20px;
	box-sizing: border-box;
	border: 1px solid var(--color-very-light);
	border-width: 0 1px 1px 1px;
}

.start-box .wrapper .content p:not(.box-link){
	margin-top: 1.5em;
}

.start-box .wrapper .content .box-link{
	margin: 0;
}

.start-box .wrapper .content .box-link a{
	color: var(--font-color-light);
	transition: color var(--hover-transition-duration);
}

.start-box .wrapper .content .box-link a:hover{
	color: var(--font-color-dark);
}

.start-box .wrapper .content .headline{
	color: var(--font-color-light);
}


.start-img .wrapper{
	margin-top: 15px;
}

.start-img .wrapper *{
	font-size: 13px;
	margin: 0;
	line-height: 1.4;
}

.start-img img{
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.start-img .wrapper h2{
	font-weight: 300;
	color: var(--font-color-light);
}

.rs-column .ce_image img {
	display: block;
	object-fit: cover;
	width: 100%;
}

#start-slider-article::after{
	content:"";
	background: url(../../img/icons/Pfeil.svg);
	background-size: contain;
	background-repeat: no-repeat;
	height: 30px;
	background-position: center;
	width: 30px;
	position: absolute;
	left: 50%;
	top: calc(100vh - var(--header-height));
	transform: translate(-50%, -125%);
	
	animation-name: arrowBounce;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

@keyframes arrowBounce {
  0% {
  	transform: translate(-50%, -125%);
  }
  50% {
  	transform: translate(-50%, -100%);
  }
  100% {
  	transform: translate(-50%, -125%);
  }
}

/** Projekte **/

#projekt-liste{
	margin-top: calc(var(--header-height) + 100px);
}

#projekt-liste .project-box-vsm .image_container{
	height: 110px;
}
#publikationen .project-box-vsm.publikationen-box .image_container{
	height: 110px;
}

#projekt-liste .project-box-sm .image_container{
	height: 160px;
}
#publikationen .project-box-sm.publikationen-box .image_container{
	height: 160px;
}

#projekt-liste .project-box-md .image_container{
	height: 376px;
}
#publikationen .project-box-md.publikationen-box .image_container{
	height: 326px;
}

#projekt-liste .project-box-lg .image_container{
	height: 510px;
}
#publikationen .project-box-lg.publikationen-box .image_container{
	height: 510px;
}


#projekt-liste .projekt-box{
	position: relative;
	height: auto;
}


#projekt-liste .mod_newslist{
	width: auto;
	margin-top: calc(var(--margin-projekte)*-1);
}


#projekt-liste .projekt-box img{
	transform: scale(1);
	opacity: 1;
	transition: var(--hover-transition-duration);
	height: 100%;
	object-fit: cover;
	display: block;
}

#projekt-liste .projekt-box.hidden img{
	transform: scale(0);
	opacity: 0;
}

#projekt-liste .projekt-box.hidden{
	pointer-events: none;
}

#projekt-liste .projekt-box .image_container{
	height: 100%;
}

#projekt-liste .projekt-box .img-container img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#projekt-liste .projekt-box{

}


.projekte-menu a, .buero-menu a{
	font-size: var(--navigation-font-size);
	transition: color 0.3s;
}

.projekte-menu a:hover, .buero-menu a:hover{
	cursor: pointer;
	color: #000;
}

.projekte-menu a.selected:hover, .buero-menu a.selected:hover{
	cursor: default;
}

.projekte-menu a.selected, .buero-menu a.selected{
	color: #000;
}


/** PROJEKT DETAILS **/

.projekt-details .mod_newsreader{
	margin-top: calc(var(--header-height) + 100px);
}

.projekt-details .back{
	display: none;
}

.projekt-detail-section .ce_image img{
	margin-bottom: 50px;
}

.projekt-detail-section .ce_image:nth-child(1) img{
	margin-bottom: 25px;
}

.projekt-detail-section .img-below-text{
	margin-top: 25px;
}

.projekt-detail-section .ce_image:last-child img{
	margin-bottom: 0;
}

.projekt-detail-section .ce_text p{
	margin: 0;
}

.projekt-detail-section img{
	width: 100%;
}

.mobilenav ul li.active{
	font-weight: 600;
}


/** BÜRO **/

.buero-profil-page .buero-profil a, .buero-partner-page .partner a, .buero-preise-page .preise a, .buero-jobs-page .jobs a, .buero-publikationen-page .publikationen a{
	color: var(--font-color-dark);
}

.hero-img{
	margin-top: calc(var(--header-height));
}

.hero-img img{
	width: 100%;
	height: calc(90vh - var(--header-height) - 50px);
	object-fit: cover;
	margin-bottom: 50px;
}

.fullwidth-img img{
	width: 100%;
	height: calc(90vh - var(--header-height) - 50px);
	object-fit: cover;
	
}

.fullwidth-img {
	margin-bottom: 50px;
	margin-top: 50px;
}

.img-fillcolumn img{
	width: 100%;
	height: calc(90vh - var(--header-height) - 50px);
	object-fit: cover;
}


#buero-profil-img .ce_image:last-child img{
	margin-top: 50px;
}

#buero-profil-img #map img{
	max-height: 640px;
	width: 100%;
	object-fit: cover;
	object-position: bottom;
}

#buero-partner img{
	object-position: 50% 25%;
}


#jobs{
	width: 70%;
}

#publikationen{
	margin-top: var(--header-height);
}


.publikationen-box .image_container{
	height: calc(100% - 55px);
}

.publikationen-box img{
	height: 100%;
	object-fit: cover;
}

.publikationen-box .content{
	font-size: 13px;
	margin-top: 20px;
}

.publikationen-box .content p, .projekt-box .content p{
	margin: 0;
}

.projekt-box .content{
	margin-top: 10px;
	font-size: 13px;
	opacity: 1;
	transition: var(--hover-transition-duration);
}

.projekt-box.hidden .content{
	opacity: 0;
}


/** IMPRESSUM / DATENSCHUTZ **/

#impressum-article, #datenschutz-article{
	margin-top: var(--header-height);
}

#datenschutz-article *{
	color: var(--font-color-light);
}

#impressum-article li, #datenschutz-article li{
	color: var(--font-color-light);
}

#impressum-article a, #datenschutz-article a{
	color: var(--font-color-light);
	transition: var(--hover-transition-duration);
}

#impressum-article a:hover, #datenschutz-article a:hover{
	color: var(--font-color-dark);
}

#impressum-article .rs-columns{
	display: flex;
	flex-direction: column-reverse;
}

/** FOOTER **/

footer{
	margin-top: 50px;
}

.footer-menu{
	text-align: center;
	padding-bottom: 15px;
	color: var(--font-color-light);
	font-size: 11px;
	text-transform: uppercase;
}

.footer-menu .links{
	margin-top: 15px;
}

.footer-menu .links a{
	text-decoration: none;
	color: var(--font-color-light);
	transition: color 0.3s;
}

.footer-menu .links a:hover{
	color: var(--font-color-dark);
}

.footer-menu .links .dot{
	display: inline;
}