/* ==========================================================================
   Websmarty – Grafik im Hero (Startseite, Leistungsseiten)

   Die Zeitachse startet, sobald die Karte ins Bild kommt (main.js setzt .is-playing);
   am Desktop sofort beim Laden, mobil erst beim Hinscrollen.
   Gemeinsame Zeitachse ab Start:
   220 ms  Bild steigt auf (.intro)
   500 ms  Karte steigt auf, 750 ms zweite Kennzahl
   800 ms  Darstellung startet (Kurve, Balken, Ringe, Schieber …), 1600 ms lang;
           Zahlen zählen synchron mit (main.js liest .stats-card__clock)
   2300 ms Abschluss (Gewinner, Endpunkt, neue Section)
   2400 ms Lichtkante gleitet einmal über die Karte
   Nur transform, opacity, clip-path und Farben kleiner Flächen.
   Bei „Bewegung reduzieren“ steht alles still im Endzustand.
   ========================================================================== */

/* Licht und überstehende Karten dürfen die Seite nicht seitlich verbreitern */
.home-hero,
.lhero {
	overflow-x: clip;
}

.hero-visual {
	position: relative;
}

/* Platzhalter hinter der Grafik: nur das Bildsymbol oben links im freien Bereich
   (Format und Motiv stehen unter Websmarty → Bilder) */
.hero-visual--stats .media-slot--placeholder {
	place-items: start;
}

.hero-visual--stats .media-slot__meta,
.hero-visual--stats .media-slot__where,
.hero-visual--stats .media-slot__motif,
.hero-visual--stats .media-slot__alt {
	display: none;
}

/* Mobil und Tablet: Karte überlappt die Unterkante des Bildes */
.hero-stats {
	display: grid;
	justify-items: start;
	margin-top: calc(var(--s-12) * -1);
	padding-inline: var(--s-4);
	pointer-events: none;
}

/* Karte ------------------------------------------------------------------- */

.stats-card {
	--bezel-r: var(--r-lg);
	--ease-viz: cubic-bezier(0.65, 0, 0.35, 1); /* gleiche Kurve wie easeInOutCubic in main.js */
	position: relative;
	z-index: 1;
	isolation: isolate;
	width: min(100%, 21.5rem);
	background: var(--c-bg-raised);
	box-shadow: var(--shadow-pop);
	animation: ws-rise 700ms var(--ease-out) 500ms both;
}

/* Weiches Lime-Licht hinter der Karte */
.stats-card::before {
	content: "";
	position: absolute;
	inset: -30% -20%;
	z-index: -1;
	background: radial-gradient(closest-side, var(--c-accent-glow), transparent);
	pointer-events: none;
}

.stats-card__core {
	position: relative;
	overflow: hidden;
	container-type: inline-size;
	display: grid;
	gap: var(--s-3);
	padding: var(--s-5) var(--s-5) var(--s-4);
}

/* Lichtkante: gleitet einmal über die Karte, sobald die Darstellung steht */
.stats-card__core::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 35%, rgb(255 255 255 / 0.07) 50%, transparent 65%);
	opacity: 0;
	pointer-events: none;
	animation: ws-stats-sheen 1400ms var(--ease-in-out) 2400ms both;
}

/* Taktgeber fürs Hochzählen (unsichtbar) */
.stats-card__clock {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
	animation: ws-stats-clock 1600ms linear 800ms backwards;
}

.stats-card__figures {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2) var(--s-3);
}

.stats-card__value {
	color: var(--c-text);
	font-family: var(--ff-display);
	font-size: clamp(1.75rem, 1.45rem + 1vw, 2.25rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.stats-card__change {
	flex: none;
	padding: 0.3em 0.65em;
	border-radius: var(--r-pill);
	background: var(--c-accent-soft);
	color: var(--c-accent);
	font-size: var(--fs-xs);
	font-weight: 600;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.stats-card__title {
	display: block;
	margin-top: var(--s-2);
	color: var(--c-text-2);
	font-size: var(--fs-xs);
	font-weight: 550;
}

/* Kopf ohne großen Wert: Titel und Veränderung in einer Zeile */
.stats-card__head--compact {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
}

.stats-card__head--compact .stats-card__title {
	margin: 0;
	color: var(--c-text);
	font-size: var(--fs-sm);
	font-weight: 600;
}

/* Fuß: Legende und Hinweis */
.stats-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-1) var(--s-4);
	color: var(--c-text-3);
	font-size: var(--fs-xs);
	line-height: 1.4;
}

.stats-card__key {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	color: var(--c-text-2);
}

.stats-card__key::before {
	content: "";
	width: 0.875rem;
	border-top: 2px solid var(--c-accent);
	border-radius: 2px;
}

.stats-card__key--before::before {
	border-top-style: dashed;
	border-top-color: color-mix(in srgb, var(--c-text) 40%, transparent);
}

.stats-card--funnel .stats-card__key--before::before {
	border-top-style: solid;
}

.stats-card__note {
	margin-left: auto;
}

/* Gemeinsame Bausteine: Platzhalter-Flächen in Mini-Seiten */
.vz-wf {
	display: block;
	border-radius: 3px;
	background: var(--c-surface-3);
}

/* Kurve ------------------------------------------------------------------- */

.stats-card__plot {
	position: relative;
	color: var(--c-accent);
}

.stats-card__plot svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.stats-card__reveal {
	position: absolute;
	inset: 0;
	animation: ws-stats-wipe 1600ms var(--ease-viz) 800ms backwards;
}

.stats-card__gridline {
	stroke: var(--c-line-strong);
	stroke-width: 1;
}

.stats-card__tick,
.stats-card__axis {
	fill: var(--c-text-3);
	font-family: var(--ff-sans);
	font-size: 10.5px;
	font-variant-numeric: tabular-nums;
}

.stats-card__tick {
	text-anchor: end;
	dominant-baseline: middle;
}

.stats-card__axis {
	text-anchor: middle;
}

.stats-card__before {
	fill: none;
	stroke: color-mix(in srgb, var(--c-text) 34%, transparent);
	stroke-width: 1.5;
	stroke-dasharray: 3 4;
	stroke-linecap: round;
	animation: ws-fade 600ms ease 700ms both;
}

.stats-card__line {
	fill: none;
	stroke: currentColor;
	stroke-width: 2.25;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Leuchten der Kurve (statisch, wird mit der Kurve aufgedeckt) */
.stats-card__glow {
	fill: none;
	stroke: currentColor;
	stroke-width: 6;
	opacity: 0.35;
}

.stats-card__point {
	fill: currentColor;
	stroke: var(--c-surface);
	stroke-width: 2;
	transform-box: fill-box;
	transform-origin: center;
	animation: ws-stats-pop 360ms var(--ease-out) 2300ms both;
}

.stats-card__ping {
	fill: currentColor;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	animation: ws-stats-ping 2800ms var(--ease-out) 2600ms infinite;
}

/* A/B-Vergleich ----------------------------------------------------------- */

.vz-ab {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-3);
}

.vz-ab__col {
	display: grid;
	gap: 6px;
	animation: ws-viz-in 500ms var(--ease-out) calc(800ms + var(--i) * 150ms) backwards;
}

.vz-ab__frame {
	position: relative;
	display: grid;
	align-content: start;
	gap: 5px;
	padding: 26px 8px 8px;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-sm);
	background: var(--c-surface-2);
}

.vz-ab__tag {
	position: absolute;
	top: 6px;
	left: 6px;
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
	border-radius: 4px;
	background: var(--c-surface-3);
	color: var(--c-text-2);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

.vz-wf--img {
	height: 30px;
}

.vz-wf--line {
	width: 86%;
	height: 5px;
}

.vz-wf--short {
	width: 56%;
}

.vz-wf--stars {
	width: 42px;
	height: 6px;
	border-radius: 0;
	background: radial-gradient(circle, var(--c-accent) 2px, transparent 2.5px) 0 50% / 8px 6px repeat-x;
}

/* Variante A hat keine Bewertungen, hält aber dieselbe Höhe wie B */
.vz-wf--stars.is-empty {
	visibility: hidden;
}

.vz-wf--btn {
	width: 58%;
	height: 12px;
	margin-top: 2px;
	border-radius: var(--r-pill);
	background: color-mix(in srgb, var(--c-text) 22%, transparent);
}

.vz-ab__col.is-win .vz-wf--btn {
	width: 82%;
	background: var(--c-accent);
}

.vz-ab__col.is-win .vz-ab__frame {
	border-color: var(--c-accent-line);
	box-shadow: 0 0 22px -8px var(--c-accent);
	animation: ws-viz-win 500ms var(--ease-out) 2300ms backwards;
}

.vz-ab__win {
	position: absolute;
	top: 6px;
	right: 6px;
	padding: 2px 6px;
	border-radius: var(--r-pill);
	background: var(--c-accent);
	color: var(--c-accent-ink);
	font-size: 9.5px;
	font-weight: 700;
	line-height: 1.3;
	animation: ws-stats-pop 360ms var(--ease-out) 2300ms backwards;
}

.vz-ab__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-2);
	font-size: var(--fs-xs);
}

.vz-ab__name {
	color: var(--c-text-2);
}

.vz-ab__rate {
	color: var(--c-text);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.vz-ab__col.is-win .vz-ab__rate {
	color: var(--c-accent);
}

.vz-ab__bar {
	display: block;
	height: 4px;
	overflow: hidden;
	border-radius: 2px;
	background: var(--c-surface-3);
}

.vz-ab__bar i {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: color-mix(in srgb, var(--c-text) 40%, transparent);
	transform: scaleX(var(--w));
	transform-origin: left;
	animation: ws-viz-grow 1600ms var(--ease-viz) 800ms backwards;
}

.vz-ab__col.is-win .vz-ab__bar i {
	background: var(--c-accent);
}

/* Kauf-Trichter ----------------------------------------------------------- */

.vz-funnel {
	display: grid;
	gap: var(--s-2);
}

.vz-funnel__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 4px var(--s-2);
	animation: ws-viz-in 400ms var(--ease-out) calc(800ms + var(--i) * 90ms) backwards;
}

.vz-funnel__label {
	overflow: hidden;
	color: var(--c-text-2);
	font-size: var(--fs-xs);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.vz-funnel__val {
	color: var(--c-text);
	font-size: var(--fs-xs);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.vz-funnel__track {
	grid-column: 1 / -1;
	display: grid;
	gap: 2px;
}

.vz-funnel__track i {
	display: block;
	height: 4px;
	border-radius: 2px;
	transform-origin: left;
}

.vz-funnel__before {
	background: color-mix(in srgb, var(--c-text) 24%, transparent);
	transform: scaleX(var(--b));
}

.vz-funnel__after {
	background: var(--c-accent);
	box-shadow: 0 0 10px -2px var(--c-accent-glow);
	transform: scaleX(var(--a));
	animation: ws-viz-grow 1600ms var(--ease-viz) calc(800ms + var(--i) * 60ms) backwards;
}

/* Theme-Editor ------------------------------------------------------------ */

.vz-editor {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: var(--s-3);
}

.vz-editor__list {
	display: grid;
	align-content: start;
	gap: 4px;
}

.vz-editor__item {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	padding: 5px 6px;
	border: 1px solid var(--c-line);
	border-radius: 6px;
	background: var(--c-surface-2);
	color: var(--c-text-2);
	font-size: 10.5px;
	line-height: 1.2;
	white-space: nowrap;
	animation: ws-viz-in 400ms var(--ease-out) calc(800ms + var(--i) * 90ms) backwards;
}

.vz-editor__grip {
	width: 6px;
	height: 9px;
	flex: none;
	background: radial-gradient(circle, var(--c-text-3) 1px, transparent 1.4px) 0 0 / 3px 3px;
}

.vz-editor__name {
	overflow: hidden;
	text-overflow: ellipsis;
}

.vz-editor__item.is-new {
	border-color: var(--c-accent-line);
	background: var(--c-accent-soft);
	color: var(--c-text);
	animation:
		ws-viz-in 400ms var(--ease-out) calc(800ms + var(--i) * 90ms) backwards,
		ws-viz-new 500ms var(--ease-out) 1700ms backwards;
}

.vz-editor__badge {
	flex: none;
	margin-left: auto;
	padding: 1px 5px;
	border-radius: var(--r-pill);
	background: var(--c-accent);
	color: var(--c-accent-ink);
	font-size: 9px;
	font-weight: 700;
	animation: ws-stats-pop 360ms var(--ease-out) 1900ms backwards;
}

.vz-editor__preview {
	display: grid;
	align-content: start;
	gap: 4px;
	padding: 6px;
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
	background: var(--c-bg);
}

.vz-pv {
	display: block;
	height: var(--h, 18px);
	border-radius: 3px;
	background: var(--c-surface-3);
	animation: ws-viz-in 400ms var(--ease-out) calc(900ms + var(--i) * 90ms) backwards;
}

.vz-pv.is-new {
	outline: 1px dashed var(--c-accent);
	outline-offset: 1px;
	background:
		radial-gradient(circle, var(--c-accent) 2.5px, transparent 3px) 0 50% / 33.33% 100% repeat-x,
		var(--c-accent-soft);
	animation: ws-viz-slot 600ms var(--ease-out) 1700ms backwards;
}

/* Code-Editor ------------------------------------------------------------- */

.vz-code {
	overflow: hidden;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-sm);
	background: var(--c-bg);
}

.vz-code__bar {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: 6px 9px;
	border-bottom: 1px solid var(--c-line);
}

.vz-code__dots {
	width: 26px;
	height: 6px;
	flex: none;
	background: radial-gradient(circle, var(--c-surface-3) 3px, transparent 3.5px) 0 50% / 10px 6px repeat-x;
}

.vz-code__file {
	overflow: hidden;
	color: var(--c-text-3);
	font-size: 10px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.vz-code__body {
	margin: 0;
	padding: 8px 10px 10px;
	overflow: hidden;
	color: color-mix(in srgb, var(--c-text) 62%, transparent);
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 10.5px;
	line-height: 1.65;
	white-space: pre;
	/* Lange Zeilen laufen wie im Editor rechts weich aus */
	mask-image: linear-gradient(90deg, black 86%, transparent);
}

@container (max-width: 15.5rem) {
	.vz-code__body {
		font-size: 9.5px;
	}
}

.vz-code__line {
	display: block;
	overflow: hidden;
	animation: ws-viz-type 420ms steps(16, end) calc(800ms + var(--i) * 210ms) backwards;
}

.vz-code .tk-tag {
	color: var(--c-text);
}

.vz-code .tk-str {
	color: color-mix(in srgb, var(--c-accent) 50%, var(--c-text));
}

.vz-code .tk-liquid,
.vz-code .tk-key {
	color: var(--c-accent);
}

.vz-code__caret {
	display: inline-block;
	width: 6px;
	height: 1.15em;
	margin-left: 3px;
	vertical-align: -0.22em;
	background: var(--c-accent);
	animation: ws-viz-blink 1s steps(2, start) 2400ms infinite;
}

/* Automatisierung --------------------------------------------------------- */

.vz-flow {
	display: grid;
}

.vz-flow__node {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: 5px 10px 5px 5px;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-sm);
	background: var(--c-surface-2);
	animation: ws-viz-in 400ms var(--ease-out) calc(800ms + var(--i) * 300ms) backwards;
}

.vz-flow__node.is-last {
	border-color: var(--c-accent-line);
	box-shadow: 0 0 20px -8px var(--c-accent);
}

.vz-flow__icon {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	flex: none;
	border-radius: 6px;
	background: var(--c-accent-soft);
	color: var(--c-accent);
}

.vz-flow__icon .icon {
	--icon-size: 12px;
}

.vz-flow__text {
	display: grid;
	min-width: 0;
	color: var(--c-text);
	font-size: 11px;
	line-height: 1.25;
}

.vz-flow__kind {
	color: var(--c-text-3);
	font-size: 9.5px;
}

.vz-flow__link {
	display: block;
	width: 1px;
	height: 10px;
	margin-left: 15.5px;
	background: var(--c-accent-line);
	transform-origin: top;
	animation: ws-viz-drop 260ms var(--ease-out) calc(640ms + var(--i) * 300ms) backwards;
}

/* Checkliste -------------------------------------------------------------- */

.vz-check {
	display: grid;
	gap: 7px;
}

.vz-check__item {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	min-width: 0;
	color: var(--c-text);
	font-size: 11.5px;
	line-height: 1.3;
	animation: ws-viz-in 400ms var(--ease-out) calc(800ms + var(--i) * 80ms) backwards;
}

.vz-check__box {
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
	flex: none;
	border: 1px solid var(--c-accent);
	border-radius: 5px;
	background: var(--c-accent);
	color: var(--c-accent-ink);
	animation: ws-viz-tick 300ms var(--ease-out) calc(1100ms + var(--i) * 260ms) backwards;
}

.vz-check__box .icon {
	--icon-size: 11px;
	animation: ws-stats-pop 300ms var(--ease-out) calc(1100ms + var(--i) * 260ms) backwards;
}

.vz-check__item.is-running .vz-check__box {
	border-color: var(--c-accent-line);
	background: transparent;
	animation: none;
}

.vz-check__item.is-running .vz-check__box::after {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--c-accent);
	animation: ws-viz-pulse 1.6s ease-in-out 2200ms infinite;
}

.vz-check__text {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.vz-check__tag {
	flex: none;
	margin-left: auto;
	padding: 1px 6px;
	border-radius: var(--r-pill);
	background: var(--c-accent-soft);
	color: var(--c-accent);
	font-size: 9.5px;
	font-weight: 600;
}

.vz-check__progress {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	margin-top: 3px;
}

.vz-check__track {
	flex: 1;
	height: 4px;
	overflow: hidden;
	border-radius: 2px;
	background: var(--c-surface-3);
}

.vz-check__track i {
	display: block;
	height: 100%;
	background: var(--c-accent);
	transform: scaleX(var(--w));
	transform-origin: left;
	animation: ws-viz-grow 1600ms var(--ease-viz) 1000ms backwards;
}

.vz-check__count {
	color: var(--c-text-2);
	font-size: 10.5px;
	font-variant-numeric: tabular-nums;
}

/* Vorher-nachher-Schieber ------------------------------------------------- */

.vz-cmp {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-sm);
	background: var(--c-bg);
}

.vz-cmp__layer {
	position: absolute;
	inset: 0;
	display: grid;
	align-content: start;
	gap: 5px;
	padding: 26px 10px 10px;
}

.vz-cmp__layer--before {
	background: var(--c-surface-2);
}

/* Neue Seite zentriert: Bild, Überschrift und Button bleiben rechts vom Schieber sichtbar */
.vz-cmp__layer--after {
	justify-items: center;
	background: var(--c-surface);
	clip-path: inset(0 0 0 38%);
	animation: ws-viz-reveal 1600ms var(--ease-viz) 800ms backwards;
}

.vz-cmp__label {
	position: absolute;
	top: 6px;
	padding: 1px 6px;
	border-radius: var(--r-pill);
	font-size: 9.5px;
	font-weight: 600;
	line-height: 1.4;
}

.vz-cmp__layer--before .vz-cmp__label {
	left: 6px;
	background: var(--c-surface-3);
	color: var(--c-text-2);
}

.vz-cmp__layer--after .vz-cmp__label {
	right: 6px;
	background: var(--c-accent);
	color: var(--c-accent-ink);
}

/* Alte Seite: eng, klein, unruhig */
.vz-old__nav {
	height: 6px;
}

.vz-old__row {
	display: grid;
	grid-template-columns: 34% 1fr;
	gap: 5px;
}

.vz-old__img {
	height: 34px;
}

.vz-old__lines {
	display: grid;
	gap: 4px;
}

.vz-old__lines .vz-wf {
	height: 4px;
}

.vz-old__lines .vz-wf:nth-child(even) {
	width: 70%;
}

.vz-old__btn {
	width: 26%;
	height: 8px;
	background: color-mix(in srgb, var(--c-text) 22%, transparent);
}

.vz-old__band {
	height: 14px;
}

/* Neue Seite: großes Bild, klare Überschrift, deutlicher Button */
.vz-new__img {
	justify-self: stretch;
	height: 46px;
	background: linear-gradient(120deg, var(--c-surface-3) 25%, color-mix(in srgb, var(--c-accent) 32%, var(--c-surface-3)));
}

.vz-new__h {
	width: 64%;
	height: 7px;
	background: color-mix(in srgb, var(--c-text) 45%, transparent);
}

.vz-new__h--short {
	width: 40%;
}

.vz-new__cta {
	width: 30%;
	height: 12px;
	margin-top: 2px;
	border-radius: var(--r-pill);
	background: var(--c-accent);
}

.vz-cmp__track {
	position: absolute;
	inset: 0;
	pointer-events: none;
	transform: translateX(38%);
	animation: ws-viz-slide 1600ms var(--ease-viz) 800ms backwards;
}

.vz-cmp__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -1px;
	width: 2px;
	background: var(--c-accent);
	box-shadow: 0 0 12px var(--c-accent);
}

.vz-cmp__handle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border-radius: 50%;
	background: var(--c-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 22%, transparent);
}

/* Beratungs-Chat ---------------------------------------------------------- */

.vz-chat {
	display: grid;
	gap: 6px;
}

.vz-chat__slot {
	position: relative;
	display: grid;
	justify-items: start;
}

.vz-chat__slot--out {
	justify-items: end;
}

.vz-chat__msg {
	max-width: 86%;
	padding: 6px 9px;
	border: 1px solid var(--c-line);
	border-radius: 10px 10px 10px 3px;
	background: var(--c-surface-3);
	color: var(--c-text);
	font-size: 11px;
	line-height: 1.35;
	animation: ws-viz-in 350ms var(--ease-out) calc(800ms + var(--i) * 700ms) backwards;
}

.vz-chat__slot--out .vz-chat__msg {
	border-color: var(--c-accent-line);
	border-radius: 10px 10px 3px 10px;
	background: var(--c-accent-soft);
}

.vz-chat__who {
	display: block;
	margin-bottom: 1px;
	color: var(--c-text-3);
	font-size: 9.5px;
	font-weight: 600;
}

.vz-chat__slot--out .vz-chat__who {
	color: var(--c-accent);
}

/* „Tippt …“ steht kurz an der Stelle der Antwort */
.vz-chat__typing {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	gap: 3px;
	padding: 8px 10px;
	border-radius: 10px;
	background: var(--c-surface-3);
	opacity: 0;
	animation: ws-viz-typing 650ms linear calc(150ms + var(--i) * 700ms) both;
}

.vz-chat__typing i {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--c-text-2);
	animation: ws-viz-dot 600ms ease-in-out 6;
}

.vz-chat__typing i:nth-child(2) {
	animation-delay: 150ms;
}

.vz-chat__typing i:nth-child(3) {
	animation-delay: 300ms;
}

/* Bewertungsringe --------------------------------------------------------- */

.vz-score {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s-2);
}

.vz-score__item {
	display: grid;
	justify-items: center;
	gap: 6px;
	text-align: center;
	animation: ws-viz-in 400ms var(--ease-out) calc(800ms + var(--i) * 90ms) backwards;
}

.vz-score__ring {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	max-width: 3.25rem;
	aspect-ratio: 1;
}

.vz-score__ring svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.vz-score__track {
	fill: none;
	stroke: var(--c-surface-3);
	stroke-width: 3.5;
}

.vz-score__arc {
	fill: none;
	stroke: var(--c-accent);
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-dasharray: var(--v) 100;
	animation: ws-viz-arc 1600ms var(--ease-viz) 800ms backwards;
}

.vz-score__num {
	position: relative;
	color: var(--c-text);
	font-family: var(--ff-display);
	font-size: 0.95rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.vz-score__label {
	color: var(--c-text-2);
	font-size: 10px;
	line-height: 1.2;
}

/* Smartphone mit App-Design --------------------------------------------------
   Ab 700 ms erscheint das Smartphone mit grauem Entwurf, ab 1000 ms fährt der Pinsel
   von oben nach unten und malt die fertige Oberfläche (1200 ms), danach leuchtet der Button,
   ab 2200 ms erscheinen die Technik-Hinweise. Die Ringe laufen wie bei den Bewertungsringen. */

.vz-app {
	display: grid;
	grid-template-columns: 6.25rem minmax(0, 1fr);
	grid-template-areas:
		"phone notes"
		"phone rings";
	align-items: center;
	gap: var(--s-3) var(--s-4);
}

.vz-app__phone {
	grid-area: phone;
	position: relative;
	aspect-ratio: 9 / 17.5;
	padding: 0.28rem;
	border: 1px solid var(--c-line-hover);
	border-radius: 1.05rem;
	background: var(--c-bg);
	box-shadow:
		inset 0 1px 0 var(--c-highlight),
		0 1rem 2rem -1rem var(--c-shadow);
	animation: ws-viz-in 500ms var(--ease-out) 700ms backwards;
}

.vz-app__notch {
	position: absolute;
	top: 0.5rem;
	left: 50%;
	z-index: 2;
	width: 1.5rem;
	height: 0.28rem;
	border-radius: var(--r-pill);
	background: var(--c-surface-3);
	translate: -50% 0;
}

.vz-app__screen {
	position: relative;
	height: 100%;
	overflow: hidden;
	border-radius: 0.8rem;
	background: var(--c-surface);
}

.vz-app__layer {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 0.95rem 0.42rem 0.42rem;
}

.vz-app__bar > span,
.vz-app__hero > span,
.vz-app__row > span,
.vz-app__tabs > span,
.vz-app__btn {
	display: block;
}

.vz-app__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 0.5rem;
}

.vz-app__bar span:first-child {
	width: 45%;
	height: 0.3rem;
	border-radius: var(--r-pill);
}

.vz-app__bar span:last-child {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
}

.vz-app__hero {
	display: grid;
	align-content: end;
	gap: 0.2rem;
	height: 2.5rem;
	padding: 0.32rem;
	border-radius: 0.42rem;
}

.vz-app__hero span {
	height: 0.2rem;
	border-radius: var(--r-pill);
}

.vz-app__hero span:first-child {
	width: 70%;
}

.vz-app__hero span:last-child {
	width: 45%;
}

.vz-app__row {
	display: flex;
	align-items: center;
	gap: 0.28rem;
	height: 1rem;
	padding-inline: 0.24rem;
	border-radius: 0.32rem;
}

.vz-app__row .vz-app__dot {
	flex: none;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
}

.vz-app__row span:last-child {
	flex: 1;
	height: 0.2rem;
	border-radius: var(--r-pill);
}

.vz-app__btn {
	height: 0.8rem;
	margin-top: auto;
	border-radius: var(--r-pill);
}

.vz-app__tabs {
	display: flex;
	justify-content: space-around;
	padding-top: 0.28rem;
}

.vz-app__tabs span {
	width: 0.3rem;
	height: 0.3rem;
	border-radius: 50%;
}

/* Entwurf: gestrichelte Umrisse, graue Platzhalter */
.vz-app__layer--wire .vz-app__hero,
.vz-app__layer--wire .vz-app__row,
.vz-app__layer--wire .vz-app__btn {
	border: 1px dashed var(--c-line-hover);
}

.vz-app__layer--wire .vz-app__bar span,
.vz-app__layer--wire .vz-app__hero span,
.vz-app__layer--wire .vz-app__row span,
.vz-app__layer--wire .vz-app__tabs span {
	background: var(--c-line-strong);
}

/* Fertige Oberfläche: wird vom Pinsel von oben nach unten aufgemalt */
.vz-app__layer--ui {
	background: var(--c-surface);
	clip-path: inset(0);
	animation: ws-app-paint 1200ms var(--ease-viz) 1000ms backwards;
}

.vz-app__layer--ui .vz-app__bar span:first-child {
	background: var(--c-text-2);
}

.vz-app__layer--ui .vz-app__bar span:last-child {
	background: var(--c-accent-soft);
	box-shadow: inset 0 0 0 1px var(--c-accent-line);
}

.vz-app__layer--ui .vz-app__hero {
	background: linear-gradient(135deg, var(--c-accent), color-mix(in srgb, var(--c-accent) 45%, var(--c-surface)));
}

.vz-app__layer--ui .vz-app__hero span {
	background: rgb(11 13 12 / 0.55);
}

.vz-app__layer--ui .vz-app__row {
	background: var(--c-surface-2);
}

.vz-app__layer--ui .vz-app__row .vz-app__dot {
	background: var(--c-accent);
}

.vz-app__layer--ui .vz-app__row span:last-child {
	background: var(--c-text-3);
	opacity: 0.6;
}

.vz-app__layer--ui .vz-app__btn {
	background: var(--c-accent);
	box-shadow: 0 0 0.7rem var(--c-accent-glow);
	animation: ws-tv-ring 900ms var(--ease-out) 2300ms 2 backwards;
}

.vz-app__layer--ui .vz-app__tabs span {
	background: var(--c-text-3);
}

.vz-app__layer--ui .vz-app__tabs span:first-child {
	background: var(--c-accent);
}

/* Pinsel: fährt mit der Malkante nach unten und bleibt dort liegen */
.vz-app__brush {
	position: absolute;
	right: -0.65rem;
	bottom: 1.1rem;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 1.65rem;
	height: 1.65rem;
	border-radius: 50%;
	background: var(--c-accent);
	color: var(--c-accent-ink);
	box-shadow: 0 0 0 0.25rem var(--c-accent-glow);
	animation: ws-app-brush 1200ms var(--ease-viz) 1000ms backwards;
}

.vz-app__brush .icon {
	--icon-size: 0.9rem;
	stroke-width: 2;
}

/* Technik-Hinweise neben dem Smartphone */
.vz-app__notes {
	grid-area: notes;
	align-self: end;
	display: grid;
	justify-items: start;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vz-app__note {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	max-width: 100%;
	padding: 0.28rem 0.6rem 0.28rem 0.32rem;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-pill);
	background: var(--c-surface-2);
	color: var(--c-text-2);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
	animation: ws-viz-in 400ms var(--ease-out) calc(2200ms + var(--i) * 120ms) backwards;
}

.vz-app__note .icon {
	--icon-size: 1.1rem;
	flex: none;
	padding: 0.18rem;
	border-radius: 50%;
	background: var(--c-accent-soft);
	color: var(--c-accent);
}

.vz-app__note span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vz-app .vz-score {
	grid-area: rings;
	align-self: start;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@keyframes ws-app-paint {
	from {
		clip-path: inset(0 0 100% 0);
	}
}

@keyframes ws-app-brush {
	0% {
		translate: 0 -9.2rem;
		rotate: -16deg;
	}
	35% {
		rotate: 8deg;
	}
	70% {
		rotate: -8deg;
	}
	100% {
		translate: 0 0;
		rotate: 0deg;
	}
}

/* Zweite Kennzahl: schwebt langsam ------------------------------------------ */

.hero-chip {
	position: absolute;
	top: var(--s-4);
	right: var(--s-4);
	z-index: 1;
	pointer-events: none;
	animation: ws-rise 700ms var(--ease-out) 750ms both;
}

.hero-chip__float {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-2) var(--s-5) var(--s-2) var(--s-2);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-pill);
	background: var(--c-bg-raised);
	box-shadow: var(--shadow-pop);
	animation: ws-stats-float 6s ease-in-out 1500ms infinite alternate;
}

.hero-chip__icon {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	flex: none;
	border-radius: 50%;
	background: var(--c-accent-soft);
	color: var(--c-accent);
}

.hero-chip__icon .icon {
	--icon-size: 1.1rem;
}

.hero-chip__text {
	display: grid;
	line-height: 1.2;
}

.hero-chip__value {
	color: var(--c-text);
	font-family: var(--ff-display);
	font-size: var(--fs-h5);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.hero-chip__label {
	color: var(--c-text-2);
	font-size: var(--fs-xs);
}

/* Desktop: Karte ragt unten links über das Bild hinaus, Kennzahl oben rechts */
@media (min-width: 64em) {
	.hero-stats {
		position: absolute;
		inset: 0;
		display: block;
		margin: 0;
		padding: 0;
	}

	.stats-card {
		position: absolute;
		left: calc(var(--s-6) * -1);
		bottom: calc(var(--s-10) * -1);
		width: min(19.5rem, 72%);
	}

	.stats-card__core {
		padding: var(--s-4) var(--s-4) var(--s-3);
	}

	.hero-chip {
		top: var(--s-8);
		right: calc(var(--s-5) * -1);
	}
}

/* Grafik allein (kein Bild hinterlegt) ---------------------------------------
   Karte etwas größer, zweite Kennzahl sitzt wie ein Reiter auf der Oberkante,
   dahinter ein feines Punktraster, das zum Rand hin ausläuft. */

.hero-visual--solo {
	padding-top: 2.75rem;
}

.hero-visual--solo::before {
	content: "";
	position: absolute;
	inset: -6% -10% -14%;
	background: radial-gradient(circle, color-mix(in srgb, var(--c-text) 14%, transparent) 1px, transparent 1.6px) 0 0 / 18px 18px;
	mask-image: radial-gradient(closest-side, black 25%, transparent);
	pointer-events: none;
}

.hero-visual--solo .hero-stats {
	margin-top: 0;
	padding-inline: 0;
}

.hero-visual--solo .stats-card {
	width: min(100%, 24rem);
}

.hero-visual--solo .hero-chip {
	top: 0;
	right: var(--s-5);
}

/* Größer dargestellt: proportional skaliert (Schrift, Diagramm, Reiter wachsen mit),
   auf dem Tablet ist die Spalte breit genug für mehr */
@media (min-width: 40em) and (max-width: 63.99em) {
	.hero-visual--solo {
		zoom: 1.2;
	}
}

@media (min-width: 64em) {
	/* Nutzt die ganze Spalte und einen Teil des Abstands zur Textspalte */
	.hero-visual--solo {
		zoom: 1.15;
		margin-left: -1.25rem;
	}

	.hero-visual--solo .hero-stats {
		position: static;
		display: grid;
		justify-items: end;
	}

	.hero-visual--solo .stats-card {
		position: relative;
		left: auto;
		bottom: auto;
		width: 100%;
	}

	.hero-visual--solo .stats-card__core {
		padding: var(--s-5) var(--s-5) var(--s-4);
	}

	.hero-visual--solo .hero-chip {
		top: 0;
		right: var(--s-6);
	}
}

/* Szene in der Kachel „Betreuung & Coaching“ (Startseite) --------------------
   Startet, sobald sie sichtbar ist (main.js setzt .is-playing).
   Alle Maße in em, die Schriftgröße wächst mit der Kachelbreite (cqi). */

.home-teaser__media {
	container-type: inline-size;
}

.tv {
	--ease-viz: cubic-bezier(0.65, 0, 0.35, 1);
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	align-items: center;
	gap: 1.4em;
	aspect-ratio: 16 / 9;
	padding: 1.6em 1.8em 3.2em;
	overflow: hidden;
	border-bottom: 1px solid var(--c-line);
	background:
		radial-gradient(55% 70% at 25% 35%, var(--c-accent-glow), transparent 70%),
		radial-gradient(circle, color-mix(in srgb, var(--c-text) 9%, transparent) 1px, transparent 1.5px) 0 0 / 18px 18px,
		var(--c-bg-raised);
	font-size: clamp(7px, 1.8cqi, 12.5px);
}

/* Lichtkante am Ende */
.tv::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	background: linear-gradient(100deg, transparent 35%, rgb(255 255 255 / 0.06) 50%, transparent 65%);
	opacity: 0;
	pointer-events: none;
	animation: ws-stats-sheen 1400ms var(--ease-in-out) 2500ms both;
}

.tv__panel {
	position: relative;
	z-index: 1;
	border: 1px solid var(--c-line-strong);
	border-radius: 1.2em;
	background: var(--c-surface);
	box-shadow: var(--shadow-pop);
	animation: ws-viz-in 600ms var(--ease-out) backwards;
}

/* Analytics */
.tv-analytics {
	display: grid;
	gap: 0.8em;
	padding: 1.3em 1.4em 1em;
}

.tv-analytics__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
}

.tv-analytics__title {
	color: var(--c-text);
	font-size: 1.3em;
	font-weight: 600;
}

.tv-analytics__trend {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.3em 0.75em;
	border-radius: var(--r-pill);
	background: var(--c-accent-soft);
	color: var(--c-accent);
	font-weight: 600;
}

.tv-analytics__trend .icon {
	--icon-size: 1.15em;
}

/* Kurve in der Szene etwas früher als im Hero */
.tv .stats-card__before {
	animation-delay: 300ms;
}

.tv .stats-card__reveal {
	animation-delay: 400ms;
}

.tv .stats-card__point {
	animation-delay: 1900ms;
}

.tv .stats-card__ping {
	animation-delay: 2200ms;
}

/* Editor mit Produktseite */
.tv-editor {
	overflow: hidden;
	animation-delay: 150ms;
}

.tv-editor__bar {
	display: flex;
	align-items: center;
	gap: 0.8em;
	padding: 0.75em 1em;
	border-bottom: 1px solid var(--c-line);
}

.tv-editor__dots {
	width: 3em;
	height: 0.7em;
	flex: none;
	background: radial-gradient(circle, var(--c-surface-3) 0.3em, transparent 0.36em) 0 50% / 1.05em 0.7em repeat-x;
}

.tv-editor__name {
	color: var(--c-text-3);
	font-size: 0.95em;
}

.tv-editor__page {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0.9em 0.8em;
	padding: 1em;
}

.tv-pp__img {
	aspect-ratio: 1;
	border-radius: 0.5em;
	background: linear-gradient(140deg, var(--c-surface-3), color-mix(in srgb, var(--c-accent) 16%, var(--c-surface-3)));
	animation: ws-viz-in 500ms var(--ease-out) 500ms backwards;
}

.tv-pp__info {
	display: grid;
	align-content: start;
	gap: 0.55em;
	animation: ws-viz-in 500ms var(--ease-out) 620ms backwards;
}

.tv-pp__line {
	height: 0.7em;
	border-radius: 0.25em;
	background: color-mix(in srgb, var(--c-text) 32%, transparent);
}

.tv-pp__line--short {
	width: 65%;
	background: var(--c-surface-3);
}

.tv-pp__price {
	width: 40%;
	height: 0.9em;
	margin-top: 0.3em;
	border-radius: 0.25em;
	background: color-mix(in srgb, var(--c-text) 55%, transparent);
}

/* Kaufen-Button: leuchtet nach der Änderung zweimal auf */
.tv-pp__btn {
	height: 1.9em;
	margin-top: 0.5em;
	border-radius: var(--r-pill);
	background: var(--c-accent);
	animation: ws-tv-ring 900ms var(--ease-out) 2000ms 2;
}

/* Neue Section gleitet in die Seite */
.tv-pp__new {
	position: relative;
	grid-column: 1 / -1;
	height: 3.2em;
	border-radius: 0.5em;
	outline: 1px dashed var(--c-accent);
	outline-offset: 2px;
	background:
		radial-gradient(circle, var(--c-accent) 0.3em, transparent 0.36em) 0 50% / 33.33% 100% repeat-x,
		var(--c-accent-soft);
	animation: ws-viz-slot 600ms var(--ease-out) 1300ms backwards;
}

.tv-pp__badge {
	position: absolute;
	top: -0.85em;
	right: 0.6em;
	padding: 0.15em 0.55em;
	border-radius: var(--r-pill);
	background: var(--c-accent);
	color: var(--c-accent-ink);
	font-size: 0.85em;
	font-weight: 700;
	animation: ws-stats-pop 360ms var(--ease-out) 1700ms backwards;
}

/* „Änderung live“: verbindet beide Fenster */
.tv-chip {
	position: absolute;
	bottom: 1em;
	left: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.45em 1.1em 0.45em 0.45em;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-pill);
	background: var(--c-bg-raised);
	box-shadow: var(--shadow-pop);
	color: var(--c-text);
	font-size: 1.05em;
	font-weight: 600;
	white-space: nowrap;
	translate: -50% 0;
	animation: ws-rise 600ms var(--ease-out) 2100ms backwards;
}

.tv-chip__icon {
	display: grid;
	place-items: center;
	width: 1.8em;
	height: 1.8em;
	border-radius: 50%;
	background: var(--c-accent);
	color: var(--c-accent-ink);
}

.tv-chip__icon .icon {
	--icon-size: 1em;
}

/* Schmale Kacheln (Handy): nur das Analytics-Fenster, ohne festes Seitenverhältnis */
@container (max-width: 30rem) {
	.tv {
		grid-template-columns: minmax(0, 1fr);
		aspect-ratio: auto;
		padding: 1.6em 1.6em 4.2em;
		font-size: clamp(8px, 2.7cqi, 11px);
	}

	.tv-editor {
		display: none;
	}
}

/* Wartet, bis Kachel bzw. Hero-Grafik sichtbar ist (nur mit JS; ohne JS läuft alles direkt) */
.js .tv:not(.is-playing),
.js .tv:not(.is-playing) *,
.js .tv:not(.is-playing)::after,
.js .hero-stats:not(.is-playing) *,
.js .hero-stats:not(.is-playing) *::before,
.js .hero-stats:not(.is-playing) *::after {
	animation-play-state: paused !important;
}

@keyframes ws-tv-ring {
	0% {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-accent) 55%, transparent);
	}
	100% {
		box-shadow: 0 0 0 0.8em transparent;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tv *,
	.tv::after {
		animation: none !important;
	}
}

/* Animationen --------------------------------------------------------------- */

@keyframes ws-stats-clock {
	from {
		opacity: 0;
	}
	to {
		opacity: 0;
	}
}

@keyframes ws-stats-wipe {
	from {
		clip-path: inset(0 100% 0 0);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}

@keyframes ws-stats-pop {
	from {
		opacity: 0;
		transform: scale(0.4);
	}
}

@keyframes ws-stats-ping {
	0% {
		opacity: 0.5;
		transform: scale(1);
	}
	70%,
	100% {
		opacity: 0;
		transform: scale(3.2);
	}
}

@keyframes ws-stats-sheen {
	0% {
		opacity: 0;
		transform: translateX(-100%);
	}
	20%,
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateX(100%);
	}
}

@keyframes ws-stats-float {
	to {
		transform: translateY(-6px);
	}
}

@keyframes ws-viz-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
}

@keyframes ws-viz-grow {
	from {
		transform: scaleX(0);
	}
}

@keyframes ws-viz-win {
	from {
		border-color: var(--c-line-strong);
		box-shadow: none;
	}
}

@keyframes ws-viz-new {
	from {
		border-color: var(--c-line);
		background-color: var(--c-surface-2);
	}
}

@keyframes ws-viz-slot {
	from {
		opacity: 0;
		transform: translateX(-10px) scale(0.96);
	}
}

@keyframes ws-viz-type {
	from {
		clip-path: inset(0 100% 0 0);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}

@keyframes ws-viz-blink {
	to {
		visibility: hidden;
	}
}

@keyframes ws-viz-drop {
	from {
		transform: scaleY(0);
	}
}

@keyframes ws-viz-tick {
	from {
		border-color: var(--c-line-hover);
		background-color: transparent;
	}
}

@keyframes ws-viz-pulse {
	50% {
		opacity: 0.35;
		transform: scale(0.7);
	}
}

@keyframes ws-viz-reveal {
	from {
		clip-path: inset(0 0 0 100%);
	}
}

@keyframes ws-viz-slide {
	from {
		transform: translateX(100%);
	}
}

@keyframes ws-viz-typing {
	0% {
		opacity: 0;
	}
	15%,
	85% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes ws-viz-dot {
	50% {
		opacity: 0.35;
		transform: translateY(-2px);
	}
}

@keyframes ws-viz-arc {
	from {
		stroke-dasharray: 0 100;
	}
}

@media (prefers-reduced-motion: reduce) {
	.stats-card,
	.hero-chip {
		animation: ws-fade 300ms ease both;
	}

	.stats-card *,
	.stats-card *::before,
	.stats-card *::after,
	.hero-chip__float {
		animation: none !important;
	}
}