/* Header Background */
.header-background {
    height: 677px;
    background-size: cover;
	background-position: center center;
	background-image: var(--header-background);
	margin-top: 90px;
}
	.header-background > div {
		height: 100%;
		width: 100%;
		background-color: #0000006b;
	}
		.header-background > div h1 {
			color: rgba(var(--secondary-text-color), 1);
			font-family: AceSansBold, sans-serif;
			font-size: 59px;
		}
		.header-background > div .header-buttons button:first-child {
			margin-right: 40px;
		}
		.header-background > div .teaser-text {
			display: flex;
    		flex-wrap: wrap;
		}
			.header-background > div .teaser-text h2 {
				color: rgba(var(--secondary-text-color), 1);
				font-size: 23px;
				width: 100%;
				text-align: end;
			}

			.header-background > div .teaser-text span {
				color: rgba(var(--secondary-text-color), 1);
				font-size: 20px;
				font-family: Montserrat-Regular, sans-serif;
				width: 100%;
				text-align: end;
				margin: 5px 0;
			}

			.header-background .header-buttons-mobile {
				display: none;
			}

/* Content Bereich */
.content .headline {
	margin: 100px 0;
}
	.content .headline h1 {
		color: rgba(var(--primary-text-color), 1);
		font-family: AceSansBold, sans-serif;
		font-size: 40px;
		text-align: center;
	}

.content .categories {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
}
	.content .categories .category {
		overflow: hidden;
	}
		.content .categories .category > div {
			display: flex;
			height: 230px;
			background-position: center;
			background-size: cover;
			cursor: pointer;
			transition: all .5s;
		}
			.content .categories .category > div > div {
				background-color: #0000006b;
				width: 100%;
				height: 100%;
				display: flex;
			}
				.content .categories .category > div > div h4 {
					font-family: AceSansBold, sans-serif;
					font-size: 40px;
					color: rgba(var(--secondary-text-color), 1);
					margin: auto;
					transition: all .5s;
				}
		.content .categories .category > div:hover {
			transform: scale(1.1);
		}
				.content .categories .category > div:hover > div h4 {
					transform: scale(0.9);
				}

	.content .more-dishes {
		margin: 100px 0 0 0;
	}

/* Mittlerer Bereich */
/* CTA 1 */
.cta-1 {
	height: 476px;
	width: 100%;
	background-position: center;
	background-size: cover;
	background-image: var(--middle-background);
	display: flex;
	margin: 100px 0;
}
	.cta-1 > div {
		width: 100%;
		height: 100%;
		background-color: #3e3e3ea1;
	}
		.cta-1 > div .middle-text > div > div {
			text-align: end;
    		width: 100%;
		}
			.cta-1 > div .middle-text h2 {
				color: rgba(var(--secondary-text-color), 1);
				font-family: AceSansBold, sans-serif;
				font-size: 40px;
			}
			.cta-1 > div .middle-text p {
				color: rgba(var(--secondary-text-color), 1);
				font-family: AceSansBold, sans-serif;
				font-size: 18px;
			}
			.cta-1 > div .middle-text button {
			}

/* CTA 2 */
.cta-2 .icon {
	color: rgba(var(--secondary-color), 1);
	font-size: 80px;
	text-align: center;
	margin-bottom: 20px;
}
.cta-2 .text {
	text-align: center;
	color: rgba(var(--primary-text-color), 1);
}
	.cta-2 .text h4 {
		font-family: AceSansBold, sans-serif;
		font-size: 20px;
		color: rgba(var(--primary-text-color), 1);
		margin-bottom: 20px;
	}
	.cta-2 .text p {
		font-size: 18px;
		color: rgba(var(--primary-text-color), 1);
	}


/* Menü Collapsed */
@media (max-width: 720px) {

	.header-background {
		height: 100vh;
		margin-top: 0;
	}

		.header-background > div h1 {
			color: rgba(var(--secondary-text-color), 1);
			font-family: AceSansBold, sans-serif;
			font-size: 40px;
			text-align: center;
		}
		.header-background > div .teaser-text h2{
			text-align: center;
			font-size: 16px;
			margin-bottom: 5px;
		}
		.header-background > div .teaser-text p {
			text-align: center;
			font-size: 14px;
		}
		.header-background > div .header-buttons {
			display: none;
		}
		.header-background > div .header-buttons-mobile {
			display: flex;
			margin-top: 40px;
		}

	.content .categories {
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}
		.content .categories .category > div {
			height: 100px;
		}
			.content .categories .category > div > div h4 {
				font-size: 14px;
			}

	.cta-1 > div .middle-text > div > div {
		text-align: center;
	}
		.cta-1 > div .middle-text h2 {
			font-size: 30px;
		}
		.cta-1 > div .middle-text p {
			font-size: 14px;
		}
}

/* Mobile Version */
@media (max-width: 576px) {
	.btn-mobile-sm {
		font-size: 12px;
    	padding: 2px 6px;
	}
}