/* ══════════════════════════════════════════════════════════════════════════
   VISARO — Landingpages (Ebene 2)

   Dieselbe Design-DNA wie die Leistungsseiten, aber nicht dieselbe Seite.
   Ablauf, Fragen, Querverweise und Abschluss teilen sie sich mit
   services.css; eigen sind ihnen Kopf, Einsatz, Auswahl, Vergleich und der
   Zusatzblock.

   Der Kopf liegt hier waagrecht statt hochkant — das allein sorgt schon
   dafür, dass sich eine Landingpage beim Scrollen anders anfühlt als die
   Leistungsseite darüber.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ 1 — Kopf ════════════════════════════════════════════════════════════ */

.vis-lphero {
	padding-block: var(--vis-section-m) var(--vis-section-s);
	background: var(--vis-bg);
}

.vis-lphero__inner {
	max-width: var(--vis-container-wide);
	margin-inline: auto;
	padding-inline: var(--vis-gutter);

	display: grid;
	gap: var(--vis-space-10);
}

@media (min-width: 1024px) {
	.vis-lphero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--vis-space-16);
		align-items: center;
	}
}

/* Der Rückweg nach oben. Er steht vor der Überschrift, nicht am Seitenende:
   Wer über eine Suche direkt hier landet, soll sofort sehen, wozu die Seite
   gehört. */
.vis-lphero__parent {
	margin: 0 0 var(--vis-space-5);
}

.vis-lphero__parent-link {
	display: inline-flex;
	align-items: center;
	gap: var(--vis-space-2);

	color: var(--vis-text-3);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	letter-spacing: var(--vis-ls-label);
	text-decoration: none;
	text-transform: uppercase;

	transition:
		color var(--vis-duration-ui) var(--vis-ease-out),
		transform var(--vis-duration-ui) var(--vis-ease-out);
}

.vis-lphero__parent-link .vis-icon {
	inline-size: var(--vis-space-4);
	block-size: var(--vis-space-4);
}

.vis-lphero__parent-link:hover,
.vis-lphero__parent-link:focus-visible {
	color: var(--vis-accent);
	transform: translateX(calc(var(--vis-nudge) * -1));
}

.vis-lphero__headline {
	margin: var(--vis-space-5) 0 0;
	max-inline-size: 18ch;

	font-size: var(--vis-fs-display-l);
	font-weight: var(--vis-fw-bold);
	line-height: var(--vis-lh-display);
	letter-spacing: var(--vis-ls-display);
	text-wrap: balance;
}

.vis-lphero__lead {
	margin: var(--vis-space-6) 0 0;
	max-inline-size: 56ch;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-l);
	line-height: var(--vis-lh-body);
}

.vis-lphero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vis-space-4);
	margin-block-start: var(--vis-space-8);
}

.vis-lphero__actions .vis-btn .vis-icon {
	transition: transform var(--vis-duration-ui) var(--vis-ease-out);
}

.vis-lphero__actions .vis-btn:hover .vis-icon { transform: translateX(var(--vis-nudge)); }

/* Waagrecht statt hochkant — der sichtbarste Unterschied zur
   Leistungsseite. */
.vis-lphero__media {
	margin: 0;
	overflow: hidden;
	aspect-ratio: var(--vis-project-ratio-wide);
	--vis-cut-size: var(--vis-cut-lg);
}

/* ══ 2 — Einsatz ═════════════════════════════════════════════════════════

   Der Einstieg über den Fall, nicht über das Produkt. Eine Liste mit
   60°-Marken statt Kacheln: Es sind Situationen, keine Artikel.         */

.vis-lpuses {
	padding-block: var(--vis-section-l);
	background: var(--vis-bg-subtle);
}

.vis-lpuses__inner,
.vis-lppicks__inner,
.vis-compare__inner,
.vis-lpnote__inner {
	max-width: var(--vis-container-wide);
	margin-inline: auto;
	padding-inline: var(--vis-gutter);
}

.vis-lpuses__head,
.vis-lppicks__head {
	display: grid;
	gap: var(--vis-space-5);
	margin-block-end: var(--vis-space-10);
}

@media (min-width: 1024px) {
	.vis-lpuses__head,
	.vis-lppicks__head {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--vis-space-16);
		align-items: end;
	}
}

.vis-lpuses__headline,
.vis-lppicks__headline,
.vis-lpnote__headline {
	margin: 0;
	max-inline-size: 20ch;

	font-size: var(--vis-fs-h1);
	font-weight: var(--vis-fw-bold);
	line-height: var(--vis-lh-heading);
	letter-spacing: var(--vis-ls-display);
	text-wrap: balance;
}

.vis-lpuses__intro,
.vis-lppicks__intro {
	margin: 0;
	max-inline-size: 56ch;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-l);
}

.vis-lpuses__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vis-lpuse {
	position: relative;
	display: grid;
	gap: var(--vis-space-2);

	padding-block: var(--vis-space-5);
	padding-inline-start: var(--vis-space-6);
	border-block-start: var(--vis-border-width) solid var(--vis-border);
}

.vis-lpuse:last-child {
	border-block-end: var(--vis-border-width) solid var(--vis-border);
}

@media (min-width: 768px) {
	.vis-lpuse {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
		gap: var(--vis-space-8);
		align-items: baseline;
	}
}

.vis-lpuse__mark {
	position: absolute;
	inset-block-start: var(--vis-space-6);
	inset-inline-start: 0;

	inline-size: var(--vis-space-3);
	block-size: calc(var(--vis-space-3) / var(--vis-tan60) * 2);
	background: var(--vis-accent);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.vis-lpuse__label {
	font-size: var(--vis-fs-h4);
	font-weight: var(--vis-fw-bold);
	letter-spacing: var(--vis-ls-heading);
}

.vis-lpuse__text {
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-s);
	line-height: var(--vis-lh-body);
}

/* ══ 3 — Auswahl ═════════════════════════════════════════════════════════ */

.vis-lppicks {
	padding-block: var(--vis-section-l);
	background: var(--vis-bg);
}

.vis-lppicks__grid {
	display: grid;
	gap: var(--vis-space-6);
}

@media (min-width: 768px) {
	.vis-lppicks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.vis-lppicks__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--vis-space-8);
	}
}

.vis-lppick {
	display: grid;
	gap: var(--vis-space-2);
	align-content: start;

	padding-block-start: var(--vis-space-5);
	border-block-start: var(--vis-border-width-strong) solid var(--vis-ink-950);
}

.vis-lppick__title {
	margin: 0;
	font-size: var(--vis-fs-h4);
	font-weight: var(--vis-fw-bold);
	letter-spacing: var(--vis-ls-heading);
}

.vis-lppick__text {
	margin: 0;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-s);
	line-height: var(--vis-lh-body);
}

/* ══ 4 — Vergleich ═══════════════════════════════════════════════════════

   Der Kern dieser Seiten. Zwei Möglichkeiten nebeneinander, jede mit ihrer
   Grenze — eine Gegenüberstellung ohne Nachteile ist keine Beratung,
   sondern Werbung. Deshalb steht die Grenze gleichberechtigt neben der
   Eignung und nicht kleiner darunter.                                    */

.vis-compare {
	padding-block: var(--vis-section-l);
	background: var(--vis-ink-950);
}

.vis-compare__head { margin-block-end: var(--vis-section-s); }

.vis-compare__headline {
	margin: 0;
	max-inline-size: 20ch;

	font-size: var(--vis-fs-display-l);
	font-weight: var(--vis-fw-bold);
	line-height: var(--vis-lh-display);
	letter-spacing: var(--vis-ls-display);
	text-wrap: balance;
}

.vis-compare__text {
	margin: var(--vis-space-6) 0 0;
	max-inline-size: 62ch;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-l);
}

.vis-compare__grid {
	display: grid;
	gap: var(--vis-space-6);
}

@media (min-width: 768px) {
	.vis-compare__grid {
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
		gap: var(--vis-space-8);
	}
}

.vis-compare__item {
	display: grid;
	gap: var(--vis-space-4);
	align-content: start;

	padding: var(--vis-space-8);
	border: var(--vis-border-width) solid var(--vis-border);
}

.vis-compare__title {
	margin: 0;
	font-size: var(--vis-fs-h2);
	font-weight: var(--vis-fw-bold);
	letter-spacing: var(--vis-ls-heading);
}

.vis-compare__body {
	margin: 0;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body);
	line-height: var(--vis-lh-body);
}

.vis-compare__facts {
	display: grid;
	gap: 0;
	margin: 0;
}

.vis-compare__facts > div {
	padding-block: var(--vis-space-4);
	border-block-start: var(--vis-border-width) solid var(--vis-border-subtle);
}

.vis-compare__facts dt {
	margin-block-end: var(--vis-space-1);
	color: var(--vis-text-3);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	letter-spacing: var(--vis-ls-label);
	text-transform: uppercase;
}

.vis-compare__facts dd {
	margin: 0;
	font-size: var(--vis-fs-body-s);
	line-height: var(--vis-lh-snug);
}

/* Die Grenze bekommt die Purple-Marke — sie ist die ehrlichste Angabe auf
   der ganzen Seite und soll nicht übersehen werden. */
.vis-compare__limit dt { color: var(--vis-purple-400); }

/* ══ 5 — Zusatzblock ═════════════════════════════════════════════════════

   Nachbestellung beziehungsweise Pflege. Er beantwortet die Frage, die nach
   der Kaufentscheidung kommt — und die sonst niemand beantwortet.        */

.vis-lpnote {
	padding-block: var(--vis-section-l);
	background: var(--vis-bg-subtle);
}

.vis-lpnote__inner {
	display: grid;
	gap: var(--vis-space-10);
}

@media (min-width: 1024px) {
	.vis-lpnote__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--vis-space-16);
		align-items: start;
	}
}

.vis-lpnote__text {
	margin: var(--vis-space-6) 0 0;
	max-inline-size: 56ch;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-l);
	line-height: var(--vis-lh-body);
}

.vis-lpnote__list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vis-lpnote__list li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--vis-space-3);
	align-items: start;

	padding-block: var(--vis-space-4);
	border-block-start: var(--vis-border-width) solid var(--vis-border);

	font-size: var(--vis-fs-body-s);
	line-height: var(--vis-lh-snug);
}

.vis-lpnote__list li:last-child {
	border-block-end: var(--vis-border-width) solid var(--vis-border);
}

.vis-lpnote__check {
	display: inline-flex;
	color: var(--vis-accent);
}

.vis-lpnote__check .vis-icon {
	inline-size: var(--vis-space-5);
	block-size: var(--vis-space-5);
}

/* ══ 6 — Reduzierte Bewegung ═════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.vis-lphero__parent-link,
	.vis-lphero__actions .vis-btn .vis-icon {
		transition: color var(--vis-duration-ui) var(--vis-ease-out);
	}

	.vis-lphero__parent-link:hover,
	.vis-lphero__parent-link:focus-visible,
	.vis-lphero__actions .vis-btn:hover .vis-icon {
		transform: none;
	}
}