/* ══════════════════════════════════════════════════════════════════════════
   VISARO — Leistungen

   Übersicht und Leistungsseiten. Die Gewichtung ist sichtbar: Werbetechnik,
   Textil und Druck stehen groß, Grafik und Web mittel, Content ergänzend
   (CLAUDE.md, Leistungsgewichtung). Sie ergibt sich aus einer Klasse, die
   der Code vergibt — nicht aus einem Feld im Backend.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ 1 — Übersicht ═══════════════════════════════════════════════════════ */

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

/* Eine Liste, kein Kachelraster. Sechs gleich große Kacheln wären genau
   die Gleichmacherei, die die Leistungsgewichtung verbietet. */
.vis-servicerow {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--vis-space-5);
	align-items: start;

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

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

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

@media (min-width: 768px) {
	.vis-servicerow {
		gap: var(--vis-space-8);
		padding-block: var(--vis-space-10);
	}
}

.vis-servicerow__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--vis-space-4);
}

.vis-servicerow__index {
	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-servicerow__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-text-2);

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

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

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

.vis-servicerow__title {
	margin: 0;
	font-weight: var(--vis-fw-bold);
	letter-spacing: var(--vis-ls-heading);
	line-height: var(--vis-lh-heading);
}

.vis-servicerow__link {
	color: inherit;
	text-decoration: none;
}

.vis-servicerow__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.vis-servicerow__link:focus-visible { outline: none; }

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

/* ── Die Gewichtung ──────────────────────────────────────────────────────
   Drei Stufen, sichtbar an Schriftgröße und Textmenge. Werbetechnik,
   Textil und Druck bekommen zusammen deutlich mehr Fläche als Digital und
   Content zusammen — genau das verlangt die Leistungsgewichtung.        */

.vis-servicerow--lead .vis-servicerow__title   { font-size: var(--vis-fs-h1); }
.vis-servicerow--strong .vis-servicerow__title { font-size: var(--vis-fs-h2); }
.vis-servicerow--support .vis-servicerow__title { font-size: var(--vis-fs-h3); }

.vis-servicerow__claim {
	margin: 0;
	max-inline-size: 40ch;
	font-size: var(--vis-fs-body-l);
	font-weight: var(--vis-fw-medium);
}

.vis-servicerow--support .vis-servicerow__claim { display: none; }

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

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

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

.vis-servicerow--support .vis-servicerow__tags { display: none; }

.vis-servicerow__arrow {
	display: inline-flex;
	align-self: center;
	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-servicerow:hover .vis-servicerow__arrow,
.vis-servicerow:has(.vis-servicerow__link:focus-visible) .vis-servicerow__arrow {
	color: var(--vis-accent);
	transform: translateX(var(--vis-nudge));
}

.vis-servicerow:hover { border-color: var(--vis-border-strong); }

.vis-servicerow:hover .vis-servicerow__icon {
	background: var(--vis-ink-950);
	color: var(--vis-white);
}

/* ══ 2 — Entscheidungsweg ════════════════════════════════════════════════ */

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

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

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

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

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

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

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

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

.vis-decide__num {
	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-decide__title {
	margin: 0;
	font-size: var(--vis-fs-h3);
	font-weight: var(--vis-fw-bold);
	letter-spacing: var(--vis-ls-heading);
}

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

/* ══ 3 — Kopf der Leistungsseite ═════════════════════════════════════════ */

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

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

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

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

/* Bei 38 px auf dem Telefon passen rund fünfzehn Zeichen in eine Zeile.
   Ein Wort wie „Fahrzeugbeschriftung" würde sonst irgendwo hart
   umbrochen; so trennt der Browser nach Silben (lang="de"). */
@media (max-width: 639px) {
	.vis-servicehero__headline,
	.vis-serviceintents__headline,
	.vis-serviceadvice__headline { hyphens: auto; }
}

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

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

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

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

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

/* ══ 4 — Einstieg ════════════════════════════════════════════════════════

   Dieselbe Indexliste wie im Abschnitt „Was hast du vor?" der Startseite —
   nur ohne die Vorschau am Zeiger. Hier ist der Kunde schon im richtigen
   Bereich; es geht nur noch darum, sich einzuordnen.                     */

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

.vis-serviceintents__headline {
	margin: 0 0 var(--vis-section-s);
	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-serviceintents__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

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

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

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

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

.vis-serviceintents__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-serviceintents__label {
	font-size: var(--vis-fs-h3);
	font-weight: var(--vis-fw-bold);
	letter-spacing: var(--vis-ls-heading);
}

.vis-serviceintents__text {
	grid-column: 2 / -1;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-s);
}

@media (min-width: 768px) {
	.vis-serviceintents__text { grid-column: auto; }
}

/* ══ 5 — Leistungen ══════════════════════════════════════════════════════ */

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

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

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

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

.vis-servicearea {
	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-servicearea__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-servicearea__title {
	margin: 0;
	font-size: var(--vis-fs-h4);
	font-weight: var(--vis-fw-bold);
	letter-spacing: var(--vis-ls-heading);
}

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

/* ══ 6 — Beratung ════════════════════════════════════════════════════════ */

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

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

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

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

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

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

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

.vis-serviceadvice__point {
	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-serviceadvice__point-title {
	display: flex;
	align-items: baseline;
	gap: var(--vis-space-3);
	margin: 0;

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

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

/* ══ 7 — Produktion ══════════════════════════════════════════════════════ */

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

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

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

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

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

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

/* Der Partnerhinweis ist kein Kleingedrucktes: gleiche Schriftgröße wie
   der Fließtext, nur mit Marke davor. */
.vis-servicecraft__note {
	position: relative;
	margin: var(--vis-space-8) 0 0;
	max-inline-size: 68ch;
	padding-inline-start: var(--vis-space-6);

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

.vis-servicecraft__note::before {
	content: "";
	position: absolute;
	inset-block: var(--vis-space-1);
	inset-inline-start: 0;

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

.vis-servicecraft__specs {
	padding: var(--vis-space-6);
	background: var(--vis-white);
	border: var(--vis-border-width) solid var(--vis-border);
}

.vis-servicecraft__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);
	letter-spacing: var(--vis-ls-label);
	text-transform: uppercase;
}

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

.vis-servicecraft__specs-list li {
	padding-block: var(--vis-space-3);
	border-block-start: var(--vis-border-width) solid var(--vis-border);

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

.vis-servicecraft__specs-list li:first-child { border-block-start: 0; }

/* ══ 8 — Ablauf ══════════════════════════════════════════════════════════

   Die Schritte hängen an einer Linie mit 60°-Marken — dieselbe Geometrie
   wie im VISARO Prinzip auf der Startseite, nur waagrecht gedacht.       */

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

.vis-servicesteps__headline {
	margin: 0 0 var(--vis-section-s);
	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);
}

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

/* Alle Schritte in einer Reihe erst ab 1024. `auto-fit` mit 0 als
   Mindestbreite legt jeden Schritt in eine eigene Spalte — ab 768 hieß
   das bei sechs Schritten rund 100 px pro Spalte für eine h4. Darunter
   bleibt die Liste gestapelt wie auf dem Telefon. */
@media (min-width: 1024px) {
	.vis-servicesteps__list { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
}

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

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

.vis-servicestep__mark {
	position: absolute;
	inset-block-start: calc(var(--vis-space-1) * -1);
	inset-inline-start: 0;

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

.vis-servicestep__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-servicestep__label {
	font-size: var(--vis-fs-h4);
	font-weight: var(--vis-fw-bold);
	letter-spacing: var(--vis-ls-heading);
	hyphens: auto;
}

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

/* ══ 9 — Projekte des Bereichs ═══════════════════════════════════════════ */

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

/* ══ 10 — Fragen ═════════════════════════════════════════════════════════ */

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

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

.vis-servicefaq__list { max-inline-size: var(--vis-container-content); }

/* ══ 11 — Passt dazu ═════════════════════════════════════════════════════ */

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

.vis-servicerelated__headline { margin-block-end: var(--vis-space-8); }

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

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

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

	block-size: 100%;
	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);
}

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

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

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

.vis-servicerelated__text {
	grid-column: 1 / -1;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-s);
}

.vis-servicerelated__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-servicerelated__link:hover .vis-servicerelated__arrow,
.vis-servicerelated__link:focus-visible .vis-servicerelated__arrow {
	color: var(--vis-accent);
	transform: translateX(var(--vis-nudge));
}

/* ══ 13 — Werkstattblick ═════════════════════════════════════════════════

   Keine Galerie. Gleich große Kacheln nebeneinander sehen nach
   Bilddatenbank aus — hier soll man beim Scrollen merken, dass tatsächlich
   gearbeitet wird. Deshalb vier Rollen mit unterschiedlichem Gewicht:
   ein Leitmotiv, ein Hochformat, ein Detail, darunter der Streifen.

   Fehlt eine Rolle, rückt die nächste nach. Der Abschnitt funktioniert mit
   drei Motiven genauso wie mit neun.                                     */

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

.vis-shots--paper { background: var(--vis-paper); }
.vis-shots--dark  { background: var(--vis-ink-950); }

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

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

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

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

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

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

/* ── Die Bühne ──────────────────────────────────────────────────────────

   Vorher richtete jedes Motiv seine Höhe nach dem eigenen Bildformat: das
   Leitmotiv 4:3, daneben ein Hochformat 3:4 über einem Quadrat. Die rechte
   Spalte wurde dadurch fast doppelt so hoch wie die linke, und unter dem
   Leitmotiv blieb eine halbe Bildhöhe leer stehen. Genau das las sich als
   zufällige Masonry-Aufteilung.

   Jetzt gibt **die Bühne** das Format vor, nicht das einzelne Bild. Die
   Motive füllen ihre Zellen, dadurch stehen alle Kanten aufeinander und es
   bleibt kein Rest.

   Die Formate sind aufeinander gerechnet: Bei einer Bühne von 2:1 und
   einer Spaltenteilung von 1,5 zu 1 bekommt das Hauptmotiv rund 5:4 und
   jedes Nebenmotiv rund 16:10 — beide angenehm, keines extrem.

   Die Aufteilung richtet sich nach der Anzahl; es gibt keinen Fall, in dem
   eine Spalte leer bliebe:

     1 Motiv    volle Breite
     2 Motive   nebeneinander, gleich hoch
     3 Motive   Hauptmotiv links über zwei Zeilen, zwei Kacheln rechts   */

.vis-shots__stage {
	display: grid;
	gap: var(--vis-space-4);
}

.vis-shots__item {
	margin: 0;
	overflow: hidden;
	background: var(--vis-ink-950);
	min-block-size: 0;
	min-inline-size: 0;
}

/* Unter 768 stapelt alles in einem einheitlichen Format. Ein Hochformat
   über die volle Handybreite wäre fast bildschirmhoch. */
.vis-shots__stage .vis-shots__item { aspect-ratio: var(--vis-shot-lead-ratio); }

/* Ab 768: Hauptmotiv über die volle Breite, die beiden Nebenmotive teilen
   sich die Zeile darunter. */
@media (min-width: 768px) {
	.vis-shots__stage {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--vis-space-6);
	}

	.vis-shots__stage--1 .vis-shots__item--lead,
	.vis-shots__stage--3 .vis-shots__item--lead {
		grid-column: 1 / -1;
		aspect-ratio: var(--vis-shots-stage-wide);
	}
}

/* Ab 1024 die eigentliche Bühne: ein Rechteck mit festem Format. Alle
   Höhen kommen aus dem Raster, keine aus einem Bildformat. */
@media (min-width: 1024px) {
	.vis-shots__stage--3 {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		grid-template-rows: repeat(2, minmax(0, 1fr));
		aspect-ratio: var(--vis-shots-stage);
	}

	.vis-shots__stage--3 .vis-shots__item--lead {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.vis-shots__stage--2 {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		aspect-ratio: var(--vis-shots-stage);
	}

	.vis-shots__stage--1 { aspect-ratio: var(--vis-shots-stage-wide); }

	/* Kein eigenes Bildformat mehr — die Zelle bestimmt die Höhe. */
	.vis-shots__stage--1 .vis-shots__item,
	.vis-shots__stage--2 .vis-shots__item,
	.vis-shots__stage--3 .vis-shots__item { aspect-ratio: auto; }
}

/* Die 60°-Kante trägt nur das Hauptmotiv. Einmal pro Abschnitt genügt — an
   jedem Bild wäre die Signatur ein Muster statt eines Zeichens. */
@media (min-width: 1024px) {
	.vis-shots__item--lead {
		--vis-cut-size: var(--vis-cut-lg);
		clip-path: polygon(
			0 0,
			100% 0,
			100% calc(100% - var(--vis-cut-size) / var(--vis-tan60)),
			calc(100% - var(--vis-cut-size)) 100%,
			0 100%
		);
	}
}

/* ── Der Streifen ───────────────────────────────────────────────────────

   Ein Streifen, keine zweite Bühne: gleich große Kacheln in **einer**
   Reihe. Die Spaltenzahl kommt aus der tatsächlichen Anzahl der Motive,
   damit die Reihe immer voll ist und nie ein einzelnes Bild allein in
   einer zweiten Zeile steht.

   `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.                                   */

.vis-shots__strip {
	display: grid;
	gap: var(--vis-space-4);
	margin-block-start: var(--vis-space-4);
}

.vis-shots__strip .vis-shots__item { aspect-ratio: var(--vis-shot-strip-ratio); }

/* Zwei Spalten; bei ungerader Anzahl nimmt das letzte Motiv die volle
   Breite. Auch das ergibt eine geschlossene Fläche. */
@media (min-width: 768px) {
	.vis-shots__strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--vis-space-6);
		margin-block-start: var(--vis-space-6);
	}

	.vis-shots__strip > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
	.vis-shots__strip > *:last-child:nth-child(odd) { grid-column: auto; }

	.vis-shots__strip[style*="--vis-strip: 3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vis-shots__strip[style*="--vis-strip: 4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.vis-shots__strip[style*="--vis-strip: 5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.vis-shots__strip[style*="--vis-strip: 6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
	.vis-shots__strip[style*="--vis-strip: 6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}


/* ══ 14 — Einstiege in Unterseiten ═══════════════════════════════════════

   Ebene 2 der Leistungsarchitektur. Der Abschnitt steht nach den
   Leistungen: Wer bis hierher gelesen hat, weiß, worum es geht, und sucht
   jetzt seinen konkreten Fall.                                           */

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

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

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

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

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

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

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

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

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

	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-subpage__link:hover {
	border-color: var(--vis-accent);
	background: var(--vis-bg-subtle);
}

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

.vis-subpage__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-subpage__body {
	display: grid;
	gap: var(--vis-space-2);
	min-inline-size: 0;
}

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

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

.vis-subpage__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-subpage__link:hover .vis-subpage__arrow,
.vis-subpage__link:focus-visible .vis-subpage__arrow {
	color: var(--vis-accent);
	transform: translateX(var(--vis-nudge));
}

/* ══ 15 — „Nicht gefunden, was du suchst?" ═══════════════════════════════

   Macht aus einer Liste ein Angebot. Dunkel, damit er sich vom hellen
   Leistungsraster darüber absetzt — aber schmal, damit er den Abschnitt
   nicht übernimmt.                                                       */

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

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

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

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

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

.vis-more__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-more__text {
	margin: var(--vis-space-3) 0 0;
	max-inline-size: 62ch;
	color: var(--vis-ink-300);
	font-size: var(--vis-fs-body-s);
	line-height: var(--vis-lh-body);
}

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

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

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

	.vis-subpage__link:hover .vis-subpage__arrow,
	.vis-subpage__link:focus-visible .vis-subpage__arrow,
	.vis-more .vis-btn:hover .vis-icon {
		transform: none;
	}
}


/* ══ 16 — Reduzierte Bewegung ════════════════════════════════════════════ */

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

	.vis-servicerow:hover .vis-servicerow__arrow,
	.vis-servicerow:has(.vis-servicerow__link:focus-visible) .vis-servicerow__arrow,
	.vis-servicerelated__link:hover .vis-servicerelated__arrow,
	.vis-servicerelated__link:focus-visible .vis-servicerelated__arrow,
	.vis-servicehero__actions .vis-btn:hover .vis-icon {
		transform: none;
	}
}

/* ══ 17 — Fokus ohne :has() ══════════════════════════════════════════════

   Der Fokusring der Leistungszeile hängt an `:has()`. Ein Browser ohne
   `:has()` verwirft die Regel — und weil der Link selbst `outline: none`
   trägt, wäre der Fokus dann unsichtbar. Hier bekommt er ihn zurück.    */

@supports not selector(:has(*)) {
	.vis-servicerow__link:focus-visible {
		outline: var(--vis-focus-width) solid var(--vis-accent);
		outline-offset: var(--vis-focus-offset);
	}
}

/* ══ Überarbeitung 07.10.2026 ═══════════════════════════════════════════
   Weniger Höhe, gleiche Information. */

/* Anlässe als Leiste unter dem Kopf statt als eigener Abschnitt mit
   Displayüberschrift. Die Überschrift wird zum Etikett. */
.vis-serviceintents--strip {
	padding-block: var(--vis-section-s);
}

.vis-serviceintents--strip .vis-serviceintents__headline {
	max-inline-size: none;
	margin-block-end: var(--vis-space-5);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	font-weight: var(--vis-fw-medium);
	line-height: var(--vis-lh-body);
	letter-spacing: var(--vis-ls-label);
	text-transform: uppercase;
	color: var(--vis-text-3);
}

.vis-serviceintents--strip .vis-serviceintents__list {
	display: grid;
	gap: var(--vis-space-5) var(--vis-space-6);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.vis-serviceintents--strip .vis-serviceintents__item,
.vis-serviceintents--strip .vis-serviceintents__item:last-child {
	display: grid;
	grid-template-columns: none;
	gap: var(--vis-space-1);
	align-content: start;
	padding-block: var(--vis-space-4) 0;
	border-block-end: 0;
}

.vis-serviceintents--strip .vis-serviceintents__num { display: none; }

.vis-serviceintents--strip .vis-serviceintents__label {
	font-size: var(--vis-fs-body);
}

.vis-serviceintents--strip .vis-serviceintents__text {
	grid-column: auto;
	font-size: var(--vis-fs-caption);
}

/* Sprungziel aus dem Mega-Menü: Der Abschnitt landet unter dem klebenden
   Kopf, und die Kante zieht einmal in der Markenfarbe durch — damit ist
   sofort klar, wo man gelandet ist. */
.vis-servicearea {
	position: relative;
	scroll-margin-block-start: calc(var(--vis-header-height) + var(--vis-space-8));
}

.vis-servicearea::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: calc(var(--vis-border-width-strong) * -1);
	block-size: var(--vis-border-width-strong);
	background: var(--vis-accent);
	transform: scaleX(0);
	transform-origin: left center;
}

.vis-servicearea:target::before {
	animation: vis-target-line var(--vis-duration-cinematic) var(--vis-ease-out) var(--vis-duration-ui) forwards;
}

.vis-servicearea:target .vis-servicearea__num { color: var(--vis-accent-text); }

@keyframes vis-target-line {
	to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
	.vis-servicearea:target::before { animation: none; transform: none; }
}

/* Produktion im Werkstattblick: unter den Bildern, abgesetzt durch eine
   Haarlinie statt durch einen weiteren farbigen Abschnitt. */
.vis-servicecraft__inner--embedded {
	margin-block-start: var(--vis-section-s);
	padding-block-start: var(--vis-space-10);
	border-block-start: var(--vis-border-width) solid var(--vis-border);
}

.vis-servicecraft__inner--embedded .vis-servicecraft__headline {
	font-size: var(--vis-fs-h3);
	max-inline-size: 28ch;
}

.vis-servicecraft__inner--embedded .vis-servicecraft__text { margin-block-start: var(--vis-space-4); }

/* ══ Übersicht mit Bildern (07.10.2026) ══════════════════════════════════
   Jede Zeile zeigt das Kopfbild ihres Bereichs — echte Arbeit statt nur
   Text. Die Stichworte springen direkt zum passenden Abschnitt. */

.vis-servicerow { grid-template-columns: auto minmax(0, 1fr) auto; }

.vis-servicerow__media {
	grid-column: 2 / -1;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--vis-radius-sm);
	background: var(--vis-ink-950);
}

.vis-servicerow--support .vis-servicerow__media { display: none; }

@media (min-width: 768px) {
	.vis-servicerow { grid-template-columns: auto minmax(0, 1fr) clamp(180px, 22vw, 300px) auto; }
	.vis-servicerow__media { grid-column: auto; grid-row: 1; grid-column-start: 3; aspect-ratio: 4 / 3; }
	.vis-servicerow--support { grid-template-columns: auto minmax(0, 1fr) 140px auto; }
	.vis-servicerow--support .vis-servicerow__media { display: block; }
	.vis-servicerow__arrow { grid-row: 1; grid-column-start: 4; }
}

.vis-servicerow__image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform var(--vis-duration-content) var(--vis-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.vis-servicerow:hover .vis-servicerow__image { transform: scale(1.04); }
}

.vis-servicerow:has(.vis-servicerow__link:focus-visible) .vis-servicerow__image { transform: scale(1.04); }

/* Stichworte als eigene Links über der Zeilenfläche. */
.vis-servicerow__tag {
	position: relative;
	z-index: 1;
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--vis-border-strong);
	text-underline-offset: 0.3em;
	transition: color var(--vis-duration-micro) var(--vis-ease-out), text-decoration-color var(--vis-duration-micro) var(--vis-ease-out);
}

.vis-servicerow__tag:hover { color: var(--vis-accent-text); text-decoration-color: currentColor; }

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

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