/*
 * Hauswerk — Header und Footer (Bricks-Templates)
 *
 * Die Struktur liegt in Bricks (_bricks_page_header_2 / _bricks_page_footer_2),
 * das Aussehen hier. Grund: versionierbar im Theme statt verteilt über hunderte
 * Bricks-Settings-Keys — und im Builder trotzdem sichtbar, weil diese Datei
 * auch dort geladen wird.
 *
 * Es gelten dieselben Regeln wie im Block-CSS:
 * ausschließlich ACSS-Variablen, BEM-Klassen, .brxe-container nie stylen.
 */

/* =========================================================================
 * Header
 * ====================================================================== */

/*
 * Sticky gehört an den Bricks-Wrapper, NICHT an die Section.
 * `position: sticky` wirkt nur innerhalb des Elternelements — und
 * `#brx-header` ist exakt so hoch wie der Header selbst. Klebte die Section,
 * scrollte sie mit dem Wrapper aus dem Bild (gemessen: top -540px).
 */
#brx-header {
	position: sticky;
	top: 0;
	z-index: 60;
}

/* Angemeldet schiebt die WordPress-Adminleiste alles nach unten. */
.admin-bar #brx-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar #brx-header { top: 46px; }
}

.hw-hd {
	position: relative;
	z-index: 60;
	background: var(--white);
	border-bottom: 1px solid var(--shade-trans-20);
	transition: box-shadow .3s ease;
	padding-block: 0;
	overflow: visible;
}

/* Schatten erst ab Scroll — Klasse setzt hauswerk-front.js.
   Fester rgba-Wert statt Variable: `--shade-trans-10` liefert hier nichts,
   dadurch war die ganze Deklaration ungültig und der Schatten blieb aus. */
.hw-hd.is-stuck {
	box-shadow: 0 1px 22px rgba(31, 36, 18, .10);
}

/* --- Kompakter Zustand beim Scrollen ----------------------------------- */
/* Der Header schrumpft, das Logo geht mit — so bleibt beim Lesen mehr Platz,
   ohne dass die Marke verschwindet. */

.hw-hd__inner {
	transition: min-height .28s cubic-bezier(.2, .7, .3, 1);
}

.hw-hd.is-stuck .hw-hd__inner {
	min-height: 74px;
}

#brx-header .hw-hd__logo img {
	transition: height .28s cubic-bezier(.2, .7, .3, 1);
	height: 88px;
	width: auto;
}

#brx-header .hw-hd.is-stuck .hw-hd__logo img {
	height: 54px;
}

@media (prefers-reduced-motion: reduce) {
	.hw-hd__inner,
	.hw-hd__logo img { transition: none; }
}

@media (max-width: 768px) {
	.hw-hd__logo img { height: 64px; }
	.hw-hd.is-stuck .hw-hd__logo img { height: 46px; }
}

/* width:100% ist Pflicht — Bricks gibt jedem .brxe-container eine feste
   Breite (Standard 1100px) mit. `width` schlaegt `max-width`, ohne diese
   Zeile bleibt der Header schmaler als der Seiteninhalt und rueckt ein. */
.hw-hd__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s);
	min-height: 116px;
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.hw-hd__logo {
	flex: none;
	line-height: 0;
}

.hw-hd__logo img {
	display: block;
	width: auto;
}

/* --- Navigation -------------------------------------------------------- */

.hw-hd__nav {
	margin-left: auto;
}

/* Kleinerer Abstand als vorher: die Menüpunkte tragen jetzt selbst eine Fläche
   mit Innenabstand, dadurch braucht es zwischen ihnen weniger Luft. */
.hw-hd__nav .bricks-nav-menu {
	gap: clamp(.1rem, .45vw, .45rem);
	align-items: center;
}

.hw-hd__nav .bricks-nav-menu > li > a,
.hw-hd__nav .bricks-nav-menu > li > .brx-submenu-toggle > a {
	position: relative;
	font-size: var(--text-m);
	font-weight: 600;
	letter-spacing: .015em;
	color: var(--shade-trans-80);
	text-decoration: none;
	padding-block: .62rem;
	padding-inline: .9rem;
	transition: color .2s;
}

/* Bei Punkten mit Untermenü sitzt der Pfeil rechts daneben — dort den rechten
   Innenabstand des Links wegnehmen, sonst steht die Fläche unsymmetrisch. */
.hw-hd__nav .bricks-nav-menu > li > .brx-submenu-toggle > a {
	padding-right: .35rem;
}

.hw-hd__nav .bricks-nav-menu > li > .brx-submenu-toggle {
	padding-right: .75rem;
}

/* Der wachsende Unterstrich ist raus: bei Punkten mit Untermenü lief die Linie
   unter dem Aufklapp-Pfeil durch und wirkte abgeschnitten. Hover und
   Aktivmarkierung laufen jetzt über eine dezente Fläche (siehe unten).
   Regel bleibt als leerer Rahmen bestehen, damit die Position stimmt. */
.hw-hd__nav .bricks-nav-menu > li > a::after,
.hw-hd__nav .bricks-nav-menu > li > .brx-submenu-toggle > a::after {
	display: none;
	content: '';
	position: absolute;
	left: 0;
	right: 100%;
	bottom: .1rem;
	height: 2px;
	background: var(--primary);
	transition: right .35s cubic-bezier(.2, .7, .3, 1);
}

.hw-hd__nav .bricks-nav-menu > li > a:hover,
.hw-hd__nav .bricks-nav-menu > li > .brx-submenu-toggle > a:hover {
	color: var(--shade);
}

.hw-hd__nav .bricks-nav-menu > li > a:hover::after,
.hw-hd__nav .bricks-nav-menu > li > .brx-submenu-toggle:hover > a::after,
.hw-hd__nav .bricks-nav-menu > li > .brx-submenu-toggle > a:hover::after {
	right: 0;
}

/* Aktiver Punkt: Bricks faerbt ihn per Default in --primary. Auf Weiss ergibt
   das nur 2,7:1 (axe: color-contrast). Deshalb dieselbe Textfarbe wie sonst,
   die Aktivmarkierung uebernimmt der Unterstrich.
   Der Submenu-Toggle traegt eine eigene Struktur (.brx-submenu-toggle > a). */
.hw-hd__nav .bricks-nav-menu > li.current-menu-item > a,
.hw-hd__nav .bricks-nav-menu > li.current-menu-ancestor > a,
.hw-hd__nav .bricks-nav-menu > li.current-menu-item > .brx-submenu-toggle > a,
.hw-hd__nav .bricks-nav-menu > li.current-menu-ancestor > .brx-submenu-toggle > a,
.hw-hd__nav .bricks-nav-menu .current-menu-item > a,
.hw-hd__nav .bricks-nav-menu .current-menu-ancestor > a {
	color: var(--shade);
}

/*
 * Aktivmarkierung = stehender Unterstrich.
 *
 * Alle vier WordPress-Zustaende abdecken, sonst faellt je nach Seitentyp einer
 * durch: `current-menu-item` (Seite ist der Menuepunkt), `current-menu-ancestor`
 * (Menue-Elternteil), `current_page_item`/`current-page-ancestor` (Seiten-
 * hierarchie, greift z. B. auf CPT-Detailseiten unter einer Elternseite).
 * Jeweils mit und ohne Submenu-Toggle.
 */
/*
 * Aktivmarkierung = ruhige Fläche hinter dem Menüpunkt.
 *
 * Die Fläche sitzt auf dem <li>, nicht auf dem <a>: bei Punkten mit Untermenü
 * gehört der Aufklapp-Pfeil zum selben Eintrag und soll mit hinterlegt werden.
 */
.hw-hd__nav .bricks-nav-menu > li {
	border-radius: 4px;
	transition: background-color .25s ease;
}

.hw-hd__nav .bricks-nav-menu > li:hover {
	background-color: color-mix(in srgb, var(--primary) 8%, transparent);
}

.hw-hd__nav .bricks-nav-menu > li.current-menu-item,
.hw-hd__nav .bricks-nav-menu > li.current-menu-ancestor,
.hw-hd__nav .bricks-nav-menu > li.current_page_item,
.hw-hd__nav .bricks-nav-menu > li.current-page-ancestor {
	background-color: color-mix(in srgb, var(--primary) 14%, transparent);
}

/* Fallback für Browser ohne color-mix. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.hw-hd__nav .bricks-nav-menu > li:hover { background-color: rgba(122, 172, 63, .08); }
	.hw-hd__nav .bricks-nav-menu > li.current-menu-item,
	.hw-hd__nav .bricks-nav-menu > li.current-menu-ancestor,
	.hw-hd__nav .bricks-nav-menu > li.current_page_item,
	.hw-hd__nav .bricks-nav-menu > li.current-page-ancestor { background-color: rgba(122, 172, 63, .14); }
}

@media (prefers-reduced-motion: reduce) {
	.hw-hd__nav .bricks-nav-menu > li { transition: none; }
}

/* --- Aufklapp-Pfeile --------------------------------------------------- */
/* Kleiner, in CI-Grün und dicht am Text — vorher 18px in Schwarz mit viel Luft. */

/* Kein `padding-left` hier: den Abstand zum Text setzt allein das
   `padding-right` des Links daneben. Beides zusammen war doppelt gemoppelt und
   schob den Pfeil zu weit weg. */
.hw-hd__nav .bricks-nav-menu .brx-submenu-toggle > button {
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	color: var(--primary);
}

.hw-hd__nav .bricks-nav-menu .brx-submenu-toggle > button svg,
.hw-hd__nav .bricks-nav-menu .brx-submenu-toggle > button .menu-item-icon {
	width: 11px;
	height: 11px;
	font-size: 11px;
	stroke: var(--primary);
	color: var(--primary);
}

/* Untermenü: dieselbe Flächenlogik wie oben, damit beide Ebenen zusammenpassen.
   Die Fläche liegt hier auf dem Link — Untermenü-Einträge sind volle Zeilen. */
.hw-hd__nav .sub-menu .current-menu-item > a,
.hw-hd__nav .sub-menu .current-menu-ancestor > a,
.hw-hd__nav .sub-menu .current_page_item > a,
.hw-hd__nav .sub-menu .current-page-ancestor > a {
	background-color: color-mix(in srgb, var(--primary) 14%, transparent);
	color: var(--shade);
	font-weight: 700;
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.hw-hd__nav .sub-menu .current-menu-item > a,
	.hw-hd__nav .sub-menu .current-menu-ancestor > a,
	.hw-hd__nav .sub-menu .current_page_item > a,
	.hw-hd__nav .sub-menu .current-page-ancestor > a {
		background-color: rgba(122, 172, 63, .14);
	}
}

/* --- Footer-Navigation ------------------------------------------------- */
/* Heller Text auf dunklem Grund: hier markiert die CI-Limette. */

.hw-ft__menu .current-menu-item > a,
.hw-ft__menu .current-menu-ancestor > a,
.hw-ft__menu .current_page_item > a,
.hw-ft__menu .current-page-ancestor > a {
	color: var(--secondary);
	font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
	.hw-hd__nav .bricks-nav-menu > li > a::after { transition: none; }
}

/* --- Untermenü --------------------------------------------------------- */

.hw-hd__nav .sub-menu {
	/* So breit wie der längste Eintrag, statt feste Breite mit Umbruch:
	   „Individuelle Architekturplanung" brach sonst auf zwei Zeilen.
	   `max-width` als Notbremse, damit ein sehr langer Titel den Kasten nicht
	   aus dem Fenster schiebt. */
	width: max-content;
	max-width: min(30rem, calc(100vw - 2rem));
	min-width: 230px;
	background: var(--white);
	border: 1px solid var(--shade-trans-20);
	border-top: 2px solid var(--primary);
	padding-block: .45rem;
	box-shadow: 0 18px 44px var(--shade-trans-10);
}

.hw-hd__nav .sub-menu a {
	display: block;
	white-space: nowrap;
	padding: .68rem 1.25rem;
	font-size: var(--text-m);
	font-weight: 600;
	color: var(--shade-trans-80);
	text-decoration: none;
	transition: color .2s, background .2s;
}

.hw-hd__nav .sub-menu a::after {
	display: none;
}

.hw-hd__nav .sub-menu a:hover {
	color: var(--shade);
	background: var(--base);
}

/* --- Mobiles Menü ------------------------------------------------------
 *
 * Bricks setzt Farben und Abstände des Panels über ID-Selektoren
 * (`#brxe-… .bricks-mobile-menu …`) — Klassenregeln verlieren dagegen. Deshalb
 * hängen die folgenden Regeln an `#brx-header`, damit sie dieselbe Gewichtung
 * erreichen. Ohne das blieb das Panel dunkel und die Schrift darauf
 * unlesbar (dunkel auf dunkel).
 * -------------------------------------------------------------------- */

#brx-header .hw-hd__nav .bricks-mobile-menu-toggle {
	color: var(--shade);
}

#brx-header .bricks-mobile-menu-wrapper {
	background: var(--white);
	box-shadow: 0 0 60px rgba(31, 36, 18, .18);
}

#brx-header .bricks-mobile-menu-wrapper > .bricks-mobile-menu {
	padding: var(--space-s) 0 var(--space-m);
	margin: 0;
	list-style: none;
}

/* Die Flächen-Optik der Desktop-Navigation hier zurücknehmen: im Panel sind
   die Einträge volle Zeilen, keine Chips. */
#brx-header .bricks-mobile-menu > li {
	background: none !important;
	border-radius: 0;
	border-bottom: 1px solid var(--shade-trans-20);
}

#brx-header .bricks-mobile-menu > li:last-child {
	border-bottom: 0;
}

/* Fester Innenabstand statt `--gutter`: der Gutter skaliert mit der
   FENSTERbreite (bis 3,75rem), das Panel ist aber nur ~300px breit — dadurch
   blieben je Seite ~59px Rand und „Impressionen" brach mitten im Wort um. */
#brx-header .bricks-mobile-menu a {
	display: block;
	font-size: var(--text-m);
	font-weight: 600;
	color: var(--shade);
	padding: .85rem 1.25rem;
	text-decoration: none;
}

#brx-header .bricks-mobile-menu a:hover {
	background: var(--base);
}

/* Aufklapp-Pfeil: gleiche Sprache wie am Desktop, nur größere Tippfläche. */
#brx-header .bricks-mobile-menu .brx-submenu-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-right: 1.25rem;
}

#brx-header .bricks-mobile-menu .brx-submenu-toggle > a {
	flex: 1;
}

#brx-header .bricks-mobile-menu .brx-submenu-toggle > button {
	padding: .6rem;
	color: var(--primary);
	background: none;
	border: 0;
}

#brx-header .bricks-mobile-menu .brx-submenu-toggle > button svg {
	width: 14px;
	height: 14px;
	stroke: var(--primary);
}

/* Untermenü: leicht eingerückt und abgesetzt, damit die Ebene ablesbar ist. */
#brx-header .bricks-mobile-menu .sub-menu {
	background: var(--base);
	padding: .25rem 0;
	margin: 0;
	list-style: none;
	width: auto;
	min-width: 0;
	max-width: none;
	border: 0;
	box-shadow: none;
}

#brx-header .bricks-mobile-menu .sub-menu a {
	font-size: calc(var(--text-m) - 1px);
	font-weight: 500;
	padding: .7rem 1.25rem .7rem 2.25rem;
	white-space: normal;
}

/* Aktive Seite: schmaler Balken links statt ganzflächigem Kasten. */
#brx-header .bricks-mobile-menu .current-menu-item > a,
#brx-header .bricks-mobile-menu .current-menu-ancestor > a,
#brx-header .bricks-mobile-menu .current_page_item > a,
#brx-header .bricks-mobile-menu .current-page-ancestor > a,
#brx-header .bricks-mobile-menu .current-menu-item > .brx-submenu-toggle > a,
#brx-header .bricks-mobile-menu .current-menu-ancestor > .brx-submenu-toggle > a {
	background: none;
	color: var(--tertiary);
	font-weight: 700;
	box-shadow: inset 3px 0 0 var(--primary);
}

/* Schließen-Kreuz sichtbar auf hellem Grund. */
#brx-header .bricks-mobile-menu-toggle .bar,
#brx-header .bricks-mobile-menu-wrapper .bricks-mobile-menu-toggle {
	color: var(--shade);
}

@media (max-width: 992px) {
	.hw-hd__inner { min-height: 92px; }

	/* Bricks schreibt die Logohöhe als `#brxe-… img { height: … }` — also mit
	   ID-Spezifität (1,0,1). Eine Klassenregel verliert den Vergleich, deshalb
	   hier ausnahmsweise !important. Sonst ragt das 88px-Logo aus dem auf 92px
	   geschrumpften Header heraus. */
	.hw-hd__logo img { height: 56px !important; }
}

/* =========================================================================
 * Footer
 * ====================================================================== */

.hw-ft {
	background: var(--accent);
	color: var(--base-light);
	padding-block: 0;
}

.hw-ft :is(h1, h2, h3, h4) {
	color: var(--base-light);
}

/* Siehe .hw-hd__inner — Bricks-Container brauchen width:100%. */
.hw-ft__inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.hw-ft__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-l);
	padding-block: var(--section-space-s) var(--space-l);
	flex-wrap: wrap;
}

/* --- Marke ------------------------------------------------------------- */

/* Schmaler als zuvor (320px): dadurch bleibt rechts mehr Platz fuer die
   drei Spalten, die sonst frueh umbrechen. */
.hw-ft__brand {
	display: flex;
	flex-direction: column;
	flex: 0 1 250px;
}

.hw-ft__logo {
	line-height: 0;
}

.hw-ft__logo img {
	display: block;
	width: auto;
}

.hw-ft__claim {
	font-family: var(--h1-font-family);
	font-size: var(--text-m);
	font-weight: 400;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--secondary);
	margin: var(--space-xs) 0 0 0;
	line-height: 1.5;
}

.hw-ft__desc {
	font-size: calc(var(--text-m) - 2px);
	line-height: 1.65;
	color: var(--base-light);
	opacity: .92;
	max-width: 30ch;
	margin: var(--space-xs) 0 0 0;
}

/* --- Spalten ----------------------------------------------------------- */

.hw-ft__cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-m) clamp(2rem, 5vw, 4rem);
	margin-left: auto;
	flex: 1 1 34rem;
	max-width: 54rem;
}

.hw-ft__col {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.hw-ft__col-title {
	font-family: var(--text-font-family);
	font-size: var(--text-s);
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--secondary);
	font-weight: 700;
	margin: 0 0 var(--space-xs) 0;
}

/* Kein Listen-Einzug: das <ul> bringt vom Browser 40px padding-left mit,
   dadurch standen die Eintraege gegenueber der Spaltenueberschrift versetzt. */
.hw-ft__menu .bricks-nav-menu {
	flex-direction: column;
	gap: .75rem;
	align-items: flex-start;
	padding-left: 0;
	margin-left: 0;
	list-style: none;
}

.hw-ft__menu .bricks-nav-menu li {
	padding-left: 0;
	margin-left: 0;
	list-style: none;
}

/* Volle Deckkraft statt .85: auf dem dunklen Gruen kostet jede Abschwaechung
   spuerbar Kontrast (bei .6 nur noch rund 4:1). */
.hw-ft__menu .bricks-nav-menu a,
.hw-ft__kontakt a {
	font-size: calc(var(--text-m) - 2px);
	color: var(--base-light);
	opacity: 1;
	text-decoration: none;
	transition: opacity .2s ease, color .2s ease;
}

.hw-ft__menu .bricks-nav-menu a:hover,
.hw-ft__kontakt a:hover {
	opacity: 1;
	color: var(--secondary);
}

/* Bewusst KEIN Flex mit `gap`: der Inhalt ist ein <br>-getrennter Fließtext.
   Als Flex-Container wird jedes <br> zu einem eigenen Element und bekommt den
   Abstand zusätzlich — Telefon und E-Mail standen dadurch weit auseinander. */
.hw-ft__adr {
	font-style: normal;
	display: block;
	font-size: calc(var(--text-m) - 2px);
	line-height: 1.75;
	color: var(--base-light);
	opacity: 1;
}

/* Kontaktdaten als eigener Absatz absetzen — untereinander bleiben sie eng. */
.hw-ft__adr a[href^="tel:"] {
	display: inline-block;
	margin-top: .75rem;
}

/* Öffnungszeiten stehen als eigene Zeile unter den Spalten (umgehängt von
   hauswerk-front.js) — in der schmalen Kontaktspalte brachen sie über vier
   Zeilen um. */
.hw-ft__zeiten {
	font-size: calc(var(--text-m) - 2px);
	line-height: 1.7;
	color: var(--base-light);
	opacity: .92;
	margin: 0;
}

.hw-ft__oeffnung {
	padding-block: var(--space-m);
	border-top: 1px solid color-mix(in srgb, var(--base-light) 15%, transparent);
	margin-top: 0;
}

.hw-ft__oeffnung .hw-ft__zeiten-titel {
	font-size: var(--text-xs);
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--secondary);
	font-weight: 700;
	margin: 0 0 .6rem 0;
}

/* --- Feinzeile --------------------------------------------------------- */

.hw-ft__fine {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .7rem var(--space-s);
	padding-block: var(--space-s);
	border-top: 1px solid var(--base-light);
	border-top-color: color-mix(in srgb, var(--base-light) 15%, transparent);
}

.hw-ft__fine-text {
	margin: 0;
	font-size: var(--text-s);
	letter-spacing: .04em;
	color: var(--base-light);
	opacity: .88;
	line-height: 1.8;
}

.hw-ft__recht .bricks-nav-menu {
	gap: var(--space-xs);
}

.hw-ft__recht .bricks-nav-menu a {
	font-size: var(--text-xs);
	color: var(--base-light);
	opacity: .85;
	text-decoration: none;
	transition: opacity .2s, color .2s;
}

.hw-ft__recht .bricks-nav-menu a:hover {
	opacity: 1;
	color: var(--secondary);
}

@media (max-width: 992px) {
	.hw-ft__top { flex-direction: column; gap: var(--space-m); }
	.hw-ft__cols { margin-left: 0; max-width: none; }
}

@media (max-width: 600px) {
	.hw-ft__cols { grid-template-columns: minmax(0, 1fr); gap: var(--space-s); }
	.hw-ft__fine { flex-direction: column; align-items: flex-start; }
}

/* Der Skip-Link steht in `hauswerk-basis.css` — er gehört zur Seitenbasis,
   nicht zum Bricks-Header. Hier bewusst keine zweite Definition. */

/* =========================================================================
 * Funnel (CPT `funnel`, Bricks)
 *
 * Eigene Bühne ohne Navigation: der Funnel soll genau einen Weg anbieten.
 * Bewusst hier und nicht im Block-CSS — Funnel-Seiten rendert Bricks.
 * ====================================================================== */

.hw-fun {
	padding-block: var(--section-space-m);
}

.hw-fun__inner {
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.hw-fun__inner--schmal { max-width: 46rem; }

.hw-fun--hero {
	background: var(--accent);
	color: var(--base-light);
	padding-block: var(--section-space-l);
}

.hw-fun__kicker {
	display: block;
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--secondary);
	margin-bottom: var(--space-xs);
}

.hw-fun__h1 {
	font-family: var(--h1-font-family);
	font-size: var(--text-xxl);
	line-height: 1.1;
	letter-spacing: -.03em;
	margin: 0 0 var(--space-s) 0;
	text-wrap: balance;
}

.hw-fun--hero .hw-fun__h1 { color: var(--white); }

.hw-fun__lead {
	font-size: var(--text-m);
	line-height: 1.6;
	max-width: 52ch;
	margin: 0 0 var(--space-m) 0;
}

.hw-fun--hero .hw-fun__lead { color: var(--base-light); }

.hw-fun__trust {
	font-size: var(--text-xs);
	letter-spacing: .1em;
	text-transform: uppercase;
	margin: var(--space-s) 0 0 0;
	opacity: .85;
}

.hw-fun__cta {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	background: var(--primary);
	color: var(--shade);
	font-weight: 800;
	padding: .9rem 1.6rem;
	border-radius: 3px;
	text-decoration: none;
	transition: background-color .25s ease, transform .25s ease;
}

.hw-fun__cta::after { content: '→'; transition: transform .3s ease; }
.hw-fun__cta:hover { background: var(--secondary); color: var(--shade); }
.hw-fun__cta:hover::after { transform: translateX(5px); }

.hw-fun__cta--sekundaer {
	background: transparent;
	color: var(--shade);
	border: 1px solid var(--shade-trans-20);
}

/* --- Formular: Bildkarten und Regler ----------------------------------- */

.hw-fun__form { margin-top: var(--space-m); }

/* Bild-Radios als anklickbare Karten statt Punkte. */
.hw-fun__karten .ff-el-form-check,
.hw-fun__karten .ff_item_selectable {
	border: 1px solid var(--shade-trans-20);
	border-radius: 4px;
	padding: .9rem;
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease;
}

.hw-fun__karten .ff-el-form-check:hover,
.hw-fun__karten .ff_item_selectable:hover {
	border-color: var(--primary);
	background: var(--base);
}

.hw-fun__karten .ff_item_selected,
.hw-fun__karten .ff-el-form-check input:checked + label {
	border-color: var(--primary);
	background: color-mix(in srgb, var(--primary) 12%, transparent);
	font-weight: 700;
}

.hw-fun__karten img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 3px;
	margin-bottom: .6rem;
}

.hw-fun__regler { margin-block: var(--space-s); }

@media (max-width: 860px) {
	.hw-fun__nutzen-grid { grid-template-columns: minmax(0, 1fr); }
	.hw-fun__nutzen-titel,
	.hw-fun__nutzen-text,
	.hw-fun__nutzen-grid .hw-fun__cta { grid-row: auto; grid-column: 1; }
}

/* Funnel-Seiten: Der Fuß behält nur Marke, Adresse und Rechtliches.
   Die Menü-Spalten sind per PHP entfernt — ohne diese Regel blieben ihre
   Überschriften („Bauen mit uns", „Unternehmen") als leere Titel stehen. */
body.hw-funnel .hw-ft__col:has(.hw-ft__col-title):not(:has(.hw-ft__kontakt)) {
	display: none;
}

body.hw-funnel .hw-ft__cols {
	grid-template-columns: minmax(0, 1fr);
	max-width: 26rem;
}

body.hw-funnel .hw-ft__oeffnung { display: none; }

/* --- Funnel-Formular ---------------------------------------------------
   Fluent Forms bringt eigene Optik mit; hier auf die Hauswerk-Sprache
   gebracht. Schrittleiste, Bildkarten, Regler und Buttons.
   -------------------------------------------------------------------- */

.hw-fun__form .fluentform { --ff-primary: var(--primary); }

/* Fortschritt */
.hw-fun__form .ff-el-progress-bar,
.hw-fun__form .ff_step_header .ff-el-progress-bar {
	background: var(--primary) !important;
}

.hw-fun__form .ff-el-progress {
	background: var(--shade-trans-20);
	border-radius: 999px;
	height: 6px;
	overflow: hidden;
	margin-bottom: var(--space-s);
}

.hw-fun__form .ff-el-progress-status {
	font-size: var(--text-xs);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--shade-trans-80);
	margin-bottom: .4rem;
}

/* Feldbeschriftungen */
.hw-fun__form .ff-el-input--label label {
	font-size: var(--text-m);
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--shade);
	margin-bottom: .5rem;
	line-height: 1.35;
}

.hw-fun__form .ff-el-input--label .ff-el-help-message,
.hw-fun__form .ff-el-help-message {
	font-size: var(--text-s);
	color: var(--shade-trans-80);
	margin-bottom: .8rem;
}

/* Eingaben */
.hw-fun__form :is(input[type=text], input[type=email], input[type=tel], textarea) {
	width: 100%;
	border: 1px solid var(--shade-trans-20);
	border-radius: 3px;
	padding: .8rem .9rem;
	font-size: var(--text-m);
	background: var(--white);
	color: var(--shade);
}

.hw-fun__form :is(input[type=text], input[type=email], input[type=tel], textarea):focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(122, 172, 63, .3);
	outline: 2px solid transparent;
}

/* Bildkarten als Raster */
.hw-fun__form .ff_list_buttons .ff-el-form-check,
.hw-fun__form .ff-el-group.hw-fun__karten .ff-el-form-check-radio,
.hw-fun__form .ff_item_selectable_wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--space-xs);
}

.hw-fun__form .ff_item_selectable {
	border: 2px solid var(--shade-trans-20);
	border-radius: 5px;
	padding: .75rem;
	background: var(--white);
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
	text-align: center;
}

.hw-fun__form .ff_item_selectable:hover {
	border-color: var(--primary);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(31, 36, 18, .08);
}

.hw-fun__form .ff_item_selected {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(122, 172, 63, .22);
}

.hw-fun__form .ff_item_selectable img {
	border-radius: 3px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	margin-bottom: .55rem;
}

/* Reine Icon-/Textkarten ohne Bild: mittig und luftig */
.hw-fun__form .ff_item_selectable:not(:has(img)) {
	padding: 1.15rem .9rem;
	font-weight: 600;
}

/* Schieberegler */
.hw-fun__form input[type=range] {
	width: 100%;
	accent-color: var(--primary);
}

.hw-fun__form .ff-el-range-value,
.hw-fun__form .ff_range_value {
	font-family: var(--h1-font-family);
	font-size: var(--text-l);
	font-weight: 700;
	color: var(--tertiary);
}

/* Schritt-Buttons */
.hw-fun__form .ff-btn,
.hw-fun__form .ff-btn-next,
.hw-fun__form .ff-btn-prev,
.hw-fun__form .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	border: 0;
	border-radius: 3px;
	padding: .85rem 1.5rem;
	font-size: var(--text-m);
	font-weight: 800;
	cursor: pointer;
	background: var(--primary);
	color: var(--shade);
	transition: background-color .2s ease;
}

.hw-fun__form .ff-btn:hover,
.hw-fun__form .ff-btn-next:hover,
.hw-fun__form .ff-btn-submit:hover { background: var(--secondary); }

/* „Zurück" tritt zurück */
.hw-fun__form .ff-btn-prev {
	background: transparent;
	color: var(--shade-trans-80);
	border: 1px solid var(--shade-trans-20);
	font-weight: 600;
}

.hw-fun__form .ff-btn-prev:hover {
	background: var(--base);
	color: var(--shade);
}

.hw-fun__form .step-nav {
	display: flex;
	justify-content: space-between;
	gap: var(--space-xs);
	margin-top: var(--space-m);
}

.hw-fun__form .ff-el-form-check-label {
	font-size: var(--text-s);
	line-height: 1.6;
	color: var(--shade-trans-80);
}

.hw-fun__form .text-danger { color: #b32d2e; font-size: var(--text-xs); }

@media (prefers-reduced-motion: reduce) {
	.hw-fun__form .ff_item_selectable { transition: none; }
	.hw-fun__form .ff_item_selectable:hover { transform: none; }
}

/* --- Funnel: Raster aus echten Karten ---------------------------------
   Vorher lagen Titel und Text als flache Geschwister im Grid und wurden
   über `grid-row` sortiert — das trägt nur bis drei Einträge. Jetzt ist
   jede Karte ein eigener Block, das Raster zählt selbst.
   -------------------------------------------------------------------- */

/* Zentrierte Variante (Danke-Seite): ALLE Kinder folgen derselben Achse.
   Vorher war nur der Fließtext mittig — er ist das einzige Element mit
   Breitenbegrenzung und `auto`-Rand. Ergebnis war ein halb zentrierter Block. */
.hw-fun__inner--mitte { text-align: center; }

.hw-fun__inner--mitte .hw-fun__lead,
.hw-fun__inner--mitte .hw-fun__trust,
.hw-fun__inner--mitte .hw-fun__bild {
	margin-inline: auto;
}

.hw-fun__inner--mitte .hw-fun__raster { text-align: left; }

.hw-fun__inner--formular {
	max-width: 52rem;
	margin-inline: auto;
}

.hw-fun__h2 {
	font-family: var(--h1-font-family);
	font-size: var(--text-xl);
	line-height: 1.15;
	letter-spacing: -.025em;
	margin: 0 0 var(--space-m) 0;
	text-wrap: balance;
}

.hw-fun__raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space-s);
	margin-block: var(--space-m);
	text-align: left;
}

.hw-fun__raster--drei { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.hw-fun__karte {
	background: var(--white);
	border: 1px solid var(--shade-trans-20);
	border-radius: 5px;
	padding: var(--space-s);
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

.hw-fun--nutzen { background: var(--base); }
.hw-fun--ablauf { background: var(--white); }

.hw-fun__karte-titel {
	font-size: var(--text-m);
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
	color: var(--shade);
}

.hw-fun__karte-text {
	margin: 0;
	line-height: 1.6;
	color: var(--shade-trans-80);
}

.hw-fun__schritt-nr {
	font-family: var(--h1-font-family);
	font-size: var(--text-l);
	font-weight: 700;
	color: var(--primary);
	line-height: 1;
}

.hw-fun__karte--schritt { background: var(--base); border-color: transparent; }

/* Bild auf der Danke-Seite */
.hw-fun__bild img,
.hw-fun__bild {
	border-radius: 5px;
	overflow: hidden;
	margin-top: var(--space-m);
	max-width: 100%;
	height: auto;
}

/* Die Shortcode-Abschnitte bringen ihre eigene Section mit — hier nur
   dafür sorgen, dass sie im Funnel nicht doppelt Luft bekommen. */
.hw-fun + .hw-section,
.hw-section + .hw-fun { margin-top: 0; }

/* Kicker: Limette trägt nur auf dunklem Grund. Auf hellen Flächen das
   dunklere CI-Grün — sonst rund 1,8:1 Kontrast und praktisch unlesbar. */
.hw-fun:not(.hw-fun--hero) .hw-fun__kicker { color: var(--tertiary); }

/* Höchstens drei Spalten: bei sechs Karten sonst 4 + 2 statt 3 + 3. */
.hw-fun__raster {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	max-width: 100%;
}

@media (min-width: 1100px) {
	.hw-fun__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Funnel: Abschluss- und Formularflächen --------------------------- */

.hw-fun--schluss { background: var(--base); }          /* Kalk */
.hw-fun--formularflaeche { background: var(--white); }

/* Kompakter Hero für die Formularseite.
   Er soll zum Formular führen, nicht die erste Bildschirmhöhe verbrauchen —
   deshalb deutlich flacher als der Landing-Hero und ohne Bodenabstand, damit
   die Formularkarte sichtbar hineinragt. */
.hw-fun--hero-kompakt {
	padding-block: var(--space-l) var(--section-space-m);
}

.hw-fun--hero-kompakt .hw-fun__h1 { font-size: var(--text-xl); }
.hw-fun--hero-kompakt .hw-fun__lead { margin-bottom: var(--space-xs); max-width: 46ch; }
.hw-fun--hero-kompakt .hw-fun__trust { margin-top: var(--space-xs); }

/* --- Fluent Form im Funnel: an die Seite angeglichen ------------------ */

/* Bewusst ohne Karte und Schatten: das Formular IST der Inhalt der Seite,
   es muss sich nicht zusätzlich vom Grund abheben (siehe Referenz-Funnel). */
.hw-fun__form {
	background: transparent;
	padding: 0;
}

/* Fragen deutlich größer — sie sind die eigentliche Überschrift des Schritts */
.hw-fun__form .ff-el-input--label label {
	font-family: var(--h1-font-family);
	font-size: var(--text-l);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.25;
	margin-bottom: .6rem;
}

.hw-fun__form .ff-el-input--label .ff-el-help-message {
	font-family: var(--text-font-family);
	font-size: var(--text-s);
	font-weight: 400;
}

/* Auswahlkarten: größer, mit spürbarer Reaktion */
.hw-fun__form .ff_item_selectable {
	padding: 1rem;
	border-width: 2px;
	font-size: var(--text-m);
}

.hw-fun__form .ff_item_selectable img {
	aspect-ratio: 3 / 2;
	margin-bottom: .8rem;
	transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}

.hw-fun__form .ff_item_selectable:hover img { transform: scale(1.04); }

.hw-fun__form .ff_item_selectable:not(:has(img)) {
	padding: 1.5rem 1rem;
	font-size: var(--text-m);
	font-weight: 700;
}

/* Buttons: CI-Grün mit dunkler Schrift (Weiß käme nur auf 2,7:1) */
.hw-fun__form .ff-btn,
.hw-fun__form .ff-btn-next,
.hw-fun__form .ff-btn-submit,
.hw-fun__form button.ff-btn-submit,
.hw-fun__form .ff_btn_style {
	background: var(--primary) !important;
	color: var(--shade) !important;
	border: 0 !important;
	border-radius: 4px;
	padding: 1rem 1.9rem !important;
	font-size: var(--text-m) !important;
	font-weight: 800 !important;
	letter-spacing: .01em;
	box-shadow: none !important;
	transition: background-color .25s ease, transform .25s ease;
}

.hw-fun__form .ff-btn:hover,
.hw-fun__form .ff-btn-next:hover,
.hw-fun__form .ff-btn-submit:hover {
	background: var(--secondary) !important;
	transform: translateY(-2px);
}

.hw-fun__form .ff-btn-prev,
.hw-fun__form .ff_btn_secondary {
	background: transparent !important;
	color: var(--shade-trans-80) !important;
	border: 1px solid var(--shade-trans-20) !important;
	font-weight: 600 !important;
}

.hw-fun__form .ff-btn-prev:hover {
	background: var(--base) !important;
	color: var(--shade) !important;
	transform: none;
}

/* Schrittwechsel sanft einblenden */
.hw-fun__form .ff-step-body,
.hw-fun__form .ff-step-container .ff-step-body { animation: hwFunStep .35s ease both; }

@keyframes hwFunStep {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.hw-fun__form .ff-step-body { animation: none; }
	.hw-fun__form .ff_item_selectable img,
	.hw-fun__form .ff-btn { transition: none; }
	.hw-fun__form .ff-btn:hover { transform: none; }
}

/* --- Auswahlkarten: echte Struktur ------------------------------------
 *
 * Fluent Forms baut Bild-Radios so:
 *   .ff-el-input--content
 *     └ .ff_el_checkable_photo_holders     ← hier gehört das Raster hin
 *         └ .ff-el-form-check.ff-el-image-holder
 *             └ label.ff-el-image-input-src   (Bild als background-image)
 *
 * Mein Raster lag zuvor eine Ebene zu hoch — dadurch war der gesamte
 * Optionsblock EIN Grid-Item und streckte sich auf über 1100 px.
 * -------------------------------------------------------------------- */

.hw-fun__form .hw-fun__karten .ff-el-input--content { display: block; }

.hw-fun__form .ff_el_checkable_photo_holders {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 560px) {
	.hw-fun__form .ff_el_checkable_photo_holders { grid-template-columns: minmax(0, 1fr); }
}

.hw-fun__form .ff-el-form-check.ff-el-image-holder {
	margin: 0;
	padding: 0;
	border: 2px solid var(--shade-trans-20);
	border-radius: 6px;
	overflow: hidden;
	background: var(--white);
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
	cursor: pointer;
	display: flex;
	flex-direction: column;
}

.hw-fun__form .ff-el-form-check.ff-el-image-holder:hover {
	border-color: var(--primary);
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(31, 36, 18, .10);
}

/* Bild sitzt als Hintergrund auf dem Label — feste Proportion statt Streckung */
.hw-fun__form label.ff-el-image-input-src {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	background-size: cover;
	background-position: center;
	margin: 0;
	transition: transform .4s cubic-bezier(.2, .7, .3, 1);
}

.hw-fun__form .ff-el-image-holder:hover label.ff-el-image-input-src { transform: scale(1.05); }

/* Beschriftung unter dem Bild */
.hw-fun__form .ff-el-image-holder .ff-el-form-check-label,
.hw-fun__form .ff-el-image-holder > label:not(.ff-el-image-input-src) {
	display: block;
	padding: .85rem 1rem;
	font-size: var(--text-m);
	font-weight: 600;
	color: var(--shade);
	text-align: center;
	margin: 0;
}

/* Ausgewählt */
.hw-fun__form .ff-el-image-holder:has(input:checked) {
	border-color: var(--primary);
	box-shadow: 0 0 0 4px rgba(122, 172, 63, .22);
}

.hw-fun__form .ff-el-image-holder:has(input:checked) .ff-el-form-check-label { font-weight: 800; }

/* Tastaturbedienung sichtbar machen */
.hw-fun__form .ff-el-image-holder:has(input:focus-visible) {
	outline: 3px solid var(--primary);
	outline-offset: 3px;
}

/* Radio-Punkt ausblenden — die Karte IST die Auswahl */
.hw-fun__form .ff-el-image-holder input[type=radio] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

/* Optionen ohne Bild (Grundstück, Zeitrahmen): ruhige Textkarten */
.hw-fun__form .hw-fun__karten .ff-el-form-check:not(.ff-el-image-holder) {
	border: 2px solid var(--shade-trans-20);
	border-radius: 6px;
	padding: 1.25rem 1rem;
	background: var(--white);
	text-align: center;
	font-size: var(--text-m);
	font-weight: 600;
	cursor: pointer;
	margin: 0;
	transition: border-color .2s ease, transform .2s ease;
}

.hw-fun__form .hw-fun__karten .ff-el-form-check:not(.ff-el-image-holder):hover {
	border-color: var(--primary);
	transform: translateY(-2px);
}

/* Auf Schritt 1 gibt es kein Zurück. */
.hw-fun__form .ff-step-body:first-of-type .ff-btn-prev,
.hw-fun__form .ff_step_start .ff-btn-prev { display: none !important; }

/* Schrittleiste bekommt Luft nach unten */
.hw-fun__form .ff-el-progress { margin-bottom: var(--space-m); }

@media (prefers-reduced-motion: reduce) {
	.hw-fun__form .ff-el-image-holder,
	.hw-fun__form label.ff-el-image-input-src { transition: none; }
	.hw-fun__form .ff-el-image-holder:hover { transform: none; }
	.hw-fun__form .ff-el-image-holder:hover label.ff-el-image-input-src { transform: none; }
}

/* --- Schrittanzeige wie im Referenz-Funnel ---------------------------- */

.hw-fun__form .ff-step-header {
	margin-bottom: var(--space-m);
}

.hw-fun__form .ff-el-progress-status {
	font-family: var(--text-font-family);
	font-size: var(--text-s);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: none;
	color: var(--shade);
	margin-bottom: .5rem;
}

.hw-fun__form .ff-el-progress {
	background: var(--shade-trans-20);
	border-radius: 999px;
	height: 22px;
	overflow: hidden;
}

.hw-fun__form .ff-el-progress-bar {
	background: var(--primary) !important;
	color: var(--shade);
	font-size: var(--text-xs);
	font-weight: 700;
	line-height: 22px;
	text-align: right;
	padding-right: .6rem;
	transition: width .4s cubic-bezier(.2, .7, .3, 1);
}

/* --- Übrige Formularelemente sauber ausrichten ------------------------ */

.hw-fun__form .ff-el-group { margin-bottom: var(--space-m); }

/* Textfelder */
.hw-fun__form .ff-el-form-control {
	width: 100%;
	border: 1px solid var(--shade-trans-20);
	border-radius: 4px;
	padding: .85rem 1rem;
	font-size: var(--text-m);
	line-height: 1.4;
	background: var(--white);
	color: var(--shade);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.hw-fun__form .ff-el-form-control:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(122, 172, 63, .28);
	outline: 2px solid transparent;
}

.hw-fun__form .ff-el-form-control::placeholder { color: var(--shade-trans-40, rgba(31,36,18,.45)); }

/* Pflichtstern und Hilfe-Symbol dezenter */
.hw-fun__form .ff-el-is-required { color: #b32d2e; margin-left: .15rem; }
.hw-fun__form .ff-el-tooltip { opacity: .55; }

/* Zustimmung: Kästchen und Text auf einer Linie */
.hw-fun__form .ff-el-form-check:not(.ff-el-image-holder):has(input[type=checkbox]) {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	border: 0;
	padding: 0;
	background: none;
	text-align: left;
	font-weight: 400;
}

.hw-fun__form .ff-el-form-check:not(.ff-el-image-holder):has(input[type=checkbox]):hover {
	border: 0;
	transform: none;
}

.hw-fun__form input[type=checkbox] {
	width: 1.15rem;
	height: 1.15rem;
	margin-top: .15rem;
	accent-color: var(--primary);
	flex: none;
}

.hw-fun__form .ff-el-form-check-label {
	font-size: var(--text-s);
	line-height: 1.6;
	color: var(--shade-trans-80);
	font-weight: 400;
}

.hw-fun__form .ff-el-form-check-label a {
	color: var(--action);
	text-underline-offset: .2em;
}

/* Fehlermeldungen */
.hw-fun__form .text-danger,
.hw-fun__form .error {
	color: #b32d2e;
	font-size: var(--text-xs);
	margin-top: .35rem;
}

/* Absenden-Zeile */
.hw-fun__form .ff-el-group.ff-text-left,
.hw-fun__form .ff_submit_btn_wrapper {
	margin-top: var(--space-m);
	margin-bottom: 0;
}

/* Fluent Forms setzt die Spaltenzahl selbst (Feldeinstellung im Editor) und
   lädt sein CSS nach dem Theme. Für die Funnel-Optik gilt bei uns: zwei
   Spalten. Deshalb hier ausnahmsweise erzwungen. */
.hw-fun__form .ff_el_checkable_photo_holders {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (max-width: 560px) {
	.hw-fun__form .ff_el_checkable_photo_holders {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* --- Auswahlkarten: Korrektur ----------------------------------------
   Das Bild-Label ist ein Inline-Element mit eigener Breite — es füllte die
   Karte nicht. Und Fluent Forms setzt am Optionsraster kein Gap.
   -------------------------------------------------------------------- */

.hw-fun__form .ff_el_checkable_photo_holders {
	gap: var(--space-s) !important;
}

.hw-fun__form .ff-el-form-check.ff-el-image-holder {
	padding: 0;
	overflow: hidden;
	display: block;
}

/* Bild füllt die Kartenbreite vollständig */
.hw-fun__form label.ff-el-image-input-src {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	aspect-ratio: 3 / 2;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat;
	border-radius: 0;
	margin: 0 !important;
	float: none !important;
}

/* Beschriftung als eigene Zeile darunter */
.hw-fun__form .ff-el-image-holder .ff-el-form-check-label {
	display: block;
	width: 100%;
	padding: .9rem 1rem;
	margin: 0;
	text-align: center;
	border-top: 1px solid var(--shade-trans-20);
}

/* Optionen ohne Bild: gleiche Kartenhöhe, mittig */
.hw-fun__form .hw-fun__karten .ff-el-form-check:not(.ff-el-image-holder) {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 7rem;
}

/* Wert des Schiebereglers gut lesbar unter dem Regler */
.hw-fun__form .hw-fun__reglerwert {
	display: block;
	margin-top: .5rem;
	font-family: var(--h1-font-family);
	font-size: var(--text-l);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--tertiary);
}

.hw-fun__form input[type="range"] {
	width: 100%;
	accent-color: var(--primary);
	height: 1.5rem;
}

/* --- Doppelte Rahmen abräumen ----------------------------------------
   Fluent Forms setzt innerhalb der Option einen eigenen Rahmen. Zusammen mit
   unserem Kartenrahmen ergab das zwei Linien und einen eingerückten Bildrand.
   Der Rahmen gehört nur an die Karte selbst.
   -------------------------------------------------------------------- */

.hw-fun__form .ff-el-image-holder *,
.hw-fun__form .hw-fun__karten .ff-el-form-check * {
	border: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
}

/* Nur die Trennlinie zwischen Bild und Beschriftung bleibt */
.hw-fun__form .ff-el-image-holder .ff-el-form-check-label {
	border-top: 1px solid var(--shade-trans-20) !important;
}

/* --- Icon-Optionen (Grundstück, Zeitrahmen) --------------------------
   Strichgrafiken sollen nicht formatfüllend beschnitten werden wie Fotos,
   sondern mittig und mit Luft stehen.
   -------------------------------------------------------------------- */

.hw-fun__karten--icon label.ff-el-image-input-src {
	background-size: 3.25rem auto !important;
	background-position: center !important;
	background-color: var(--base);
	aspect-ratio: 16 / 9;
}

.hw-fun__karten--icon .ff-el-image-holder:hover label.ff-el-image-input-src {
	transform: none;
	background-color: color-mix(in srgb, var(--primary) 8%, var(--base));
}

.hw-fun__karten--icon .ff-el-image-holder:has(input:checked) label.ff-el-image-input-src {
	background-color: color-mix(in srgb, var(--primary) 14%, var(--base));
}

/* --- Karten ohne Rahmen ----------------------------------------------
   Der 2px-Rahmen kam aus unserer eigenen Regel weiter oben. Karten tragen
   jetzt gar keinen Rahmen mehr — Trennung entsteht über Abstand und einen
   sehr dezenten Schatten. Nur die AUSGEWÄHLTE Karte bekommt einen Ring.
   -------------------------------------------------------------------- */

.hw-fun__form .ff-el-form-check.ff-el-image-holder,
.hw-fun__form .hw-fun__karten .ff-el-form-check {
	border: 0 !important;
	border-radius: 6px;
	background: var(--white);
	box-shadow: 0 1px 3px rgba(31, 36, 18, .06);
	overflow: hidden;
}

.hw-fun__form .ff-el-form-check.ff-el-image-holder:hover,
.hw-fun__form .hw-fun__karten .ff-el-form-check:hover {
	box-shadow: 0 12px 26px rgba(31, 36, 18, .12);
}

/* Auswahl: grüner Ring statt Rahmen — verschiebt nichts im Layout */
.hw-fun__form .ff-el-image-holder:has(input:checked),
.hw-fun__form .hw-fun__karten .ff-el-form-check:has(input:checked) {
	box-shadow: 0 0 0 3px var(--primary), 0 12px 26px rgba(31, 36, 18, .12) !important;
}

/* Auch die Trennlinie unter dem Bild entfällt */
.hw-fun__form .ff-el-image-holder .ff-el-form-check-label {
	border-top: 0 !important;
}

/* --- Karten ganz ohne Schatten ---------------------------------------
   Auch der dezente Schatten ist raus: beim Überfahren wechselte er die
   Größe und wirkte dadurch unruhig. Die Karten stehen jetzt schlicht auf
   der Fläche; die Auswahl markiert ein `outline` — das liegt außerhalb der
   Box und verschiebt deshalb nichts.
   -------------------------------------------------------------------- */

.hw-fun__form .ff-el-form-check.ff-el-image-holder,
.hw-fun__form .hw-fun__karten .ff-el-form-check,
.hw-fun__form .ff-el-form-check.ff-el-image-holder:hover,
.hw-fun__form .hw-fun__karten .ff-el-form-check:hover {
	box-shadow: none !important;
	transform: none !important;
	background: transparent;
}

.hw-fun__form .ff-el-image-holder:has(input:checked),
.hw-fun__form .hw-fun__karten .ff-el-form-check:has(input:checked) {
	box-shadow: none !important;
	outline: 3px solid var(--primary);
	outline-offset: 2px;
	border-radius: 6px;
}

/* Beim Überfahren nur das Bild leicht heranholen — sonst nichts. */
.hw-fun__form .ff-el-image-holder:hover label.ff-el-image-input-src {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.hw-fun__form .ff-el-image-holder:hover label.ff-el-image-input-src { transform: none; }
}

/* Schrittnavigation: „Zurück" links, „Nächste" rechts außen. */
.hw-fun__form .ff-el-group.ff_step_nav,
.hw-fun__form .step-nav,
.hw-fun__form .ff-step-nav {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-xs);
	margin-top: var(--space-m);
}

/* Fluent Forms nutzt teils `float` — im Flex-Kontext wirkungslos, deshalb
   die Position hier ausdrücklich setzen. */
.hw-fun__form .ff-btn-next,
.hw-fun__form .ff-float-right {
	margin-left: auto !important;
	float: none !important;
}

.hw-fun__form .ff-btn-prev { margin-right: auto !important; }

/* --- Schieberegler im CI ---------------------------------------------
   Fluent Forms liefert ein Neongrün mit rosa Griff-Hover. Hier komplett
   überschrieben: Schiene in Sand, gefüllter Teil und Griff in CI-Grün.
   -------------------------------------------------------------------- */

.hw-fun__form input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 8px;
	border-radius: 999px;
	background: var(--base-light);
	outline: none;
	margin: .6rem 0;
}

/* Griff — WebKit */
.hw-fun__form input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--primary);
	border: 3px solid var(--white);
	box-shadow: 0 2px 8px rgba(31, 36, 18, .25);
	cursor: grab;
	transition: transform .15s ease, background-color .15s ease;
}

.hw-fun__form input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
.hw-fun__form input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; background: var(--tertiary); }

/* Griff — Firefox */
.hw-fun__form input[type="range"]::-moz-range-thumb {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--primary);
	border: 3px solid var(--white);
	box-shadow: 0 2px 8px rgba(31, 36, 18, .25);
	cursor: grab;
}

.hw-fun__form input[type="range"]::-moz-range-track {
	height: 8px;
	border-radius: 999px;
	background: var(--base-light);
}

.hw-fun__form input[type="range"]::-moz-range-progress {
	height: 8px;
	border-radius: 999px;
	background: var(--primary);
}

.hw-fun__form input[type="range"]:focus-visible {
	outline: 3px solid var(--primary);
	outline-offset: 4px;
}

/* Fluent Forms' eigene Regler-Optik abräumen */
.hw-fun__form .ff-el-range-wrapper .ff-el-range-fill,
.hw-fun__form .ff_range_fill {
	background: var(--primary) !important;
}

/* Wert unter dem Regler */
.hw-fun__form .hw-fun__reglerwert {
	display: block;
	text-align: left;
	margin-top: .2rem;
	font-family: var(--h1-font-family);
	font-size: var(--text-l);
	font-weight: 700;
	color: var(--tertiary);
}

/* --- Schieberegler: rangeslider.js ------------------------------------
   Fluent Forms versteckt den echten <input type=range> und baut die Optik aus
   eigenen DIVs (rangeslider.js). Natives Regler-Styling greift deshalb nicht —
   die Farbe muss an diese Elemente. Voreinstellung dort: reines Neongrün.
   -------------------------------------------------------------------- */

.hw-fun__form .rangeslider {
	background: var(--base-light) !important;
	height: 10px !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	margin: 1rem 0 .5rem;
}

.hw-fun__form .rangeslider__fill {
	background: var(--primary) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
}

.hw-fun__form .rangeslider__handle {
	width: 28px !important;
	height: 28px !important;
	background: var(--primary) !important;
	border: 3px solid var(--white) !important;
	border-radius: 50% !important;
	box-shadow: 0 2px 10px rgba(31, 36, 18, .28) !important;
	cursor: grab;
	transition: transform .15s ease;
}

.hw-fun__form .rangeslider__handle::after { display: none !important; }
.hw-fun__form .rangeslider__handle:hover { transform: scale(1.1); }
.hw-fun__form .rangeslider__handle:active { cursor: grabbing; background: var(--tertiary) !important; }

/* Fluent Forms zeigt den Rohwert in einem eigenen Feld — wir haben eine
   formatierte Anzeige daneben. Nur eine davon darf sichtbar sein. */
.hw-fun__form .ff_slider_wrapper > *:not(.rangeslider):not(.hw-fun__reglerwert):not(input) {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.hw-fun__form .rangeslider__handle { transition: none; }
	.hw-fun__form .rangeslider__handle:hover { transform: none; }
}

/* Mehr Luft zwischen den Feldern — die Standardabstände von Fluent Forms
   sind für ein Formular dieser Größe zu eng. */
.hw-fun__form .ff-el-group { margin-bottom: var(--space-l) !important; }
.hw-fun__form .ff-el-group:last-of-type { margin-bottom: var(--space-m) !important; }

.hw-fun__form .ff-el-input--label { margin-bottom: .75rem; }

.hw-fun__form .hw-fun__reglerwert { margin-top: .75rem; }

.hw-fun__form .rangeslider { margin: 1.4rem 0 .4rem; }

/* Etwas Abstand zwischen Fragenblock und Schrittnavigation */
.hw-fun__form .ff-el-group.ff_step_nav,
.hw-fun__form .step-nav,
.hw-fun__form .ff-step-nav { margin-top: var(--space-l) !important; }

/* --- Auswahl: Ring INNEN ---------------------------------------------
   Die Karte trägt `overflow: hidden` (rundet das Bild an den Ecken ab) —
   eine `outline` liegt außerhalb der Box und wird davon abgeschnitten.
   Ein Inset-Schatten liegt innerhalb und bleibt vollständig sichtbar.
   Er verschiebt außerdem nichts im Layout.
   -------------------------------------------------------------------- */

.hw-fun__form .ff-el-image-holder:has(input:checked),
.hw-fun__form .hw-fun__karten .ff-el-form-check:has(input:checked) {
	outline: none !important;
	outline-offset: 0 !important;
	box-shadow: inset 0 0 0 3px var(--primary) !important;
}

/* Tastaturfokus ebenfalls innen — sonst wird auch er gekappt. */
.hw-fun__form .ff-el-image-holder:has(input:focus-visible),
.hw-fun__form .hw-fun__karten .ff-el-form-check:has(input:focus-visible) {
	outline: none !important;
	box-shadow: inset 0 0 0 3px var(--tertiary), inset 0 0 0 6px var(--white) !important;
}

/* Beides zugleich: Auswahl gewinnt, Fokus legt einen zweiten Ring darunter. */
.hw-fun__form .ff-el-image-holder:has(input:checked):has(input:focus-visible) {
	box-shadow: inset 0 0 0 3px var(--primary), inset 0 0 0 6px var(--secondary) !important;
}

/* --- Optionen ohne Bild: reine Textkarte ------------------------------
   Fluent Forms legt die Bildfläche auch dann an, wenn der Option kein Bild
   zugewiesen ist — übrig bleibt ein leerer grauer Kasten. Solange kein Icon
   hinterlegt ist, wird die Fläche ausgeblendet und die Option zur
   kompakten Textkarte. Sobald im Editor ein Bild zugewiesen wird, greift
   automatisch wieder die Bilddarstellung.
   -------------------------------------------------------------------- */

.hw-fun__form label.ff-el-image-input-src:not([style*="url"]) {
	display: none !important;
}

/* Karte ohne Bildfläche: Text bekommt den Raum */
.hw-fun__form .ff-el-image-holder:not(:has(label[style*="url"])) {
	min-height: 0;
}

.hw-fun__form .ff-el-image-holder:not(:has(label[style*="url"])) .ff-el-form-check-label {
	padding: 1.5rem 1.25rem;
	font-size: var(--text-m);
	font-weight: 600;
	line-height: 1.35;
	min-height: 5.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--base);
	border-radius: 6px;
	transition: background-color .2s ease;
}

.hw-fun__form .ff-el-image-holder:not(:has(label[style*="url"])):hover .ff-el-form-check-label {
	background: color-mix(in srgb, var(--primary) 10%, var(--base));
}

.hw-fun__form .ff-el-image-holder:not(:has(label[style*="url"])):has(input:checked) .ff-el-form-check-label {
	background: color-mix(in srgb, var(--primary) 16%, var(--base));
	font-weight: 800;
}

/* --- Bildecken sauber ------------------------------------------------
   Bisher rundete nur der Karten-Container (overflow: hidden) — dadurch waren
   die Bilder oben rund und unten eckig, weil die Karte unter dem Bild
   weiterläuft. Da die Karte selbst weder Rahmen noch Fläche trägt, rundet
   jetzt das Bild selbst, umlaufend.
   -------------------------------------------------------------------- */

.hw-fun__form label.ff-el-image-input-src {
	border-radius: 6px !important;
}

/* Der Container darf dann nicht mehr beschneiden — sonst kappt er den
   Auswahlring wieder. */
.hw-fun__form .ff-el-form-check.ff-el-image-holder {
	overflow: visible;
}

/* Auswahlring gehört jetzt ans Bild, nicht an die unsichtbare Karte. */
.hw-fun__form .ff-el-image-holder:has(input:checked) {
	box-shadow: none !important;
}

.hw-fun__form .ff-el-image-holder:has(input:checked) label.ff-el-image-input-src {
	box-shadow: inset 0 0 0 3px var(--primary), 0 0 0 3px var(--primary);
}

.hw-fun__form .ff-el-image-holder:has(input:focus-visible) label.ff-el-image-input-src {
	outline: 3px solid var(--tertiary);
	outline-offset: 3px;
}

/* Textkarten (ohne Bild) behalten ihren Ring am Textfeld. */
.hw-fun__form .ff-el-image-holder:not(:has(label[style*="url"])):has(input:checked) .ff-el-form-check-label {
	box-shadow: inset 0 0 0 3px var(--primary);
}