/* ══════════════════════════════════════════════════════════════════════════
   VISARO — Über uns, Kontakt, Projekt starten

   Die drei Seiten, auf denen VISARO als Betrieb und als Ansprechpartner
   sichtbar wird. Sie teilen sich mit allen Unterseiten Kopf, Platzhalter
   und Abschluss aus pages.css; hier steht nur, was ihnen eigen ist.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ 1 — Geschichte ══════════════════════════════════════════════════════

   Die Zeitleiste trägt die Aussage, dass die Erfahrung älter ist als die
   Marke. Die Haarlinie über jeder Station ist die Zeitachse — eine
   gezeichnete Linie bräuchte es dafür nicht.                            */

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

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

.vis-history__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;
}

/* Bei 38 px auf dem Telefon passen rund fünfzehn Zeichen in eine Zeile.
   Ein zusammengesetztes Wort wird sonst irgendwo hart umbrochen. */
@media (max-width: 639px) {
	.vis-history__headline { hyphens: auto; }
}

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

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

.vis-history__mark {
	display: grid;
	gap: var(--vis-space-2);

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

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

.vis-history__year {
	color: var(--vis-purple-400);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-h4);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--vis-ls-label);
}

.vis-history__body {
	display: grid;
	gap: var(--vis-space-2);
	margin: 0;
}

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

.vis-history__what {
	max-inline-size: 68ch;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-s);
	line-height: var(--vis-lh-body);
}

/* ══ 2 — Wie wir arbeiten ════════════════════════════════════════════════ */

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

.vis-stance__grid {
	display: grid;
	gap: var(--vis-space-8);
}

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

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

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

.vis-stance__num {
	color: var(--vis-text-3);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--vis-ls-label);
}

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

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

/* ══ 3 — Team ════════════════════════════════════════════════════════════

   Gleiche Kachel für alle. Wer im Backend zuerst steht, wird dadurch nicht
   wichtiger — die Reihenfolge ordnet, sie gewichtet nicht.               */

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

.vis-teamfull__people {
	display: grid;
	gap: var(--vis-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Vier Personen in einer Reihe ab 1100 px, darunter zwei je Reihe. Auf dem
   Handy steht jede Person als Zeile: Porträt links, Angaben rechts — vier
   bildschirmbreite Quadrate untereinander wären vier Bildschirme Scrollen
   für vier Namen (07.10.2026). */
@media (min-width: 600px) {
	.vis-teamfull__people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
	.vis-teamfull__people { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--vis-space-6); }
}

/* Gleiche Zeilen über alle Karten (08.10.2026): Porträt, Name, Rolle, Text
   und Kontakt teilen sich die Spuren des Rasters. Ein zweizeiliger Text
   schiebt so nicht nur den Kontakt seiner eigenen Karte nach unten — alle
   Kontaktzeilen einer Reihe beginnen auf derselben Höhe. */
@media (min-width: 600px) {
	.vis-teamfull__people { row-gap: var(--vis-space-8); }

	@supports (grid-template-rows: subgrid) {
		.vis-person:has(> :nth-child(5)) {
			grid-row: span 5;
			grid-template-rows: subgrid;
			row-gap: var(--vis-space-2);
		}
	}
}

@media (max-width: 599.98px) {
	.vis-teamfull__people { gap: var(--vis-space-6); }
	.vis-person {
		grid-template-columns: 112px minmax(0, 1fr);
		column-gap: var(--vis-space-4);
		row-gap: var(--vis-space-1);
	}
	.vis-person__portrait { grid-row: 1 / span 6; margin: 0; align-self: start; }
	.vis-person > :not(.vis-person__portrait) { grid-column: 2; }
}

.vis-person {
	display: grid;
	gap: var(--vis-space-2);
	align-content: start;
	min-inline-size: 0;
}

.vis-person__portrait {
	margin: 0 0 var(--vis-space-3);
	overflow: hidden;
	aspect-ratio: var(--vis-team-portrait);
}

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

.vis-person__role {
	margin: 0;
	color: var(--vis-accent-text);
	font-size: var(--vis-fs-body-s);
	font-weight: var(--vis-fw-medium);
}

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

.vis-person__contact {
	display: grid;
	gap: var(--vis-space-1);
	margin: var(--vis-space-3) 0 0;

	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-s);
}

.vis-person__contact a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--vis-border-strong, currentColor);
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
	transition: color var(--vis-duration-ui) var(--vis-ease-out);
}

/* Textfarbe, nicht Akzentfläche: purple-500 ist auf hellem Grund nicht
   textsicher (tokens.css). */
.vis-person__contact a:hover,
.vis-person__contact a:focus-visible { color: var(--vis-accent-text); }

.vis-teamfull__group {
	display: block;
	margin: 0;
	overflow: hidden;
	aspect-ratio: var(--vis-team-group-ratio);
	--vis-cut-size: var(--vis-cut-lg);
}

/* ══ 4 — Standort ════════════════════════════════════════════════════════ */

.vis-place {
	padding-block: var(--vis-section-l);
	background: var(--vis-paper);
}

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

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

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

	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-place__text {
	margin: var(--vis-space-6) 0 0;
	max-inline-size: 62ch;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-l);
	line-height: var(--vis-lh-body);
}

.vis-place__address {
	display: flex;
	align-items: flex-start;
	gap: var(--vis-space-3);
	margin: var(--vis-space-8) 0;
	font-style: normal;
}

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

.vis-place__address-line {
	display: block;
	font-size: var(--vis-fs-body-s);
	font-weight: var(--vis-fw-medium);
}

.vis-place__media {
	margin: 0;
	overflow: hidden;
	aspect-ratio: var(--vis-page-media-ratio);
	--vis-cut-size: var(--vis-cut-lg);
}

/* ══ 5 — Warum VISARO ════════════════════════════════════════════════════ */

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

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

.vis-reasons__grid {
	display: grid;
	gap: var(--vis-space-8);
}

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

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

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

.vis-reason__title {
	display: flex;
	align-items: baseline;
	gap: var(--vis-space-3);
	margin: 0;

	font-size: var(--vis-fs-h3);
	font-weight: var(--vis-fw-bold);
	letter-spacing: var(--vis-ls-heading);
}

.vis-reason__text {
	margin: 0;
	max-inline-size: 62ch;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-s);
	line-height: var(--vis-lh-body);
}

/* ══ 6 — Kontaktwege ═════════════════════════════════════════════════════

   Oben die Wege, darunter erst die Daten: Wer hier landet, hat schon
   entschieden, dass er sich meldet — offen ist nur noch, wie.           */

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

.vis-routes__headline { margin-block-end: var(--vis-space-10); }

.vis-routes__list {
	display: grid;
	gap: var(--vis-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.vis-route__link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--vis-space-5);
	align-items: center;

	block-size: 100%;
	padding: var(--vis-space-6);

	border: var(--vis-border-width) solid var(--vis-border);
	color: inherit;
	text-decoration: none;

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

.vis-route__link:hover {
	border-color: var(--vis-accent);
	background: var(--vis-bg-subtle);
}

.vis-route__link:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-accent);
	outline-offset: var(--vis-focus-offset);
}

.vis-route__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	inline-size: var(--vis-space-12);
	block-size: var(--vis-space-12);
	border-radius: var(--vis-radius-sm);

	background: var(--vis-bg-subtle);
	color: var(--vis-accent);

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

.vis-route__link:hover .vis-route__icon { background: var(--vis-white); }

.vis-route__body {
	display: grid;
	gap: var(--vis-space-1);
	min-inline-size: 0;
}

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

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

.vis-route__value {
	color: var(--vis-text-3);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	letter-spacing: var(--vis-ls-label);
	overflow-wrap: anywhere;
}

.vis-route__arrow {
	display: inline-flex;
	color: var(--vis-text-3);

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

.vis-route__link:hover .vis-route__arrow,
.vis-route__link:focus-visible .vis-route__arrow {
	color: var(--vis-accent);
	transform: translateX(var(--vis-nudge));
}

/* ══ 7 — Wo du uns findest ═══════════════════════════════════════════════ */

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

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

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

.vis-where__headline {
	margin: 0;
	max-inline-size: 18ch;

	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-where__text {
	margin: var(--vis-space-6) 0 0;
	max-inline-size: 60ch;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-l);
	line-height: var(--vis-lh-body);
}

.vis-where__facts {
	display: grid;
	gap: 0;
	margin-block-start: var(--vis-space-8);
}

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

.vis-where__fact {
	padding-block: var(--vis-space-5);
	padding-inline-end: var(--vis-space-5);
	border-block-start: var(--vis-border-width) solid var(--vis-border);
}

/* Die Fakten stehen als <dl>; dt und dd bringen keine eigenen Abstände
   mit (base.css), die Anschrift steckt als <address> im dd. */
.vis-where__fact-label {
	margin: 0 0 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-transform: uppercase;
}

.vis-where__fact-value {
	display: grid;
	gap: var(--vis-space-1);
	margin: 0;

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

.vis-where__media {
	margin: 0;
	overflow: hidden;
	aspect-ratio: var(--vis-project-ratio-wide);
	--vis-cut-size: var(--vis-cut-lg);
}

/* ══ 8 — Anfrageformular ═════════════════════════════════════════════════ */

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

.vis-start__inner {
	display: grid;
	gap: var(--vis-space-10);
	align-items: start;
}

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

/* Die Fassung auf der Kontaktseite: keine Nebenspalte, weil die
   Kontaktdaten dort bereits über dem Formular stehen. Eine Spalte, die
   wiederholt, was direkt darüber steht, ist keine Nebenspalte, sondern
   eine Dopplung. Das Formular bleibt deshalb einspaltig und schmäler als
   die Seite, damit es nicht wie ein Datenerfassungsbogen wirkt. */
@media (min-width: 1024px) {
	.vis-start__inner--single {
		grid-template-columns: minmax(0, 1fr);
		max-width: var(--vis-container-content);
	}
}

.vis-start--contact {
	background: var(--vis-paper);
}

.vis-start__intro {
	display: grid;
	gap: var(--vis-space-3);
}

.vis-start__headline {
	margin: 0;
	font-size: var(--vis-fs-h2);
	line-height: var(--vis-lh-snug);
	letter-spacing: var(--vis-ls-heading);
}

.vis-start__text {
	margin: 0;
	max-width: 52ch;
	color: var(--vis-text-2);
}

.vis-start__form {
	min-inline-size: 0;
	display: grid;
	gap: var(--vis-section-s);

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

@media (max-width: 639px) {
	/* Die äußeren Seitenränder bleiben; innen braucht das Handy Platz zum Schreiben. */
	.vis-start__form { padding: var(--vis-space-4); gap: var(--vis-space-8); }
}

@media (min-width: 768px) {
	.vis-start__form { padding: var(--vis-space-12); }
}

.vis-start__block {
	margin: 0;
	padding: 0;
	border: 0;
}

.vis-start__legend {
	padding: 0;
	margin-block-end: var(--vis-space-5);

	font-size: var(--vis-fs-h3);
	font-weight: var(--vis-fw-bold);
	letter-spacing: var(--vis-ls-heading);
}

.vis-start__hint { margin-block-end: var(--vis-space-5); }

.vis-start__error {
	display: flex;
	align-items: flex-start;
	gap: var(--vis-space-3);
	margin: 0;
	padding: var(--vis-space-4) var(--vis-space-5);

	background: var(--vis-err-bg);
	color: var(--vis-err-text);
	font-size: var(--vis-fs-body-s);
}

/* ── Bereichsauswahl ────────────────────────────────────────────────────
   Große Klickflächen statt einer Liste kleiner Kästchen: Diese Frage ist
   der Einstieg, nicht eine Nebenangabe.                                 */

.vis-start__intents {
	display: grid;
	gap: var(--vis-space-3);
}

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

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

	padding: var(--vis-space-4) var(--vis-space-5);
	border: var(--vis-border-width) solid var(--vis-border);
	cursor: pointer;

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

@media (max-width: 639px) {
	.vis-intent { padding-inline: var(--vis-space-3); gap: var(--vis-space-3); }
}

.vis-intent:hover { border-color: var(--vis-ink-500); }

.vis-intent input {
	appearance: none;
	inline-size: var(--vis-space-5);
	block-size: var(--vis-space-5);
	margin: 0;

	border: var(--vis-border-width-strong) solid var(--vis-border-strong);
	border-radius: var(--vis-radius-xs);
	background: var(--vis-white);
	cursor: pointer;

	transition:
		border-color var(--vis-duration-micro) var(--vis-ease-out),
		background-color var(--vis-duration-micro) var(--vis-ease-out);
}

.vis-intent input:checked {
	border-color: var(--vis-accent);
	background: var(--vis-accent);
}

.vis-intent input:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-accent);
	outline-offset: var(--vis-focus-offset);
}

.vis-intent:has(input:checked) {
	border-color: var(--vis-accent);
	background: var(--vis-purple-50);
}

.vis-intent__body {
	display: grid;
	gap: var(--vis-space-1);
	min-inline-size: 0;
}

.vis-intent__label {
	font-size: var(--vis-fs-body);
	font-weight: var(--vis-fw-medium);
}

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

/* ── Felder ─────────────────────────────────────────────────────────── */

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

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

.vis-start__fields .vis-field { margin: 0; }
.vis-start__fields .vis-field + .vis-field { margin-block-start: 0; }

/* Die Honigfalle muss für Menschen unsichtbar sein, darf aber nicht auf
   display:none stehen — manche Bots prüfen genau darauf. */
.vis-start__trap {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.vis-start__foot {
	display: grid;
	gap: var(--vis-space-6);
	align-items: center;

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

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

.vis-start__privacy {
	margin: 0;
	max-inline-size: 62ch;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-caption);
	line-height: var(--vis-lh-body);
}

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

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

/* ── Bestätigung ────────────────────────────────────────────────────── */

.vis-start__done {
	display: grid;
	gap: var(--vis-space-4);
	justify-items: start;

	padding: var(--vis-space-12);
	background: var(--vis-ink-950);
	color: var(--vis-white);
	--vis-cut-size: var(--vis-cut-lg);
}

.vis-start__done-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	inline-size: var(--vis-space-12);
	block-size: var(--vis-space-12);
	border-radius: var(--vis-radius-full);

	background: var(--vis-accent-fill);
	color: var(--vis-white);
}

.vis-start__done-title {
	margin: 0;
	font-size: var(--vis-fs-h1);
	font-weight: var(--vis-fw-bold);
	letter-spacing: var(--vis-ls-display);
}

.vis-start__done-text {
	margin: 0;
	max-inline-size: 52ch;
	color: var(--vis-ink-300);
	font-size: var(--vis-fs-body-l);
}

.vis-start__done .vis-link { color: var(--vis-purple-400); }

/* ── Nebenspalte ────────────────────────────────────────────────────── */

.vis-start__card {
	display: grid;
	gap: var(--vis-space-4);
	justify-items: start;

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

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

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

/* ══ 9 — Reduzierte Bewegung ═════════════════════════════════════════════ */

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

	.vis-route__link:hover .vis-route__arrow,
	.vis-route__link:focus-visible .vis-route__arrow,
	.vis-start__foot .vis-btn:hover .vis-icon {
		transform: none;
	}
}

/* ══ 9 — Fehlerseite ═════════════════════════════════════════════════════

   Die 404 baut auf den Kontaktwegen auf: dieselbe Kachel, dasselbe Raster,
   derselbe Zustand beim Überfahren. Was hier steht, ist nur, was die
   Kontaktseite nicht braucht.                                            */

.vis-routes--404 { padding-block: var(--vis-section-m) var(--vis-section-l); }

.vis-search404 {
	display: grid;
	gap: var(--vis-space-3);
	margin-block-start: var(--vis-section-s);
	max-inline-size: 42rem;
}

.vis-search404__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vis-space-3);
}

.vis-search404__row .vis-input {
	flex: 1 1 16rem;
	min-inline-size: 0;
}

/* ══ 10 — Eigenen Vereinsshop eröffnen ═══════════════════════════════════

   Eine Anfrage-Landingpage aus vorhandenen Bausteinen: Seitenkopf, die
   Kacheln der Kontaktwege, eine Stationenkette, das gemeinsame Formular.
   Hier steht nur, was diese vier Teile in dieser Reihenfolge brauchen.   */

.vis-clubshop__jump {
	max-inline-size: var(--vis-container-wide);
	margin: 0 auto;
	padding: 0 var(--vis-gutter) var(--vis-section-s);
}

/* Drei Vorteile stehen nebeneinander, nicht zu zweit — bei zwei Spalten
   bliebe der dritte allein in einer zweiten Zeile stehen und sähe aus wie
   ein Nachtrag. */
@media (min-width: 900px) {
	.vis-routes__list--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Die Vorteilskachel ist eine Aussage, kein Weg: kein Pfeil, kein Hover,
   kein Zeiger. Dieselbe Form, eine andere Rolle. */
.vis-route--static .vis-route__link {
	grid-template-columns: auto minmax(0, 1fr);
	cursor: default;
}

.vis-route--static .vis-route__link:hover {
	border-color: var(--vis-border);
	background: transparent;
}

.vis-route--static .vis-route__link:hover .vis-route__icon { background: var(--vis-bg-subtle); }

/* ── Ablauf ────────────────────────────────────────────────────────────
   Dunkel, weil er die Mitte der Seite trägt und der Rhythmus hell → dunkel
   → hell die drei Abschnitte voneinander trennt (E35).                  */

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

.vis-clubsteps__inner {
	max-inline-size: var(--vis-container-wide);
	margin-inline: auto;
	padding-inline: var(--vis-gutter);
}

.vis-clubsteps__headline {
	margin: 0 0 var(--vis-section-s);
	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-clubsteps__list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.vis-clubstep {
	display: grid;
	gap: var(--vis-space-2);

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

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

.vis-clubstep__num {
	color: var(--vis-purple-400);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-h4);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--vis-ls-label);
}

.vis-clubstep__body {
	display: grid;
	gap: var(--vis-space-2);
	min-inline-size: 0;
}

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

.vis-clubstep__text {
	max-inline-size: 68ch;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-s);
	line-height: var(--vis-lh-body);
}

.vis-clubsteps__note {
	margin: var(--vis-space-8) 0 0;
	max-inline-size: 62ch;
	color: var(--vis-text-3);
	font-size: var(--vis-fs-body-s);
}

/* ── Anfrage ─────────────────────────────────────────────────────────── */

.vis-start--club { background: var(--vis-bg-subtle); }

/* Mehrfachauswahl und Ja/Nein: dieselbe Kachel für Kästchen und Kreise —
   was sie unterscheidet, ist die Frage, nicht die Form. */
.vis-choices {
	display: grid;
	gap: var(--vis-space-2);
	margin-block-start: var(--vis-space-3);
}

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

.vis-choice {
	display: flex;
	align-items: flex-start;
	gap: var(--vis-space-3);

	padding: var(--vis-space-4);
	border: var(--vis-border-width) solid var(--vis-border);
	cursor: pointer;

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

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

.vis-choice:hover { border-color: var(--vis-accent); }

.vis-choice:has(input:checked) {
	border-color: var(--vis-accent);
	background: var(--vis-white);
}

.vis-choice:has(input:focus-visible) {
	outline: var(--vis-focus-width) solid var(--vis-accent);
	outline-offset: var(--vis-focus-offset);
}

.vis-choice input {
	flex: none;
	inline-size: var(--vis-space-5);
	block-size: var(--vis-space-5);
	margin: 0;
	accent-color: var(--vis-accent);
}

.vis-label--field {
	display: block;
	margin: 0;
}

.vis-start__spacer { margin-block-start: var(--vis-space-8); }

/* Das Dateifeld bleibt ein Dateifeld: Ein nachgebauter Knopf mit
   verstecktem Input funktioniert ohne JavaScript nicht mehr zuverlässig,
   und der Browser sagt von selbst, welche Datei gewählt wurde. */
.vis-file {
	display: block;
	inline-size: 100%;
	max-inline-size: 100%;

	padding: var(--vis-space-3);
	border: var(--vis-border-width) dashed var(--vis-border);
	background: var(--vis-white);

	font: inherit;
	font-size: var(--vis-fs-body-s);
}

.vis-file:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-accent);
	outline-offset: var(--vis-focus-offset);
}

.vis-start__trust {
	display: flex;
	align-items: flex-start;
	gap: var(--vis-space-3);

	margin: var(--vis-section-s) 0 0;
	max-inline-size: 68ch;

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

/* Das Nachrichtenfeld steht in der Vereinsfassung unter dem Wappenfeld und
   braucht Luft dazwischen — sonst klebt seine Beschriftung am Hinweistext
   darüber und liest sich wie dessen Fortsetzung. */
.vis-field + .vis-start__fields { margin-block-start: var(--vis-space-8); }

/* ══ 11 — Unternehmen aufbauen ═══════════════════════════════════════════

   Die Einstiegsseite für Gründerinnen und Gründer. Sie benutzt fünf
   vorhandene Bausteine und bringt zwei eigene mit: das Raster der sechs
   Bausteine und die dunkle Prioritätenfläche.

   Rhythmus: hell (Kopf) → off-white (Bausteine) → dunkel (Prioritäten) →
   Papier (Ablauf) → hell (Anfrage). Die Alternative wäre gewesen, den
   Abschnitt „Eine Firma. Ein Auftritt." der Startseite zu kopieren — der
   bleibt, wo er ist.                                                     */

/* ── Die zwei Wege aus dem Kopf ─────────────────────────────────────────
   Knopf und Textlink nebeneinander, nicht übereinander: Der zweite Weg
   ist keine zweite Handlung, sondern ein Blick nach unten.              */

.vis-found__jump {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vis-space-5) var(--vis-space-8);
}

.vis-found__jump .vis-link {
	font-size: var(--vis-fs-body-s);
}

/* ── Die sechs Bausteine ─────────────────────────────────────────────── */

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

.vis-build__inner {
	max-inline-size: var(--vis-container-wide);
	margin-inline: auto;
	padding-inline: var(--vis-gutter);
}

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

.vis-build__headline {
	margin: 0;
	max-inline-size: 24ch;

	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-build__lead {
	margin: var(--vis-space-5) 0 0;
	max-inline-size: 62ch;

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

/* Eine Spalte auf dem Telefon, zwei ab 640, drei ab 1024. Feste
   Spaltenzahlen statt `auto-fill`: Bei sechs gleich wichtigen Bausteinen
   soll keine Breite entstehen, in der einer allein in der letzten Zeile
   steht. */
.vis-build__grid {
	display: grid;
	gap: var(--vis-space-4);

	margin: 0;
	padding: 0;
	list-style: none;
}

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

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

.vis-block { min-inline-size: 0; }

/* Werkstattraster: Haarlinie, Indexnummer in Mono, das Symbol als
   Eckmarke. Kein Schatten, kein Verlauf. */
.vis-block__body {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"num   icon"
		"title title"
		"text  text"
		"more  more";
	gap: var(--vis-space-3) var(--vis-space-4);
	align-items: start;

	block-size: 100%;
	padding: var(--vis-space-6);
	border: var(--vis-border-width) solid var(--vis-border);
	border-radius: var(--vis-radius-md);

	background: var(--vis-bg);
	color: inherit;
	text-decoration: none;

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

a.vis-block__body:hover {
	border-color: var(--vis-ink-500);
	background: var(--vis-white);
}

a.vis-block__body:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-accent);
	outline-offset: var(--vis-focus-offset);
}

/* Der Baustein ohne Zielseite ist eine Aussage, kein Weg (E28). */
.vis-block__body--static { cursor: default; }

.vis-block__num {
	grid-area: num;

	color: var(--vis-text-3);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--vis-ls-label);
}

.vis-block__icon {
	grid-area: icon;
	justify-self: end;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	inline-size: var(--vis-space-10);
	block-size: var(--vis-space-10);
	border-radius: var(--vis-radius-sm);

	background: var(--vis-bg-subtle);
	color: var(--vis-accent);

	transition: background var(--vis-duration-ui) var(--vis-ease-out);
}

a.vis-block__body:hover .vis-block__icon { background: var(--vis-purple-50); }

.vis-block__title {
	grid-area: title;

	font-size: var(--vis-fs-h4);
	font-weight: var(--vis-fw-bold);
	letter-spacing: var(--vis-ls-heading);
	text-wrap: balance;
}

.vis-block__text {
	grid-area: text;

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

.vis-block__more {
	grid-area: more;
	align-self: end;

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

	margin-block-start: var(--vis-space-2);

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

.vis-block__more .vis-icon {
	transition: transform var(--vis-duration-micro) var(--vis-ease-out);
}

a.vis-block__body:hover .vis-block__more .vis-icon,
a.vis-block__body:focus-visible .vis-block__more .vis-icon {
	transform: translateX(var(--vis-nudge));
}

/* Der Hinweis, dass es eine Auswahl ist (E42). */
.vis-build__note {
	margin: var(--vis-section-s) 0 0;
	max-inline-size: 68ch;

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

/* ── Bild: der Auftritt im Zusammenhang ─────────────────────────────────
   Steht nur da, wenn ein Bild gepflegt ist. Kein Rahmen ohne Inhalt.    */

.vis-found__media {
	max-inline-size: var(--vis-container-wide);
	margin: 0 auto;
	padding: var(--vis-section-m) var(--vis-gutter) 0;
}

.vis-found__image {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--vis-radius-md);
}

.vis-found__caption {
	margin-block-start: var(--vis-space-3);
	color: var(--vis-text-3);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	letter-spacing: var(--vis-ls-label);
}

/* ── Prioritäten ────────────────────────────────────────────────────────
   Die Mitte der Seite und ihre eigentliche Aussage: nicht alles auf
   einmal. Dunkel, weil sie trägt.                                       */

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

.vis-focus__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--vis-section-s);

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

/* Asymmetrisch ab dem Schreibtisch: Die Aussage links trägt mehr Gewicht
   als die drei Stichpunkte rechts. */
@media (min-width: 1024px) {
	.vis-focus__inner {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		gap: var(--vis-space-20);
		align-items: start;
	}
}

/* Long German words must not enlarge the single mobile grid track. */
.vis-focus__intro, .vis-focus__list, .vis-focusitem__body {
	min-inline-size: 0;
	overflow-wrap: anywhere;
	hyphens: auto;
}

.vis-focus__headline {
	margin: 0;
	max-inline-size: 22ch;

	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-focus__text {
	margin: var(--vis-space-6) 0 0;
	max-inline-size: 54ch;

	color: var(--vis-text-2);
	line-height: var(--vis-lh-body);
}

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

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

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

.vis-focusitem__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	inline-size: var(--vis-space-10);
	block-size: var(--vis-space-10);
	border-radius: var(--vis-radius-sm);

	background: var(--vis-purple-900);
	color: var(--vis-purple-200);
}

.vis-focusitem__body {
	display: grid;
	gap: var(--vis-space-2);
	min-inline-size: 0;
}

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

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

/* ── Ablauf auf Papierton ───────────────────────────────────────────────
   Dieselbe Stationenkette wie auf der Vereinsshop-Seite, nur hell: Der
   Abschnitt darüber trägt hier das Dunkel, und zwei dunkle Flächen
   hintereinander sind keine Gliederung mehr. Drei Zeilen statt einer
   zweiten Komponente.                                                   */

.vis-clubsteps--paper { background: var(--vis-paper); }
.vis-clubsteps--paper .vis-clubstep { border-block-start-color: var(--vis-border); }
.vis-clubsteps--paper .vis-clubstep__num { color: var(--vis-accent-text); } /* #A259FF auf Papier nur 3,4:1 */

/* ── Anfrage ─────────────────────────────────────────────────────────── */

.vis-start--founding { background: var(--vis-bg); }

/* Sieben Möglichkeiten mit kurzen Beschriftungen und ohne Erklärungstext:
   Die Kachel des Anfrage-Einstiegs ist dafür zu hoch gebaut. Enger gesetzt
   und in drei Spalten, damit die Auswahl nicht die halbe Seite einnimmt. */
.vis-start__intents--plain { gap: var(--vis-space-2); }

.vis-start__intents--plain .vis-intent { padding: var(--vis-space-4); }

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

@media (min-width: 900px) {
	.vis-start__intents--plain { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Die zugeklappten Zusatzangaben ─────────────────────────────────────
   Ein `<details>` und kein Skript: ohne JavaScript derselbe Schalter.
   Zugeklappt, weil niemand einen Startzeitpunkt braucht, um anzufragen.

   `.vis-more` heißt in services.css auch der dunkle Kasten „Nicht
   gefunden, was du suchst?". Liegen beide Dateien auf einer Seite,
   bekäme der Kasten hier den hellen Grund — bei weißer Überschrift.
   Deshalb gilt dieser Block nur für das `<details>` und setzt zurück,
   was der Kasten an Raster und Innenabstand mitbringt.                  */

details.vis-more {
	display: block;
	padding: 0;
	margin-block-start: var(--vis-space-8);
	border: var(--vis-border-width) solid var(--vis-border);
	border-radius: var(--vis-radius-md);
	background: var(--vis-bg-subtle);
}

.vis-more__toggle {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--vis-space-1) var(--vis-space-4);
	align-items: center;

	padding: var(--vis-space-5) var(--vis-space-6);
	cursor: pointer;
	list-style: none;
}

.vis-more__toggle::-webkit-details-marker { display: none; }

.vis-more__toggle:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-accent);
	outline-offset: var(--vis-focus-offset);
}

.vis-more__label {
	font-size: var(--vis-fs-body-s);
	font-weight: var(--vis-fw-bold);
}

.vis-more__hint {
	grid-column: 1;
	color: var(--vis-text-3);
	font-size: var(--vis-fs-label);
	letter-spacing: 0;
	line-height: var(--vis-lh-body);
	text-transform: none;
}

.vis-more__mark {
	grid-row: 1 / span 2;
	grid-column: 2;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	inline-size: var(--vis-space-8);
	block-size: var(--vis-space-8);
	border-radius: var(--vis-radius-sm);

	background: var(--vis-bg);
	color: var(--vis-accent);

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

.vis-more[open] .vis-more__mark { transform: rotate(45deg); }

details.vis-more .vis-more__body {
	display: grid;
	gap: var(--vis-space-6);

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

details.vis-more .vis-more__body .vis-field { margin: 0; }

/* Der gesperrte Knopf nach dem Abschicken. Er verschwindet nicht und
   wechselt seine Beschriftung nicht — er wird still. */
.vis-btn.is-sending {
	opacity: 0.6;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.vis-block__body,
	.vis-block__icon,
	.vis-block__more .vis-icon,
	.vis-more__mark { transition: none; }
}

/* Inline inquiry feedback: retained fields and a clear place to continue. */
.vis-start__error[data-state="sending"] { background: var(--vis-surface); color: var(--vis-text-2); }
.vis-start__error, .vis-start__done { scroll-margin-block-start: 8rem; }
.vis-start__error:focus-visible, .vis-start__done:focus-visible { outline: 2px solid var(--vis-ink-950); outline-offset: var(--vis-space-1); }
.vis-start__form[aria-busy="true"] .vis-start__foot { cursor: progress; }