/* ==========================================================================
   VISARO — Seite ohne Inhalt: „entsteht gerade"
   --------------------------------------------------------------------------
   Die Zielseiten der Navigation existieren technisch, bevor ihre Inhalte
   gebaut sind. Ohne diesen Abschnitt stünde dort eine Überschrift über
   einer leeren Fläche — das sieht nach Fehler aus, nicht nach Arbeit.

   Bewusst dunkel und mit demselben Werkstattraster wie Hero und Prinzip:
   Die Seite ist nicht fertig, aber sie ist VISARO.

   Eigene Datei statt in home.css: Der Abschnitt erscheint auf jeder leeren
   Seite, die Startseiten-Abschnitte nur auf der Startseite. Zusammen in
   einer Datei müsste überall das Falsche mitgeladen werden.
   ========================================================================== */

.vis-soon {
	position: relative;
	overflow: hidden;
	isolation: isolate;

	display: grid;
	align-items: center;
	min-block-size: min(72vh, var(--vis-stage-height-soon));

	padding-block: var(--vis-section-l);
	background: var(--vis-ink-950);
	color: var(--vis-white);

	--vis-text: var(--vis-white);
	--vis-text-2: var(--vis-ink-300);
	--vis-text-3: var(--vis-ink-400);
	--vis-border: var(--vis-ink-800);
	--vis-border-strong: var(--vis-ink-700);
	--vis-accent-text: var(--vis-purple-400);
}

.vis-soon__grid {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: none;

	max-width: var(--vis-container-wide);
	margin-inline: auto;
	padding-inline: var(--vis-gutter);
	pointer-events: none;
}

.vis-soon__grid span {
	position: absolute;
	inset-block: 0;
	inline-size: var(--vis-border-width);
	background: linear-gradient(to bottom, transparent, var(--vis-ink-800) 15%, var(--vis-ink-800) 85%, transparent);
}

.vis-soon__grid span:nth-child(1) { inset-inline-start: 0; }
.vis-soon__grid span:nth-child(2) { inset-inline-start: 50%; }
.vis-soon__grid span:nth-child(3) { inset-inline-end: 0; }

@media (min-width: 1024px) {
	.vis-soon__grid { display: block; }
}

.vis-soon__inner {
	position: relative;
	z-index: 1;

	max-width: var(--vis-container-wide);
	inline-size: 100%;
	margin-inline: auto;
	padding-inline: var(--vis-gutter);
}

.vis-soon__title {
	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-soon__text {
	margin: var(--vis-space-6) 0 0;
	max-inline-size: 48ch;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-l);
}

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