/* Webux CTA (field block) - frontend. Ported from .lv-cta / .lv-*-cta-sec. */
.webux-cta {
	padding-inline: 1.5rem;
}

/* ---- Card style: white card, text left / buttons right ---- */
.webux-cta--card {
	padding-block: 96px;
}

.webux-cta__card {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	background: #fff;
	border: 1px solid #ece7de;
	border-radius: 24px;
	box-shadow: 0 8px 28px rgba(26, 26, 26, 0.06), 0 1px 2px rgba(26, 26, 26, 0.04);
	padding: 48px;
}

.webux-cta__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Textspalte links, Aktionsspalte rechts. Ohne Flex-Basis misst die
   Textspalte ihre max-content-Breite - der Fliesstext auf einer einzigen
   Zeile - und sprengt damit die Flexzeile: Button und Zusatzzeile rutschten
   unter den Text, obwohl das Kartenlayout sie nebeneinander vorsieht.
   `flex: 1 1 30rem` laesst den Text schrumpfen, bis die Aktionsspalte
   danebenpasst; unterhalb dieser Basis bricht die Zeile weiterhin um, womit
   das gestapelte Layout auf schmalen Viewports erhalten bleibt. */
.webux-cta__card > .webux-cta__body {
	flex: 1 1 30rem;
	min-width: 0;
}

.webux-cta__card > .webux-cta__actions,
.webux-cta__card > .webux-cta__actions-group {
	flex: 0 0 auto;
}

/* ---- Band style: centered on a colour band ---- */
.webux-cta--band {
	padding-block: 88px;
}

.webux-cta__inner {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
}

/* ---- Band, Anordnung „Text links, Button rechts" (opt-in) ----------------
   Das Bannerformat: eine Aussage quer über die Seite, die Handlung am rechten
   Ende derselben Zeile. Die Klasse steht NEBEN `.webux-cta--band`, alle
   Bandregeln (Farbe, Polster, umgedrehte Buttons) gelten also unverändert
   weiter - hier wird nur die Achse gedreht.

   `flex: 1 1 30rem` an der Textspalte ist derselbe Kniff wie beim Kartenstil:
   ohne Flex-Basis misst sie ihre max-content-Breite (der Fliesstext auf einer
   Zeile) und drückt den Button aus der Zeile. Unterhalb von 30rem bricht die
   Zeile um, der Button rutscht unter den Text - das ist das Verhalten auf dem
   Telefon. */
.webux-cta--band.webux-cta--band-split .webux-cta__inner {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	column-gap: 48px;
	row-gap: 28px;
	text-align: left;
}

.webux-cta--band.webux-cta--band-split .webux-cta__body {
	flex: 1 1 30rem;
	min-width: 0;
	align-items: flex-start;
}

.webux-cta--band.webux-cta--band-split .webux-cta__actions,
.webux-cta--band.webux-cta--band-split .webux-cta__actions-group {
	flex: 0 0 auto;
	justify-content: flex-start;
	align-items: flex-start;
}

/* Die zentrierte Variante schiebt Badge und Zusatzzeile in die Mitte; hier
   stehen sie an der linken Kante der Textspalte. Beide Regeln stehen NACH den
   `--band`-Regeln und gewinnen mit der zusätzlichen Klasse (0,3,0). */
.webux-cta--band.webux-cta--band-split .webux-cta__badge {
	align-self: flex-start;
}

/* Auf dem Band ist der Titel die Aussage - im Bannerformat trägt er die ganze
   Zeile und darf eine Stufe grösser stehen als im gestapelten Band. */
.webux-cta--band.webux-cta--band-split .webux-cta__title {
	font-size: clamp(24px, 2.6vw, 34px);
}

/* Der Fliesstext steht unter dem Titel und nicht daneben: eine Zeile, die über
   die halbe Bandbreite läuft, liest sich schlechter als eine kurze. */
.webux-cta--band.webux-cta--band-split .webux-cta__text {
	max-width: 46ch;
}

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

.webux-cta__title {
	margin: 0;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	color: #1a1a1a;
}

.webux-cta__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: #6b6661;
}

.webux-cta__badge {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	height: 28px;
	padding: 0 14px;
	margin-top: 6px;
	border-radius: 999px;
	background: #f4efe3;
	color: #1a1a1a;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.26px;
}

.webux-cta--band .webux-cta__badge { align-self: center; }

.webux-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* Only present when the "Zusatzzeile" field is filled: stacks the note under
   the button row and inherits the alignment of the layout it sits in. */
.webux-cta__actions-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}

.webux-cta--band .webux-cta__actions-group {
	align-items: center;
}

.webux-cta__note {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--wp--preset--color--muted, #8a847d);
}

/* Centred band: the buttons form a flex row of their own inside the centred
   column. As long as they fit on one line the row is as wide as its content and
   sits centred anyway; once it wraps - which is the normal case on a phone - the
   row spans the full column and the buttons would stack against its left edge
   while overline, heading, lead and badge stay centred. */
.webux-cta--band .webux-cta__actions {
	justify-content: center;
}

/* Accent band: white text. */
.webux-cta--band.has-accent-background-color .webux-cta__title { color: #fff; }
.webux-cta--band.has-accent-background-color .webux-cta__text { color: #f4efe3; }
.webux-cta--band.has-accent-background-color .webux-cta__overline { color: #e8dec8; }

/* Die Zusatzzeile stand bisher auch auf dem Akzentband in muted und erreicht
   dort 1.52:1 (#8a847d auf #6f665e) - praktisch unsichtbar. Weiss liegt bei
   5.62:1. Sie fiel nur nicht auf, weil das Akzentband bislang nirgends mit
   gefüllter Zusatzzeile eingesetzt wurde. */
.webux-cta--band.has-accent-background-color .webux-cta__note {
	color: var(--wp--preset--color--base, #fff);
}

/* Gleiche Begründung wie beim dunklen Palettenband weiter unten: der
   Primärbutton wird aus der Palette in `primary` gefüllt und verschwindet auf
   einem Band derselben Familie - auf Liventra sogar über die Farbfamilie
   hinweg (Salbei #8A9A7B auf Akzent #6f665e = 1.87:1). Er dreht deshalb um:
   weisse Pille (5.62:1 gegen das Band) mit Akzent-Label (5.62:1 auf der
   Pille). `:not(.has-background)` lässt eine im Editor gesetzte Farbe
   weiterhin gewinnen. */
.webux-cta--band.has-accent-background-color .wp-block-button:not(.is-style-outline) > .wp-element-button:not(.has-background) {
	background-color: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--accent, #6f665e);
}

/* Ohne eigene Hover-Regel bliebe der umgedrehte Button beim Überfahren
   unverändert - die Basisregel färbt nur die Palettenfüllung. Sand statt Weiss
   hält das Label bei 5.29:1 und die Fläche klar über den 3:1 fürs Bedienelement. */
.webux-cta--band.has-accent-background-color .wp-block-button:not(.is-style-outline) > .wp-element-button:not(.has-background):hover,
.webux-cta--band.has-accent-background-color .wp-block-button:not(.is-style-outline) > .wp-element-button:not(.has-background):focus-visible {
	background-color: var(--wp--preset--color--surface, #faf8f2);
	color: var(--wp--preset--color--accent, #6f665e);
}

/* Umrissbutton: Core malt ihn in currentColor, also in der dunklen Textfarbe. */
.webux-cta--band.has-accent-background-color .wp-block-button.is-style-outline > .wp-element-button:not(.has-text-color) {
	color: var(--wp--preset--color--base, #fff);
	border-width: 1.5px;
	border-color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 60%, transparent);
}

/* ---- Dunkles Palettenband (opt-in "Primär dunkel") -------------------------
   Trennt eine Sektion sichtbar von einem hellen Band darüber. Alle drei
   Textrollen stehen hier in reinem Weiss statt in den Sandtönen, die das
   Akzent-Band verwendet: auf primary-dark (#6D7A61 auf dieser Site) erreicht
   Weiss 4.56:1, #f4efe3 als Lead aber nur 3.97:1 und die 13px-Überzeile
   #e8dec8 nur 3.41:1 - beide unter AA. Die Hierarchie tragen Schriftgrad,
   -schnitt und Laufweite, nicht die Farbe. Auf der Theme-Standardpalette
   (#6f665e) liegt Weiss bei 5.62:1.

   VORAUSSETZUNG: primary-dark muss weissen Text mit >= 4.5:1 tragen. Geprueft:
   Liventra #6D7A61 = 4.56:1 OK, Theme-Default #6f665e = 5.62:1 OK, Stoeckli
   #009C3F = 3.60:1 NICHT OK - dort darf diese Hintergrundoption nicht gewaehlt
   werden, solange die Palette so bleibt. */
.webux-cta--band.has-primary-dark-background-color .webux-cta__title,
.webux-cta--band.has-primary-dark-background-color .webux-cta__text,
.webux-cta--band.has-primary-dark-background-color .webux-cta__overline,
.webux-cta--band.has-primary-dark-background-color .webux-cta__note {
	color: var(--wp--preset--color--base, #fff);
}

/* Der Primärbutton wird sonst aus derselben Farbfamilie gefüllt wie das Band
   (primary #8A9A7B auf primary-dark #6D7A61 = 1.52:1) und verschwindet darin.
   Er dreht deshalb um: weisse Pille (4.56:1 gegen das Band, also über den 3:1
   für Bedienelement-Flächen) mit dunklem Label (4.56:1). Gleiche Konstruktion
   wie bei .has-light-text; :not(.has-background) lässt eine im Editor gesetzte
   Farbe weiterhin gewinnen. */
.webux-cta--band.has-primary-dark-background-color .wp-block-button:not(.is-style-outline) > .wp-element-button:not(.has-background) {
	background-color: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--primary-dark, #6f665e);
}

/* Ohne diese Regel greift der Hover der Basis-Button-Regel, die auf dieselbe
   umgedrehte Pille keine Wirkung hat: Ruhe- und Hover-Zustand waren identisch,
   der Button gab also keinerlei Rueckmeldung. Sand statt Weiss haelt das Label
   bei 4.56:1 und die Flaeche ueber 3:1 gegen das Band. */
.webux-cta--band.has-primary-dark-background-color .wp-block-button:not(.is-style-outline) > .wp-element-button:not(.has-background):hover,
.webux-cta--band.has-primary-dark-background-color .wp-block-button:not(.is-style-outline) > .wp-element-button:not(.has-background):focus-visible {
	background-color: var(--wp--preset--color--surface, #faf8f2);
	color: var(--wp--preset--color--primary-dark, #6f665e);
}

.webux-cta--band.has-primary-dark-background-color .wp-block-button.is-style-outline > .wp-element-button:not(.has-text-color) {
	color: var(--wp--preset--color--base, #fff);
	border-width: 1.5px;
	border-color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 60%, transparent);
}

/* ---- Band-Struktur (opt-in) ------------------------------------------------
   Ein randloses Farbband ist eine Fläche und sonst nichts. Solange darüber und
   darunter helle Sektionen stehen, trägt das; stösst es an ein Foto, laufen
   beide zu einer einzigen Zone zusammen - besonders dann, wenn die Markenfarbe
   und das Motiv derselben Familie angehören. Die drei Strukturen beantworten
   das unterschiedlich, teilen sich aber dieselben zwei Töne:

     --webux-cta-tone   die dunklere Stufe DERSELBEN Farbe (68 % Farbe, 32 %
                        Schwarz) - Fläche hinter der Handlungsseite
     --webux-cta-edge   eine 2px schmale, aufgehellte Kante genau an deren
                        Vorderkante - sie macht aus dem Tonwechsel eine
                        gezogene Linie statt eines weichen Übergangs

   Zwei Töne einer Farbe statt zweier Farben, gleiche Mischung wie bei
   webux-highlights (dort ausführlich begründet): es kommt keine zweite Farbe
   in die Palette, und die Struktur wandert automatisch mit, wenn eine Site
   ihre Palette ändert.

   WARUM DUNKLER UND NICHT HELLER: die Bandtexte stehen in Weiss. Auf dem
   Liventra-Salbei (primary-dark #6D7A61) liegt Weiss bei 4.56:1 - also knapp
   über AA. Eine hellere Stufe (Weiss 8 % darüber) drückt das auf 3.89:1 und
   reisst die 4.5:1 für den 16px-Fliesstext. Die dunklere Stufe hebt ihn
   stattdessen auf 8.05:1. Damit ist es egal, ob die Fläche beim Umbruch unter
   den Text wandert - lesbarer wird es dort in jedem Fall, nie schlechter.
   Gegen das Band selbst hebt sich die Stufe mit 1.77:1 ab (Theme-Standard
   #6f665e: 1.65:1) und wird als Struktur gelesen, nicht als Fehler.

   Bei einer sehr HELLEN Markenfarbe reichen 32 % Schwarz nicht für 4.5:1 gegen
   Weiss. Der Ton hängt deshalb an einer Custom Property und lässt sich pro Site
   setzen:
     .webux-cta { --webux-cta-tone: #4a5340; }
*/
.webux-cta--band-tone,
.webux-cta--band-inset {
	/* Fallback zuerst für Engines ohne color-mix(). --webux-cta-band setzt
	   render.php aus der gewählten Hintergrundfarbe; ohne Hintergrund ("Keiner")
	   greift die Fläche der Site. */
	--webux-cta-tone: rgba(0, 0, 0, 0.32);
	--webux-cta-tone: color-mix(in srgb, var(--webux-cta-band, var(--wp--preset--color--primary-dark, #6f665e)) 68%, #000000);
	/* Aufgehellt statt abgedunkelt: eine dunkle Linie im Tonwechsel liest sich
	   als Riss durch die Fläche - hier vorher ausprobiert und wieder verworfen.
	   Weiss mit 22 % bleibt eine Kante. */
	--webux-cta-edge: rgba(255, 255, 255, 0.22);
	--webux-cta-edge: color-mix(in srgb, var(--wp--preset--color--base, #ffffff) 22%, transparent);
}

/* Die Struktur selbst: EIN Pseudoelement mit einem Verlauf aus harten Stopps -
   kein zweites Element, kein clip-path, nichts, was das Markup anfasst.
   100deg neigt die Kante um 10° gegen die Senkrechte - über 250px Bandhöhe
   sind das rund 44px Versatz, eine ruhige Schräge statt einer Diagonale. Die
   1px-Rampen zwischen den Stopps sind Kantenglättung: ein harter Stopp auf
   einer geneigten Linie treppt sonst sichtbar.

   Die Fläche beginnt bei 62 % - rechts davon steht auf dem Bannerformat die
   Handlung, links die Aussage. Die Struktur folgt also dem Inhalt und markiert
   die Handlungsseite, statt Dekor über das Band zu legen. */
.webux-cta--band-tone::before,
.webux-cta--band-inset:not(.webux-cta--band-media) .webux-cta__inner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: linear-gradient(
		100deg,
		transparent calc(62% - 3px),
		var(--webux-cta-edge) calc(62% - 2px) calc(62% - 1px),
		var(--webux-cta-tone) 62%
	);
	pointer-events: none;
}

/* Ohne die beiden Zeilen läge das Pseudoelement über dem Text: es ist das
   letzte Kind im Malbereich. isolation hält den z-index-Kontext lokal, damit
   die 1 hier nichts auf der Seite überholt. */
.webux-cta--band-tone,
.webux-cta--band-inset .webux-cta__inner {
	position: relative;
	isolation: isolate;
	/* `clip` statt `hidden`: hidden macht das Element zum Scroll-Container und
	   damit zum Bezugsrahmen für scroll-getriebene Animationen der Nachbarn
	   (gleiche Begründung wie im Bildband). */
	overflow: hidden;
	overflow: clip;
}

.webux-cta--band-tone > *,
.webux-cta--band-inset .webux-cta__inner > * {
	position: relative;
	z-index: 1;
}

/* ---- Struktur "tone": bleibt randlos --------------------------------------
   Die feine helle Kante unten ist der zweite Teil der Antwort: sie zieht eine
   Linie zwischen Band und dem, was darunter kommt. Weiss mit 30 % steht auf
   jeder Bandfarbe hell genug für eine Kante und bleibt zu schwach, um als
   Rahmen zu lesen. Als inset-Schatten, nicht als border - eine Rahmenlinie
   würde die Bandhöhe um 1px verändern. */
.webux-cta--band-tone {
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.3);
	box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--wp--preset--color--base, #ffffff) 30%, transparent);
}

/* ---- Struktur "inset"/"media": das Band wird zur Bannerkarte ---------------
   Der Seitenhintergrund läuft rundherum durch - das ist die eigentliche
   Trennung zu einem angrenzenden Bild, kein Effekt kann sie ersetzen. Radius
   und Schattensprache kommen vom Kartenstil dieses Blocks (24px), damit das
   Banner wie die Karten weiter oben auf der Seite aussieht und nicht wie ein
   Fremdkörper.

   WordPress schreibt `has-*-background-color` mit `!important` (so erzeugt
   Core die Preset-Klassen). Die Farbe vom vollbreiten Rahmen wieder
   herunterzunehmen geht deshalb nur ebenfalls mit `!important`. Verloren geht
   sie dabei nicht: render.php reicht sie zusätzlich als `--webux-cta-band`
   durch, und das Bannerfeld füllt sich daraus. */
.webux-cta--band-inset.has-background {
	background-color: transparent !important;
}

/* Das Polster des Bandes wird hier zum Aussenabstand der Karte. 88px wären als
   Luft um ein Banner zu viel - das Innenpolster trägt jetzt den Aufbau. */
.webux-cta--band-inset {
	padding-block: clamp(28px, 4vw, 56px);
}

.webux-cta--band-inset .webux-cta__inner {
	background-color: var(--webux-cta-band, var(--wp--preset--color--surface, #faf8f2));
	border-radius: 24px;
	padding: clamp(32px, 3.4vw, 56px);
	/* Zwei Lagen wie überall im Theme: die weite, weiche trägt die Tiefe, die
	   enge dichtet die Kante ab. Etwas kräftiger als bei der weissen Karte -
	   eine gesättigte Fläche verschluckt einen 6-%-Schatten. */
	box-shadow: 0 14px 34px -10px rgba(26, 26, 26, 0.22), 0 2px 6px rgba(26, 26, 26, 0.06);
}

/* ---- Struktur "media": Bildspalte an der Kartenkante -----------------------
   Hier trägt das Foto die Struktur, deshalb bleibt der Verlauf oben weg (die
   :not()-Bedingung an seiner Regel). Das Innenpolster wandert von der Karte in
   die Textspalte, damit das Bild bis an die Kante läuft und der Radius es
   beschneidet. Höhere Spezifität als die Split-Regeln weiter oben (0,3,0) und
   sie steht danach - die Bildvariante gewinnt also auch, wenn zusätzlich
   „Text links, Button rechts" gewählt ist. */
.webux-cta--band.webux-cta--band-media .webux-cta__inner {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: flex-start;
	text-align: left;
	padding: 0;
	gap: 0;
}

.webux-cta--band.webux-cta--band-media .webux-cta__content {
	/* 1.4 gegen 1 teilt den Überschuss im Verhältnis der beiden Spalten und
	   ergibt auf 1200px rund 59/41. Unter der Summe der beiden Flex-Basen
	   (26rem + 18rem) bricht die Zeile um und die Spalten stapeln. */
	flex: 1.4 1 26rem;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	padding: clamp(32px, 3.4vw, 56px);
}

/* Die Split-Regel setzt `flex: 1 1 30rem` auf den Textteil. In der Textspalte
   läuft die Achse aber senkrecht - 30rem wären dort eine HÖHE von 480px. */
.webux-cta--band.webux-cta--band-media .webux-cta__content > .webux-cta__body {
	flex: 0 1 auto;
	align-items: flex-start;
}

.webux-cta--band.webux-cta--band-media .webux-cta__media {
	flex: 1 1 18rem;
	position: relative;
	align-self: stretch;
	min-height: 280px;
	/* Sichtbar, solange das Bild noch unterwegs ist. */
	background-color: rgba(255, 255, 255, 0.1);
	background-color: color-mix(in srgb, var(--wp--preset--color--base, #ffffff) 10%, transparent);
}

.webux-cta--band-media .webux-cta__media-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

@media (max-width: 782px) {
	/* Gestapelt steht das Foto oben: als Abschluss unter dem Button läse es
	   sich wie ein Nachtrag, über der Aussage rahmt es sie. Die DOM-Reihenfolge
	   bleibt Text zuerst, die Vorlesereihenfolge also unverändert. */
	.webux-cta--band.webux-cta--band-media .webux-cta__media {
		order: -1;
		min-height: 200px;
	}
}

/* ---- Telefon: die Tonstufe wird zur Handlungszone -------------------------
   Sobald die Bannerzeile umbricht, steht die Handlung UNTER der Aussage statt
   rechts daneben. Die Zeile bricht, wenn Textspalte (30rem), Spalte und Button
   nicht mehr nebeneinanderpassen - knapp unterhalb von 782px, dem Breakpoint,
   den dieser Block ohnehin schon verwendet.

   Erster Anlauf war derselbe Verlauf am Container, nur waagerecht gekippt. Das
   liest sich auf einer 390px-Spalte als Schrägstrich quer durchs Bild, und vor
   allem sitzt er falsch: ein Prozentwert misst die GESAMTHÖHE, die Kante soll
   aber zwischen Fliesstext und Button liegen. Wieviel Prozent das sind, hängt
   an der Textmenge und am Aussenpolster - beim randlosen Band (52-88px) kam ein
   anderer Wert heraus als in der Bannerkarte (32-56px), und beide verrutschten,
   sobald jemand eine Zeile mehr schrieb.

   Deshalb hängt die Fläche jetzt am Button selbst: ein Pseudoelement der
   Handlungsspalte, das 34px über ihr beginnt und nach unten, links und rechts
   über die geklippten Kanten hinausläuft. Sie sitzt damit IMMER richtig, egal
   wie lang der Titel ist. Die Neigung macht `clip-path` (20px über die Breite,
   rund 3° statt der 8° am Rand des Desktop-Verlaufs - auf einer schmalen Spalte
   reicht eine Andeutung), die helle Kante ein `drop-shadow`, das dem Umriss der
   geklippten Form folgt statt dem Kasten. */
@media (max-width: 782px) {
	/* Der Verlauf am Container hat hier ausgedient. */
	.webux-cta--band-tone::before,
	.webux-cta--band-inset:not(.webux-cta--band-media) .webux-cta__inner::before {
		display: none;
	}

	/* Die Handlungsspalte nimmt die volle Breite, sonst reichte die Fläche nur
	   bis zum rechten Rand der Pille. Zwei Achsen, zwei Eigenschaften: im
	   umgebrochenen Zeilenlayout (Bannerformat) macht das `flex-basis`, im
	   Spaltenlayout (zentriertes Band) `align-self` - dort WÄRE `flex-basis`
	   eine Höhe. `z-index: auto` nimmt der Spalte den eigenen Stapelkontext
	   zurück, den die Regel weiter oben ihr gibt; erst dadurch kann das
	   Pseudoelement mit `z-index: -1` hinter den ganzen Bannerinhalt fallen
	   statt nur hinter den Button. */
	.webux-cta--toned .webux-cta__inner > .webux-cta__actions,
	.webux-cta--toned .webux-cta__inner > .webux-cta__actions-group {
		position: relative;
		z-index: auto;
		align-self: stretch;
	}

	.webux-cta--toned.webux-cta--band-split .webux-cta__inner > .webux-cta__actions,
	.webux-cta--toned.webux-cta--band-split .webux-cta__inner > .webux-cta__actions-group {
		flex-basis: 100%;
	}

	.webux-cta--toned .webux-cta__inner > .webux-cta__actions::before,
	.webux-cta--toned .webux-cta__inner > .webux-cta__actions-group::before {
		content: "";
		position: absolute;
		z-index: -1;
		top: -34px;
		/* Weit genug nach unten und zur Seite, um in jedem Fall an der
		   geklippten Kante zu enden - `overflow: clip` schneidet ab. */
		bottom: -50vh;
		left: calc(-1 * var(--webux-cta-bleed, 1.5rem));
		right: calc(-1 * var(--webux-cta-bleed, 1.5rem));
		background: var(--webux-cta-tone);
		clip-path: polygon(0 20px, 100% 0, 100% 100%, 0 100%);
		filter: drop-shadow(0 -2px 0 var(--webux-cta-edge));
		pointer-events: none;
	}

	/* Wie weit die Fläche seitlich hinausmuss, um die Kante zu erreichen: beim
	   randlosen Band bis an den Viewport (das Innenpolster des Blocks), in der
	   Bannerkarte bis an deren Rundung (das Polster der Karte). */
	.webux-cta--band-tone { --webux-cta-bleed: 1.5rem; }
	.webux-cta--band-inset { --webux-cta-bleed: clamp(32px, 3.4vw, 56px); }
}

@media (max-width: 600px) {
	.webux-cta--band-inset .webux-cta__inner {
		border-radius: 20px;
	}
}

/* ---- Banner-Bewegung (opt-in) ----------------------------------------------
   Das Vorbild (remax.ch, Block `block-property-valuation`) trägt im Markup
   `aos-init aos-animate` - das ist AOS, „Animate On Scroll": ein Element startet
   verborgen und bekommt beim Eintritt ins Bild eine Klasse, die es einblendet.
   Genau dieses Muster hat dieses Theme schon in assets/css/webux-effects.css,
   und der CTA-Block nimmt daran längst teil (`webux-fx--up`, armiert von
   assets/js/webux-effects.js). Was hier dazukommt, ist deshalb KEIN zweiter
   Effekt und kein zweites Skript, sondern eine Choreografie INNERHALB des
   bestehenden: statt als ein Stück einzublenden, läuft das Banner in vier
   Schritten ein - Fläche, Titel, Text, Handlung.

   Damit gilt der Barrierefreiheits-Vertrag der Effektschicht unverändert:

     1. Verborgen wird ausschliesslich unter `.is-fx-armed`, und diese Klasse
        vergibt nur das Skript. Ohne JavaScript ist jeder Teil normal sichtbar.
     2. Alles steht in `prefers-reduced-motion: no-preference`.
     3. Animiert werden nur opacity und transform - kein Layout-Shift.
     4. Im Druck wird nie gescrollt; der @media-print-Block am Ende hebt auf.

   Ohne Scroll-Effekt am Block gibt es kein `is-fx-armed` - dann passiert nichts.
   Das steht so auch im Optionstext des Feldes.

   Der Versatz je Schritt liest `--wx-fx-step` aus der Effektschicht (Vorgabe
   90ms, pro Site über Einstellungen > WX Effekte regelbar), der Vorlauf des
   ganzen Blocks `--wx-fx-delay` aus dessen Verzögerungsklasse. Dieselben
   Stellschrauben also wie bei jeder anderen Staffelung im Theme. */
@media (prefers-reduced-motion: no-preference) {
	/* Der Platz in der Reihenfolge. Eigene Property statt :nth-child, weil die
	   Teile je nach Struktur in unterschiedlichen Wrappern stecken. */
	.webux-cta--band-reveal .webux-cta__media { --webux-cta-i: 0; }
	.webux-cta--band-reveal .webux-cta__overline,
	.webux-cta--band-reveal .webux-cta__title { --webux-cta-i: 1; }
	.webux-cta--band-reveal .webux-cta__text { --webux-cta-i: 2; }
	.webux-cta--band-reveal .webux-cta__badge,
	.webux-cta--band-reveal .webux-cta__actions,
	.webux-cta--band-reveal .webux-cta__actions-group { --webux-cta-i: 3; }

	.webux-cta--band-reveal.is-fx-armed .webux-cta__overline,
	.webux-cta--band-reveal.is-fx-armed .webux-cta__title,
	.webux-cta--band-reveal.is-fx-armed .webux-cta__text,
	.webux-cta--band-reveal.is-fx-armed .webux-cta__badge,
	.webux-cta--band-reveal.is-fx-armed .webux-cta__actions,
	.webux-cta--band-reveal.is-fx-armed .webux-cta__actions-group,
	.webux-cta--band-reveal.is-fx-armed .webux-cta__media,
	.webux-cta--band-reveal.webux-cta--band-tone.is-fx-armed::before,
	.webux-cta--band-reveal.webux-cta--band-inset:not(.webux-cta--band-media).is-fx-armed .webux-cta__inner::before {
		opacity: 0;
		transform: translate3d(0, 14px, 0);
		transition:
			opacity var(--wx-fx-dur, 620ms) var(--wx-fx-ease, cubic-bezier(0.22, 0.61, 0.36, 1))
				calc(var(--wx-fx-delay, 0ms) + var(--webux-cta-i, 0) * var(--wx-fx-step, 90ms)),
			transform var(--wx-fx-dur, 620ms) var(--wx-fx-ease, cubic-bezier(0.22, 0.61, 0.36, 1))
				calc(var(--wx-fx-delay, 0ms) + var(--webux-cta-i, 0) * var(--wx-fx-step, 90ms));
	}

	/* Mit gefüllter Zusatzzeile umschliesst die Gruppe die Buttonzeile. Beide zu
	   bewegen hiesse, den Versatz zweimal zu fahren - die innere Zeile bleibt
	   deshalb stehen und wird von der Gruppe mitgenommen. */
	.webux-cta--band-reveal.is-fx-armed .webux-cta__actions-group .webux-cta__actions {
		opacity: 1;
		transform: none;
		transition: none;
	}

	/* Die Tonstufe kommt nicht von unten, sondern von rechts an ihren Platz -
	   aus der Richtung, in die sie zeigt. */
	.webux-cta--band-reveal.webux-cta--band-tone.is-fx-armed::before,
	.webux-cta--band-reveal.webux-cta--band-inset:not(.webux-cta--band-media).is-fx-armed .webux-cta__inner::before {
		transform: translate3d(28px, 0, 0);
	}

	/* Das Foto zoomt zurück statt zu steigen: eine Bildspalte, die sich bewegt,
	   schiebt sonst sichtbar ihre Kante durch die Karte. */
	.webux-cta--band-reveal.is-fx-armed .webux-cta__media {
		transform: scale(1.04);
	}

	.webux-cta--band-reveal.is-fx-armed.is-fx-in .webux-cta__overline,
	.webux-cta--band-reveal.is-fx-armed.is-fx-in .webux-cta__title,
	.webux-cta--band-reveal.is-fx-armed.is-fx-in .webux-cta__text,
	.webux-cta--band-reveal.is-fx-armed.is-fx-in .webux-cta__badge,
	.webux-cta--band-reveal.is-fx-armed.is-fx-in .webux-cta__actions,
	.webux-cta--band-reveal.is-fx-armed.is-fx-in .webux-cta__actions-group,
	.webux-cta--band-reveal.is-fx-armed.is-fx-in .webux-cta__media,
	.webux-cta--band-reveal.webux-cta--band-tone.is-fx-armed.is-fx-in::before,
	.webux-cta--band-reveal.webux-cta--band-inset:not(.webux-cta--band-media).is-fx-armed.is-fx-in .webux-cta__inner::before {
		opacity: 1;
		transform: none;
	}
}

/* Guard 4: gedruckt wird nichts verborgen. Der @media-print-Block der
   Effektschicht kennt nur `.webux-fx` und `.webux-fx-i` - die Teile hier
   tragen weder das eine noch das andere. */
@media print {
	.webux-cta--band-reveal .webux-cta__overline,
	.webux-cta--band-reveal .webux-cta__title,
	.webux-cta--band-reveal .webux-cta__text,
	.webux-cta--band-reveal .webux-cta__badge,
	.webux-cta--band-reveal .webux-cta__actions,
	.webux-cta--band-reveal .webux-cta__actions-group,
	.webux-cta--band-reveal .webux-cta__media,
	.webux-cta--band-reveal.webux-cta--band-tone::before,
	.webux-cta--band-reveal .webux-cta__inner::before {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ---- Size "large" (opt-in): closing-statement scale ---- */
.webux-cta--large .webux-cta__title {
	font-size: clamp(28px, 3vw, 40px);
}

/* Centred band only - a capped measure keeps the lead readable at 40px titles. */
.webux-cta--band.webux-cta--large .webux-cta__text {
	max-width: 560px;
	margin-inline: auto;
}

/* ---- Inside a dark band ----
   `has-light-text` is set by webux/section and webux/hero. The selectors below
   name the emitting block explicitly instead of hanging off the bare class, so
   an unrelated ancestor carrying `has-light-text` can never repaint a CTA.
   The section/hero CSS already whitens headings and <p>; the overline is a
   <span> and the buttons carry their own colours, so only those stay unreadable. */
.webux-section.has-light-text .webux-cta__overline,
.webux-hero.has-light-text .webux-cta__overline {
	color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 85%, transparent);
}

/* Primary button inverts: light pill, dark label. :not(.has-background) keeps an
   editor-chosen background winning. */
.webux-section.has-light-text .webux-cta .wp-block-button:not(.is-style-outline) > .wp-element-button:not(.has-background),
.webux-hero.has-light-text .webux-cta .wp-block-button:not(.is-style-outline) > .wp-element-button:not(.has-background) {
	background-color: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--primary-dark, #6f665e);
}

/* Outline button: core paints it in currentColor, which is dark text on a dark band. */
.webux-section.has-light-text .webux-cta .wp-block-button.is-style-outline > .wp-element-button:not(.has-text-color),
.webux-hero.has-light-text .webux-cta .wp-block-button.is-style-outline > .wp-element-button:not(.has-text-color) {
	color: var(--wp--preset--color--base, #fff);
	border-width: 1.5px;
	border-color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 60%, transparent);
}

@media (max-width: 782px) {
	.webux-cta__card { padding: 32px; }
	.webux-cta__title { font-size: 24px; }
}

/* Phones: the 96px / 88px vertical padding is a desktop figure. Everything
   around the CTA collapses to roughly 15vw on a phone, so the block kept a
   ~40px taller cushion than its neighbours at both ends. The clamp keeps the
   desktop values untouched and only bites where the viewport is narrow. */
@media (max-width: 600px) {
	.webux-cta--card { padding-block: clamp(52px, 15vw, 96px); }
	.webux-cta--band { padding-block: clamp(52px, 15vw, 88px); }
}