/* =========================================================
   WILHELM VISUALS – LOKAL GEHOSTETE SCHRIFTEN
========================================================= */

@font-face {
	font-family: "Bebas Neue";
	src: url("/wp-content/uploads/fonts/BebasNeue-Regular.ttf") format("truetype");
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: "Oswald";
	src: url("/wp-content/uploads/fonts/Oswald-Light.ttf") format("truetype");
	font-style: normal;
	font-weight: 300;
	font-display: swap;
}

@font-face {
	font-family: "Oswald";
	src: url("/wp-content/uploads/fonts/Oswald-Regular.ttf") format("truetype");
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: "Oswald";
	src: url("/wp-content/uploads/fonts/Oswald-Medium.ttf") format("truetype");
	font-style: normal;
	font-weight: 500;
	font-display: swap;
}


/* =========================================================
   WILHELM VISUALS – TYPOGRAFISCHE GRUNDEINSTELLUNGEN
========================================================= */

body {
	font-family: "Oswald", Arial, sans-serif;
	font-weight: 300;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Bebas Neue", Arial, sans-serif;
	font-weight: 400;
	letter-spacing: 0.02em;
}

.main-navigation a {
	font-family: "Oswald", Arial, sans-serif;
	font-weight: 400;
}


/* =========================================================
   WILHELM VISUALS – STARTSEITE
========================================================= */


/* ---------------------------------------------------------
   Navigation nur auf der Startseite ausblenden
--------------------------------------------------------- */

body.home #masthead .main-navigation,
body.home nav.site-navigation {
	display: none !important;
}


/* ---------------------------------------------------------
   Dunkler Hintergrund nur auf der Startseite
--------------------------------------------------------- */

body.home,
body.home #page,
body.home .site,
body.home #main,
body.home .site-main,
body.home .site-content,
body.home .content-area,
body.home #primary,
body.home article,
body.home .entry-content,
body.home #colophon {
	background-color: #1e1e1e !important;
}


/* ---------------------------------------------------------
   Horizontales Scrollen durch Vollbreiten-Elemente verhindern
--------------------------------------------------------- */

body.home {
	overflow-x: hidden !important;
}


/* ---------------------------------------------------------
   VANTAGE-Container dürfen Vollbreiten-Elemente nicht
   abschneiden
--------------------------------------------------------- */

body.home #main,
body.home .site-main,
body.home .site-content,
body.home .full-container,
body.home .content-area,
body.home #primary,
body.home article,
body.home .entry-content {
	overflow: visible !important;
}


/* ---------------------------------------------------------
   H1 im Quelltext erhalten, aber visuell ausblenden
--------------------------------------------------------- */

body.home .entry-header {
	position: absolute !important;

	width: 1px !important;
	height: 1px !important;

	margin: 0 !important;
	padding: 0 !important;

	overflow: hidden !important;

	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;

	white-space: nowrap !important;

	border: 0 !important;
}


/* ---------------------------------------------------------
   Inhalt direkt unter den Masthead ziehen
--------------------------------------------------------- */

body.home #main,
body.home .site-main,
body.home .site-content,
body.home .content-area,
body.home #primary,
body.home article,
body.home .entry-content {
	margin-top: 0 !important;
	padding-top: 0 !important;
}


/* ---------------------------------------------------------
   Masthead sauber einfarbig halten
--------------------------------------------------------- */

body.home #masthead,
body.home #masthead .full-container {
	background-color: #333333 !important;
}


/* =========================================================
   HERO-BILD
   Volle Browserbreite
========================================================= */

body.home .home-hero {
	width: 100vw !important;
	max-width: none !important;

	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;

	padding: 0 !important;

	line-height: 0 !important;
}

body.home .home-hero a {
	display: block !important;

	margin: 0 !important;
	padding: 0 !important;

	line-height: 0 !important;
}

body.home .home-hero img {
	display: block !important;

	width: 100% !important;
	height: auto !important;

	margin: 0 !important;
	padding: 0 !important;
}


/* =========================================================
   LEISTUNGSKACHELN
   Grundmaß Desktop: 1920 × 440 px
========================================================= */


/* ---------------------------------------------------------
   Außencontainer: volle Browserbreite
--------------------------------------------------------- */

body.home .wv-service-band {
	width: 100vw !important;
	max-width: none !important;

	margin-top: 28px !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;

	padding: 0 !important;

	background-color: #333333 !important;

	box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   Innere Kachel
   Foto: 820 px von 1920 px
   Textbereich: 1100 px von 1920 px
--------------------------------------------------------- */

body.home .wv-service-tile {
	display: grid !important;
	grid-template-columns: 42.708333% 57.291667% !important;

	width: 100% !important;
	max-width: none !important;

	aspect-ratio: 1920 / 440 !important;

	margin: 0 !important;
	padding: 0 !important;

	background-color: #333333 !important;

	overflow: hidden !important;

	box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   Bildbereich links
--------------------------------------------------------- */

body.home .wv-service-image {
	width: 100% !important;
	height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	overflow: hidden !important;
}

body.home .wv-service-image img {
	display: block !important;

	width: 100% !important;
	height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	object-fit: cover !important;
}


/* ---------------------------------------------------------
   Text und Button rechts
--------------------------------------------------------- */

body.home .wv-service-content {
	display: grid !important;

	grid-template-columns:
		minmax(0, 1fr)
		clamp(210px, 17.45vw, 335px) !important;

	align-items: center !important;

	gap: clamp(20px, 2.1vw, 40px) !important;

	width: 100% !important;
	height: 100% !important;

	padding:
		clamp(22px, 1.8vw, 34px)
		clamp(18px, 1.25vw, 24px)
		clamp(22px, 1.8vw, 34px)
		clamp(34px, 4.1vw, 78px) !important;

	background-color: #333333 !important;

	box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   Textblock der Kacheln
--------------------------------------------------------- */

body.home .wv-service-copy {
	min-width: 0 !important;
}

body.home .wv-service-copy h2 {
	margin: 0 0 clamp(14px, 1.45vw, 28px) !important;
	padding: 0 !important;

	color: #ffffff !important;

	font-family: "Bebas Neue", Arial, sans-serif !important;
	font-size: clamp(28px, 2.8vw, 54px) !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: 0.02em !important;

	text-transform: uppercase !important;
}

body.home .wv-service-copy p {
	margin: 0 !important;
	padding: 0 !important;

	color: #ffffff !important;

	font-family: "Oswald", Arial, sans-serif !important;
	font-size: clamp(19px, 2.03vw, 39px) !important;
	font-weight: 300 !important;
	line-height: 1.12 !important;
}


/* ---------------------------------------------------------
   Details-Button
   Referenzmaß Desktop: 335 × 115 px
--------------------------------------------------------- */

body.home .wv-service-button {
	display: flex !important;

	align-items: center !important;
	justify-content: center !important;

	width: 100% !important;
	height: clamp(76px, 5.99vw, 115px) !important;

	margin: 0 !important;
	padding: 0 !important;

	background-color: #669acc !important;
	color: #ffffff !important;

	font-family: "Bebas Neue", Arial, sans-serif !important;
	font-size: clamp(27px, 2.2vw, 42px) !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: 0.02em !important;

	text-transform: uppercase !important;
	text-decoration: none !important;

	box-sizing: border-box !important;

	transition: background-color 0.2s ease !important;
}

body.home .wv-service-button:hover {
	background-color: #7caada !important;
}


/* =========================================================
   LEISTUNGSKACHELN – TABLET
========================================================= */

@media (max-width: 1100px) {

	body.home .wv-service-content {
		grid-template-columns:
			minmax(0, 1fr)
			clamp(165px, 18vw, 220px) !important;

		gap: 18px !important;

		padding:
			20px
			18px
			20px
			30px !important;
	}

	body.home .wv-service-copy h2 {
		margin-bottom: 13px !important;

		font-size: clamp(24px, 2.8vw, 34px) !important;
	}

	body.home .wv-service-copy p {
		font-size: clamp(16px, 2vw, 23px) !important;
	}

	body.home .wv-service-button {
		height: clamp(64px, 7vw, 82px) !important;

		font-size: clamp(23px, 2.8vw, 30px) !important;
	}
}


/* =========================================================
   LEISTUNGSKACHELN – SMARTPHONE
========================================================= */

@media (max-width: 760px) {

	body.home .wv-service-band {
		margin-top: 16px !important;
	}

	body.home .wv-service-tile {
		display: block !important;

		width: 100% !important;

		aspect-ratio: auto !important;
	}

	body.home .wv-service-image {
		width: 100% !important;
		height: auto !important;

		aspect-ratio: 820 / 440 !important;
	}

	body.home .wv-service-content {
		display: block !important;

		width: 100% !important;
		height: auto !important;

		padding: 24px 22px 26px !important;
	}

	body.home .wv-service-copy h2 {
		margin-bottom: 16px !important;

		font-size: 32px !important;
	}

	body.home .wv-service-copy p {
		font-size: 23px !important;
		line-height: 1.15 !important;
	}

	body.home .wv-service-button {
		width: 100% !important;
		height: 76px !important;

		margin-top: 24px !important;

		font-size: 30px !important;
	}
}


/* =========================================================
   STARTSEITE – REDAKTIONELLER CONTENTBLOCK
   Breiter, größer, klar sichtbar
========================================================= */

body.home .wv-home-content {
	width: min(1560px, calc(100vw - 80px)) !important;
	max-width: none !important;

	margin: 86px auto 0 !important;
	padding: 0 0 72px !important;

	background-color: transparent !important;

	box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   Einleitung
--------------------------------------------------------- */

body.home .wv-home-content-intro {
	width: 100% !important;
	max-width: none !important;

	margin: 0 0 50px !important;
	padding: 0 !important;
}

body.home .wv-home-content-intro h2 {
	width: 100% !important;
	max-width: 1320px !important;

	margin: 0 0 30px !important;
	padding: 0 !important;

	color: #cccccc !important;

	font-family: "Bebas Neue", Arial, sans-serif !important;
	font-size: clamp(46px, 3.2vw, 64px) !important;
	font-weight: 400 !important;
	line-height: 1.04 !important;
	letter-spacing: 0.02em !important;
}

body.home .wv-home-content-intro p {
	width: 100% !important;
	max-width: 1320px !important;

	margin: 0 0 20px !important;
	padding: 0 !important;

	color: #cccccc !important;

	font-family: "Oswald", Arial, sans-serif !important;
	font-size: 25px !important;
	font-weight: 400 !important;
	line-height: 1.55 !important;
}


/* ---------------------------------------------------------
   Trennlinie und Kompetenzbereiche
--------------------------------------------------------- */

body.home .wv-home-content-grid {
	display: block !important;

	width: 100% !important;
	max-width: none !important;

	margin: 0 !important;
	padding: 42px 0 0 !important;

	border-top: 1px solid rgba(204, 204, 204, 0.32) !important;
}

body.home .wv-home-content-column {
	width: 100% !important;
	max-width: none !important;

	margin: 0 0 42px !important;
	padding: 0 !important;
}

body.home .wv-home-content-column:last-child {
	margin-bottom: 0 !important;
}

body.home .wv-home-content-column h3 {
	width: 100% !important;
	max-width: 1320px !important;

	margin: 0 0 14px !important;
	padding: 0 !important;

	color: #cccccc !important;

	font-family: "Bebas Neue", Arial, sans-serif !important;
	font-size: 36px !important;
	font-weight: 400 !important;
	line-height: 1.05 !important;
	letter-spacing: 0.02em !important;
}

body.home .wv-home-content-column p {
	width: 100% !important;
	max-width: 1320px !important;

	margin: 0 !important;
	padding: 0 !important;

	color: #cccccc !important;

	font-family: "Oswald", Arial, sans-serif !important;
	font-size: 23px !important;
	font-weight: 400 !important;
	line-height: 1.55 !important;
}


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

@media (max-width: 1000px) {

	body.home .wv-home-content {
		width: calc(100vw - 52px) !important;

		margin-top: 58px !important;
		padding-bottom: 54px !important;
	}

	body.home .wv-home-content-intro {
		margin-bottom: 38px !important;
	}

	body.home .wv-home-content-intro h2 {
		margin-bottom: 24px !important;

		font-size: 48px !important;
	}

	body.home .wv-home-content-intro p {
		font-size: 22px !important;
	}

	body.home .wv-home-content-grid {
		padding-top: 32px !important;
	}

	body.home .wv-home-content-column {
		margin-bottom: 34px !important;
	}

	body.home .wv-home-content-column h3 {
		font-size: 32px !important;
	}

	body.home .wv-home-content-column p {
		font-size: 21px !important;
	}
}


/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width: 600px) {

	body.home .wv-home-content {
		width: calc(100vw - 36px) !important;

		margin-top: 38px !important;
		padding-bottom: 42px !important;
	}

	body.home .wv-home-content-intro {
		margin-bottom: 30px !important;
	}

	body.home .wv-home-content-intro h2 {
		margin-bottom: 20px !important;

		font-size: 38px !important;
		line-height: 1.06 !important;
	}

	body.home .wv-home-content-intro p {
		margin-bottom: 16px !important;

		font-size: 19px !important;
		line-height: 1.5 !important;
	}

	body.home .wv-home-content-grid {
		padding-top: 26px !important;
	}

	body.home .wv-home-content-column {
		margin-bottom: 28px !important;
	}

	body.home .wv-home-content-column h3 {
		margin-bottom: 11px !important;

		font-size: 29px !important;
	}

	body.home .wv-home-content-column p {
		font-size: 18px !important;
		line-height: 1.48 !important;
	}
}


/* =========================================================
   SEO-CONTENTBLOCK – TABLET
========================================================= */

@media (max-width: 1000px) {

	body.home .wv-home-content {
		margin-top: 48px !important;
		padding: 36px 34px 46px !important;
	}

	body.home .wv-home-content-intro {
		margin-bottom: 30px !important;
	}

	body.home .wv-home-content-intro h2 {
		font-size: 40px !important;
	}

	body.home .wv-home-content-intro p {
		font-size: 20px !important;
	}

	body.home .wv-home-content-column {
		margin-bottom: 30px !important;
	}

	body.home .wv-home-content-column h3 {
		font-size: 29px !important;
	}

	body.home .wv-home-content-column p {
		font-size: 19px !important;
	}
}


/* =========================================================
   SEO-CONTENTBLOCK – SMARTPHONE
========================================================= */

@media (max-width: 600px) {

	body.home .wv-home-content {
		margin-top: 28px !important;
		padding: 26px 22px 34px !important;
	}

	body.home .wv-home-content-intro {
		margin-bottom: 28px !important;
	}

	body.home .wv-home-content-intro h2 {
		margin-bottom: 18px !important;

		font-size: 34px !important;
	}

	body.home .wv-home-content-intro p {
		font-size: 18px !important;
		line-height: 1.48 !important;
	}

	body.home .wv-home-content-grid {
		padding-top: 24px !important;
	}

	body.home .wv-home-content-column {
		margin-bottom: 28px !important;
	}

	body.home .wv-home-content-column h3 {
		margin-bottom: 10px !important;

		font-size: 27px !important;
	}

	body.home .wv-home-content-column p {
		font-size: 18px !important;
		line-height: 1.48 !important;
	}
}


/* ---------------------------------------------------------
   SEO-CONTENTBLOCK – AUS VANTAGE-CONTAINER HERAUSZIEHEN
   Einheitliche Breite für Überschriften und Fließtext
--------------------------------------------------------- */

body.home .wv-home-content {
	position: relative !important;
	left: 50% !important;
	transform: translateX(-50%) !important;

	width: min(1320px, calc(100vw - 64px)) !important;
	max-width: none !important;
}

body.home .wv-home-content-intro,
body.home .wv-home-content-column {
	width: 100% !important;
	max-width: none !important;
}

body.home .wv-home-content-intro h2,
body.home .wv-home-content-intro p,
body.home .wv-home-content-column h3,
body.home .wv-home-content-column p {
	width: 100% !important;
	max-width: none !important;

	margin-left: 0 !important;
	margin-right: 0 !important;
}


/* =========================================================
   STARTSEITE – IMPRESSUM UND KONTAKT
   exakt auf Breite des Contentblocks
========================================================= */

body.home .wv-impressum {
	width: 100% !important;
	max-width: none !important;

	margin: 42px 0 0 !important;
	padding: 42px 0 58px !important;

	border-top: 1px solid rgba(204, 204, 204, 0.28) !important;

	color: #cccccc !important;

	box-sizing: border-box !important;
}


/* Überschrift */

body.home .wv-impressum h2 {
	margin: 0 0 24px !important;
	padding: 0 !important;

	color: #cccccc !important;

	font-family: "Bebas Neue", Arial, sans-serif !important;
	font-size: 38px !important;
	font-weight: 400 !important;
	line-height: 1.05 !important;
	letter-spacing: 0.02em !important;
}


/* Impressumstext */

body.home .wv-impressum p,
body.home .wv-impressum address {
	margin: 0 0 18px !important;
	padding: 0 !important;

	color: #cccccc !important;

	font-family: "Oswald", Arial, sans-serif !important;
	font-size: 24px !important;
	font-style: normal !important;
	font-weight: 400 !important;
	line-height: 1.42 !important;
}


/* Links */

body.home .wv-impressum a {
	color: #cccccc !important;
	text-decoration: none !important;
}

body.home .wv-impressum a:hover {
	color: #ffffff !important;
	text-decoration: underline !important;
}

body.home .wv-impressum-links {
	margin-bottom: 0 !important;
}


/* Smartphone */

@media (max-width: 600px) {

	body.home .wv-impressum {
		margin-top: 30px !important;
		padding: 30px 0 38px !important;
	}

	body.home .wv-impressum h2 {
		font-size: 31px !important;
	}

	body.home .wv-impressum p,
	body.home .wv-impressum address {
		font-size: 20px !important;
	}
}


/* =========================================================
   IMPRESSUM – TABLET
========================================================= */

@media (max-width: 1000px) {

	body.home .wv-impressum {
		width: calc(100vw - 52px) !important;
		padding: 38px 0 50px !important;
	}

	body.home .wv-impressum h2 {
		font-size: 38px !important;
	}

	body.home .wv-impressum p,
	body.home .wv-impressum address {
		font-size: 25px !important;
	}
}


/* =========================================================
   IMPRESSUM – SMARTPHONE
========================================================= */

@media (max-width: 600px) {

	body.home .wv-impressum {
		width: calc(100vw - 36px) !important;
		padding: 30px 0 40px !important;
	}

	body.home .wv-impressum h2 {
		margin-bottom: 20px !important;
		font-size: 32px !important;
	}

	body.home .wv-impressum p,
	body.home .wv-impressum address {
		margin-bottom: 18px !important;
		font-size: 21px !important;
		line-height: 1.42 !important;
	}
}



/* =========================================================
   STARTSEITE – KONTAKTFORMULAR
========================================================= */

body.home .wv-contact-form {
	width: 100% !important;
	max-width: 1320px !important;

	margin: 54px 0 0 !important;
	padding: 42px 0 54px !important;

	border-top: 1px solid rgba(204, 204, 204, 0.28) !important;

	color: #cccccc !important;

	box-sizing: border-box !important;
}

body.home .wv-contact-form h2 {
	margin: 0 0 14px !important;
	padding: 0 !important;

	color: #cccccc !important;

	font-family: "Bebas Neue", Arial, sans-serif !important;
	font-size: 42px !important;
	font-weight: 400 !important;
	line-height: 1.05 !important;
	letter-spacing: 0.02em !important;
}

body.home .wv-contact-form-intro {
	margin: 0 0 28px !important;

	color: #cccccc !important;

	font-family: "Oswald", Arial, sans-serif !important;
	font-size: 24px !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
}

body.home .wv-contact-form label {
	display: block !important;

	margin: 0 0 20px !important;

	color: #cccccc !important;

	font-family: "Oswald", Arial, sans-serif !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	line-height: 1.35 !important;
}

body.home .wv-contact-form input[type="text"],
body.home .wv-contact-form input[type="email"],
body.home .wv-contact-form input[type="tel"],
body.home .wv-contact-form textarea {
	width: 100% !important;
	max-width: 760px !important;

	margin-top: 8px !important;
	padding: 12px 14px !important;

	background-color: #2a2a2a !important;
	border: 1px solid rgba(204, 204, 204, 0.35) !important;

	color: #ffffff !important;

	font-family: "Oswald", Arial, sans-serif !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;

	box-sizing: border-box !important;
}

body.home .wv-contact-form textarea {
	min-height: 150px !important;
	resize: vertical !important;
}

body.home .wv-contact-form input:focus,
body.home .wv-contact-form textarea:focus {
	outline: none !important;
	border-color: #669acc !important;
}

body.home .wv-contact-form .wv-form-privacy {
	max-width: 760px !important;

	margin: 4px 0 24px !important;

	color: #999999 !important;

	font-family: "Oswald", Arial, sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
}

body.home .wv-contact-form .wv-form-privacy a {
	color: #cccccc !important;
	text-decoration: underline !important;
}

body.home .wv-contact-form input[type="submit"] {
	display: inline-flex !important;

	align-items: center !important;
	justify-content: center !important;

	min-width: 260px !important;
	height: 72px !important;

	margin: 0 !important;
	padding: 0 34px !important;

	background-color: #669acc !important;
	border: none !important;

	color: #ffffff !important;

	font-family: "Bebas Neue", Arial, sans-serif !important;
	font-size: 32px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: 0.02em !important;

	text-transform: uppercase !important;
	cursor: pointer !important;
}

body.home .wv-contact-form input[type="submit"]:hover {
	background-color: #7caada !important;
}


/* Contact Form 7 Meldungen */

body.home .wv-contact-form .wpcf7-response-output {
	max-width: 760px !important;

	margin: 24px 0 0 !important;
	padding: 14px 18px !important;

	color: #cccccc !important;

	font-family: "Oswald", Arial, sans-serif !important;
	font-size: 18px !important;
	line-height: 1.4 !important;
}


/* Smartphone */

@media (max-width: 600px) {

	body.home .wv-contact-form {
		margin-top: 38px !important;
		padding: 32px 0 42px !important;
	}

	body.home .wv-contact-form h2 {
		font-size: 34px !important;
	}

	body.home .wv-contact-form-intro {
		font-size: 20px !important;
	}

	body.home .wv-contact-form label {
		font-size: 18px !important;
	}

	body.home .wv-contact-form input[type="text"],
	body.home .wv-contact-form input[type="email"],
	body.home .wv-contact-form input[type="tel"],
	body.home .wv-contact-form textarea {
		max-width: none !important;
		font-size: 18px !important;
	}

	body.home .wv-contact-form input[type="submit"] {
		width: 100% !important;
		height: 68px !important;
		font-size: 30px !important;
	}
}


/* =========================================================
   STARTSEITE – KONTAKTFORMULAR FEINSCHLIFF
   Contact Form 7 hart überschreiben
========================================================= */

body.home .wv-contact-form,
body.home .wv-contact-form .wpcf7,
body.home .wv-contact-form form {
	color: #cccccc !important;
	font-family: "Oswald", Arial, sans-serif !important;
}

/* Labels / Feldbeschriftungen */
body.home .wv-contact-form label,
body.home .wv-contact-form .wpcf7-form-control-wrap,
body.home .wv-contact-form p {
	color: #cccccc !important;
	font-family: "Oswald", Arial, sans-serif !important;
	font-size: 24px !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
}

/* Eingabefelder */
body.home .wv-contact-form input[type="text"],
body.home .wv-contact-form input[type="email"],
body.home .wv-contact-form input[type="tel"],
body.home .wv-contact-form textarea {
	width: 100% !important;
	max-width: 1320px !important;

	margin-top: 10px !important;
	margin-bottom: 22px !important;
	padding: 14px 18px !important;

	background-color: #2a2a2a !important;
	border: 1px solid rgba(204, 204, 204, 0.45) !important;
	border-radius: 0 !important;

	color: #ffffff !important;

	font-family: "Oswald", Arial, sans-serif !important;
	font-size: 24px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;

	box-sizing: border-box !important;
}

/* Die ersten drei Felder bewusst schmaler */
body.home .wv-contact-form input[type="text"],
body.home .wv-contact-form input[type="email"],
body.home .wv-contact-form input[type="tel"] {
	max-width: 540px !important;
}

/* Nachricht groß, aber kontrolliert */
body.home .wv-contact-form textarea {
	min-height: 210px !important;
	resize: vertical !important;
}

/* Platzhalter */
body.home .wv-contact-form input::placeholder,
body.home .wv-contact-form textarea::placeholder {
	color: #999999 !important;
	opacity: 1 !important;
}

/* Fokus */
body.home .wv-contact-form input:focus,
body.home .wv-contact-form textarea:focus {
	outline: none !important;
	border-color: #669acc !important;
	box-shadow: none !important;
}

/* Datenschutztext */
body.home .wv-contact-form .wv-form-privacy {
	max-width: 1320px !important;

	margin: 4px 0 26px !important;

	color: #aaaaaa !important;

	font-size: 20px !important;
	line-height: 1.45 !important;
}

body.home .wv-contact-form .wv-form-privacy a {
	color: #cccccc !important;
	text-decoration: underline !important;
}

/* Absenden-Button */
body.home .wv-contact-form input[type="submit"],
body.home .wv-contact-form .wpcf7-submit {
	min-width: 280px !important;
	height: 76px !important;

	padding: 0 38px !important;

	background-color: #669acc !important;
	border: none !important;
	border-radius: 0 !important;

	color: #ffffff !important;

	font-family: "Bebas Neue", Arial, sans-serif !important;
	font-size: 34px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: 0.02em !important;

	text-transform: uppercase !important;
	cursor: pointer !important;
}

body.home .wv-contact-form input[type="submit"]:hover,
body.home .wv-contact-form .wpcf7-submit:hover {
	background-color: #7caada !important;
}

/* Fehlermeldungen / Erfolgsmeldungen */
body.home .wv-contact-form .wpcf7-not-valid-tip,
body.home .wv-contact-form .wpcf7-response-output {
	color: #cccccc !important;
	font-family: "Oswald", Arial, sans-serif !important;
	font-size: 20px !important;
	line-height: 1.4 !important;
}


/* Smartphone */
@media (max-width: 600px) {

	body.home .wv-contact-form label,
	body.home .wv-contact-form p {
		font-size: 20px !important;
	}

	body.home .wv-contact-form input[type="text"],
	body.home .wv-contact-form input[type="email"],
	body.home .wv-contact-form input[type="tel"],
	body.home .wv-contact-form textarea {
		max-width: none !important;
		font-size: 20px !important;
	}

	body.home .wv-contact-form .wv-form-privacy {
		font-size: 17px !important;
	}

	body.home .wv-contact-form input[type="submit"],
	body.home .wv-contact-form .wpcf7-submit {
		width: 100% !important;
		height: 70px !important;
		font-size: 30px !important;
	}
}


/* =========================================================
   STARTSEITE – CONTACT FORM 7 DIREKT FORMATIEREN
========================================================= */

body.home .wpcf7 {
	width: 100% !important;
	max-width: 1320px !important;

	color: #cccccc !important;

	font-family: "Oswald", Arial, sans-serif !important;
	font-size: 24px !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
}

body.home .wpcf7 form,
body.home .wpcf7 p,
body.home .wpcf7 label {
	color: #cccccc !important;

	font-family: "Oswald", Arial, sans-serif !important;
	font-size: 24px !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
}

body.home .wpcf7 input[type="text"],
body.home .wpcf7 input[type="email"],
body.home .wpcf7 input[type="tel"],
body.home .wpcf7 textarea {
	width: 100% !important;
	max-width: 1320px !important;

	margin-top: 10px !important;
	margin-bottom: 24px !important;
	padding: 16px 20px !important;

	background-color: #2a2a2a !important;
	border: 1px solid rgba(204, 204, 204, 0.55) !important;
	border-radius: 0 !important;

	color: #ffffff !important;

	font-family: "Oswald", Arial, sans-serif !important;
	font-size: 24px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;

	box-sizing: border-box !important;
}

body.home .wpcf7 input[type="text"],
body.home .wpcf7 input[type="email"],
body.home .wpcf7 input[type="tel"] {
	max-width: 540px !important;
	height: 58px !important;
}

body.home .wpcf7 textarea {
	min-height: 220px !important;
	resize: vertical !important;
}

body.home .wpcf7 input:focus,
body.home .wpcf7 textarea:focus {
	outline: none !important;
	border-color: #669acc !important;
	box-shadow: none !important;
}

body.home .wpcf7 .wv-form-privacy,
body.home .wpcf7 .wv-form-privacy p {
	max-width: 1320px !important;

	color: #aaaaaa !important;

	font-size: 20px !important;
	line-height: 1.45 !important;
}

body.home .wpcf7 a {
	color: #cccccc !important;
	text-decoration: underline !important;
}

body.home .wpcf7 input[type="submit"],
body.home .wpcf7 .wpcf7-submit {
	min-width: 280px !important;
	height: 76px !important;

	padding: 0 38px !important;

	background-color: #669acc !important;
	border: none !important;
	border-radius: 0 !important;

	color: #ffffff !important;

	font-family: "Bebas Neue", Arial, sans-serif !important;
	font-size: 34px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: 0.02em !important;

	text-transform: uppercase !important;
	cursor: pointer !important;
}

body.home .wpcf7 input[type="submit"]:hover,
body.home .wpcf7 .wpcf7-submit:hover {
	background-color: #7caada !important;
}

body.home .wpcf7-not-valid-tip,
body.home .wpcf7-response-output {
	color: #cccccc !important;

	font-family: "Oswald", Arial, sans-serif !important;
	font-size: 20px !important;
	line-height: 1.4 !important;
}


/* Smartphone */

@media (max-width: 600px) {

	body.home .wpcf7,
	body.home .wpcf7 form,
	body.home .wpcf7 p,
	body.home .wpcf7 label {
		font-size: 20px !important;
	}

	body.home .wpcf7 input[type="text"],
	body.home .wpcf7 input[type="email"],
	body.home .wpcf7 input[type="tel"],
	body.home .wpcf7 textarea {
		max-width: none !important;
		font-size: 20px !important;
	}

	body.home .wpcf7 input[type="submit"],
	body.home .wpcf7 .wpcf7-submit {
		width: 100% !important;
		height: 70px !important;
		font-size: 30px !important;
	}
}

/* Contact Form 7 Button-Text dunkelgrau */
.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
	color: #333333 !important;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover {
	color: #333333 !important;
}


/* CF7 Submit-Button: Text dunkelgrau erzwingen */
body.home input.wpcf7-form-control.wpcf7-submit,
body.home .wpcf7 input.wpcf7-submit,
body.home .wpcf7 input[type="submit"] {
	color: #333333 !important;
	-webkit-text-fill-color: #333333 !important;
	text-shadow: none !important;
}



/* =========================================================
   WILHELM VISUALS – Unterseiten-Hero Platzhalter
   Einsatz: Unterseite "Produktion & Anlagen"
   Format entspricht dem Hero der Startseite: 2560 × 941 px
   ========================================================= */


/* Hero-Container über die volle Browserbreite ziehen */
.wv-subhero {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: #1e1e1e;
}


/* Medienfläche: später Video, aktuell Platzhalter */
.wv-subhero__media {
	position: relative;
	width: 100%;

	/* Seitenverhältnis wie Startseiten-Hero */
	aspect-ratio: 2560 / 941;

	/* Mindest- und Maximalhöhe für Desktop */
	min-height: 360px;
	max-height: 680px;

	overflow: hidden;
	background: #1e1e1e;
}


/* Platzhalter-Hintergrund, solange noch kein Video vorhanden ist */
.wv-subhero__placeholder {
	position: absolute;
	inset: 0;

	/* Dunkler technischer Verlauf */
	background:
		linear-gradient(
			90deg,
			rgba(30,30,30,0.92) 0%,
			rgba(30,30,30,0.68) 38%,
			rgba(30,30,30,0.35) 100%
		),
		linear-gradient(
			135deg,
			#202020 0%,
			#2c2c2c 42%,
			#171717 100%
		);
}


/* Subtiles Raster als technischer Platzhalter-Look */
.wv-subhero__placeholder::after {
	content: "";
	position: absolute;
	inset: 0;

	background:
		repeating-linear-gradient(
			90deg,
			rgba(255,255,255,0.035) 0px,
			rgba(255,255,255,0.035) 1px,
			transparent 1px,
			transparent 80px
		);

	opacity: 0.28;
}


/* Textblock im Hero */
.wv-subhero__overlay {
	position: absolute;
	left: clamp(28px, 8vw, 150px);
	top: 50%;
	transform: translateY(-50%);

	max-width: 760px;
	z-index: 2;

	color: #ffffff;
}


/* Kleine Zeile über der Hauptüberschrift */
.wv-subhero__label {
	margin: 0 0 18px 0;

	font-family: 'Oswald', Arial, sans-serif;
	font-size: clamp(13px, 1.1vw, 18px);
	font-weight: 300;
	letter-spacing: 0.16em;
	text-transform: uppercase;

	color: #cccccc;
}


/* Hauptüberschrift */
.wv-subhero h1 {
	margin: 0;

	font-family: 'Bebas Neue', Impact, sans-serif;
	font-size: clamp(54px, 7vw, 132px);
	font-weight: 400;
	line-height: 0.9;
	letter-spacing: 0.02em;
	text-transform: uppercase;

	color: #ffffff;
}


/* Claim unter der Hauptüberschrift */
.wv-subhero__claim {
	margin: 18px 0 0 0;

	font-family: 'Oswald', Arial, sans-serif;
	font-size: clamp(22px, 2.4vw, 44px);
	font-weight: 300;
	line-height: 1.15;

	color: #ffffff;
}


/* =========================================================
   Mobile Anpassung
   Auf kleinen Displays wird der Hero höher und lesbarer.
   ========================================================= */

@media (max-width: 768px) {

	/* Mobiles Seitenverhältnis: hochkantiger als Desktop */
	.wv-subhero__media {
		aspect-ratio: 4 / 5;
		min-height: 520px;
		max-height: none;
	}

	/* Verlauf mobil stärker nach unten abdunkeln,
	   damit der Text unten gut lesbar bleibt */
	.wv-subhero__placeholder {
		background:
			linear-gradient(
				180deg,
				rgba(30,30,30,0.35) 0%,
				rgba(30,30,30,0.72) 45%,
				rgba(30,30,30,0.96) 100%
			),
			linear-gradient(
				135deg,
				#202020 0%,
				#2c2c2c 42%,
				#171717 100%
			);
	}

	/* Text mobil nach unten setzen */
	.wv-subhero__overlay {
		left: 26px;
		right: 26px;
		top: auto;
		bottom: 42px;
		transform: none;
		max-width: none;
	}
}



/* =========================================================
   WILHELM VISUALS – Unterseiten-Hero mit Video
   Für: Produktion & Anlagen
   Desktop-Format wie Startseite: 2560 × 941 px
   ========================================================= */


/* Hero über die volle Browserbreite ziehen */
.wv-subhero {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: #1e1e1e;
}


/* Medienfläche des Hero-Bereichs */
.wv-subhero__media {
	position: relative;
	width: 100%;

	/* Gleiches Seitenverhältnis wie der Startseiten-Hero */
	aspect-ratio: 2560 / 941;

	/* Begrenzung für Desktop */
	min-height: 360px;
	max-height: 680px;

	overflow: hidden;
	background: #1e1e1e;
}


/* Das eigentliche Hero-Video */
.wv-subhero__video {
	position: absolute;
	inset: 0;

	width: 100%;
	height: 100%;

	/* Video füllt die Fläche, wird bei Bedarf sauber beschnitten */
	object-fit: cover;
	object-position: center center;
}


/* Dunkler Verlauf über dem Video für bessere Textlesbarkeit */
.wv-subhero__shade {
	position: absolute;
	inset: 0;
	z-index: 1;

	background:
		linear-gradient(
			90deg,
			rgba(30,30,30,0.88) 0%,
			rgba(30,30,30,0.58) 42%,
			rgba(30,30,30,0.20) 100%
		);
}


/* Textblock über dem Video */
.wv-subhero__overlay {
	position: absolute;
	z-index: 2;

	left: clamp(28px, 8vw, 150px);
	top: 50%;
	transform: translateY(-50%);

	max-width: 760px;
	color: #ffffff;
}


/* Kleine Zeile über der Hauptüberschrift */
.wv-subhero__label {
	margin: 0 0 18px 0;

	font-family: 'Oswald', Arial, sans-serif;
	font-size: clamp(13px, 1.1vw, 18px);
	font-weight: 300;
	letter-spacing: 0.16em;
	text-transform: uppercase;

	color: #cccccc;
}


/* Hauptüberschrift */
.wv-subhero h1 {
	margin: 0;

	font-family: 'Bebas Neue', Impact, sans-serif;
	font-size: clamp(54px, 7vw, 132px);
	font-weight: 400;
	line-height: 0.9;
	letter-spacing: 0.02em;
	text-transform: uppercase;

	color: #ffffff;
}


/* Claim unter der Hauptüberschrift */
.wv-subhero__claim {
	margin: 18px 0 0 0;

	font-family: 'Oswald', Arial, sans-serif;
	font-size: clamp(22px, 2.4vw, 44px);
	font-weight: 300;
	line-height: 1.15;

	color: #ffffff;
}


/* =========================================================
   Mobile Anpassung
   Auf Smartphones wird der Hero höher, damit er nicht
   zu einem schmalen Streifen zusammenschrumpft.
   ========================================================= */

@media (max-width: 768px) {

	/* Mobiles Hero-Format */
	.wv-subhero__media {
		aspect-ratio: 4 / 5;
		min-height: 520px;
		max-height: none;
	}

	/* Video mobil eher mittig halten */
	.wv-subhero__video {
		object-position: center center;
	}

	/* Verlauf mobil stärker nach unten abdunkeln */
	.wv-subhero__shade {
		background:
			linear-gradient(
				180deg,
				rgba(30,30,30,0.20) 0%,
				rgba(30,30,30,0.62) 45%,
				rgba(30,30,30,0.94) 100%
			);
	}

	/* Text mobil unten platzieren */
	.wv-subhero__overlay {
		left: 26px;
		right: 26px;
		top: auto;
		bottom: 42px;
		transform: none;
		max-width: none;
	}
}


/* =========================================================
   WILHELM VISUALS – Automatischen Seitentitel ausblenden
   Seite: Produktion & Anlagen
   Page-ID: 87

   Zweck:
   - Der WordPress-Seitentitel bleibt im Backend erhalten.
   - Rank Math / SEO / Permalink bleiben sauber.
   - Sichtbar ist nur die H1 im Hero-Video.
   - Der weiße Theme-Titelbalken über dem Hero verschwindet.
   ========================================================= */


/* Blendet den automatischen Titelbereich des Themes aus */
body.page-id-87 .entry-header {
	display: none;
}


/* Sicherheitsregel:
   Falls das Theme den Titel direkt über .entry-title ausgibt */
body.page-id-87 .entry-title {
	display: none;
}


/* Entfernt möglichen oberen Abstand nach dem ausgeblendeten Titel */
body.page-id-87 .entry-content {
	margin-top: 0;
}


/* =========================================================
   WILHELM VISUALS – Hero bündig an Masthead setzen
   Seite: Produktion & Anlagen
   Page-ID: 87

   Zweck:
   - Entfernt den weißen Abstand zwischen Masthead/Navigation
     und dem Hero-Video.
   - Gilt nur für diese Unterseite.
   ========================================================= */


/* Entfernt oberen Abstand des Theme-Hauptbereichs */
body.page-id-87 #main {
	padding-top: 0 !important;
}


/* Entfernt möglichen Abstand innerhalb des Inhaltsbereichs */
body.page-id-87 .entry-content {
	margin-top: 0 !important;
	padding-top: 0 !important;
}


/* Stellt sicher, dass der Hero direkt oben beginnt */
body.page-id-87 .wv-subhero {
	margin-top: 0 !important;
}


/* Falls das Theme dem ersten Element automatisch Abstand gibt */
body.page-id-87 .entry-content > .wv-subhero:first-child {
	margin-top: 0 !important;
}

/* =========================================================
   WILHELM VISUALS – Content-Layout Unterseite Produktion & Anlagen
   Seite: Produktion & Anlagen
   Page-ID: 87

   Zweck:
   - Content unter dem Hero auf ca. 1024 px Breite setzen
   - Text mittig im Layout platzieren
   - Schrift deutlich lesbarer machen
   - Abschnitte wie technische Leistungsseite wirken lassen
   ========================================================= */


/* Gesamter Inhaltsbereich unter dem Hero */
body.page-id-87 .wv-subpage-content {
	background: #f4f4f4;
	color: #1e1e1e;

	/* Abstand oberhalb und unterhalb des Contents */
	padding: 72px 0 96px 0;

	/* Grundschrift für den Seitencontent */
	font-family: 'Oswald', Arial, sans-serif;
	font-size: 18px;
	font-weight: 300;
	line-height: 1.65;
}


/* Jeder einzelne Content-Block bekommt eine feste Maximalbreite */
body.page-id-87 .wv-content-inner {
	width: min(1024px, calc(100% - 48px));

	/* Zentriert den Block im Layout */
	margin-left: auto;
	margin-right: auto;

	/* Abstand zwischen den Abschnitten */
	margin-bottom: 72px;
}


/* Letzten Abschnitt nicht unnötig nach unten ziehen */
body.page-id-87 .wv-content-inner:last-child {
	margin-bottom: 0;
}


/* Kleine technische Oberzeile */
body.page-id-87 .wv-kicker {
	margin: 0 0 18px 0;

	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;

	color: #669acc;
}


/* Hauptüberschriften innerhalb der Unterseite */
body.page-id-87 .wv-subpage-content h2 {
	margin: 0 0 26px 0;

	font-family: 'Bebas Neue', Impact, sans-serif;
	font-size: clamp(42px, 4vw, 72px);
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: 0.02em;
	text-transform: uppercase;

	color: #1e1e1e;
}


/* Zwischenüberschriften / Box-Headlines */
body.page-id-87 .wv-subpage-content h3 {
	margin: 0 0 14px 0;

	font-family: 'Bebas Neue', Impact, sans-serif;
	font-size: 30px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;

	color: #1e1e1e;
}


/* Normale Absätze */
body.page-id-87 .wv-subpage-content p {
	margin: 0 0 22px 0;
	max-width: 920px;
}


/* Größerer Einstiegsabsatz */
body.page-id-87 .wv-lead {
	font-size: 24px;
	line-height: 1.45;
	font-weight: 300;

	max-width: 980px;
	color: #2a2a2a;
}


/* =========================================================
   Drei Leistungskerne als Kartenraster
   ========================================================= */


/* Raster für die drei Boxen */
body.page-id-87 .wv-feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}


/* Einzelne Leistungsbox */
body.page-id-87 .wv-feature-box {
	background: #ffffff;
	padding: 34px 32px;

	border-left: 5px solid #669acc;
	box-shadow: 0 12px 34px rgba(0,0,0,0.08);
}


/* Text in den Boxen */
body.page-id-87 .wv-feature-box p {
	margin-bottom: 0;
	font-size: 17px;
	line-height: 1.6;
}


/* =========================================================
   Dunkler Statement-Block
   ========================================================= */


/* Dunkles Panel für starke Positionierung */
body.page-id-87 .wv-dark-panel {
	background: #1e1e1e;
	color: #ffffff;

	padding: 54px 58px;
	box-shadow: 0 18px 46px rgba(0,0,0,0.18);
}


/* Überschrift im dunklen Panel */
body.page-id-87 .wv-dark-panel h2 {
	color: #ffffff;
}


/* Text im dunklen Panel */
body.page-id-87 .wv-dark-panel p {
	color: #dddddd;
}


/* Kicker im dunklen Panel */
body.page-id-87 .wv-dark-panel .wv-kicker {
	color: #669acc;
}


/* =========================================================
   Listenbereich / typische Anwendungen
   ========================================================= */


/* Liste technisch sauber darstellen */
body.page-id-87 .wv-use-list {
	margin: 0;
	padding: 0;

	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px 32px;
}


/* Einzelne Listenpunkte */
body.page-id-87 .wv-use-list li {
	position: relative;

	padding-left: 24px;
	font-size: 18px;
	line-height: 1.45;
}


/* Technischer Marker vor jedem Listenpunkt */
body.page-id-87 .wv-use-list li::before {
	content: "";
	position: absolute;

	left: 0;
	top: 0.72em;

	width: 8px;
	height: 8px;

	background: #669acc;
}


/* =========================================================
   Prozessbereich 01–04
   ========================================================= */


/* Raster für Prozessschritte */
body.page-id-87 .wv-process-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}


/* Einzelner Prozessschritt */
body.page-id-87 .wv-process-step {
	background: #ffffff;
	padding: 30px 26px;
	border-top: 5px solid #669acc;
	box-shadow: 0 10px 30px rgba(0,0,0,0.07);
}


/* Nummer des Prozessschritts */
body.page-id-87 .wv-process-step span {
	display: block;

	margin-bottom: 18px;

	font-family: 'Bebas Neue', Impact, sans-serif;
	font-size: 42px;
	line-height: 1;

	color: #669acc;
}


/* Text im Prozessschritt */
body.page-id-87 .wv-process-step p {
	margin-bottom: 0;
	font-size: 16px;
	line-height: 1.55;
}


/* =========================================================
   CTA-Box
   ========================================================= */


/* Abschlussbox für Projektanfrage */
body.page-id-87 .wv-cta-box {
	background: #ffffff;
	padding: 54px 58px;

	border-left: 5px solid #669acc;
	box-shadow: 0 18px 46px rgba(0,0,0,0.10);
}


/* Button, falls auf dieser Seite noch kein Button-Styling greift */
body.page-id-87 .wv-button {
	display: inline-block;

	margin-top: 10px;
	padding: 14px 28px;

	background: #669acc;
	color: #ffffff;

	font-family: 'Oswald', Arial, sans-serif;
	font-size: 18px;
	font-weight: 400;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}


/* Button Hover */
body.page-id-87 .wv-button:hover {
	background: #4f86b5;
	color: #ffffff;
}


/* =========================================================
   Tablet / kleinere Displays
   ========================================================= */

@media (max-width: 1024px) {

	/* Feature- und Prozessraster auf zwei Spalten reduzieren */
	body.page-id-87 .wv-feature-grid,
	body.page-id-87 .wv-process-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}


/* =========================================================
   Mobile Anpassung
   ========================================================= */

@media (max-width: 768px) {

	/* Content auf Smartphone luftiger, aber nicht zu klein */
	body.page-id-87 .wv-subpage-content {
		padding: 54px 0 72px 0;
		font-size: 17px;
		line-height: 1.6;
	}

	/* Innenbreite mobil */
	body.page-id-87 .wv-content-inner {
		width: calc(100% - 40px);
		margin-bottom: 54px;
	}

	/* Lead mobil etwas kleiner */
	body.page-id-87 .wv-lead {
		font-size: 21px;
		line-height: 1.45;
	}

	/* Karten und Listen einspaltig */
	body.page-id-87 .wv-feature-grid,
	body.page-id-87 .wv-process-grid,
	body.page-id-87 .wv-use-list {
		grid-template-columns: 1fr;
	}

	/* Panels mobil weniger Innenabstand */
	body.page-id-87 .wv-dark-panel,
	body.page-id-87 .wv-cta-box {
		padding: 38px 30px;
	}
}


/* =========================================================
   WILHELM VISUALS – Referenzbildbereich Produktion & Anlagen
   Seite: Produktion & Anlagen
   Page-ID: 87

   Zweck:
   - Referenzbilder sauber als 3-Spalten-Raster darstellen
   - Keine versetzte / zufällige Galerie-Anordnung
   - Dunkler Praxisblock passend zur WILHELM VISUALS Optik
   ========================================================= */


/* Referenzbereich als eigener dunkler Block */
body.page-id-87 .wv-reference-section {
	background: #1e1e1e;
	color: #ffffff;

	padding: 54px 58px;
	box-shadow: 0 18px 46px rgba(0,0,0,0.18);
}


/* Überschrift im Referenzbereich */
body.page-id-87 .wv-reference-section h2 {
	color: #ffffff;
}


/* Leadtext im Referenzbereich */
body.page-id-87 .wv-reference-section .wv-lead {
	color: #dddddd;
}


/* Kicker im Referenzbereich */
body.page-id-87 .wv-reference-section .wv-kicker {
	color: #669acc;
}


/* Sauberes Referenzraster */
body.page-id-87 .wv-reference-grid {
	display: grid !important;

	/* Desktop: exakt 3 Spalten */
	grid-template-columns: repeat(3, minmax(0, 1fr));

	gap: 28px;
	margin-top: 42px;
}


/* Einzelnes Referenzelement */
body.page-id-87 .wv-reference-item {
	display: block;

	/* Theme-Standardabstände von figure neutralisieren */
	margin: 0 !important;
	padding: 0;

	background: #ffffff;
	color: #1e1e1e;

	overflow: hidden;
	box-shadow: 0 14px 38px rgba(0,0,0,0.28);
}


/* Bildfläche der Referenz */
body.page-id-87 .wv-reference-item img {
	display: block;

	width: 100%;
	height: auto;

	/* Einheitliches Bildformat */
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center center;

	background: #dddddd;
}


/* Bildunterschrift */
body.page-id-87 .wv-reference-item figcaption {
	padding: 24px 26px 28px 26px;

	font-family: 'Oswald', Arial, sans-serif;
	font-size: 17px;
	font-weight: 300;
	line-height: 1.45;

	color: #2a2a2a;
}


/* Label innerhalb der Bildunterschrift */
body.page-id-87 .wv-reference-item figcaption span {
	display: block;

	margin-bottom: 8px;

	font-family: 'Bebas Neue', Impact, sans-serif;
	font-size: 28px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;

	color: #1e1e1e;
}


/* =========================================================
   Tablet: 2 Spalten
   ========================================================= */

@media (max-width: 1024px) {

	body.page-id-87 .wv-reference-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}


/* =========================================================
   Mobile: 1 Spalte
   ========================================================= */

@media (max-width: 768px) {

	body.page-id-87 .wv-reference-section {
		padding: 38px 30px;
	}

	body.page-id-87 .wv-reference-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	body.page-id-87 .wv-reference-item img {
		aspect-ratio: 16 / 10;
	}

	body.page-id-87 .wv-reference-item figcaption {
		padding: 22px 22px 24px 22px;
	}
}


/* =========================================================
   WILHELM VISUALS – Referenzbildbereich Produktion & Anlagen
   Seite: Produktion & Anlagen
   Page-ID: 87

   Zweck:
   - Referenzen sauber als 3-Spalten-Raster darstellen
   - Kein "Würfelspiel"
   - Keine Abhängigkeit von - oder WordPress-Galerie-Styles
   ========================================================= */


/* Dunkler Referenzbereich als eigener Block */
body.page-id-87 .wv-reference-section {
	background: #1e1e1e;
	color: #ffffff;

	padding: 54px 58px;
	box-shadow: 0 18px 46px rgba(0,0,0,0.18);

	box-sizing: border-box;
}


/* Überschrift im Referenzbereich */
body.page-id-87 .wv-reference-section h2 {
	color: #ffffff;
}


/* Leadtext im Referenzbereich */
body.page-id-87 .wv-reference-section .wv-lead {
	color: #dddddd;
}


/* Kicker im Referenzbereich */
body.page-id-87 .wv-reference-section .wv-kicker {
	color: #669acc;
}


/* Sauberes Referenzraster */
body.page-id-87 .wv-reference-grid {
	display: grid !important;

	/* Desktop: exakt drei gleich breite Spalten */
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

	gap: 28px !important;
	margin-top: 42px;

	align-items: stretch;
}


/* Einzelne Referenzkarte */
body.page-id-87 .wv-reference-card {
	display: flex;
	flex-direction: column;

	width: 100%;
	min-width: 0;

	margin: 0 !important;
	padding: 0;

	background: #ffffff;
	color: #1e1e1e;

	overflow: hidden;
	box-shadow: 0 14px 38px rgba(0,0,0,0.28);

	box-sizing: border-box;
}


/* Bildfläche / Platzhalterfläche */
body.page-id-87 .wv-reference-image {
	position: relative;

	width: 100%;
	aspect-ratio: 4 / 3;

	background:
		linear-gradient(
			135deg,
			#d8d8d8 0%,
			#efefef 100%
		);

	overflow: hidden;
}


/* Platzhaltertext "Bild folgt" */
body.page-id-87 .wv-reference-image span {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

	font-family: 'Oswald', Arial, sans-serif;
	font-size: 13px;
	font-weight: 300;
	letter-spacing: 0.12em;
	text-transform: uppercase;

	color: #777777;
}


/* Späteres echtes Bild innerhalb der Bildfläche */
body.page-id-87 .wv-reference-image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center center;
}


/* Textbereich unter dem Bild */
body.page-id-87 .wv-reference-copy {
	padding: 24px 26px 28px 26px;

	box-sizing: border-box;
}


/* Headline in der Referenzkarte */
body.page-id-87 .wv-reference-copy h3 {
	margin: 0 0 10px 0;

	font-family: 'Bebas Neue', Impact, sans-serif;
	font-size: 28px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;

	color: #1e1e1e;
}


/* Beschreibungstext in der Referenzkarte */
body.page-id-87 .wv-reference-copy p {
	margin: 0;

	font-family: 'Oswald', Arial, sans-serif;
	font-size: 17px;
	font-weight: 300;
	line-height: 1.45;

	color: #2a2a2a;
}


/* =========================================================
   Tablet: zwei Spalten
   ========================================================= */

@media (max-width: 1024px) {

	body.page-id-87 .wv-reference-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}


/* =========================================================
   Mobile: eine Spalte
   ========================================================= */

@media (max-width: 768px) {

	/* Referenzbereich mobil kompakter */
	body.page-id-87 .wv-reference-section {
		padding: 38px 30px;
	}

	/* Eine Spalte auf Smartphone */
	body.page-id-87 .wv-reference-grid {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}

	/* Mobiles Bildformat etwas breiter */
	body.page-id-87 .wv-reference-image {
		aspect-ratio: 16 / 10;
	}

	/* Textbereich mobil etwas kompakter */
	body.page-id-87 .wv-reference-copy {
		padding: 22px 22px 24px 22px;
	}
}


/* =========================================================
   WILHELM VISUALS – HARTE KORREKTUR REFERENZBLOCK
   Einsatz:
   - Ganz unten in "Zusätzliches CSS" einfügen.
   - Erzwingt ein sauberes 3er-Raster.
   - Funktioniert unabhängig von alten -Styles.
   ========================================================= */


/* Referenzbereich als eigener dunkler Praxisblock */
.wv-reference-section {
	background: #1e1e1e !important;
	color: #ffffff !important;
	padding: 54px 58px !important;
	box-shadow: 0 18px 46px rgba(0,0,0,0.18) !important;
	box-sizing: border-box !important;
}


/* Überschrift und Lead im dunklen Referenzbereich */
.wv-reference-section h2 {
	color: #ffffff !important;
}

.wv-reference-section .wv-lead {
	color: #dddddd !important;
}

.wv-reference-section .wv-kicker {
	color: #669acc !important;
}


/* Sauberes 3-Spalten-Raster */
.wv-reference-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 28px !important;
	margin-top: 42px !important;
	align-items: stretch !important;
}


/* Einzelne Referenzkarte */
.wv-reference-grid .wv-reference-card {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #ffffff !important;
	color: #1e1e1e !important;
	overflow: hidden !important;
	box-shadow: 0 14px 38px rgba(0,0,0,0.28) !important;
	box-sizing: border-box !important;
}


/* Bildfläche / Platzhalterfläche */
.wv-reference-grid .wv-reference-image {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	aspect-ratio: 4 / 3 !important;
	background: linear-gradient(135deg, #d8d8d8 0%, #efefef 100%) !important;
	overflow: hidden !important;
}


/* Platzhaltertext "Bild folgt" mittig in der Bildfläche */
.wv-reference-grid .wv-reference-image span {
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%) !important;
	font-family: 'Oswald', Arial, sans-serif !important;
	font-size: 13px !important;
	font-weight: 300 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: #777777 !important;
}


/* Späteres echtes Bild innerhalb der Bildfläche */
.wv-reference-grid .wv-reference-image img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
}


/* Textbereich unter dem Bild */
.wv-reference-grid .wv-reference-copy {
	padding: 24px 26px 28px 26px !important;
	box-sizing: border-box !important;
}


/* Headline in der Referenzkarte */
.wv-reference-grid .wv-reference-copy h3 {
	margin: 0 0 10px 0 !important;
	font-family: 'Bebas Neue', Impact, sans-serif !important;
	font-size: 28px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: 0.02em !important;
	text-transform: uppercase !important;
	color: #1e1e1e !important;
}


/* Beschreibungstext in der Referenzkarte */
.wv-reference-grid .wv-reference-copy p {
	margin: 0 !important;
	font-family: 'Oswald', Arial, sans-serif !important;
	font-size: 17px !important;
	font-weight: 300 !important;
	line-height: 1.45 !important;
	color: #2a2a2a !important;
}


/* Tablet: zwei Spalten */
@media (max-width: 1024px) {
	.wv-reference-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}


/* Mobile: eine Spalte */
@media (max-width: 768px) {
	.wv-reference-section {
		padding: 38px 30px !important;
	}

	.wv-reference-grid {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}

	.wv-reference-grid .wv-reference-image {
		aspect-ratio: 16 / 10 !important;
	}

	.wv-reference-grid .wv-reference-copy {
		padding: 22px 22px 24px 22px !important;
	}
}


/* =========================================================
   WILHELM VISUALS – HARD FIX Referenzkarten Produktion & Anlagen
   Seite: Produktion & Anlagen
   Page-ID: 87

   Zweck:
   - Greift auch dann, wenn der Classic Editor  oder 
     innerhalb der Referenzkarten entfernt.
   - Erzwingt ein sauberes 3er-Raster.
   - Macht aus den vorhandenen "Bild folgt"-Bereichen echte Karten.
   ========================================================= */


/* Referenzblock als eigener dunkler Praxisbereich */
body.page-id-87 .wv-reference-section {
	background: #1e1e1e !important;
	color: #ffffff !important;

	padding: 54px 58px !important;
	box-shadow: 0 18px 46px rgba(0,0,0,0.18) !important;

	box-sizing: border-box !important;
}


/* Überschrift und Lead im dunklen Block */
body.page-id-87 .wv-reference-section h2 {
	color: #ffffff !important;
}

body.page-id-87 .wv-reference-section .wv-lead {
	color: #dddddd !important;
}

body.page-id-87 .wv-reference-section .wv-kicker {
	color: #669acc !important;
}


/* Referenzraster: exakt 3 Spalten auf Desktop */
body.page-id-87 .wv-reference-section .wv-reference-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

	gap: 28px !important;
	margin-top: 42px !important;

	align-items: stretch !important;
}


/* Jede direkte Karte im Raster erzwingen
   Greift auch dann, wenn WordPress den Inhalt etwas umbaut. */
body.page-id-87 .wv-reference-section .wv-reference-grid > div {
	display: flex !important;
	flex-direction: column !important;

	width: 100% !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 !important;

	background: #ffffff !important;
	color: #1e1e1e !important;

	overflow: hidden !important;
	box-shadow: 0 14px 38px rgba(0,0,0,0.28) !important;

	box-sizing: border-box !important;
}


/* Bild-/Platzhalterfläche innerhalb jeder Karte
   Greift auf .wv-reference-image, auch wenn kein  mehr vorhanden ist. */
body.page-id-87 .wv-reference-section .wv-reference-grid > div > .wv-reference-image {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: 100% !important;
	aspect-ratio: 4 / 3 !important;

	margin: 0 !important;
	padding: 0 !important;

	background:
		linear-gradient(
			135deg,
			#d8d8d8 0%,
			#efefef 100%
		) !important;

	color: #777777 !important;

	font-family: 'Oswald', Arial, sans-serif !important;
	font-size: 13px !important;
	font-weight: 300 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;

	box-sizing: border-box !important;
}


/* Falls später echte Bilder eingesetzt werden */
body.page-id-87 .wv-reference-section .wv-reference-grid > div > .wv-reference-image img {
	display: block !important;

	width: 100% !important;
	height: 100% !important;

	object-fit: cover !important;
	object-position: center center !important;
}


/* Textbereich unter der Bildfläche */
body.page-id-87 .wv-reference-section .wv-reference-grid > div > .wv-reference-copy {
	display: block !important;

	padding: 24px 26px 28px 26px !important;

	background: #ffffff !important;
	color: #2a2a2a !important;

	font-family: 'Oswald', Arial, sans-serif !important;
	font-size: 17px !important;
	font-weight: 300 !important;
	line-height: 1.45 !important;

	box-sizing: border-box !important;
}


/* Headline in der Karte */
body.page-id-87 .wv-reference-section .wv-reference-grid > div > .wv-reference-copy h3 {
	margin: 0 0 10px 0 !important;

	font-family: 'Bebas Neue', Impact, sans-serif !important;
	font-size: 28px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: 0.02em !important;
	text-transform: uppercase !important;

	color: #1e1e1e !important;
}


/* Falls WordPress doch Absätze erzeugt */
body.page-id-87 .wv-reference-section .wv-reference-grid > div > .wv-reference-copy p {
	margin: 0 !important;

	color: #2a2a2a !important;

	font-family: 'Oswald', Arial, sans-serif !important;
	font-size: 17px !important;
	font-weight: 300 !important;
	line-height: 1.45 !important;
}


/* =========================================================
   Tablet: 2 Spalten
   ========================================================= */

@media (max-width: 1024px) {

	body.page-id-87 .wv-reference-section .wv-reference-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}


/* =========================================================
   Mobile: 1 Spalte
   ========================================================= */

@media (max-width: 768px) {

	body.page-id-87 .wv-reference-section {
		padding: 38px 30px !important;
	}

	body.page-id-87 .wv-reference-section .wv-reference-grid {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}

	body.page-id-87 .wv-reference-section .wv-reference-grid > div > .wv-reference-image {
		aspect-ratio: 16 / 10 !important;
	}

	body.page-id-87 .wv-reference-section .wv-reference-grid > div > .wv-reference-copy {
		padding: 22px 22px 24px 22px !important;
	}
}

/* =========================================================
   WILHELM VISUALS – Referenztafel statt HTML-Galerie
   Seite: Produktion & Anlagen
   Page-ID: 87

   Zweck:
   - Eine große gestaltete Bildtafel sauber darstellen
   - Keine WordPress-Galerie-/Grid-Probleme
   ========================================================= */


/* Dunkler Referenzbereich */
body.page-id-87 .wv-reference-board-section {
	background: #1e1e1e;
	color: #ffffff;

	padding: 54px 58px;
	box-shadow: 0 18px 46px rgba(0,0,0,0.18);

	box-sizing: border-box;
}


/* Überschrift im dunklen Referenzbereich */
body.page-id-87 .wv-reference-board-section h2 {
	color: #ffffff;
}


/* Leadtext im dunklen Referenzbereich */
body.page-id-87 .wv-reference-board-section .wv-lead {
	color: #dddddd;
}


/* Die eigentliche Referenz-Bildtafel */
body.page-id-87 .wv-reference-board {
	display: block;

	width: 100%;
	height: auto;

	margin-top: 42px;

	box-shadow: 0 18px 46px rgba(0,0,0,0.32);
}


/* Mobile Anpassung */
@media (max-width: 768px) {

	body.page-id-87 .wv-reference-board-section {
		padding: 38px 30px;
	}

	body.page-id-87 .wv-reference-board {
		margin-top: 30px;
	}
}


/* =========================================================
   WILHELM VISUALS – große Referenzbilder Produktion & Anlagen
   Seite: Produktion & Anlagen
   Page-ID: 87

   Zweck:
   - Große Referenzbilder statt kleiner Galerie
   - Ruhige, hochwertige Case-Struktur
   - Keine WordPress-Galerie-Abhängigkeit
   ========================================================= */


/* Referenzbereich bewusst breiter als normaler Text */
body.page-id-87 .wv-reference-large-section {
	width: min(1320px, calc(100% - 48px)) !important;

	margin-left: auto !important;
	margin-right: auto !important;

	background: #1e1e1e;
	color: #ffffff;

	padding: 58px 64px;
	box-shadow: 0 18px 46px rgba(0,0,0,0.18);

	box-sizing: border-box;
}


/* Überschrift im dunklen Bereich */
body.page-id-87 .wv-reference-large-section h2 {
	color: #ffffff;
}


/* Leadtext im dunklen Bereich */
body.page-id-87 .wv-reference-large-section .wv-lead {
	max-width: 980px;
	color: #dddddd;
}


/* Einzelner großer Referenzblock */
body.page-id-87 .wv-reference-large-item {
	margin-top: 52px;

	background: #ffffff;
	color: #1e1e1e;

	box-shadow: 0 16px 42px rgba(0,0,0,0.32);
}


/* Großes Referenzbild */
body.page-id-87 .wv-reference-large-item img {
	display: block;

	width: 100%;
	height: auto;

	margin: 0;
	padding: 0;
}


/* Text unter dem Bild */
body.page-id-87 .wv-reference-large-caption {
	padding: 30px 34px 34px 34px;

	box-sizing: border-box;
}


/* Headline unter dem Bild */
body.page-id-87 .wv-reference-large-caption h3 {
	margin: 0 0 12px 0;

	font-family: 'Bebas Neue', Impact, sans-serif;
	font-size: 38px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;

	color: #1e1e1e;
}


/* Erklärungstext unter dem Bild */
body.page-id-87 .wv-reference-large-caption p {
	margin: 0;

	max-width: 980px;

	font-family: 'Oswald', Arial, sans-serif;
	font-size: 20px;
	font-weight: 300;
	line-height: 1.5;

	color: #2a2a2a;
}


/* Mobile Anpassung */
@media (max-width: 768px) {

	body.page-id-87 .wv-reference-large-section {
		width: calc(100% - 40px) !important;
		padding: 38px 30px;
	}

	body.page-id-87 .wv-reference-large-item {
		margin-top: 34px;
	}

	body.page-id-87 .wv-reference-large-caption {
		padding: 24px 24px 28px 24px;
	}

	body.page-id-87 .wv-reference-large-caption h3 {
		font-size: 31px;
	}

	body.page-id-87 .wv-reference-large-caption p {
		font-size: 18px;
	}
}