/* =========================================================
   WGRR / LAYOUT
   Wiederkehrende Seitenstruktur fuer Startseite und Unterseiten
   Abhaengig von: wgrr-base.css
========================================================= */

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

.wgrr-hero {
	margin-top: 0;
	background: #ffffff;
}

.wgrr-hero__media {
	min-height: var(--wgrr-hero-height);
}

.wgrr-hero__media img {
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: center center;
}

#wgrrContent {
	padding-top: 0;
}


/* =========================================================
   SEITENRAHMEN
   Allgemeiner weisser Inhaltsrahmen fuer Unterseiten
========================================================= */

.wgrr-page-frame {
	position: relative;
	z-index: 3;
	margin-top: clamp(-4.2rem, -0.8rem - 2.6vw, -1.4rem);
	padding-bottom: var(--wgrr-space-xl);
}

.wgrr-page-frame .container {
	width: min(100% - 2rem, 68rem);
}

.wgrr-page-frame__inner {
	--wgrr-page-frame-padding: clamp(0.3rem, 1.2vw, 2rem);

	box-sizing: border-box;
	margin-top: calc(var(--wgrr-page-frame-padding) * -1);
	margin-right: calc(var(--wgrr-page-frame-padding) * -1);
	margin-left: calc(var(--wgrr-page-frame-padding) * -1);
	padding: var(--wgrr-page-frame-padding);
	background: var(--wgrr-color-white);
}

.wgrr-page-intro {
	margin-bottom: clamp(1.4rem, 1.1rem + 1vw, 2.4rem);
	text-align: center;
}

.wgrr-page-kicker {
	margin: 0 0 0.35rem;
	font-family: var(--wgrr-font-sans);
	font-size: clamp(1rem, 0.92rem + 0.3vw, 1.25rem);
	line-height: 1.35;
	color: var(--wgrr-color-black);
}

.wgrr-page-title {
	margin: 0;
	font-family: var(--wgrr-font-sans-bold);
	font-size: clamp(1.8rem, 1.35rem + 1.5vw, 3rem);
	font-weight: normal;
	line-height: 1.12;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--wgrr-color-green-dark);
}

.wgrr-page-content {
	font-size: clamp(1rem, 0.95rem + 0.2vw, 1.2rem);
	line-height: 1.55;
	color: var(--wgrr-color-text);
}

@media (max-width: 47.99875rem) {
	.wgrr-page-title {
		font-size: clamp(1.45rem, 1.18rem + 1vw, 2rem);
		line-height: 1.16;
	}

	.wgrr-page-content {
		font-size: 1rem;
		line-height: 1.55;
	}
}

/* =========================================================
   UNTERSEITEN / MOBILE
   Inhaltsbereich deutlich weiter ins Hero-Bild ziehen
========================================================= */

@media (max-width: 47.99875rem) {
	.wgrr-company-page,
	.wgrr-repair-page,
	.wgrr-rental-page,
	.wgr-team-page	{
		margin-top: clamp(-8rem, -6.8rem - 3vw, -5.5rem);
	}

	.wgrr-company-page .container,
	.wgrr-repair-page .container,
	.wgrr-rental-page .container,
	.wgr-team-page .container	{
		width: min(100% - 1.5rem, 68rem);
	}

	.wgrr-company-page__inner,
	.wgrr-repair-page__inner,
	.wgrr-rental-page__inner,
	.wgr-team-page__inner	{
		margin-top: -1rem;
	}
}

/* =========================================================
   HERO / MOBILE
   Hero-Bild auf ca. zwei Drittel der bisherigen Höhe reduzieren
========================================================= */

@media (max-width: 47.99875rem) {
	.wgrr-hero {
		--wgrr-hero-height-mobile: calc(var(--wgrr-hero-height) * 0.5);
	}

	.wgrr-hero__media {
		min-height: var(--wgrr-hero-height-mobile);
	}

	.wgrr-hero__media img {
		height: var(--wgrr-hero-height-mobile);
		object-fit: cover;
		object-position: center center;
	}
}