/**
 * ENTWURF — „Startseite plakativ“ (2026-08). Gilt NUR auf der Kopie
 * (body.hw-plakativ, Page „startseite-plakativ“). Geladen von
 * wp-content/novamira-sandbox/hauswerk-plakativ.php.
 * Rückbau: diese Datei + Sandbox-Datei löschen, Kopie-Seite löschen,
 * hw-plakativ-Stellen in hauswerk-front.js / hauswerk-blocks.css §25 zurücknehmen.
 */

/* Seitliche Fades deutlich kräftiger als auf der regulären Startseite. */
body.hw-plakativ .hw-rev--links  { transform: translateX(-84px); }
/* Vereinheitlicht (Feedback 24.08.): ALLE seitlichen Reveals kommen von
 * links und fahren nach rechts — gegensaetzliche Richtungen wirkten unruhig. */
body.hw-plakativ .hw-rev--rechts { transform: translateX(-84px); }
body.hw-plakativ .hw-rev { transition-duration: 1s, 1s; }

/* Größere Bilder: Referenzkarten deutlich breiter (Original: 250–330px). */
body.hw-plakativ .hw-ref__card { flex: 0 0 clamp(330px, 40vw, 520px); }

@media (max-width: 782px) {
	body.hw-plakativ .hw-ref__card { flex-basis: clamp(270px, 76vw, 360px); }
}

/* Über-uns: Bildspalte dominiert (Original 1.1fr/1fr, Bild in der 2. Spur —
 * bei --bild-links in der 1.). */
body.hw-plakativ .hw-ueb__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
body.hw-plakativ .hw-ueb__grid--bild-links { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }

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

/* Einmaliges Einfahren der Referenzkarten (Zuteilung in hauswerk-front.js,
 * initHomeMotion, nur body.hw-plakativ). fill-mode backwards haelt Karten
 * waehrend ihres Delays unsichtbar; nach dem einen Durchlauf sind sie
 * dauerhaft normal — kein opacity-0-Dauerzustand im Karussell. */
@keyframes hw-fahr-links {
	from { opacity: 0; transform: translateX(-84px); }
	to   { opacity: 1; transform: none; }
}
@keyframes hw-fahr-rechts {
	from { opacity: 0; transform: translateX(84px); }
	to   { opacity: 1; transform: none; }
}
body.hw-plakativ .hw-fahr--links  { animation: hw-fahr-links .75s cubic-bezier(.2, .7, .3, 1) backwards; }
/* gleiche Richtung wie --links (Vereinheitlichung 24.08.) */
body.hw-plakativ .hw-fahr--rechts { animation: hw-fahr-links .75s cubic-bezier(.2, .7, .3, 1) backwards; }

/* Slider full-bleed: vom linken bis zum rechten Bildschirmrand
 * (Kundenwunsch 24.08.). Der 50%/50vw-Trick zieht den Scroller aus dem
 * zentrierten hw-container heraus; overflow-x clip am Body faengt das
 * Scrollbar-Delta von 100vw auf Windows ab. */
body.hw-plakativ { overflow-x: clip; }
body.hw-plakativ .hw-ref__list--scroller {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: 0;
	padding-inline: 0;
	/* Mehr Luft zwischen den Karten als im Original (dort --space-xs ≈ 30px).
	 * Die ACSS-Skala laeuft flach (s/m nur +4/+8px) — erst xl (≈49px,
	 * = --container-gap) ist ein sichtbarer Unterschied. */
	gap: var(--space-xl);
}

/* Alles etwas groesser (Kundenwunsch 24.08.): Kern-Typo der Kopie. */
body.hw-plakativ main h2 { font-size: clamp(2.6rem, 3.6vw, 3.55rem); }
body.hw-plakativ .hw-lead { font-size: clamp(1.15rem, 1.5vw, 1.3rem); }
body.hw-plakativ .hw-trust__value { font-size: clamp(1.9rem, 2.2vw, 2.3rem); }
body.hw-plakativ .hw-trust__label { font-size: .85rem; }
body.hw-plakativ .hw-ref__title { font-size: clamp(1.2rem, 1.5vw, 1.4rem); }
body.hw-plakativ .hw-ref__meta { font-size: .8rem; }
body.hw-plakativ .hw-ueb__claim { font-size: clamp(1.4rem, 1.9vw, 1.7rem); }

/* Kundenstimmen: Bild fuellt die komplette linke Viewport-Haelfte,
 * Inhalt (Headline, Zitat, Dots, Button) wandert in die rechte.
 * Der hw-container ist zentriert, seine Mitte = Viewport-Mitte, deshalb
 * schiebt padding-left: 50% den Inhalt exakt in die rechte Haelfte.
 * Nur Desktop; mobil bleibt das normale Stapel-Layout. */
@media (min-width: 993px) {
	body.hw-plakativ .hw-kst { position: relative; overflow: clip; }
	body.hw-plakativ .hw-kst__media {
		position: absolute;
		inset: 0 50% 0 0;
		height: 100%;
		margin: 0;
		aspect-ratio: auto;
	}
	body.hw-plakativ .hw-kst__media .hw-media__img {
		height: 100%;
		object-fit: cover;
	}
	/* margin auf den Kindern: 50% bezieht sich dort auf die Container-
	 * Content-Breite (Mitte = Viewport-Mitte). padding auf dem Container
	 * wuerde sich auf die volle Sektionsbreite beziehen und die Spalte
	 * zerquetschen. */
	body.hw-plakativ .hw-kst .hw-container > * { margin-left: calc(50% + var(--space-xl)); }
	body.hw-plakativ .hw-kst__grid { grid-template-columns: minmax(0, 1fr); }

	/* Ueber-uns direkt darunter: Teamfoto fuellt die komplette RECHTE Haelfte. */
	body.hw-plakativ .hw-ueb { position: relative; overflow: clip; }
	body.hw-plakativ .hw-ueb__media {
		position: absolute;
		inset: 0 0 0 50%;
		height: 100%;
		margin: 0;
		padding: 0;
		aspect-ratio: auto;
		overflow: clip;
	}
	body.hw-plakativ .hw-ueb__media .hw-media__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		padding: 0;
	}
	body.hw-plakativ .hw-ueb__grid { grid-template-columns: minmax(0, 1fr); }
	body.hw-plakativ .hw-ueb__body { padding-right: calc(50% + var(--space-xl)); }
	body.hw-plakativ .hw-ueb__body .hw-ueb__text { max-width: none; }
}

/* Kontakt: Portrait der Ansprechpartnerin groesser (Original 76px). */
body.hw-plakativ .hw-kon__person-foto { width: 128px; }

/* Ablauf (Kundenwunsch 24.08.): Phasen-Titel als eigene Zeile, die neun
 * Schritte fliessen in 4 Spalten -> TRAEUMEN / 01 02 | PLANEN / 03-06 |
 * WOHNEN / 07-09. display:contents loest die Phasen-Container im Grid auf
 * (deren eigene hw-rev-Box entfaellt dabei; die Schritte animieren einzeln
 * weiter). Texte eine Stufe groesser. */
@media (min-width: 993px) {
	body.hw-plakativ .hw-abl__grid {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: var(--space-m);
	}
	body.hw-plakativ .hw-abl__phase,
	body.hw-plakativ .hw-abl__steps { display: contents; }
	body.hw-plakativ .hw-abl__phase-title {
		grid-column: 1 / -1;
		border-top: 1.5px solid var(--white-trans-30);
		padding-top: var(--space-xs);
		margin-top: var(--space-s);
	}
	body.hw-plakativ .hw-section:not(.hw-section--dark) .hw-abl__phase-title,
	body.hw-plakativ .hw-abl:not(.hw-section--dark) .hw-abl__phase-title,
	/* Farbvariante 5 macht den Ablauf hell, die --dark-Klasse bleibt aber
	 * im Markup — Linien dort explizit dunkel (sonst unsichtbar). */
	html[data-hw-variant="gruen"] body.hw-plakativ .hw-abl__phase-title {
		border-top-color: var(--shade-trans-20);
	}
}
body.hw-plakativ .hw-abl__phase-title { font-size: 1rem; }
body.hw-plakativ .hw-abl__step-text { font-size: 1.05rem; line-height: 1.65; }
body.hw-plakativ .hw-abl__step { font-size: 1.08em; }
/* Step-Layout (Feedback 24.08.): Kopfzeile Icon + grosse Nummer, Text
 * darunter — das Flex-Layout mit fester 1.4rem-Nummernspalte wuerde die
 * groesseren Zahlen sonst zweizeilig umbrechen. */
body.hw-plakativ .hw-abl__step { display: block; }
body.hw-plakativ .hw-abl__step-n {
	display: inline-block;
	width: auto;
	padding-top: 0;
	vertical-align: middle;
	font-size: 1.45rem;
	font-weight: 600;
}
body.hw-plakativ .hw-abl__step-body { margin-top: .55rem; }

/* Referenzkarten (Kundenwunsch 24.08.): Bilder quadratisch statt 3:4,
 * Detailtext der Karten eine Stufe groesser. */
body.hw-plakativ .hw-ref__media { aspect-ratio: 1 / 1; }
body.hw-plakativ .hw-ref__text { font-size: 1.05rem; line-height: 1.6; }

/* Ablauf (Feedback 24.08.): keine Trennlinien mehr unter den einzelnen
 * Schritten — die Phasen-Linien oben reichen. */
body.hw-plakativ .hw-abl__step { border-bottom: none; }

/* Halbseiten-Sektionen (Feedback 24.08.): mehr Luft ueber/unter dem Inhalt
 * und keine Rundungen an den randlosen Bildern. */
@media (min-width: 993px) {
	body.hw-plakativ .hw-kst .hw-container { padding-block: var(--space-xl); }
	body.hw-plakativ .hw-ueb .hw-container { padding-block: var(--space-xl); }
	body.hw-plakativ :is(.hw-kst__media, .hw-ueb__media),
	body.hw-plakativ :is(.hw-kst__media, .hw-ueb__media) .hw-media__img {
		border-radius: 0;
	}
}

/* Ablauf-Icons (Entwurf 24.08.): Linien-Icons ueber jedem Schritt,
 * Akzentfarbe wie die Schrittnummern. */
body.hw-plakativ .hw-abl__icon {
	display: inline-block;
	width: 34px;
	height: 34px;
	vertical-align: middle;
	margin-right: .6rem;
	color: var(--secondary-semi-light);
}
body.hw-plakativ .hw-abl__icon svg { display: block; width: 100%; height: 100%; }
html[data-hw-variant="gruen"] body.hw-plakativ .hw-abl__icon { color: var(--tertiary); }