/*
 * Struktur V02: section styles for the page content and the tidied-up header.
 *
 * Selectors start with `html body` on purpose: the theme's own rules, printed
 * inline from header.php, reach up to 0,2,1 (`body.not_home .entry-content > p`)
 * and would otherwise win over the sections.
 */

:root {
	--v02-red: #d2171f;
	--v02-ink: #33312b;
	--v02-warm: #e6e5e2;
	--v02-light: #eeeeee;
	--v02-mid: #c9c9c9;
	--v02-width: 1200px;
	--v02-space: clamp(56px, 7vw, 96px);
	/* 100vw counts a visible scrollbar; wilke-v02.php measures it into --scrollbar-width. */
	--v02-vw: calc(100vw - var(--scrollbar-width, 0px));
	--v02-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 13.5l6.5 6.5L22 4' fill='none' stroke='%23d2171f' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--v02-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 13.5l6.5 6.5L22 4' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Guard for the moment before the scrollbar is measured. On body this would not reach the viewport. */
html:has(.v02-hero) {
	overflow-x: clip;
}

/* ---------- Kopfbild ---------- */

html body .entry-content > .wp-block-cover.v02-hero {
	width: var(--v02-vw);
	max-width: none;
	margin: 0 0 0 calc(50% - var(--v02-vw) / 2);
	min-height: clamp(420px, 52vw, 720px) !important;
	padding: 0 0 clamp(40px, 6vw, 80px);
}

html body .v02-hero .wp-block-cover__background {
	opacity: 1 !important;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.72) 100%) !important;
}

/* Core pins a bottom-left content position to the edge with a higher specificity. */
html body .wp-block-cover.v02-hero.has-custom-content-position .wp-block-cover__inner-container {
	width: 90% !important;
	max-width: var(--v02-width);
	margin: 0 auto !important;
}

html body .v02-hero .v02-label {
	display: inline-block;
	width: auto;
	margin: 0 0 1rem;
	padding: 0.3em 0.6em;
	background: var(--v02-red);
	color: #fff;
	font-size: clamp(1rem, 1.6vw, 1.4rem);
	font-weight: 600;
	line-height: 1.3;
	text-transform: uppercase;
}

html body .v02-hero h1.v02-hero-title {
	width: auto;
	max-width: none;
	margin: 0;
	color: #fff;
	font-size: clamp(2.1rem, 4.6vw, 4.25rem);
	line-height: 1.15;
	text-align: left;
}

/* ---------- Abschnitte ---------- */

html body .entry-content > .v02-section {
	position: relative;
	width: 90%;
	max-width: var(--v02-width);
	margin: 0 auto;
	padding-block: var(--v02-space);
}

/* Two white sections in a row share one gap. */
html body .v02-section:not([class*="v02-bg-"]):not(.v02-band-red) + .v02-section:not([class*="v02-bg-"]):not(.v02-band-red) {
	padding-top: 0;
}

html body .v02-section.v02-section--tight-top {
	padding-top: 0;
}

html body .v02-section.v02-section--flush-bottom {
	padding-bottom: 0;
}

html body .v02-bg-warm,
html body .v02-bg-light,
html body .v02-bg-mid,
html body .v02-band-red {
	box-shadow: 0 0 0 100vmax var(--v02-bg);
	clip-path: inset(0 -100vmax);
	background: var(--v02-bg);
}

html body .v02-bg-warm { --v02-bg: var(--v02-warm); }
html body .v02-bg-light { --v02-bg: var(--v02-light); }
html body .v02-bg-mid { --v02-bg: var(--v02-mid); }
html body .v02-band-red { --v02-bg: var(--v02-red); padding-block: clamp(48px, 5vw, 72px); }

/* Everything inside a section uses the section's width, not the theme's 96 %. */
html body .v02-section :is(h1, h2, h3, p, ul, .wp-block-columns, .wp-block-image, .wp-block-buttons, .wp-block-button, figure) {
	width: auto;
	max-width: none;
}

html body .v02-section h2 {
	margin: 0 0 1.5rem;
	font-size: clamp(1.9rem, 3.2vw, 2.75rem);
	line-height: 1.15;
}

html body .v02-section h2.v02-h-small {
	font-size: clamp(1.6rem, 2.4vw, 2.1rem);
}

html body .v02-section h2.v02-center {
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

html body .v02-section p {
	margin: 0 0 1.25rem;
}

html body .v02-section .wp-block-columns {
	gap: clamp(2rem, 4vw, 4rem);
	margin: 0;
}

html body .v02-section .wp-block-image {
	margin: 0 0 1.5rem;
}

html body .v02-section .wp-block-image img {
	display: block;
	height: auto;
}

/* ---------- Logoleiste ---------- */

/* Full width under the section; the track runs left and repeats. */
html body .v02-section .v02-marquee {
	width: var(--v02-vw);
	max-width: none;
	margin: clamp(2.5rem, 5vw, 4rem) 0 0 calc(50% - var(--v02-vw) / 2);
	overflow: hidden;
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

html body .v02-section .v02-marquee__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: clamp(3rem, 6vw, 5rem);
	width: max-content;
	max-width: none;
	margin: 0;
	animation: v02-marquee 50s linear infinite;
}

html body .v02-section .v02-marquee:hover .v02-marquee__track {
	animation-play-state: paused;
}

html body .v02-section .v02-marquee .wp-block-image {
	flex: 0 0 auto;
	margin: 0;
}

html body .v02-section .v02-marquee .wp-block-image img {
	width: auto;
	height: 64px;
	max-width: 190px;
	object-fit: contain;
	mix-blend-mode: multiply;
}

@keyframes v02-marquee {
	to { transform: translateX(calc(-50% - clamp(3rem, 6vw, 5rem) / 2)); }
}

@media (prefers-reduced-motion: reduce) {
	html body .v02-section .v02-marquee {
		mask-image: none;
	}

	html body .v02-section .v02-marquee__track {
		flex-wrap: wrap !important;
		justify-content: center;
		width: 90%;
		margin: 0 auto;
		animation: none;
	}

	html body .v02-section .v02-marquee__track > [aria-hidden] {
		display: none;
	}
}

html body .v02-section .wp-block-image.v02-cutout {
	margin: 0;
}

html body .v02-section .wp-block-image.v02-cutout img {
	width: auto;
	max-height: 720px;
	margin: 0 auto;
}

/*
 * On wide screens the cutout leans out of the content column into the right
 * margin and grows taller.
 */
@media (min-width: 1360px) {
	html body .v02-section .wp-block-image.v02-cutout {
		margin-right: calc(-1 * min((var(--v02-vw) - min(90vw, var(--v02-width))) / 2 - 32px, 160px));
	}

	html body .v02-section .wp-block-image.v02-cutout img {
		max-height: 880px;
		margin: 0 0 0 auto;
	}
}

/* ---------- Häkchenliste ---------- */

html body .v02-section ul.v02-checks {
	margin: 1.75rem 0 2rem;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: 2rem;
}

html body .v02-section ul.v02-checks li {
	position: relative;
	margin: 0 0 0.6rem;
	padding-left: 1.9em;
	font-weight: 600;
	line-height: 1.4;
	break-inside: avoid;
}

html body .v02-section ul.v02-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 1.2em;
	height: 1.2em;
	background: var(--v02-check) no-repeat center / contain;
}

html body .v02-redbox {
	padding: clamp(1.75rem, 3vw, 2.75rem);
	background: var(--v02-red);
	color: #fff;
}

html body .v02-redbox ul.v02-checks {
	margin: 0;
	columns: 1;
}

html body .v02-redbox ul.v02-checks li {
	color: #fff;
}

html body .v02-redbox ul.v02-checks li::before {
	background-image: var(--v02-check-white);
}

/* ---------- Buttons ---------- */

html body .v02-section .wp-block-buttons {
	margin: 0.5rem 0 0;
}

/* The theme sizes every button to 90 % via `body.not_home .entry-content .wp-block-button`. */
html body .v02-section .wp-block-buttons > .wp-block-button {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	margin: 0;
}

html body .v02-section .wp-block-buttons .wp-block-button__link {
	width: auto;
	padding: 0.85em 1.4em;
	text-align: left;
}

html body .v02-section .wp-block-buttons {
	display: flex;
	width: 100%;
}

html body .v02-section .wp-block-buttons.is-content-justification-center {
	justify-content: center;
}

html body .v02-section .wp-block-buttons.is-content-justification-right {
	justify-content: flex-end;
}

html body .v02-section .v02-center {
	text-align: center;
}

html body .v02-section .v02-arrow .wp-block-button__link::after {
	content: "→";
	margin-left: 0.7em;
}

html body .v02-section .wp-block-buttons > .wp-block-button.v02-btn-block,
html body .v02-section .wp-block-buttons .v02-btn-block .wp-block-button__link {
	flex: 1 1 100%;
	display: block;
	width: 100%;
	text-align: left;
}

html body .v02-section .v02-btn-dark .wp-block-button__link {
	background: #000;
	color: #fff;
}

html body .v02-band-red h2 {
	color: #fff;
}

/* ---------- Text in zwei Spalten ---------- */

html body .v02-section .v02-textcols {
	columns: 2;
	column-gap: clamp(2rem, 5vw, 4.5rem);
	margin-bottom: 1.5rem;
}

html body .v02-section .v02-textcols p:first-child {
	margin-top: 0;
}

/* ---------- Leistungskarten ---------- */

html body .v02-section .wp-block-columns.v02-cards {
	gap: clamp(1.25rem, 3vw, 2.75rem);
	margin-bottom: clamp(1.25rem, 3vw, 2.75rem);
}

html body .v02-section .v02-cards > .wp-block-column {
	display: flex;
}

html body .v02-section .v02-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 1.75rem;
	background: #fff;
}

html body .v02-section .v02-card > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	height: 100%;
}

html body .v02-section .v02-card .wp-block-image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

html body .v02-section .v02-card h3 {
	margin: 0 0 1rem;
	font-size: clamp(1.35rem, 1.8vw, 1.6rem);
	line-height: 1.2;
	hyphens: manual;
}

html body .v02-section .v02-card .wp-block-buttons {
	margin-top: auto;
}

/* ---------- Jahrhunderte ---------- */

html body .v02-section .v02-year-title {
	margin: 0;
	font-size: clamp(1.4rem, 2vw, 1.85rem);
	line-height: 1.2;
}

html body .v02-section p.v02-year {
	margin: 0 0 2rem;
	color: var(--v02-red);
	font-size: clamp(5rem, 11vw, 9.5rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
}

html body .v02-section .v02-year-row .wp-block-buttons {
	max-width: 320px;
}

html body .v02-section hr.v02-sep {
	width: 100%;
	max-width: none;
	margin: clamp(2rem, 4vw, 3rem) 0;
	border: 0;
	border-top: 1px solid #bdbdbd;
	opacity: 1;
}

/* ---------- Kategorieraster ---------- */

html body .v02-catgrid .woocommerce {
	width: 100%;
}

html body .v02-catgrid ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0;
}

html body .v02-catgrid ul.products::before,
html body .v02-catgrid ul.products::after {
	display: none;
}

/* The theme forces four columns with !important on every product grid. */
html body .v02-catgrid ul.products li.product-category {
	float: none;
	width: auto !important;
	margin: 0 !important;
}

/* The theme caps every grid image at 100 px. */
html body .v02-catgrid ul.products li.product-category img {
	width: 100%;
	height: 240px;
	min-height: 0;
	max-height: none;
	object-fit: contain;
}

/* ---------- Schmale Bildschirme ---------- */

@media (max-width: 781px) {
	/* Taller on phones, so the title sits below the faces instead of on them. */
	html body .entry-content > .wp-block-cover.v02-hero {
		min-height: 580px !important;
	}

	html body .v02-hero h1.v02-hero-title {
		font-size: 1.85rem;
	}

	html body .v02-section ul.v02-checks,
	html body .v02-section .v02-textcols {
		columns: 1;
	}

	html body .v02-catgrid ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	html body .v02-catgrid ul.products li.product-category img {
		height: 140px;
	}

	html body .v02-section .wp-block-buttons.is-content-justification-right {
		justify-content: flex-start;
	}
}

/* ---------- Header V02 ---------- */

@media (min-width: 1281px) {
	html body.wilke-v02 header.head .inner ul#headnav {
		justify-content: flex-end;
		align-items: flex-start;
		gap: 0 28px;
		margin-top: 0;
	}

	/* As much air below the navigation as above the info block. */
	html body.wilke-v02 header.head:not(.is-sticky) {
		height: 180px;
	}

	html body.wilke-v02 #allcont .cont {
		margin-top: 180px;
	}

	/*
	 * Square logo box, slightly smaller than before. At this size the centred
	 * logo puts the byline just above the header's lower edge, as on the live
	 * site.
	 */
	html body.wilke-v02 header.head:not(.is-sticky) .inner #logo {
		flex: 0 0 auto;
		width: 230px;
		height: 230px;
		background-size: 78% auto;
	}

	/* The theme spans the submenu across the whole navigation; here it hangs below its item. */
	html body.wilke-v02 header.head .inner nav.nav ul#site-navigation > li.menu-item-has-children {
		position: relative;
	}

	html body.wilke-v02 header.head .inner nav.nav ul#site-navigation > li.menu-item > .sub-menu {
		left: -25px;
		right: auto;
		width: max-content;
		min-width: 220px;
		padding: 10px 0;
		background: #fff;
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
	}

	html body.wilke-v02 header.head .inner nav.nav ul#site-navigation .sub-menu li {
		justify-content: flex-start;
		background: transparent;
	}

	html body.wilke-v02 header.head .inner nav.nav ul#site-navigation .sub-menu li a {
		width: 100%;
		color: var(--v02-ink);
	}

	html body.wilke-v02 header.head .inner nav.nav ul#site-navigation > li.menu-item .sub-menu li a:hover {
		background: var(--v02-light);
	}

	html body.wilke-v02 header.head .inner nav.nav ul#site-navigation .sub-menu a:hover,
	html body.wilke-v02 header.head .inner nav.nav ul#site-navigation .sub-menu .current-menu-item > a {
		color: var(--v02-red);
	}

	html body.wilke-v02 header.head .inner ul#headnav li.v02-info {
		display: flex;
		gap: 3.5rem;
		margin: 0 auto 0 0;
		padding: 0;
		background: none;
		font-size: 13px;
		line-height: 1.4;
		text-transform: none;
		color: var(--v02-ink);
	}

	html body.wilke-v02 header.head .inner ul#headnav li.v02-info a {
		font-size: 13px;
		color: inherit;
	}

	html body.wilke-v02 header.head .inner ul#headnav li.v02-search {
		padding-left: 23px;
		background: var(--icon-loupe, none) left center / 16px no-repeat;
	}

	html body.wilke-v02 header.head .socialnav {
		display: none;
	}

	html body.wilke-v02-nav header.head .inner nav.nav {
		margin-top: 14px;
		border-top: 1px solid #d5d5d5;
	}

	html body.wilke-v02-nav header.head .inner nav.nav ul#site-navigation > li {
		margin-top: 0;
		padding: 18px 15px 18px 0;
	}

	html body.wilke-v02-nav header.head .inner nav.nav ul#site-navigation > li.v02-termin {
		align-self: flex-start;
		padding: 0;
	}

	html body.wilke-v02-nav header.head .inner nav.nav ul#site-navigation > li.v02-termin > a {
		height: auto;
		padding: 18px 20px;
		background: var(--v02-red);
		color: #fff;
		border-bottom: 0;
	}

	html body.wilke-v02-nav header.head.is-sticky .inner nav.nav {
		border-top: 0;
	}
}

@media (max-width: 1280px) {
	html body.wilke-v02-nav header.head .inner nav.nav.active #site-navigation li.v02-termin a {
		padding: 10px 16px;
		background: var(--v02-red);
	}
}

/* ---------- NDR-Kasten auf der neuen Geschäftsseite ---------- */

html body:has(.v02-hero) .entry-content > .wp-block-media-text.has-background {
	width: 90%;
	max-width: var(--v02-width);
	margin: 0 auto var(--v02-space);
}