/* =========================================================
   FUCHSBAU – Header für normale Seiten
   ========================================================= */

.fuchsbau-page-header {
	position: relative;

	padding:
		18px
		32px
		72px;

	background:
		linear-gradient(
			135deg,
			#fff8e7 0%,
			var(--fb3-cream) 55%,
			#f1f4e6 100%
		);

	font-family:
		var(--fb3-font);

	overflow: hidden;

	isolation: isolate;
}


.fuchsbau-page-header *,
.fuchsbau-page-header *::before,
.fuchsbau-page-header *::after {
	box-sizing: border-box;
}


.fuchsbau-page-header p,
.fuchsbau-page-header h1,
.fuchsbau-page-header a,
.fuchsbau-page-header button {
	font-family:
		var(--fb3-font) !important;
}


/* =========================================================
   DEKORATIVE HINTERGRUNDFORMEN
   ========================================================= */

.fuchsbau-page-header::before {
	content: "";

	position: absolute;

	z-index: -2;

	width: 520px;
	height: 520px;

	right: -210px;
	top: 20px;

	background:
		rgba(128, 163, 56, 0.11);

	border-radius:
		46% 54% 62% 38% /
		38% 42% 58% 62%;

	transform:
		rotate(-16deg);
}


.fuchsbau-page-header::after {
	content: "";

	position: absolute;

	z-index: -2;

	width: 460px;
	height: 220px;

	left: -150px;
	bottom: -150px;

	background:
		rgba(79, 112, 54, 0.08);

	border-radius:
		50%;
}


/* =========================================================
   TOPBAR
   ========================================================= */

/*
 * Grundlayout, Navigation, Logo und Mitglied-Button
 * kommen aus header.css über die vorhandenen
 * fuchsbau-v3-* Klassen.
 */

.fuchsbau-page-topbar {
	margin-bottom:
		58px !important;
}


/* =========================================================
   PAGE STAGE
   ========================================================= */

.fuchsbau-page-stage {
	position: relative;

	z-index: 2;

	width: 100%;

	max-width: 1480px;

	margin:
		0
		auto !important;

	padding:
		22px
		clamp(
			8px,
			2vw,
			32px
		)
		16px !important;
}


/* Eyebrow */

.fuchsbau-page-eyebrow {
	display: flex;

	align-items: center;

	gap: 10px;

	margin:
		0
		0
		20px;

	color:
		var(--fb3-green);

	font-size:
		14px;

	font-weight:
		700;

	line-height:
		1.4;

	letter-spacing:
		1.6px;

	text-transform:
		uppercase;
}


.fuchsbau-page-eyebrow span {
	display: inline-flex;

	align-items: center;

	padding:
		7px
		11px;

	background:
		var(--fb3-dark);

	color:
		var(--fb3-sand);

	border-radius:
		999px;

	font-size:
		11px;

	letter-spacing:
		1.2px;
}


/* Seitentitel */

.fuchsbau-page-title {
	max-width:
		15ch;

	margin:
		0 !important;

	color:
		var(--fb3-dark);

	font-size:
		clamp(
			48px,
			5vw,
			72px
		) !important;

	font-weight:
		700 !important;

	line-height:
		1.02 !important;

	letter-spacing:
		-2px;

	text-wrap:
		balance;
}


/* kleiner orangefarbener Abschluss */

.fuchsbau-page-accent {
	width: 64px;
	height: 5px;

	margin-top:
		28px;

	background:
		var(--fb3-orange);

	border-radius:
		999px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 820px) {

	.fuchsbau-page-header {
		padding:
			12px
			16px
			52px;
	}


	.fuchsbau-page-topbar {
		margin-bottom:
			34px !important;
	}


	.fuchsbau-page-stage {
		padding:
			18px
			18px
			10px !important;
	}


	.fuchsbau-page-title {
		font-size:
			clamp(
				42px,
				11vw,
				60px
			) !important;

		letter-spacing:
			-1.5px;
	}
}


@media (max-width: 500px) {

	.fuchsbau-page-eyebrow {
		display:
			block;

		font-size:
			12px;
	}


	.fuchsbau-page-eyebrow span {
		width:
			max-content;

		margin-bottom:
			7px;
	}


	.fuchsbau-page-title {
		font-size:
			42px !important;
	}
}