/* 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;
}

/* Optionales Hintergrundvideo im Cover-Modus, direkt über dem Standbild (gleiche
   .webux-page-hero__bg-Geometrie, im Stapel eine Stufe höher, weil es im Markup
   danach kommt). Es startet vollständig transparent und wird erst sichtbar, wenn
   Bilddaten da sind - siehe assets/js/webux-hero-video.js, das
   data-webux-hero-video-state setzt.

   Jeder andere Zustand als "ready" lässt das Element unsichtbar: blockiertes
   Autoplay, nicht unterstützter Codec oder fehlgeschlagener Request enden alle
   gleich - das Standbild bleibt stehen und nichts flackert. */
.webux-page-hero__video {
	z-index: 0;
	opacity: 0;
	/* Das Video trägt keine Information und darf deshalb nie einen Klick oder ein
	   Ziehen abfangen, das für den Text darüber gedacht ist. */
	pointer-events: none;
}

.webux-page-hero__video[data-webux-hero-video-state="ready"] {
	opacity: 1;
	/* Lang und langsam mit Absicht: der Schnitt vom scharfen Standbild auf das
	   erste Videobild ist der einzige Moment, in dem der Wechsel sichtbar wird -
	   eine schnelle Blende liest sich als Fehler, nicht als Übergang. */
	transition: opacity 900ms ease;
}

/* Das Skript lädt das Video bei reduzierter Bewegung gar nicht. Diese Regel ist
   der Gurt zu jenen Hosenträgern: sie greift auch, wenn die Einstellung erst
   NACH dem Start umgelegt wird, das Element also schon sichtbar läuft. */
@media (prefers-reduced-motion: reduce) {
	.webux-page-hero__video {
		display: none;
	}
}

/* Auf Papier gehört das Standbild hin; ein Video-Element druckt als schwarzer
   oder leerer Kasten und würde den halben Seitenkopf schlucken. */
@media print {
	.webux-page-hero__video {
		display: none;
	}
}

.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;
}

/* Primärfarbe: the branded CTA on a dark photo. "light" paints the filled button
   white and "dark" drags the outline button and the note to near-black - on a dark
   cover the first loses the brand colour and the second becomes unreadable. This
   scheme takes the filled button from "dark" and everything else from "light". */
.webux-page-hero--cta-primary .wp-block-button:not(.is-style-outline) .wp-element-button {
	background: var(--wp--preset--color--primary, #8b8178);
	color: #fff;
}
.webux-page-hero--cta-primary .wp-block-button:not(.is-style-outline) .wp-element-button:hover,
.webux-page-hero--cta-primary .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-primary .wp-block-button.is-style-outline .wp-element-button {
	border-color: #fff;
	color: #fff;
	background: transparent;
}
.webux-page-hero--cta-primary .wp-block-button.is-style-outline .wp-element-button:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}
/* The note follows the outline button, not the filled one: it sits on the photo. */
.webux-page-hero--cta-primary .webux-page-hero__note {
	color: #f4efe3;
}
/* Guard, mirroring the button rule below: inside the light sand box the photo is
   no longer behind the text, so light-on-light would disappear. */
.webux-page-hero__box .webux-page-hero--cta-primary .webux-page-hero__note,
.webux-page-hero--cta-primary .webux-page-hero__box .webux-page-hero__note {
	color: #6b6661;
}

/* 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;
}

/* ---- Zusatzzeile unter den Buttons (Block-Feld „note") ----
   Reines Opt-in: ohne gefülltes Feld gibt render.php weder den Wrapper noch die
   Zeile aus, bestehende Heroes rendern damit unverändert.

   Farbe: die Zeile übernimmt in jedem Layout exakt die Farbe, die der Hero
   bereits für seinen Lead-Text setzt — dieselben drei Stufen wie oben
   (Basis → --cover → --cover .__inner--card). Damit ist sie überall dort
   lesbar, wo der Lead es schon ist, ohne eine eigene Farblogik zu erfinden.
   Zusätzlich hört sie auf das Feld „Button-Farbe": --cta-light heisst „der
   Hintergrund ist dunkel" (auch ohne Coverbild, z. B. auf einem Akzentband),
   --cta-dark heisst „der Hintergrund ist hell". Reihenfolge wie bei den
   Buttons: Layoutregeln zuerst, dann das erzwungene Schema, zuletzt der
   Box-Guard — die helle Sand-Box bleibt immer dunkel beschriftet. */
.webux-page-hero__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}

/* Der Button-Reihe fehlt im Wrapper die `margin: 0`-Regel von
   `.webux-page-hero__text > *`; der Abstand kommt jetzt aus dem Wrapper-Gap. */
.webux-page-hero__actions > .webux-page-hero__buttons {
	margin-top: 0;
}

/* Zentrierte Cover-Layouts: die Zeile mittig unter die Buttons. */
.webux-page-hero--cover .webux-page-hero__inner--center .webux-page-hero__actions,
.webux-page-hero--cover .webux-page-hero__inner--card .webux-page-hero__actions {
	align-items: center;
}

.webux-page-hero__note {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: #6b6661; /* wie .webux-page-hero__lead auf hellem Grund */
}

.webux-page-hero--cover .webux-page-hero__note {
	color: #f4efe3; /* wie .webux-page-hero--cover .webux-page-hero__lead */
}

.webux-page-hero--cover .webux-page-hero__inner--card .webux-page-hero__note {
	color: #6b6661; /* Sand-Box: wieder dunkel, wie der Lead dort */
}

.webux-page-hero--cta-light .webux-page-hero__note {
	color: #f4efe3;
}

.webux-page-hero--cta-dark .webux-page-hero__note {
	color: #6b6661;
}

/* Guard: die Box unten-links ist immer hell, unabhängig vom gewählten Schema. */
.webux-page-hero__box .webux-page-hero__note {
	color: #6b6661;
}

/* ---- Vertrauens-Badges unter dem Lead-Text (Block-Feld „badges") ----
   Reines Opt-in: ohne gefüllte Zeilen gibt render.php kein Markup aus.

   Wie die Zusatzzeile folgen die Chips exakt den Stufen, die der Hero schon
   für seinen Lead-Text fährt (Basis → --cover → --cover .__inner--card), plus
   dem erzwungenen Schema aus „Button-Farbe" und dem Box-Guard. Auf hellem
   Grund ein sandfarbener Chip mit Haarlinie, auf dem Coverfoto derselbe Chip
   durchscheinend weiss - so bleibt er in beiden Fällen lesbar, ohne mit dem
   Call to Action zu konkurrieren. Der Abstand kommt aus dem Spaltenabstand des
   jeweiligen Containers, deshalb margin: 0. */
.webux-page-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.webux-page-hero__badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border: 1px solid var(--wp--preset--color--border, #ece7de);
	border-radius: 999px;
	background: #faf8f2;
	color: #6b6661;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.26px;
	line-height: 1.25;
}

/* Auf dem Coverfoto: durchscheinend weiss statt Sandfläche. */
.webux-page-hero--cover .webux-page-hero__badge {
	border-color: rgba(255, 255, 255, 0.38);
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

/* Sand-Box unten-links: wieder die helle Variante, wie Lead und Zusatzzeile. */
.webux-page-hero--cover .webux-page-hero__inner--card .webux-page-hero__badge {
	border-color: #e5dfd4;
	background: #fff;
	color: #6b6661;
}

/* Erzwungenes Schema (auch ohne Coverbild, z. B. auf einem Akzentband). */
.webux-page-hero--cta-light .webux-page-hero__badge {
	border-color: rgba(255, 255, 255, 0.38);
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

/* Wie die Zusatzzeile folgen die Chips bei „Primärfarbe" dem Umriss-Button,
   nicht dem gefüllten: sie liegen auf dem Foto. */
.webux-page-hero--cta-primary .webux-page-hero__badge {
	border-color: rgba(255, 255, 255, 0.38);
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.webux-page-hero--cta-dark .webux-page-hero__badge {
	border-color: var(--wp--preset--color--border, #ece7de);
	background: #faf8f2;
	color: #6b6661;
}

/* Guard: die Box unten-links ist immer hell, unabhängig vom gewählten Schema. */
.webux-page-hero__box .webux-page-hero__badge {
	border-color: #e5dfd4;
	background: #fff;
	color: #6b6661;
}

/* Zentrierte Layouts: Chips mittig, wie die Buttonreihe darunter. */
.webux-page-hero--cover .webux-page-hero__inner--center .webux-page-hero__badges,
.webux-page-hero__box .webux-page-hero__badges {
	justify-content: center;
}

@media (max-width: 599px) {
	.webux-page-hero__badges { gap: 8px; }
	.webux-page-hero__badge { padding: 5px 12px; font-size: 12px; }
}

/* Automatische Silbentrennung aus: die deutschen Trennmuster der Browser sind
   nicht verlaesslich ("Imm-obilie", "Finanz-ierung", "suedlic-hen"). Der Schutz
   vor Overflow kommt aus `overflow-wrap: break-word` in site.css und bleibt.
   Zwei Klassen, weil site.css `hyphens: auto` auf der blossen Element-Klasse
   setzt und spaeter geladen wird. */
.webux-page-hero .webux-page-hero__title { hyphens: manual; }