/* ==========================================================================
   VISARO — Signatur
   --------------------------------------------------------------------------
   Die Elemente, die VISARO von einem beliebigen Theme unterscheiden:
   die 60°-Geometrie, das Werkstattraster und die Offenlegungs-Komponenten.

   Grundsatz: sehr sparsam. Die Geometrie ist eine Signatur, kein Effekt.
   Kein Dauer-Zickzack, keine Dekoration ohne Grund.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   60°-GEOMETRIE
   Die Kantenhöhe ergibt sich aus Breite / tan(60°) — deshalb steht der
   Tangens als Token bereit. Vier Anwendungen, mehr nicht.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Kantenmaske ──────────────────────────────────────────────────────
   Schneidet eine Ecke im Markenwinkel ab. Standard ist unten rechts;
   die Richtung wird über Modifier gewählt. */

.vis-cut {
	--vis-cut-size: var(--vis-cut);
	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%
	);
}

.vis-cut--tl {
	clip-path: polygon(
		var(--vis-cut-size) 0,
		100% 0,
		100% 100%,
		0 100%,
		0 calc(var(--vis-cut-size) / var(--vis-tan60))
	);
}

.vis-cut--tr {
	clip-path: polygon(
		0 0,
		calc(100% - var(--vis-cut-size)) 0,
		100% calc(var(--vis-cut-size) / var(--vis-tan60)),
		100% 100%,
		0 100%
	);
}

.vis-cut--bl {
	clip-path: polygon(
		0 0,
		100% 0,
		100% 100%,
		var(--vis-cut-size) 100%,
		0 calc(100% - var(--vis-cut-size) / var(--vis-tan60))
	);
}

.vis-cut--sm { --vis-cut-size: var(--vis-cut-sm); }
.vis-cut--lg { --vis-cut-size: var(--vis-cut-lg); }

/* ── 2. Sektionsübergang ─────────────────────────────────────────────────
   Eine schräge Kante zwischen zwei Gründen. Statt eines Bildes eine
   Fläche mit clip-path — skaliert sauber und kostet keine Anfrage. */

.vis-edge {
	position: relative;
	height: calc(var(--vis-cut) / var(--vis-tan60));
	background: var(--vis-edge-color, var(--vis-ink-950));
	clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.vis-edge--reverse { clip-path: polygon(0 0, 100% 100%, 0 100%); }
.vis-edge--top     { clip-path: polygon(0 0, 100% 0, 100% 100%); }

/* ── 3. Marker ───────────────────────────────────────────────────────────
   Das kleine Dreieck im Markenwinkel. Steht vor Überschriften und in
   Listen — der kleinste Träger der Geometrie. */

.vis-marker {
	display: inline-block;
	width: var(--vis-space-3);
	height: calc(var(--vis-space-3) / var(--vis-tan60) * 2);
	background: var(--vis-world-accent, var(--vis-accent));
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	flex: none;
}

.vis-marker--sm { width: var(--vis-space-2); height: calc(var(--vis-space-2) / var(--vis-tan60) * 2); }
.vis-marker--lg { width: var(--vis-space-5); height: calc(var(--vis-space-5) / var(--vis-tan60) * 2); }

.vis-marker-head {
	display: flex;
	align-items: baseline;
	gap: var(--vis-space-3);
}

/* ── 4. Reveal-Maske ─────────────────────────────────────────────────────
   Der Maskenwisch im Markenwinkel. Wird über die Motion-Klassen unten
   ausgelöst, nicht dauerhaft animiert. */

.vis-wipe {
	--vis-wipe-progress: 0%;
	clip-path: polygon(
		0 0,
		var(--vis-wipe-progress) 0,
		calc(var(--vis-wipe-progress) - 12%) 100%,
		0 100%
	);
	transition: clip-path var(--vis-duration-cinematic) var(--vis-ease-out);
}

.vis-wipe.is-revealed { --vis-wipe-progress: 130%; }

/* ══════════════════════════════════════════════════════════════════════════
   WERKSTATTRASTER
   Die technischen Details aus Design Concept Kap. 9. Sie machen die Seite
   präzise, nicht dekorativ — deshalb Haarlinien und Mono, keine Ornamente.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Haarlinien ──────────────────────────────────────────────────────── */

.vis-hairline {
	border: 0;
	border-block-start: var(--vis-border-width) solid var(--vis-border);
	margin: 0;
}

.vis-hairline--strong { border-block-start-color: var(--vis-border-strong); }

/* Senkrechte Haarlinien im Raster — nur ab Desktop, mobil zu eng. */
.vis-ruled { display: grid; }

@media (min-width: 1024px) {
	.vis-ruled > * + * {
		border-inline-start: var(--vis-border-width) solid var(--vis-border);
		padding-inline-start: var(--vis-space-6);
	}
}

/* ── Eckmarken ───────────────────────────────────────────────────────────
   Zwei kurze Striche in gegenüberliegenden Ecken. Markieren eine Fläche,
   ohne sie zu rahmen. */

.vis-corner {
	position: relative;
}

.vis-corner::before,
.vis-corner::after {
	content: "";
	position: absolute;
	width: var(--vis-space-5);
	height: var(--vis-space-5);
	border-color: var(--vis-border-strong);
	border-style: solid;
	pointer-events: none;
}

.vis-corner::before {
	inset-block-start: 0;
	inset-inline-start: 0;
	border-width: var(--vis-border-width) 0 0 var(--vis-border-width);
}

.vis-corner::after {
	inset-block-end: 0;
	inset-inline-end: 0;
	border-width: 0 var(--vis-border-width) var(--vis-border-width) 0;
}

.vis-corner--accent::before,
.vis-corner--accent::after { border-color: var(--vis-world-accent, var(--vis-accent)); }

/* ── Indexnummern ────────────────────────────────────────────────────────
   01, 02, 03 … Die Leistungsgewichtung wird sichtbar (Design Concept 1.4). */

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

.vis-index--lg {
	font-size: var(--vis-fs-h4);
	color: var(--vis-border-strong);
}

/* Automatische Nummerierung in Listen. */
.vis-index-list {
	counter-reset: vis-index;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vis-index-list > li {
	counter-increment: vis-index;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--vis-space-4);
	align-items: baseline;
	padding-block: var(--vis-space-4);
	border-block-start: var(--vis-border-width) solid var(--vis-border);
}

.vis-index-list > li::before {
	content: counter(vis-index, decimal-leading-zero);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--vis-ls-label);
	color: var(--vis-text-3);
}

/* ── Mono-Label ──────────────────────────────────────────────────────────
   Definiert in base.css als .vis-label. Hier nur die Variante auf Linie. */

.vis-label-rule {
	display: flex;
	align-items: center;
	gap: var(--vis-space-4);
}

.vis-label-rule::after {
	content: "";
	flex: 1;
	height: var(--vis-border-width);
	background: var(--vis-border);
}

/* ── Spec-Zeile ──────────────────────────────────────────────────────────
   Das stärkste Einzeldetail (Design Concept Kap. 9.5): Maße, Material und
   Verfahren als technische Zeile. Zahlen in Mono, tabellarisch.
   Nur echte Angaben — keine erfundenen Werte. */

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

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

	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-caption);
	font-variant-numeric: tabular-nums;
	color: var(--vis-text-2);
}

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

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

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

/* ── Zeitleiste ──────────────────────────────────────────────────────────
   Die Firmengeschichte als Werkstattraster, nicht als Fließtext
   (Design Concept Kap. 1.1). */

.vis-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vis-timeline > li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--vis-space-4) var(--vis-space-6);
	padding-block: var(--vis-space-5);
	border-block-start: var(--vis-border-width) solid var(--vis-border);
}

.vis-timeline__year {
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-body-s);
	font-variant-numeric: tabular-nums;
	font-weight: var(--vis-fw-medium);
	color: var(--vis-world-accent, var(--vis-accent));
}

/* ══════════════════════════════════════════════════════════════════════════
   ACCORDION
   Auf <details>/<summary> aufgebaut: funktioniert ohne JavaScript,
   ist tastaturbedienbar und für Screenreader korrekt ausgezeichnet.
   ══════════════════════════════════════════════════════════════════════════ */

.vis-accordion {
	border-block-start: var(--vis-border-width) solid var(--vis-border);
}

.vis-accordion__item {
	border-block-end: var(--vis-border-width) solid var(--vis-border);
}

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

	min-height: var(--vis-tap-target-min);
	padding-block: var(--vis-space-5);

	cursor: pointer;
	list-style: none;

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

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

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

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

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

.vis-accordion__icon {
	flex: none;
	width: var(--vis-space-5);
	height: var(--vis-space-5);
	transition: transform var(--vis-duration-ui) var(--vis-ease-out);
}

.vis-accordion__item[open] .vis-accordion__icon { transform: rotate(180deg); }

.vis-accordion__panel {
	padding-block-end: var(--vis-space-6);
	color: var(--vis-text-2);
	max-width: 68ch;
}

/* ══════════════════════════════════════════════════════════════════════════
   TABS
   ARIA-konform: role=tablist, aria-selected, Pfeiltastensteuerung im JS.
   Ohne JavaScript bleiben alle Panels sichtbar — der Inhalt geht nie verloren.
   ══════════════════════════════════════════════════════════════════════════ */

.vis-tabs__list {
	display: flex;
	gap: var(--vis-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
	border-block-end: var(--vis-border-width) solid var(--vis-border);
	overflow-x: auto;
	scrollbar-width: none;
}

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

.vis-tabs__tab {
	position: relative;
	flex: none;

	min-height: var(--vis-tap-target-min);
	padding-block: var(--vis-space-3);

	background: none;
	border: 0;
	border-block-end: var(--vis-border-width-strong) solid transparent;
	margin-block-end: -1px;

	color: var(--vis-text-3);
	font-size: var(--vis-fs-body-s);
	font-weight: var(--vis-fw-medium);
	white-space: nowrap;
	cursor: pointer;

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

.vis-tabs__tab:hover { color: var(--vis-text); }

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

.vis-tabs__tab[aria-selected="true"] {
	color: var(--vis-text);
	border-block-end-color: var(--vis-world-accent, var(--vis-accent));
}

.vis-tabs__panel {
	padding-block-start: var(--vis-space-6);
	max-width: 68ch;
	color: var(--vis-text-2);
}

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

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