/* ==========================================================================
   VISARO — Startseite: Abschnitte 2 bis 4
   --------------------------------------------------------------------------
   Der Hero steht in hero.css. Hier stehen:

     2  Was hast du vor?   hell, Indexliste mit Vorschau am Zeiger
     3  Leistungen         hell, asymmetrisches Raster
     4  Das Prinzip        dunkel, Entscheidungsweg

   Der Rhythmus ist dunkel → hell → hell → dunkel. Zwei helle Abschnitte in
   Folge sind Absicht: Sie gehören zusammen (erst das Ziel, dann was wir
   dafür können) und trennen sich über Typografie, nicht über den Grund.

   Alle Werte aus tokens.css.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   2 — WAS HAST DU VOR?
   ══════════════════════════════════════════════════════════════════════════ */

/* Der Übergang aus dem Hero: Die helle Fläche schiebt sich um genau die
   Höhe der Schnittkante unter den Hero und lässt oben links eine 60°-Ecke
   frei. Dort schaut der dunkle Hero durch.

   Kein Shape-Divider: Es ist dieselbe Kantenmaske, die auch Karten und
   Medien im System verwenden — nur eine Nummer größer. */
.vis-intents {
	position: relative;
	z-index: 1;

	--vis-cut-size: var(--vis-cut-lg);
	margin-block-start: calc(var(--vis-cut-lg) / var(--vis-tan60) * -1);

	/* Der obere Abstand ist eine Stufe kleiner als der untere.

	   Grund: Die Schnittkante frisst oben bereits Höhe — sie ist selbst
	   schon Weißraum. Mit section-l darüber entstand eine leere Fläche
	   zwischen Kante und Überschrift, und der Übergang las sich als
	   „Hero → Loch → nächster Abschnitt" statt als ein Fluss.

	   Zusätzlich kommt die Kantenhöhe wieder drauf, damit die
	   Überschrift nicht in die Schräge hineinrutscht. Dadurch bleibt
	   der Abstand optisch großzügig, ohne rechnerisch groß zu sein. */
	padding-block:
		calc(var(--vis-section-s) + var(--vis-cut-lg) / var(--vis-tan60))
		var(--vis-section-m);

	background: var(--vis-bg-subtle);
}

.vis-intents__inner,
.vis-svc__inner,
.vis-principle__inner {
	max-width: var(--vis-container-wide);
	margin-inline: auto;
	padding-inline: var(--vis-gutter);
}

/* ── Kopf ────────────────────────────────────────────────────────────────
   Überschrift links, Einleitung rechts. Zwei Spalten statt untereinander:
   Der Einstieg soll breit wirken, nicht wie ein Blogtext. */

.vis-intents__head {
	display: grid;
	gap: var(--vis-space-8);
	margin-block-end: var(--vis-space-12);
}

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

.vis-intents__headline,
.vis-svc__headline {
	margin: var(--vis-space-5) 0 0;
	max-inline-size: 16ch;

	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-intents__intro {
	margin: 0;
	max-inline-size: 52ch;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-l);
}

/* ── Liste und Vorschau ──────────────────────────────────────────────────
   `.vis-intents__body` ist der Bezugsrahmen für die Vorschau. Sie steht
   darin absolut auf 0/0 und wird ausschließlich per transform bewegt —
   damit kann sie den Rahmen nicht verlassen, egal wo im Dokument der
   Abschnitt steht. */

.vis-intents__body {
	position: relative;
}

.vis-intents__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-block-start: var(--vis-border-width) solid var(--vis-border);
}

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

	padding-block: var(--vis-space-6);
	padding-inline: 0;
	border-block-end: var(--vis-border-width) solid var(--vis-border);

	color: inherit;
	text-decoration: none;

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

/* Mobil steht die Nummer neben dem Titel, nicht neben der Mitte des
   Textblocks. Bei zentrierter Ausrichtung rutschte sie auf Höhe der
   Beschreibung und sah aus, als gehöre sie zum falschen Absatz. */
@media (max-width: 767.98px) {
	.vis-intents__row { align-items: start; }
	.vis-intents__num { padding-block-start: var(--vis-space-2); }
	.vis-intents__action { align-self: center; }
}

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

/* Die Zeile rückt beim Überfahren ein Stück ein und bekommt eine ruhige
   Fläche. Bewegt wird das Padding, nicht die Zeile — dadurch bleibt der
   Trefferbereich stehen und der Zustand flackert nicht.

   Die Haarlinie darunter wird eine Spur kräftiger. Keine Purple-Fläche
   über die ganze Zeile: Der Hinweis „hier kann ich klicken" kommt aus dem
   Pfeil, nicht aus einem Farbbalken. */
.vis-intents__row {
	border-block-end-color: var(--vis-border);
	transition:
		background-color var(--vis-duration-ui) var(--vis-ease-out),
		border-color var(--vis-duration-ui) var(--vis-ease-out),
		padding-inline var(--vis-duration-ui) var(--vis-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.vis-intents__row:not(.is-pending):hover {
		background: var(--vis-white);
		border-block-end-color: var(--vis-border-strong);
		padding-inline: var(--vis-space-6);
	}
}

/* Tastatur bekommt denselben Zustand, nicht nur einen Ring. Wer mit Tab
   navigiert, soll dieselbe Rückmeldung sehen wie mit der Maus. */
.vis-intents__row:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-accent);
	outline-offset: calc(var(--vis-focus-offset) * -1);
	background: var(--vis-white);
	border-block-end-color: var(--vis-border-strong);
}

.vis-intents__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);
	transition: color var(--vis-duration-ui) var(--vis-ease-out);
}

.vis-intents__row:not(.is-pending):hover .vis-intents__num,
.vis-intents__row:not(.is-pending):focus-visible .vis-intents__num { color: var(--vis-accent-text); }

.vis-intents__row:not(.is-pending) .vis-intents__title { color: var(--vis-ink-800); }

.vis-intents__row:not(.is-pending):hover .vis-intents__title,
.vis-intents__row:not(.is-pending):focus-visible .vis-intents__title { color: var(--vis-ink-950); }

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

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

/* Der Titel wird beim Hover eine Spur kräftiger — über die Farbe, nicht
   über die Schriftstärke. Fettung würde die Zeile breiter machen und
   alles danebenstehende verschieben. */
.vis-intents__title {
	font-size: var(--vis-fs-h3);
	font-weight: var(--vis-fw-medium);
	letter-spacing: var(--vis-ls-heading);
	line-height: var(--vis-lh-heading);
	color: var(--vis-text);
	transition: color var(--vis-duration-ui) var(--vis-ease-out);
}

.vis-intents__desc {
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-s);
	max-inline-size: 54ch;
}

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

	inline-size: var(--vis-space-10);
	block-size: var(--vis-space-10);
	border: var(--vis-border-width) solid var(--vis-border-strong);
	border-radius: var(--vis-radius-full);

	color: var(--vis-text-2);

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

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

/* Der Pfeil trägt die Aussage „hier kann ich klicken".

   Purple statt schwarzer Fläche: Eine gefüllte Fläche wirkte wie ein
   Button und konkurrierte mit dem CTA im Hero. Der Pfeil selbst wird
   VISARO Purple, der Kreis nimmt die Farbe nur als Kontur auf und
   bekommt einen sehr leichten Schimmer — mehr braucht es nicht. */
.vis-intents__row:not(.is-pending):hover .vis-intents__action,
.vis-intents__row:not(.is-pending):focus-visible .vis-intents__action {
	border-color: var(--vis-accent);
	background: color-mix(in srgb, var(--vis-accent) 8%, transparent);
	color: var(--vis-accent);
	transform: translateX(var(--vis-space-1));
}

/* Ohne Ziel: sichtbar, aber ohne Versprechen. */
.vis-intents__row.is-pending {
	cursor: default;
}

.vis-intents__row.is-pending .vis-intents__action {
	border-style: dashed;
	color: var(--vis-text-3);
}

/* ── Bilder ──────────────────────────────────────────────────────────────
   (08.10.2026) Mit Maus: kleine Vorschau am Zeiger, die Liste nutzt die
   ganze Breite. Ohne Maus (Touch, Stift): jede Zeile trägt ihr Bild
   selbst als Vorschaubild — sichtbar ohne Hover, Teil der Tippfläche. */

.vis-intents__thumb {
	grid-area: thumb;
	display: block;
	inline-size: var(--vis-space-16);
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--vis-radius-sm);
	background: var(--vis-ink-100);
}

.vis-intents__thumb img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.vis-intents__row:has(.vis-intents__thumb) {
	grid-template-columns: auto auto minmax(0, 1fr) auto;
	grid-template-areas: "num thumb text action";
}

.vis-intents__row:has(.vis-intents__thumb) .vis-intents__num    { grid-area: num; }
.vis-intents__row:has(.vis-intents__thumb) .vis-intents__text   { grid-area: text; }
.vis-intents__row:has(.vis-intents__thumb) .vis-intents__action { grid-area: action; }

@media (max-width: 599.98px) {
	.vis-intents__row:has(.vis-intents__thumb) {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "thumb text action";
		gap: var(--vis-space-4);
	}
	.vis-intents__row:has(.vis-intents__thumb) .vis-intents__num { display: none; }
	.vis-intents__row:has(.vis-intents__thumb) .vis-intents__text { align-self: center; }
}

/* Mit Maus: keine Vorschaubilder in der Zeile, die Liste wie früher. */
@media (hover: hover) and (pointer: fine) {
	.vis-intents__thumb { display: none; }

	.vis-intents__row:has(.vis-intents__thumb) {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "num text action";
	}
}

@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
	.vis-intents__row:has(.vis-intents__thumb) { grid-template-columns: var(--vis-space-16) minmax(0, 1fr) auto; }
}

@media (hover: hover) and (pointer: fine) and (max-width: 599.98px) {
	.vis-intents__row:has(.vis-intents__thumb) .vis-intents__num { display: inline; }
}

/* Die Vorschau. home.js hängt sie an <body> (`.is-floating`) und schreibt
   nur ihre Position als transform. Ohne Skript und ohne Maus bleibt sie
   unsichtbar. */
.vis-intents__preview { display: none; }

.vis-intents__preview.is-floating {
	position: fixed;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 60;
	display: block;
	inline-size: var(--vis-intents-preview-w);
	block-size: var(--vis-intents-preview-h);
	overflow: hidden;
	border-radius: var(--vis-radius-md);
	background: var(--vis-ink-100);
	box-shadow: var(--vis-shadow-menu);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--vis-duration-ui) var(--vis-ease-out);
}

.vis-intents__preview.is-floating.is-visible { opacity: 1; }

.vis-intents__preview.is-floating .vis-intents__shot {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity var(--vis-duration-ui) var(--vis-ease-out);
}

.vis-intents__preview.is-floating .vis-intents__shot.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.vis-intents__preview.is-floating,
	.vis-intents__preview.is-floating .vis-intents__shot { transition: none; }
}

.vis-intents__image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

/* Solange kein Foto existiert (O7), steht hier das Motiv mit seiner ID.
   Ein sichtbarer Platzhalter, kein leeres Rechteck. */
.vis-intents__placeholder {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--vis-space-2);

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

	background: var(--vis-ink-950);
	color: var(--vis-ink-300);
}

.vis-intents__placeholder-id {
	color: var(--vis-purple-400);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	letter-spacing: var(--vis-ls-label);
}

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

.vis-intents__placeholder-note {
	color: var(--vis-ink-500);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	letter-spacing: var(--vis-ls-label);
	text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════════════════
   4 — DAS PRINZIP
   ══════════════════════════════════════════════════════════════════════════ */

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

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

/* Drei Haarlinien wie im Hero — sie klammern Anfang und Ende der Seite
   optisch zusammen. */
.vis-principle__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-principle__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-principle__grid span:nth-child(1) { inset-inline-start: 0; }
.vis-principle__grid span:nth-child(2) { inset-inline-start: 50%; }
.vis-principle__grid span:nth-child(3) { inset-inline-end: 0; }

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

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

	display: grid;
	gap: var(--vis-section-s);
}

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

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

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

/* ── Der Weg ─────────────────────────────────────────────────────────────
   Drei Schritte an einer Linie. Die Linie wächst mit den Schritten mit —
   sie zeigt, dass es ein Weg ist und keine Aufzählung. */

.vis-principle__steps {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;

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

/* Die Linie wächst von oben mit, sobald die Liste im Bild ist. Sie hängt
   an derselben Reveal-Mechanik wie alles andere (`.vis-reveal` in
   main.js) — ein eigener Beobachter dafür wäre eine zweite Wahrheit über
   denselben Vorgang. */
.vis-principle__steps::before {
	content: "";
	position: absolute;
	inset-block: var(--vis-space-3) 0;
	inset-inline-start: calc(var(--vis-space-2) - var(--vis-border-width) / 2);

	inline-size: var(--vis-border-width);
	background: var(--vis-ink-800);

	transform: scaleY(1);
	transform-origin: top;
	transition: transform var(--vis-duration-cinematic) var(--vis-ease-out);
}

.js .vis-principle__steps:not(.is-revealed)::before { transform: scaleY(0); }

.vis-principle__step {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--vis-space-5);
	align-items: start;
}

/* Der 60°-Marker sitzt auf der Linie. */
.vis-principle__step-mark {
	inline-size: var(--vis-space-4);
	block-size: calc(var(--vis-space-4) / var(--vis-tan60) * 2);
	margin-block-start: var(--vis-space-2);

	background: var(--vis-ink-700);
	clip-path: polygon(0 0, 100% 50%, 0 100%);

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

.vis-principle__step.is-revealed .vis-principle__step-mark { background: var(--vis-purple-500); }

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

.vis-principle__step-label {
	display: flex;
	align-items: center;
	gap: var(--vis-space-3);

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

.vis-principle__step-num { color: var(--vis-purple-400); }

.vis-principle__step-title {
	font-size: var(--vis-fs-h3);
	font-weight: var(--vis-fw-medium);
	letter-spacing: var(--vis-ls-heading);
	line-height: var(--vis-lh-heading);
	color: var(--vis-white);
}

.vis-principle__step-text {
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-s);
	max-inline-size: 46ch;
}

/* Die Schritte erscheinen nacheinander. Ohne JavaScript stehen sie
   vollständig da — der Inhalt geht nie verloren. */
.js .vis-principle__step:not(.is-revealed) {
	opacity: 0;
	transform: translateY(var(--vis-space-5));
}

.js .vis-principle__step {
	transition:
		opacity var(--vis-duration-content) var(--vis-ease-out),
		transform var(--vis-duration-content) var(--vis-ease-out);
	transition-delay: calc(var(--vis-step) * 110ms);
}

/* ══════════════════════════════════════════════════════════════════════════
   REDUZIERTE BEWEGUNG
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.vis-intents__preview { transition: none; }
	.vis-intents__shot { transition: none; transform: none; }

	.vis-principle__steps::before,
	.js .vis-principle__steps:not(.is-revealed)::before {
		transition: none;
		transform: none;
	}

	.js .vis-principle__step:not(.is-revealed) {
		opacity: 1;
		transform: none;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   GEMEINSAME CONTAINER UND KÖPFE der Abschnitte ab Produktion
   (stand bis 07.10.2026 im Projekte-Block, der mit ihm entfallen ist)
   ══════════════════════════════════════════════════════════════════════════ */

.vis-production__inner,
.vis-story__inner,
.vis-team__inner,
.vis-closing__inner,
.vis-shops__inner {
	max-width: var(--vis-container-wide);
	margin-inline: auto;
	padding-inline: var(--vis-gutter);
}

.vis-shops__head,
.vis-team__head {
	display: grid;
	gap: var(--vis-space-8);
	margin-block-end: var(--vis-space-12);
}

@media (min-width: 1024px) {
	.vis-shops__head,
	.vis-team__head {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--vis-space-16);
		align-items: end;
		margin-block-end: var(--vis-section-s);
	}
}

.vis-shops__headline,
.vis-team__headline {
	margin: var(--vis-space-5) 0 0;
	max-inline-size: 16ch;
	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-shops__intro,
.vis-team__text {
	margin: 0;
	max-inline-size: 54ch;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-l);
}

/* ══════════════════════════════════════════════════════════════════════════
   7 — PRODUKTION

   Der Papierton statt Weiß: die Anti-SaaS-Farbe aus dem System, und die
   richtige für Material, Werkstatt und Handarbeit.
   ══════════════════════════════════════════════════════════════════════════ */

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

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

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

.vis-production__lead {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--vis-ink-950);
	aspect-ratio: var(--vis-production-lead-ratio);
}

.vis-production__image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;

	transform: scale(1.04);
	transition: transform var(--vis-duration-cinematic) var(--vis-ease-out);
}

.is-revealed .vis-production__image { transform: none; }

.vis-production__placeholder {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--vis-space-2);

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

	color: var(--vis-ink-300);
}

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

.vis-production__placeholder-id {
	color: var(--vis-purple-400);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	letter-spacing: var(--vis-ls-label);
}

/* ── Die Strecke ─────────────────────────────────────────────────────────
   Vier Schritte an einer Linie, wie im Prinzip-Abschnitt — dieselbe
   Sprache, anderer Inhalt. */

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

.vis-production__steps {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;

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

.vis-production__steps::before {
	content: "";
	position: absolute;
	inset-block: var(--vis-space-2) var(--vis-space-4);
	inset-inline-start: calc(var(--vis-space-2) - var(--vis-border-width) / 2);

	inline-size: var(--vis-border-width);
	background: var(--vis-border-strong);
}

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

.vis-production__step-mark {
	inline-size: var(--vis-space-4);
	block-size: calc(var(--vis-space-4) / var(--vis-tan60) * 2);
	margin-block-start: var(--vis-space-1);
	background: var(--vis-accent);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

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

.vis-production__step-label {
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	font-weight: var(--vis-fw-medium);
	letter-spacing: var(--vis-ls-label);
	text-transform: uppercase;
}

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

/* ── Was im Haus steht ───────────────────────────────────────────────────
   Die Maschinen sind Beweis, nicht Story. Deshalb eine ruhige Mono-Liste
   und kein Datenblatt. */

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

.vis-production__specs-label {
	margin: 0 0 var(--vis-space-4);
	color: var(--vis-text-3);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	font-weight: var(--vis-fw-medium);
	letter-spacing: var(--vis-ls-label);
	text-transform: uppercase;
}

.vis-production__specs-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vis-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vis-production__specs-list li {
	padding: var(--vis-space-2) var(--vis-space-3);
	border: var(--vis-border-width) solid var(--vis-border-strong);
	border-radius: var(--vis-radius-full);

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

/* ── Streifen mit den übrigen Motiven ────────────────────────────────── */

.vis-production__strip {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--vis-space-4);
	margin-block-start: var(--vis-space-10);
}

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

.vis-production__tile {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--vis-ink-950);
	aspect-ratio: var(--vis-production-tile-ratio);
}

.vis-production__tile .vis-production__placeholder {
	padding: var(--vis-space-4);
	gap: var(--vis-space-1);
}

.vis-production__tile .vis-production__placeholder-motif { font-size: var(--vis-fs-caption); }

/* ── Partnerhinweis ──────────────────────────────────────────────────────
   Kein Kleingedrucktes: Es geht darum, was bei VISARO bleibt. */

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

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

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

.vis-production__partner-title {
	margin: 0;
	font-size: var(--vis-fs-h4);
	font-weight: var(--vis-fw-medium);
	max-inline-size: 22ch;
}

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

/* ══════════════════════════════════════════════════════════════════════════
   8 — SHOPWELTEN

   Vier Türen, kein Shop. Jede Welt trägt ihre Akzentfarbe, aber dieselbe
   Kachel: individuelle Identität, gemeinsame Bedienlogik.
   ══════════════════════════════════════════════════════════════════════════ */

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

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

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

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

/* Drei Shopwelten (seit „Textil gestalten" zurückgestellt ist, E261):
   drei gleiche Spalten statt einer leeren vierten. */
@media (min-width: 768px) {
	.vis-shops__grid--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.vis-shopworld {
	position: relative;
	display: flex;
	flex-direction: column;

	padding: var(--vis-space-6);
	background: var(--vis-white);
	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);
}

/* Die Akzentkante der Welt. Sie wächst beim Überfahren über die volle
   Breite — das ist der ganze Effekt, und er genügt. */
.vis-shopworld__accent {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;

	inline-size: var(--vis-space-12);
	block-size: var(--vis-accent-bar);
	background: var(--vis-shopworld-accent, var(--vis-accent));

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

.vis-shopworld:not(.is-pending):hover .vis-shopworld__accent { inline-size: 100%; }
.vis-shopworld:not(.is-pending):hover { border-color: var(--vis-shopworld-accent, var(--vis-accent)); }

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

.vis-shopworld--feuerwehr { --vis-shopworld-accent: var(--vis-world-feuerwehr); }
.vis-shopworld--verein    { --vis-shopworld-accent: var(--vis-world-verein); }
.vis-shopworld--sport     { --vis-shopworld-accent: var(--vis-world-sport); }
.vis-shopworld--textil    { --vis-shopworld-accent: var(--vis-world-textil); }

.vis-shopworld__media {
	display: block;
	margin-block: var(--vis-space-4) var(--vis-space-6);
	overflow: hidden;
}

.vis-shopworld__image {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: var(--vis-project-ratio-wide);
	object-fit: cover;
	display: block;
}

.vis-shopworld__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-shopworld-accent, var(--vis-accent));
}

.vis-shopworld__icon .vis-icon {
	inline-size: var(--vis-space-6);
	block-size: var(--vis-space-6);
}

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

.vis-shopworld__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-shopworld__title {
	font-size: var(--vis-fs-h4);
	font-weight: var(--vis-fw-bold);
	letter-spacing: var(--vis-ls-heading);
	line-height: var(--vis-lh-heading);
}

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

.vis-shopworld__foot {
	margin-block-start: auto;
	padding-block-start: var(--vis-space-6);
}

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

	color: var(--vis-text);
	font-size: var(--vis-fs-caption);
	font-weight: var(--vis-fw-medium);
}

.vis-shopworld__more .vis-icon {
	inline-size: var(--vis-space-4);
	block-size: var(--vis-space-4);
	transition: transform var(--vis-duration-ui) var(--vis-ease-out);
}

.vis-shopworld:not(.is-pending):hover .vis-shopworld__more .vis-icon { transform: translateX(var(--vis-nudge)); }

.vis-shopworld.is-pending { cursor: default; }
.vis-shopworld.is-pending .vis-shopworld__more { color: var(--vis-text-3); }

/* ── Vereinsshop-CTA ─────────────────────────────────────────────────────
   Ein dunkles Band unter den vier Kacheln — der einzige Ort in diesem
   Abschnitt, an dem VISARO selbst etwas anbietet statt einzuladen. */

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

	margin-block-start: var(--vis-space-8);
	padding: var(--vis-space-10);

	--vis-cut-size: var(--vis-cut);
	background: var(--vis-ink-950);
}

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

.vis-shops__cta-title {
	display: flex;
	align-items: center;
	gap: var(--vis-space-3);
	margin: 0;

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

.vis-shops__cta-lead {
	margin: var(--vis-space-3) 0 0;
	max-inline-size: 56ch;
	color: var(--vis-ink-300);
	font-size: var(--vis-fs-body-s);
}

/* ══════════════════════════════════════════════════════════════════════════
   9 — ÜBER VISARO

   Ein Teaser, keine Über-uns-Seite. Links der Gedanke, rechts das Motiv,
   dazwischen drei Jahreszahlen — die Jahreszahlen sind der Beleg für das,
   was die Überschrift behauptet („gezeigt, nicht behauptet").

   Dunkel, weil der Abschnitt nach den hellen Shopwelten wieder Ruhe
   herstellt, bevor Team und Abschluss folgen.
   ══════════════════════════════════════════════════════════════════════════ */

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

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

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

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

/* ── Zeitleiste ──────────────────────────────────────────────────────────
   Drei Marken, keine Chronik. Die Haarlinie über jeder Marke ist die
   Zeitachse selbst — dafür braucht es keine gezeichnete Linie. */

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

.vis-story__mark {
	display: grid;
	gap: var(--vis-space-1);

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

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

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

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

.vis-story__action {
	margin: var(--vis-space-10) 0 0;
}

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

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

/* ── Motiv ───────────────────────────────────────────────────────────────
   Hochkant neben dem Text. Ab 1024 rückt es eine Zeile nach unten, damit
   Überschrift und Bildkante nicht auf derselben Linie beginnen — sonst
   liest sich die Spalte wie ein Formular. */

.vis-story__media {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0;

	aspect-ratio: var(--vis-story-ratio);
	background: var(--vis-ink-900);

}

@media (min-width: 1024px) {
	.vis-story__media { margin-block-start: var(--vis-space-12); }
}

.vis-story__image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.vis-story__placeholder {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--vis-space-2);

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

	color: var(--vis-ink-300);
}

.vis-story__placeholder-motif {
	max-inline-size: 30ch;
	font-size: var(--vis-fs-body-s);
	line-height: var(--vis-lh-snug);
}

.vis-story__placeholder-id {
	color: var(--vis-purple-400);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	letter-spacing: var(--vis-ls-label);
}

/* ══════════════════════════════════════════════════════════════════════════
   10 — TEAM

   Kein Teamverzeichnis: eine Aussage, ein Motiv, ein Weg weiter.

   Zwei Zustände, die sich von selbst umschalten. Ohne gepflegte Personen
   steht hier ein gemeinsames Motiv; sobald die erste Person angelegt ist,
   wird daraus die Porträtreihe. Beide Zustände teilen sich Kopf und
   Abstände — es wechselt nur, was darunter steht.
   ══════════════════════════════════════════════════════════════════════════ */

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

.vis-team__aside {
	display: grid;
	gap: var(--vis-space-6);
	justify-items: start;
}

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

	color: var(--vis-text);
	font-size: var(--vis-fs-body-s);
	font-weight: var(--vis-fw-medium);
	text-decoration: none;

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

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

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

.vis-team__link[aria-disabled="true"] {
	color: var(--vis-text-3);
	cursor: default;
}

/* ── Porträts ────────────────────────────────────────────────────────────
   Gleiche Kachel für alle. Wer im Backend zuerst steht, wird dadurch
   nicht größer — die Reihenfolge ordnet, sie gewichtet nicht. */

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

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

/* repeat() verlangt eine ganze Zahl — min() ist dort nicht erlaubt.
   Deshalb dieselbe Schreibweise wie im Projektraster: eine Regel je
   Anzahl, gelesen aus dem Inline-Wert. */
@media (min-width: 1024px) {
	.vis-team__people {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--vis-space-8);
	}

	.vis-team__people[style*="--vis-people: 2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vis-team__people[style*="--vis-people: 3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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

.vis-team__portrait {
	margin: 0 0 var(--vis-space-2);
	overflow: hidden;

	aspect-ratio: var(--vis-team-portrait);
	background: var(--vis-ink-950);
}

.vis-team__group {
	margin: 0;
	overflow: hidden;

	aspect-ratio: var(--vis-team-group-ratio);
	background: var(--vis-ink-950);
}

.vis-team__image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.vis-team__placeholder {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--vis-space-2);

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

	color: var(--vis-ink-300);
}

.vis-team__placeholder-motif {
	max-inline-size: 34ch;
	font-size: var(--vis-fs-body-s);
	line-height: var(--vis-lh-snug);
}

.vis-team__placeholder-id {
	color: var(--vis-purple-400);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	letter-spacing: var(--vis-ls-label);
}

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

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

.vis-team__contact {
	margin: 0;
	color: var(--vis-text-3);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	letter-spacing: var(--vis-ls-label);
}

/* ══════════════════════════════════════════════════════════════════════════
   11 — ABSCHLUSS

   Der letzte Abschnitt vor dem Footer. Er wiederholt den Hero nicht,
   sondern zieht die Konsequenz.

   Papierton statt Schwarz: Der Footer ist dunkel — ein dunkler Abschluss
   davor würde mit ihm zu einem einzigen schweren Block verschmelzen. Die
   harte Kante Papier → Schwarz macht den Abschluss sichtbarer, als eine
   zweite dunkle Fläche es könnte. Und er bleibt damit ruhiger als der
   Hero, so wie er soll.
   ══════════════════════════════════════════════════════════════════════════ */

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

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

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

/* Die 60°-Marke steht vor der Überschrift statt einer großen Fläche
   dahinter: ein Zeichen genügt, ein zweiter Hero wäre zu viel. */
.vis-closing__headline {
	display: flex;
	align-items: baseline;
	gap: var(--vis-space-4);

	margin: var(--vis-space-4) 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-closing__text {
	margin: var(--vis-space-5) 0 0;
	max-inline-size: 52ch;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-l);
}

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

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

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

/* Der zweite Weg ist ein Textlink, kein zweiter Button: zwei gleich große
   Schaltflächen nebeneinander machen aus einer Entscheidung eine Wahl. */
.vis-closing__alt {
	display: inline-flex;
	align-items: center;
	gap: var(--vis-space-2);

	color: var(--vis-text);
	font-size: var(--vis-fs-body-s);
	font-weight: var(--vis-fw-medium);
	text-decoration: none;

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

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

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

.vis-closing__alt[aria-disabled="true"] {
	color: var(--vis-text-3);
	cursor: default;
}

/* ══════════════════════════════════════════════════════════════════════════
   REDUZIERTE BEWEGUNG — die neuen Abschnitte
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.vis-production__image {
		transform: none;
		transition: none;
	}

	.vis-shopworld__accent { transition: none; }

	.vis-team__link,
	.vis-closing__alt {
		transition: color var(--vis-duration-ui) var(--vis-ease-out);
	}

	.vis-team__link:hover,
	.vis-team__link:focus-visible,
	.vis-closing__alt:hover,
	.vis-closing__alt:focus-visible {
		transform: none;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   VOM ENTWURF AN DIE SCHEIBE — SVG-Animation im Produktionsabschnitt
   (07.10.2026)

   Erklärt eine echte Leistung in vier Schritten: Vektordatei → Plotten →
   Entgittern → Montage. Läuft einmal, wenn der Abschnitt ins Bild kommt,
   und bleibt dann ruhig stehen. Ohne Klasse ist das Endbild zu sehen —
   so bleibt es ohne JavaScript und bei reduzierter Bewegung.

   Bewegt werden nur transform, opacity, fill und stroke-dashoffset.
   ══════════════════════════════════════════════════════════════════════════ */

.vis-plot {
	margin: 0;
	padding: var(--vis-space-5);
	border: var(--vis-border-width) solid var(--vis-border-strong);
	border-radius: var(--vis-radius-md);
	background: var(--vis-white);
}

.vis-plot__svg {
	display: block;
	inline-size: 100%;
	block-size: auto;
	overflow: visible;
}

/* Szene */
.vis-plot__frame  { fill: var(--vis-ink-950); }
.vis-plot__glass  { fill: var(--vis-purple-50); }
.vis-plot__shine  { fill: none; stroke: var(--vis-white); stroke-width: 6; stroke-linecap: round; opacity: 0.8; }
.vis-plot__sill   { fill: var(--vis-ink-300); }
.vis-plot__liner  { fill: var(--vis-white); stroke: var(--vis-ink-300); stroke-width: 1.5; stroke-dasharray: 6 5; }
.vis-plot__waste  { fill: var(--vis-purple-100); opacity: 0; transform-box: view-box; transform-origin: 36px 56px; }
.vis-plot__rail-bar { fill: var(--vis-ink-300); }
.vis-plot__head rect { fill: var(--vis-ink-950); }
.vis-plot__head path { stroke: var(--vis-purple-500); stroke-width: 3; stroke-linecap: round; }
.vis-plot__head { transform-box: view-box; }

/* Zeichen — Endbild: am Fenster, in Markenfarben */
.vis-plot__mark {
	transform-box: view-box;
	transform-origin: 0 0;
	transform: translate(408px, 93px) scale(0.56);
}

.vis-plot__fill--dark   { fill: var(--vis-ink-950); }
.vis-plot__fill--purple { fill: var(--vis-purple-500); }

.vis-plot__vector {
	fill: none;
	stroke: var(--vis-purple-600);
	stroke-width: 2.5;
	stroke-dasharray: 9 7;
	opacity: 0;
}

.vis-plot__nodes rect {
	fill: var(--vis-white);
	stroke: var(--vis-purple-600);
	stroke-width: 2;
}

.vis-plot__nodes { opacity: 0; }

.vis-plot__cut {
	fill: none;
	stroke: var(--vis-ink-950);
	stroke-width: 3;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	opacity: 0;
}

/* Ausgangslage, solange der Abschnitt noch nicht im Bild ist */
.vis-plot.is-ready .vis-plot__mark   { transform: translate(58px, 70px) scale(0.76); }
.vis-plot.is-ready .vis-plot__waste  { opacity: 1; }
.vis-plot.is-ready .vis-plot__fill   { fill: var(--vis-purple-100); }
.vis-plot.is-ready .vis-plot__cut    { opacity: 1; stroke-dashoffset: 1; }

/* Ablauf: 4,6 s, jeder Prozentpunkt rund 46 ms */
.vis-plot.is-playing .vis-plot__mark,
.vis-plot.is-playing .vis-plot__waste,
.vis-plot.is-playing .vis-plot__fill--dark,
.vis-plot.is-playing .vis-plot__fill--purple,
.vis-plot.is-playing .vis-plot__vector,
.vis-plot.is-playing .vis-plot__nodes,
.vis-plot.is-playing .vis-plot__cut,
.vis-plot.is-playing .vis-plot__head {
	animation-duration: 4600ms;
	animation-fill-mode: both;
	animation-timing-function: linear;
}

.vis-plot.is-playing .vis-plot__mark         { animation-name: vis-plot-mark; }
.vis-plot.is-playing .vis-plot__waste        { animation-name: vis-plot-waste; }
.vis-plot.is-playing .vis-plot__fill--dark   { animation-name: vis-plot-fill-dark; }
.vis-plot.is-playing .vis-plot__fill--purple { animation-name: vis-plot-fill-purple; }
.vis-plot.is-playing .vis-plot__vector       { animation-name: vis-plot-vector; }
.vis-plot.is-playing .vis-plot__nodes        { animation-name: vis-plot-nodes; }
.vis-plot.is-playing .vis-plot__cut          { animation-name: vis-plot-cut; }
.vis-plot.is-playing .vis-plot__head         { animation-name: vis-plot-head; }

@keyframes vis-plot-vector {
	0%   { opacity: 0; }
	12%  { opacity: 1; }
	74%  { opacity: 1; }
	80%, 100% { opacity: 0; }
}

@keyframes vis-plot-nodes {
	0%   { opacity: 0; }
	10%  { opacity: 1; }
	20%  { opacity: 1; }
	27%, 100% { opacity: 0; }
}

@keyframes vis-plot-cut {
	0%, 17% { stroke-dashoffset: 1; opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
	57%  { stroke-dashoffset: 0; opacity: 1; }
	74%  { stroke-dashoffset: 0; opacity: 1; }
	80%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes vis-plot-head {
	0%, 17%  { transform: translateX(0); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
	57%      { transform: translateX(250px); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
	70%, 100% { transform: translateX(0); }
}

@keyframes vis-plot-waste {
	0%, 59% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(0.4, 0, 1, 1); }
	72%, 100% { opacity: 0; transform: translate(-24px, -36px) rotate(-6deg); }
}

@keyframes vis-plot-fill-dark {
	0%, 65% { fill: var(--vis-purple-100); }
	74%, 100% { fill: var(--vis-ink-950); }
}

@keyframes vis-plot-fill-purple {
	0%, 65% { fill: var(--vis-purple-100); }
	74%, 100% { fill: var(--vis-purple-500); }
}

@keyframes vis-plot-mark {
	0%, 76% { transform: translate(58px, 70px) scale(0.76); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
	98%, 100% { transform: translate(408px, 93px) scale(0.56); }
}

.vis-plot__caption {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vis-space-2) var(--vis-space-4);
	margin-block-start: var(--vis-space-4);
	color: var(--vis-text-2);
	font-size: var(--vis-fs-caption);
}

.vis-plot__replay {
	display: inline-flex;
	align-items: center;
	gap: var(--vis-space-2);
	min-block-size: 40px;
	padding-inline: var(--vis-space-3);
	border: var(--vis-border-width) solid var(--vis-border-strong);
	border-radius: var(--vis-radius-full);
	background: transparent;
	color: var(--vis-text);
	font: inherit;
	font-weight: var(--vis-fw-medium);
	cursor: pointer;
	transition:
		border-color var(--vis-duration-micro) var(--vis-ease-out),
		transform var(--vis-duration-micro) var(--vis-ease-out);
}

.vis-plot__replay .vis-icon { inline-size: var(--vis-space-4); block-size: var(--vis-space-4); }
.vis-plot__replay:hover { border-color: var(--vis-accent); }
.vis-plot__replay:active { transform: scale(0.97); }
.vis-plot__replay:focus-visible { outline: var(--vis-focus-width) solid var(--vis-accent); outline-offset: var(--vis-focus-offset); }

/* Der aktuelle Schritt der Strecke darunter steht vorn, die anderen
   treten zurück — nur während des Ablaufs. */
[data-visaro-plot-steps].is-following .vis-plot__step {
	opacity: 0.45;
	transition: opacity var(--vis-duration-ui) var(--vis-ease-out);
}

[data-visaro-plot-steps].is-following .vis-plot__step.is-current { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.vis-plot.is-playing * { animation: none !important; }
}

/* Zwei Spalten mit ungerader Zahl: Das letzte Bild nimmt die volle
   Breite, statt allein in seiner Zeile zu stehen. */
@media (max-width: 767.98px) {
	.vis-production__strip > .vis-production__tile:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		aspect-ratio: 16 / 9;
	}
}

/* Legende der Animation: die vier Schritte der Produktionsstrecke. */
.vis-plot__steps {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--vis-space-4) var(--vis-space-5);
	margin: var(--vis-space-5) 0 0;
	padding: var(--vis-space-5) 0 0;
	border-block-start: var(--vis-border-width) solid var(--vis-border);
	list-style: none;
}

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

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



.vis-plot__step {
	display: grid;
	gap: var(--vis-space-1);
	align-content: start;
	padding-block-start: var(--vis-space-2);
	border-block-start: var(--vis-border-width-strong) solid transparent;
	transition: border-color var(--vis-duration-ui) var(--vis-ease-out), opacity var(--vis-duration-ui) var(--vis-ease-out);
}

.vis-plot__step.is-current { border-block-start-color: var(--vis-accent); }

.vis-plot__step-label {
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	font-weight: var(--vis-fw-medium);
	letter-spacing: var(--vis-ls-label);
	text-transform: uppercase;
}

.vis-plot__step-num { color: var(--vis-accent-text); }

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


/* ══════════════════════════════════════════════════════════════════════════
   3 — LEISTUNGEN: BÜHNE MIT KARTEN (07.10.2026)

   Grundzustand (ohne JavaScript, Handy, Tablet): eine wischbare Reihe
   großer Karten mit Bild, Titel, einem Satz und Link.

   `.is-staged` (Desktop, home.js): Jede Karte liegt über der ganzen Bühne;
   sichtbar ist nur ihr Ausschnitt (`--clip`). Die aktive Karte hat den
   vollen Ausschnitt, die anderen stehen als Karten rechts unten. Beim
   Wechsel wächst der Ausschnitt der gewählten Karte auf die ganze Fläche,
   ihr Bild skaliert gleichmäßig mit (`--img`) — kein Verzerren, keine
   Layout-Neuberechnung, nur clip-path und transform.
   ══════════════════════════════════════════════════════════════════════════ */

.vis-svc {
	--vis-svc-dur: var(--vis-duration-cinematic);
	/* Inhaltskante: dieselbe Linie wie Überschrift und Container darüber. */
	--vis-svc-edge: max(var(--vis-gutter), calc((100vw - var(--vis-container-wide)) / 2 + var(--vis-gutter)));
	padding-block: var(--vis-section-m) var(--vis-section-l);
	background: var(--vis-ink-950);
	color: var(--vis-white);
	overflow: hidden;
}

.vis-svc__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--vis-space-6);
	margin-block-end: var(--vis-space-10);
}

.vis-svc .vis-label { color: var(--vis-ink-300); }
.vis-svc__headline { color: var(--vis-white); }

/* Steuerung */
.vis-svc__controls {
	display: flex;
	align-items: center;
	gap: var(--vis-space-3);
}

.vis-svc__count {
	margin: 0 var(--vis-space-2) 0 0;
	color: var(--vis-ink-300);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--vis-ls-label);
}

.vis-svc__count span { color: var(--vis-white); }

.vis-svc__progress {
	position: relative;
	display: none;
	inline-size: 120px;
	block-size: 2px;
	margin-inline-end: var(--vis-space-3);
	background: var(--vis-ink-700);
	overflow: hidden;
}

.vis-svc__progress span {
	position: absolute;
	inset: 0;
	background: var(--vis-purple-500);
	transform: scaleX(0);
	transform-origin: left center;
}

.vis-svc.is-staged .vis-svc__progress { display: block; }
.vis-svc.is-running .vis-svc__progress span { animation: vis-svc-progress var(--vis-svc-interval, 6500ms) linear forwards; }
.vis-svc.is-held .vis-svc__progress span { animation-play-state: paused; }

@keyframes vis-svc-progress { to { transform: scaleX(1); } }

.vis-svc__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: var(--vis-border-width) solid var(--vis-ink-600);
	border-radius: var(--vis-radius-full);
	background: transparent;
	color: 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),
		transform var(--vis-duration-micro) var(--vis-ease-out);
}

.vis-svc__btn .vis-icon { inline-size: 18px; block-size: 18px; }
.vis-svc__btn:hover { border-color: var(--vis-purple-400); background: var(--vis-ink-900); }
.vis-svc__btn:active { transform: scale(0.95); }
.vis-svc__btn:focus-visible { outline: var(--vis-focus-width) solid var(--vis-purple-400); outline-offset: var(--vis-focus-offset); }
.vis-svc__btn:disabled { opacity: 0.35; cursor: default; }

/* Pause/Abspielen als reine Formen. */
.vis-svc__pause-icon {
	box-sizing: border-box;
	inline-size: 12px;
	block-size: 14px;
	border-inline: 4px solid currentColor;
}

.vis-svc__btn[aria-pressed="true"] .vis-svc__pause-icon {
	inline-size: 0;
	block-size: 0;
	border-inline: 0;
	border-block: 7px solid transparent;
	border-inline-start: 12px solid currentColor;
	margin-inline-start: 3px;
}

.vis-svc__btn[hidden] { display: none; }

/* ── Grundzustand: wischbare Reihe ────────────────────────────────────── */

.vis-svc .vis-svc__list {
	display: flex;
	gap: var(--vis-space-5);
	margin: 0;
	padding: 0 var(--vis-svc-edge) var(--vis-space-2);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--vis-svc-edge);
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.vis-svc__list::-webkit-scrollbar { display: none; }

.vis-svc__item {
	flex: 0 0 min(82%, 420px);
	display: grid;
	gap: var(--vis-space-5);
	align-content: start;
	scroll-snap-align: start;
}

.vis-svc__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--vis-radius-md);
	background: var(--vis-ink-900);
}

.vis-svc__image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.vis-svc__body {
	display: grid;
	gap: var(--vis-space-3);
	justify-items: start;
}

.vis-svc__num {
	color: var(--vis-purple-400);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	letter-spacing: var(--vis-ls-label);
}

.vis-svc__title {
	margin: 0;
	color: var(--vis-white);
	font-size: var(--vis-fs-h3);
	font-weight: var(--vis-fw-bold);
	letter-spacing: var(--vis-ls-heading);
	line-height: var(--vis-lh-heading);
}

.vis-svc__text {
	margin: 0;
	max-inline-size: 42ch;
	color: var(--vis-ink-300);
	font-size: var(--vis-fs-body-s);
	line-height: var(--vis-lh-body);
}

.vis-svc__link { margin-block-start: var(--vis-space-2); }

/* ── Bühne (Desktop) ──────────────────────────────────────────────────── */

.vis-svc.is-staged .vis-svc__list {
	position: relative;
	display: block;
	inline-size: 100%;
	block-size: clamp(520px, 74vh, 720px);
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: 0;
	background: var(--vis-ink-900);
	scroll-snap-type: none;
}

.vis-svc.is-staged .vis-svc__item {
	position: absolute;
	inset: 0;
	display: block;
	clip-path: var(--clip, inset(0px 0px 0px 0px round 0px));
	z-index: var(--z, 1);
	transition: clip-path var(--vis-svc-dur) var(--vis-ease-out);
}

.vis-svc.is-staged .vis-svc__media {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	border-radius: 0;
}

.vis-svc.is-staged .vis-svc__image {
	transform-origin: 0 0;
	transform: var(--img, none);
	transition:
		transform var(--vis-svc-dur) var(--vis-ease-out),
		filter var(--vis-duration-ui) var(--vis-ease-out);
}

/* Lesbarkeit: links ein Verlauf für den Text der aktiven Karte, unten
   einer für die Beschriftung der kleinen Karten. */
.vis-svc.is-staged .vis-svc__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(23, 33, 58, 0.92) 0%, rgba(23, 33, 58, 0.6) 34%, rgba(23, 33, 58, 0) 62%),
		linear-gradient(0deg, rgba(23, 33, 58, 0.78) 0%, rgba(23, 33, 58, 0) 40%);
}

.vis-svc.is-staged .vis-svc__body {
	position: absolute;
	/* Text an der Inhaltskante, Breite und Höhe so, dass er die Karten nie
	   berührt — beides rechnet home.js aus der Bühnengröße. */
	inset-inline-start: var(--svc-edge, 48px);
	inset-block-start: var(--svc-text-top, 50%);
	max-inline-size: var(--svc-text-w, 38%);
	transform: translateY(-50%);
	gap: var(--vis-space-4);
}

.vis-svc.is-staged .vis-svc__title {
	font-size: var(--vis-fs-display-l);
	line-height: var(--vis-lh-display);
	letter-spacing: var(--vis-ls-display);
	text-wrap: balance;
}

.vis-svc.is-staged .vis-svc__text { color: var(--vis-ink-200); font-size: var(--vis-fs-body); }

.vis-svc.is-staged .vis-svc__item:not(.is-active) .vis-svc__body {
	visibility: hidden;
	opacity: 0;
}

/* Der Text der neuen Karte folgt, wenn ihr Bild fast steht. */
.vis-svc.is-staged.is-moving .vis-svc__item.is-active .vis-svc__body > * {
	animation: vis-svc-text var(--vis-duration-content) var(--vis-ease-out) both;
	animation-delay: calc(var(--vis-svc-dur) * 0.45 + var(--d, 0ms));
}

.vis-svc.is-staged .vis-svc__item.is-active .vis-svc__title { --d: 60ms; }
.vis-svc.is-staged .vis-svc__item.is-active .vis-svc__text  { --d: 120ms; }
.vis-svc.is-staged .vis-svc__item.is-active .vis-svc__link  { --d: 180ms; }

@keyframes vis-svc-text {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

/* Auswahlknopf genau über der Karte. */
.vis-svc__pick { display: none; }

.vis-svc.is-staged .vis-svc__pick {
	position: absolute;
	inset-inline-start: var(--card-x);
	inset-block-start: var(--card-y);
	inline-size: var(--card-w);
	block-size: var(--card-h);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 2px;
	padding: var(--vis-space-3);
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--vis-white);
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.vis-svc.is-staged .vis-svc__item.is-active .vis-svc__pick { display: none; }

.vis-svc__pick-num {
	color: var(--vis-purple-200);
	font-family: var(--vis-font-mono);
	font-size: 11px;
	letter-spacing: var(--vis-ls-label);
}

.vis-svc__pick-title {
	font-size: var(--vis-fs-caption);
	font-weight: var(--vis-fw-bold);
	line-height: 1.25;
}

.vis-svc.is-staged .vis-svc__pick:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-purple-400);
	outline-offset: -3px;
}

@media (hover: hover) and (pointer: fine) {
	.vis-svc.is-staged .vis-svc__item:not(.is-active):has(.vis-svc__pick:hover) .vis-svc__image { filter: brightness(1.15); }
}

.vis-svc.is-staged .vis-svc__item:not(.is-active):has(.vis-svc__pick:focus-visible) .vis-svc__image { filter: brightness(1.15); }

@media (prefers-reduced-motion: reduce) {
	.vis-svc { --vis-svc-dur: 1ms; }
	.vis-svc.is-staged.is-moving .vis-svc__item.is-active .vis-svc__body > * { animation: none; }
	.vis-svc.is-running .vis-svc__progress span { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   4 — PROJEKTGALERIE (07.10.2026)
   Große Bilder, wenig drumherum. Die Reihe beginnt an der Inhaltskante und
   läuft über den rechten Rand — das angeschnittene Bild ist der Hinweis
   aufs Weiterschieben. Seitliches Scrollen nativ (Wischen, Trackpad,
   Pfeiltasten im Fokus), Ziehen mit der Maus und Pfeile kommen aus home.js.
   ══════════════════════════════════════════════════════════════════════════ */

.vis-gallery {
	--vis-gallery-edge: max(var(--vis-gutter), calc((100vw - var(--vis-container-wide)) / 2 + var(--vis-gutter)));
	padding-block: var(--vis-section-m) var(--vis-section-l);
	background: var(--vis-white);
	overflow: hidden;
}

.vis-gallery__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--vis-space-6);
	max-width: var(--vis-container-wide);
	margin: 0 auto var(--vis-space-8);
	padding-inline: var(--vis-gutter);
}

.vis-gallery__headline {
	margin: var(--vis-space-5) 0 0;
	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-gallery__note {
	max-width: var(--vis-container-wide);
	margin: calc(var(--vis-space-4) * -1) auto var(--vis-space-6);
	padding-inline: var(--vis-gutter);
	color: var(--vis-text-2);
	font-size: var(--vis-fs-caption);
}

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

.vis-gallery__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 48px;
	block-size: 48px;
	padding: 0;
	border: var(--vis-border-width) solid var(--vis-border-strong);
	border-radius: var(--vis-radius-full);
	background: var(--vis-white);
	color: var(--vis-text);
	cursor: pointer;
	transition:
		border-color var(--vis-duration-micro) var(--vis-ease-out),
		opacity var(--vis-duration-micro) var(--vis-ease-out),
		transform var(--vis-duration-micro) var(--vis-ease-out);
}

.vis-gallery__btn .vis-icon { inline-size: 20px; block-size: 20px; }
.vis-gallery__btn:hover:not(:disabled) { border-color: var(--vis-ink-950); }
.vis-gallery__btn:active:not(:disabled) { transform: scale(0.95); }
.vis-gallery__btn:disabled { opacity: 0.35; cursor: default; }
.vis-gallery__btn:focus-visible { outline: var(--vis-focus-width) solid var(--vis-accent); outline-offset: var(--vis-focus-offset); }

/* Abschnitt davor: ul[class] in base.css wiegt sonst mehr und setzt den Innenabstand auf 0. */
.vis-gallery .vis-gallery__track {
	display: flex;
	gap: clamp(16px, 2vw, 32px);
	margin: 0;
	padding: 0 var(--vis-gutter) var(--vis-space-2) var(--vis-gallery-edge);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-padding-inline-start: var(--vis-gallery-edge);
	scrollbar-width: none;
	cursor: grab;
}

.vis-gallery__track::-webkit-scrollbar { display: none; }
.vis-gallery__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.vis-gallery__track:focus-visible { outline: var(--vis-focus-width) solid var(--vis-accent); outline-offset: 4px; }

.vis-gallery__item {
	flex: 0 0 clamp(260px, 32vw, 520px);
	scroll-snap-align: start;
}

@media (max-width: 767.98px) {
	.vis-gallery__item { flex-basis: 78vw; }
}

.vis-gallery__card {
	display: grid;
	gap: var(--vis-space-4);
	color: inherit;
	text-decoration: none;
}

.vis-gallery__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--vis-radius-sm);
	background: var(--vis-bg-surface);
}

.vis-gallery__image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	-webkit-user-drag: none;
	transition: transform var(--vis-duration-cinematic) var(--vis-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	a.vis-gallery__card:hover .vis-gallery__image { transform: scale(1.03); }
}

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

.vis-gallery__badge {
	position: absolute;
	inset-block-start: var(--vis-space-3);
	inset-inline-start: var(--vis-space-3);
	padding: 4px 8px;
	border-radius: var(--vis-radius-xs);
	background: rgba(23, 33, 58, 0.78);
	color: var(--vis-white);
	font-family: var(--vis-font-mono);
	font-size: 11px;
	letter-spacing: var(--vis-ls-label);
	text-transform: uppercase;
}

.vis-gallery__caption { display: grid; gap: 2px; }

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

.vis-gallery__kind {
	color: var(--vis-text-2);
	font-size: var(--vis-fs-caption);
}

@media (prefers-reduced-motion: reduce) {
	.vis-gallery__image { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   VOM ENTWURF AN DIE SCHEIBE — eigener weißer Abschnitt (07.10.2026)
   ══════════════════════════════════════════════════════════════════════════ */

.vis-plotsec {
	padding-block: var(--vis-section-m) var(--vis-section-l);
	background: var(--vis-white);
	border-block-start: var(--vis-border-width) solid var(--vis-border);
}

.vis-plotsec__inner {
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: var(--vis-gutter);
}

.vis-plotsec__head {
	display: grid;
	gap: var(--vis-space-3);
	justify-items: center;
	margin-block-end: var(--vis-space-10);
	text-align: center;
}

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

/* Die Animation selbst: groß, ohne Kartenrahmen. */
.vis-plotsec .vis-plot {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.vis-plotsec .vis-plot__svg {
	max-inline-size: 960px;
	margin-inline: auto;
}

.vis-plotsec .vis-plot__steps {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--vis-space-6);
	margin-block-start: var(--vis-space-10);
	padding-block-start: 0;
	border: 0;
}

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

.vis-plotsec .vis-plot__step {
	padding-block-start: var(--vis-space-4);
	border-block-start: var(--vis-border-width-strong) solid var(--vis-border);
}

.vis-plotsec .vis-plot__step.is-current { border-block-start-color: var(--vis-accent); }
.vis-plotsec .vis-plot__step-text { font-size: var(--vis-fs-body-s); }

.vis-plotsec .vis-plot__caption { justify-content: center; margin-block-start: var(--vis-space-6); }

/* ══════════════════════════════════════════════════════════════════════════
   PRODUKTION — kompakt (07.10.2026)
   ══════════════════════════════════════════════════════════════════════════ */

.vis-production--compact { padding-block: var(--vis-section-m); }

.vis-production--compact .vis-production__main {
	display: grid;
	gap: var(--vis-space-8);
	align-items: center;
}

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

.vis-production--compact .vis-production__lead {
	aspect-ratio: 3 / 2;
	min-block-size: 0;
	border-radius: var(--vis-radius-sm);
}

.vis-production--compact .vis-production__side { gap: var(--vis-space-4); }

.vis-production--compact .vis-production__headline {
	margin: 0;
	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-production--compact .vis-production__intro {
	margin: 0;
	max-inline-size: 52ch;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body);
}

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

.vis-production__group {
	display: grid;
	grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
	gap: var(--vis-space-4);
	padding-block-start: var(--vis-space-3);
	border-block-start: var(--vis-border-width) solid var(--vis-border-strong);
}

@media (max-width: 479.98px) {
	.vis-production__group { grid-template-columns: 1fr; gap: var(--vis-space-1); }
}

.vis-production__group dt {
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	font-weight: var(--vis-fw-medium);
	letter-spacing: var(--vis-ls-label);
	text-transform: uppercase;
}

.vis-production__group dd {
	margin: 0;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-s);
}

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

.vis-production__partner-line strong { color: var(--vis-text); }

.vis-production--compact .vis-production__strip {
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--vis-space-3);
	margin-block-start: var(--vis-space-8);
}

.vis-production--compact .vis-production__tile {
	aspect-ratio: 4 / 3;
	border-radius: var(--vis-radius-xs);
}

@media (max-width: 767.98px) {
	/* Festes Raster statt Scrollreihe: braucht keine Tastaturbedienung. */
	.vis-production--compact .vis-production__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vis-space-2); }
	.vis-production--compact .vis-production__strip > .vis-production__tile:last-child:nth-child(odd) { grid-column: auto; aspect-ratio: 4 / 3; }
}

/* Handy: Querformat, damit Bild, Titel und Link auf einen Bildschirm passen. */
@media (max-width: 1023.98px) {
	.vis-svc__media { aspect-ratio: 4 / 3; }
}

/* Ruhende Hintergrundebene: hält das bisherige Bild, während die neue Karte
   aufgeht. Dadurch kann die alte Karte sofort an ihren Platz in der Reihe
   zurück, statt unter der neuen zu verschwinden (07.10.2026). */
.vis-svc__backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	overflow: hidden;
	pointer-events: none;
}

.vis-svc__backdrop img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.vis-svc__backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(23, 33, 58, 0.92) 0%, rgba(23, 33, 58, 0.6) 34%, rgba(23, 33, 58, 0) 62%),
		linear-gradient(0deg, rgba(23, 33, 58, 0.78) 0%, rgba(23, 33, 58, 0) 40%);
}

/* Sofortzustand ohne Übergang: Sprung an den Startplatz, Abschluss bei
   schneller Folge von Eingaben. */
.vis-svc.is-staged .vis-svc__item.is-jump,
.vis-svc.is-staged .vis-svc__item.is-jump .vis-svc__image,
.vis-svc.is-snap .vis-svc__item,
.vis-svc.is-snap .vis-svc__image,
.vis-svc.is-snap .vis-svc__body > * {
	transition: none !important;
	animation: none !important;
}

.vis-svc:not(.is-staged) .vis-svc__backdrop { display: none; }

/* ══ Leistungen: ein zusammenhängender Bereich (07.10.2026) ════════════
   Das aktive Bild läuft hinter dem ganzen Abschnitt durch — Überschrift
   und Steuerung liegen oben auf derselben Fläche. Navy-Verläufe oben,
   links hinter dem Text und unten; die Bildmitte bleibt frei. Die Höhe
   rechnet home.js: so hoch, dass Überschrift, Text und Karten unter die
   Navigation passen — und höher, wenn Schrift oder Inhalt es verlangen. */

.vis-svc.is-staged {
	position: relative;
	padding-block: 0;
}

.vis-svc.is-staged .vis-svc__inner {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	z-index: 4;
	padding-block-start: var(--svc-top, 40px);
	pointer-events: none;
}

.vis-svc.is-staged .vis-svc__head { margin: 0; align-items: flex-start; }
.vis-svc.is-staged .vis-svc__head > * { pointer-events: auto; }

.vis-svc.is-staged .vis-svc__headline {
	margin-block-start: var(--vis-space-3);
	font-size: var(--vis-fs-h1);
	line-height: var(--vis-lh-heading);
	max-inline-size: 20ch;
}

.vis-svc.is-staged .vis-svc__controls { margin-block-start: var(--vis-space-2); }

/* Text der aktiven Leistung links unten, auf Höhe der Karten. */
.vis-svc.is-staged .vis-svc__body {
	inset-block-start: auto;
	inset-block-end: var(--svc-bottom, 48px);
	transform: none;
}

/* Verläufe: oben für Überschrift und Steuerung, links für den Text, unten
   als Abschluss. Gleich für jedes Motiv und für die Hintergrundebene —
   so bleibt die Fläche auch während des Wechsels geschlossen. */
.vis-svc.is-staged .vis-svc__media::after,
.vis-svc__backdrop::after {
	background:
		linear-gradient(180deg, rgba(23, 33, 58, 0.9) 0%, rgba(23, 33, 58, 0.5) 16%, rgba(23, 33, 58, 0) 34%),
		linear-gradient(90deg, rgba(23, 33, 58, 0.86) 0%, rgba(23, 33, 58, 0.55) 28%, rgba(23, 33, 58, 0) 54%),
		linear-gradient(0deg, rgba(23, 33, 58, 0.92) 0%, rgba(23, 33, 58, 0.4) 16%, rgba(23, 33, 58, 0) 34%);
}

/* Schmale Karten (flache Notebooks): Beschriftung wächst mit der Karte,
   statt ein Wort zu trennen. */
.vis-svc.is-staged .vis-svc__pick { padding: var(--vis-space-2) var(--vis-space-3); }
.vis-svc.is-staged .vis-svc__pick-title {
	font-size: min(var(--vis-fs-caption), calc(var(--card-w, 160px) * 0.1));
	overflow-wrap: normal;
	word-break: normal;
}

/* ══ Leistungen: Auswahlzone (07.10.2026) ══════════════════════════════
   Die übrigen Leistungen liegen nicht mehr als kleine Karten im Bild,
   sondern auf einer eigenen, ruhigen Fläche am unteren Rand — über die
   ganze Inhaltsbreite, querformatig, mit lesbarer Beschriftung. Ebenen:
   Hintergrund 0 · Bühne 2 · Auswahlzone 3 · Karten 4 · Kopf 5. Die
   Zone ist halbdeckend: Eine Karte, die sich zur Bühne öffnet, bleibt
   darunter sichtbar und wird am Ende genau so abgedunkelt wie die Bühne. */

.vis-svc__image { object-position: var(--fm, 50% 50%); }
@media (min-width: 1024px) { .vis-svc__image { object-position: var(--fd, 50% 50%); } }

.vis-svc__dock { display: none; }

.vis-svc.is-staged .vis-svc__dock {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 3;
	display: block;
	block-size: var(--svc-dock-h, 200px);
	margin: 0;
	border-block-start: var(--vis-border-width) solid rgba(255, 255, 255, 0.12);
	background: rgba(17, 24, 44, 0.8);
	pointer-events: none;
}

.vis-svc.is-staged .vis-svc__inner { z-index: 5; }

.vis-svc.is-staged .vis-svc__headline { font-size: var(--vis-fs-h2); max-inline-size: none; }

/* Karten zeigen ihr Motiv ohne die Verläufe der Bühne; die kommen erst,
   wenn die Karte zur Bühne wird. */
.vis-svc.is-staged .vis-svc__media::after { transition: opacity var(--vis-svc-dur) var(--vis-ease-out); }
.vis-svc.is-staged .vis-svc__item:not(.is-active) .vis-svc__media::after { opacity: 0; }

.vis-svc.is-staged .vis-svc__pick {
	padding: var(--vis-space-3) var(--vis-space-4);
	background: linear-gradient(0deg, rgba(17, 24, 44, 0.88) 0%, rgba(17, 24, 44, 0.35) 48%, rgba(17, 24, 44, 0) 72%);
	box-shadow: inset 0 0 0 var(--vis-border-width) rgba(255, 255, 255, 0.22);
	transition: box-shadow var(--vis-duration-micro) var(--vis-ease-out);
}

.vis-svc.is-staged .vis-svc__pick-num { font-size: var(--vis-fs-label); }

.vis-svc.is-staged .vis-svc__pick-title {
	font-size: var(--vis-fs-body);
	line-height: var(--vis-lh-heading);
}

@media (hover: hover) and (pointer: fine) {
	.vis-svc.is-staged .vis-svc__pick:hover { box-shadow: inset 0 0 0 2px var(--vis-purple-400); }
}

.vis-svc.is-staged .vis-svc__pick:focus-visible { box-shadow: inset 0 0 0 2px var(--vis-purple-400); }