/* ==========================================================================
   VISARO — Karten und Medien
   --------------------------------------------------------------------------
   VISARO hat bewusst KEINE Universal-Karte (Design Concept Kap. 12.3).
   Sechs getrennte Systeme mit gemeinsamer Design-DNA, aber je eigenem Zweck:

     A  Service Card     Leistung erklären, führt weiter
     B  Project Card     Referenz zeigen, Bild trägt
     C  Shop Card        in eine Shopwelt führen, ganzflächig
     D  Product Card     verkaufen, Preis und Variante im Blick
     E  Dashboard Card   Zustand zeigen, dicht, My Visaro
     F  Editorial Card   erklären, Text trägt

   Gemeinsame DNA: 1 px Rahmen statt Schatten, Radius md, kein Glow,
   keine schwebenden Flächen, Bewegung nur beim Hover und nur minimal.
   ========================================================================== */

/* ══ GEMEINSAME GRUNDLAGE ═══════════════════════════════════════════════ */

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

	background: var(--vis-bg);
	border: var(--vis-border-width) solid var(--vis-border);
	border-radius: var(--vis-radius-md);

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

/* Die ganze Karte ist klickbar, ohne verschachtelte Links: Der Titel-Link
   spannt eine unsichtbare Fläche über die Karte. Screenreader bekommen
   dadurch genau einen Link mit sinnvollem Text. */
.vis-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.vis-card:has(.vis-card__link:hover),
.vis-card:has(.vis-card__link:focus-visible) {
	border-color: var(--vis-border-strong);
}

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

.vis-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--vis-space-3);
	padding: var(--vis-space-6);
	flex: 1;
}

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

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

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

.vis-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vis-space-3);
	margin-block-start: auto;
	padding-block-start: var(--vis-space-4);
}

/* ══ A — SERVICE CARD ═══════════════════════════════════════════════════
   Erklärt eine Leistung. Trägt die Indexnummer aus dem Werkstattraster,
   kein Bild. Der Pfeil rechts unten führt weiter.
   ══════════════════════════════════════════════════════════════════════ */

.vis-card--service {
	background: var(--vis-bg);
}

.vis-card--service .vis-card__body {
	gap: var(--vis-space-4);
	padding: var(--vis-space-8);
}

.vis-card--service .vis-card__index {
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	font-weight: var(--vis-fw-medium);
	letter-spacing: var(--vis-ls-label);
	color: var(--vis-text-3);
}

.vis-card--service .vis-card__title { font-size: var(--vis-fs-h3); }

/* Die 60°-Kante links oben ist die Signatur der Service-Karte —
   ein feiner Strich, kein Effekt. */
.vis-card--service::before {
	content: "";
	position: absolute;
	inset-block-start: -1px;
	inset-inline-start: -1px;
	width: var(--vis-space-8);
	height: var(--vis-space-8);
	border-block-start: var(--vis-border-width-strong) solid var(--vis-accent);
	border-start-start-radius: var(--vis-radius-md);
	opacity: 0;
	transition: opacity var(--vis-duration-ui) var(--vis-ease-out);
}

.vis-card--service:has(.vis-card__link:hover)::before,
.vis-card--service:has(.vis-card__link:focus-visible)::before {
	opacity: 1;
}

.vis-card--service .vis-card__foot .vis-icon {
	transition: transform var(--vis-duration-ui) var(--vis-ease-out);
}

.vis-card--service:has(.vis-card__link:hover) .vis-card__foot .vis-icon {
	transform: translateX(var(--vis-nudge));
}

/* ══ B — PROJECT CARD ═══════════════════════════════════════════════════
   Das Bild trägt. Rahmenlos, damit das Motiv wirkt. Text steht darunter,
   nicht darauf — Text auf Bild nur mit Abdunklung (Design Concept 10.3).
   ══════════════════════════════════════════════════════════════════════ */

.vis-card--project {
	border: 0;
	border-radius: 0;
	background: transparent;
	gap: var(--vis-space-4);
}

.vis-card--project .vis-card__media {
	overflow: hidden;
	border-radius: var(--vis-radius-md);
	background: var(--vis-bg-surface);
}

.vis-card--project .vis-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--vis-duration-content) var(--vis-ease-out);
}

/* Sehr zurückhaltender Zoom — 1.04, wie im Motion-Kapitel vorgesehen. */
.vis-card--project:has(.vis-card__link:hover) .vis-card__media img {
	transform: scale(1.04);
}

.vis-card--project .vis-card__body {
	padding: 0;
	gap: var(--vis-space-2);
}

.vis-card--project .vis-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vis-space-2) var(--vis-space-3);

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

.vis-card--project:has(.vis-card__link:focus-visible) { outline: none; }

.vis-card--project:has(.vis-card__link:focus-visible) .vis-card__media {
	outline: var(--vis-focus-width) solid var(--vis-accent);
	outline-offset: var(--vis-focus-offset);
}

/* ══ C — SHOP CARD ══════════════════════════════════════════════════════
   Führt in eine Shopwelt. Ganzflächig, dunkler Grund, Weltakzent.
   Größer und lauter als die anderen — sie ist ein Eingang, keine Kachel.
   ══════════════════════════════════════════════════════════════════════ */

.vis-card--shop {
	overflow: hidden;
	border: 0;
	background: var(--vis-ink-950);
	color: var(--vis-white);
	min-height: var(--vis-card-shop-min);
	justify-content: flex-end;
}

.vis-card--shop .vis-card__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.vis-card--shop .vis-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.5;
	transition:
		transform var(--vis-duration-content) var(--vis-ease-out),
		opacity var(--vis-duration-ui) var(--vis-ease-out);
}

.vis-card--shop:has(.vis-card__link:hover) .vis-card__media img {
	transform: scale(1.04);
	opacity: 0.62;
}

/* Abdunklung nach unten, damit der Text auf jedem Motiv lesbar bleibt. */
.vis-card--shop::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Fallback ohne color-mix: ohne Abdunklung waere der Text auf hellen
	   Motiven unlesbar. Deshalb zuerst eine einfache Variante. */
	background: linear-gradient(to top, rgba(23, 33, 58, 0.88) 0%, rgba(23, 33, 58, 0.3) 55%, transparent 100%);
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--vis-ink-950) 88%, transparent) 0%,
		color-mix(in srgb, var(--vis-ink-950) 30%, transparent) 55%,
		transparent 100%
	);
}

.vis-card--shop .vis-card__body {
	position: relative;
	z-index: 2;
	flex: none;
	padding: var(--vis-space-8);
}

.vis-card--shop .vis-card__title { font-size: var(--vis-fs-h3); }

.vis-card--shop .vis-card__text { color: var(--vis-ink-300); }

/* Der Weltakzent als schmale Kante unten — pro Shopwelt umschaltbar. */
.vis-card--shop .vis-card__accent {
	position: absolute;
	z-index: 2;
	inset-block-end: 0;
	inset-inline: 0;
	height: var(--vis-accent-bar);
	background: var(--vis-world-accent);
}

/* ══ D — PRODUCT CARD ═══════════════════════════════════════════════════
   Verkauft. Heller, dichter, klassischer Retail — Preis und Variante
   müssen ohne Suchen erfassbar sein.
   ══════════════════════════════════════════════════════════════════════ */

.vis-card--product .vis-card__media {
	overflow: hidden;
	border-start-start-radius: var(--vis-radius-md);
	border-start-end-radius: var(--vis-radius-md);
	background: var(--vis-bg-surface);
}

.vis-card--product .vis-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vis-card--product .vis-card__body {
	gap: var(--vis-space-2);
	padding: var(--vis-space-5);
}

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

.vis-card--product .vis-card__brand {
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	letter-spacing: var(--vis-ls-label);
	text-transform: uppercase;
	color: var(--vis-text-3);
}

.vis-card__price {
	display: flex;
	align-items: baseline;
	gap: var(--vis-space-2);

	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-body);
	font-weight: var(--vis-fw-medium);
	font-variant-numeric: tabular-nums;
	color: var(--vis-text);
}

.vis-card__price del {
	font-size: var(--vis-fs-caption);
	font-weight: var(--vis-fw-regular);
	color: var(--vis-text-3);
}

/* Verfügbare Farben als kleine Punktreihe. */
.vis-card__swatches {
	display: flex;
	gap: var(--vis-space-1);
}

.vis-card__swatch {
	width: var(--vis-space-3);
	height: var(--vis-space-3);
	border: var(--vis-border-width) solid var(--vis-border);
	border-radius: var(--vis-radius-full);
}

/* ══ E — DASHBOARD CARD ═════════════════════════════════════════════════
   My Visaro. Dicht, sachlich, keine Marketingsprache. Zahlen in Mono.
   Der Rahmen ist kräftiger, weil sie auf hellem Grund im Raster steht.
   ══════════════════════════════════════════════════════════════════════ */

.vis-card--dashboard {
	border-radius: var(--vis-radius-sm);
}

.vis-card--dashboard .vis-card__body {
	gap: var(--vis-space-2);
	padding: var(--vis-space-5);
}

.vis-card--dashboard .vis-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vis-space-3);
}

.vis-card--dashboard .vis-card__title {
	font-size: var(--vis-fs-body-s);
	font-weight: var(--vis-fw-medium);
	color: var(--vis-text-2);
}

.vis-card__metric {
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-h2);
	font-weight: var(--vis-fw-medium);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	color: var(--vis-text);
}

.vis-card__metric-note {
	font-size: var(--vis-fs-caption);
	color: var(--vis-text-3);
}

/* Zeilenliste innerhalb einer Dashboard-Karte. */
.vis-card__rows {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vis-card__rows li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vis-space-3);
	padding-block: var(--vis-space-3);
	border-block-start: var(--vis-border-width) solid var(--vis-border-subtle);
	font-size: var(--vis-fs-body-s);
}

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

/* ══ F — EDITORIAL CARD ═════════════════════════════════════════════════
   Erklärt. Der Text trägt, kein Bild nötig. Steht auf Paper, damit sie
   sich vom Rest absetzt — die Anti-SaaS-Fläche des Systems.
   ══════════════════════════════════════════════════════════════════════ */

.vis-card--editorial {
	border-color: transparent;
	background: var(--vis-paper);
}

.vis-card--editorial .vis-card__body {
	gap: var(--vis-space-4);
	padding: var(--vis-space-8);
}

.vis-card--editorial .vis-card__title {
	font-size: var(--vis-fs-h3);
	max-width: 24ch;
}

.vis-card--editorial .vis-card__text {
	font-size: var(--vis-fs-body);
	max-width: 56ch;
}

.vis-card--editorial blockquote {
	margin: 0;
	font-size: var(--vis-fs-h4);
	line-height: var(--vis-lh-snug);
	letter-spacing: var(--vis-ls-heading);
}

.vis-card--editorial cite {
	display: block;
	margin-block-start: var(--vis-space-4);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	font-style: normal;
	letter-spacing: var(--vis-ls-label);
	text-transform: uppercase;
	color: var(--vis-text-3);
}

/* ══════════════════════════════════════════════════════════════════════════
   MEDIEN
   Seitenverhältnisse aus Design Concept Kap. 10.1. Alle Medien reservieren
   ihren Platz über aspect-ratio, damit beim Laden nichts springt.
   ══════════════════════════════════════════════════════════════════════════ */

.vis-media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--vis-bg-surface);
	border-radius: var(--vis-radius-md);
}

.vis-media > img,
.vis-media > video,
.vis-media > picture > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vis-media--16x9 { aspect-ratio: 16 / 9; }
.vis-media--4x3  { aspect-ratio: 4 / 3; }
.vis-media--1x1  { aspect-ratio: 1 / 1; }
.vis-media--3x4  { aspect-ratio: 3 / 4; }
.vis-media--21x9 { aspect-ratio: 21 / 9; }

.vis-media--square-crop > img { object-position: center; }
.vis-media--contain > img { object-fit: contain; }
.vis-media--flat { border-radius: 0; }

/* Bildunterschrift — bei VISARO trägt sie Inhalt, nicht Dekoration.
   André Winters Weg steht als Bildunterschrift, nicht als Headline. */
.vis-figure { margin: 0; }

.vis-figure figcaption {
	margin-block-start: var(--vis-space-3);
	font-size: var(--vis-fs-caption);
	color: var(--vis-text-3);
	max-width: 64ch;
}

/* Text auf Bild braucht immer eine Abdunklung. */
.vis-media--overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(23, 33, 58, 0.78) 0%, transparent 60%);
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--vis-ink-950) 78%, transparent) 0%,
		transparent 60%
	);
}

.vis-media__caption-on {
	position: absolute;
	z-index: 1;
	inset-block-end: 0;
	inset-inline: 0;
	padding: var(--vis-space-6);
	color: var(--vis-white);
}

/* ── Platzhalter ─────────────────────────────────────────────────────────
   Bis echte Fotos vorliegen: sichtbarer Platzhalter mit ID, keine
   Stockfotos und keine KI-Menschen (CLAUDE.md, Non-Negotiable 8 und 13).
   Das Muster ist bewusst technisch, damit niemand es für ein Bild hält. */

.vis-placeholder {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;

	background-color: var(--vis-bg-surface);
	background-image:
		repeating-linear-gradient(
			60deg,
			transparent 0 11px,
			color-mix(in srgb, var(--vis-ink-300) 45%, transparent) 11px 12px
		);
	border: var(--vis-border-width) solid var(--vis-border);
	border-radius: var(--vis-radius-md);
	color: var(--vis-text-3);
}

.vis-placeholder__id {
	padding: var(--vis-space-2) var(--vis-space-3);
	background: var(--vis-bg);
	border: var(--vis-border-width) solid var(--vis-border);
	border-radius: var(--vis-radius-xs);

	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	letter-spacing: var(--vis-ls-label);
	text-align: center;
	line-height: 1.5;
}

.vis-placeholder__id small {
	display: block;
	font-size: var(--vis-fs-label);
	color: var(--vis-text-disabled);
	text-transform: none;
	letter-spacing: 0;
}

/* ── Logo ────────────────────────────────────────────────────────────── */

.vis-logo {
	display: block;
	width: auto;
	height: var(--vis-space-8);
}

.vis-logo--mark { height: var(--vis-space-10); }
.vis-logo--lg   { height: var(--vis-space-12); }

/* ══════════════════════════════════════════════════════════════════════════
   KARTENRASTER
   Zwei Varianten: dichtes Produktraster und luftiges Projektraster.
   Die Spaltenzahl folgt dem Viewport, nicht einer festen Klasse.
   ══════════════════════════════════════════════════════════════════════════ */

.vis-cards {
	display: grid;
	gap: var(--vis-space-6);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.vis-cards--wide {
	gap: var(--vis-grid-gap-media);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
}

.vis-cards--dense {
	gap: var(--vis-space-4);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}