/* -------------------  Project Header ----------------*/








/* -------------------  Project Liste ----------------*/
.project_liste{
	gap:var(--listen_gap);
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	
}

.project_box {
	margin-bottom:0rem;
}

.project_image {
	background-color: var(--placeholer_color);
}

.project_box .project_image{
	overflow: clip;
	width:100%;
	height:auto;
	aspect-ratio:16/9;
	display: flex;
	border-radius: 0;
}
.project_box .project_image:hover{
	_border-radius: 30px;
	transition: all .4s ease-in-out;
	margin-top:-1vh;
}

.project_box .project_image img{
	height:100%;
	width:auto;
	position: absolute;
	top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
}
.project_highlight .project_box .project_image{
	width:100%;
	height:auto;
	aspect-ratio:4/3;
}
.project_highlight .project_box .project_image img{
	width:100%;
	height:auto;
	bottom:0px;
	position: absolute;
	top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
}

.projekt_container {
	container-type: inline-size;
	container-name: projekt_container;
}

.project_box .project_text {
	line-height:1.4rem;
	margin-top:1rem;
}
.project_box h3 a {
	color: var(--text_color);
}
.project_box h3 a:hover {
	color: var(--mid_grey_background);
}

.project_box .project_text .project_name {
	font-size: clamp(1.1rem, 2.0vw, 1.8rem);
	font-weight: 300;
	text-transform: uppercase;
}

@container projekt_container (min-width: 200px){
	.project_highlight .project_box .project_image {
		aspect-ratio: 4/3;
	}
	.project_highlight .project_box .project_image img{
		height:100%;
		width:auto;
	}
	.mod_newslist {
		display: grid;
		grid-template-columns: repeat(2, minmax(110px, 1fr));
		gap: .5rem;
	}
	.mod_newslist.featured {
		display: grid;
		grid-template-columns: repeat(1, minmax(240px, 1fr));
		gap: .5rem;
	}
	.mod_newslist h3 {
		font-size:.8em;
	}
	/* related items */
	.portfolio-detail .product_liste {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		width: 100%;
		gap: var(--listen_gap);
		max-width: var(--max_width);
		margin: 0px auto;
	}
	.home_project_container .mod_newslist{
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	}
	
}
@container projekt_container (min-width: 600px){
	.project_highlight .project_box .project_image {
		aspect-ratio:16/9;
	}
	.project_highlight .project_box .project_image img{
		height:auto;
		width:100%;
	}
	.mod_newslist {
		display: grid;
		grid-template-columns: repeat(2, minmax(320px, 1fr));
		gap: .75rem;
	}
	.mod_newslist.featured {
		display: grid;
		grid-template-columns: repeat(1, minmax(500px, 1fr));
		gap: .75rem;
	}
	.mod_newslist h3 {
		font-size:1.3em;
	}
	
}
@container projekt_container (min-width: 800px){

	.mod_newslist {
		display: grid;
		grid-template-columns: repeat(3, minmax(240px, 1fr));
		gap: .75rem;
	}
	.mod_newslist.featured {
		display: grid;
		grid-template-columns: repeat(2, minmax(340px, 1fr));
		gap: .75rem;
	}
}
@container projekt_container (min-width: 1000px){

	.mod_newslist {
		display: grid;
		grid-template-columns: repeat(3, minmax(320px, 1fr));
		gap: .75rem;
	}
	.mod_newslist.featured {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
		gap: .75rem;
	}
	
	.home_project_container .mod_newslist{
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	}
}
@container projekt_container (min-width: 1440px){
	.home_project_container .mod_newslist{
		grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	}
}
@container projekt_container (min-width: 1800px){
	.home_project_container .mod_newslist{
		grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
	}
}


.maso_gallery ul:before,
.maso_gallery ul:after { display:none;}
/*
.maso_gallery ul{
	height: minmax(100px,10vw);
	display: flex;
	gap: 2.5rem;
	overflow: hidden;
	display: grid;
	flex-direction: row;
	flex-flow: row;
	flex-wrap: wrap;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	  
}
.maso_gallery ul li{
	height: auto;
	width: auto!important;  
}
*/
.maso_gallery ul {
	column-width: 360px;
	column-width: minmax(360px,100%);
	column-gap: 1em;
}

.maso_gallery ul li {
	_background: #ccc;
	margin-bottom: 1em;
	_padding: 1em;
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	column-break-inside: avoid;
}
.maso_gallery .image_container {
	border-radius: 0px;
	transition: all .4s ease-in-out;
	overflow: clip;
}
.maso_gallery .image_container:hover {

		_border-radius: 30px;
		transition: all .4s ease-in-out;
		margin-top:-1vh;
	transition: all .4s ease-in-out;
}


/* Project Contao Gallery --------------------------------------------*/

.projekt_gallery_masonry {}



/* Grid images --------------------------------------------*/

.img {
  border-radius: 1rem;
  height: 100%;
  width: 100%;
  object-fit: cover;
}



/* ----------------------- Projekt Detail News-Sewite ----------------------*/

.page_section.full:has(.mod_newsreader){
	padding:0!important;
}
.page_section.full .mod_newsreader {
	padding:0!important;
}

.page_section.full .mod_newsreader .grid_liste {
	padding: 0px var(--dynamicBorder);
}

.page_section.full .mod_newsreader .project_content_area.grid_liste  {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	width: 100%;
	gap: var(--listen_gap);
	max-width: var(--max_width);
	margin: 0px auto;
}

.page_section.project_content_area{
	padding:3vh 0;
}
/*
@container projekt_container (min-width: 200px){


}
*/
.mod_newsreader.portfolio-detail,
.portfolio_detail {
	container-type: inline-size;
	container-name: project_header_container;
}

.mod_article.page_section.full.block {}

.mod_newsreader.portfolio-boxes.portfolio-detail.block {
	max-width:none!important;
}
.layout_full.block.featured{}



.portfolio_background-header {
	align-content:flex-start;
	display:flex;
	height:40vh!important;
	min-height:40vh!important;
}
.centered-wrapper-background {}


.portfolio_background-header.project_header .centered-wrapper-inner {
	flex-direction: column;
	justify-content: flex-end!important;
	align-items: flex-start;
}
.portfolio_background-header.project_header .project_tags {
	color:white;
	text-transform: uppercase;
	line-height:1em;
	font-size: clamp(.6em,2vw,.8em);
}

.portfolio_background-header.project_header h3.breadcrumbs-headline {
	font-size: clamp(1.4em,7vw,5em)!important;
	margin-bottom:5vh;
}

.portfolio_background-header .centered-wrapper-inner {
	max-width: var(--max_width);
	margin:0px auto;
	padding: 0px var(--dynamicBorder);
	align-content: flex-end;
	display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: end;
	}
}


.project_headline { }

.portfolio_background-header h3.breadcrumbs-headline {
	font-size: 3em;
	color: white;
	margin-bottom: 10vh;
	margin-top:0;
	padding:0;
}
.project_content_area h3.breadcrumbs-headline{
	font-size: 3em;
	color: black;
	margin-top:0;
	padding:0;
}

.project_header_image { }


@container project_header_container (min-width: 200px) {
	.portfolio_background-header h3.breadcrumbs-headline {
		_display:none;
	}
	.project_content_area:has(h1) {
		display: none;
	}
	.portfolio_background-header .centered-wrapper-inner {
		justify-content: flex-start;
	}
	
}
@container project_header_container (min-width: 1024px) {
	.portfolio_background-header h3.breadcrumbs-headline {
		display:flex;
	}
	.project_content_area h3.breadcrumbs-headline {
		display: none;
	}
	.portfolio_background-header .centered-wrapper-inner {
		justify-content: space-between;
	}
}


/* -----------------------------   RELEATED ITEMS LISTEN ---------------------------------*/

.product_liste.grid_liste {
	display: grid;
	width: 100%;
	gap: var(--listen_gap);
	max-width: var(--max_width);	
	margin: 0px auto;
}
@container project_header_container (min-width: 200px){
	.product_liste.grid_liste {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}
}
@container project_header_container (min-width: 1000px){
	.product_liste.grid_liste {
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	}
}
@container project_header_container (min-width: 120px){
	
}


/*

.portfolio-detail {}
.portfolio-detail .layout_full {
	
	
}
.portfolio-detail .layout_full h1,
.portfolio-detail .layout_full h2 {
	
}


.portfolio-detail .layout_full .ce_text .image_container {
	
}
.portfolio-detail .layout_full .ce_text .image_container img{
	
}
.portfolio-detail:before{
	content:'';
	_background-color:#00000080;
	_z-index:5;
	_position: absolute;
	_width:100%;
	_height:100%;
}

.portfolio_product_box {
	
}

.portfolio_product_box .centered-wrapper-inner ,
.portfolio_product_box .centered-wrapper-inner .ce_image ,
.portfolio_product_box .centered-wrapper-inner .ce_image .image_container,
.portfolio_product_box .centered-wrapper-inner .ce_image .image_container img {
	height:100%!important;
}

*/