/*
 * Tareno AuM-Kurve. Alle Masse in Grafik-Einheiten der Originalgrafik
 * (2576 × 1206): --u ist eine Einheit, berechnet aus der Containerbreite.
 * Schriften, Farben und Grössen kommen aus den Theme-Variablen
 * (assets/scss/_base/_vars.scss) — Fallbacks nur für den Fall ohne Theme.
 */

.tac {
	--tac-ink: var(--color-black, #000);
	--tac-ring: var(--color-primary-1, #063e85);
	--tac-text: var(--color-grey-400, #3e3e3e);
	--tac-label: var(--color-grey-300, #3c3c3c);
	--tac-serif: var(--titleFontFamily, "Wicklow", Georgia, serif);
	--tac-sans: var(--bodyFontFamily, "Formular Regular", Helvetica, Arial, sans-serif);
	--tac-sans-bold: var(--bodyFontFamilyBold, "Formular Bold", Helvetica, Arial, sans-serif);

	position: relative;
	margin: 0;
	background: var(--tac-bg, transparent);
}

/*
 * Die Theme-Module setzen Text in schmale Spalten (Fullscreen: 9 von 12, linksbündig;
 * Text: .middle). Die Grafik braucht die volle Containerbreite und steht dann mittig.
 */
.row--grid > .col:has(.tac) {
	grid-column: 1 / -1;
}

.row:not(.row--grid) > .col:has(.tac),
.middle:has(.tac) {
	flex: 0 0 100%;
	width: 100%;
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}

/*
 * Überschrift: Schrift und Grösse kommen über die Theme-Klasse .h2 (Wicklow,
 * font-size-800). Farbe explizit — das Fullscreen-Modul setzt font-color-white —
 * und Abstände fest, .styled gibt h2 sonst einen Abstand nach oben.
 */
.tac .tac__title {
	margin: 0 0 var(--spacing-unit-0-5, 1.2rem); /* die Fläche hat oben eigenen Weissraum */
	color: var(--tac-ink);
	hyphens: auto; /* «Unternehmensentwicklung» ist auf dem Handy breiter als der Bildschirm */
	overflow-wrap: break-word;
}

.tac__pin {
	position: relative;
	container-type: inline-size;
}

/*
 * Breit genug, dass nichts seitlich fährt: die Überschrift liegt im Raum oben links,
 * den die Fläche für die späten, hohen Notizen freihält — die stehen alle rechts.
 * In Grafik-Einheiten, damit sie mit der Kurve skaliert und nicht in Notizen läuft:
 * links bündig mit der Wrapper-Kante wie andere Modultitel, höchstens 1300 breit (2012 beginnt
 * bei x 1045, aber erst ab y 254; die Überschrift endet zweizeilig bei ~220).
 * 100 Einheiten ≈ 5.8rem auf 1500 px — die Grösse von .h2.
 */
@container (min-width: 1100px) {
	.tac .tac__title {
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		max-width: calc(100cqw * 1300 / 2576);
		margin: 0;
		font-size: calc(100cqw * 100 / 2576);
		line-height: 1.1;
		hyphens: manual;
		text-wrap: balance; /* «Company history / 2000 to 2026» statt «… 2000 to / 2026» */
	}
}

/* Unterhalb von 1100 px würde die Schrift zu klein: dann wird gescrollt statt gestaucht. */
.tac__scroller {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

.tac__stage {
	container-type: inline-size;
	min-width: 1100px;
}

.tac__canvas {
	--u: calc(100cqw / 2576);
	position: relative;
	/* 1206 wie das Original, plus Luft für Notizen unter der Kurve, deren Text
	   in der Theme-Schrift eine Zeile länger laufen kann */
	height: calc(1290 * var(--u));
}

/* Höhe exakt wie der viewBox, sonst zentriert das SVG ihn in der höheren Fläche */
.tac__svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(1206 * var(--u));
	overflow: visible;
}

.tac__path {
	fill: none;
	stroke: var(--tac-ink);
	stroke-width: 4;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.tac__pt,
.tac__head {
	fill: var(--tac-ink);
	stroke: var(--tac-ring);
	stroke-width: 2.5;
}

.tac__head,
.tac__pulse,
.tac__ring {
	opacity: 0;
}

.tac__pulse,
.tac__ring {
	fill: none;
	stroke: var(--tac-ink);
	stroke-width: 2;
}

.tac__ring {
	stroke-width: 2.5;
}

/* Wertbeschriftung über den Punkten — Titelschrift des Themes */
.tac__val {
	position: absolute;
	left: calc((var(--x) - 60) * var(--u));
	top: calc((var(--y) - 64) * var(--u));
	width: calc(120 * var(--u));
	text-align: center;
	font-family: var(--tac-serif);
	font-weight: normal;
	font-size: max(1.2rem, calc(32 * var(--u)));
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--tac-ink);
	white-space: nowrap;
}

/* Notizpunkt */
.tac__dot {
	position: absolute;
	left: calc(var(--x) * var(--u));
	top: calc(var(--y) * var(--u));
	width: calc(26 * var(--u));
	height: calc(26 * var(--u));
	margin: calc(-13 * var(--u)) 0 0 calc(-13 * var(--u));
	box-sizing: border-box;
	border: max(1px, calc(2 * var(--u))) solid var(--tac-ring);
	border-radius: 50%;
	background: var(--tac-ink);
}

/* Notiz: Kasten neben der Linie. Die Linie ist eine Kante des Kastens. */
.tac__note {
	position: absolute;
	box-sizing: border-box;
	width: calc(var(--w) * var(--u));
	min-width: min-content; /* nie schmaler als das längste Wort */
	font-family: var(--tac-sans);
	font-weight: normal;
	/* Original 31 in Hanken Grotesk Light; Formular läuft breiter, 29 hält die Zeilenfälle */
	font-size: max(1.2rem, calc(29 * var(--u)));
	line-height: 1.2;
	color: var(--tac-text);
	text-wrap: pretty;
	hyphens: manual;
}

.tac__note--right {
	left: calc(var(--x) * var(--u));
	padding-left: calc(28 * var(--u));
	text-align: left;
}

/* An der Linie verankert (right statt left): ist ein Wort breiter als das Feld
   («Vermögensverwalter»), wächst das Feld nach links statt über die Linie. */
.tac__note--left {
	right: calc((2576 - var(--x)) * var(--u));
	padding-right: calc(28 * var(--u));
	text-align: right;
}

/* über der Kurve: Kasten endet 12 Einheiten über dem Punkt, Text oben */
.tac__note--up {
	top: calc((var(--dot) - 12 - var(--len)) * var(--u));
	height: calc(var(--len) * var(--u));
}

.tac__note--up .tac__text {
	margin-top: calc(-8 * var(--u));
}

/* unter der Kurve: Kasten beginnt 12 Einheiten unter dem Punkt, Linie bis Textende */
.tac__note--down {
	top: calc((var(--dot) + 12) * var(--u));
	padding-top: calc(var(--len) * var(--u));
}

.tac__line {
	position: absolute;
	top: 0;
	bottom: 0;
	width: max(1px, calc(1.5 * var(--u)));
	background: var(--tac-text);
}

.tac__note--right .tac__line {
	left: calc(-0.75 * var(--u));
}

.tac__note--left .tac__line {
	right: calc(-0.75 * var(--u));
}

.tac__note--up .tac__line {
	transform-origin: 50% 100%;
}

.tac__note--down .tac__line {
	transform-origin: 50% 0;
}

.tac__para--gap {
	margin-top: 1.2em;
}

/* Beschriftung rechts neben dem letzten Punkt */
.tac__label {
	position: absolute;
	left: calc((var(--x) + 30) * var(--u));
	top: calc((var(--y) - 78) * var(--u));
	font-family: var(--tac-sans-bold);
	font-weight: normal;
	font-size: max(1.4rem, calc(46 * var(--u)));
	line-height: 1.15;
	color: var(--tac-label);
	white-space: nowrap;
}

.tac__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * Scroll-Modus (pin + scrub): die Figur wird zur Scrollstrecke, die Grafik klebt
 * darin unter der Navigation und bleibt stehen, bis die Strecke durch ist.
 * Nur mit JavaScript und ohne «reduzierte Bewegung» — sonst normales Bild im Fluss.
 */
/* --tac-logo: Unterkante des Logos, das unter die Navigation hängt. Nur der Startwert,
   bis das Skript nachgemessen hat (header.scss: 60 px Logo + 2 × 2.4rem Padding, ab
   large 190 px breit + 2 × 4.8rem). */
html.js .tac--scroll {
	--tac-top: var(--headerHeightSmall, 7.8rem);
	--tac-logo: 10.8rem;
	height: calc(var(--tac-track, 4) * 100vh);
	height: calc(var(--tac-track, 4) * 100svh);
}

@media (min-width: 1200px) {
	html.js .tac--scroll {
		--tac-top: var(--headerHeight, 16.8rem);
		--tac-logo: 23.6rem;
	}
}

/* Dockt mit etwas Luft unter der Navigation an, so hoch wie die Grafik selbst —
   ein bildschirmhoher Pin hätte sie mittig gesetzt und unter der Überschrift eine
   Lücke gelassen. */
html.js .tac--scroll .tac__pin {
	/* --tac-dock: Unterkante von Navigation und Logo, --tac-pin-top: Andockhöhe, so dass
	   die Grafik im Rest des Bildschirms vertikal mittig steht. Beides misst das Skript. */
	--tac-dock: var(--tac-logo);
	--tac-pin-top: calc(var(--tac-logo) + var(--spacing-unit-2, 4.8rem));
	position: sticky;
	top: var(--tac-pin-top);
	/* Ganz in den Bildschirm passen: die Inhaltshöhe ist ~1206 von 2576 Breite.
	   Auf niedrigen Bildschirmen wird alles schmaler, Überschrift inklusive. */
	max-width: calc((100vh - var(--tac-dock) - 9.6rem) * 2576 / 1206);
	max-width: calc((100svh - var(--tac-dock) - 9.6rem) * 2576 / 1206);
	margin-left: auto;
	margin-right: auto;
}


/* Die horizontale Fahrt auf schmalen Screens übernimmt das Skript */
@media (prefers-reduced-motion: no-preference) {
	html.js .tac--scroll .tac__scroller {
		scrollbar-width: none;
	}

	html.js .tac--scroll .tac__scroller::-webkit-scrollbar {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	html.js .tac--scroll {
		height: auto;
	}

	html.js .tac--scroll .tac__pin {
		position: static;
	}
}

/*
 * Vor dem Abspielen ist alles verborgen. Gilt nur mit JavaScript (<html class="js">,
 * gesetzt im Theme-Header) und solange das Skript noch nicht übernommen hat;
 * danach steuert es jedes Element über Inline-Styles.
 */
html.js .tac--animate:not(.is-live) :is(.tac__path, .tac__pt, .tac__val, .tac__dot, .tac__line, .tac__year, .tac__body, .tac__label) {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	html.js .tac--animate:not(.is-live) :is(.tac__path, .tac__pt, .tac__val, .tac__dot, .tac__line, .tac__year, .tac__body, .tac__label) {
		opacity: 1;
	}
}