/* WebTrades – Raster, Themes, Typostufen, Signature Devices */

.wt-grid {
	width: min(100% - 2 * var(--wt-gutter), var(--wt-max));
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(var(--wt-cols), minmax(0, 1fr));
	column-gap: var(--wt-gap);
}

/* Section-Themes: explizite Farbwelten, der Header liest data-wt-theme */
.wt-theme-dark {
	--wt-fg: var(--wt-paper);
	--wt-bg: var(--wt-ink);
	--wt-muted: var(--wt-muted-dark);
	--wt-line: var(--wt-line-dark);
	--wt-seam: var(--wt-seam-dark);
	background-color: var(--wt-bg);
	color: var(--wt-fg);
}

.wt-theme-light {
	--wt-fg: var(--wt-ink);
	--wt-bg: var(--wt-paper);
	--wt-muted: var(--wt-muted-light);
	--wt-line: var(--wt-line-light);
	--wt-seam: var(--wt-seam-light);
	background-color: var(--wt-bg);
	color: var(--wt-fg);
}

.wt-section {
	position: relative;
}

/* Typostufen */
.wt-display {
	font-size: var(--wt-display);
	font-weight: 600;
	line-height: 0.85;
	letter-spacing: -0.052em;
}

.wt-h2 {
	font-size: var(--wt-h2);
	line-height: 0.92;
	letter-spacing: -0.046em;
}

.wt-h2--compact {
	font-size: var(--wt-h2-compact);
	line-height: 0.94;
	letter-spacing: -0.04em;
}

.wt-h3 {
	font-size: var(--wt-h3);
	line-height: 0.98;
	letter-spacing: -0.036em;
}

.wt-h4 {
	font-size: var(--wt-h4);
	font-weight: 560;
	line-height: 1.12;
	letter-spacing: -0.018em;
}

.wt-lead {
	font-size: var(--wt-lead);
	line-height: 1.28;
	letter-spacing: -0.014em;
	max-width: 34ch;
}

.wt-copy {
	max-width: 58ch;
}

.wt-copy > * + * {
	margin-top: 1.1em;
}

.wt-muted {
	color: var(--wt-muted);
}

/*
 * Enge Laufweite in großen Größen ist gewollt – sie verkleinert aber auch das Leerzeichen.
 * Wortzwischenräume werden deshalb gezielt ausgeglichen, damit Wörter nicht zusammenlaufen.
 */
.wt-display,
.wt-interlude__title,
.wt-page-hero__title {
	word-spacing: 0.1em;
}

.wt-h2,
.wt-h2--compact,
.wt-h3,
.wt-ps__title,
.wt-hero__substatement,
.wt-flow__step-title,
.wt-rows--partners .wt-row__title,
.wt-footer__claim-text,
.wt-closing-line__label,
.wt-menu__label {
	word-spacing: 0.08em;
}

/* Register: Mono-Kennung auf eigener Registerkante */
.wt-register {
	font-family: var(--wt-font-mono);
	font-size: var(--wt-micro);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wt-muted);
}

/* Zeilen-Masken für Headline-Reveals (Inhalt ist ohne JS vollständig sichtbar) */
.wt-line {
	display: block;
	overflow: clip;
	padding-block: 0.08em 0.1em;
	margin-block: -0.08em -0.1em;
}

.wt-line__inner {
	display: block;
}

/* SIGNATURE 01 – COMMERCE SEAM: eine präzise 1px-Linie mit höchstens einem Signal-Knoten */
.wt-seam {
	position: absolute;
	pointer-events: none;
	background: var(--wt-seam);
}

.wt-seam--h {
	height: 1px;
}

.wt-seam--v {
	width: 1px;
}

.wt-node {
	position: absolute;
	width: 6px;
	height: 6px;
	background: var(--wt-signal);
	pointer-events: none;
}