/* ==========================================================================
   HLD Theme – Custom Styles (Figma: HLD-Cleantex-Webdesign-V3)
   ========================================================================== */

:root {
	/* Brand colours now flow from the WordPress palette (theme.json → editable
	   in Appearance → Editor → Styles → Colours → Palette). The whole theme —
	   blocks AND this custom CSS — reads from that single source, so recolouring
	   for a sibling brand is done entirely in the backend, no files to edit.
	   The hex after each var is a fallback if a preset is ever missing. */
	--hld-blue: var(--wp--preset--color--primary-blue, #193C8C);
	--hld-navy: var(--wp--preset--color--dark-navy, #001E3C);
	--hld-mint: var(--wp--preset--color--mint-green, #94ECBE);
	--hld-green-bg: var(--wp--preset--color--light-green, #F0FFF0);
	--hld-light-blue: var(--wp--preset--color--light-blue, #C2DFFF);
	--hld-white: var(--wp--preset--color--white, #FFFFFF);
	--hld-black: var(--wp--preset--color--black, #000000);
	--hld-ease: 0.3s ease;
	--hld-pad: clamp(20px, 9vw, 130px);
}

*, *::before, *::after { box-sizing: border-box; }
body {
	overflow-x: hidden;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	letter-spacing: 0;
}

/* Correct medium-weight (500) body paragraphs to regular */
p[style*="font-weight:500"] { font-weight: 400 !important; }

/* Figma uses no letter-spacing anywhere — keep headings flush too */
h1, h2, h3, h4, h5, h6, .wp-block-heading { letter-spacing: 0; }

/* Link underlines always match the link's own text color */
a { text-decoration-color: currentColor !important; }

/* Remove all WP default spacing so content starts at absolute top */
.wp-site-blocks {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/*
 * Layout system (WP native):
 * - post-content: constrained at contentSize (1180px)
 * - Root padding: clamp(20px, 9vw, 130px) — responsive gutters
 * - useRootPaddingAwareAlignments: true — WP handles everything
 * - Groups with align:full break out to full width (bg colors edge-to-edge)
 * - Constrained layout inside full groups auto-gets root padding
 */

.wp-site-blocks > *:first-child {
	margin-top: 0 !important;
}

.wp-site-blocks > header,
.wp-site-blocks > .wp-block-template-part {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.wp-site-blocks > main,
.wp-site-blocks > main > .wp-block-post-content,
.wp-site-blocks > main > .wp-block-post-content > *:first-child {
	margin-top: 0 !important;
}

/* ==========================================================================
   HEADER — Floating card, 1260px, rounded bottom-right, fixed on scroll
   ========================================================================== */
.hld-header {
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
	width: 1260px;
	max-width: calc(100% - 40px);
	pointer-events: none;
	transition: transform 0.35s ease, opacity 0.35s ease;
}

.hld-header--hidden {
	transform: translateX(-50%) translateY(-120%);
	opacity: 0;
	pointer-events: none !important;
}

.hld-header-bar {
	width: 100%;
	background: var(--hld-white);
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
	border-radius: 0px 0px 40px 0px;
	padding: 20px 40px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: all;
	min-height: 101px;
}

/* Full-width white backing behind the floating header, extending past the
   point where the anchor/filter bar docks. Keeps the sticky menu zone white
   when a coloured page section (e.g. a light-green Produkte category)
   scrolls behind it, and overlaps the anchor bar so no seam/content line
   can appear between the two menus.
   - z-index:-1 sits it behind the header card, so the card keeps its full
     shadow rendered on top — the anchor bar never covers that shadow.
   - It rides the header's hide/show transform automatically (it's a child).
   - Revealed only once the anchor bar has docked (.hld-header--backdrop,
     toggled by initHeaderScroll) so the header still floats over the page
     hero at the very top of the page.
   bottom extends past the anchor bar's dock point; width uses a JS-measured
   value so it never triggers a horizontal scrollbar. */
.hld-header::before {
	content: "";
	position: absolute;
	top: -20px;
	bottom: -16px;
	left: 50%;
	width: var(--hld-backdrop-width, 100vw);
	transform: translateX(-50%);
	background: var(--hld-white);
	z-index: -1;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.hld-header--backdrop::before {
	opacity: 1;
}

/* Secondary nav — top right */
.hld-nav-secondary {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 25px;
}

.hld-nav-secondary a {
	font-size: 14px;
	font-weight: 500;
	color: var(--hld-navy);
	text-decoration: none;
	line-height: 20px;
	transition: color var(--hld-ease);
}
.hld-nav-secondary a:hover { color: var(--hld-navy); text-decoration: underline; }

/* Search wrapper + toggle */
.hld-search-wrapper {
	position: relative;
	display: flex;
	align-items: center;
}

.hld-search-toggle,
.hld-mobile-search button {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	/* Search-icon SVGs use stroke:currentColor, so they inherit the brand navy
	   from the palette (no hardcoded hex). */
	color: var(--hld-navy);
}

/* Search overlay — drops down from the top (50% height desktop, 100% mobile) */
.hld-search-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 50vh;
	z-index: 1100;
	background: var(--hld-white);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateY(-100%);
	transition: transform 0.35s ease;
}

.hld-search-overlay.active {
	transform: translateY(0);
}

@media (max-width: 768px) {
	.hld-search-overlay {
		height: 100vh;
	}
}

.hld-search-overlay-close {
	position: absolute;
	top: 40px;
	right: var(--hld-pad);
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hld-navy);
	color: var(--hld-white);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: background var(--hld-ease), color var(--hld-ease);
}

.hld-search-overlay-close:hover {
	background: var(--hld-mint);
	color: var(--hld-navy);
}

.hld-search-overlay-inner {
	width: 100%;
	max-width: 680px;
	padding: 0 var(--hld-pad);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
}

.hld-search-overlay-form {
	width: 100%;
	display: flex;
	align-items: stretch;
	gap: 14px;
}

.hld-search-overlay-form input[type="search"] {
	flex: 1;
	min-width: 0;
	font-family: inherit;
	font-size: 20px;
	color: var(--hld-navy);
	padding: 18px 22px;
	border: 2px solid var(--hld-navy);
	border-radius: 20px 0px 20px 0px;
	background: transparent;
	outline: none;
}

.hld-search-overlay-form input[type="search"]::placeholder {
	color: #9F9F9F;
}

.hld-search-overlay-form input[type="search"]:focus {
	border-color: var(--hld-blue);
}

.hld-search-overlay-form button {
	flex-shrink: 0;
	width: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hld-navy);
	color: var(--hld-white);
	border: none;
	border-radius: 20px 0px 20px 0px;
	cursor: pointer;
	transition: background var(--hld-ease), color var(--hld-ease);
}

.hld-search-overlay-form button:hover {
	background: var(--hld-mint);
	color: var(--hld-navy);
}

.hld-search-direkteinstieg {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}

.hld-search-direkteinstieg h3 {
	font-size: 22px;
	font-weight: 700;
	color: var(--hld-blue);
	margin: 0 0 8px;
}

.hld-search-direkteinstieg a {
	font-size: 18px;
	color: var(--hld-navy);
	text-decoration: none;
}

.hld-search-direkteinstieg a:hover {
	color: var(--hld-navy);
	text-decoration: underline;
}

/* Search results page — "Suchen" button turns mint on hover, like other
   HLD buttons (theme.json defaults it to blue). */
.wp-block-search__button:hover {
	background: var(--hld-mint) !important;
	color: var(--hld-navy) !important;
}

.hld-lang-switcher {
	font-size: 14px;
	font-weight: 500;
	color: #9F9F9F; /* inactive languages grey (per screendesign) */
	line-height: 20px;
}
.hld-lang-switcher span { color: #9F9F9F; margin: 0 1px; }
.hld-lang-switcher strong { color: var(--hld-navy); } /* active language */

/* Language links: grey by default, blue on hover, active stays navy */
.hld-lang-switcher .hld-lang {
	color: #9F9F9F;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--hld-ease);
}
.hld-lang-switcher .hld-lang--active { color: var(--hld-navy); }
.hld-lang-switcher a.hld-lang:hover { color: var(--hld-blue); }

/* Main row — logo left, primary nav right */
.hld-header-main {
	display: flex;
	align-items: flex-end;
	gap: 190px;
}

.hld-header-logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
.hld-header-logo img { height: 38px; width: auto; }

.hld-nav-primary {
	display: flex;
	align-items: center;
	gap: 25px;
}

.hld-nav-primary > a,
.hld-nav-dropdown-toggle {
	font-size: 18px;
	font-weight: 500;
	color: var(--hld-navy);
	text-decoration: none;
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
	padding: 0;
	line-height: 24px;
	display: flex;
	align-items: center;
	gap: 5px;
	transition: color var(--hld-ease);
}
.hld-nav-primary > a:hover,
.hld-nav-dropdown-toggle:hover { color: var(--hld-navy); text-decoration: underline; }

/* Dropdown */
.hld-nav-dropdown {
	position: relative;
}

.hld-dropdown-menu {
	display: none;
	position: absolute;
	top: calc(100% + 20px);
	left: -20px;
	background: var(--hld-white);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
	padding: 20px 30px;
	min-width: 220px;
	z-index: -1;
}

/* Opened by click — JS toggles .open on .hld-nav-dropdown (see initNavDropdowns) */
.hld-nav-dropdown.open > .hld-dropdown-menu {
	display: flex;
	flex-direction: column;
}

/* Flip the chevron while the menu is open */
.hld-nav-dropdown.open .hld-nav-dropdown-toggle svg {
	transform: rotate(180deg);
}

.hld-dropdown-menu a {
	font-size: 16px;
	font-weight: 400;
	color: var(--hld-navy);
	text-decoration: none;
	padding: 10px 0;
	line-height: 24px;
	transition: color var(--hld-ease);
}
.hld-dropdown-menu a:hover { color: var(--hld-navy); text-decoration: underline; }

/* Dropdown toggle is an anchor, style like nav link */
.hld-nav-dropdown-toggle {
	text-decoration: none;
}

.hld-nav-dropdown-toggle svg {
	margin-left: 2px;
	transition: transform var(--hld-ease);
}

/* ==========================================================================
   SHARED BUTTONS
   ========================================================================== */
.hld-btn-primary,
.hld-btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 140px;
	height: 38px;
	padding: 8px 24px;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	transition: all var(--hld-ease);
	cursor: pointer;
	border: none;
	font-family: inherit;
	line-height: 22px;
}

.hld-btn-primary {
	background: var(--hld-navy);
	color: var(--hld-white);
	border-radius: 20px 0px 20px 0px;
}
.hld-btn-primary:hover { background: var(--hld-mint); color: var(--hld-navy); }

.hld-btn-secondary {
	background: var(--hld-white);
	color: var(--hld-navy);
	border-radius: 19px 0px 19px 0px;
}
.hld-btn-secondary:hover { background: var(--hld-mint); color: var(--hld-navy); }

.hld-tertiary-link {
	font-size: 16px;
	color: var(--hld-navy);
	text-decoration: underline;
	white-space: nowrap;
}
.hld-tertiary-link:hover { color: var(--hld-mint); }

/* Content link (e.g. "Ganzes Sortiment ansehen") — green hover */
.hld-content-link a {
	color: var(--hld-navy);
	transition: color var(--hld-ease);
}
.hld-content-link a:hover { color: var(--hld-mint); }

/* WP button overrides */
.wp-block-button__link {
	transition: all var(--hld-ease);
	min-width: 140px;
	text-align: center;
}

/* HLD Primary button style (default — dark navy bg, white text) */
.wp-block-button.is-style-hld-primary .wp-block-button__link,
.wp-block-button:not([class*="is-style-"]) .wp-block-button__link {
	background: var(--hld-navy);
	color: var(--hld-white);
	border-radius: 20px 0px 20px 0px;
}

.wp-block-button.is-style-hld-primary .wp-block-button__link:hover,
.wp-block-button:not([class*="is-style-"]) .wp-block-button__link:hover {
	background: var(--hld-mint) !important;
	color: var(--hld-navy) !important;
}

/* HLD Secondary button style (white bg, dark navy text) */
.wp-block-button.is-style-hld-secondary .wp-block-button__link {
	background: var(--hld-white) !important;
	color: var(--hld-navy) !important;
	border-radius: 19px 0px 19px 0px;
}

.wp-block-button.is-style-hld-secondary .wp-block-button__link:hover {
	background: var(--hld-mint) !important;
	color: var(--hld-navy) !important;
}

/* HLD Download button style (primary + download arrow) */
.wp-block-button.is-style-hld-download .wp-block-button__link {
	background: var(--hld-navy);
	color: var(--hld-white);
	border-radius: 20px 0px 20px 0px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.wp-block-button.is-style-hld-download .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 10px;
	height: 13px;
	background: url("data:image/svg+xml,%3Csvg width='10' height='13' viewBox='0 0 10 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.75 8.75L1.75 5.41667M4.75 8.75L7.75 5.41667M4.75 8.75L4.75 4.75L4.75 0.749999' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M0.75 11.75H8.75' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
	flex-shrink: 0;
}

.wp-block-button.is-style-hld-download .wp-block-button__link:hover {
	background: var(--hld-mint) !important;
	color: var(--hld-navy) !important;
}

.wp-block-button.is-style-hld-download .wp-block-button__link:hover::after {
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='13' viewBox='0 0 10 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.75 8.75L1.75 5.41667M4.75 8.75L7.75 5.41667M4.75 8.75L4.75 4.75L4.75 0.749999' stroke='%23001E3C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M0.75 11.75H8.75' stroke='%23001E3C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* HLD Tertiary button style (text link with underline) */
.wp-block-button.is-style-hld-tertiary .wp-block-button__link {
	background: transparent !important;
	color: var(--hld-navy) !important;
	text-decoration: underline;
	min-width: auto;
	padding: 0;
	border-radius: 0;
}

.wp-block-button.is-style-hld-tertiary .wp-block-button__link:hover {
	color: var(--hld-mint) !important;
}

/* ==========================================================================
   HERO SLIDER (native cover blocks, stacked with opacity transition)
   ========================================================================== */
.hld-hero-slider {
	position: relative;
	overflow: hidden;
	height: calc(100vh - 40px);
	max-height: 900px;
	border-radius: 0 0 400px 0;
}

/* All slides stacked absolutely, same size */
.hld-hero-slider > .wp-block-cover {
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100%;
	height: 100% !important;
	min-height: 100% !important;
	opacity: 0;
	transition: opacity 0.8s ease;
	z-index: 1;
	border-radius: 0 !important;
	margin: 0 !important;
}

/* Editor: make the selected/focused slide visible for editing */
.editor-styles-wrapper .hld-hero-slider > .wp-block-cover.is-selected,
.editor-styles-wrapper .hld-hero-slider > .wp-block-cover.has-child-selected {
	opacity: 1 !important;
	z-index: 5 !important;
}

/* Video backgrounds in hero slides */
.hld-hero-slider .wp-block-cover__video-background {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hld-hero-slider > .wp-block-cover.hld-hero-slide-active {
	opacity: 1;
	z-index: 2;
}

/* Hero: headline + button bottom-aligned; button lands ~50px above the slider dots
   (dots sit at 30px; padding-bottom 88px - ~38px dot zone ≈ 50px gap). */
.hld-hero-slider > .wp-block-cover {
	padding-bottom: 88px !important;
}

.hld-hero-slider .wp-block-cover__inner-container {
	justify-content: flex-end !important;
}

/* Lighten the image behind the navy headline with a soft white gradient so the
   typography stays readable on busy/dark photos (per Figma). Sits above the
   image, below the text. */
.hld-hero-slider > .wp-block-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	/* White Verlauf, bottom-up, to lighten behind the bottom-aligned text —
	   but semi-transparent (not solid white) so the photo and the hero's
	   rounded shape stay visible at the bottom. */
	background: linear-gradient(to top,
		rgba(255, 255, 255, 0.75) 0%,
		rgba(255, 255, 255, 0.45) 35%,
		rgba(255, 255, 255, 0) 72%);
	z-index: 1;
	pointer-events: none;
}
/* Keep the photo behind the gradient, and the text above both. */
.hld-hero-slider > .wp-block-cover .wp-block-cover__image-background,
.hld-hero-slider > .wp-block-cover .wp-block-cover__video-background { z-index: 0; }
.hld-hero-slider .wp-block-cover__inner-container {
	position: relative;
	z-index: 5 !important;
}

/* Hero text: centered, no underline */
.hld-hero-slider .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	max-width: 1000px;
	margin: 0 auto;
	height: 100%;
}

.hld-hero-slider .wp-block-cover__inner-container h1,
.hld-hero-slider .wp-block-cover__inner-container h1 a,
.hld-hero-slider .wp-block-cover__inner-container .wp-block-heading a {
	text-decoration: none !important;
	color: inherit;
}

/* Slider navigation arrows (injected by JS) */
.hld-hero-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: var(--hld-navy);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: background var(--hld-ease);
}
.hld-hero-nav:hover { background: var(--hld-mint); }
.hld-hero-nav:hover svg path { stroke: var(--hld-navy); }
.hld-hero-nav--prev { left: 40px; opacity: 0.5; }
.hld-hero-nav--next { right: 40px; }

/* Dots — inside the slider, bottom center */
.hld-hero-dots-nav {
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	display: flex;
	gap: 8px;
}

.hld-hero-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--hld-mint);
	cursor: pointer;
	transition: background var(--hld-ease);
	border: none;
	padding: 0;
}
.hld-hero-dot.active { background: var(--hld-navy); }

/* ==========================================================================
   SECTION HEADER — centered title + lead at 80% max-width (reusable)
   Add className "hld-section-header" to a constrained group at 80%
   ========================================================================== */
/* No extra CSS needed — WP constrained layout handles the 80% contentSize */

/* ==========================================================================
   GRID SYSTEM — 3 columns desktop, 2 tablet, 1 mobile
   Add className "hld-grid-3" to a flex-wrap group
   ========================================================================== */
.hld-grid-3 {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 30px !important;
}

.hld-grid-3 > .hld-grid-item,
.hld-grid-3 > .wp-block-group {
	flex: 0 0 calc(33.333% - 20px);
	max-width: calc(33.333% - 20px);
}

@media (max-width: 1024px) {
	.hld-grid-3 > .hld-grid-item,
	.hld-grid-3 > .wp-block-group {
		flex: 0 0 calc(50% - 15px);
		max-width: calc(50% - 15px);
	}
}

@media (max-width: 600px) {
	.hld-grid-3 > .hld-grid-item,
	.hld-grid-3 > .wp-block-group {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* ==========================================================================
   BRANCH CARDS (inside WP blocks)
   ========================================================================== */
.hld-branch-card .wp-block-image {
	margin: 0;
	overflow: hidden;
}

.hld-branch-card .wp-block-image img {
	width: 100%;
	height: 380px;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.hld-branch-card:hover .wp-block-image img {
	transform: scale(1.05);
}

/* Whole card is clickable — see initBranchCardLinks() in main.js */
.hld-branch-card { cursor: pointer; }

/* Smooth colour change on the card button */
.hld-branch-card .wp-block-button__link {
	transition: background-color var(--hld-ease), color var(--hld-ease);
}

/* Hovering anywhere on the card turns the button green */
.hld-branch-card:hover .wp-block-button__link {
	background-color: var(--hld-mint) !important;
	color: var(--hld-navy) !important;
}

/* ==========================================================================
   PRODUCTS SECTION
   ========================================================================== */
.hld-products-section {
	background: var(--hld-white);
	padding: 150px var(--hld-pad);
}

.hld-products-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 50px;
}

.hld-products-header-left {
	max-width: 680px;
}

.hld-products-header h2 {
	font-size: 40px;
	font-weight: 700;
	line-height: 46px;
	color: var(--hld-blue);
	margin: 0 0 25px;
}

.hld-lead {
	font-size: 26px;
	font-weight: 400;
	line-height: 32px;
	color: var(--hld-black);
	margin: 0;
}

.hld-products-slider {
	position: relative;
	display: flex;
	align-items: center;
}

/* Products carousel — WP columns as horizontal scroller */
.hld-products-row.wp-block-columns {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	gap: 20px;
	position: relative;
}
.hld-products-row.wp-block-columns::-webkit-scrollbar { display: none; }

.hld-products-row > .wp-block-column {
	flex: 1 1 0 !important;
	min-width: 280px;
	scroll-snap-align: start;
}

/* Tablet + desktop: show exactly 3 product cards per view (20px gaps).
   Cards fill the row edge-to-edge — the nav arrows live out in the page
   gutter (see .hld-products-carousel-nav), so the row needs no inner padding
   and no card ever sits under an arrow.
   Breakpoint is 782px, not 769px, to sit just above WordPress core's own
   column-stacking rule (@media max-width:781px forces columns to 100% with
   !important); starting lower would leave a 769–781px dead zone where WP
   still stacks the row to a single card. */
@media (min-width: 782px) {
	.hld-products-row > .wp-block-column {
		flex: 0 0 calc((100% - 40px) / 3) !important;
		min-width: 0 !important;
	}
}

/* Tablet (782–1024px): show 2 cards per view instead of 3 (one 20px gap). */
@media (min-width: 782px) and (max-width: 1024px) {
	.hld-products-row > .wp-block-column {
		flex: 0 0 calc((100% - 20px) / 2) !important;
	}
}

/* Align "Ganzes Sortiment ansehen" link to bottom of the header row */
.wp-block-group.is-layout-flex:has(> .hld-content-link) {
	align-items: flex-end;
}

@media (max-width: 768px) {
	/* Mobile: one full-width card at a time, swiped (no arrows, no peek). */
	.hld-products-row.wp-block-columns {
		display: flex !important;
		flex-wrap: nowrap !important;
	}
	.hld-products-row > .wp-block-column {
		min-width: 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
		scroll-snap-align: start;
	}

	.hld-product-images-row.wp-block-columns {
		display: flex !important;
		flex-wrap: nowrap !important;
	}
	.hld-product-images-row > .wp-block-column {
		min-width: 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
}

/* Product card cover block */
.hld-product-card.wp-block-cover {
	min-height: 260px !important;
	overflow: hidden;
}

/* Product card: force title to top-left */
.hld-product-card.wp-block-cover {
	display: flex !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
}

.hld-product-card .wp-block-cover__inner-container {
	display: block !important;
	text-align: left;
	max-width: none;
	margin: 0;
	width: auto;
}

.hld-product-card .wp-block-cover__inner-container h4,
.hld-product-card .wp-block-cover__inner-container .wp-block-heading {
	text-decoration: none !important;
	margin: 0;
}

/* Product card hover — navy overlay covers image, title turns white (Figma: Produktgruppe).
   Uses WP's native cover dim layer (.wp-block-cover__background) so it always sits
   behind the title — no z-index conflict. */
.hld-product-card .wp-block-cover__background {
	background-color: var(--hld-navy) !important;
	opacity: 0;
	transition: opacity var(--hld-ease);
}

.hld-product-card:hover .wp-block-cover__background {
	opacity: 1 !important;
}

.hld-product-card .wp-block-cover__inner-container h4 {
	transition: color var(--hld-ease);
}

.hld-product-card:hover .wp-block-cover__inner-container h4 {
	color: var(--hld-white) !important;
}

/* Product carousel arrows — positioned outside the columns */
.hld-products-carousel-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: var(--hld-navy);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: background var(--hld-ease);
}
.hld-products-carousel-nav:hover { background: var(--hld-mint); }
.hld-products-carousel-nav:hover svg path { stroke: var(--hld-navy); }

/* Park the arrows out in the page gutter — the white space between the
   viewport edge and the first/last card — so they never overlap the product
   images. (50vw - 50%) is the live width of that gutter for this centered,
   content-width row; half of it minus half the 38px arrow (19px) centers the
   arrow in the gutter at every width. Hidden on mobile, where the gutter is
   too narrow and the row is swiped one card at a time. */
.hld-products-carousel-nav--prev { left:  calc((50vw - 50%) / -2 - 19px); }
.hld-products-carousel-nav--next { right: calc((50vw - 50%) / -2 - 19px); }

/* Mobile (781px = WP core's column-stacking breakpoint): one full-width card,
   centered, with the nav arrows kept visible. The side gutter is narrow here,
   so the arrows shrink to 30px to sit cleanly in it beside the card instead of
   over the product image. (JS still hides both when there's only one product
   and nothing to scroll.) */
@media (max-width: 781px) {
	/* Mobile: match the Pharma "Unsere Produkte" gallery arrows — 38px and
	   pulled in to overlap the card edges (they were 30px jammed at the border). */
	.hld-products-carousel-nav { width: 38px; height: 38px; }
	.hld-products-carousel-nav--prev { left:  -20px; }
	.hld-products-carousel-nav--next { right: -20px; }
}

/* Mobile: give the homepage product card the same tall portrait ratio as the
   Pharma product images (280:373) instead of the short 260px cover (feedback:
   image too low). */
@media (max-width: 768px) {
	.hld-product-card.wp-block-cover {
		min-height: 0 !important;
		aspect-ratio: 280 / 373 !important;
	}
}


/* ==========================================================================
   CLEANTEX SA SECTION — text aligns with content, image bleeds right
   ========================================================================== */
/* ==========================================================================
   TEXT-IMAGE BLEED PATTERN — text aligns with content, image bleeds to edge
   Reusable: add className "hld-text-image-bleed-right" to a columns block
   ========================================================================== */
/*
 * Padding formula to align with header logo:
 * Header is 1260px centered → starts at (100vw - 1260px) / 2
 * Logo is 40px inside → (100vw - 1260px) / 2 + 40px = (100vw - 1180px) / 2
 * This is exactly what constrained layout does with contentSize 1180px.
 * So we use: max(20px, calc((100% - 1180px) / 2))
 */
.hld-text-image-bleed-right.wp-block-columns,
.hld-text-image-bleed-left.wp-block-columns {
	align-items: center;
}

.hld-text-image-bleed-right.wp-block-columns {
	/* Text follows the content container (breadcrumb-aligned) at every width;
	   the image side stays at 0 so it bleeds to the edge. */
	padding-left: max(clamp(20px, 9vw, 130px), calc((100vw - 1180px) / 2));
	padding-right: 0;
}

/* Both columns 50/50 */
.hld-text-image-bleed-right > .wp-block-column:first-child,
.hld-text-image-bleed-left > .wp-block-column:last-child {
	flex-basis: 50% !important;
	max-width: 50%;
	padding-right: 40px;
	box-sizing: border-box;
}

.hld-text-image-bleed-right > .wp-block-column:last-child,
.hld-text-image-bleed-left > .wp-block-column:first-child {
	flex-basis: 50% !important;
	max-width: 50%;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Secondary 16px body paragraph in a bleed text column (e.g. "Lösungen der
   HLD") shouldn't run the full column width — cap it ~80% (feedback). Columns
   sit side-by-side down to 627px; below that they stack, so let it go full. */
@media (min-width: 627px) {
	.hld-text-image-bleed-left .wp-block-column p[style*="font-size:16px"],
	.hld-text-image-bleed-right .wp-block-column p[style*="font-size:16px"] {
		max-width: 80%;
	}
}

.hld-text-image-bleed-left.wp-block-columns {
	padding-left: 0;
	padding-right: max(clamp(20px, 9vw, 130px), calc((100vw - 1180px) / 2));
}

.hld-text-image-bleed-left > .wp-block-column:last-child {
	padding-right: 0;
	padding-left: 40px;
}

/* >626px: keep the two columns side by side — the image keeps bleeding to the
   edge and only the text follows the container (base rules above). Doubled
   .wp-block-columns out-specifies WP core's ≤781px auto-stacking so it holds
   all the way down to 627px. */
@media (min-width: 627px) {
	.hld-text-image-bleed-right.wp-block-columns,
	.hld-text-image-bleed-left.wp-block-columns {
		flex-wrap: nowrap !important;
	}
	.hld-text-image-bleed-right.wp-block-columns.wp-block-columns > .wp-block-column,
	.hld-text-image-bleed-left.wp-block-columns.wp-block-columns > .wp-block-column {
		flex-basis: 50% !important;
		max-width: 50% !important;
		/* Stay in DOM order while side by side — cancel the global ≤768px
		   "image second" rule that otherwise flips bleed-left horizontally. The
		   image only drops below the text once actually stacked (≤626). */
		order: 0 !important;
	}
}

/* ≤626px: stack (text over image). Base stack behaviour. */
@media (max-width: 626px) {
	.hld-text-image-bleed-right.wp-block-columns,
	.hld-text-image-bleed-left.wp-block-columns {
		flex-wrap: wrap;
	}
	.hld-text-image-bleed-right.wp-block-columns > .wp-block-column,
	.hld-text-image-bleed-left.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* 481–626px: stacked but tidy — image + text at 80% width, centered. */
@media (min-width: 481px) and (max-width: 626px) {
	.hld-text-image-bleed-right.wp-block-columns,
	.hld-text-image-bleed-left.wp-block-columns {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.hld-text-image-bleed-right.wp-block-columns > .wp-block-column,
	.hld-text-image-bleed-left.wp-block-columns > .wp-block-column {
		max-width: 80% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* ≤480px (phones): full width. */
@media (max-width: 480px) {
	.hld-text-image-bleed-right.wp-block-columns,
	.hld-text-image-bleed-left.wp-block-columns {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	.hld-text-image-bleed-right.wp-block-columns > .wp-block-column,
	.hld-text-image-bleed-left.wp-block-columns > .wp-block-column {
		max-width: 100% !important;
	}
}

/* The homepage Cleantex section reuses the bleed-right class, so the bleed
   responsive rules above (side-by-side down to 627px) would apply to it and
   shrink the cover. Cleantex must instead STACK on tablet/phone and let its own
   .hld-cleantex-cover rules size the image (70% tablet / full phone). Placed
   after the bleed rules and carrying :has() specificity so it wins. */
@media (max-width: 768px) {
	.hld-text-image-bleed-right.wp-block-columns:has(.hld-cleantex-cover) {
		flex-wrap: wrap !important;
	}
	.hld-text-image-bleed-right.wp-block-columns:has(.hld-cleantex-cover) > .wp-block-column {
		flex-basis: 100% !important;
		max-width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

.hld-cleantex-inner {
	display: flex;
	align-items: center;
	gap: 120px;
}

.hld-cleantex-text {
	flex: 0 0 45%;
	max-width: 580px;
}

.hld-cleantex-text h2 {
	font-size: 40px;
	font-weight: 700;
	line-height: 46px;
	color: var(--hld-blue);
	margin: 0 0 25px;
}

.hld-cleantex-text .hld-lead { margin-bottom: 50px; }

.hld-cleantex-image {
	flex: 1;
	position: relative;
	height: 600px;
	overflow: hidden;
	border-radius: 0 0 0 300px;
}

.hld-cleantex-image > img:first-child {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Cleantex cover — position inner content to bottom-right */
.hld-cleantex-cover {
	position: relative;
}

.hld-cleantex-cover .wp-block-cover__inner-container {
	position: absolute;
	bottom: 50px;
	right: 50px;
	left: auto;
	top: auto;
	width: auto;
	max-width: none;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}

.hld-cleantex-logo {
	margin: 0 !important;
}

.hld-cleantex-logo img {
	filter: none;
	width: 200px;
	height: auto;
}

/* [3b] Cleantex teaser on mobile: show the photo at its natural proportions
   (source is 3:2) instead of the tall 600px cover crop, and shrink the huge
   corner radius. */
@media (max-width: 768px) {
	.hld-cleantex-cover {
		min-height: 0 !important;
		height: auto !important;
		aspect-ratio: 3 / 2 !important;
		border-bottom-left-radius: 100px !important;
	}
}

/* Tablet: don't let the Cleantex photo run full-bleed — 70% width, and the
   height follows automatically from the 3:2 ratio above. Phones (≤600) keep
   the full 100% width requested earlier. */
@media (min-width: 601px) and (max-width: 768px) {
	.hld-cleantex-cover {
		width: 70%;
	}
}

/* Tablet & down: halve the paragraph→button gap (Cleantex "Webseite besuchen",
   Shop "zum Shop", etc.). The gap is three pieces — the spacer height PLUS the
   block-gap margin above the spacer AND on the button — so all three are halved
   (25/24/24 → 12/12/12) for a true 50% cut. Covers landscape tablets up to
   1200px; full desktop keeps the original spacing. */
@media (max-width: 1200px) {
	.wp-block-spacer:has(+ .wp-block-buttons) {
		height: 12px !important;
		min-height: 12px !important;
		margin-top: 12px !important;
	}
	.wp-block-spacer:has(+ .wp-block-buttons) + .wp-block-buttons {
		margin-top: 12px !important;
	}
}

/* ==========================================================================
   SHOP TEASER
   ========================================================================== */
.hld-shop-section {
	background: var(--hld-blue);
	padding: 50px var(--hld-pad);
}

.hld-shop-inner {
	display: flex;
	align-items: center;
	gap: 120px;
}

/* Shop image via native wp:image block */
.hld-shop-img {
	overflow: hidden;
	margin: 0;
}

.hld-shop-img img {
	width: 100%;
	height: 380px;
	object-fit: cover;
	display: block;
}

.hld-shop-text { flex: 1; }

.hld-shop-text h2 {
	font-size: 40px;
	font-weight: 700;
	line-height: 46px;
	color: var(--hld-mint);
	margin: 0 0 25px;
}

.hld-shop-text .hld-lead {
	color: var(--hld-white);
	margin-bottom: 50px;
}

/* ==========================================================================
   REFERENZEN
   ========================================================================== */
.hld-referenzen-section {
	background: var(--hld-white);
	padding: 150px var(--hld-pad);
}

.hld-referenzen-inner { max-width: 1180px; margin: 0 auto; }

.hld-referenzen-header {
	text-align: center;
	max-width: 780px;
	margin: 0 auto 50px;
}

.hld-referenzen-header h2 {
	font-size: 40px;
	font-weight: 700;
	line-height: 46px;
	color: var(--hld-blue);
	margin: 0 0 25px;
}

/* Referenzen: force WP columns to equal height */
.hld-testimonial-card,
.wp-block-group.hld-testimonial-card {
	background: var(--hld-green-bg) !important;
	border-radius: 0px 100px 0px 100px !important;
	padding: 40px !important;
	/* Was 330px which left a lot of empty space under short quotes (feedback:
	   "sehr viel Leerraum – kürzen"). Let the card hug its content; equal
	   heights within a row are still handled by the grid/flex stretch. */
	min-height: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
	text-align: center;
	gap: 25px;
	transition: transform var(--hld-ease);
	height: 100%;
	box-sizing: border-box;
}

.hld-testimonial-card:hover { transform: translateY(-5px); }

/* Quote text top-aligned (Figma: cards "oben bündig"); author follows directly */
.hld-testimonial-card > p.has-primary-blue-color,
.hld-testimonial-card > .has-primary-blue-color:first-child {
	flex-grow: 0;
	margin: 0;
}

/* Author block — Name + Funktion grouped tight, fixed gap below quote */
.hld-testimonial-card > .wp-block-group {
	gap: 4px;
	margin: 0;
}

.hld-testimonial-card > .wp-block-group > p {
	margin: 0;
}

/* The WP column wrapping each card must also stretch */
.hld-testimonial-card.wp-block-group {
	flex: 1;
}

/* Referenzen: one testimonial per row on tablet & down (WP only stacks its
   columns at ≤781px, so 782–1024px otherwise stays 3-across). */
@media (max-width: 1024px) {
	.wp-block-columns:has(.hld-testimonial-card) {
		flex-wrap: wrap !important;
	}
	.wp-block-columns:has(.hld-testimonial-card) > .wp-block-column {
		flex-basis: 100% !important;
		max-width: 100% !important;
	}
}

/* Section-header intro/lead on mobile: drop the 80% centred constraint so it
   runs full width instead of a padded, narrow centred block. Applies to both
   "Unsere Branchen" and "Referenzen" (feedback). */
@media (max-width: 768px) {
	.hld-section-header > * {
		max-width: 100% !important;
	}
}

.hld-testimonial-author {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hld-testimonial-author strong {
	font-size: 18px;
	font-weight: 700;
	color: var(--hld-black);
}

.hld-testimonial-author span {
	font-size: 16px;
	color: var(--hld-black);
}

/* ==========================================================================
   FOOTER — Figma: 1440px, padding 60px 128px 40px 130px
   ========================================================================== */
.hld-footer {
	background: var(--hld-navy);
	color: var(--hld-white);
	padding: 60px var(--hld-pad) 40px;
}

.hld-footer-inner {
	display: flex;
	flex-direction: column;
	gap: 0;
	max-width: 1182px;
	margin: 0 auto;
}

/* Columns row */
.hld-footer-cols {
	display: flex;
	gap: 20px;
}

/* Col 1: Logo */
.hld-footer-brand {
	flex: 0 0 180px;
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.hld-footer-logo {
	height: 40px;
	width: 117px;
	filter: brightness(0) invert(1);
	display: block;
}

.hld-footer-tagline {
	font-size: 14px;
	font-weight: 500;
	line-height: 18px;
	color: var(--hld-white);
	margin: 0;
}

/* Col 2: Address — starts at ~300px from left */
.hld-footer-address {
	flex: 0 0 280px;
	margin-left: 100px;
}

/* Col 3: Links */
.hld-footer-links-col {
	flex: 0 0 181px;
}

/* Col 4: Links right — no heading, offset for alignment */
.hld-footer-links-right {
	flex: 0 0 181px;
	padding-top: 34px;
}

/* Col 5: Cleantex */
.hld-footer-cleantex {
	flex: 0 0 182px;
}

/* Shared col styles */
.hld-footer-col h5 {
	font-size: 18px;
	font-weight: 700;
	color: var(--hld-white);
	margin: 0 0 10px;
	line-height: 24px;
}

.hld-footer-col p {
	font-size: 14px;
	line-height: 20px;
	color: var(--hld-white);
	margin: 0 0 5px;
}

.hld-footer-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.hld-footer-col ul li {
	margin-bottom: 5px;
}

.hld-footer-col a {
	font-size: 14px;
	color: var(--hld-white);
	text-decoration: none;
	line-height: 20px;
	transition: opacity var(--hld-ease);
}
.hld-footer-col a:hover { opacity: 1; text-decoration: underline; }

/* Footer button — white bg, dark text, always readable (high specificity) */
.hld-footer .hld-btn-footer,
.hld-footer-col a.hld-btn-footer,
a.hld-btn-footer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 140px;
	height: 38px;
	padding: 8px 20px;
	font-size: 16px;
	font-weight: 500;
	font-family: inherit;
	text-decoration: none;
	background: var(--hld-white) !important;
	color: var(--hld-navy) !important;
	border: none;
	border-radius: 19px 0px 19px 0px;
	cursor: pointer;
	margin-top: 25px;
	transition: all var(--hld-ease);
	line-height: 22px;
	opacity: 1 !important;
}
.hld-footer .hld-btn-footer:hover,
a.hld-btn-footer:hover {
	background: var(--hld-mint) !important;
	color: var(--hld-navy) !important;
	opacity: 1 !important;
}

/* Divider */
.hld-footer-divider {
	border: none;
	height: 1px;
	background: var(--hld-light-blue);
	margin: 50px 0 0;
	width: 100%;
}

/* Bottom row — Impressum aligned under Links column (left: 300px from footer start) */
.hld-footer-bottom {
	display: flex;
	align-items: center;
	padding-top: 16px;
	gap: 0;
}

.hld-footer-copy {
	font-size: 14px;
	color: var(--hld-light-blue);
	flex: 0 0 300px;
}

.hld-footer-legal {
	display: flex;
	gap: 50px;
}

.hld-footer-legal a {
	font-size: 14px;
	color: var(--hld-light-blue);
	text-decoration: none;
	line-height: 20px;
	transition: opacity var(--hld-ease);
}
.hld-footer-legal a:hover { opacity: 1; text-decoration: underline; }

/* ==========================================================================
   KONTAKT MAP
   ========================================================================== */
.hld-map-container {
	position: relative;
	overflow: hidden;
}

.hld-map-image {
	margin: 0;
}

.hld-map-image img {
	width: 100%;
	height: 500px;
	object-fit: cover;
	display: block;
}

/* Map pin — positioned over the map */
.hld-map-pin {
	position: absolute;
	bottom: 50%;
	right: 32%;
	z-index: 5;
}

.hld-map-pin-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var(--hld-white);
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	transition: transform var(--hld-ease);
}

.hld-map-pin-link:hover {
	transform: scale(1.1);
}

.hld-map-pin-link img {
	width: 28px;
	height: 28px;
}

/* Tooltip — shows on pin hover */
.hld-map-tooltip {
	display: none;
	position: absolute;
	bottom: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--hld-white);
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	padding: 20px;
	min-width: 240px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--hld-navy);
}

.hld-map-tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 8px solid transparent;
	border-top-color: var(--hld-white);
}

.hld-map-pin:hover .hld-map-tooltip {
	display: block;
}

.hld-map-tooltip strong {
	font-weight: 700;
	display: block;
	margin-bottom: 5px;
}

.hld-map-tooltip a {
	color: var(--hld-navy);
	text-decoration: none;
}

.hld-map-tooltip a:hover {
	color: var(--hld-blue);
}

.hld-map-route {
	display: inline-block;
	margin-top: 10px;
	font-weight: 700;
	color: var(--hld-blue) !important;
	text-decoration: underline !important;
}

/* ==========================================================================
   NINJA FORMS — match Figma design
   ========================================================================== */
.nf-form-cont .nf-form-content {
	padding: 0;
}

.nf-form-cont .nf-before-form-content {
	display: none;
}

/* Tighter spacing between form fields */
.nf-form-cont .nf-field-container {
	margin-bottom: 8px;
}

.nf-form-cont .nf-form-content label {
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	color: #9F9F9F;
	margin-bottom: 4px;
}

/* Tighten the label → input gap (kill Ninja Forms' default label spacing) */
.nf-form-cont .nf-field-label {
	margin-bottom: 2px;
}

/* Required asterisk: grey like the label, not the default red */
.nf-form-cont .ninja-forms-req-symbol,
.nf-form-cont .nf-form-content label .required {
	color: #9F9F9F !important;
}

.nf-form-cont .nf-form-content input[type="text"],
.nf-form-cont .nf-form-content input[type="email"],
.nf-form-cont .nf-form-content textarea {
	font-family: inherit;
	font-size: 16px;
	color: var(--hld-black);
	border: 2px solid #C4C4C4 !important;
	border-radius: 0;
	padding: 10px 14px;
	background: transparent;
	box-sizing: border-box;
	transition: border-color var(--hld-ease), border-width var(--hld-ease);
}

/* On click / typing: green border, one pixel thicker than the resting border
   (box-sizing keeps the field from shifting). */
.nf-form-cont .nf-form-content input[type="text"]:focus,
.nf-form-cont .nf-form-content input[type="email"]:focus,
.nf-form-cont .nf-form-content textarea:focus {
	border: 3px solid var(--hld-mint) !important;
	outline: none;
}

.nf-form-cont .nf-form-content textarea {
	min-height: 150px;
	resize: vertical;
}

/* Radio buttons inline */
.nf-form-cont .listradio-wrap ul {
	display: flex;
	gap: 20px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.nf-form-cont .listradio-wrap li {
	display: flex;
	align-items: center;
	gap: 4px;
}

.nf-form-cont .listradio-wrap input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	width: 18px !important;
	height: 18px !important;
	margin: 0;
	border: 1.5px solid #9F9F9F;
	border-radius: 50%;
	background: #fff;
	position: relative;
	cursor: pointer;
	flex: 0 0 auto;
	transition: border-color var(--hld-ease);
}

.nf-form-cont .listradio-wrap input[type="radio"]:checked {
	border-color: var(--hld-mint);
}

.nf-form-cont .listradio-wrap input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--hld-mint);
	transform: translate(-50%, -50%);
}

/* Anrede option labels — black text (per feedback), tight to the radio */
.nf-form-cont .listradio-wrap label {
	color: var(--hld-black);
	font-size: 16px;
	margin: 0;
	padding: 0;
}

/* Submit button */
.nf-form-cont input[type="submit"],
.nf-form-cont .nf-form-content input[type="button"] {
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	background: var(--hld-navy);
	color: var(--hld-white);
	border: none;
	border-radius: 20px 0px 20px 0px;
	padding: 8px 24px;
	min-width: 140px;
	cursor: pointer;
	transition: background var(--hld-ease);
	margin-top: 32px;
}

.nf-form-cont input[type="submit"]:hover,
.nf-form-cont .nf-form-content input[type="button"]:hover {
	background: var(--hld-mint);
	color: var(--hld-navy);
}

/* Error styling */
.nf-form-cont .nf-error-msg {
	color: #c0392b;
	font-size: 13px;
}

.nf-form-cont .nf-error .ninja-forms-field {
	border-color: #c0392b;
}

/* Kontakt address — company name/street/city link not underlined (matches design) */
a[href*="/maps/place/"] {
	text-decoration: none !important;
}

/* Kontakt section titles — reduced bottom margin */
.wp-block-columns:has(.nf-form-cont) h2.wp-block-heading {
	margin-bottom: 0 !important;
}

.wp-block-columns:has(.nf-form-cont) h3.wp-block-heading {
	margin-bottom: 0.5em;
}

/* Tighten the gap between "Kontakt aufnehmen" and the form:
   kill the 24px block-gap on the column's children, then let the
   spacer alone define the gap. */
.wp-block-column:has(.nf-form-cont) > * {
	margin-top: 0 !important;
}

.wp-block-column:has(.nf-form-cont) .wp-block-spacer {
	height: 20px !important;
}

/* ==========================================================================
   INNER PAGE HEADER (green bg, rounded bottom-right)
   ========================================================================== */
.hld-inner-header {
	position: relative;
}

/* Inner-header title/lead column: the block markup caps it at contentSize 50%,
   which left the right half empty on desktop and a cramped column on mobile.
   Widen it (leaving room for the rounded bottom-right corner), and let it use
   the full width once the layout stacks. Overrides WP's low-specificity
   .wp-container-…> :where(…){max-width:50%}. */
.hld-inner-header .wp-block-group.is-layout-constrained > * {
	max-width: 65%;
}
@media (max-width: 1024px) {
	.hld-inner-header .wp-block-group.is-layout-constrained > * {
		max-width: 100%;
	}
}

/* With fluid typography off (exact Figma px on desktop), the large inline
   headings need explicit smaller sizes on tablet/mobile so they don't overflow
   the viewport. (Hero H1 = 59px, inner-page H1 = 60px at desktop.) */
@media (max-width: 1024px) {
	.hld-inner-header h1 { font-size: 46px !important; }
	.hld-hero-slider .wp-block-cover__inner-container h1 { font-size: 42px !important; }
}
@media (max-width: 600px) {
	.hld-inner-header h1 { font-size: 34px !important; }
	.hld-hero-slider .wp-block-cover__inner-container h1 { font-size: 30px !important; }
	/* Narrow the hero headline block on phones so it wraps sooner instead of
	   running edge-to-edge (feedback). !important beats the ≤1024px 680px cap. */
	.hld-hero-slider .wp-block-cover__inner-container { max-width: 300px !important; }
}
/* Keep the hero headline block capped on desktop too — it was only capped
   ≤1024px, so at ~1025–1200px it ran nearly full width (too wide, feedback). */
@media (min-width: 1025px) {
	.hld-hero-slider .wp-block-cover__inner-container { max-width: 680px; }
}

/* ── Harmonised photo corner radius ──────────────────────────────────────────
   The design shipped photos at 100/160/190/200px — inconsistent. Bring the
   outliers (branch 160, shop 190, bleed 200) into line with the common 100px so
   every image + product card shares ONE radius per device. (Heroes keep their
   own larger sweep.) */
.hld-branch-image,
.hld-shop-img { border-bottom-right-radius: 100px !important; }
.hld-text-image-bleed-right .hld-bleed-image { border-bottom-left-radius: 100px !important; }
.hld-text-image-bleed-left .hld-bleed-image  { border-bottom-right-radius: 100px !important; }

/* Mobile: shrink the oversized hero bottom-corner radius (300px etc.) to a
   consistent 100px on every hero-type container (feedback). */
@media (max-width: 768px) {
	.hld-hero-slider { border-radius: 0 0 100px 0 !important; }
	.hld-branch-hero.wp-block-cover,
	.hld-product-header.wp-block-cover {
		border-bottom-right-radius: 100px !important;
		/* Were 600px tall — much taller than the slider (~400px), so the same
		   100px corner read smaller/off. Match the slider's height so it looks
		   consistent. */
		min-height: 460px !important;
	}
	.hld-inner-header { border-bottom-right-radius: 100px !important; }
	.hld-cleantex-cover { border-bottom-left-radius: 100px !important; }

	/* Every photo + product card → one proportionate 60px corner on phones. */
	.hld-branch-image,
	.hld-product-img,
	.hld-product-card.wp-block-cover,
	.hld-shop-img,
	.hld-uns-image,
	.hld-map-container {
		border-bottom-right-radius: 60px !important;
	}
	.hld-service-image {
		border-bottom-left-radius: 60px !important;
		border-bottom-right-radius: 60px !important;
	}
	.hld-text-image-bleed-right .hld-bleed-image { border-bottom-left-radius: 60px !important; }
	.hld-text-image-bleed-left .hld-bleed-image  { border-bottom-right-radius: 60px !important; }
}

/* ── Mobile hero/section polish ──────────────────────────────────────────── */
@media (max-width: 768px) {
	/* Hero + inner-page-header title/lead line up with the header logo (~20px),
	   instead of drifting right on the wider 9vw content gutter. The cover's own
	   root-padding is zeroed so only the inner container's 20px inset remains. */
	.hld-branch-hero.wp-block-cover,
	.hld-product-header.wp-block-cover {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.hld-branch-hero .wp-block-cover__inner-container,
	.hld-product-header .wp-block-cover__inner-container {
		padding-left: 20px !important;
	}
	.hld-branch-hero .wp-block-cover__inner-container .wp-block-group,
	.hld-product-header .wp-block-cover__inner-container .wp-block-group {
		padding-left: 0 !important;
	}
	.hld-branch-hero .wp-block-cover__inner-container .wp-block-group > *,
	.hld-product-header .wp-block-cover__inner-container .wp-block-group > * {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.hld-inner-header {
		padding-left: 20px !important;
	}

	/* Dienstleistungen: the 50px spacer that offsets the service text beside its
	   image on desktop just leaves an empty gap once the columns stack — hide it
	   so the heading sits right under the breadcrumb. */
	.wp-block-columns:has(.hld-service-image) .wp-block-spacer[style*="height:50px"] {
		display: none !important;
	}

	/* Zertifizierungen: intro text under the title runs full width (was capped
	   at 60% centred), and more breathing room between the certificate cards. */
	.wp-block-group:has(~ .wp-block-columns .hld-cert-card) > * {
		max-width: 100% !important;
	}
	.wp-block-columns:has(.hld-cert-card) {
		row-gap: 50px !important;
	}
	/* More space between the "Unsere Branchen" cards (~40px more than the 30px
	   grid gap), matching the certs. */
	.hld-grid-3:has(.hld-branch-card) {
		row-gap: 70px !important;
	}
}

/* Mobile: halve the large vertical section paddings so pages aren't so gappy on
   phones (feedback). Each big inline value is matched by attribute and halved,
   so proportions are preserved; small paddings and card padding are untouched. */
@media (max-width: 768px) {
	[style*="padding-top:180px"]    { padding-top: 90px !important; }
	[style*="padding-top:150px"]    { padding-top: 75px !important; }
	[style*="padding-top:120px"]    { padding-top: 60px !important; }
	[style*="padding-top:100px"]    { padding-top: 50px !important; }
	[style*="padding-top:80px"]     { padding-top: 40px !important; }
	[style*="padding-top:60px"]     { padding-top: 30px !important; }
	[style*="padding-bottom:180px"] { padding-bottom: 90px !important; }
	[style*="padding-bottom:150px"] { padding-bottom: 75px !important; }
	[style*="padding-bottom:120px"] { padding-bottom: 60px !important; }
	[style*="padding-bottom:100px"] { padding-bottom: 50px !important; }
	[style*="padding-bottom:80px"]  { padding-bottom: 40px !important; }
	[style*="padding-bottom:60px"]  { padding-bottom: 30px !important; }
}

/* [M] Inner-header decorative rounded corner (207px in markup) is oversized on
   small screens — scale it down so it doesn't eat into the content. */
@media (max-width: 1024px) {
	.hld-inner-header { border-bottom-right-radius: 120px !important; }
}
@media (max-width: 600px) {
	.hld-inner-header { border-bottom-right-radius: 70px !important; }
}

/* [G] Section header row (title/lead + "Ganzes Sortiment ansehen" link) is a
   no-wrap flex row on desktop; stack it once space gets tight so the link no
   longer overlaps the lead. */
@media (max-width: 1024px) {
	.wp-block-group.is-layout-flex:has(> .hld-content-link) {
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
	}
}

/* Service section images — fixed height, object-fit */
.hld-service-image {
	margin: 0;
	overflow: hidden;
}

.hld-service-image img {
	width: 100%;
	height: 507px;
	object-fit: cover;
	display: block;
}

/* [Dienstleistungen] Service image-text rows: the image column was only 33%
   with a 200px gap (big empty band between image and text). Widen the image to
   ~42% and tighten the gap. Desktop/tablet only — below 782px WP stacks the
   columns and we must not pin their widths (that would break the stack). */
@media (min-width: 782px) {
	.wp-block-columns:has(.hld-service-image) {
		column-gap: 80px !important;
		gap: 80px !important;
	}
	.wp-block-columns:has(.hld-service-image) > .wp-block-column:has(.hld-service-image) {
		flex-basis: 42% !important;
		max-width: 42%;
	}
	.wp-block-columns:has(.hld-service-image) > .wp-block-column:not(:has(.hld-service-image)) {
		flex-basis: 58% !important;
		max-width: 58%;
	}
}

/* Bleed images in text-image sections — fill the column, bleed to the edge */
.hld-bleed-image {
	margin: 0;
	overflow: hidden;
}

.hld-bleed-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: inherit;
}

.hld-text-image-bleed-right .hld-bleed-image,
.hld-text-image-bleed-left .hld-bleed-image {
	height: 100%;
}

.hld-text-image-bleed-right .hld-bleed-image img,
.hld-text-image-bleed-left .hld-bleed-image img {
	min-height: 450px;
}


/* ==========================================================================
   PRODUCT PAGE
   ========================================================================== */

/* Product header — image bg with gradient */
.hld-product-header.wp-block-cover {
	position: relative;
}

/* Product filter (anchor) bar — sticks directly below the floating main
   header instead of behind it.
   --hld-anchor-top is set by initHeaderScroll() in main.js: it equals the
   header's bottom edge while the header is visible, and 0 once the header
   hides on scroll-down. Transitioning `top` keeps the bar in sync with the
   header's slide animation.
   z-index stays below the header (1000) so the header always wins; the
   clip-path keeps this bar's shadow downward-only, so it never clashes with
   the header's shadow sitting above it. */
.hld-product-filter-bar {
	clip-path: inset(0 0 -20px 0);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
	position: sticky;
	top: var(--hld-anchor-top, 0px);
	z-index: 50;
	background: var(--hld-white);
	transition: top 0.35s ease;
}

/* Anchor offset — when clicking a tab, stop just below the sticky header+filter bar
   instead of behind it. --hld-sticky-total is set by initProductTabs() in main.js. */
.hld-product-category {
	scroll-margin-top: var(--hld-sticky-total, 230px);
}

/* Category tabs — pill buttons with HLD styling */
div.hld-product-tabs {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
}

div.hld-product-tabs .hld-tab,
.hld-product-tabs > a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 10px 15px !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	color: var(--hld-navy) !important;
	text-decoration: none !important;
	transition: background-color var(--hld-ease), color var(--hld-ease) !important;
	white-space: nowrap !important;
	line-height: 22px !important;
	border: none !important;
	border-radius: 21px 0px 21px 0px !important;
	background: var(--hld-white) !important;
	height: 42px;
	cursor: pointer;
}

div.hld-product-tabs .hld-tab a {
	color: inherit !important;
	text-decoration: none !important;
}

/* Tab hover — mint pill */
div.hld-product-tabs .hld-tab:hover,
.hld-product-tabs > a:hover {
	background: var(--hld-mint) !important;
	color: var(--hld-navy) !important;
	border-radius: 21px 0px 21px 0px !important;
}

/* Tab active/selected — navy pill */
div.hld-product-tabs .hld-tab.active,
.hld-product-tabs > a.active {
	background: var(--hld-navy) !important;
	color: var(--hld-white) !important;
	border-radius: 21px 0px 21px 0px !important;
}

/* Full-width wrapper for tabs */
.hld-product-tabs-wrapper {
	padding: 0 0 30px;
}

.hld-product-tabs-inner {
	padding: 0 var(--hld-pad);
}

/* Mobile: the sticky category filter bar was eating ~half the screen (7 tabs at
   16px wrapping into tall rows). Shrink the text, pills and bar padding so it
   stays compact. */
@media (max-width: 768px) {
	.hld-product-filter-bar {
		padding-top: 12px !important;
		padding-bottom: 12px !important;
	}
	div.hld-product-tabs {
		gap: 6px !important;
	}
	div.hld-product-tabs .hld-tab,
	.hld-product-tabs > a,
	div.hld-product-tabs .hld-tab:hover,
	div.hld-product-tabs .hld-tab.active,
	.hld-product-tabs > a.active {
		font-size: 12.5px !important;
		padding: 5px 11px !important;
		height: auto !important;
		line-height: 18px !important;
		border-radius: 14px 0 14px 0 !important;
	}
}

/* Advisor card (blue box, rounded) */
.hld-advisor-card {
	margin-top: 0;
}

.hld-advisor-card a {
	color: var(--hld-white) !important;
}

/* Berater kontaktieren — email link turns green on hover */
.hld-advisor-email a {
	color: var(--hld-white);
	transition: color var(--hld-ease);
}
.hld-advisor-email a:hover { color: var(--hld-mint); }

/* Berater kontaktieren — standardised vertical spacing across all advisor banners */
.hld-advisor-info > .wp-block-spacer { display: none !important; }
.hld-advisor-info > h2 + p { margin-top: 22px !important; }      /* space after title */
.hld-advisor-info > h4 { margin-top: 45px !important; }           /* space before name */
.hld-advisor-info > h4 + p { margin-top: 14px !important; }       /* space after name */
.hld-advisor-info > h4 + p + p { margin-top: 2px !important; }    /* Funktion → email */

/* Product images in gallery */
.hld-product-img {
	margin: 0;
	overflow: hidden;
}

.hld-product-img img {
	width: 100%;
	height: auto;
	aspect-ratio: var(--hld-product-ratio, 280 / 373);
	object-fit: cover;
	display: block;
}

/* Product gallery wrapper — relative for arrow positioning */
.hld-product-gallery {
	position: relative;
}

/* Product images row — horizontal carousel */
.hld-product-images-row.wp-block-columns {
	flex-wrap: nowrap !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	gap: 20px;
}
.hld-product-images-row.wp-block-columns::-webkit-scrollbar { display: none; }

.hld-product-images-row > .wp-block-column {
	flex: 0 0 calc(25% - 15px) !important;
	max-width: calc(25% - 15px);
	scroll-snap-align: start;
}

/* [C] Product gallery: 4-up desktop, 2-up on tablet (feedback "2 nebeneinander"),
   1-up on phones (handled by the ≤768 rule above). The Über-uns 1-up slider
   keeps its own full-width column. */
@media (min-width: 601px) and (max-width: 1024px) {
	/* .wp-block-columns in the selector matches WP core's ≤781px stacking
	   specificity (0,3,0) so our 2-up wins in that band. */
	.hld-product-images-row.wp-block-columns > .wp-block-column {
		flex: 0 0 calc(50% - 10px) !important;
		min-width: 0 !important;
		max-width: calc(50% - 10px) !important;
	}
	.hld-ueber-gallery .hld-product-images-row.wp-block-columns > .wp-block-column {
		flex: 0 0 100% !important;
		min-width: 100% !important;
		max-width: 100% !important;
	}
}

/* Product carousel arrows (injected by JS) */
.hld-gallery-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: var(--hld-navy);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: background var(--hld-ease);
}
.hld-gallery-nav:hover { background: var(--hld-mint); }
.hld-gallery-nav:hover svg path { stroke: var(--hld-navy); }
.hld-gallery-nav--prev { left: -20px; }
.hld-gallery-nav--next { right: -20px; }

@media (min-width: 1024px) {
	/* Park the arrows out in the side gutter, but never further out than the
	   gutter actually is — otherwise (e.g. 1025–1280px, where the root gutter
	   is only ~9vw) the outer arrow lands past the viewport edge and gets
	   clipped by body{overflow-x:hidden}. (50vw - 50%) is the live gutter width
	   for a centered, content-width gallery; cap the 175px design outset to it
	   (minus a 12px cushion) so arrows stay on-screen at every width. */
	.hld-gallery-nav--prev { left: calc(min(175px, 50vw - 50% - 12px) * -1); }
	.hld-gallery-nav--next { right: calc(min(175px, 50vw - 50% - 12px) * -1); }

	.hld-product-gallery {
		overflow: visible;
	}
}

/* Blue contact banner — advisor image + text spacing */
.has-primary-blue-background-color.is-layout-flex {
	gap: 80px;
}

.has-primary-blue-background-color .wp-block-image.is-resized {
	flex-shrink: 0;
	overflow: hidden;
}

/* Remove WP's generated margin between items in the contact text group */
.has-primary-blue-background-color .wp-block-group > * + * {
	margin-block-start: 0;
}

.has-primary-blue-background-color .wp-block-image.is-resized img {
	width: 280px;
	height: 280px;
	object-fit: cover;
	display: block;
}

/* [J] Advisor / contact banner: the image + text sit in a flex row on desktop.
   On tablet/mobile the text was overflowing the blue box, so stack them and
   let the text use the full width. Keep the image square but responsive so it
   never sticks out of the box on narrow phones. */
@media (max-width: 1024px) {
	.has-primary-blue-background-color.is-layout-flex {
		flex-direction: column;
		align-items: stretch;
		gap: 30px;
		/* Box ships with 100px inline side padding — far too much once stacked
		   (it squeezed the text to one word per line). */
		padding-left: 40px !important;
		padding-right: 40px !important;
	}
	/* Text group fills the box width and wraps inside it (no overflow). */
	.has-primary-blue-background-color.is-layout-flex > .wp-block-group {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}
}
@media (max-width: 600px) {
	.has-primary-blue-background-color.is-layout-flex {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
	.has-primary-blue-background-color .wp-block-image.is-resized img {
		width: 100%;
		max-width: 280px;
		height: auto;
		aspect-ratio: 1 / 1;
	}
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */
.hld-breadcrumbs {
	font-size: 14px;
	font-weight: 400;
}

.hld-breadcrumb-link {
	color: #9F9F9F;
	text-decoration: none;
	transition: color var(--hld-ease);
}

.hld-breadcrumb-link:hover {
	color: var(--hld-navy);
	text-decoration: underline;
}

.hld-breadcrumb-sep {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	margin: 0 6px;
}

.hld-breadcrumb-current {
	color: #001E3C;
	text-decoration: underline;
}

/* ==========================================================================
   FAQ PAGE
   ========================================================================== */

/* Section layout: category title (left 280px) + questions (right flex) */
.hld-faq-section {
	gap: 20px !important;
	align-items: flex-start !important;
}

.hld-faq-section > .wp-block-group:first-child {
	flex: 0 0 280px;
	max-width: 280px;
}

.hld-faq-questions {
	flex: 1;
}

/* Individual FAQ item (native Details block) */
.hld-faq-item {
	border-top: 1px solid #9F9F9F;
	padding: 15px 0 20px;
}

.hld-faq-item:last-child {
	border-bottom: 1px solid #9F9F9F;
}

.hld-faq-item summary {
	cursor: pointer;
	font-weight: 700;
	font-size: 18px;
	line-height: 24px;
	color: #000000;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 25px;
}

.hld-faq-item summary::-webkit-details-marker { display: none; }

.hld-faq-item summary::after {
	content: "";
	width: 24px;
	height: 24px;
	min-width: 24px;
	border: 1.5px solid #000000;
	border-radius: 50%;
	background: url("data:image/svg+xml,%3Csvg width='8' height='10' viewBox='-0.25 -0.25 8 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.75 8.75L0.75 5.41667M3.75 8.75L6.75 5.41667M3.75 8.75L3.75 4.75L3.75 0.749999' stroke='%23001E3C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
	flex-shrink: 0;
	transition: transform var(--hld-ease), background-color var(--hld-ease), border-color var(--hld-ease);
}

.hld-faq-item[open] summary::after {
	transform: rotate(180deg);
}

/* Arrow circle fills on hover */
.hld-faq-item summary:hover::after {
	background-color: var(--hld-mint);
	border-color: var(--hld-mint);
}

.hld-faq-item p {
	font-size: 16px;
	line-height: 22px;
	color: #000000;
	margin-top: 5px;
	padding-right: 50px;
}

/* Responsive */
@media (max-width: 768px) {
	.hld-faq-section {
		flex-direction: column !important;
		/* Stretch children to full width when stacked — otherwise flex-start
		   sizes each section's question column to its own content, so sections
		   end up different widths (open/long sections wider than short ones). */
		align-items: stretch !important;
	}

	.hld-faq-section > .wp-block-group:first-child {
		flex: none;
		max-width: none;
	}

	/* Questions column always full width when stacked. */
	.hld-faq-questions {
		width: 100%;
	}
}

/* ==========================================================================
   HAMBURGER + MOBILE MENU (hidden on desktop)
   ========================================================================== */

/* Hamburger button — hidden on desktop */
.hld-hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 28px;
	height: 28px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	margin-left: auto;
}

.hld-hamburger span {
	display: block;
	width: 28px;
	height: 2px;
	background: var(--hld-navy);
	border-radius: 2px;
	transition: all 0.3s ease;
	transform-origin: center;
}

/* Hamburger X state */
.hld-hamburger.active span:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}
.hld-hamburger.active span:nth-child(2) {
	opacity: 0;
}
.hld-hamburger.active span:nth-child(3) {
	transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile menu — hidden by default, inside header-bar (inherits white bg) */
.hld-mobile-menu {
	display: none;
	flex-direction: column;
	padding: 15px 0 0;
	border-top: 1px solid rgba(0, 30, 60, 0.1);
	margin-top: 10px;
}

.hld-mobile-menu.active {
	display: flex;
}

/* Mobile primary nav */
.hld-mobile-nav {
	display: flex;
	flex-direction: column;
}

.hld-mobile-nav > a {
	font-size: 18px;
	font-weight: 500;
	color: var(--hld-navy);
	text-decoration: none;
	padding: 12px 0;
	transition: color var(--hld-ease);
}
.hld-mobile-nav > a:hover { color: var(--hld-blue); }

/* Mobile dropdown */
.hld-mobile-dropdown {}

.hld-mobile-dropdown-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	font-size: 18px;
	font-weight: 500;
	color: var(--hld-navy);
	background: none;
	border: none;
	cursor: pointer;
	padding: 12px 0;
	font-family: inherit;
	transition: color var(--hld-ease);
}
.hld-mobile-dropdown-toggle:hover { color: var(--hld-blue); }

.hld-mobile-dropdown-toggle svg {
	transition: transform 0.3s ease;
}

.hld-mobile-dropdown.open .hld-mobile-dropdown-toggle svg {
	transform: rotate(180deg);
}

.hld-mobile-submenu {
	display: none;
	flex-direction: column;
	padding: 0 0 10px 20px;
}

.hld-mobile-dropdown.open .hld-mobile-submenu {
	display: flex;
}

.hld-mobile-submenu a {
	font-size: 16px;
	font-weight: 400;
	color: var(--hld-navy);
	text-decoration: none;
	padding: 8px 0;
	transition: color var(--hld-ease);
}
.hld-mobile-submenu a:hover { color: var(--hld-blue); }

/* Mobile secondary nav */
.hld-mobile-secondary {
	display: flex;
	flex-direction: column;
	border-top: 1px solid rgba(0, 30, 60, 0.1);
	margin-top: 10px;
	padding-top: 10px;
}

.hld-mobile-secondary a {
	font-size: 14px;
	font-weight: 500;
	color: var(--hld-navy);
	text-decoration: none;
	padding: 8px 0;
	transition: color var(--hld-ease);
}
.hld-mobile-secondary a:hover { color: var(--hld-blue); }

/* Mobile bottom: search + language */
.hld-mobile-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	border-top: 1px solid rgba(0, 30, 60, 0.1);
	margin-top: 10px;
	padding-top: 15px;
	padding-bottom: 5px;
}

.hld-mobile-search {
	flex: 1;
	max-width: 250px;
}

.hld-mobile-search form {
	display: flex;
	align-items: center;
	border-bottom: 2px solid var(--hld-navy);
	padding-bottom: 4px;
}

.hld-mobile-search input[type="search"] {
	flex: 1;
	border: none;
	outline: none;
	font-size: 14px;
	font-family: inherit;
	padding: 6px 0;
	background: transparent;
}

.hld-mobile-search input[type="search"]::placeholder {
	color: #9F9F9F;
}

.hld-mobile-search button[type="submit"] {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	display: flex;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* Bleed sections — one side has padding, other bleeds to edge */
.hld-bleed-right {
	padding-left: clamp(20px, 9vw, 130px) !important;
}

.hld-bleed-left {
	padding-right: clamp(20px, 9vw, 130px) !important;
}

/* ==========================================================================
   BRANCH HERO (full-width cover image, used on Pharma etc.)
   ========================================================================== */
.hld-branch-hero.wp-block-cover,
.hld-product-header.wp-block-cover {
	position: relative;
	/* [E] Bottom-align the title/lead. Column flex packed to the end places the
	   inner container at the bottom of the cover's content box; the cover's own
	   padding-bottom (80px in markup) is the gap. Reliable regardless of height
	   (the old height:100% on the inner container didn't resolve vs min-height). */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

/* [D/E] Aufheller behind the header title/lead (bottom-left over the photo).
   White Verlauf per Figma (linear, white 100% at 13% → white 0% at 100%),
   bottom-up, so the navy heading stays legible. Same recipe as the hero. */
.hld-branch-hero.wp-block-cover::after,
.hld-product-header.wp-block-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		rgba(255, 255, 255, 0.75) 0%,
		rgba(255, 255, 255, 0.45) 35%,
		rgba(255, 255, 255, 0) 72%);
	z-index: 1;
	pointer-events: none;
}
/* Keep photo + dim below the Aufheller, and the title/lead above it. */
.hld-branch-hero .wp-block-cover__image-background,
.hld-branch-hero .wp-block-cover__background,
.hld-product-header .wp-block-cover__image-background,
.hld-product-header .wp-block-cover__background {
	z-index: 0 !important;
}

.hld-branch-hero .wp-block-cover__inner-container,
.hld-product-header .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	max-width: calc(1180px + clamp(20px, 9vw, 130px) * 2);
	margin: 0 auto;
	padding-left: clamp(20px, 9vw, 130px);
	padding-right: clamp(20px, 9vw, 130px);
	box-sizing: border-box;
	position: relative;
	z-index: 3 !important;
}

/* Tablet & down: the hero text group is pinned to contentSize:50%, which wraps
   the lead into a cramped column on narrow screens. Widen it (the Aufheller
   gradient keeps it legible over the photo). */
@media (max-width: 1024px) {
	.hld-branch-hero .wp-block-cover__inner-container .wp-block-group > *,
	.hld-product-header .wp-block-cover__inner-container .wp-block-group > * {
		max-width: 85% !important;
	}
}

/* ==========================================================================
   PROCESS ACCORDION (native wp:details blocks)
   ========================================================================== */
.hld-process-accordion {
	display: flex;
	flex-direction: column;
}

.hld-process-step.wp-block-details {
	border-bottom: 1px solid #D0D0D0;
	padding: 20px 0;
}

.hld-process-step.wp-block-details summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 32px;
	line-height: 38px;
	font-weight: 700;
	color: #B0B8C4;
	transition: color var(--hld-ease);
}

/* Keep the accordion titles from overwhelming phones */
@media (max-width: 768px) {
	.hld-process-step.wp-block-details summary {
		font-size: 22px;
		line-height: 1.3;
	}
}

.hld-process-step.wp-block-details summary::-webkit-details-marker { display: none; }

/* Number inside summary */
.hld-process-step .hld-process-nr {
	font-size: 48px;
	font-weight: 700;
	color: #B0B8C4;
	line-height: 1;
	flex-shrink: 0;
	min-width: 60px;
	transition: color var(--hld-ease);
}

/* Open state — active colors */
.hld-process-step[open] summary {
	color: var(--hld-navy);
}

.hld-process-step[open] .hld-process-nr {
	color: var(--hld-mint);
}

/* Arrow icon */
.hld-process-step summary::after {
	content: "";
	width: 28px;
	height: 28px;
	min-width: 28px;
	border: 2px solid #B0B8C4;
	border-radius: 50%;
	margin-left: auto;
	flex-shrink: 0;
	background: url("data:image/svg+xml,%3Csvg width='8' height='10' viewBox='0 0 8 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.75 8.75L0.75 5.41667M3.75 8.75L6.75 5.41667M3.75 8.75L3.75 4.75L3.75 0.749999' stroke='%23B0B8C4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
	transition: all var(--hld-ease);
}

.hld-process-step[open] summary::after {
	border-color: var(--hld-navy);
	background-image: url("data:image/svg+xml,%3Csvg width='8' height='10' viewBox='0 0 8 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.75 8.75L0.75 5.41667M3.75 8.75L6.75 5.41667M3.75 8.75L3.75 4.75L3.75 0.749999' stroke='%23001E3C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	transform: rotate(180deg);
}

/* Answer text */
.hld-process-step p {
	font-size: 16px;
	line-height: 1.375;
	color: var(--hld-navy);
	padding-left: 80px;
	margin-top: 5px;
}

/* ==========================================================================
   DOWNLOAD ROWS
   ========================================================================== */
.hld-download-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 0;
	border-bottom: 1px solid #E0E0E0;
}

/* [5] Downloads section: keeps its original contentSize 65% cap on desktop.
   On tablet/mobile only, widen to the full content width so the rows aren't
   cramped. Overrides the block's generated .wp-container-…{max-width:65%}. */
@media (max-width: 1024px) {
	.wp-block-group.is-layout-constrained:has(> .hld-download-row-wrap) > * {
		max-width: var(--wp--style--global--content-size, 1180px) !important;
	}
}

/* Download rows — drop WP's default block-gap margin between rows */
.hld-download-row-wrap {
	margin-block-start: 0 !important;
}

.hld-download-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hld-download-name {
	font-size: 16px;
	font-weight: 600;
	color: var(--hld-navy);
}

.hld-download-meta {
	font-size: 14px;
	color: #9F9F9F;
}

.hld-download-actions {
	display: flex;
	align-items: center;
	gap: 15px;
}

.hld-download-actions .hld-btn-primary {
	font-size: 14px;
}

.hld-download-size {
	font-size: 13px;
	color: #9F9F9F;
	white-space: nowrap;
}

/* Product section on blue background — white button + arrow overrides */
.has-primary-blue-background-color .wp-block-button__link.has-dark-navy-background-color {
	background: var(--hld-white) !important;
	color: var(--hld-navy) !important;
}

.has-primary-blue-background-color .wp-block-button__link.has-dark-navy-background-color:hover {
	background: var(--hld-mint) !important;
	color: var(--hld-navy) !important;
}

.has-primary-blue-background-color .hld-gallery-nav {
	background: var(--hld-white);
}

.has-primary-blue-background-color .hld-gallery-nav svg path {
	stroke: var(--hld-navy);
}

.has-primary-blue-background-color .hld-gallery-nav:hover {
	background: var(--hld-mint);
	opacity: 1;
}
.has-primary-blue-background-color .hld-gallery-nav:hover svg path {
	stroke: var(--hld-navy);
}

.has-primary-blue-background-color .hld-gallery-nav--prev {
	opacity: 1;
}

/* ==========================================================================
   CERTIFICATION CARDS
   ========================================================================== */
/* Cert image box — square, centered image */
.hld-cert-box-wrap.wp-block-group {
	aspect-ratio: 1 / 1;
}

.hld-cert-box-wrap .wp-block-image {
	margin: 0;
}

.hld-cert-card {
	/* Card fills its column — columns handle the distribution */
}

.hld-cert-img img {
	width: 100%;
	image-rendering: auto;
	height: auto;
}

/* [C] Certifications: 3-up desktop, 2-up on tablet (feedback "2 Spalten?"),
   1-up on phones. Overrides WP core's ≤781px column stacking. */
@media (min-width: 601px) and (max-width: 1024px) {
	.wp-block-columns:has(.hld-cert-card) {
		flex-wrap: wrap !important;
		justify-content: center;
	}
	.wp-block-columns:has(.hld-cert-card) > .wp-block-column {
		flex: 0 0 calc(50% - 30px) !important;
		max-width: calc(50% - 30px) !important;
	}
}

/* ==========================================================================
   PHARMA PRODUCTS CAROUSEL (blue bg section)
   ========================================================================== */
.hld-pharma-products {
	background: var(--hld-blue);
	padding: 100px 40px;
}

.hld-pharma-products-header {
	padding-left: 90px;
	max-width: 480px;
	margin-bottom: 40px;
}

.hld-pharma-products-header h2 {
	font-size: 40px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--hld-mint);
	margin: 0 0 20px;
}

.hld-pharma-products-header p {
	font-size: 16px;
	line-height: 1.375;
	color: var(--hld-white);
	margin: 0;
}

.hld-pharma-carousel {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-left: 90px;
	position: relative;
}

.hld-pharma-carousel::-webkit-scrollbar { display: none; }

.hld-pharma-slide {
	flex: 0 0 320px;
	scroll-snap-align: start;
	overflow: hidden;
	border-radius: 0 0 100px 0;
}

.hld-pharma-slide img {
	width: 100%;
	height: 373px;
	object-fit: cover;
	display: block;
}

.hld-pharma-products-footer {
	padding: 20px 0 0 90px;
}

.hld-pharma-products-footer .hld-btn-secondary {
	background: var(--hld-white);
	color: var(--hld-navy);
}

.hld-pharma-nav-wrap {
	position: relative;
}

.hld-pharma-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: var(--hld-white);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: opacity var(--hld-ease);
}

.hld-pharma-nav:hover { opacity: 0.85; }
.hld-pharma-nav--prev { left: 30px; }
.hld-pharma-nav--next { right: 30px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1280px) {
	/* --hld-pad uses clamp(), no override needed */
	.hld-header { padding-left: 20px; padding-right: 20px; }
	.hld-header-bar { width: 100%; }
	.hld-header-main { gap: 80px; }

	/* Footer: the fixed-width columns + padding exceed the viewport here, so the
	   right-hand columns were being clipped by body{overflow-x:hidden}. Let the
	   columns shrink and wrap instead of forcing the rigid desktop row. */
	.hld-footer { padding: 60px 80px 40px; }
	.hld-footer-cols { flex-wrap: wrap; gap: 30px 40px; }
	.hld-footer-brand { flex: 0 0 160px; }
	.hld-footer-address { margin-left: 0; flex: 1 1 240px; }
	.hld-footer-links-col { flex: 1 1 150px; }
	.hld-footer-links-right { flex: 1 1 150px; padding-top: 0; }
	.hld-footer-cleantex { flex: 1 1 180px; }
}

@media (max-width: 1024px) {
	/* --hld-pad uses clamp(), no override needed */

	/* Header — switch to hamburger */
	.hld-header {
		padding: 0;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		max-width: 100%;
		transform: none;
	}
	.hld-header-bar {
		padding: 15px 20px;
		min-height: auto;
		width: 100%;
		border-radius: 0;
		box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	}
	.hld-nav-secondary { display: none !important; }
	.hld-nav-primary { display: none !important; }
	.hld-hamburger { display: flex; }
	.hld-header-main { gap: 0; justify-content: space-between; }

	/* Mobile menu: full width, scrollable */
	.hld-mobile-menu {
		max-height: calc(100vh - 70px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Hero */
	.hld-hero-slider { height: 600px; border-radius: 0 0 200px 0; }
	.hld-hero-nav--prev { left: 20px; }
	.hld-hero-nav--next { right: 20px; }
	/* Headline weniger breit on tablet — narrow the text block so it wraps
	   sooner and reads as a centered headline (feedback). */
	.hld-hero-slider .wp-block-cover__inner-container { max-width: 680px; }

	.hld-branch-card .wp-block-image img { height: 300px; }

	/* Footer tablet */
	.hld-footer { padding: 40px; }
	.hld-footer-cols { flex-wrap: wrap; gap: 0; }
	.hld-footer-brand {
		flex: 0 0 100%;
		padding-bottom: 30px;
	}
	.hld-footer-address {
		margin-left: 0;
		flex: 1;
		border-top: 1px solid rgba(194, 223, 255, 0.3);
		padding: 25px 0;
	}
	.hld-footer-links-col { flex: 1; border-top: 1px solid rgba(194, 223, 255, 0.3); padding-top: 25px; }
	.hld-footer-links-right { flex: 1; border-top: 1px solid rgba(194, 223, 255, 0.3); padding-top: 25px; }
	.hld-footer-cleantex {
		flex: 0 0 100%;
		border-top: 1px solid rgba(194, 223, 255, 0.3);
		padding-top: 25px;
		margin-top: 0;
	}
	.hld-footer-copy { flex: 0 0 auto; margin-right: 40px; }

	.hld-footer-cols { flex-wrap: wrap; gap: 30px; }
	.hld-footer-brand { flex: 0 0 100%; }
}

@media (max-width: 768px) {
	/* --hld-pad uses clamp(), no override needed */

	/*
	 * Image always second on mobile:
	 * When columns stack, image columns (containing wp-block-image or wp-block-cover)
	 * get order:2 so text always appears first.
	 */
	.wp-block-columns > .wp-block-column:has(.wp-block-image),
	.wp-block-columns > .wp-block-column:has(.wp-block-cover):not(:has(.wp-block-heading)) {
		order: 2;
	}

	/* Header mobile — already handled at 1024px */

	/* Hero */
	.hld-hero-slider { height: 80vh; border-radius: 0 0 120px 0; }
	.hld-hero-text h1 { font-size: 32px; }
	/* Hide the side nav arrows on phones — they overlapped the headline; the
	   slider is swiped and the dots remain. */
	.hld-hero-nav { display: none; }

	/* [M] "Unsere Branchen" (light-green section) has 100px inline vertical
	   padding — too much on phones. Cap it. Excludes inner-page headers, which
	   need their large top padding to clear the fixed header. */
	.wp-block-group.alignfull.has-light-green-background-color:not(.hld-inner-header) {
		padding-top: 64px !important;
		padding-bottom: 64px !important;
	}

	/* Branches */
	.hld-branch-card .wp-block-image img { height: 250px; }

	/* Products */
	.hld-products-section { padding: 80px var(--hld-pad); }
	.hld-products-header { flex-direction: column; align-items: flex-start; gap: 15px; }

	/* Cleantex */
	.hld-cleantex-image { height: 300px; border-radius: 0 0 0 120px; }

	/* Shop */
	.hld-shop-section { padding: 40px var(--hld-pad); }
	.hld-shop-image { height: 250px; border-radius: 0 0 100px 0; }

	/* Referenzen */
	.hld-referenzen-section { padding: 80px var(--hld-pad); }
	.hld-referenzen-grid { grid-template-columns: 1fr; }
	.hld-testimonial-card { min-height: auto; }
	.hld-testimonial-card blockquote { font-size: 20px; line-height: 28px; }

	/* Footer mobile/tablet */
	.hld-footer { padding: 40px var(--hld-pad) 30px; }
	.hld-footer-cols { flex-direction: column; gap: 0; }
	.hld-footer-brand { flex: none; padding-bottom: 30px; }
	.hld-footer-address {
		margin-left: 0;
		flex: none;
		border-top: 1px solid rgba(194, 223, 255, 0.3);
		padding: 25px 0;
	}
	.hld-footer-links-col {
		flex: none;
		display: none;
	}
	.hld-footer-links-right {
		padding-top: 0;
		flex: none;
		display: none;
	}
	.hld-footer-cleantex {
		flex: none;
		border-top: 1px solid rgba(194, 223, 255, 0.3);
		padding-top: 25px;
	}
	.hld-footer-bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	.hld-footer-copy { margin-right: 0; }
	.hld-footer-legal { gap: 30px; }

	/* Typography scale */
	.hld-cleantex-text h2,
	.hld-shop-text h2,
	.hld-referenzen-header h2,
	.hld-products-header h2 { font-size: 32px; line-height: 38px; }

	.hld-lead,
	.hld-cleantex-text .hld-lead,
	.hld-shop-text .hld-lead { font-size: 20px; line-height: 28px; }
}

@media (max-width: 480px) {
	.hld-hero-slider { height: 80vh; border-radius: 0 0 80px 0; }
	.hld-hero-text h1 { font-size: 26px; }
	.hld-branch-card .wp-block-image img { height: 220px; }
}

.nf-before-form-content {
    display: none; 
}
#nf-label-class-field-5-0, #nf-label-class-field-5-1, #nf-label-class-field-5-2 {
	margin-left: 0;
}

/* ==========================================================================
   ÜBER UNS PAGE
   ========================================================================== */
/* Image carousel — one image at a time */
.hld-ueber-gallery .hld-product-images-row > .wp-block-column {
	flex: 0 0 100% !important;
	max-width: 100%;
}

/* Über uns images — cover-cropped. Single image + slider stay wide 16:9;
   only the 50-50 image row is squarish (580:435). */
.hld-uns-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	border-radius: inherit;
}

.wp-block-columns .hld-uns-image img {
	aspect-ratio: 580 / 435;
}

.hld-ueber-gallery .hld-uns-image img {
	aspect-ratio: 16 / 9;
}

.hld-uns-image figcaption,
.hld-uns-image .wp-block-image__caption {
	font-size: 13px;
	color: #9F9F9F;
	text-align: left;
	margin-top: 12px;
}

/* [I] Über-uns slider caption: the markup offsets it -54px (to tuck under the
   nav arrow). Feedback wants it flush with the image's left edge, so cancel
   that offset. */
.hld-ueber-gallery + p {
	margin-left: 0 !important;
}

/* Über uns lead paragraph — capped width, left-aligned with the title */
.hld-uns-lead {
	max-width: 70%;
	margin-left: 0 !important;
	margin-right: auto;
}

/* 80%-wide centred content block — switch the "Inhalt 80% (zentriert)"
   group style on/off in the editor to toggle this per section.
   80% of the CONTENT width (not the viewport), so it stays inside the container. */
.wp-block-group.is-style-hld-narrow {
	max-width: calc(var(--wp--style--global--content-size, 1180px) * 0.8);
	margin-left: auto;
	margin-right: auto;
}

/* Über uns grey placeholder block — 80vh, content centred */
.hld-uns-placeholder {
	min-height: 80vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Über uns slider dots */
.hld-ueber-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	z-index: 5;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
}

.hld-ueber-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--hld-mint);
	cursor: pointer;
	transition: background var(--hld-ease);
}

.hld-ueber-dot.active {
	background: var(--hld-navy);
}

/* Über uns slider arrows — just outside the image (caption aligns to the left one) */
.hld-ueber-gallery .hld-gallery-nav--prev {
	left: -54px;
}

.hld-ueber-gallery .hld-gallery-nav--next {
	right: -54px;
}