div.td_block_newspaper__child_main__grid {
	--main-grid-fallback: url("fallback.svg");

/* Allgemein Style fürs testen*/
p {
	margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Red Hat Display", sans-serif;
	font-weight: 700;
	margin: 0.2rem;
}


.news_img {
	width: 50%;
	background: url("fallback.svg") no-repeat center / cover;
}


.news-headline-xl, h2 {
	font-family: "Red Hat Display", sans-serif;
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 130%;
	margin: 0;
}

.news-headline-xs, h2 {
	font-family: "Red Hat Display", sans-serif;
	font-size: 1.1rem;
	line-height: 110%;
	margin: 0;
}

.news-description-xs {
	margin: 0;
	font-family: Montserrat, sans-serif;
	font-size: 0.81rem;
	line-height: 130%;
	color: #fff;
	margin: 3.2px 0px
}

.news-description-m {
	margin: 0;
	font-family: Montserrat, sans-serif;
	font-size: 1.1rem;
	line-height: 130%;
	color: #fff;
	margin: 3.2px 0px
}

.read-more-link {
	margin: 0;
	font-family: Montserrat, sans-serif;
	font-size: 0.8rem;
	color: #414459;
	text-decoration: none;
}

.read-more-link-news {
	margin: 0;
	font-family: Montserrat, sans-serif;
	font-size: 0.8rem;
	color: #fff;
	text-decoration: none;
}




/* GRID Style*/

.pattern-main-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	width: 100%;
	max-height: 752px;
	margin: 0 auto;
	aspect-ratio: 1 / 1;
}

.pattern-main-grid__hub {
	padding: 1rem;
	font-family: Montserrat, sans-serif;
}

.pattern-main-grid > div {
	border-radius: 12px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
	color: #414459;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pattern-main-grid > div:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

.pattern-main-grid__item_banner {
	background-color: #fff;
	display: flex;
	gap: 10px;
	flex-direction: column;
	padding: 1rem;
	border-radius: 4px;
	align-items: center;
	text-align: center
}

.pattern-main-grid__item__flex-space_between {
	position: relative;
	z-index: 1;
	height: stretch;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
}

.has-overlay {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}


.has-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(
	to top,
	rgba(0, 0, 0, 0.8),
	rgba(0, 0, 0, 0.01)
	);
	pointer-events: none;
}


.has-overlay > * {
	position: relative;
	z-index: 1;
}


.pattern-main-grid__item__hub__name {
	font-size: 0.65rem;
	font-weight: 500;
	text-transform: uppercase;
}

.hub-badge {
	padding: 6px 12px;
	border-radius: 8px;
	font-size: 0.65rem;
	line-height: 110%;
	font-weight: 500;
	text-transform: uppercase;
	font-family: Montserrat, sans-serif;
}

.hub__color1 {
background-color: #F5A5B6;
}

.hub__color2 {
background-color: #D4ED62;
}

.hub__color3 {
background-color: #79E0F3;
}

.hub__color4 {
background-color: #F4A249;
}

.hub__color_cheute {
background-color: #fff;
color: #E15D0A;
border: solid 1px #E15D0A;
display: inline-block;

}

/*Element 1*/
.pattern-main-grid__item1 {
	grid-column: 1/3;
	grid-row: 1/3;
	background: #808080 url("fallback.svg") no-repeat center / cover;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 1rem;
}

/*Element 2*/
.pattern-main-grid__item2 {
	grid-column: 3 / 5;
	grid-row: 1 / 2;
	border: solid 1px #eeeeee;
	padding: 1rem;
}

.pattern-main-grid__item2__flex-row {
display: flex;
flex-direction: row;
justify-content: space-between;
height: stretch;
gap: 1rem;
}

.pattern-main-grid__item_banner__left {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
	width: 55%;
	justify-content: space-between;
}

/* Element 3 */
.pattern-main-grid__item3 {
	grid-column: 3;
	grid-row: 2;
	padding: 1rem;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #808080 url("fallback.svg") no-repeat center / cover;
}


/* Element 4 */
.pattern-main-grid__item4 {
	grid-column: 4;
	grid-row: 2;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 1rem;
	background: #808080 url("fallback.svg") no-repeat center / cover;
}


/* Element 5 */
.pattern-main-grid__item5 {
	grid-column: 1;
	grid-row: 3;
	padding: 1rem;
	background: #808080 url("fallback.svg") no-repeat center / cover;
	display: flex;
	flex-direction: column;
	justify-content: center;
}


/* Element 6 */
.pattern-main-grid__item6 {
	grid-column: 2;
	grid-row: 3;
	padding: 1rem;
	background: #808080 url("fallback.svg") no-repeat center / cover;
	display: flex;
	flex-direction: column;
	justify-content: center;
}


/* Element 7 */
.pattern-main-grid__item7 {
	grid-column: 3 / 5;
	grid-row: 3;
	padding: 1rem;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #808080 url("fallback.svg") no-repeat center / cover;
}


/* Tablet: ab 812px */
@media (max-width: 812px) {

	.pattern-main-grid {
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-template-rows: repeat(5, minmax(180px, auto));
	gap: 1rem;
	max-height: stretch;

	aspect-ratio: auto;
	}


	.pattern-main-grid__item1 {
	grid-column: 1 / 7;
	grid-row: 1 / 3;
	}


	.pattern-main-grid__item2 {
	grid-column: 1 / 7;
	grid-row: 3;
	}



	.pattern-main-grid__item3 {
	grid-column: 1 / 3;
	grid-row: 5;
	}


	.pattern-main-grid__item4 {
	grid-column: 3 / 5;
	grid-row: 5;
	}


	.pattern-main-grid__item5 {
	grid-column: 1 / 4;
	grid-row: 4;
	}


	.pattern-main-grid__item6 {
	grid-column: 4 / 7;
	grid-row: 4;
	}


	.pattern-main-grid__item7 {
	grid-column:  5/ 7;
	grid-row: 5;
	}


}




/* Mobil: ab 692px */
@media (max-width: 692px) {

	.pattern-main-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: repeat(7, minmax(180px, auto));
	gap: 1rem;

	aspect-ratio: auto;
	}


	.pattern-main-grid__item1 {
	grid-column: 1 / 5;
	grid-row: 1 / 3;
	}


	.pattern-main-grid__item2 {
	grid-column: 1 / 5;
	grid-row: 3;
	}



	.pattern-main-grid__item3 {
	grid-column: 1 / 3;
	grid-row: 6;
	}


	.pattern-main-grid__item4 {
	grid-column: 3 / 5;
	grid-row: 6;
	}


	.pattern-main-grid__item5 {
	grid-column: 1 / 5;
	grid-row: 4;
	}


	.pattern-main-grid__item6 {
	grid-column: 1 / 5;
	grid-row: 5;
	}


	.pattern-main-grid__item7 {
	grid-column:  1/ 5;
	grid-row: 7;
	}


}
}