/* Webux Page-Hero (field block) - frontend.
   Pixel-ported from the original .lv-ueber-uns-intro design. */
.webux-page-hero {
	box-sizing: border-box;
	/* Configurable, applies in ALL modes (set by render.php from the block's
	   "Mindesthöhe" field). Lets every subpage hero share one height. */
	min-height: var(--webux-hero-minh, 0);
	padding-block: 96px 88px;
	border-bottom: 1px solid var(--wp--preset--color--border, #ece7de);
}

/* Non-cover heroes (split / none): center content vertically within the
   configured min-height so it lines up with the cover heroes. */
.webux-page-hero:not(.webux-page-hero--cover) {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Full-bleed hero: the gutter mirrors the root padding so the content lines up
   with the constrained blocks around it even when the root padding is fluid.
   Falls back to the previous fixed 1.5rem when the site has no root padding. */
.webux-page-hero.has-background {
	padding-left: var(--wp--style--root--padding-left, 1.5rem);
	padding-right: var(--wp--style--root--padding-right, 1.5rem);
}

.webux-page-hero__inner {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}

.webux-page-hero__text {
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-width: 620px;
}

.webux-page-hero__text > * { margin: 0; }

.webux-page-hero__overline {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 1.82px;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary, #8b8178);
}

.webux-page-hero__title {
	margin: 0;
	font-size: 48px;
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.96px;
	color: #1a1a1a;
}

.webux-page-hero__lead {
	font-size: 17px;
	line-height: 1.65;
	color: #6b6661;
}

.webux-page-hero__lead p { margin: 0; }
.webux-page-hero__lead p + p { margin-top: 20px; }

/* Split layout: text + image side by side.
   minmax(0,1fr) instead of 1fr so a long word (e.g. "Immobilienmakler") cannot
   blow the text track past the viewport - a bare 1fr track never shrinks below
   its content's min-content width, which overflow-wrap:break-word does not lower. */
.webux-page-hero--split .webux-page-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 460px;
	align-items: center;
	gap: 64px;
}

.webux-page-hero--split .webux-page-hero__text {
	max-width: none;
}

.webux-page-hero--media-left .webux-page-hero__inner {
	grid-template-columns: 460px minmax(0, 1fr);
}

.webux-page-hero--media-left .webux-page-hero__media {
	order: -1;
}

.webux-page-hero__media {
	margin: 0;
}

.webux-page-hero__media img {
	display: block;
	width: 100%;
	/* Fill the configured hero height (minus vertical padding 96+88 and 2px
	   border) so a split hero honours its Mindesthöhe instead of a fixed 520px
	   that would balloon it. Fallback 706px reproduces the original 520px image
	   when no height is set. */
	height: calc(var(--webux-hero-minh, 706px) - 186px);
	min-height: 260px;
	object-fit: cover;
	border-radius: 24px;
}

@media (max-width: 900px) {
	.webux-page-hero--split .webux-page-hero__inner,
	.webux-page-hero--media-left .webux-page-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}
	.webux-page-hero--media-left .webux-page-hero__media {
		order: 0;
	}
	.webux-page-hero__title {
		font-size: 40px;
		letter-spacing: -0.8px;
	}
	.webux-page-hero__media img {
		height: 360px;
	}
	/* Stacked heroes are content-height on tablet/phone — don't force the desktop
	   Mindesthöhe when the columns are on top of each other. */
	.webux-page-hero:not(.webux-page-hero--cover) {
		min-height: auto;
	}
}

/* ---- Cover-Modus (Vollbild-Hintergrund + Overlay, zentrierter weisser Text) ---- */
.webux-page-hero--cover {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding-block: 96px 72px;
	padding-left: var(--wp--style--root--padding-left, 1.5rem);
	padding-right: var(--wp--style--root--padding-right, 1.5rem);
	min-height: var(--webux-hero-minh, 442px);
	border-bottom: 1px solid var(--wp--preset--color--border, #ece7de);
}

.webux-page-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.webux-page-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--wp--preset--color--contrast, #15181d);
}

.webux-page-hero__inner--center {
	position: relative;
	z-index: 2;
	max-width: 980px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}

.webux-page-hero--cover .webux-page-hero__overline { color: #e8dec8; }
.webux-page-hero--cover .webux-page-hero__title { color: #fff; }
.webux-page-hero--cover .webux-page-hero__lead { color: #f4efe3; max-width: 620px; }

/* ---- Cover-Layout "aside": Text links + Karte rechts ----
   Pixel-ported from the original .lv-tippgeber-hero-cols two-column design.
   The card styles are duplicated from the notice card on purpose: block styles
   only load when their own block is on the page. */
.webux-page-hero__inner--aside {
	position: relative;
	z-index: 2;
	/* The cover container centers its inner as a flex item, so without an
	   explicit width the two columns would only claim their max-content width
	   and the layout would drift with the title length. The original hero
	   forces the same (site.css: .lv-tippgeber-hero ... > * { width: 100% }). */
	width: 100%;
	display: flex;
	align-items: center;
	gap: 64px;
}

.webux-page-hero__inner--aside .webux-page-hero__text {
	flex: 1 1 auto;
	max-width: none;
	align-items: flex-start;
	gap: 22px;
	text-align: left;
}

.webux-page-hero--cover .webux-page-hero__inner--aside .webux-page-hero__lead { max-width: 480px; }
.webux-page-hero--cover .webux-page-hero__inner--aside .webux-page-hero__buttons { justify-content: flex-start; }

.webux-page-hero__card {
	flex: 0 0 420px;
	background: #fff;
	border: 1px solid #ece7de;
	border-radius: 24px;
	padding: 40px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: 0 8px 28px rgba(26, 26, 26, 0.06), 0 1px 2px rgba(26, 26, 26, 0.04);
	text-align: left;
}

.webux-page-hero__card-icon {
	width: 64px;
	height: 64px;
	border-radius: 999px;
	background: #f4efe3;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: #8b8178;
}

.webux-page-hero__card-icon svg {
	width: 30px;
	height: 30px;
}

/* Colors are set explicitly so the white cover text rules never bleed into the
   light card. */
.webux-page-hero--cover .webux-page-hero__card-overline {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1.82px;
	color: var(--wp--preset--color--primary, #8b8178);
}

.webux-page-hero--cover .webux-page-hero__card-title {
	margin: 0;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.24px;
	line-height: 1.2;
	color: #1a1a1a;
}

.webux-page-hero--cover .webux-page-hero__card-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: #6b6661;
}

@media (max-width: 900px) {
	.webux-page-hero__inner--aside {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
	}
	.webux-page-hero__card {
		flex-basis: auto;
	}
}

@media (max-width: 782px) {
	.webux-page-hero__card {
		padding: 32px;
	}
}

/* ---- Buttons ---- */
.webux-page-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 4px;
}
.webux-page-hero--cover .webux-page-hero__buttons { justify-content: center; }

/* White outline buttons on the dark cover. */
.webux-page-hero--cover .is-style-outline .wp-element-button {
	border-color: #fff;
	color: #fff;
	background: transparent;
}
.webux-page-hero--cover .is-style-outline .wp-element-button:hover {
	background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 782px) {
	.webux-page-hero--cover .webux-page-hero__title { font-size: 34px; letter-spacing: -0.68px; }
}

/* ---- Cover-Layout "card": Titel/Lead/Buttons in einer hellen Sand-Box unten-links ---- */
.webux-page-hero__inner--card {
	position: relative;
	z-index: 2;
	/* The cover centers its children (align-items:center), so stretch this inner
	   back to full cover height - only then does align-items:flex-end drop the box
	   to the bottom instead of the vertical middle. */
	align-self: stretch;
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
}

.webux-page-hero__box {
	background: #faf8f2;
	border-radius: 24px;
	padding: 36px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 680px;
	width: 100%;
	text-align: center;
	align-items: center;
}

/* The cover forces white text; inside the light box the text must be dark again.
   The eyebrow too - the cover tints it cream (#e8dec8), invisible on the sand box. */
.webux-page-hero--cover .webux-page-hero__inner--card .webux-page-hero__overline {
	color: var(--wp--preset--color--primary, #8b8178);
}
.webux-page-hero--cover .webux-page-hero__inner--card .webux-page-hero__title {
	color: #1a1a1a;
}
.webux-page-hero--cover .webux-page-hero__inner--card .webux-page-hero__lead {
	color: #6b6661;
	max-width: none;
}

/* Buttons sit on the light box, so revert the cover's white outline-button
   override to the default (dark) treatment. Primary keeps the accent pill from
   the base wp-block-button rules. */
.webux-page-hero--cover .webux-page-hero__inner--card .is-style-outline .wp-element-button {
	border-color: #d8d2c7;
	color: #1a1a1a;
	background: transparent;
}
.webux-page-hero--cover .webux-page-hero__inner--card .is-style-outline .wp-element-button:hover {
	background: rgba(26, 26, 26, 0.04);
}

@media (max-width: 782px) {
	.webux-page-hero__box {
		max-width: none;
		padding: 28px;
	}
}

@media (max-width: 600px) {
	/* The desktop heroes carry huge vertical padding (up to 96/88px) plus a
	   442px min-height floor, so on a phone they eat most of the first screen
	   before any content shows. Trim both. */
	.webux-page-hero { padding-block: 56px 48px; }
	.webux-page-hero--cover { padding-block: 56px 48px; min-height: auto; }
	/* Paired hero CTAs stack full-width so they read as one equal-width pair
	   (e.g. verkauf "Erstgespräch vereinbaren" / "Online-Bewertung"). */
	.webux-page-hero__buttons .wp-block-button { flex: 1 1 100%; }
	.webux-page-hero__buttons .wp-block-button__link { display: block; width: 100%; text-align: center; }
}

/* ---- Button-Farbschema (block field "Button-Farbe") ----
   Overrides the per-layout defaults so an editor can force readable CTAs on any
   background. Placed after the cover rules so equal-specificity selectors win by
   source order. Only emitted when the field is "light" or "dark". */

/* Hell: for a dark hero photo. Primary becomes a white pill with dark text;
   outline gets a white border + white label. */
.webux-page-hero--cta-light .wp-block-button:not(.is-style-outline) .wp-element-button {
	background: #fff;
	color: #1a1a1a;
}
.webux-page-hero--cta-light .wp-block-button:not(.is-style-outline) .wp-element-button:hover,
.webux-page-hero--cta-light .wp-block-button:not(.is-style-outline) .wp-element-button:focus {
	background: #f4efe3;
	color: #1a1a1a;
}
/* .wp-block-button in the selector lifts specificity above the base outline rule
   in site.css, which loads after this file and would otherwise win the tie. */
.webux-page-hero--cta-light .wp-block-button.is-style-outline .wp-element-button {
	border-color: #fff;
	color: #fff;
	background: transparent;
}
.webux-page-hero--cta-light .wp-block-button.is-style-outline .wp-element-button:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

/* Dunkel: force the standard (light-section) colours even on a cover image —
   e.g. when the photo is bright and the auto-white would disappear. */
.webux-page-hero--cta-dark .wp-block-button:not(.is-style-outline) .wp-element-button {
	background: var(--wp--preset--color--primary, #8b8178);
	color: #fff;
}
.webux-page-hero--cta-dark .wp-block-button:not(.is-style-outline) .wp-element-button:hover,
.webux-page-hero--cta-dark .wp-block-button:not(.is-style-outline) .wp-element-button:focus {
	background: var(--wp--preset--color--primary-dark, #6f665e);
	color: #fff;
}
.webux-page-hero--cta-dark .wp-block-button.is-style-outline .wp-element-button {
	border-color: #d8d2c7;
	color: #1a1a1a;
	background: transparent;
}
.webux-page-hero--cta-dark .wp-block-button.is-style-outline .wp-element-button:hover {
	background: rgba(26, 26, 26, 0.04);
	color: #1a1a1a;
}

/* Guard: the "Box unten-links" (card) layout sits on a light sand box, so its
   buttons must read dark regardless of the chosen scheme. Last + equal/higher
   specificity, so it wins over --cta-light above. */
.webux-page-hero__box .wp-block-button:not(.is-style-outline) .wp-element-button {
	background: var(--wp--preset--color--primary, #8b8178);
	color: #fff;
}
.webux-page-hero__box .wp-block-button:not(.is-style-outline) .wp-element-button:hover,
.webux-page-hero__box .wp-block-button:not(.is-style-outline) .wp-element-button:focus {
	background: var(--wp--preset--color--primary-dark, #6f665e);
	color: #fff;
}
.webux-page-hero__box .wp-block-button.is-style-outline .wp-element-button {
	border-color: #d8d2c7;
	color: #1a1a1a;
	background: transparent;
}
.webux-page-hero__box .wp-block-button.is-style-outline .wp-element-button:hover {
	background: rgba(26, 26, 26, 0.04);
	color: #1a1a1a;
}

/* ---- Trennlinie / Textbreite / Overline-Farbe (Block-Felder) ----
   Reine Opt-in-Modifier: ohne sie greifen ausschliesslich die Basisregeln oben.
   Bewusst am Dateiende, damit sie bei Gleichstand über die Quellreihenfolge
   gewinnen. */

/* "Trennlinie unten anzeigen" = aus. Zweistufig, weil --cover eine eigene
   border-bottom-Regel gleicher Spezifität mitbringt. */
.webux-page-hero.webux-page-hero--no-divider {
	border-bottom: 0;
}

/* Breite Textspalte: der Titel darf die volle Containerbreite nutzen, der Lead
   behält eine eigene, grosszügigere Lesebreite. */
.webux-page-hero--text-wide .webux-page-hero__text {
	max-width: none;
}
.webux-page-hero--text-wide .webux-page-hero__lead {
	max-width: 720px;
}

/* …und der Inner selbst nimmt die volle Containerbreite ein, damit der Text an
   derselben Kante beginnt wie Header, Sektionen und Footer.
   Warum nötig: der Nicht-Cover-Hero ist ein Column-Flexbox-Container. Ein
   Flex-Item mit `margin-inline:auto` wird in der Querachse NICHT gestreckt
   (CSS Flexbox §9.6: auto-Margins schalten `align-self:stretch` ab), also fällt
   der Inner auf seine shrink-to-fit-Breite zurück und wird zentriert — der
   linke Versatz hängt damit an der Textlänge und ist pro Seite anders.
   `width:100%` holt die volle Breite zurück; `max-width` (wide-size) und
   `margin-inline:auto` der Basisregel bleiben wirksam, sodass sich der Inner
   oberhalb der wide-size exakt wie `.webux-section__inner.is-constrained.is-wide`
   verhält (dort steckt der Gutter ebenfalls ausserhalb der gemessenen Spalte).
   Bewusst nur unter diesem Opt-in-Modifier: die Basisregel bleibt unverändert,
   damit bestehende Heroes ohne `textWidth:"wide"` pixelgleich rendern. */
.webux-page-hero--text-wide .webux-page-hero__inner {
	width: 100%;
}

/* Den Gutter setzt bisher nur `.has-background`. Bei „volle Containerbreite"
   muss er immer stehen, sonst klebte der Titel unterhalb der wide-size am
   Fensterrand. Cover bringt seinen eigenen Gutter mit und bleibt aussen vor. */
.webux-page-hero--text-wide:not(.has-background):not(.webux-page-hero--cover) {
	padding-left: var(--wp--style--root--padding-left, 1.5rem);
	padding-right: var(--wp--style--root--padding-right, 1.5rem);
}

/* Overline-Farbe. Zweistufig, damit der Modifier ungescopte Regeln aus
   site.css (0,1,0) schlägt. "signal" ist ein junger Slug — Fallback ist
   deshalb die bisherige Overline-Farbe. */
.webux-page-hero--overline-signal .webux-page-hero__overline {
	color: var(--wp--preset--color--signal, var(--wp--preset--color--primary, #8b8178));
}
.webux-page-hero--overline-contrast .webux-page-hero__overline {
	color: var(--wp--preset--color--contrast, #1a1a1a);
}
/* Im Cover-Layout "Box unten-links" setzt eine dreistufige Regel (0,3,0) die
   Overline zurück auf Primary — ohne diese ebenso dreistufigen Varianten bliebe
   das Feld dort wirkungslos. Weiterhin nur unter den neuen Modifiern gescopt. */
.webux-page-hero--overline-signal .webux-page-hero__inner--card .webux-page-hero__overline {
	color: var(--wp--preset--color--signal, var(--wp--preset--color--primary, #8b8178));
}
.webux-page-hero--overline-contrast .webux-page-hero__inner--card .webux-page-hero__overline {
	color: var(--wp--preset--color--contrast, #1a1a1a);
}

/* Keine automatische Silbentrennung in der Seitenüberschrift: die geteilte
   site.css setzt `hyphens: auto` auf `.webux-page-hero__title` (0,1,0) — bei
   40px auf dem Handy entstehen sichtbare Trennstriche mitten im Wort. Der
   Modifier (0,2,0) schlägt die Regel, ohne sie zu ändern; Seiten ohne
   `textWidth: wide` bleiben unverändert. */
.webux-page-hero--text-wide .webux-page-hero__title {
	hyphens: manual;
}