/* ══════════════════════════════════════════════════════════════════════════
   VISARO — Projekte

   Übersicht, Karte und Projektseite. Die Ordnung ist dieselbe wie im
   Projektabschnitt der Startseite: Bild und Beschriftung eng zusammen, die
   Projekte weit auseinander. Kein Rahmen, keine Schattenkarte — das Bild
   ist die Karte.
   ══════════════════════════════════════════════════════════════════════════ */

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

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

.vis-projectlist__filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vis-space-3);
	margin-block-end: var(--vis-section-s);
	padding-block-end: var(--vis-space-8);
	border-block-end: var(--vis-border-width) solid var(--vis-border);
}

/* Der Chip ist mit 36 px für die Maus richtig, auf dem Finger unter dem
   Mindestmaß von 44 px (base.css, Design Concept Kap. 24). Nur hier, im
   Filter — die Chips im Shop bleiben, wie sie sind. */
@media (pointer: coarse) {
	.vis-projectlist__filter .vis-chip { min-block-size: var(--vis-tap-target-min); }
}

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

@media (min-width: 768px) {
	.vis-projectlist__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--vis-space-12) var(--vis-space-6);
	}

	/* Das erste Projekt liegt über die volle Breite — dieselbe Ordnung wie
	   auf der Startseite. Bei gesetztem Filter entfällt die Hervorhebung. */
	.vis-projectcard--lead { grid-column: 1 / -1; }
}

/* Im flachen Raster sind alle Karten gleich groß: bei „passt dazu" und auf
   den Leistungsseiten ist die Reihenfolge eine Auswahl, keine Wertung. */
@media (min-width: 1024px) {
	.vis-projectlist__grid--flat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vis-projectlist__grid--flat .vis-projectcard--lead { grid-column: auto; }
}

.vis-projectlist__empty {
	max-inline-size: 54ch;
	padding-block: var(--vis-section-s);
}

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

/* ══ 2 — Karte ═══════════════════════════════════════════════════════════

   Bild und Text sind eine Einheit: enger Abstand innen, weiter außen.
   Klickbar ist die ganze Karte, aber der Link liegt am Titel — dadurch
   bekommt der Screenreader einen sinnvollen Linktext und die Maus
   trotzdem eine große Fläche.                                            */

.vis-projectcard {
	position: relative;
	display: grid;
	gap: var(--vis-space-4);
	align-content: start;
}

.vis-projectcard__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: var(--vis-project-ratio-wide);
}

@media (min-width: 768px) {
	.vis-projectcard--lead .vis-projectcard__media {
		aspect-ratio: var(--vis-project-ratio-lead);
	}
}

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

.vis-projectcard.is-revealed .vis-figure__image { transform: none; }

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

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

.vis-projectcard__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vis-space-3);
	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);
	text-transform: uppercase;
}

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

.vis-projectcard__title {
	margin: 0;
	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-projectcard--lead .vis-projectcard__title { font-size: var(--vis-fs-h2); }

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

/* Der Link deckt die Karte ab, ohne den Linktext zu verwässern. */
.vis-projectcard__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

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

.vis-projectcard:has(.vis-projectcard__link:focus-visible) .vis-projectcard__media {
	outline: var(--vis-focus-width) solid var(--vis-accent);
	outline-offset: var(--vis-focus-offset);
}

/* Ohne `:has()` fiele die Regel darüber weg, und der Link hätte keinen
   Fokusring mehr. Dann trägt ihn der Titel selbst. */
@supports not selector(:has(*)) {
	.vis-projectcard__link:focus-visible {
		outline: var(--vis-focus-width) solid var(--vis-accent);
		outline-offset: var(--vis-focus-offset);
	}
}

.vis-projectcard__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vis-space-4);

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

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

.vis-projectcard__arrow {
	flex: none;
	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-projectcard:hover .vis-projectcard__arrow,
.vis-projectcard:has(.vis-projectcard__link:focus-visible) .vis-projectcard__arrow {
	color: var(--vis-accent);
	transform: translateX(var(--vis-nudge));
}

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

/* ══ 3 — Projektseite ════════════════════════════════════════════════════ */

.vis-project-page__stage {
	padding-block-end: var(--vis-section-s);
	background: var(--vis-bg);
}

.vis-project-page__cover {
	display: block;
	margin: 0;
	overflow: hidden;
	aspect-ratio: var(--vis-project-cover-ratio);
	--vis-cut-size: var(--vis-cut-lg);
}

.vis-project-page__body {
	max-width: var(--vis-container-wide);
	margin-inline: auto;
	padding-inline: var(--vis-gutter);
	padding-block-end: var(--vis-section-l);
	background: var(--vis-bg);
}

.vis-project-page__block + .vis-project-page__block {
	margin-block-start: var(--vis-section-s);
}

.vis-project-page__label {
	margin: 0 0 var(--vis-space-5);

	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-project-page__prose {
	max-inline-size: 68ch;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-l);
	line-height: var(--vis-lh-body);
}

.vis-project-page__prose > * + * { margin-block-start: var(--vis-space-5); }

/* Aufgabe und Umsetzung stehen eingerückt, damit sie sich vom
   Bildmaterial absetzen — Text ist hier nicht die Hauptsache. */
@media (min-width: 1024px) {
	.vis-project-page__block--intro,
	.vis-project-page__block--result {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		gap: var(--vis-space-16);
	}

	.vis-project-page__block--split {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		gap: var(--vis-space-16);
	}
}

.vis-project-page__shot {
	margin: 0;
	overflow: hidden;
	background: var(--vis-ink-950);
}

.vis-project-page__shot--lead {
	aspect-ratio: var(--vis-project-ratio-wide);
	margin-block-end: var(--vis-space-6);
}

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

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

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

.vis-project-page__strip .vis-project-page__shot {
	aspect-ratio: var(--vis-project-ratio-wide);
}

.vis-project-page__video { margin-block-start: var(--vis-space-6); }

.vis-project-page__facts {
	display: grid;
	gap: 0;
	margin: 0;
	align-content: start;
}

.vis-project-page__fact {
	padding-block: var(--vis-space-4);
	border-block-start: var(--vis-border-width) solid var(--vis-border);
}

.vis-project-page__fact dt {
	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-project-page__fact dd {
	margin: var(--vis-space-1) 0 0;
	font-size: var(--vis-fs-h4);
	font-weight: var(--vis-fw-medium);
}

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

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

/* ══ 4 — Reduzierte Bewegung ═════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	/* Der Hover-Zoom wiegt mehr als `.vis-projectcard .vis-figure__image`
	   und muss deshalb ausdrücklich mit genannt werden — sonst sprang das
	   Bild bei reduzierter Bewegung ohne Übergang auf 104 %. */
	.vis-projectcard .vis-figure__image,
	.vis-projectcard:hover .vis-figure__image {
		transform: none;
		transition: none;
	}

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

	.vis-projectcard:hover .vis-projectcard__arrow,
	.vis-projectcard:has(.vis-projectcard__link:focus-visible) .vis-projectcard__arrow {
		transform: none;
	}
}

/* ══ Einblick in die Werkstatt (Leerzustand) ══════════════════════════════
   Ungleiches Raster: das erste Bild groß, die übrigen daneben. Das Motiv
   rückt bei Zeiger und Fokus leicht näher — anders als ein Produktbild
   (E66) muss es nicht vollständig sichtbar bleiben. */

.vis-glimpse {
	padding-block-end: var(--vis-section-s);
}

.vis-glimpse__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--vis-space-6);
	margin: var(--vis-space-6) 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.vis-glimpse__grid { grid-template-columns: repeat(2, 1fr); }
	.vis-glimpse__item:first-child { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
	.vis-glimpse__grid { grid-template-columns: repeat(3, 1fr); }
	.vis-glimpse__item:first-child { grid-column: span 2; grid-row: span 2; }
}

.vis-glimpse__link {
	display: flex;
	flex-direction: column;
	gap: var(--vis-space-2);
	block-size: 100%;
	color: inherit;
	text-decoration: none;
}

.vis-glimpse__media {
	position: relative;
	flex: 1 1 auto;
	min-block-size: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--vis-bg-dark);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--vis-cut-sm)), calc(100% - var(--vis-cut-sm) * var(--vis-tan60)) 100%, 0 100%);
}

.vis-glimpse__item:first-child .vis-glimpse__media { aspect-ratio: auto; }

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

a.vis-glimpse__link:hover .vis-glimpse__image,
a.vis-glimpse__link:focus-visible .vis-glimpse__image {
	transform: scale(1.03);
}

.vis-glimpse__area {
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vis-accent-text);
}

.vis-glimpse__caption {
	font-size: var(--vis-fs-body-l);
	color: var(--vis-text);
}

/* Ruhiger Fokus (07.10.2026): Zeigt man auf eine Arbeit, treten die
   anderen leicht zurück, und die Bildunterschrift bekommt eine Linie.
   Nur auf Zeigegeräten; mit Tastatur reicht der Fokusrahmen. */
.vis-glimpse__item { transition: opacity var(--vis-duration-content) var(--vis-ease-out); }

@media (hover: hover) and (pointer: fine) {
	.vis-glimpse__grid:has(a.vis-glimpse__link:hover) .vis-glimpse__item:not(:hover) { opacity: 0.55; }
}

.vis-glimpse__caption {
	background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
	transition: background-size var(--vis-duration-content) var(--vis-ease-out);
}

a.vis-glimpse__link:hover .vis-glimpse__caption,
a.vis-glimpse__link:focus-visible .vis-glimpse__caption { background-size: 100% 1px; }

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