/* =========================================================
   FUCHSBAU
   Startseiten-Header
   ========================================================= */

/* =========================================================
   HEADER CANVAS
   ========================================================= */

.fuchsbau-v3-header {
	position: relative;

	padding:
		18px
		32px
		105px;

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

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

	overflow: hidden;

	isolation: isolate;
}

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

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


/*
 * Zwei riesige, sehr subtile organische Formen.
 * Sie ersetzen die typische "Box auf Hintergrund"-Optik.
 */

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

	position: absolute;

	z-index: -2;

	width: 780px;
	height: 780px;

	right: -340px;
	top: 160px;

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

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

	transform:
		rotate(-16deg);
}

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

	position: absolute;

	z-index: -2;

	width: 640px;
	height: 330px;

	left: -170px;
	bottom: -190px;

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

	border-radius: 50%;
}


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

.fuchsbau-v3-topbar {
	position: relative;

	z-index: 20;

	max-width: 1480px;

	min-height: 82px;

	margin:
		0
		auto
		42px;

	gap: 40px;
}


/* Logo */

.fuchsbau-v3-logo {
	flex-shrink: 0;
}

.fuchsbau-v3-logo img {
	display: block;

	width: auto;
	height: auto;

	max-width: 280px;
	max-height: 78px;
}


/* Navigation */

.fuchsbau-v3-nav-area {
	gap: 34px;
}

.fuchsbau-v3-nav a {
	position: relative;

	color: var(--fb3-dark);

	font-size: 18px;
	font-weight: 500;

	text-decoration: none;

	transition:
		color 180ms ease;
}

.fuchsbau-v3-nav a::after {
	content: "";

	position: absolute;

	left: 50%;
	bottom: -9px;

	width: 5px;
	height: 5px;

	background:
		var(--fb3-orange);

	border-radius: 50%;

	opacity: 0;

	transform:
		translateX(-50%)
		translateY(5px);

	transition:
		opacity 180ms ease,
		transform 180ms ease;
}

.fuchsbau-v3-nav a:hover,
.fuchsbau-v3-nav .current-menu-item > a {
	color:
		var(--fb3-orange);
}

.fuchsbau-v3-nav a:hover::after,
.fuchsbau-v3-nav .current-menu-item > a::after {
	opacity: 1;

	transform:
		translateX(-50%)
		translateY(0);
}


/* CTA */

.fuchsbau-v3-member .wp-block-button__link {
	position: relative;

	overflow: hidden;

	background:
		var(--fb3-orange);

	color:
		#ffffff;

	border: 0;

	border-radius:
		999px;

	padding:
		14px
		28px;

	font-size:
		17px;

	font-weight:
		700;

	box-shadow:
		0 10px 28px
		rgba(209, 63, 26, 0.22);

	transition:
		transform 180ms ease,
		box-shadow 180ms ease,
		background-color 180ms ease;
}

.fuchsbau-v3-member .wp-block-button__link:hover {
	background:
		var(--fb3-orange-dark);

	transform:
		translateY(-3px);

	box-shadow:
		0 15px 34px
		rgba(209, 63, 26, 0.28);
}


/* =========================================================
   HERO STAGE
   ========================================================= */

.fuchsbau-v3-stage {
	position: relative;

	display: grid;

	grid-template-columns:
		minmax(420px, 0.88fr)
		minmax(560px, 1.25fr);

	align-items: center;

	column-gap:
		clamp(
			50px,
			6vw,
			110px
		);

	max-width:
		1480px;

	min-height:
		650px;

	margin:
		0
		auto;
}


/* =========================================================
   TEXT
   ========================================================= */

.fuchsbau-v3-copy {
	position: relative;

	z-index: 6;

	max-width:
		620px;

	margin:
		0;

	padding-left:
		clamp(
			8px,
			2vw,
			32px
		);
}


/* Eyebrow */

.fuchsbau-v3-eyebrow {
	display: flex;

	align-items: center;

	gap: 10px;

	margin:
		0
		0
		24px;

	color:
		var(--fb3-green);

	font-size:
		14px;

	font-weight:
		700;

	line-height:
		1.4;

	letter-spacing:
		1.6px;

	text-transform:
		uppercase;
}

.fuchsbau-v3-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;
}


/* Große Headline */

.fuchsbau-v3-title {
	max-width:
		10ch;

	margin:
		0
		0
		30px;

	color:
		var(--fb3-dark);

	font-size:
		clamp(
			64px,
			5.6vw,
			92px
		);

	font-weight:
		700;

	line-height:
		0.98;

	letter-spacing:
		-2.7px;

	text-wrap:
		balance;

	word-break:
		normal;

	overflow-wrap:
		normal;

	hyphens:
		none;
}


/* Beschreibung */

.fuchsbau-v3-text {
	max-width:
		545px;

	margin:
		0
		0
		30px;

	color:
		var(--fb3-muted);

	font-size:
		20px;

	font-weight:
		400;

	line-height:
		1.7;
}


/* Kleiner Marken-Chip */

.fuchsbau-v3-tag {
	display: inline-flex !important;

	width: auto !important;

	margin:
		0 !important;

	padding:
		10px
		16px
		10px
		13px;

	background:
		rgba(255, 255, 255, 0.50);

	border:
		1px solid
		rgba(31, 60, 46, 0.11);

	border-radius:
		999px;

	box-shadow:
		0 8px 30px
		rgba(31, 60, 46, 0.06);

	backdrop-filter:
		blur(8px);
}

.fuchsbau-v3-tag::before {
	content: "";

	flex:
		0 0 10px;

	width:
		10px;

	height:
		10px;

	margin-right:
		10px;

	background:
		var(--fb3-orange);

	border-radius:
		50%;
}

.fuchsbau-v3-tag p {
	margin:
		0;

	color:
		var(--fb3-dark);

	font-size:
		15px;

	font-weight:
		600;
}


/* =========================================================
   VISUAL / FOTO
   ========================================================= */

.fuchsbau-v3-visual {
	position: relative;

	z-index: 3;

	min-width:
		0;

	height:
		clamp(
			520px,
			42vw,
			670px
		);

	margin:
		0;
}


/*
 * Farbiges Backplate hinter dem Bild.
 * Das verleiht Tiefe, ohne nach "Card" auszusehen.
 */

.fuchsbau-v3-visual::before {
	content: "";

	position: absolute;

	z-index: -1;

	inset:
		-20px
		-18px
		18px
		24px;

	background:
		linear-gradient(
			145deg,
			var(--fb3-green-light),
			var(--fb3-green)
		);

	border-radius:
		54px
		54px
		110px
		54px;

	transform:
		rotate(2.2deg);

	opacity:
		0.90;
}


/* Foto */

figure.wp-block-image.fuchsbau-v3-photo {
	position: absolute !important;

	inset:
		0 !important;

	width:
		100% !important;

	max-width:
		none !important;

	height:
		100% !important;

	margin:
		0 !important;

	overflow:
		hidden;

	border:
		5px solid
		rgba(255, 255, 255, 0.75);

	border-radius:
		46px
		46px
		110px
		46px;

	box-shadow:
		0 28px 70px
		rgba(31, 60, 46, 0.20);
}

figure.wp-block-image.fuchsbau-v3-photo::after {
	content: "";

	position: absolute;

	inset:
		0;

	z-index:
		1;

	background:
		linear-gradient(
			180deg,
			transparent 48%,
			rgba(31, 60, 46, 0.08) 68%,
			rgba(31, 60, 46, 0.35) 100%
		);

	pointer-events:
		none;
}

figure.wp-block-image.fuchsbau-v3-photo > img {
	position: absolute !important;

	inset:
		0 !important;

	display:
		block !important;

	width:
		100% !important;

	max-width:
		none !important;

	height:
		100% !important;

	object-fit:
		cover !important;

	object-position:
		center center !important;
}


/* =========================================================
   FUCHS
   ========================================================= */

figure.wp-block-image.fuchsbau-v3-fox {
	position:
		absolute !important;

	z-index:
		7;

	left:
		-112px;

	bottom:
		-22px;

	width:
		clamp(
			205px,
			16vw,
			265px
		) !important;

	max-width:
		265px !important;

	margin:
		0 !important;

	pointer-events:
		none;
}

figure.wp-block-image.fuchsbau-v3-fox > img {
	display:
		block !important;

	width:
		100% !important;

	max-width:
		none !important;

	height:
		auto !important;

	object-fit:
		contain !important;

	filter:
		drop-shadow(
			0
			20px
			18px
			rgba(31, 60, 46, 0.22)
		);
}


/* =========================================================
   GLASS MOTTO
   ========================================================= */

.fuchsbau-v3-quote {
	position:
		absolute;

	z-index:
		8;

	right:
		28px;

	bottom:
		28px;

	width:
		min(
			470px,
			calc(100% - 120px)
		);

	margin:
		0 !important;

	padding:
		18px
		22px;

	gap:
		15px;

	background:
		rgba(31, 60, 46, 0.78);

	border:
		1px solid
		rgba(255, 255, 255, 0.22);

	border-radius:
		24px;

	box-shadow:
		0 16px 40px
		rgba(31, 60, 46, 0.25);

	backdrop-filter:
		blur(14px);

	-webkit-backdrop-filter:
		blur(14px);
}


/* Bäume */

figure.wp-block-image.fuchsbau-v3-trees {
	flex:
		0 0 40px !important;

	width:
		40px !important;

	max-width:
		40px !important;

	margin:
		0 !important;
}

figure.wp-block-image.fuchsbau-v3-trees > img {
	display:
		block !important;

	width:
		40px !important;

	max-width:
		40px !important;

	height:
		auto !important;

	object-fit:
		contain !important;
}


/* Motto Text */

.fuchsbau-v3-quote-text {
	margin:
		0;

	color:
		#ffffff;

	font-size:
		18px;

	font-weight:
		500;

	line-height:
		1.45;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1150px) {

	.fuchsbau-v3-stage {
		grid-template-columns:
			minmax(360px, 0.9fr)
			minmax(470px, 1.1fr);

		column-gap:
			46px;
	}

	.fuchsbau-v3-title {
		font-size:
			clamp(
				54px,
				6vw,
				72px
			);
	}

	.fuchsbau-v3-text {
		font-size:
			18px;
	}

	figure.wp-block-image.fuchsbau-v3-fox {
		left:
			-78px;

		width:
			200px !important;
	}
}


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

@media (max-width: 820px) {

	.fuchsbau-v3-header {
		padding:
			12px
			16px
			54px;
	}


	/* Navigation */

	.fuchsbau-v3-topbar {
		min-height:
			64px;

		margin-bottom:
			26px;

		gap:
			12px;
	}

	.fuchsbau-v3-logo img {
		max-width:
			205px;

		max-height:
			64px;
	}

	.fuchsbau-v3-nav-area {
		gap:
			8px;
	}

	.fuchsbau-v3-member {
		display:
			none;
	}


	/* Stage */

	.fuchsbau-v3-stage {
		display:
			grid;

		grid-template-columns:
			1fr;

		row-gap:
			54px;

		min-height:
			auto;
	}


	/* Text */

	.fuchsbau-v3-copy {
		max-width:
			680px;

		padding:
			30px
			18px
			0;
	}

	.fuchsbau-v3-eyebrow {
		margin-bottom:
			18px;
	}

	.fuchsbau-v3-title {
		max-width:
			9ch;

		font-size:
			clamp(
				50px,
				13vw,
				72px
			);
	}

	.fuchsbau-v3-text {
		max-width:
			600px;

		font-size:
			18px;
	}


	/* Visual */

	.fuchsbau-v3-visual {
		height:
			clamp(
				390px,
				80vw,
				530px
			);

		margin:
			0
			12px;
	}

	.fuchsbau-v3-visual::before {
		inset:
			-12px
			-8px
			12px
			16px;

		border-radius:
			34px
			34px
			75px
			34px;
	}

	figure.wp-block-image.fuchsbau-v3-photo {
		border-width:
			3px;

		border-radius:
			32px
			32px
			78px
			32px;
	}


	/* Fuchs */

	figure.wp-block-image.fuchsbau-v3-fox {
		left:
			-20px;

		bottom:
			-16px;

		width:
			170px !important;
	}


	/* Quote */

	.fuchsbau-v3-quote {
		right:
			16px;

		bottom:
			18px;

		width:
			calc(100% - 150px);

		padding:
			14px
			16px;

		border-radius:
			18px;
	}

	figure.wp-block-image.fuchsbau-v3-trees {
		flex:
			0 0 30px !important;

		width:
			30px !important;

		max-width:
			30px !important;
	}

	figure.wp-block-image.fuchsbau-v3-trees > img {
		width:
			30px !important;

		max-width:
			30px !important;
	}

	.fuchsbau-v3-quote-text {
		font-size:
			15px;
	}
}


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

@media (max-width: 500px) {

	.fuchsbau-v3-logo img {
		max-width:
			165px;
	}

	.fuchsbau-v3-copy {
		padding-left:
			8px;

		padding-right:
			8px;
	}

	.fuchsbau-v3-eyebrow {
		display:
			block;

		font-size:
			12px;
	}

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

		margin-bottom:
			7px;
	}

	.fuchsbau-v3-title {
		font-size:
			46px;

		letter-spacing:
			-1.6px;
	}

	.fuchsbau-v3-text {
		font-size:
			17px;
	}

	.fuchsbau-v3-visual {
		height:
			350px;
	}

	figure.wp-block-image.fuchsbau-v3-fox {
		left:
			-8px;

		width:
			135px !important;
	}

	.fuchsbau-v3-quote {
		width:
			calc(100% - 112px);

		right:
			10px;

		padding:
			12px
			14px;
	}

	figure.wp-block-image.fuchsbau-v3-trees {
		display:
			none !important;
	}

	.fuchsbau-v3-quote-text {
		font-size:
			13px;
	}
}