*{font-family: Poppins, sans-serif; margin:0; padding:0;}

.container{margin: 0 10px;}

.floatend{clear:both;}

h1{margin-bottom:40px; font-size:30px; line-height:34px; font-weight:600; color: #e95045;}
h2{font-size: 24px; line-height:28px; font-weight:700; margin-bottom: 5px; color: #36333f;}
h3{font-size:15px; line-height:21px;  margin:10px 0; color: #36333f;}
h4{margin-top:10px; margin-bottom:10px; font-size:18px; line-height:22px; font-weight:300;}
p{font-size:14px; line-height:20px; color: #36333f; margin-bottom:10px;}
p a{color: #e95045; text-decoration:none;}
li{font-size:14px; line-height:20px; color: #36333f;}
ul{margin-bottom:10px;}

header{background: rgba(54, 51, 63, 0.8); padding: 15px 0; position: fixed; top:0; width:100%; z-index:9999;}
header .container{display:flex; justify-content:space-between; align-items:center;}

.hauptnavigation{display:flex; align-items:center;}

.language_nav{display:flex;}
.lang{color:#fff; text-transform:uppercase; text-decoration:none; padding: 0 6px; transition: all 0.3s ease; position:relative; font-weight:300; font-size:16px;}
.lang_stroke{width:2px; background: #fff; opacity:0.5;}
.lang.inactive{opacity:0.5;}
.lang:hover{opacity:1;}

.titlesection{position:relative; height:100vh;}
.titlesection video{object-fit: cover;  background-size: cover; background-position: 50% 50%; position: absolute; z-index:9; width:100%; height:100%;}
.video_content{position:absolute; top:0; left:0; right:0; bottom:0; background-color:#36333f; opacity:0.75; z-index:99; display:grid; align-items:center;}

.video_content .headline_small{color: #fff; font-size:24px; line-height:30px; font-weight:300; margin-bottom:30px;}


.button, form button{padding:8px 12px; border: 2px solid #36333f; color: #36333f; border-radius:10px; transition: all 0.2s ease; font-size:14px; font-weight:300; text-decoration:none; display:inline-block;}
.button.white{color: #fff; border: 2px solid #fff;}
.button.red, form button{color: #fff; background-color: #e95045; border:initial; margin-top:20px;}
.button:hover{color: #e95045; border: 2px solid #e95045; transition: all 0.2s ease; cursor:pointer;}
.button.red:hover, form button:hover{background-color: #36333f; border:initial; color:#fff;}

.content_wrapper{padding:80px 0;}
.content_wrapper.grey{background-color:#d7d5df;}
.content_wrapper.lightgrey{background-color:rgba(106, 92, 131, 0.13);}
.content_wrapper.dark{background-color:#36333f;}
.content_wrapper.dark h4{color:#fff;}
.content_wrapper.inactive{display:none;}

.about_button{margin-top:60px;}


.member_img{max-width:100%; filter: grayscale(1); mix-blend-mode: multiply; margin-bottom:10px;}

.leistungen_grid{display:grid; grid-template-columns:1fr; gap:16px; margin-top:40px;}
.leistungen_grid .col{background:#fff; border-radius:10px; transition: all 0.3s ease; padding: 40px 60px 40px 40px; position:relative; text-decoration:none;}

.leistung_tile_button { background: #36333f; position: absolute; top: 0; right: 0; bottom: 0; width: 60px; border-radius: 0 10px 10px 0;}
.leistung_tile_button:after{content:'▶'; color: #fff; position: absolute; top:calc(50% - 15px); left:21px; font-size:20px; opacity:0;}
.leistungen_grid .col:hover{transform: translateY(-6px); box-shadow:0 5px 5px 0 rgb(54 51 63 / 20%); cursor:pointer;}
.leistungen_grid .col:hover p, .leistungen_grid .col:hover h3{color:#e95045;}
.leistungen_grid .col:hover .leistung_tile_button{background: #e95045;}
.leistungen_grid .col:hover .leistung_tile_button:after{opacity:1;}

.leistung_extended.inactive{display:none;}

.leistung_extended{position:fixed; top:100px; left:10px; bottom:15px; right:10px; overflow:auto; padding: 60px 30px; background:#fff; border-radius:20px; border: 6px solid #d7d5df; z-index:99;}

.leistung_extended .keywords{text-align:center;}
.leistung_extended .keywords ul{margin:0; padding:0; font-size:0;}
.leistung_extended .keywords li{list-style:none; display:inline-block; margin: 2px 5px; font-size:13px; line-height:15px; font-weight:500; color: rgba(54, 51, 63, 0.4);}

.leistung_beschreibung_wrap { padding: 10px 10px 10px 28px;  border-left: 2px solid #36333f;  margin-left: 5px;}

.leistung_close, .project_close{position:fixed; right:25px; top:115px; width:40px; height:40px; border-radius: 10px; border: 2px solid #36333f; transition: all 0.3s ease; text-decoration:none; background:#fff;}
.leistung_close:before, .project_close:before{content:'+'; position: absolute; font-size:30px; transform: rotate(45deg); left:9px; color: #36333f; transition: all 0.3s ease;}
	
.leistung_close:hover, .project_close:hover{cursor:pointer; background: #36333f; }
.leistung_close:hover:before, .project_close:hover:before{color:#fff;}

.partner{border-top:1px solid rgba(105, 92, 131, 0.13);}
.partner_grid{display:grid; grid-template-columns:1fr 1fr; gap: 40px; align-items: center; text-align:center; margin-top:30px; }
.partner_logo{width:100%; max-width:120px; filter:grayscale(100%); opacity:0.5; transition: all 0.2s ease;}
.partner_logo:hover{filter:initial; opacity:1;}

#filters{margin-top:30px;}
.filter_button{padding:4px 8px; border:2px solid rgba(106, 92, 131, 0.13); background: rgba(106, 92, 131, 0.13); transition:all 0.3s ease; font-size: 14px; font-weight: 400; margin-right:2px; margin-bottom:5px;}
.filter_button.is-checked{background: #d7d5df;}
.filter_button:hover{background: #d7d5df; border:2px solid rgba(106, 92, 131, 0.13); color: #36333f;}

.project_wrapper{padding:20px 40px; position:relative; background:rgba(106, 92, 131, 0.13); margin-top:20px; border-radius:10px; }
.project{top:20px; opacity:1; transition: all 0.3s ease; }
.project.inactive{display:none;}
.project.p_invisible{display:none;}
.project_statement{position: relative; padding: 30px 0; margin-bottom:20px;}
.project_statement p {font-size: 16px; line-height: 20px; font-weight: 300; text-align: center;}
.project_statement:before{content:'„'; position: absolute; font-size:32px; font-weight:700; top: 0; left: calc(45% - 16px); line-height:0;}
.project_statement:after{content:'“'; position: absolute; font-size:32px; font-weight:700; bottom: 0; left: calc(55% - 16px); line-height:0;}
.project_title{font-size:14px; text-align:center; font-weight:700;}
.project_author{font-size:14px; text-align:center; font-weight:300; font-style:italic;}
.button_red{display:block; width: fit-content; margin: 20px auto 0; color:#fff; background:#e95045; border-color: #e95045;}
.button_red:hover{background:#36333f; border-color:#36333f; color:#fff;}
/*.project.inactive{display:none;}
.project_categorylist{text-align:center; margin-bottom:5px;}
.project_category {display: inline-block; padding: 10px; font-size: 13px; line-height: 16px; color: rgba(54, 51, 63, 0.4); font-weight: 500; transition: all 0.3s ease; cursor:default;}
.project_category:hover{color: rgba(54, 51, 63, 1);}

*/
.before_button {position: absolute; top: 0; left: 0; bottom: 0; width: 30px; background: #d7d5df; border-radius: 10px 0 0 10px; transition: all 0.3s ease;}
.before_button:after{content:'▶'; position:absolute; font-size:20px; top:calc(50% - 15px); color:#fff; left:6px; transform: rotate(180deg);}
.next_button {position: absolute; top: 0; right: 0; bottom: 0; width: 30px; background: #d7d5df; border-radius: 0 10px 10px 0; transition: all 0.3s ease;}
.next_button:after{content:'▶'; position:absolute; font-size:20px; top:calc(50% - 15px); color:#fff; left:6px;}
.before_button:hover, .next_button:hover{background:#36333f; cursor:pointer;}
.next_button.invisible, .before_button.invisible{opacity:0;}

.dot_wrap {display: block; margin: auto; width: fit-content; margin-top: 40px;}
.dot { width: 10px; height: 10px; background: #fff; border-radius: 5px; display: inline-block;  opacity: 0.4;}
.dot.active{opacity:1; background:#fff;}

.project_extended.inactive{display:none;}
.project_extended {position: fixed; top: 100px; left: 10px; bottom: 15px; right: 10px; overflow: auto; padding: 60px 30px; background: #fff; border: 6px solid #d7d5df; border-radius: 20px; z-index: 9999;}
.project_content_ext {padding: 10px 10px 10px 28px; margin-left: 5px; margin-top: 41px; border-left: 2px solid #36333f;}
.project_statement_ext{padding: 0 5px; text-align: center;}
.project_statement_ext p { font-style: italic;}
.project_author_ext {text-align: center;}
.project_description{margin:40px 0; }
/*.project_close{position:absolute; right:30px; top:30px; width:40px; height:40px; border-radius: 10px; border: 2px solid #36333f; transition: all 0.3s ease; text-decoration:none;}
.project_close:before{content:'+'; position: absolute; font-size:30px; transform: rotate(45deg); left:9px; color: #36333f; transition: all 0.3s ease;}*/

.project_gallerie{display:grid; grid-template-columns: 1fr; gap:40px;}
.project_img{max-width:100%;}

.contactform{margin-top:40px;}
form label{color: #fff; display:block; font-size:14px;margin-bottom:5px;}

form input[type=text], form input[type=email]{background:transparent; border:2px solid #615e70; border-radius:10px; width: calc(100% - 28px); padding: 8px 12px; color:#fff; font-size:14px;}
form textarea{background:transparent; border:2px solid #615e70; border-radius:10px; width: calc(100% - 28px); padding: 8px 12px; color:#fff; font-size:14px; height:50px; margin-bottom:20px;}
form button{margin:20px 0;}
form .hint{color:#fff; font-size:14px; font-style:italic;}
form a{color:#fff;}

footer .content_wrapper{padding:60px 0;}
footer .col{margin-bottom:20px;}
.foot_menu { width: 300px;  max-width: 100%;}
.foot_link{display:block; padding:10px; border-top:1px solid #c9c4dd; color:#36333f; font-size:14px; text-decoration:none;}

.abstand{height:100px;}

article.main { min-height: calc(100vh - 370px);}

.content_wrapper li{margin-left:20px;}

.success h3, .success p{color: #fff;}

@media (pointer: coarse) {
	
	.leistung_tile_button:after{opacity:1;}
}

@media(max-width:1023px){	
	.hauptmenu { display:none; position: absolute; top: 77px; right: 0; height: calc(100vh - 137px); background: #fff; overflow: auto; padding:30px; width:238px; border-left:2px solid rgba(106, 92, 131, 0.13); z-index:99999;}	
	.menu_button{transition: all 0.2s ease; font-size:22px; font-weight:300; letter-spacing:0.4px; padding:20px; border-radius:10px; text-decoration:none; color: #36333f; display:block;}
	
	.toggle_button{display:grid; height:30px; width:30px; align-content:space-evenly; margin-right:10px;}
	.toggle_button.active{align-content:center;}
	.toggle_button .stroke { height: 3px; width: 30px; background: #fff; display:block; margin:auto; transition: all 0.3s ease;}
	.toggle_button.active .stroke_1{transform: translateY(1.5px)  rotateX(0deg) rotateY(0deg) rotateZ(45deg);}
	.toggle_button.active .stroke_2{display:none;}
	.toggle_button.active .stroke_3{transform: translateY(-1.5px) rotateX(0deg) rotateY(0deg) rotateZ(-45deg);}
	
	.content_grid{position:relative; padding-bottom:80px;}
	.content_grid .about_button{position: absolute; bottom:0;}

	.member{display: grid; grid-template-columns:1fr 2fr; gap:40px; margin:20px 0;}
	
	.leistung_extended .headline_grid{display:grid; grid-template-columns:1fr; gap:10px; align-items:center; margin-bottom:40px;}
	.leistung_extended .headline_grid .keywords{grid-row-start: 1;}
	
}

@media(max-width:767px){
	.form-group{margin-bottom:10px;}
	
}

@media(max-width:520px){
	.member{display:block;}
	.member_img{max-width:100%; width:300px;}
	
}

@media(max-width:400px){
	.logo_wrap img{width:180px;}
	.hauptmenu{top:71px; height:calc(100vh - 130px);}
	.leistung_extended, .project_extended{top:80px;}
	.leistung_close, .project_close{top:95px;}
}

@media(min-width:520px){

	.container{margin: 0 20px;}
	.team_wrapper { margin-top: 80px;}

	.leistung_tile_content {display: grid; grid-template-columns: 80px 1fr; gap: 20px; margin-right: 20px;}
	.leistungen_grid .col{padding:40px 70px 40px 40px;}

	.partner_grid{grid-template-columns:1fr 1fr 1fr;}

}

@media(min-width:768px){	

	.container{margin: 0 5%;}

	.titlesection{height:700px;}

	.team_wrapper { margin-top: 80px;}

	.content_grid .col_twice{column-count:2; gap:40px; }

	.footer_grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }
	
	.leistung_extended, .project_extended{top:130px; left:20px; bottom:20px; right:20px; padding: 80px 100px; }
	.leistung_close, .project_close{right:5%; top:150px;}
	
	form .col_wrapper{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px;}
	
	.project_wrapper{padding:20px 100px;}
	.before_button, .next_button{width:60px;}
	.before_button:after, .next_button:after{left:21px;}

	.button, form button{padding: 14px 30px; font-size:16px;}

	.project_statement_ext{padding:0 50px;}
	.project_statement_ext p{font-size: 18px;  line-height: 24px;}
	.project_gallerie{grid-template-columns: 1fr 1fr;}

	.partner_grid{grid-template-columns:1fr 1fr 1fr 1fr 1fr;}

}

@media(min-width:1024px){
	
	h1{margin-bottom:70px; font-size:50px; line-height:54px; }
	h2{font-size: 32px; line-height:36px; margin-bottom: 10px; }
	h3{font-size:18px; line-height:24px;  margin:10px 0; }
	h4{margin-top:20px; margin-bottom:10px; font-size:24px; line-height:30px;}
	
	.content_wrapper{padding:105px 0;}
	header{padding:25px 0;}
	
	.toggle_button{display:none;}

	.menu_button{margin:0 5px; transition: all 0.2s ease; color:#fff; font-size:16px; font-weight:300; letter-spacing:0.4px; padding:10px; border-radius:10px; text-decoration:none;}
	.menu_button:hover{background-color:#e95045; transition: all 0.2s ease;}
	
	.leistungen_grid{grid-template-columns:1fr 1fr;}
	
	
	.content_grid{display:grid; grid-template-columns: 1fr 2fr; gap:40px;}
	
	.col_team{ display:grid; grid-template-columns: 1fr 1fr; gap:40px;}
	.team_wrapper{margin-top:80px;}
	
	.leistung_extended .headline_grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; margin-bottom:30px;}
	.leistung_beschreibung{column-count:2; gap: 60px;}
	.leistung_beschreibung_wrap { padding: 10px 10px 10px 98px; margin-left: 10px;}
	.leistung_extended .keywords li{ margin: 3px 9px; font-size:13px; line-height:16px;}
	
	.project_statement p{font-size:22px; line-height:26px;}
	.project_title{font-size:16px; }
	.project_author{font-size:16px;}
	.project_extended{padding: 80px, 100px;}
	.project_content_ext{padding: 10px 10px 10px 98px; margin-left: 10px;}
	.project_description{column-count:2; gap:60px;}
	.project_gallerie{grid-template-columns: 1fr 1fr 1fr;}

	.footer_grid{ grid-template-columns:1fr 1fr 1fr 1fr;}
}

@media(min-width:1200px){
	.container{margin: 0 10%;}
	.team_wrapper { margin-top: 80px;}
	.menu_button{padding:15px;}
	
}

@media(min-width:1400px){
	.menu_button{padding:20px;}
	
}