/*
 * Hauswerk — Block-Styles (hauswerk/*)
 * Portierung von 07_Designentwuerfe/hauswerk-neu/index.html.
 *
 * Grundregeln
 * -----------
 * - AUSSCHLIESSLICH ACSS-Variablen für Farbe, Spacing und Schriftgröße.
 * - Konkrete px/rem nur für Layout-Geometrie, die kein Design-Token ist
 *   (Kartenbreiten, Icon-Größen, Haarlinien-Stärke).
 * - Überschriften bekommen ihre Größe zentral aus ACSS -> hier KEIN font-size auf h1/h2.
 * - `--hw-cols` ist KEIN Design-Token, sondern ein Layout-Parameter, den der Block
 *   inline setzt (Spaltenzahl). Bewusste Ausnahme von der "keine eigenen Variablen"-Regel.
 * - BEM: hw-<block>__<element>--<modifier>.
 *
 * Farb-Mapping Layout -> ACSS
 * ---------------------------------------------------------------------------
 *   Layout            ACSS                  Wert
 *   --hw-gruen        --primary             #7AAC3F   Buttons, Akzentlinien
 *   --hw-limette      --secondary           #C1D100   Hover, Footer-Akzent
 *   --hw-gruen2       --primary-semi-dark   #5c8330   Trust-Zahlen
 *   --hw-gruen-tief   --tertiary            #3F5C1E   dunkle Sektionen
 *   --hw-gruen-dunkel --accent              #243615   Footer-Fläche
 *   --hw-kalk         --base                #F5F3EE   Seitengrund
 *   --hw-sand         --base-light          #e3ddcf   Panels
 *   --hw-linie        --shade-trans-20      rgba(31,36,18,.2)
 *   --hw-ink          --shade               #1F2412   Text
 *   --hw-ink2/-ink3   --shade-trans-80/-70            gedämpfter Text
 */

/* =========================================================================
 * 1. Section-Grundgerüst + gemeinsame Optionen
 * ====================================================================== */

/* ACSS macht aus jedem <section> einen zentrierten Flex-Container
   (`section:where(:not(.bricks-shape-divider))`). Unsere Sections sind reine
   Flächen — die Breite regelt .hw-container. Klasse (0,1,0) schlägt ACSS (0,0,1). */
.hw-section {
	position: relative;
	display: block;
	width: 100%;
	padding-inline: 0;
	gap: 0;
	color: var(--shade);
	-webkit-font-smoothing: antialiased;
}

.hw-section * {
	box-sizing: border-box;
}

/* --- Hintergründe ------------------------------------------------------ */

.hw-section--bg-weiss  { background-color: var(--white); }
.hw-section--bg-kalk   { background-color: var(--base); }
.hw-section--bg-sand   { background-color: var(--base-light); }
.hw-section--bg-gruen  { background-color: var(--primary); }
.hw-section--bg-tief   { background-color: var(--tertiary); }
.hw-section--bg-dunkel { background-color: var(--accent); }
.hw-section--bg-ink    { background-color: var(--shade); }
.hw-section--bg-ohne   { background-color: transparent; }

/* Dunkle Flächen: Text und Linien drehen. */
.hw-section--dark,
.hw-section--dark .hw-lead {
	color: var(--white);
}

.hw-section--dark :is(h1, h2, h3, h4, h5, h6) {
	color: var(--white);
}

/* --white-trans-60 ergibt auf --tertiary nur 3,8:1 — bei 12px zu wenig (AA 4,5:1). */
.hw-section--dark .hw-eyebrow {
	color: var(--white-trans-80);
}

.hw-section--dark p {
	color: var(--white-trans-80);
}

.hw-section--dark .hw-link {
	color: var(--secondary);
}

/* --- Innenabstand ------------------------------------------------------ */

.hw-section--pad-ohne   { padding-block: 0; }
.hw-section--pad-klein  { padding-block: var(--section-space-s); }
.hw-section--pad-normal { padding-block: var(--section-space-m); }
.hw-section--pad-gross  { padding-block: var(--section-space-l); }

/* --- Container --------------------------------------------------------- */

/* display:block ist wichtig — sonst erbt der Container ACSS' Flex-Layout und
   Kinder mit overflow-x (Scroller) bekommen min-width:auto und sprengen die
   Seite. Die Grid-Varianten stehen weiter unten und gewinnen. */
.hw-container {
	display: block;
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Anker-Sprungziele nicht unter den Sticky-Header schieben. */
.hw-section[id],
.hw-abl__step[id] {
	scroll-margin-top: 132px;
}

@media (max-width: 992px) {
	.hw-section[id],
	.hw-abl__step[id] { scroll-margin-top: 92px; }
}

/* =========================================================================
 * 2. Wiederkehrende Bausteine
 * ====================================================================== */

.hw-eyebrow {
	display: block;
	font-size: var(--text-xs);
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--tertiary);
	font-weight: 700;
	margin: 0 0 var(--space-xs) 0;
}

/* Heading-Group: H steht im DOM VOR dem Kicker (Screenreader-Reihenfolge),
   column-reverse dreht die Anzeige. */
.hw-heading-group {
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
	margin-bottom: var(--space-xs);
}

.hw-heading-group__kicker {
	margin: 0 0 var(--space-xs) 0;
}

.hw-heading-group__title {
	margin: 0;
}

.hw-lead {
	line-height: 1.55;
	color: var(--shade-trans-80);
	max-width: 56ch;
	margin: 0;
}

/* Textlinks laut CI: fett, unterstrichen mit Versatz. */
.hw-link {
	color: var(--action);
	font-weight: 700;
	letter-spacing: .02em;
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

/* --- Buttons ----------------------------------------------------------- */
/* Der Look kommt aus ACSS (.btn--primary usw.), hier nur der Pfeil. */

.hw-btn {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
}

.hw-btn::after {
	content: '→';
	font-size: 1.05em;
	line-height: 1;
	display: inline-block;
	transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}

.hw-btn:hover::after {
	transform: translateX(5px);
}

.hw-btn-row {
	display: flex;
	gap: var(--space-xs);
	flex-wrap: wrap;
}

/* --- Scroll-Reveal ----------------------------------------------------- */
/*
 * Elemente gleiten beim ersten Erscheinen sanft ein und rasten ein.
 * Bewusst EINMALIG: das JS ruft `unobserve()`, sobald ein Element sichtbar war —
 * beim Zurückscrollen passiert nichts mehr. Nichts blinkt, nichts wiederholt sich.
 *
 * Die Bewegung ist absichtlich klein (14 px) und die Kurve läuft weich aus,
 * damit es wie ein Einrasten wirkt und nicht wie ein Effekt.
 */

.hw-rev {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity .7s cubic-bezier(.2, .7, .3, 1),
		transform .7s cubic-bezier(.2, .7, .3, 1);
	/* Der Browser darf vorab optimieren, aber nur solange nötig. */
	will-change: opacity, transform;
}

.hw-rev.is-in {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Varianten für Abwechslung — das JS verteilt sie nicht automatisch,
   sie stehen für den bewussten Einsatz im Markup bereit. */
.hw-rev--links  { transform: translateX(-18px); }
.hw-rev--rechts { transform: translateX(18px); }
.hw-rev--zoom   { transform: scale(.97); }

.hw-rev--links.is-in,
.hw-rev--rechts.is-in,
.hw-rev--zoom.is-in {
	transform: none;
}

/* Im Editor nie ausgeblendet — sonst sieht die Redaktion leere Blöcke. */
.editor-styles-wrapper .hw-rev {
	opacity: 1;
	transform: none;
}

/* --- Bewegung reduzieren ----------------------------------------------- */
/* Wer im Betriebssystem „Bewegung reduzieren" gewählt hat, bekommt die Inhalte
   sofort und ohne jede Animation. Das gilt für ALLE Effekte auf der Seite. */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	.hw-rev {
		opacity: 1;
		transform: none;
	}

	.hw-btn:hover::after { transform: none; }
}

/* --- Streifen-Textur --------------------------------------------------- */
/* Projektstandard auf Sandflächen. ACSS bildet das nicht ab, deshalb hier —
   aber mit ACSS-Farbtoken statt rohem rgba(). */

.hw-stripes {
	background-image: repeating-linear-gradient(135deg, var(--tertiary-trans-10) 0 1px, transparent 1px 9px);
}

/* Auf dunklen Flächen mit heller Schraffur. */
.hw-section--dark.hw-stripes {
	background-image: repeating-linear-gradient(135deg, var(--white-trans-10) 0 1px, transparent 1px 9px);
}

/* Nur für Screenreader. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* =========================================================================
 * 3. Medien-System (Cover / Contain / Verhältnis / Fläche)
 * ====================================================================== */

.hw-media {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* Fläche hinter dem Bild — sichtbar bei `contain` und bei Platzhaltern. */
.hw-media--bg-weiss  { background-color: var(--white); }
.hw-media--bg-kalk   { background-color: var(--base); }
.hw-media--bg-sand   { background-color: var(--base-light); }
.hw-media--bg-gruen  { background-color: var(--primary); }
.hw-media--bg-tief   { background-color: var(--tertiary); }
.hw-media--bg-dunkel { background-color: var(--accent); }
.hw-media--bg-ink    { background-color: var(--shade); }
.hw-media--bg-ohne   { background-color: transparent; }

/* Streifentextur auf Sandflächen. */
.hw-media--stripes {
	background-image: repeating-linear-gradient(135deg, var(--tertiary-trans-10) 0 1px, transparent 1px 9px);
}

.hw-media__img {
	display: block;
	width: 100%;
	height: 100%;
}

.hw-media--cover .hw-media__img {
	object-fit: cover;
}

/* Contain: Bild vollständig sichtbar, Fläche drumherum bleibt stehen. */
.hw-media--contain .hw-media__img {
	object-fit: contain;
	padding: var(--space-xs);
}

/* Seitenverhältnisse */
.hw-media--ratio-1-1  { aspect-ratio: 1 / 1; }
.hw-media--ratio-4-3  { aspect-ratio: 4 / 3; }
.hw-media--ratio-3-2  { aspect-ratio: 3 / 2; }
.hw-media--ratio-5-3  { aspect-ratio: 5 / 3; }
.hw-media--ratio-16-9 { aspect-ratio: 16 / 9; }
.hw-media--ratio-3-4  { aspect-ratio: 3 / 4; }
.hw-media--ratio-2-3  { aspect-ratio: 2 / 3; }
.hw-media--ratio-4-5  { aspect-ratio: 4 / 5; }

/* Ohne Verhältnis: Bild bestimmt die Höhe. */
.hw-media:not([class*='hw-media--ratio-']) .hw-media__img {
	height: auto;
}

.hw-media__label {
	font-size: var(--text-xs);
	letter-spacing: .13em;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--tertiary);
	padding: var(--space-xs);
	line-height: 1.7;
}

/* Platzhalter ohne Verhältnis brauchen eine Mindesthöhe. */
.hw-media--placeholder:not([class*='hw-media--ratio-']) {
	min-height: 220px;
}

/* =========================================================================
 * 4. hero-video
 * ====================================================================== */

.hw-hero {
	padding-block: 0 var(--section-space-s);
}

.hw-hero__media {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--accent);
	height: min(calc(100svh - 116px), max(56.25vw, min(100vw, 640px)));
}

@media (max-width: 992px) {
	.hw-hero__media { height: min(calc(100svh - 92px), max(56.25vw, min(100vw, 640px))); }
}

@media (min-width: 1441px) {
	.hw-hero__media { height: min(calc(100svh - 116px), 42.857vw); }
}

.hw-hero__video,
.hw-hero__img,
.hw-hero__placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hw-hero__pause {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 4;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1.5px solid var(--white-trans-70);
	background: var(--shade-trans-50);
	color: var(--white);
	font-size: var(--text-xs);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .25s;
}

.hw-hero__pause:hover {
	background: var(--shade-trans-80);
}

@media (prefers-reduced-motion: reduce) {
	.hw-hero__pause { display: none; }
}

.hw-hero__card {
	position: relative;
	z-index: 3;
	background: var(--white);
	max-width: 820px;
	margin-inline: auto;
	margin-top: clamp(-160px, -11vw, -90px);
	padding: var(--space-xl) var(--space-l);
	text-align: center;
}

.hw-hero__eyebrow {
	display: block;
	font-family: var(--h1-font-family);
	font-size: var(--text-s);
	font-weight: 400;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--shade-trans-80);
	margin: 0 auto var(--space-s);
}

.hw-hero__title {
	margin: 0 auto var(--space-xs);
	text-align: center;
}

.hw-hero__text {
	font-family: var(--h1-font-family);
	color: var(--shade-trans-80);
	line-height: 1.6;
	max-width: 44ch;
	margin: 0 auto var(--space-m);
}

.hw-hero__cta {
	display: flex;
	justify-content: center;
	gap: var(--space-xs);
	flex-wrap: wrap;
}

@media (max-width: 768px) {
	.hw-hero__media { height: clamp(260px, 42vh, 340px); }
	.hw-hero__card { margin-top: -60px; }
	.hw-hero__cta .btn { width: 100%; justify-content: center; }
}

/* =========================================================================
 * 5. trust-band
 * ====================================================================== */

.hw-trust {
	border-block: 1px solid var(--shade-trans-20);
	padding-block: 0;
}

/* Achtung: dieses <ul> trägt gleichzeitig .hw-container. Ein pauschales
   `margin: 0` / `padding: 0` als Listen-Reset würde dessen `margin-inline: auto`
   und `padding-inline` überschreiben — das Band stünde dann linksbündig statt
   zentriert. Deshalb nur die Block-Achse zurücksetzen. */
/* Bewusst OHNE `border-inline`: nur die Trennlinien ZWISCHEN den Spalten stehen,
   außen links/rechts läuft das Band offen aus. */
.hw-trust__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	list-style: none;
	margin-block: 0;
	padding-block: 0;
}

.hw-trust__item {
	padding: var(--space-m) var(--space-xs);
	border-right: 1px solid var(--shade-trans-20);
	text-align: center;
}

.hw-trust__item:last-child {
	border-right: none;
}

.hw-trust__value {
	display: block;
	font-size: var(--text-xl);
	font-weight: 700;
	letter-spacing: -.035em;
	line-height: 1;
	color: var(--primary-semi-dark);
	margin-bottom: .5rem;
}

.hw-trust__label {
	display: block;
	font-size: var(--text-xs);
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--shade-trans-80);
	line-height: 1.7;
}

.hw-section--dark .hw-trust__value { color: var(--secondary); }
.hw-section--dark .hw-trust__label { color: var(--white-trans-70); }

@media (max-width: 768px) {
	.hw-trust__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.hw-trust__item { padding: var(--space-s) var(--space-xs); border-bottom: 1px solid var(--shade-trans-20); }
	.hw-trust__item:nth-child(2n) { border-right: none; }
	.hw-trust__item:nth-child(3),
	.hw-trust__item:nth-child(4) { border-bottom: none; }
}

/* =========================================================================
 * 6. versprechen
 * ====================================================================== */

.hw-vers__head {
	margin-bottom: var(--space-xl);
}

.hw-vers__grid {
	display: grid;
	grid-template-columns: repeat(var(--hw-cols, 5), minmax(0, 1fr));
	border-top: 1px solid var(--shade-trans-20);
	list-style: none;
	margin: 0;
	padding: 0;
}

.hw-vers__item {
	padding: var(--space-s) var(--space-xs) var(--space-s) 0;
	border-right: 1px solid var(--shade-trans-20);
}

.hw-vers__item:last-child {
	border-right: none;
	padding-right: 0;
}

.hw-vers__item:not(:first-child) {
	padding-left: var(--space-xs);
}

.hw-vers__n {
	display: block;
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: .14em;
	color: var(--tertiary);
	margin-bottom: var(--space-s);
}

.hw-vers__title {
	font-family: var(--text-font-family);
	font-size: var(--text-l);
	font-weight: 600;
	letter-spacing: -.025em;
	line-height: 1.15;
	margin: 0 0 .7rem 0;
}

.hw-vers__text {
	line-height: 1.62;
	color: var(--shade-trans-80);
	margin: 0;
}

.hw-section--dark .hw-vers__n { color: var(--secondary); }

@media (max-width: 992px) {
	.hw-vers__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.hw-vers__item {
		border-bottom: 1px solid var(--shade-trans-20);
		padding-left: 0;
		padding-right: var(--space-xs);
	}
	.hw-vers__item:nth-child(2n) { border-right: none; padding-left: var(--space-xs); }
	.hw-vers__item:last-child { border-bottom: none; }
}

@media (max-width: 600px) {
	.hw-vers__grid { grid-template-columns: minmax(0, 1fr); }
	.hw-vers__item { border-right: none; padding-left: 0; padding-right: 0; }
}

/* =========================================================================
 * 7. referenzen — Scroller („Ziegelverband") + Raster
 * ====================================================================== */

.hw-ref__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-s);
	margin-bottom: var(--space-xl);
	flex-wrap: wrap;
}

.hw-ref__intro {
	max-width: 40rem;
}

.hw-ref__arrows {
	display: flex;
	gap: .5rem;
}

.hw-ref__arrow {
	width: 48px;
	height: 48px;
	border: 1.5px solid var(--shade-trans-20);
	background: var(--white);
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: border-color .25s, background .25s, opacity .25s;
}

.hw-ref__arrow:hover {
	border-color: var(--primary);
	background: var(--primary);
}

.hw-ref__arrow:disabled {
	opacity: .3;
	cursor: default;
}

.hw-ref__arrow:disabled:hover {
	border-color: var(--shade-trans-20);
	background: var(--white);
}

.hw-ref__arrow svg {
	width: 15px;
	height: 15px;
	stroke: var(--shade);
	stroke-width: 2;
	fill: none;
}

/* Maus-Drag am Slider (JS: initScroller in hauswerk-front.js).
 * Cursor nur fuer echte Maus-Geraete; waehrend des Zugs den proximity-Snap
 * aus, sonst rastet der Browser mitten in der Bewegung ein. */
@media (hover: hover) and (pointer: fine) {
	.hw-ref__list--scroller { cursor: grab; }
}
.hw-ref__list--scroller.is-dragging {
	cursor: grabbing;
	user-select: none;
	scroll-snap-type: none;
}

/* --- Filter ------------------------------------------------------------ */

.hw-ref__filter {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: var(--space-m);
}

.hw-ref__filter-btn {
	border: 1.5px solid var(--shade-trans-20);
	background: transparent;
	color: var(--shade-trans-80);
	padding: .5rem 1.1rem;
	border-radius: 2px;
	cursor: pointer;
	font-size: var(--text-s);
	font-weight: 600;
	transition: border-color .2s, background .2s, color .2s;
}

.hw-ref__filter-btn:hover {
	border-color: var(--primary);
}

.hw-ref__filter-btn.is-on {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--shade);
}

.hw-ref__card[hidden] {
	display: none;
}

/* --- Liste ------------------------------------------------------------- */

.hw-ref__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hw-ref__list--scroller {
	display: flex;
	gap: var(--space-xs);
	align-items: flex-start;
	overflow-x: auto;
	/* `proximity` statt `mandatory`: mandatory zieht bei jedem programmatischen
	   Scrollen sofort zur nächsten Rastposition und kann dabei animierte
	   Sprünge (Pfeile, Punkte, Loop) blockieren. proximity rastet weich ein,
	   ohne das Scrollen zu behindern.
	   Ebenfalls bewusst KEIN `scroll-behavior: smooth` hier — die Smoothness
	   setzt hauswerk-front.js pro Aufruf über die `behavior`-Option und
	   respektiert dort prefers-reduced-motion. */
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Ohne min-width:0 wächst ein Flex-Item mit seinem Inhalt statt zu scrollen. */
	min-width: 0;

	/*
	 * `overflow-x: auto` zwingt die vertikale Achse mit auf `auto` — sie kann
	 * NICHT `visible` bleiben. Alles, was oben oder unten übersteht, wird also
	 * abgeschnitten. Der Hover hebt das Kartenbild um 6px an; ohne diesen
	 * Freiraum wird genau dieser Streifen samt Hover-Rahmen gekappt.
	 * Das Minus-Margin gleicht den Freiraum optisch wieder aus, damit der Block
	 * an derselben Stelle sitzt wie vorher.
	 */
	padding-top: .75rem;
	margin-top: -.75rem;

	padding-bottom: .5rem;
	margin-inline: calc(-1 * var(--gutter));
	padding-inline: var(--gutter);
	scroll-padding-left: var(--gutter);
}

.hw-ref__list--scroller::-webkit-scrollbar {
	display: none;
}

.hw-ref__list--scroller .hw-ref__card {
	flex: 0 0 clamp(250px, 27vw, 330px);
	scroll-snap-align: start;
}

/*
 * Versatz = Ziegelverband.
 *
 * Bewusst über eine Klasse und NICHT über `:nth-child(2n)`: der Endlos-Loop
 * schiebt vor und hinter die Originale je einen Klon-Satz. `nth-child` zählt
 * dann über alle Karten hinweg — bei ungerader Kartenzahl kippt der Verband am
 * Satzübergang und die Karten springen beim Loop vertikal. Die Klasse vergibt
 * PHP pro Satz, `cloneNode` nimmt sie mit, das Muster bleibt überall gleich.
 */
.hw-ref__list--scroller .hw-ref__card--versetzt {
	margin-top: var(--space-l);
}

.hw-ref__list--raster {
	display: grid;
	grid-template-columns: repeat(var(--hw-cols, 3), minmax(0, 1fr));
	gap: var(--space-m) var(--space-s);
}

.hw-ref__link {
	text-decoration: none;
	color: inherit;
	display: block;
}

.hw-ref__media {
	margin-bottom: var(--space-xs);
	transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.hw-ref__link:hover .hw-ref__media {
	transform: translateY(-6px);
}

/* Ziegel-Andeutung im Hover-Rahmen */
.hw-ref__media::after {
	content: '';
	position: absolute;
	inset: 14px;
	border: 3px solid var(--white);
	opacity: 0;
	clip-path: polygon(0 0, 100% 0, 100% 60%, calc(100% - 3px) 60%, calc(100% - 3px) 80%, 100% 80%, 100% 100%, 0 100%);
	transition: opacity .45s ease;
	pointer-events: none;
}

.hw-ref__link:hover .hw-ref__media::after {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.hw-ref__media,
	.hw-ref__media::after { transition: none; }
	.hw-ref__link:hover .hw-ref__media { transform: none; }
}

.hw-ref__meta {
	font-style: normal;
	font-size: var(--text-xs);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--tertiary);
	font-weight: 700;
	display: block;
	margin-bottom: .5rem;
}

.hw-ref__title {
	font-family: var(--text-font-family);
	font-size: var(--text-m);
	font-weight: 700;
	letter-spacing: -.01em;
	margin: 0 0 .3rem 0;
}

.hw-ref__text {
	font-size: var(--text-s);
	line-height: 1.55;
	color: var(--shade-trans-80);
	margin: 0;
}

.hw-ref__dots {
	display: flex;
	justify-content: center;
	gap: .5rem;
	margin-top: var(--space-m);
}

/* Gleiche Maße wie die Punkte bei den Kundenstimmen (siehe Abschnitt kst):
   sichtbarer Balken 6px, Klickfläche 26px. */
.hw-ref__dots button {
	box-sizing: content-box;
	width: 30px;
	height: 6px;
	padding-block: 10px;
	border: none;
	border-radius: 4px;
	background: var(--shade-trans-20);
	background-clip: content-box;
	cursor: pointer;
	transition: width .25s ease, background-color .25s ease;
}

.hw-ref__dots button:hover {
	background-color: var(--shade-trans-80);
}

.hw-ref__dots button:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 4px;
}

.hw-ref__dots button.is-on {
	width: 46px;
	background-color: var(--primary);
}

.hw-section--dark .hw-ref__dots button { background-color: var(--white-trans-30); }
.hw-section--dark .hw-ref__dots button:hover { background-color: var(--white-trans-70); }
.hw-section--dark .hw-ref__dots button.is-on { background-color: var(--secondary); }

@media (prefers-reduced-motion: reduce) {
	.hw-ref__dots button { transition: none; }
}

.hw-ref__foot {
	text-align: center;
	margin-top: var(--space-m);
}

.hw-ref__note {
	margin: var(--space-xs) 0 0 0;
	font-size: var(--text-xs);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--shade-trans-80);
	font-weight: 700;
}

.hw-section--dark .hw-ref__meta { color: var(--secondary); }
.hw-section--dark .hw-ref__text,
.hw-section--dark .hw-ref__note { color: var(--white-trans-70); }

@media (max-width: 992px) {
	.hw-ref__arrows { display: none; }
	.hw-ref__list--scroller .hw-ref__card { flex-basis: clamp(230px, 66vw, 290px); }
	.hw-ref__list--raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.hw-ref__list--scroller .hw-ref__card:nth-child(2n) { margin-top: var(--space-xs); }
	.hw-ref__list--raster { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
 * 8. ablauf
 * ====================================================================== */

.hw-abl__head {
	margin-bottom: var(--space-m);
	max-width: 44rem;
}

.hw-abl__lead {
	line-height: 1.65;
	margin: 0;
	max-width: 52ch;
}

.hw-abl__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-s);
	align-items: start;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hw-abl__phase {
	border-top: 1.5px solid var(--white-trans-30);
}

.hw-section:not(.hw-section--dark) .hw-abl__phase {
	border-top-color: var(--shade-trans-20);
}

.hw-abl__phase-title {
	font-family: var(--text-font-family);
	font-size: var(--text-xs);
	letter-spacing: .2em;
	text-transform: uppercase;
	font-weight: 500;
	margin: .9rem 0 var(--space-xs) 0;
}

.hw-abl__steps {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hw-abl__step {
	display: flex;
	gap: var(--space-xs);
	padding: .8rem 0;
	border-bottom: 1px solid var(--white-trans-10);
}

.hw-section:not(.hw-section--dark) .hw-abl__step {
	border-bottom-color: var(--shade-trans-10);
}

.hw-abl__step:last-child {
	border-bottom: none;
}

.hw-abl__step-n {
	font-size: var(--text-s);
	/* --secondary auf --tertiary sind nur 4,39:1; die hellere Stufe bleibt
	   limettig und erreicht rund 6,5:1. */
	color: var(--secondary-semi-light);
	flex: none;
	width: 1.4rem;
	padding-top: .2rem;
	font-weight: 500;
}

.hw-section:not(.hw-section--dark) .hw-abl__step-n {
	color: var(--tertiary);
}

.hw-abl__step-title {
	font-family: var(--text-font-family);
	font-size: var(--text-m);
	font-weight: 600;
	letter-spacing: -.02em;
	margin: 0 0 .25rem 0;
}

.hw-abl__step-text {
	font-size: var(--text-s);
	line-height: 1.5;
	margin: 0;
}

.hw-abl__foot {
	margin-top: var(--space-s);
	padding-top: var(--space-xs);
	border-top: 1px solid var(--white-trans-20);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s);
	flex-wrap: wrap;
}

.hw-section:not(.hw-section--dark) .hw-abl__foot {
	border-top-color: var(--shade-trans-20);
}

.hw-abl__foot-text {
	margin: 0;
	max-width: 46ch;
	line-height: 1.6;
}

.hw-abl__video {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	text-decoration: none;
	color: inherit;
}

.hw-abl__video-icon {
	width: 52px;
	height: 52px;
	border: 1.5px solid var(--white-trans-50);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	transition: background .25s, border-color .25s;
}

.hw-section:not(.hw-section--dark) .hw-abl__video-icon {
	border-color: var(--shade-trans-30);
}

.hw-abl__video-icon::after {
	content: '';
	border-left: 9px solid currentColor;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	margin-left: 3px;
}

.hw-abl__video:hover .hw-abl__video-icon {
	background: var(--white-trans-10);
	border-color: currentColor;
}

.hw-abl__video-label {
	font-size: var(--text-xs);
	letter-spacing: .14em;
	text-transform: uppercase;
}

@media (max-width: 992px) {
	.hw-abl__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
}

/* =========================================================================
 * 9. kundenstimmen
 * ====================================================================== */

.hw-kst .hw-heading-group {
	margin-bottom: var(--space-l);
}

.hw-kst__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-l);
	align-items: center;
}

.hw-kst__play,
.hw-vid__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: none;
	cursor: pointer;
	padding: 0;
}

.hw-kst__play-icon,
.hw-vid__play-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--tertiary);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .25s, transform .25s;
}

.hw-kst__play:hover .hw-kst__play-icon,
.hw-vid__play:hover .hw-vid__play-icon {
	background: var(--primary);
	transform: scale(1.06);
}

.hw-kst__play-icon::after,
.hw-vid__play-icon::after {
	content: '';
	border-left: 12px solid var(--white);
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	margin-left: 4px;
}

/* Einzug, auf dem Zitat, Nennung und Punkte gemeinsam sitzen — dadurch bilden
   sie eine Spalte statt drei versetzter Elemente. */
.hw-kst__body {
	--hw-kst-einzug: 3rem;
}

.hw-kst__quote {
	position: relative;
	font-family: var(--h1-font-family);
	font-size: var(--text-l);
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 1.45;
	color: var(--shade);
	margin: 0 0 var(--space-xs) 0;
	padding-left: var(--hw-kst-einzug);

	/* Das Theme gibt jedem <blockquote> einen grauen 4px-Balken mit. Der hat
	   keinen CI-Bezug und wirkt beliebig — hier bewusst abgeräumt, das große
	   Anführungszeichen übernimmt die Rolle. */
	border: 0;
	max-width: 46ch;
}

.hw-section--dark .hw-kst__quote { color: var(--white); }

/* Großes Anführungszeichen als ruhiges Ornament — absolut gesetzt, damit es
   die Zeilenhöhe des Zitats nicht auseinanderzieht. */
.hw-kst__quote::before {
	content: '\201E';
	position: absolute;
	left: 0;

	/* Das öffnende deutsche Anführungszeichen sitzt in seinem Glyphenraum UNTEN.
	   Ohne Korrektur landet es dadurch neben der zweiten oder dritten Zeile.
	   Der negative Versatz zieht es auf die Grundlinie der ERSTEN Zeile —
	   die klassische Setzweise. */
	top: -.58em;
	font-size: 3.6em;
	line-height: 1;
	color: var(--primary);
	opacity: .32;
	pointer-events: none;
}

.hw-section--dark .hw-kst__quote::before {
	color: var(--secondary);
	opacity: .45;
}

.hw-kst__att {
	display: flex;
	align-items: center;
	gap: .7rem;
	font-size: var(--text-xs);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--shade-trans-80);
	margin: 0 0 var(--space-s) 0;
	padding-left: var(--hw-kst-einzug);
}

/* Kurzer Strich als Trenner zwischen Zitat und Nennung. */
.hw-kst__att::before {
	content: '';
	flex: none;
	width: 1.6rem;
	height: 1px;
	background: var(--primary);
}

.hw-section--dark .hw-kst__att::before { background: var(--secondary); }

.hw-kst__dots {
	display: flex;
	gap: .5rem;
	margin-bottom: var(--space-s);
	padding: 0 0 0 var(--hw-kst-einzug);
}

/*
 * Der ursprüngliche 26×2px-Strich war technisch ein Button, sah aber nicht wie
 * eines aus und war praktisch nicht zu treffen. Zwei getrennte Maße lösen das:
 * der sichtbare Balken ist 6px hoch und abgerundet — dick genug, um als
 * Bedienelement gelesen zu werden — und `padding-block` streckt die
 * KLICKFLÄCHE auf 26px, ohne den Balken mitwachsen zu lassen
 * (`background-clip: content-box` hält die Farbe im Kern).
 */
.hw-kst__dot {
	box-sizing: content-box;
	width: 30px;
	height: 6px;
	padding-block: 10px;
	border: none;
	border-radius: 4px;
	background: var(--shade-trans-20);
	background-clip: content-box;
	cursor: pointer;
	transition: width .25s ease, background-color .25s ease;
}

.hw-kst__dot:hover {
	background-color: var(--shade-trans-80);
}

.hw-kst__dot:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 4px;
}

.hw-kst__dot.is-on {
	width: 46px;
	background-color: var(--primary);
}

.hw-section--dark .hw-kst__dot { background-color: var(--white-trans-30); }
.hw-section--dark .hw-kst__dot:hover { background-color: var(--white-trans-70); }
.hw-section--dark .hw-kst__dot.is-on { background-color: var(--secondary); }
.hw-section--dark .hw-kst__dot:focus-visible { outline-color: var(--secondary); }

@media (prefers-reduced-motion: reduce) {
	.hw-kst__dot { transition: none; }
}

@media (max-width: 992px) {
	.hw-kst__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-s); }
	.hw-kst__body { --hw-kst-einzug: 2.2rem; }
}

/* =========================================================================
 * 10. ueber
 * ====================================================================== */

.hw-ueb__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: var(--space-xl);
	align-items: center;
}

.hw-ueb__grid--bild-links .hw-ueb__body { order: 2; }
.hw-ueb__grid--bild-links .hw-ueb__media { order: 1; }

.hw-ueb__text {
	line-height: 1.72;
	color: var(--shade-trans-80);
	margin: 0 0 var(--space-xs) 0;
	max-width: 52ch;
}

.hw-ueb__claim {
	font-family: var(--h1-font-family);
	font-size: var(--text-l);
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--tertiary);
	line-height: 1.45;
	margin: var(--space-s) 0;
	padding-left: var(--space-xs);
	border-left: 3px solid var(--secondary);
	max-width: 52ch;
}

.hw-section--dark .hw-ueb__claim { color: var(--secondary); }

@media (max-width: 992px) {
	.hw-ueb__grid { grid-template-columns: minmax(0, 1fr); }
	.hw-ueb__grid--bild-links .hw-ueb__body,
	.hw-ueb__grid--bild-links .hw-ueb__media { order: initial; }
}

/* =========================================================================
 * 11. partner
 * ====================================================================== */

.hw-par__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-s);
	margin-bottom: var(--space-m);
	flex-wrap: wrap;
}

.hw-par__intro {
	max-width: 38rem;
}

.hw-par__logos {
	display: grid;
	grid-template-columns: repeat(var(--hw-cols, 6), minmax(0, 1fr));
	gap: 1px;
	background: var(--shade-trans-20);
	border: 1px solid var(--shade-trans-20);
	list-style: none;
	margin: 0;
	padding: 0;
}

.hw-par__logo {
	background: var(--base);
	aspect-ratio: 5 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-xs);
	text-align: center;
}

.hw-par__logo-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

.hw-par__logo-img {
	/* Max. 60% der Box (Wunsch Mike 24.08.) — Logos sollen ruhig
	 * wirken und nicht an die Zellkanten stossen. */
	max-width: 60%;
	max-height: 60%;
	width: auto;
	height: auto;
	object-fit: contain;
	/* multiply laesst weisse (nicht freigestellte) Logo-Hintergruende
	 * in der beigen Zellflaeche verschwinden. */
	mix-blend-mode: multiply;
	filter: grayscale(1);
	opacity: .75;
	transition: filter .25s, opacity .25s;
}

.hw-par__logo:hover .hw-par__logo-img {
	filter: none;
	opacity: 1;
}

.hw-par__logo-text {
	font-size: var(--text-xs);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--shade-trans-80);
}

/* Kartenvariante mit Beschreibung */
.hw-par__cards {
	display: grid;
	grid-template-columns: repeat(var(--hw-cols, 3), minmax(0, 1fr));
	gap: var(--space-m) var(--space-s);
	list-style: none;
	margin: 0;
	padding: 0;
}

.hw-par__card {
	background: var(--white);
	display: flex;
	flex-direction: column;
}

.hw-par__card-body {
	padding: var(--space-s);
}

.hw-par__card-meta {
	font-style: normal;
	display: block;
	font-size: var(--text-xs);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--tertiary);
	font-weight: 700;
	margin-bottom: .5rem;
}

.hw-par__card-title {
	font-family: var(--text-font-family);
	font-size: var(--text-m);
	font-weight: 700;
	margin: 0 0 .5rem 0;
}

.hw-par__card-text {
	font-size: var(--text-s);
	line-height: 1.6;
	color: var(--shade-trans-80);
	margin: 0 0 var(--space-xs) 0;
}

@media (max-width: 992px) {
	.hw-par__logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hw-par__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.hw-par__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hw-par__cards { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
 * 12. faq
 * ====================================================================== */

.hw-faq__grid {
	display: grid;
	grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
	gap: var(--space-xl);
	align-items: start;
}

/* Feste Spalten statt automatischer Platzierung: sobald die Werkzeugleiste
   dazukommt, wuerde die Fragenliste sonst in Spalte 1 unter das Intro rutschen. */
.hw-faq__intro { grid-column: 1; grid-row: 1; }
.hw-faq__list  { grid-column: 2; }

.hw-faq__list {
	border-top: 1px solid var(--shade-trans-20);
}

.hw-faq__item {
	border-bottom: 1px solid var(--shade-trans-20);
}

.hw-faq__question {
	list-style: none;
	cursor: pointer;
	padding: var(--space-xs) var(--space-m) var(--space-xs) 0;
	position: relative;
	font-size: var(--text-m);
	font-weight: 600;
	letter-spacing: -.015em;
	line-height: 1.4;
	color: var(--shade);
}

.hw-section--dark .hw-faq__question { color: var(--white); }

.hw-faq__question::-webkit-details-marker {
	display: none;
}

/* Plus/Minus aus zwei Flächen */
.hw-faq__question::after {
	content: '';
	position: absolute;
	right: .4rem;
	top: 1.75rem;
	width: 13px;
	height: 13px;
	background:
		linear-gradient(var(--tertiary), var(--tertiary)) center / 13px 1.5px no-repeat,
		linear-gradient(var(--tertiary), var(--tertiary)) center / 1.5px 13px no-repeat;
	transition: transform .3s ease;
}

.hw-faq__item[open] .hw-faq__question::after {
	background: linear-gradient(var(--tertiary), var(--tertiary)) center / 13px 1.5px no-repeat;
}

.hw-faq__answer p {
	margin: 0 0 var(--space-xs) 0;
	padding-right: var(--space-l);
	line-height: 1.68;
	color: var(--shade-trans-80);
}

@media (max-width: 992px) {
	.hw-faq__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-s); }
}

/* =========================================================================
 * 13. kontakt
 * ====================================================================== */

/* Der Layout-Entwurf hatte hier zwei Ebenen: weisser Vorlauf oben, darunter
   eine fest sandfarbene Flaeche mit eingebauten Streifen. Das hat die
   Hintergrundfarb-Auswahl im Block ausgehebelt — sie faerbte nur den schmalen
   Vorlauf, waehrend die sichtbare Flaeche immer sandfarben blieb.
   Seit 31.07.2026 ist der Block eine durchgehende Flaeche und verhaelt sich wie
   jeder andere: `hw-section--bg-*` faerbt, `hw-stripes` schraffiert.
   Panel und Abstand deshalb NICHT mehr hier setzen — das macht
   `hw-section--pad-*` aus der Darstellungs-Auswahl.
   `.hw-kon__panel` bleibt als Wrapper im Markup, traegt aber bewusst kein CSS. */

.hw-kon__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-xl);
	align-items: start;
}

.hw-kon__text {
	line-height: 1.6;
	color: var(--shade-trans-80);
	max-width: 44ch;
	margin: 0 0 var(--space-m) 0;
}

.hw-kon__person {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	padding-top: var(--space-s);
	border-top: 1px solid var(--shade-trans-20);
}

.hw-kon__person-foto {
	width: 76px;
	flex: none;
	border-radius: 50%;
}

.hw-kon__person-name {
	display: block;
	font-weight: 700;
	margin-bottom: .25rem;
}

.hw-kon__person-kontakt {
	font-size: var(--text-s);
	color: var(--shade-trans-80);
	line-height: 1.6;
	display: block;
}

.hw-kon__form {
	background: var(--white);
	padding: clamp(var(--space-s), 3.5vw, var(--space-l));
}

/* Fluent Forms an die Layout-Sprache angleichen (nur ACSS-Tokens). */
.hw-kon__form .ff-el-input--label label,
.hw-form__body .ff-el-input--label label {
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--shade-trans-80);
	margin-bottom: .45rem;
}

.hw-kon__form :is(input[type='text'], input[type='email'], input[type='tel'], textarea, select),
.hw-form__body :is(input[type='text'], input[type='email'], input[type='tel'], textarea, select) {
	width: 100%;
	border: 1px solid var(--shade-trans-20);
	background: var(--white);
	border-radius: 2px;
	padding: .85rem .95rem;
	color: var(--shade);
	transition: border-color .2s;
}

.hw-kon__form textarea,
.hw-form__body textarea {
	min-height: 120px;
	resize: vertical;
}

/* Fluent Forms bringt eigene Farben mit, die die Kontrastprüfung reißen:
   der Submit-Button hätte weißen Text auf CI-Grün (2,7:1), die Zustimmungs-
   Zeile ein helles Grau (2,7:1). Beides hier auf die Projektfarben ziehen. */
.hw-kon__form .ff-btn-submit,
/* Der `.fluentform`-Wrapper steht bewusst mit im Selektor: Fluent Forms bringt
   fuer den Absenden-Button eigene Regeln derselben Spezifitaet mit und laedt
   sein CSS nach dem Theme — ohne diese dritte Klasse gewinnt das Plugin und
   Padding wie Schriftstaerke bleiben auf den Plugin-Werten stehen. */
.hw-kon__form .fluentform .ff-btn,
.hw-kon__form .fluentform .ff-btn-submit,
.hw-form__body .fluentform .ff-btn,
.hw-form__body .fluentform .ff-btn-submit {
	/* inline-flex statt inline-block: sonst sitzt der Pfeil nicht auf einer
	   Linie mit der Beschriftung. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	width: 100%;
	cursor: pointer;
	background-color: var(--primary);
	color: var(--shade);
	border-color: var(--primary);
	font-weight: 800;
	letter-spacing: .01em;
	padding: var(--space-xs) var(--space-m);
	line-height: 1.4;
	height: auto;
}

/* Pfeil wie bei allen anderen Buttons (.hw-btn). Fluent Forms rendert den
   Absenden-Button selbst, deshalb hier eigens nachgebaut statt der Klasse. */
.hw-form__body .ff-btn-submit::after,
.hw-kon__form .ff-btn::after,
.hw-form__body .ff-btn::after {
	content: '→';
	font-size: 1.05em;
	line-height: 1;
	display: inline-block;
	transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}

.hw-form__body .ff-btn-submit:hover::after,
.hw-kon__form .ff-btn:hover::after,
.hw-form__body .ff-btn:hover::after {
	transform: translateX(5px);
}

@media (prefers-reduced-motion: reduce) {
	.hw-form__body .ff-btn-submit:hover::after,
	.hw-kon__form .ff-btn:hover::after,
	.hw-form__body .ff-btn:hover::after { transform: none; }
}

.hw-kon__form .ff-btn-submit:hover,
.hw-form__body .ff-btn-submit:hover,
.hw-kon__form .ff-btn:hover,
.hw-form__body .ff-btn:hover {
	background-color: var(--secondary);
	border-color: var(--secondary);
	color: var(--shade);
}

/* Zustimmungszeile (DSGVO) inklusive Link */
.hw-kon__form :is(.ff-el-form-check-label, .ff-el-form-check-label span),
.hw-form__body :is(.ff-el-form-check-label, .ff-el-form-check-label span) {
	color: var(--shade-trans-80);
	font-size: var(--text-s);
	line-height: 1.6;
}

.hw-kon__form .ff-el-form-check-label a,
.hw-form__body .ff-el-form-check-label a {
	color: var(--action);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

/* Pflichtfeld-Sternchen und Fehlermeldungen lesbar halten */
.hw-kon__form .ff-el-is-error .text-danger,
.hw-form__body .ff-el-is-error .text-danger {
	color: var(--danger-dark, #a4231c);
	font-size: var(--text-s);
}

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

/* =========================================================================
 * 14. page-header
 * ====================================================================== */

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

.hw-ph__inner {
	display: grid;
	gap: var(--space-l);
	align-items: center;
}

.hw-ph--mit-bild .hw-ph__inner {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.hw-ph__lead {
	margin-top: var(--space-xs);
}

.hw-ph .hw-btn-row {
	margin-top: var(--space-s);
}

@media (max-width: 992px) {
	.hw-ph--mit-bild .hw-ph__inner { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
 * 15. text-columns
 * ====================================================================== */

.hw-txt__head {
	margin-bottom: var(--space-l);
	max-width: 52rem;
}

.hw-txt__grid {
	display: grid;
	grid-template-columns: repeat(var(--hw-cols, 3), minmax(0, 1fr));
	gap: var(--space-l) var(--space-m);
}

.hw-txt__title {
	font-family: var(--text-font-family);
	font-size: var(--text-l);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.2;
	margin: 0 0 .7rem 0;
}

.hw-txt__text {
	line-height: 1.7;
	color: var(--shade-trans-80);
	margin: 0 0 var(--space-xs) 0;
}

.hw-txt__link {
	display: inline-block;
	margin-top: .3rem;
}

@media (max-width: 992px) {
	.hw-txt__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

/* =========================================================================
 * 16. cta
 * ====================================================================== */

/* Durchgehend zentriert.
   Vorher stand der Block auf `space-between`: Überschrift und Buttons landeten
   dadurch mittig, der Fließtext aber linksbündig darunter — halb zentriert,
   halb nicht. Jetzt richtet sich alles an derselben Mittelachse aus. */
.hw-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-s);
	text-align: center;
}

.hw-cta__body {
	max-width: 48rem;
	margin-inline: auto;
}

.hw-cta__body .hw-heading-group {
	margin-bottom: 0;
	align-items: center;
}

.hw-cta__text {
	margin: var(--space-xs) auto 0 auto;
	line-height: 1.6;
	max-width: 52ch;
}

.hw-cta__buttons {
	display: flex;
	gap: var(--space-xs);
	flex-wrap: wrap;
	flex: none;
	justify-content: center;
}

/* =========================================================================
 * 17. galerie
 * ====================================================================== */

.hw-gal__head {
	margin-bottom: var(--space-l);
}

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

.hw-gal__link {
	display: block;
	text-decoration: none;
}

.hw-gal__media {
	transition: transform .4s cubic-bezier(.2, .7, .3, 1);
}

.hw-gal__link:hover .hw-gal__media {
	transform: scale(1.02);
}

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

@media (max-width: 992px) {
	.hw-gal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

/* --- Lightbox ---------------------------------------------------------- */

.hw-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: var(--shade-trans-90);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-m);
}

.hw-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.hw-lightbox__close {
	position: absolute;
	top: var(--space-xs);
	right: var(--space-xs);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1.5px solid var(--white-trans-50);
	background: transparent;
	color: var(--white);
	font-size: var(--text-l);
	line-height: 1;
	cursor: pointer;
}

.hw-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1.5px solid var(--white-trans-50);
	background: transparent;
	color: var(--white);
	cursor: pointer;
	font-size: var(--text-l);
	line-height: 1;
}

.hw-lightbox__nav--prev { left: var(--space-xs); }
.hw-lightbox__nav--next { right: var(--space-xs); }

/* =========================================================================
 * 18. timeline
 * ====================================================================== */

.hw-tl__head {
	margin-bottom: var(--space-l);
}

.hw-tl__list {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

/* Durchgehende Linie */
.hw-tl__list::before {
	content: '';
	position: absolute;
	left: 7px;
	top: 8px;
	bottom: 8px;
	width: 1px;
	background: var(--shade-trans-20);
}

.hw-section--dark .hw-tl__list::before {
	background: var(--white-trans-20);
}

.hw-tl__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-s);
	padding-bottom: var(--space-l);
	position: relative;
}

.hw-tl__item:last-child {
	padding-bottom: 0;
}

.hw-tl__marker {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 3px solid var(--primary);
	background: var(--white);
	margin-top: .35rem;
	flex: none;
}

.hw-section--dark .hw-tl__marker {
	background: var(--tertiary);
	border-color: var(--secondary);
}

.hw-tl__jahr {
	display: block;
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: .14em;
	color: var(--tertiary);
	margin-bottom: .4rem;
}

.hw-section--dark .hw-tl__jahr { color: var(--secondary); }

.hw-tl__title {
	font-family: var(--text-font-family);
	font-size: var(--text-l);
	font-weight: 600;
	letter-spacing: -.02em;
	margin: 0 0 .5rem 0;
}

.hw-tl__text {
	line-height: 1.7;
	color: var(--shade-trans-80);
	margin: 0 0 var(--space-xs) 0;
	max-width: 60ch;
}

.hw-tl__media {
	grid-column: 2;
	max-width: 420px;
	margin-top: var(--space-xs);
}

/* =========================================================================
 * 19. team
 * ====================================================================== */

.hw-team__head {
	margin-bottom: var(--space-l);
}

.hw-team__gruppe + .hw-team__gruppe {
	margin-top: var(--space-xl);
}

.hw-team__gruppe-title {
	font-family: var(--text-font-family);
	font-size: var(--text-xs);
	letter-spacing: .2em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--tertiary);
	margin: 0 0 var(--space-s) 0;
	padding-bottom: var(--space-xs);
	border-bottom: 1px solid var(--shade-trans-20);
}

.hw-section--dark .hw-team__gruppe-title {
	color: var(--secondary);
	border-bottom-color: var(--white-trans-20);
}

.hw-team__grid {
	display: grid;
	grid-template-columns: repeat(var(--hw-cols, 4), minmax(0, 1fr));
	gap: var(--space-m) var(--space-s);
	list-style: none;
	margin: 0;
	padding: 0;
}

.hw-team__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.hw-team__media {
	margin-bottom: var(--space-xs);
	transition: transform .4s cubic-bezier(.2, .7, .3, 1);
}

.hw-team__link:hover .hw-team__media {
	transform: translateY(-5px);
}

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

.hw-team__name {
	font-family: var(--text-font-family);
	font-size: var(--text-m);
	font-weight: 700;
	letter-spacing: -.01em;
	margin: 0 0 .2rem 0;
}

.hw-team__funktion {
	font-size: var(--text-s);
	color: var(--shade-trans-80);
	margin: 0;
	line-height: 1.5;
}

.hw-team__kontakt {
	margin: .5rem 0 0 0;
	font-size: var(--text-s);
	display: flex;
	flex-direction: column;
	gap: .15rem;
}

@media (max-width: 992px) {
	.hw-team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
	.hw-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

/* =========================================================================
 * 20. stellen
 * ====================================================================== */

.hw-job__head {
	margin-bottom: var(--space-l);
}

.hw-job__gruppe + .hw-job__gruppe {
	margin-top: var(--space-xl);
}

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

.hw-job__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-xs);
}

.hw-job__card {
	border: 1px solid var(--shade-trans-20);
	background: var(--white);
	transition: border-color .25s, transform .25s;
}

.hw-job__card:hover {
	border-color: var(--primary);
	transform: translateY(-2px);
}

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

.hw-job__link {
	display: block;
	padding: var(--space-s);
	text-decoration: none;
	color: inherit;
}

.hw-job__title {
	font-family: var(--text-font-family);
	font-size: var(--text-l);
	font-weight: 600;
	letter-spacing: -.02em;
	margin: 0 0 .4rem 0;
}

.hw-job__meta {
	font-size: var(--text-xs);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tertiary);
	font-weight: 700;
	margin: 0 0 .6rem 0;
}

.hw-job__text {
	line-height: 1.6;
	color: var(--shade-trans-80);
	margin: 0 0 var(--space-xs) 0;
	max-width: 70ch;
}

.hw-job__more {
	font-size: var(--text-s);
	font-weight: 700;
	color: var(--action);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

.hw-job__leer {
	color: var(--shade-trans-80);
	line-height: 1.7;
}

/* =========================================================================
 * 21. video
 * ====================================================================== */

.hw-vid__head {
	margin-bottom: var(--space-l);
}

.hw-vid__hinweis {
	margin: var(--space-xs) 0 0 0;
	font-size: var(--text-s);
	color: var(--shade-trans-80);
	max-width: 70ch;
}

.hw-section--dark .hw-vid__hinweis { color: var(--white-trans-70); }

/* Der eingehängte Player füllt die Fläche. */
.hw-media__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* =========================================================================
 * 22. formular
 * ====================================================================== */

.hw-form__inner--schmal {
	max-width: 46rem;
	margin-inline: auto;
}

.hw-form__head {
	margin-bottom: var(--space-s);
}

.hw-form__text {
	line-height: 1.7;
	color: var(--shade-trans-80);
	margin: 0 0 var(--space-s) 0;
}

.hw-form__body {
	background: var(--white);
	padding: clamp(var(--space-s), 3.5vw, var(--space-l));
}

.hw-section--bg-weiss .hw-form__body {
	background: var(--base);
}

/* =========================================================================
 * 23. Detailseiten (single-*.php)
 * ====================================================================== */

/* --- Fließtext aus dem Editor ------------------------------------------ */

.hw-prosa {
	max-width: 70ch;
}

.hw-prosa > * + * {
	margin-top: var(--space-xs);
}

.hw-prosa p,
.hw-prosa li {
	line-height: 1.7;
	color: var(--shade-trans-80);
}

.hw-prosa :is(ul, ol) {
	padding-left: 1.3em;
}

.hw-prosa li + li {
	margin-top: .4rem;
}

.hw-prosa :is(h2, h3, h4) {
	margin-top: var(--space-s);
}

/* --- Person / Partner -------------------------------------------------- */

.hw-person__grid {
	display: grid;
	grid-template-columns: minmax(0, 24rem) 1fr;
	gap: var(--space-l);
	align-items: start;
}

.hw-person__zitat {
	font-family: var(--h1-font-family);
	font-size: var(--text-l);
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 1.4;
	color: var(--tertiary);
	margin: 0 0 var(--space-s) 0;
	padding-left: var(--space-xs);
	border-left: 3px solid var(--secondary);
	max-width: 52ch;
}

.hw-person__kontakt {
	list-style: none;
	margin: var(--space-s) 0 0 0;
	padding: var(--space-s) 0 0 0;
	border-top: 1px solid var(--shade-trans-20);
	display: grid;
	gap: .6rem;
}

.hw-person__kontakt-label {
	display: block;
	font-size: var(--text-xs);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--shade-trans-80);
	font-weight: 700;
	margin-bottom: .15rem;
}

.hw-person__zurueck {
	margin-top: var(--space-s);
}

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

/* --- Stellen-Detail ---------------------------------------------------- */

.hw-job__detail {
	display: grid;
	gap: var(--space-l);
	max-width: 58rem;
}

.hw-job__block-title {
	font-family: var(--text-font-family);
	font-size: var(--text-l);
	font-weight: 600;
	letter-spacing: -.02em;
	margin: 0 0 var(--space-xs) 0;
	padding-bottom: var(--space-xs);
	border-bottom: 1px solid var(--shade-trans-20);
}

/* =========================================================================
 * 24. Editor
 * ====================================================================== */

.editor-styles-wrapper .hw-section {
	max-width: 100%;
}

/* =========================================================================
 * 24. karte (Google Maps mit Einwilligung)
 * ====================================================================== */

.hw-karte__lead {
	max-width: 60ch;
	line-height: 1.6;
	color: var(--shade-trans-80);
	margin: 0 0 var(--space-s) 0;
}

.hw-karte__rahmen {
	position: relative;
	background: var(--base-light);
	background-image: repeating-linear-gradient(135deg, var(--tertiary-trans-10) 0 1px, transparent 1px 9px);
	display: grid;
	place-items: center;
	overflow: hidden;
}

.hw-karte__rahmen--klein  { min-height: clamp(220px, 30vw, 320px); }
.hw-karte__rahmen--normal { min-height: clamp(300px, 42vw, 460px); }
.hw-karte__rahmen--gross  { min-height: clamp(380px, 55vw, 620px); }

/* Der Einwilligungs-Dialog: bewusst schlicht und ohne externe Ressourcen. */
.hw-karte__abfrage {
	max-width: 46ch;
	padding: var(--space-m) var(--space-s);
	text-align: center;
}

.hw-karte__adresse {
	font-weight: 700;
	line-height: 1.5;
	color: var(--shade);
	margin: 0 0 var(--space-xs) 0;
}

.hw-karte__hinweis {
	font-size: var(--text-s);
	line-height: 1.6;
	color: var(--shade-trans-80);
	margin: 0 0 var(--space-s) 0;
}

.hw-karte__links {
	font-size: var(--text-xs);
	margin: var(--space-xs) 0 0 0;
	color: var(--shade-trans-80);
}

.hw-karte__links a {
	color: var(--action);
	text-underline-offset: .2em;
}

/* Geladene Karte füllt den Rahmen. */
.hw-karte__rahmen.is-geladen {
	background-image: none;
	display: block;
}

.hw-karte__frame {
	display: block;
	width: 100%;
	height: 100%;
	min-height: inherit;
	border: 0;
}

.hw-karte__widerruf {
	margin: var(--space-xs) 0 0 0;
	text-align: right;
}

.hw-karte__widerruf-btn {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: var(--text-xs);
	color: var(--shade-trans-80);
	text-decoration: underline;
	text-underline-offset: .2em;
	cursor: pointer;
}

.hw-karte__widerruf-btn:hover { color: var(--shade); }

.hw-section--dark .hw-karte__adresse { color: var(--white); }
.hw-section--dark .hw-karte__hinweis,
.hw-section--dark .hw-karte__links { color: var(--white-trans-70); }

/* --- Kundenstimmen als Liste (Darstellung „liste") --------------------- */

.hw-kst--liste .hw-kst__head {
	margin-bottom: var(--space-l);
}

.hw-kst__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--section-space-s);
}

.hw-kst__eintrag {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-l);
	align-items: center;
}

/* Zitat steht im Markup VOR dem Bild — die Lesereihenfolge bleibt dadurch in
   jeder Zeile gleich. Nur optisch wird jede zweite Zeile gespiegelt. */
.hw-kst__eintrag-text { grid-column: 1; grid-row: 1; }
.hw-kst__eintrag-bild { grid-column: 2; grid-row: 1; }

.hw-kst__eintrag:nth-child(even) .hw-kst__eintrag-text { grid-column: 2; }
.hw-kst__eintrag:nth-child(even) .hw-kst__eintrag-bild { grid-column: 1; }

/* In der Liste trägt jedes Zitat sein eigenes Anführungszeichen. */
.hw-kst--liste .hw-kst__eintrag-text { --hw-kst-einzug: 3rem; }

.hw-kst--liste .hw-kst__att {
	margin-bottom: 0;
}

.hw-kst__foot {
	margin-top: var(--section-space-s);
	text-align: center;
}

@media (max-width: 860px) {
	.hw-kst__eintrag {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-s);
	}

	/* Auf schmalen Screens immer Bild oben, Text darunter. */
	.hw-kst__eintrag-bild,
	.hw-kst__eintrag:nth-child(even) .hw-kst__eintrag-bild { grid-column: 1; grid-row: 1; }
	.hw-kst__eintrag-text,
	.hw-kst__eintrag:nth-child(even) .hw-kst__eintrag-text { grid-column: 1; grid-row: 2; }
}

/* --- FAQ: Suche und Themenfilter -------------------------------------- */

.hw-faq__werkzeuge {
	grid-column: 2;
	grid-row: 1;
	margin-bottom: var(--space-s);
}

.hw-faq__suchfeld {
	width: 100%;
	max-width: 34rem;
	border: 1px solid var(--shade-trans-20);
	border-radius: 3px;
	background: var(--white);
	padding: .7rem .9rem;
	font-size: var(--text-s);
	color: var(--shade);
}

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

.hw-faq__filter {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: var(--space-xs);
}

.hw-faq__chip {
	border: 1px solid var(--shade-trans-20);
	border-radius: 999px;
	background: transparent;
	padding: .38rem .85rem;
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--shade-trans-80);
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.hw-faq__chip:hover {
	border-color: var(--primary);
	color: var(--shade);
}

.hw-faq__chip:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.hw-faq__chip.is-on {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--shade);
}

.hw-faq__treffer {
	margin: var(--space-xs) 0 0 0;
	font-size: var(--text-xs);
	letter-spacing: .06em;
	color: var(--shade-trans-80);
	min-height: 1.2em;
}

.hw-faq__leer {
	margin: var(--space-s) 0 0 0;
	padding: var(--space-s);
	background: var(--base);
	border-left: 3px solid var(--primary);
	line-height: 1.6;
	color: var(--shade-trans-80);
}

@media (prefers-reduced-motion: reduce) {
	.hw-faq__chip { transition: none; }
}

@media (max-width: 992px) {
	.hw-faq__intro,
	.hw-faq__werkzeuge,
	.hw-faq__list { grid-column: 1; grid-row: auto; }
}

/* ======================================================================
 * 24. Rechtsseiten: nackte Editor-Blöcke (Impressum, Datenschutz)
 *
 * Diese Seiten bestehen unterhalb des Page-Headers aus rohen core-Blöcken
 * und rendern direkt in main#brx-content (Bricks-WordPress-Content). Ohne
 * theme.json-contentSize (Projektregel — bricht Bricks/ACSS-Container)
 * liefen sie randlos in den Themen-Defaults auf. Gleiche Optik wie
 * .hw-prosa auf den Detailseiten, plus Containerbreite und Abschluss.
 * Trifft nur Top-Level-Elemente — hauswerk-Sektionen (section.hw-section)
 * bleiben unberührt.
 * ====================================================================== */

#brx-content.wordpress > :is(h2, h3, h4, p, ul, ol) {
	/* rem statt ch: ch skaliert mit der Elementschrift und würde
	 * Headings und Absätze auf verschiedene Kanten zentrieren. */
	max-width: 46rem;
	margin-inline: auto;
	padding-inline: var(--gutter, 1.25rem);
}

#brx-content.wordpress > :is(h2, h3, h4) {
	/* Sans wie die Spalten-Titel darüber — nicht die globale Serif-Heading-Schrift. */
	font-family: inherit;
	font-weight: 600;
	font-size: var(--text-l);
	line-height: 1.3;
	margin-top: var(--space-m);
	margin-bottom: var(--space-xs);
}

#brx-content.wordpress > p,
#brx-content.wordpress > :is(ul, ol) {
	line-height: 1.7;
	color: var(--shade-trans-80);
	margin-bottom: var(--space-xs);
}

#brx-content.wordpress > :is(ul, ol) {
	padding-left: calc(var(--gutter, 1.25rem) + 1.3em);
}

/* Nur nackte Textelemente (Rechtsseiten) — Sektionen enden buendig am
 * Footer, sonst entsteht auf allen anderen Seiten ein Streifen davor. */
#brx-content.wordpress > :is(h2, h3, h4, p, ul, ol):last-child {
	margin-bottom: var(--space-xl);
}

/* ======================================================================
 * 25. Startseite: kräftigere Bewegung (Kundenwunsch 08/2026)
 *
 * Nur body.home — Unterseiten behalten die dezenten Reveals aus § Reveal.
 * Die Klassen hw-wort/hw-wortzeile/hw-plx vergibt hauswerk-front.js
 * (initHomeMotion/initHomeParallax). prefers-reduced-motion greift über
 * den globalen Reduce-Block; das Wort-JS baut dann gar nicht erst um.
 * ====================================================================== */

:is(body.home, body.hw-plakativ) .hw-rev {
	transform: translateY(38px);
	transition-duration: .85s, .85s;
}

:is(body.home, body.hw-plakativ) .hw-rev--links  { transform: translateX(-46px); }
:is(body.home, body.hw-plakativ) .hw-rev--rechts { transform: translateX(46px); }
:is(body.home, body.hw-plakativ) .hw-rev--zoom   { transform: scale(.9) translateY(24px); }

:is(body.home, body.hw-plakativ) .hw-rev.is-in { transform: none; }

/* Parallax-Elemente: keine konkurrierenden Transitions auf transform. */
:is(body.home, body.hw-plakativ) .hw-plx {
	transition: none;
	will-change: transform;
}

/* Überschriften Wort für Wort. Delay je Wort kommt inline aus dem JS. */
:is(body.home, body.hw-plakativ) .hw-wort {
	display: inline-block;
	opacity: 0;
	transform: translateY(.55em);
	transition:
		opacity .55s cubic-bezier(.2, .7, .3, 1),
		transform .55s cubic-bezier(.2, .7, .3, 1);
}

:is(body.home, body.hw-plakativ) .hw-wortzeile.is-in .hw-wort {
	opacity: 1;
	transform: none;
}