/* Webux Steps: numbered process grid. */
.webux-steps {
	counter-reset: webux-step;
	display: grid;
	grid-template-columns: repeat(var(--webux-cols, 3), minmax(0, 1fr));
	gap: clamp(1.75rem, 3vw, 2.75rem);
	/* Breathing room from the section heading above (the section inner has no
	   gap of its own, so without this the grid touches the heading). */
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

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

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

.webux-step {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	background: var(--wp--preset--color--base, #ffffff);
	border: 1px solid var(--wp--preset--color--border, #e2e4e9);
	border-radius: 0.5rem;
	padding: var(--wp--preset--spacing--40, 1.5rem);
}

.webux-step__number::before {
	counter-increment: webux-step;
	content: counter(webux-step, decimal-leading-zero);
	display: block;
	font-size: var(--wp--preset--font-size--x-large, 1.75rem);
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--primary, #2563eb);
}

/* Badge variant: the number sits in a filled accent circle. Only the counter
   style changes — decimal-leading-zero (01, 02) would not fit the circle, so
   the badge prints the bare counter (1, 2, …). counter-increment keeps coming
   from the base rule above, the cascade only replaces the listed properties.
   The .webux-steps--badge rules are doubled up with .webux-steps so they
   outrank the .lv-steps overrides in site.css regardless of load order. */
.webux-steps.webux-steps--badge .webux-step__number {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 999px;
	background: var(--wp--preset--color--primary, #8b8178);
	margin-bottom: 14px;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	box-shadow: 0 6px 16px color-mix(in srgb, var(--wp--preset--color--primary, #356b4b) 30%, transparent);
}

.webux-steps.webux-steps--badge .webux-step__number::before {
	content: counter(webux-step);
	display: block;
	margin-bottom: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: 1;
	color: inherit;
}

/* Compact badge: same circle, only smaller. Comes after the badge rules above
   so it wins on equal specificity, and is scoped to --badge because the plain
   counter variant has no circle to resize. */
.webux-steps.webux-steps--badge.webux-steps--badge-compact .webux-step__number {
	width: 48px;
	height: 48px;
	font-size: 20px;
}

/* Plain variant: steps sit directly on the page background, no card. */
.webux-steps.webux-steps--plain .webux-step {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

/* Elevated cards: no outline, a soft shadow carries the card instead. Doubled
   wrapper class (0,3,0) so it also outranks the ungescoped .lv-steps
   .webux-step overrides in site.css; placed after --plain so an explicit
   card style wins over the borderless variant. */
.webux-steps.webux-steps--elevated .webux-step {
	border: 0;
	border-radius: 20px;
	box-shadow: 0 2px 8px rgba(16, 24, 15, 0.08), 0 1px 2px rgba(16, 24, 15, 0.06);
	padding: 30px 28px;
}

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

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

/* ---- Nummern-Darstellung „Ohne Nummer" ----
   Es gibt hier bewusst KEINE Regel, die etwas versteckt: render.php gibt das
   Element `.webux-step__number` gar nicht erst aus. Damit läuft auch kein
   counter-increment (das steckt in `.webux-step__number::before`), die
   Nummerierung springt also nicht, und im Flex-Layout des Schritts entsteht
   keine leere Zeile und keine Gap. Die Klasse `--no-number` dient allein dem
   Timeline-Layout unten, wo die Nummernspalte wegfallen muss. */

/* ---- Variante „timeline" (Opt-in): vertikaler Verlauf ----
   Löst das Spalten-Grid in eine einspaltige Kette auf: links die Nummer,
   rechts der Text, dazwischen eine durchgehende Verbindungslinie.

   Spezifität: die Container-Regel qualifiziert den Modifier doppelt (0,3,0),
   weil die geteilte assets/css/site.css mit `.lv-steps.webux-steps { gap: 24px }`
   (0,2,0) NACH dieser Datei lädt. Der Verlauf setzt seinen vertikalen Rhythmus
   über `padding-bottom` der Schritte statt über `gap`, damit die Linie
   lückenlos von einem Schritt zum nächsten durchläuft. */
.webux-steps.webux-steps--timeline.webux-steps--timeline {
	display: flex;
	flex-direction: column;
	gap: 0;
	/* Breite der Nummernspalte und Startpunkt der Verbindungslinie darunter. */
	--webux-rail: 54px;
	--webux-rail-top: 2.25rem;
}

/* Der gefüllte Kreis ist höher als die blosse Zahl, die Linie startet tiefer. */
.webux-steps.webux-steps--timeline.webux-steps--badge {
	--webux-rail-top: 60px;
}

.webux-steps.webux-steps--timeline.webux-steps--badge.webux-steps--badge-compact {
	--webux-rail: 48px;
	--webux-rail-top: 54px;
}

/* 0,3,0 - schlägt sowohl die Basisregel `.webux-step` als auch die ungescopten
   `.lv-steps .webux-step`-Overrides (0,2,0) aus der geteilten site.css. */
.webux-steps.webux-steps--timeline .webux-step {
	position: relative;
	display: grid;
	grid-template-columns: var(--webux-rail) minmax(0, 1fr);
	column-gap: 24px;
	row-gap: 0.5rem;
	align-items: start;
	/* Die Karte wird aufgelöst - der Verlauf sitzt auf dem Seitenhintergrund. */
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0 0 clamp(1.75rem, 3vw, 2.75rem);
}

.webux-steps.webux-steps--timeline .webux-step:last-child {
	padding-bottom: 0;
}

/* Nummer in die linke Spur; `margin-bottom: 0` hebt den Badge-Abstand auf
   (steht nach `.webux-steps.webux-steps--badge .webux-step__number`, gleiche
   Spezifität, gewinnt über die Quellreihenfolge). */
.webux-steps.webux-steps--timeline .webux-step__number {
	grid-column: 1;
	grid-row: 1;
	margin-bottom: 0;
	text-align: center;
}

.webux-steps.webux-steps--timeline .webux-step__title,
.webux-steps.webux-steps--timeline .webux-step__text {
	grid-column: 2;
	/* Der Verlauf nimmt links 78px für Nummer und Abstand weg. Auf dem Handy
	   kann ein langes Kompositum („Bedarfsklärung") sonst aus der Spalte
	   laufen - `minmax(0, 1fr)` erlaubt der Spur, unter die min-content-Breite
	   zu schrumpfen. Nur unter dem Timeline-Modifier; das Karten-Grid bleibt
	   unverändert. */
	overflow-wrap: break-word;
}

/* Verbindungslinie: von unterhalb der eigenen Nummer bis zur Unterkante des
   Schritts. Weil der Container `gap: 0` hat, stösst sie direkt an die Oberkante
   der nächsten Nummer - die Kette bleibt lückenlos. Der letzte Schritt bekommt
   keine Linie. */
.webux-steps.webux-steps--timeline .webux-step::before {
	content: "";
	position: absolute;
	top: var(--webux-rail-top);
	bottom: 0;
	left: calc((var(--webux-rail) - 2px) / 2);
	width: 2px;
	border-radius: 1px;
	background: var(--wp--preset--color--border, #e2e4e9);
}

.webux-steps.webux-steps--timeline .webux-step:last-child::before {
	content: none;
}

/* Ohne Nummer bleibt die Spur erhalten - sie IST das, was die Variante verspricht.
   Statt der Nummernspalte trägt eine schmale Spur einen Punkt pro Schritt; die
   Verbindungslinie darunter läuft unverändert weiter. Ohne sie wäre „Vertikaler
   Verlauf" nur gestapelter Text. */
.webux-steps.webux-steps--timeline.webux-steps--no-number {
	/* Schmalere Spur, und die Linie startet direkt unter dem Punkt statt unter
	   einer Nummernzeile. */
	--webux-rail: 28px;
	--webux-rail-top: 24px;
}

/* Der Punkt ersetzt die Nummer als Ankerpunkt der Linie: er sitzt auf derselben
   Achse (Spurmitte 14px), damit die Verbindungslinie mittig weiterläuft. Als
   Pseudo-Element des Schritts blendet er beim Scroll-Reveal mit ihm ein. */
.webux-steps.webux-steps--timeline.webux-steps--no-number .webux-step::after {
	content: "";
	position: absolute;
	top: 8px;
	left: 8px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary, #8b8178);
}

@media (max-width: 600px) {
	.webux-steps.webux-steps--timeline .webux-step {
		column-gap: 16px;
	}
}

/* ---- Variante „timeline-split" (Opt-in): Zeitstrahl, alternierend ----
   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 SCHRITT beisteuert:
   die Karte wird aufgelöst, die Nummer setzt sich über den Titel statt in eine
   eigene Spalte - eine Nummernspalte neben einem halbbreiten Textblock liesse
   für den Text kaum noch Platz.

   Spezifität: doppelt notierter Modifier (0,3,0), damit die Regeln die
   ungescopten `.lv-steps .webux-step`-Overrides (0,2,0) aus der geteilten
   site.css unabhängig von der Ladereihenfolge schlagen - dasselbe Muster wie
   bei der einspaltigen Variante darüber. */
/* Container: das Spalten-Raster der Basisregel wird zur einspaltigen Kette.
   Steht hier und nicht nur im geteilten Modul, weil `.webux-steps` (0,1,0) und
   `.webux-timeline` (0,1,0) gleich spezifisch sind - welche Datei zuerst lädt,
   ist nicht garantiert. Mit dem doppelten Modifier entscheidet die Frage sich
   nicht mehr über die Reihenfolge. */
.webux-steps.webux-steps--timeline-split.webux-steps--timeline-split {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.webux-steps.webux-steps--timeline-split.webux-steps--timeline-split .webux-step {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

/* Der gefüllte Kreis der Badge-Variante würde neben dem Punkt der Spur als
   zweiter Marker lesen; als kleine Zeile über dem Titel bleibt er Nummer. */
.webux-steps.webux-steps--timeline-split .webux-step__number {
	margin-bottom: 2px;
	text-align: left;
}

.webux-steps.webux-steps--timeline-split.webux-steps--badge .webux-step__number {
	width: 36px;
	height: 36px;
	font-size: 16px;
	box-shadow: none;
}

/* Der Titel trägt hier die Zeile - im Raster steht er neben zwei weiteren
   Karten, hier allein auf seiner Seite. */
.webux-steps.webux-steps--timeline-split .webux-step__title {
	font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
	line-height: 1.3;
}

/* Lange Komposita („Bedarfsklärung") in einer halbbreiten Spalte. */
.webux-steps.webux-steps--timeline-split .webux-step__title,
.webux-steps.webux-steps--timeline-split .webux-step__text {
	overflow-wrap: break-word;
}

/* ---- Scroll-Reveal des Verlaufs ----
   Der Basiszustand versteckt NICHTS. Ohne JavaScript fehlt die Klasse
   `webux-steps-reveal` auf <html> (die setzt allein das Inline-Snippet aus
   inc/webux-steps-reveal.php), damit greift keine der Regeln unten und alle
   Schritte sind normal lesbar. Die Klasse sitzt bewusst auf dem Wurzelelement
   und wird im <head> gesetzt: so sind die Schritte schon beim ersten Paint
   unsichtbar, statt kurz aufzublitzen und dann zu verschwinden - was auf
   grossen Bildschirmen auffiel, wo ein Teil der Liste beim Laden im Viewport
   steht. Zusätzlich hängt der ganze Effekt in
   `prefers-reduced-motion: no-preference`: wer Bewegung reduziert, sieht die
   Schritte ohne Fade und ohne Versatz. */
@media (prefers-reduced-motion: no-preference) {
	.webux-steps-reveal .webux-steps.webux-steps--timeline .webux-step {
		opacity: 0;
		/* Etwas mehr Weg als vorher (16px) und eine ausschwingende Kurve - die
		   Bewegung soll auch dann auffallen, wenn beim Laden mehrere Schritte
		   gleichzeitig eingeblendet werden (das Skript staffelt sie zusätzlich
		   über transition-delay). */
		transform: translateY(24px);
		transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
		/* Nur die Deckkraft/Position animieren, nicht der Rest der Karte. */
		will-change: opacity, transform;
	}

	.webux-steps-reveal .webux-steps.webux-steps--timeline .webux-step.is-revealed {
		opacity: 1;
		transform: none;
		will-change: auto;
	}
}

/* Druck: Beim Drucken wird nicht gescrollt, der IntersectionObserver feuert
   also nie - ohne diese Regel käme der Verlauf leer aufs Papier. Der Reveal ist
   reine Bildschirm-Choreografie (gleiche Absicherung wie in
   assets/css/webux-reveal.css). */
@media print {
	.webux-steps.webux-steps--timeline .webux-step {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}