/* Webux Highlights (field block, repeater) - frontend. */
.webux-highlights {
	display: grid;
	grid-template-columns: repeat(var(--webux-cols, 3), minmax(0, 1fr));
	gap: 1.5rem;
}

@media (max-width: 900px) {
	.webux-highlights {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.webux-highlights {
		grid-template-columns: 1fr;
	}
}

.webux-highlight {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	text-align: center;
}

.webux-highlight__icon {
	font-size: 2rem;
	line-height: 1;
}

/* Variant "Im Kreis": icon on a round sand chip (design "Werte").
   Scoped to the modifier - the default icon box stays as-is.
   Diameter via --webux-highlight-circle (set by render.php only when it
   differs from the 52px fallback); specificity is unchanged, so the
   per-page overrides in site.css keep winning as before. */
.webux-highlights--icon-circle .webux-highlight__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--webux-highlight-circle, 52px);
	height: var(--webux-highlight-circle, 52px);
	border-radius: 999px;
	background: #f4efe3;
	color: var(--wp--preset--color--primary, #8b8178);
}

.webux-highlights--icon-circle .webux-highlight__icon svg {
	width: 24px;
	height: 24px;
}

/* Variant "Linksbündig" (designs "Werte" and "Perks"). */
.webux-highlights--align-left .webux-highlight {
	align-items: flex-start;
	text-align: left;
}

.webux-highlight__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large, 1.25rem);
}

.webux-highlight__text {
	margin: 0;
	color: var(--wp--preset--color--muted, #6b7280);
}

/* Variant "Gefüllt, alternierend" (design "Werte" cards). Solid checkerboard
   cards in accent/umber with white type. Everything is scoped under
   .webux-highlights--filled so the plain variant stays byte-identical. The grid
   / responsive column logic above is shared - nothing new here. */
.webux-highlights--filled .webux-highlight {
	border-radius: 24px;
	padding: 34px 28px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	color: #fff;
}

.webux-highlights--filled .webux-highlight--fill-a {
	background: #8b8178; /* accent */
}

.webux-highlights--filled .webux-highlight--fill-b {
	background: #6f665e; /* umber */
}

/* Filled cards show the bare icon in white - no sand chip. This also neutralises
   the "Im Kreis" rule above if both variants happen to be combined. */
.webux-highlights--filled .webux-highlight__icon {
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	color: #fff;
}

.webux-highlights--filled .webux-highlight__icon svg {
	width: 34px;
	height: 34px;
}

.webux-highlights--filled .webux-highlight__title {
	font-size: 18px;
	font-weight: 600;
	color: #fff;
}

.webux-highlights--filled .webux-highlight__text {
	font-size: 14px;
	line-height: 1.55;
	color: #fff;
}

/* Variant "Icon links (Zeile)": horizontal media rows - icon fixed in the left
   column, title + text stacked on the right (contact-list look). Scoped under the
   modifier so the default stacked layout stays byte-identical. Composes with
   --icon-circle (round chip) and the column count. Appended last so it wins the
   align-items tie against --align-left. */
.webux-highlights--icon-left .webux-highlight {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 14px;
	row-gap: 2px;
	align-items: center;
	text-align: left;
}

.webux-highlights--icon-left .webux-highlight__icon {
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: center;
}

.webux-highlights--icon-left .webux-highlight__title {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
}

.webux-highlights--icon-left .webux-highlight__text {
	grid-column: 2;
	grid-row: 2;
	align-self: start;
}

/* ---- Opt-in "Akzent: Icon in Akzentfarbe" ----------------------------------
   The grid reads as one flat block when six entries share the same neutral
   surface. This variant puts each icon on a tinted chip taken from the site
   palette and paints the glyph in the DARKER palette step, so the accent shows
   up six times across the grid instead of once. It is deliberately limited to
   non-text elements: the title and the copy keep the card's own text colour, so
   a light brand colour can never drag body copy below AA.

   Contrast (measured): the chip is the palette primary at 12% over the card, so
   on this site's sage #8A9A7B that is #f1f3ef on a white card. The glyph uses
   primary-dark #6D7A61 -> 4.08:1 against the chip, comfortably over the 3:1
   that WCAG 1.4.11 asks of a non-text graphic; on the surface band (#faf8f2)
   the same pair is 3.87:1. Using the light step instead would give 2.6:1 and
   was rejected. On the theme default palette (#8b8178 / #6f665e) the same rules
   land at 4.94:1 / 4.68:1.

   :not(--filled) keeps the solid checkerboard variant untouched - its icons are
   white on a saturated fill and a tinted chip would only muddy them. Everything
   else is scoped behind the modifier, so the default stays byte-identical. */
.webux-highlights--accent-icon:not(.webux-highlights--filled) .webux-highlight__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--webux-highlight-circle, 52px);
	height: var(--webux-highlight-circle, 52px);
	border-radius: 999px;
	/* Fallback first for engines without color-mix(); both are palette-driven. */
	background: var(--wp--preset--color--surface, #faf8f2);
	background: color-mix(in srgb, var(--wp--preset--color--primary, #8b8178) 12%, transparent);
	color: var(--wp--preset--color--primary-dark, #6f665e);
}

.webux-highlights--accent-icon:not(.webux-highlights--filled) .webux-highlight__icon svg {
	width: 24px;
	height: 24px;
}

/* Variant "Karte mit Rahmen (Polster)": each entry becomes a padded card - white
   surface, hairline border, rounded corners, soft shadow. Composes with the icon
   and alignment variants. Scoped so the plain default stays byte-identical. */
.webux-highlights--boxed .webux-highlight {
	padding: 28px 26px;
	background: #fff;
	border: 1px solid #ece7de;
	/* Für den Zeitstrahl: der Punkt sitzt sonst um die Rahmenbreite daneben,
	   weil er seine Abstände vom Polsterkasten misst. Siehe
	   assets/css/webux-timeline.css. Ausserhalb des Zeitstrahls folgenlos. */
	--webux-timeline-item-border: 1px;
	border-radius: 20px;
	box-shadow: 0 6px 22px rgba(26, 26, 26, 0.05), 0 1px 2px rgba(26, 26, 26, 0.03);
}

/* `muted` ist in den meisten Paletten eine helle Graustufe und erreicht als
   Fliesstext auf Weiss keine 4.5:1 (hier 3.70:1). In dieser Variante steht der
   Text immer auf einer weissen Karte, der Wert ist also vorhersehbar - deshalb
   wird er hier Richtung `contrast` abgedunkelt, statt die Basisregel zu aendern,
   die auch Seiten ohne diese Variante treffen wuerde. */
.webux-highlights--boxed .webux-highlight__text {
	color: color-mix(in srgb, var(--wp--preset--color--contrast, #1a1a1a) 70%, var(--wp--preset--color--base, #ffffff));
}

/* ---- Opt-in „Akzent: Karte in Akzentfarbe“ --------------------------------
   Die Stärkere von zwei Akzentstufen. `--accent-icon` färbt nur die Icons und
   lässt das Raster als weisse Fläche stehen; hier bekommt die KARTE selbst die
   Markenfarbe als Fläche, das Icon wird nicht eingefärbt.

   Schrift auf der Farbfläche ist bewusst DUNKEL, nicht weiss: die Markenfarbe
   dieser Site (Salbei #8A9A7B) trägt Weiss nur mit 3.00:1 und verfehlt damit AA
   für Text deutlich. Mit `contrast` (#1a1a1a) sind es 5.79:1 — die Fläche darf
   also voll gesättigt sein, ohne dass die Lesbarkeit leidet. Auf der
   Theme-Standardpalette (#8b8178) liegt dieselbe Paarung bei 4.65:1.

   ACHTUNG bei einer anderen Palette: Diese Variante setzt voraus, dass `primary`
   dunklen Text mit >= 4.5:1 trägt — also eine mittelhelle bis helle Markenfarbe.
   Bei einem dunklen `primary` (z.B. Stöckli-Grün #009C3F: #1a1a1a = 4.02:1) ist
   sie nicht geeignet.

   Das Icon sitzt weiterhin in einem Kreis, aber in einer aufgehellten Stufe der
   Kartenfläche statt in einer eigenen Farbe (base 30% auf primary -> #adb8a3,
   dunkles Glyph darauf 8.4:1). Es soll die Karte gliedern, nicht mit ihr um
   Aufmerksamkeit konkurrieren.

   Polster und Radius stehen mit in der Regel, damit die Variante auch ohne
   „Karte mit Rahmen“ eine Kartenfläche ergibt; mit --boxed sind es dieselben
   Werte, dessen Schatten bleibt erhalten — deshalb steht dieser Abschnitt NACH
   --boxed. :not(--filled) lässt die gefüllte Schachbrett-Variante unberührt. */
.webux-highlights--accent-surface:not(.webux-highlights--filled) .webux-highlight {
	padding: 28px 26px;
	border-radius: 20px;
	border: 1px solid var(--wp--preset--color--primary-dark, #6f665e);
	--webux-timeline-item-border: 1px;
	background: var(--wp--preset--color--primary, #8b8178);
}

/* Titel und Text explizit, weil --boxed den Fliesstext auf einen gegen WEISS
   gemischten Wert setzt - der wäre auf der Farbfläche zu blass. */
.webux-highlights--accent-surface:not(.webux-highlights--filled) .webux-highlight__title,
.webux-highlights--accent-surface:not(.webux-highlights--filled) .webux-highlight__text {
	color: var(--wp--preset--color--contrast, #1a1a1a);
}

.webux-highlights--accent-surface:not(.webux-highlights--filled) .webux-highlight__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--webux-highlight-circle, 52px);
	height: var(--webux-highlight-circle, 52px);
	border-radius: 999px;
	/* Fallback zuerst für Engines ohne color-mix(). */
	background: rgba(255, 255, 255, 0.3);
	background: color-mix(in srgb, var(--wp--preset--color--base, #ffffff) 30%, transparent);
	color: var(--wp--preset--color--contrast, #1a1a1a);
}

.webux-highlights--accent-surface:not(.webux-highlights--filled) .webux-highlight__icon svg {
	width: 24px;
	height: 24px;
}

/* ---- „Karte in Akzentfarbe, jede zweite dunkler" -------------------------
   Erweitert die Flaechen-Variante oben: die einen Karten behalten die
   Markenfarbe mit dunkler Schrift, die anderen bekommen eine abgedunkelte
   Stufe DERSELBEN Farbe mit weisser Schrift. Zwei Toene einer Farbe statt
   zweier Farben - das Raster bekommt seinen Rhythmus, ohne dass eine zweite
   Farbe in die Palette kommt.

   Welche Karte dunkel wird, haengt von der Spaltenzahl ab - sonst faerbt sich
   auf einem geraden Raster eine ganze SPALTE statt eines Schachbretts. Damit
   die Breakpoints nur noch die Auswahl treffen und nicht jedes Mal alle
   Farbregeln wiederholen muessen, tragen die dunklen Karten vier Custom
   Properties; die drei Regelbloecke darunter lesen sie und fallen sonst auf die
   Werte der Flaechen-Variante zurueck. `initial` macht eine Property ungueltig,
   womit var() wieder den Fallback nimmt - so kann ein Breakpoint eine Auswahl
   sauber zuruecknehmen.

   Der dunkle Ton wird aus `primary` gemischt (68% Farbe, 32% Schwarz), die
   Kante aus 52/48. Auf dem Salbeigruen dieser Site ergibt das #5e6954 und
   #485040: weisse Schrift steht darauf bei 5.79:1 bzw. 8.41:1, und gegen die
   helle Karte (#8a9a7b) hebt sich der dunkle Ton mit 1.93:1 ab - deutlich
   genug, um als Muster gelesen zu werden. Auf der Theme-Standardpalette sind
   es 6.99:1 / 9.78:1.

   ACHTUNG bei einer sehr hellen Markenfarbe: 32% Schwarz reichen dann
   moeglicherweise nicht fuer 4.5:1 gegen Weiss. Beide Toene haengen deshalb an
   Custom Properties und lassen sich pro Site setzen:
     .webux-highlights { --webux-highlight-alt: #5e6954; --webux-highlight-alt-border: #485040; }
*/
.webux-highlights--accent-surface-alt:not(.webux-highlights--filled) .webux-highlight:nth-child(even) {
	--webux-highlight-alt-bg: var(--webux-highlight-alt, color-mix(in srgb, var(--wp--preset--color--primary, #8b8178) 68%, #000000));
	--webux-highlight-alt-line: var(--webux-highlight-alt-border, color-mix(in srgb, var(--wp--preset--color--primary, #8b8178) 52%, #000000));
	--webux-highlight-alt-fg: var(--wp--preset--color--base, #ffffff);
	/* Das Icon-Chip der Flaechen-Variante ist Weiss mit 30% - auf dem Braun
	   waere ein weisses Glyph darauf zu blass (rund 2:1, die 3:1 aus WCAG
	   1.4.11 fuer Grafiken werden verfehlt). Hier wird das Chip deshalb
	   abgedunkelt statt aufgehellt: weisses Glyph darauf steht bei 7.4:1. */
	--webux-highlight-alt-chip: rgba(0, 0, 0, 0.22);
}

/* Zweispaltiges Raster (der Breakpoint der Basisregel ganz oben): „jede zweite"
   wuerde hier die rechte Spalte durchfaerben. 4n+2 und 4n+3 versetzen das
   Muster pro Zeile und ergeben wieder ein Schachbrett. */
@media (min-width: 601px) and (max-width: 900px) {
	.webux-highlights--accent-surface-alt:not(.webux-highlights--filled) .webux-highlight:nth-child(even) {
		--webux-highlight-alt-bg: initial;
		--webux-highlight-alt-line: initial;
		--webux-highlight-alt-fg: initial;
		--webux-highlight-alt-chip: initial;
	}

	.webux-highlights--accent-surface-alt:not(.webux-highlights--filled) .webux-highlight:nth-child(4n+2),
	.webux-highlights--accent-surface-alt:not(.webux-highlights--filled) .webux-highlight:nth-child(4n+3) {
		--webux-highlight-alt-bg: var(--webux-highlight-alt, color-mix(in srgb, var(--wp--preset--color--primary, #8b8178) 68%, #000000));
		--webux-highlight-alt-line: var(--webux-highlight-alt-border, color-mix(in srgb, var(--wp--preset--color--primary, #8b8178) 52%, #000000));
		--webux-highlight-alt-fg: var(--wp--preset--color--base, #ffffff);
		--webux-highlight-alt-chip: rgba(0, 0, 0, 0.22);
	}
}

/* Die Konsumenten. Ohne gesetzte Property greift jeweils der Wert der
   Flaechen-Variante, die Karte bleibt also unveraendert. Gleiche Spezifitaet
   wie deren Regeln (0,3,0) - dieser Abschnitt steht danach und gewinnt ueber
   die Quellreihenfolge. */
.webux-highlights--accent-surface-alt:not(.webux-highlights--filled) .webux-highlight {
	background: var(--webux-highlight-alt-bg, var(--wp--preset--color--primary, #8b8178));
	border-color: var(--webux-highlight-alt-line, var(--wp--preset--color--primary-dark, #6f665e));
}

.webux-highlights--accent-surface-alt:not(.webux-highlights--filled) .webux-highlight__title,
.webux-highlights--accent-surface-alt:not(.webux-highlights--filled) .webux-highlight__text {
	color: var(--webux-highlight-alt-fg, var(--wp--preset--color--contrast, #1a1a1a));
}

.webux-highlights--accent-surface-alt:not(.webux-highlights--filled) .webux-highlight__icon {
	background: var(--webux-highlight-alt-chip, color-mix(in srgb, var(--wp--preset--color--base, #ffffff) 30%, transparent));
	color: var(--webux-highlight-alt-fg, var(--wp--preset--color--contrast, #1a1a1a));
}

/* ---- Titel-Gewichtung „Kleinzeile ueber dem Wert" (Opt-in) ----------------
   Fuer Angaben, bei denen der WERT der Inhalt ist und der Titel nur benennt,
   um welchen Wert es geht: Telefon, E-Mail, Adresse, Oeffnungszeiten. In der
   Standard-Gewichtung steht dort eine 20px-Ueberschrift „Telefon" ueber einer
   kleineren, grauen Nummer - also das Etikett laut und die Antwort leise.
   Hier ist es umgekehrt: der Titel wird zur ruhigen Kleinzeile, der Text traegt
   die Hauptzeile in voller Textfarbe.

   Die Ueberschrift bleibt im Markup eine <h3> - die Gliederung der Seite
   aendert sich nicht, nur ihr Gewicht im Bild. Nichts davon greift ohne den
   Modifier, die Standardvariante bleibt unveraendert. */
.webux-highlights--title-eyebrow .webux-highlight__title {
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* `muted` ist als Fliesstext oft zu blass; als kurze Kleinzeile auf weisser
	   Karte steht sie hier bei 4.6:1 gegen die Karte (muted #8a847d) - AA fuer
	   normalen Text. Der Wert darunter traegt ohnehin die volle Textfarbe. */
	color: color-mix(in srgb, var(--wp--preset--color--contrast, #1a1a1a) 62%, var(--wp--preset--color--base, #ffffff));
}

.webux-highlights--title-eyebrow .webux-highlight__text {
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.45;
	color: var(--wp--preset--color--contrast, #1a1a1a);
}

/* ---- Anklickbare Kachel (Opt-in ueber „Link" am Eintrag) ------------------
   Die ganze Karte ist das Ziel, nicht die Textzeile: auf dem Handy ist eine
   Telefonnummer damit antippbar statt markierbar, und das Ziel liegt weit
   ueber den 44x44 CSS-Pixeln aus WCAG 2.5.5.

   Die Karte muss auch als klickbar zu ERKENNEN sein, ohne dass sie wie ein
   Button aussieht: im Ruhezustand nur der Zeiger und die uebliche Kartenkante,
   beim Hover hebt sie sich leicht, die Kante nimmt die Markenfarbe an und der
   Wert wird unterstrichen. Die Unterstreichung ist der Teil, der auch ohne
   Farbwahrnehmung ankommt.

   Tastatur: `:focus-visible` bekommt einen eigenen Ring statt des Hover-Bilds -
   der Browser-Default waere auf der weissen Karte kaum zu sehen. */
.webux-highlight--link {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.webux-highlight--link:hover {
	border-color: var(--wp--preset--color--primary, #8b8178);
	box-shadow: 0 10px 28px rgba(26, 26, 26, 0.10), 0 2px 6px rgba(26, 26, 26, 0.05);
	transform: translateY(-3px);
}

.webux-highlight--link:hover .webux-highlight__text {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.webux-highlight--link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-dark, #6f665e);
	outline-offset: 3px;
}

/* Das getoente Icon-Chip (Variante „Icon in Akzentfarbe") zieht beim Hover mit:
   die Flaeche wird kraeftiger, das Glyph bleibt in der dunklen Palettenstufe.
   Rein dekorativ - die Erkennbarkeit haengt an Kante und Unterstreichung. */
.webux-highlights--accent-icon:not(.webux-highlights--filled) .webux-highlight--link .webux-highlight__icon {
	transition: background-color 180ms ease;
}

.webux-highlights--accent-icon:not(.webux-highlights--filled) .webux-highlight--link:hover .webux-highlight__icon {
	background: color-mix(in srgb, var(--wp--preset--color--primary, #8b8178) 22%, transparent);
}

/* Hinweis, dass die Kachel ein Ziel ist - ein kleiner Pfeil oben rechts. Er
   steht ruhig in der Ecke (halbe Deckkraft) und wird beim Hover kraeftiger und
   wandert einen Hauch nach aussen. Als Hintergrundbild des ::after statt als
   Markup, damit das Raster der Zeilen-Variante unveraendert bleibt; die Farbe
   steckt fest im SVG, weil background-image kein currentColor kennt - der Pfeil
   ist reine Dekoration (aria-hidden waere er auch als Markup), die Bedeutung
   traegt das <a> selbst.

   Ein aehnliches „hier geht es weiter" gibt es sonst nur ueber Farbe; ein Pfeil
   kommt auch bei Farbenblindheit an und stoert den Textblock nicht, weil er in
   der Ecke sitzt statt in der Zeile. */
.webux-highlight--link {
	position: relative;
}

.webux-highlight--link::after {
	content: "";
	position: absolute;
	top: 14px;
	right: 14px;
	width: 15px;
	height: 15px;
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f5a55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17 17 7'/><path d='M8 7h9v9'/></svg>");
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.5;
	transition: opacity 180ms ease, transform 180ms ease;
}

.webux-highlight--link:hover::after,
.webux-highlight--link:focus-visible::after {
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17 17 7'/><path d='M8 7h9v9'/></svg>");
	opacity: 1;
	transform: translate(2px, -2px);
}

/* Zeilen-Layout mit Kleinzeile: Icon nach OBEN statt in die Mitte. Zentriert
   sitzt es bei drei Zeilen Adresse tiefer als bei einer Zeile Telefonnummer -
   in einer Reihe von vier Kacheln stehen die Icons dann auf vier verschiedenen
   Hoehen. Mit `start` liegen Icon, Kleinzeile und Wert in jeder Kachel auf
   derselben Linie. `align-content: start` haelt zusaetzlich den ganzen Inhalt
   oben, wenn eine laengere Nachbarkachel die Karte streckt. */
.webux-highlights--title-eyebrow.webux-highlights--icon-left .webux-highlight {
	align-content: start;
	/* Dritte Zeile als Puffer: das Icon ist hoeher als Kleinzeile plus einzeilige
	   Angabe, und die Restlhoehe wuerde sonst zwischen Kleinzeile und Wert
	   landen - auf dem Handy klafft dort sichtbar eine Luecke. Mit `1fr` unten
	   sammelt sich die Resthoehe am Fuss der Kachel, die beiden Textzeilen
	   bleiben zusammen. Gleicher Kniff wie in der Variante „Farbfeld an der
	   Kante". */
	grid-template-rows: auto auto 1fr;
}

.webux-highlights--title-eyebrow.webux-highlights--icon-left .webux-highlight__icon {
	grid-row: 1 / -1;
}

/* Die Zeilen-Variante klebt den Titel mit `align-self: end` an die Unterkante
   seiner Zeile - das zentriert Titel und Text um die Icon-Mitte, was bei einer
   fetten Ueberschrift richtig ist. Hier nicht: das Icon spannt beide Zeilen und
   ist hoeher als eine Kleinzeile plus eine Wertzeile, die Restlhoehe verteilt
   das Grid auf die Zeilen, und die Kleinzeile rutscht dadurch nach unten -
   genau in den Kacheln mit kurzem Wert. Vier Kacheln nebeneinander zeigen das
   als ungleiche Grundlinie (gemessen 29px vs. 34px). Oben ausgerichtet stehen
   Kleinzeile, Wert und Icon in jeder Kachel auf derselben Linie. */
.webux-highlights--title-eyebrow.webux-highlights--icon-left .webux-highlight__title {
	align-self: start;
}

.webux-highlights--title-eyebrow.webux-highlights--icon-left .webux-highlight__icon {
	align-self: start;
}

/* Wer Bewegung reduziert, bekommt dieselbe Rueckmeldung ohne das Anheben. */
@media (prefers-reduced-motion: reduce) {
	.webux-highlight--link {
		transition: box-shadow 180ms ease, border-color 180ms ease;
	}

	.webux-highlight--link:hover {
		transform: none;
	}
}

/* ===== Icon-Darstellung „Farbfeld an der Kante" (Opt-in) ====================
   Das Icon sitzt auf einer gefuellten Flaeche an der linken Kante der Karte,
   Titel und Text stehen daneben auf der Kartenflaeche. Setzt das Zeilen-Layout
   (icon-left) voraus, das die Grid-Spalten bereits definiert - hier kommen nur
   Flaeche, Farbe und das Umbrechen auf schmalen Viewports dazu.

   Farbe: primary als Flaeche mit weissem Icon. Das Icon ist eine Grafik, fuer
   die WCAG 1.4.11 drei zu eins verlangt - Weiss auf #8A9A7B erreicht 3.00:1 und
   haelt diese Schwelle. Als TEXTfarbe waere derselbe Wert zu wenig, deshalb
   bleiben Titel und Text auf der weissen Kartenflaeche. */
.webux-highlights--icon-panel .webux-highlight {
	position: relative;
	overflow: hidden;
	column-gap: 0;
	padding: 0;
	align-items: stretch;
	/* Explizite Zeilen statt align-content: start. Die dritte Zeile schluckt die
	   Resthoehe, damit Titel und Text oben stehen (sonst zentriert das Grid sie und
	   Karten mit unterschiedlich viel Text setzen ihre Titel auf unterschiedliche
	   Hoehen) - UND das Farbfeld ueber `grid-row: 1 / -1` trotzdem die ganze
	   Kartenhoehe fuellt. Mit align-content: start waere es auf die Inhaltshoehe
	   geschrumpft und hing als kurzer Streifen in der Karte. */
	grid-template-rows: auto auto 1fr;
	/* Rahmen in der Panelfarbe: Feld und Kontur lesen sich so als ein Element
	   statt als farbiger Block in einem fremden Kasten. Bewusst NUR unter dieser
	   Variante - `--boxed` allein wird auch anderswo verwendet und behaelt seine
	   neutrale Haarlinie.
	   1px primary auf Weiss = 3.00:1 und haelt damit die 3:1, die WCAG 1.4.11 fuer
	   die sichtbare Begrenzung eines Elements verlangt. */
	border-color: var(--wp--preset--color--primary, #8b8178);
}

.webux-highlights--icon-panel .webux-highlight__icon {
	grid-row: 1 / -1;
}

.webux-highlights--icon-panel .webux-highlight__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	width: 84px;
	padding: 24px 0;
	background: var(--wp--preset--color--primary, #8b8178);
	color: var(--wp--preset--color--base, #fff);
}

.webux-highlights--icon-panel .webux-highlight__icon svg {
	width: 28px;
	height: 28px;
}

/* Der Text bekommt das Polster, das die Karte selbst abgegeben hat. */
.webux-highlights--icon-panel .webux-highlight__title,
.webux-highlights--icon-panel .webux-highlight__text {
	padding-inline: 20px;
}

.webux-highlights--icon-panel .webux-highlight__title {
	padding-top: 22px;
}

.webux-highlights--icon-panel .webux-highlight__text {
	padding-bottom: 22px;
}

/* Schmale Viewports: das Farbfeld wandert ueber den Text, wie gewuenscht. Das
   Grid wird einspaltig, das Feld spannt die volle Breite und wird flacher. */
@media (max-width: 600px) {
	.webux-highlights--icon-panel .webux-highlight {
		grid-template-columns: minmax(0, 1fr);
	}

	.webux-highlights--icon-panel .webux-highlight__icon {
		grid-column: 1;
		grid-row: 1;
		width: auto;
		padding: 16px 0;
	}

	.webux-highlights--icon-panel .webux-highlight__title {
		grid-column: 1;
		grid-row: 2;
		padding-top: 18px;
	}

	.webux-highlights--icon-panel .webux-highlight__text {
		grid-column: 1;
		grid-row: 3;
	}
}

/* ---- Opt-in „Karte ohne Rahmen (nur Polster)" -----------------------------
   Dieselbe Karte wie `--boxed`, nur ohne die Umrandung und ohne den Schatten:
   die Kacheln stehen als ruhige Blöcke auf der Seitenfläche statt als Gitter
   aus umrandeten Karten. Reine Abzüge - alles andere (Polster, Radius, die
   abgedunkelte Textfarbe) kommt weiterhin aus `--boxed`.

   Die Fläche wird transparent statt weiss: eine weisse Karte ohne Rahmen auf
   weissem Grund wäre gar keine Karte mehr, sondern eine unsichtbare Kante, die
   nur bei einem Hintergrundwechsel plötzlich auftaucht. So trägt der Abstand
   die Gruppierung.

   Zwei Klassen (0,2,0) gegen die eine von `--boxed` (0,1,0) - die Reihenfolge
   innerhalb der Datei entscheidet also nicht mit. */
.webux-highlights--boxed.webux-highlights--boxed-flat .webux-highlight {
	background: transparent;
	border: 0;
	box-shadow: none;
	/* Kein Rahmen mehr - also auch nichts zu kompensieren. */
	--webux-timeline-item-border: 0px;
	/* Ohne Rahmen darf das Polster kleiner sein - es trennt jetzt nur noch,
	   statt eine Kartenfläche zu füllen. */
	padding: 4px 0;
}

/* Ein gesetzter Link macht die Kachel anklickbar; ohne Kartenfläche braucht
   der Hover eine eigene Rückmeldung, sonst passiert beim Überfahren nichts. */
.webux-highlights--boxed.webux-highlights--boxed-flat .webux-highlight--link:hover .webux-highlight__title,
.webux-highlights--boxed.webux-highlights--boxed-flat .webux-highlight--link:focus-visible .webux-highlight__title {
	color: var(--wp--preset--color--primary-dark, #6f665e);
}

/* ---- Anordnung „Zeitstrahl, alternierend" (opt-in) -------------------------
   Spur, Punkte, Füllung und Scroll-Choreografie kommen aus dem geteilten Modul
   assets/css/webux-timeline.css (der Block gibt dafür `webux-timeline` und
   `webux-timeline__item` mit aus). Hier steht nur, was der Block beisteuert:
   das Spalten-Raster wird zur einspaltigen Kette.

   Der doppelte Modifier ist Absicht: `.webux-highlights` (0,1,0) und
   `.webux-timeline` (0,1,0) sind gleich spezifisch, und welche der beiden
   Dateien zuerst lädt, ist nicht garantiert. Mit (0,2,0) entscheidet die Frage
   sich nicht mehr über die Reihenfolge. */
.webux-highlights.webux-highlights--timeline-split {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Die Breite eines Eintrags gibt das Modul vor (halbe Spalte je Seite) - hier
   wird sie NICHT gesetzt, sonst liefe die Karte über die Spur. Nur das
   Boxmodell wird festgeklopft: die Karte trägt Polster und Rahmen, und die
   halbe Spalte ist eine Aussenmasszahl. */
.webux-highlights.webux-highlights--timeline-split .webux-highlight {
	box-sizing: border-box;
}