/**
 * Section-Builder (hzr_sections) — Darstellungs-Modifier je Section.
 *
 * Eigenstaendiges Zusatz-Stylesheet (NICHT Mos Design-CSS, NICHT editorial.css).
 * Ergaenzt die in editorial.css definierten .hzr-section-group-Basisregeln um
 * pro Section waehlbare Breite und vertikale Abstaende — damit Redakteure das
 * Seitenlayout Section fuer Section steuern koennen.
 *
 * Laedt nach editorial.css, damit Modifier bei gleicher Spezifitaet gewinnen.
 */

/* ===== Wrapper-Kontext fuer das neue Modell ===== */
.acf-page-content--sections {
	overflow: hidden;
}

.acf-page-content--sections .hzr-section-group {
	margin: 0;
}

.acf-page-content--sections .hzr-section-group-inner {
	margin-top: 0;
	margin-bottom: 0;
}

/* ===== Breite ===== */
.hzr-section-group--width-narrow .hzr-section-group-inner {
	max-width: 760px;
}

.hzr-section-group--width-full .hzr-section-group-inner {
	max-width: none;
	padding-left: 24px;
	padding-right: 24px;
}

/* ===== Vertikale Abstaende — oben ===== */
.hzr-section-group--space-top-none .hzr-section-group-inner {
	padding-top: 0;
}

.hzr-section-group--space-top-sm .hzr-section-group-inner {
	padding-top: 24px;
}

.hzr-section-group--space-top-md .hzr-section-group-inner {
	padding-top: 56px;
}

.hzr-section-group--space-top-lg .hzr-section-group-inner {
	padding-top: 96px;
}

/* ===== Vertikale Abstaende — unten ===== */
.hzr-section-group--space-bottom-none .hzr-section-group-inner {
	padding-bottom: 0;
}

.hzr-section-group--space-bottom-sm .hzr-section-group-inner {
	padding-bottom: 24px;
}

.hzr-section-group--space-bottom-md .hzr-section-group-inner {
	padding-bottom: 56px;
}

.hzr-section-group--space-bottom-lg .hzr-section-group-inner {
	padding-bottom: 96px;
}

/* ===== Hero / Banner ===== */
.hzr-hero {
	position: relative;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 60vh;
	width: 100%;
}

.hzr-hero--h-40vh { min-height: 40vh; }
.hzr-hero--h-60vh { min-height: 60vh; }
.hzr-hero--h-80vh { min-height: 80vh; }
.hzr-hero--h-100vh { min-height: 100vh; }

/* Overlay via Pseudo-Element */
.hzr-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0);
	pointer-events: none;
}

.hzr-hero--overlay-20::before { background: rgba(0, 0, 0, 0.20); }
.hzr-hero--overlay-40::before { background: rgba(0, 0, 0, 0.40); }
.hzr-hero--overlay-60::before { background: rgba(0, 0, 0, 0.60); }

.hzr-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 900px;
	padding: 64px 24px;
}

.hzr-hero--align-center .hzr-hero__inner {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.hzr-hero--align-left .hzr-hero__inner {
	margin-left: 0;
	text-align: left;
}

/* Hero: Section-Inner-Padding entfernen, Hero hat seinen eigenen Inner-Padding */
.hzr-section-group:has(.hzr-hero) .hzr-section-group-inner {
	padding: 0;
}

/* Hero als erste Section: exakt unter dem fixed Header beginnen.
 * Der Seiten-Spacer (.acf-page padding-top, functions.php) ist ein fester
 * Pixelwert und faellt je nach Viewport-Breite zu klein aus — bei Textinhalt
 * unsichtbar, bei einem vollflaechigen Hero-Bild wird aber sichtbar der obere
 * Bildrand vom Header verdeckt. Deshalb hier den gemessenen Header-Wert
 * (--hzr-header-h, gesetzt in template-parts/site-header.php) verwenden und
 * den fixen Spacer der Seite neutralisieren. */
.acf-page:has(> .acf-page-content > .hzr-section-group:first-child > .hzr-hero) {
	padding-top: 0;
}

.acf-page-content > .hzr-section-group:first-child > .hzr-hero {
	margin-top: var(--hzr-header-h, 148px);
}

/* ===== Hero-Variante "Banner": Bild unbeschnitten in Originalproportion =====
 * Kein min-height und kein background-cover — sonst schneidet der Container
 * das Motiv oben/unten ab (Live zeigt das Bild vollstaendig).
 */
.hzr-hero--banner {
	display: block;
	min-height: 0;
	background: none;
}

.hzr-hero--banner .hzr-hero-banner__image img {
	display: block;
	width: 100%;
	height: auto;
}

.hzr-hero--banner .hzr-hero__inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 40px 24px 0;
}

/* Mobil gibt editorial.css jeder Section 40px/16px Innenabstand. Beim Hero
 * schiebt das das Bild vom Header weg und rueckt es seitlich ein — der Hero
 * ist vollflaechig und bringt seine Innenabstaende selbst mit. */
@media (max-width: 768px) {
	.hzr-section-group:has(> .hzr-hero) {
		padding: 0;
	}
}

.hzr-hero__flagline {
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 12px;
}

.hzr-hero__heading {
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 600;
	color: #fff;
	margin-bottom: 16px;
	line-height: 1.15;
}

.hzr-hero__subheading {
	font-size: clamp(1rem, 2vw, 1.25rem);
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 28px;
	max-width: 660px;
}

.hzr-hero--align-center .hzr-hero__subheading {
	margin-left: auto;
	margin-right: auto;
}


/* ===== Hero Split (hero_section layout=split) =====
 * Text links, Bild rechts in Originalproportion — Live-Referenz Standort-Hero.
 */
.hzr-hero--split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 48px;
	max-width: 1320px;
	margin: 0 auto;
	padding: 56px 24px;
	min-height: 0;
}

.hzr-hero--split::before {
	content: none; /* kein Overlay im Split-Modus */
}

.hzr-hero-split__content {
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: flex-start;
	text-align: left;
}

.hzr-hero--align-center .hzr-hero-split__content {
	align-items: center;
	text-align: center;
}

.hzr-hero-split__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
}

@media (max-width: 900px) {
	.hzr-hero--split {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 40px 20px;
	}
	.hzr-hero--split .hzr-hero-split__content {
		align-items: center;
		text-align: center;
	}
}

/* ===== Content-Kacheln (feature_grid_section) =====
 * Grosses Bild + Versal-Titel, Live-Referenz "Unser Sortiment".
 */
.hzr-content-tiles {
	display: grid;
	gap: 40px;
	justify-content: center;
	margin-top: 8px;
}

.hzr-content-tiles--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hzr-content-tiles--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hzr-content-tiles--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hzr-content-tiles--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Weniger Kacheln als Spalten: zentriert mit fester Kachelbreite statt Streckung */
.hzr-content-tiles--count-1,
.hzr-content-tiles--count-2 {
	grid-template-columns: repeat(auto-fit, minmax(280px, 600px));
}

.hzr-content-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-decoration: none;
	color: inherit;
}

.hzr-content-tile__image {
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: 16px;
}

/* Einheitliches Hochformat, damit die Labels einer Reihe auf einer Linie
 * sitzen — die Produktfotos haben sehr unterschiedliche Seitenverhaeltnisse. */
.hzr-content-tile__image img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	height: auto;
	object-fit: cover;
	border-radius: 16px;
	transition: transform 0.25s ease;
}

.hzr-content-tiles {
	align-items: start;
}

a.hzr-content-tile:hover .hzr-content-tile__image img {
	transform: scale(1.015);
}

.hzr-content-tile__title {
	font-size: 26px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hzr-sec-text, var(--hzr-color-primary, #2c111d));
	text-align: center;
}

.hzr-content-tile__text {
	text-align: center;
	color: #1a1a1a;
}

@media (max-width: 900px) {
	.hzr-content-tiles,
	.hzr-content-tiles--cols-3,
	.hzr-content-tiles--cols-4,
	.hzr-content-tiles--cols-5 {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.hzr-content-tile__title {
		font-size: 21px;
	}
}

/* ===== Content-Kacheln als Slider (feature_grid_section, display=slider) =====
 * Gleiche Kacheln, aber horizontaler Scroll-Snap-Track statt Grid.
 * Live-Referenz Brautkleider-Stile-Slider: 4 Kacheln sichtbar, Tablet 3,
 * mobil 2, Pfeil-Navigation an den Seiten.
 */
.hzr-tiles-slider {
	position: relative;
}

.hzr-content-tiles--slider {
	--hzr-tiles-visible: 3;
	--hzr-tiles-gap: 40px;

	display: flex;
	/* Nicht zentrieren: bei Flex-Overflow wird der linke Ueberhang sonst
	 * unscrollbar (scrollLeft kann nicht negativ werden). */
	justify-content: flex-start;
	gap: var(--hzr-tiles-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.hzr-content-tiles--slider::-webkit-scrollbar {
	display: none;
}

.hzr-content-tiles--cols-2.hzr-content-tiles--slider { --hzr-tiles-visible: 2; }
.hzr-content-tiles--cols-4.hzr-content-tiles--slider { --hzr-tiles-visible: 4; }
.hzr-content-tiles--cols-5.hzr-content-tiles--slider { --hzr-tiles-visible: 5; }

.hzr-content-tiles--slider .hzr-content-tile {
	flex: 0 0 calc((100% - (var(--hzr-tiles-visible) - 1) * var(--hzr-tiles-gap)) / var(--hzr-tiles-visible));
	scroll-snap-align: start;
}

.hzr-tiles-slider__button {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.88);
	color: var(--hzr-color-primary, #2c111d);
	box-shadow: 0 4px 16px color-mix(in srgb, var(--hzr-color-primary, #2c111d) 16%, transparent);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.hzr-tiles-slider__button:hover,
.hzr-tiles-slider__button:focus {
	background: var(--hzr-color-primary, #2c111d);
	color: #fff;
	box-shadow: 0 7px 22px color-mix(in srgb, var(--hzr-color-primary, #2c111d) 24%, transparent);
}

.hzr-tiles-slider__button .mdi {
	font-size: 30px;
	line-height: 1;
}

.hzr-tiles-slider__button--prev { left: -14px; }
.hzr-tiles-slider__button--next { right: -14px; }

.hzr-tiles-slider__button.is-disabled {
	opacity: 0.35;
	pointer-events: none;
}

@media (max-width: 1024px) {
	.hzr-content-tiles--cols-4.hzr-content-tiles--slider,
	.hzr-content-tiles--cols-5.hzr-content-tiles--slider {
		--hzr-tiles-visible: 3;
	}
}

@media (max-width: 900px) {
	.hzr-content-tiles--slider,
	.hzr-content-tiles--cols-3.hzr-content-tiles--slider,
	.hzr-content-tiles--cols-4.hzr-content-tiles--slider,
	.hzr-content-tiles--cols-5.hzr-content-tiles--slider {
		--hzr-tiles-visible: 2;
		--hzr-tiles-gap: 20px;
	}
	.hzr-tiles-slider__button--prev { left: 4px; }
	.hzr-tiles-slider__button--next { right: 4px; }
}

/* ===== Zwei Accordions nebeneinander (wie live) =====
 * Der Renderer fasst aufeinanderfolgende Accordion-Bloecke zusammen. Live
 * stehen die 21 FAQ-Fragen als zwei Spalten zu je ~655px nebeneinander.
 */
/* Ein Band statt zwei: die Vollbreite uebernimmt der Wrapper, die einzelnen
 * Accordions werden darin zu normalen Spalten. Sonst legt jeder Block sein
 * eigenes 100vw-Band an und beide brechen aus dem Raster aus. */
.hzr-section-group .hzr-faq-columns {
	width: 100vw;
	max-width: none;
	margin: 64px calc(50% - 50vw);
	padding: 100px 24px;
	background: var(--hzr-color-primary, #2c111d);

	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
	align-items: start;
	justify-content: center;
}

.hzr-section-group .hzr-faq-columns .acf-block-faq {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	background: transparent;
}

/* Die Innen-Container der Bloecke sind auf Seitenbreite ausgelegt — in der
 * Spalte sollen sie deren Breite fuellen. */
.hzr-section-group .hzr-faq-columns .acf-block-faq .container,
.hzr-section-group .hzr-faq-columns .acf-block-faq [class*="col-"] {
	max-width: none;
	width: 100%;
	flex: 0 0 100%;
	padding-left: 0;
	padding-right: 0;
}

/* Die senkrechte Linie trennt im Einzel-Layout die Fragenliste von der Spalte
 * daneben. Zwischen zwei gleichwertigen Spalten steht sie nur im Weg. */
.hzr-section-group .hzr-faq-columns .faq-section-main {
	border-left: 0;
}

/* Jeder Block bringt seine eigene Ueberschrift "FAQ" mit — nebeneinander steht
 * sie dann zweimal da und die Seite wirkt, als haette sie zwei FAQs. Live
 * traegt das Band gar keine Ueberschrift, die Seite hat ihre H1 darueber.
 * Beide auszublenden haelt ausserdem die Spalten auf gleicher Hoehe; nur die
 * zweite zu verstecken wuerde die Fragen gegeneinander verschieben. */
.hzr-section-group .hzr-faq-columns .faq-section-headline {
	display: none;
}

@media (max-width: 900px) {
	.hzr-section-group .hzr-faq-columns {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 64px 16px;
	}
}

/* ===== Fliesstext folgt der Section-Schriftfarbe =====
 * Mos main.css setzt global `p a { color: #000 }` (und faerbt Auszeichnungen
 * im Text mit). Auf einer dunklen Section-Flaeche verschwindet das. Hier nur
 * im Section-Kontext ueberschrieben — Mos Datei bleibt unberuehrt.
 *
 * Ohne gesetzte Section-Farbe (Variante "default") bleibt es bei Schwarz, das
 * Aussehen aendert sich dort also nicht. Regeln mit Klassen-Selektor (z. B.
 * .acf-block-text a in Akzentfarbe) sind spezifischer und gewinnen weiterhin.
 */
.hzr-section-group p a,
.hzr-section-group p strong,
.hzr-section-group p span,
.hzr-section-group li a,
.hzr-section-group li strong {
	color: var(--hzr-sec-text, #000);
}

/* ===== Filter als linke Spalte (wie live) =====
 * Ab 992px haengt filter.js den Filter-Drawer in die Spalte
 * [data-listing-sidebar] und setzt .listing-filters--docked. Hier wird aus dem
 * Overlay wieder normaler Seiteninhalt. Darunter bleibt alles beim Drawer.
 */
.listing-sidebar {
	display: none;
}

@media (min-width: 992px) {
	.listing-sidebar {
		display: block;
	}

	.listing-filters--docked {
		position: static;
		z-index: auto;
		display: block;
		opacity: 1;
		visibility: visible;
		transition: none;
	}

	.listing-filters--docked .listing-filters-backdrop {
		display: none;
	}

	.listing-filters--docked .listing-filters-content {
		width: auto;
		height: auto;
		padding: 0;
		background: transparent;
		overflow: visible;
	}

	/* Wie live: eine Spalte, Kaestchen links, Anzahl rechts — keine Pillen.
	 * Das Pillen-Raster (4 Spalten) stammt vom 1000px breiten Drawer und
	 * bricht in einer 350px-Spalte unschoen um. */
	.listing-filters--docked .listing-filters-content-subgroup ul {
		display: block;
		gap: 0;
	}

	.listing-filters--docked .listing-filters-content-subgroup ul li {
		flex: none;
	}

	.listing-filters--docked .listing-filters-content-subgroup ul li a {
		background: transparent;
		border-radius: 0;
		padding: 7px 0;
		gap: 12px;
		font-size: 15px;
	}

	.listing-filters--docked .listing-filters-content-subgroup ul li a:hover,
	.listing-filters--docked .listing-filters-content-subgroup ul li a.is-active {
		background: transparent;
	}

	.listing-filters--docked .listing-filters-content-subgroup ul li a small {
		margin-left: auto;
		color: var(--hzr-color-muted, #8a7a83);
	}

	/* Kopf ("Filter anzeigen" + Schliessen) gehoert zum Drawer, nicht zur Spalte. */
	.listing-filters--docked .listing-filters-content-head {
		display: none;
	}

	.listing-filters--docked .listing-filters-content-main {
		overflow: visible;
		padding: 0;
	}

	/* Der Knopf oeffnet ein Overlay, das hier schon offen danebensteht. */
	.listing-hud-controls .toggleListingFilters {
		display: none;
	}
}

/* ===== Produktkarte: zweites Motiv beim Darueberfahren =====
 * Wie auf der Live-Seite: das erste Galeriebild blendet ueber dem
 * Beitragsbild ein. Nur wenn ein zweites Bild existiert (Klasse --hover).
 */
.product-card-image--hover {
	position: relative;
}

.product-card-image__hover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.product-card:hover .product-card-image__hover,
.product-card:focus-within .product-card-image__hover {
	opacity: 1;
}

/* Touch-Geraete haben kein Hover — dort das zweite Bild gar nicht erst laden
 * lassen bzw. ausblenden, sonst liegt es nur nutzlos ueber dem ersten. */
@media (hover: none) {
	.product-card-image__hover {
		display: none;
	}
}

/* ===== Produktkarten-Badges =====
 * Mos all.min.css bringt Grundform + roten Sale-Badge mit. Hier nur die
 * Ergaenzungen: "Neu" im Live-Ton (#cd4a7a) und der dezente Soldout-Badge.
 * Farben wie die YITH-Badges der Live-Seite (Sale #f92929 / Neu #cd4a7a).
 */
.product-card-content-badge--neu {
	background: var(--hzr-color-badge-new, #cd4a7a);
	color: #fff;
}

.product-card-content-badge--sale {
	background: var(--hzr-color-badge-sale, #f92929);
	color: #fff;
}

.product-card-content-badge--soldout {
	background: #ebe4e8;
	color: #6b5a64;
}

/* ===== Utility: echtes Schwarz als Section-Flaeche =====
 * Fuer Kampagnen wie "Black Bridal Month", die live bewusst reines Schwarz
 * nutzen statt des anthrazitfarbenen Standard-Dunkelbands. Wird per
 * CSS-Klasse an der Section gesetzt, damit dafuer keine eigene Variante
 * noetig ist.
 */
.hzr-section-group.hzr-surface-black {
	background: #000;

	--hzr-sec-text: #ffffff;
	--hzr-sec-btn-bg: #ffffff;
	--hzr-sec-btn-text: #000000;
}

/* ===== Stilwelten-/Marken-Kacheln (style_worlds) — Basisoptik =====
 * editorial.css stylt diesen Block nur unter .standort-page. Auf jeder anderen
 * Seite kam er bisher voellig ungestylt heraus (blaue Links, gestapelte
 * Vollbilder). Hier die neutrale Grundform; die Standort-Regeln bleiben
 * unangetastet und gewinnen dort weiterhin ueber ihre hoehere Spezifitaet.
 */
.acf-block-style-worlds__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 40px;
	margin: 8px auto 0;
}

.acf-block-style-worlds__item {
	display: block;
	color: var(--hzr-color-primary, #2c111d);
	text-align: center;
	text-decoration: none;
}

.acf-block-style-worlds__item:hover,
.acf-block-style-worlds__item:focus {
	color: var(--hzr-color-primary, #2c111d);
	text-decoration: none;
}

.acf-block-style-worlds__image {
	aspect-ratio: 3 / 4;
	margin: 0 0 20px;
	border-radius: 16px;
	overflow: hidden;
	background: #f8f6f5;
}

.acf-block-style-worlds__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.25s ease;
}

a.acf-block-style-worlds__item:hover .acf-block-style-worlds__img {
	transform: scale(1.015);
}

.acf-block-style-worlds__body h3 {
	margin: 0 0 8px;
	color: var(--hzr-color-primary, #2c111d);
	font-size: 26px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.25;
}

.acf-block-style-worlds__body p {
	margin: 0;
	color: #1a1a1a;
	font-size: 15px;
	line-height: 1.45;
}

@media (max-width: 900px) {
	.acf-block-style-worlds__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.acf-block-style-worlds__body h3 {
		font-size: 21px;
	}
}

/* ===== Karte + Kontakt (map_section mit content) ===== */
.hzr-map-contact {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}

.hzr-map-contact__map .acf-block-map {
	border-radius: 16px;
	overflow: hidden;
}

.hzr-map-contact__address {
	text-align: center;
}

.hzr-map-contact__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px 48px;
	margin-top: 40px;
}

.hzr-map-contact__button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 28px;
	border: 1px solid var(--hzr-color-secondary, #c94f7c);
	border-radius: 999px;
	color: var(--hzr-color-secondary, #c94f7c);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.hzr-map-contact__button:hover {
	background: var(--hzr-color-secondary, #c94f7c);
	color: #fff;
}

@media (max-width: 900px) {
	.hzr-map-contact {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* Hero-Button-Reihe (1-2 Buttons nebeneinander) */
.hzr-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
}

.hzr-hero--align-center .hzr-hero__buttons {
	justify-content: center;
}

/* ===== Produktraster (product_grid_section) ===== */
.hzr-product-grid {
	display: grid;
	gap: 28px;
	margin-top: 8px;
}
.hzr-product-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hzr-product-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hzr-product-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1200px) {
	.hzr-product-grid--cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.hzr-product-grid--cols-3,
	.hzr-product-grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.hzr-product-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ===== Sale-2026: Video-Raster (Kundenstimmen wie live) ===== */
.sale-2026-video-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: 28px;
}

.sale-2026-video {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
}

.sale-2026-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Wiederverwendeter acf-Video-Baustein fuellt die Rasterzelle. */
.sale-2026-video-grid .acf-block-video {
	margin: 0;
}

@media (max-width: 900px) {
	.sale-2026-video-grid {
		grid-template-columns: 1fr;
	}
}


/* ════════════════════════════════════════════════════════════════════
 * ABSICHERUNG (13.08.2026): Section-Farbmechanik aus editorial.css.
 *
 * editorial.css gehoert Mo und wird von uns weder editiert noch deployt.
 * Die folgenden Regeln (dunkle Baender, Section-Schriftfarben, Marker-
 * Baender an den Color-Studio-Optionen) sind Kopien unseres Stands vom
 * 12.08. — sie greifen auch dann, wenn Mo von einer aelteren Basis
 * hochlaedt, weil sections.css NACH editorial.css laedt und bei gleicher
 * Spezifitaet gewinnt. Werte identisch zu editorial.css Stand 12.08.;
 * Aenderungen an dieser Mechanik ab jetzt NUR noch hier.
 *
 * 13.08. nachmittags (Ansage Andreas: "Mos bitte"): Typo-/Abstandswerte,
 * die bei Mo abweichen, hier ENTFERNT, damit Mos editorial.css sie
 * bestimmt (Heading-Groesse, Textgroesse, Benefits-Groesse, Band-Padding).
 * Diese Absicherung haelt nur noch die FARB-Mechanik.
 * ════════════════════════════════════════════════════════════════════ */

/* Jede Variante setzt drei lokale Werte: Schrift, Buttonflaeche und Button-Schrift. Weil sie AUF der Section stehen, gelten sie ausschliesslich fuer deren Inhalt — eine Section daneben bleibt unberuehrt. Die Regeln weiter unten lesen nur noch diese drei Werte, nicht mehr die Variante. */ .hzr-section-group {
	padding: 0;
	margin: 0;
	--hzr-sec-text: var(--hzr-color-primary, #2c111d);
	--hzr-sec-btn-bg: var(--hzr-color-accent, #bd5182);
	--hzr-sec-btn-text: #fff;
}

.hzr-section-group--primary {
	background: var(--hzr-color-surface-rose, #0a0909);
	color: var(--hzr-sec-text);
	--hzr-sec-text: var(--hzr-color-surface-rose-text, #ffffff);
	--hzr-sec-btn-bg: var(--hzr-color-surface-rose-btn, #bd5182);
	--hzr-sec-btn-text: var(--hzr-color-surface-rose-btn-text, #ffffff);
}

.hzr-section-group--beige {
	background: var(--hzr-color-surface-beige, #f8f1ec);
	color: var(--hzr-sec-text);
	--hzr-sec-text: var(--hzr-color-surface-beige-text, #2c111d);
	--hzr-sec-btn-bg: var(--hzr-color-surface-beige-btn, #bd5182);
	--hzr-sec-btn-text: var(--hzr-color-surface-beige-btn-text, #ffffff);
}

.hzr-section-group--pink {
	background: var(--hzr-color-surface-pink, #bd5182);
	color: var(--hzr-sec-text);
	--hzr-sec-text: var(--hzr-color-surface-pink-text, #ffffff);
	--hzr-sec-btn-bg: var(--hzr-color-surface-pink-btn, #ffffff);
	--hzr-sec-btn-text: var(--hzr-color-surface-pink-btn-text, #bd5182);
}

.hzr-section-group--gray {
	background: var(--hzr-color-surface-gray, #e9e9e9);
	color: var(--hzr-sec-text);
	--hzr-sec-text: var(--hzr-color-surface-gray-text, #2c111d);
	--hzr-sec-btn-bg: var(--hzr-color-surface-gray-btn, #bd5182);
	--hzr-sec-btn-text: var(--hzr-color-surface-gray-btn-text, #ffffff);
}

.hzr-section-group--dark {
	background: var(--hzr-color-surface-dark, #2e2e2e);
	color: var(--hzr-sec-text);
	--hzr-sec-text: var(--hzr-color-surface-dark-text, #ffffff);
	--hzr-sec-btn-bg: var(--hzr-color-surface-dark-btn, #bd5182);
	--hzr-sec-btn-text: var(--hzr-color-surface-dark-btn-text, #ffffff);
}

.hzr-section-group-heading {
	text-align: center;
	color: var(--hzr-sec-text);
	font-weight: 600;
	margin: 0 0 32px;
	line-height: 1.3;
}

/* ===== ACF-Blöcke innerhalb einer Section-Group ===== */ .hzr-section-group .acf-block-text {
	color: var(--hzr-sec-text);
	line-height: 1.7;
	margin: 0 0 28px;
}

.hzr-section-group .acf-block-text h1, .hzr-section-group .acf-block-text h2, .hzr-section-group .acf-block-text h3, .hzr-section-group .acf-block-text h4 {
	color: var(--hzr-sec-text);
	margin: 1.6em 0 0.6em;
	font-weight: 600;
}

/* ===== Standalone-Heading (eigener Block) ===== */ .hzr-section-group .acf-block-heading {
	color: var(--hzr-sec-text);
	text-align: center;
	margin: 32px 0 16px;
	font-weight: 600;
}

.hzr-section-group .acf-block-feature-box-title {
	color: var(--hzr-sec-text, var(--hzr-color-primary, #2c111d));
	font-size: 20px;
	margin: 0 0 8px;
	font-weight: 600;
}

.hzr-section-group .acf-block-feature-box-text {
	color: var(--hzr-sec-text, var(--hzr-color-primary, #2c111d));
	font-size: 15px;
	line-height: 1.6;
}

.boho-brautkleider-page .hzr-section-group--marker-boho-sortiment {
	background: var(--hzr-color-surface-rose, #0a0909);
	--hzr-sec-text: var(--hzr-color-surface-rose-text, #ffffff);
	color: var(--hzr-sec-text);
}

.hzr-section-group--marker-logos .acf-block-gallery-slider-button {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.88);
	color: var(--hzr-sec-text, var(--hzr-color-primary, #2c111d));
	box-shadow: 0 4px 16px color-mix(in srgb,var(--hzr-color-primary,#2c111d) 16%,transparent);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.standort-page .hzr-section-group--marker-sortiment {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: var(--hzr-color-surface-rose, #0a0909);
	--hzr-sec-text: var(--hzr-color-surface-rose-text, #ffffff);
	color: var(--hzr-sec-text);
}

.standort-page .hzr-section-group--marker-reviews {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: var(--hzr-color-surface-rose, #0a0909);
	--hzr-sec-text: var(--hzr-color-surface-rose-text, #ffffff);
	color: var(--hzr-sec-text);
}

.standort-page .hzr-section-group--marker-sortiment > .hzr-section-group-inner > .acf-block-text h2 {
	margin: 0;
	color: var(--hzr-sec-text, var(--hzr-color-primary, #2c111d));
	font-size: clamp(28px, 3vw, 42px);
	line-height: 1.15;
	font-weight: 600;
}

.standort-page .hzr-section-group--marker-reviews > .hzr-section-group-inner > .acf-block-text h2 {
	margin: 0;
	color: var(--hzr-sec-text, var(--hzr-color-primary, #2c111d));
	font-size: clamp(28px, 3vw, 42px);
	line-height: 1.15;
	font-weight: 600;
}

.standort-page .hzr-section-group--marker-auswahl .hzr-section-group-inner > .acf-block-text:first-child h2 {
	margin: 0;
	color: var(--hzr-sec-text, var(--hzr-color-primary, #2c111d));
	font-size: clamp(26px, 2.7vw, 38px);
	line-height: 1.18;
}

.standort-page .hzr-section-group--marker-auswahl .hzr-section-group-inner > .acf-block-text:not(:first-child) a {
	color: var(--hzr-sec-text, var(--hzr-color-primary, #2c111d)) !important;
	text-decoration: none;
}

.standort-page .hzr-section-group--marker-slider .acf-block-gallery-slider-button {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--hzr-sec-text, var(--hzr-color-primary, #2c111d));
	box-shadow: 0 6px 20px color-mix(in srgb,var(--hzr-color-primary,#2c111d) 18%,transparent);
	cursor: pointer;
	transform: translateY(-50%);
}

.standort-page .hzr-section-group--marker-adresse .acf-block-text h2 {
	margin: 0 0 16px;
	color: var(--hzr-sec-text, var(--hzr-color-primary, #2c111d));
	font-size: clamp(28px, 2.5vw, 38px);
	line-height: 1.18;
	font-weight: 600;
}

.standort-page .hzr-section-group--marker-adresse .acf-block-text p {
	margin-bottom: 0;
	color: var(--hzr-sec-text, var(--hzr-color-primary, #2c111d));
	font-size: 17px;
	line-height: 1.55;
}

.standort-page .hzr-section-group--marker-benefit-modul .acf-block-text h2, .standort-page .hzr-section-group--marker-womit-wir .acf-block-text h2 {
	margin: 0 0 22px;
	color: var(--hzr-sec-text, var(--hzr-color-primary, #2c111d));
	font-size: clamp(28px, 2.6vw, 38px);
	line-height: 1.18;
	font-weight: 600;
}

.standort-page .hzr-section-group--marker-benefit-modul .acf-block-text p {
	margin: 0 auto 34px;
	color: var(--hzr-sec-text, var(--hzr-color-primary, #2c111d));
	font-size: 18px;
	line-height: 1.55;
}

.standort-page .hzr-section-group--marker-benefit-modul .acf-block-feature-box {
	--hzr-sec-text: var(--hzr-color-primary, #2c111d);
	min-height: 210px;
	padding: 34px 28px 30px;
	border-radius: 6px;
	background: #f8f6f5;
	box-shadow: none;
}

.standort-page .hzr-section-group--marker-benefit-modul .acf-block-feature-box-text {
	color: var(--hzr-sec-text, var(--hzr-color-primary, #2c111d));
	font-size: 16px;
	line-height: 1.5;
}

.standort-page .hzr-section-group--marker-womit-wir .acf-block-feature-box {
	--hzr-sec-text: var(--hzr-color-primary, #2c111d);
	min-height: 230px;
	padding: 34px 24px 30px;
	border-radius: 6px;
	background: #f8f6f5;
	box-shadow: none;
}

.standort-page .hzr-section-group--marker-womit-wir .acf-block-feature-box-title {
	margin: 0;
	color: var(--hzr-sec-text, var(--hzr-color-primary, #2c111d));
	font-size: 22px;
	line-height: 1.25;
	font-weight: 700;
}

.standort-page .hzr-section-group--marker-experten {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 72px 24px;
	background: var(--hzr-color-surface-rose, #0a0909);
	--hzr-sec-text: var(--hzr-color-surface-rose-text, #ffffff);
	color: var(--hzr-sec-text);
}

.standort-page .hzr-section-group--marker-experten .acf-block-text h2 {
	margin: 0 0 26px;
	color: var(--hzr-sec-text, var(--hzr-color-primary, #2c111d));
	font-size: clamp(28px, 2.6vw, 38px);
	line-height: 1.18;
	font-weight: 600;
}

.standort-page .hzr-section-group--marker-experten .acf-block-text p {
	color: var(--hzr-sec-text, var(--hzr-color-primary, #2c111d));
	font-size: 18px;
	line-height: 1.62;
}

.standort-page .hzr-section-group--marker-2 {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 82px 24px;
	background: var(--hzr-color-surface-rose, #0a0909);
	--hzr-sec-text: var(--hzr-color-surface-rose-text, #ffffff);
	color: var(--hzr-sec-text);
}

.standort-page .hzr-section-group--marker-2 .acf-block-text h2 {
	margin: 0 0 28px;
	color: var(--hzr-sec-text, var(--hzr-color-primary, #2c111d));
	font-size: clamp(28px, 2.5vw, 38px);
	line-height: 1.18;
}

.standort-page .hzr-section-group--marker-2 .acf-block-text p {
	color: var(--hzr-sec-text, var(--hzr-color-primary, #2c111d));
	font-size: 18px;
	line-height: 1.62;
}

.standort-page .hzr-section-group--marker-2 + .hzr-section-group .acf-block-text h2 {
	margin: 0 0 20px;
	color: var(--hzr-sec-text, var(--hzr-color-primary, #2c111d));
	font-size: clamp(28px, 2.5vw, 38px);
	line-height: 1.18;
}

.standort-page .hzr-section-group--marker-2 + .hzr-section-group .acf-block-text p {
	margin: 0;
	color: var(--hzr-sec-text, var(--hzr-color-primary, #2c111d));
	font-size: 18px;
	line-height: 1.55;
}

.standort-page .hzr-section-group--marker-2 + .hzr-section-group + .hzr-section-group {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 78px 24px 84px;
	background: var(--hzr-color-primary,#2c111d);
	--hzr-sec-text: #fff;
	color: var(--hzr-sec-text);
}

.hzr-section-group--marker-shops .acf-block-text h2 {
	margin: 0 0 34px;
	color: var(--hzr-sec-text, var(--hzr-color-primary, #2c111d));
	font-size: clamp(30px, 4vw, 44px);
	line-height: 1.12;
	font-weight: 500;
	letter-spacing: 0;
}

.hzr-section-group--marker-shops .acf-block-feature-box-text {
	color: var(--hzr-sec-text, var(--hzr-color-primary, #2c111d));
	font-size: 15px;
	line-height: 1.65;
}

.hzr-section-group .hzr-cta-card-label {
	color: var(--hzr-sec-text, var(--hzr-color-primary, #2c111d));
	font-size: 19px;
	line-height: 1.45;
	font-weight: 500;
}

/* ===== Google Reviews ACF block ===== */ .acf-block-google-reviews {
	width: 100%;
	margin: 0 auto;
	color: var(--hzr-sec-text, var(--hzr-color-primary, #2c111d));
}

.acf-block-google-reviews__heading {
	margin: 0 0 12px;
	color: var(--hzr-sec-text, #050505);
	font-size: clamp(34px, 3.1vw, 46px);
	line-height: 1.08;
	font-weight: 600;
	letter-spacing: 0;
}

.acf-block-google-reviews__rating {
	color: var(--hzr-sec-text, var(--hzr-color-primary, #2c111d));
	font-size: 16px;
}

.eheringe-page .hzr-section-group--marker-seo .faq-section-item-headline {
	margin: 0 0 14px;
	color: var(--hzr-sec-text, var(--hzr-color-primary, #2c111d));
	font-size: 20px;
	line-height: 1.3;
	font-weight: 600;
	cursor: default;
}

.eheringe-page .hzr-section-group--marker-seo .faq-section-item-content {
	max-height: none;
	opacity: 1;
	overflow: visible;
	color: var(--hzr-sec-text, var(--hzr-color-primary, #2c111d));
}

/* ===== Benefits-List (acf/benefits-list.php) — zentrierte Icon-Reihe auf rosa Band ===== * Live-Referenz: eine Reihe, Icon oben, Versal-Label darunter (Standort-Seiten). * Full-bleed-Trick: bricht aus dem .container aus und reicht über die volle Viewport-Breite. */ .acf-block-benefits-list {
	background: var(--hzr-color-surface-rose, #0a0909);
	--hzr-sec-text: var(--hzr-color-surface-rose-text, #ffffff);
	color: var(--hzr-sec-text);
	padding: 56px 24px;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: 48px;
	margin-bottom: 48px;
}

.acf-block-benefits-list__text {
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hzr-sec-text, #1a1a1a);
	line-height: 1.45;
}

/* ════════════════════════════════════════════════════════════════════
 * Filter wie live (13.08.2026): "mehr (N)", Suchfeld + Buchstaben-Index
 * in Brand/Weitere Details, 0-Treffer ausgegraut statt versteckt.
 * Basis-Regeln (Collapse, Expand-Button) liegen in editorial.css —
 * diese Datei ergaenzt nur und gewinnt bei gleicher Spezifitaet.
 * ════════════════════════════════════════════════════════════════════ */

/* Suche + Index erscheinen erst im aufgeklappten Zustand. */
.listing-filters-content-subgroup .filter-suche {
	display: none;
}

.listing-filters-content-subgroup.is-expanded .filter-suche {
	display: block;
	margin-top: 10px;
}

/* Bei Suche-Gruppen bleibt die Top-Liste kurz — alle Optionen stehen im
 * Index (wie live). Vier Klassen schlagen die Aufklapp-Regel in editorial.css. */
.listing-filters-content-subgroup.has-suche.is-expanded li.filter-term--collapsed {
	display: none;
}

.filter-suche-input {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid #d9d9d9;
	border-radius: 6px;
	font-size: 14px;
	font-family: inherit;
	background: #fff;
}

.filter-suche-input:focus {
	outline: none;
	border-color: var(--hzr-color-accent, #bd5182);
}

.filter-suche-liste {
	max-height: 320px;
	overflow-y: auto;
	margin-top: 10px;
	padding-right: 6px;
}

.filter-suche-liste ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.filter-suche-buchstabe {
	font-weight: 600;
	font-size: 14px;
	margin: 10px 0 4px;
}

.filter-suche-miss {
	display: none !important;
}

/* 0-Treffer: ausgegraut und unklickbar, wie live. */
.listing-filters-content-subgroup li.filter-leer a {
	opacity: 0.4;
	pointer-events: none;
}