/* montserrat-regular - latin */
@font-face {
	font-display: swap;
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	src: url('fonts/montserrat-v26-latin-regular.woff2') format('woff2');
}
/* montserrat-700 - latin */
@font-face {
	font-display: swap;
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 700;
	src: url('fonts/montserrat-v26-latin-700.woff2') format('woff2');
}

:root {
	--black:    #000000;
	--panel:    #0c0c0e;
	--panel-up: #151518;
	--line:     rgba(255, 255, 255, .13);
	--line-dim: rgba(255, 255, 255, .06);
	--text:     #f2f2f0;
	--dim:      #8c8c92;

	/* Bernstein der Anzeigenbeleuchtung an Hi-Fi-Geräten */
	--amber:     #ffb454;
	--amber-off: #6e5228;
	/* aus dem Cover im Hero: Sonnenuntergang und Neonschrift */
	--dusk: #e0855a;
	--neon: #59a8de;

	--sans: 'Montserrat', system-ui, sans-serif;
	--mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

	--gutter: clamp(1.25rem, 5vw, 5rem);
	--measure: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--black);
	color: var(--text);
	font-family: var(--sans);
	font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
	line-height: 1.65;
	overflow-x: hidden;
}

a { color: var(--amber); }

:focus-visible {
	outline: 2px solid var(--amber);
	outline-offset: 3px;
}

img { max-width: 100%; height: auto; display: block; }

.wrap {
	max-width: var(--measure);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }

.section + .section { border-top: 1px solid var(--line-dim); }

/* ── Gravierte Beschriftung, wie auf einer Gerätefront ───────────── */

.engraved {
	font-family: var(--mono);
	font-size: .6875rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--dim);
	margin: 0;
}

.engraved--amber { color: var(--amber); }

h1, h2, h3 {
	font-weight: 700;
	letter-spacing: -.035em;
	line-height: 1.04;
	margin: 0;
	text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 7vw, 5.25rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.25rem); }
h3 { font-size: 1.0625rem; letter-spacing: -.01em; line-height: 1.3; }

.lede {
	font-size: clamp(1.0625rem, 1rem + .5vw, 1.375rem);
	color: var(--dim);
	max-width: 34ch;
}

/* ── Kopfzeile ──────────────────────────────────────────────────── */

.masthead {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding-block: 1.25rem;
	border-bottom: 1px solid var(--line-dim);
}

/* Das App-Icon liegt unmaskiert vor; iOS' Squircle-Radius nachbilden */
.masthead__mark {
	width: 40px;
	height: 40px;
	border-radius: 22%;
}

.masthead__name {
	font-weight: 700;
	letter-spacing: -.02em;
	font-size: 1.125rem;
}

.sitenav { display: flex; gap: 1rem; align-items: center; margin-left: auto; }
.sitenav a { font-size: 0.85rem; letter-spacing: 0.04em; text-decoration: none; color: inherit; opacity: 0.75; }
.sitenav a:hover { opacity: 1; }
.sitenav__lang { border: 1px solid currentColor; border-radius: 999px; padding: 0.15rem 0.6rem; }
body.privacy .sitenav { padding: 1rem 1.25rem; max-width: 60rem; margin: 0 auto; justify-content: space-between; }

/* ── Hero ───────────────────────────────────────────────────────── */

.hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(3.5rem, 9vw, 7rem) clamp(4rem, 10vw, 8rem);
}

/* Farbschimmer des Covers, den die App selbst hinter den Player legt */
.hero::before {
	content: "";
	position: absolute;
	inset: -8% -6% auto -6%;
		height: 108%;
	z-index: -1;
	pointer-events: none;
	background:
			radial-gradient(38% 34% at 74% 34%, rgba(224, 133, 90, .3), transparent 70%),
			radial-gradient(32% 30% at 84% 64%, rgba(89, 168, 222, .18), transparent 72%);
	filter: blur(20px);
}

.hero__grid {
	display: grid;
	gap: clamp(3rem, 6vw, 5rem);
	align-items: center;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}

.hero h1 { margin-block: 1.5rem 1.75rem; }

.hero .lede { margin: 0 0 2.5rem; }

/* ── Geräterahmen um den Screenshot ─────────────────────────────── */

.device {
	--radius: 2.75rem;
	position: relative;
	width: min(100%, 320px);
	margin-inline: auto;
	padding: .5rem;
	border-radius: var(--radius);
	background: linear-gradient(160deg, #2c2c30, #0a0a0c 55%);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, .1),
		0 2.5rem 5rem rgba(0, 0, 0, .8);
}

.device img {
	border-radius: calc(var(--radius) - .5rem);
	width: 100%;
}

.device__caption {
	position: absolute;
	left: 50%;
	bottom: -2.75rem;
	transform: translateX(-50%);
	white-space: nowrap;
}

/* ── App-Store-Badge ────────────────────────────────────────────── */

.badge {
	display: inline-block;
	transition: opacity .2s ease;
}

.badge img { width: 168px; }

.badge:hover { opacity: .78; }

/* ── Signature: Abtastraten-Anzeige ─────────────────────────────── */

.meters {
	display: grid;
	grid-template-columns: 2fr 1fr;
	margin: clamp(2rem, 4vw, 3rem) 0;
	border-block: 1px solid var(--line);
}

.meters > * + * { border-left: 1px solid var(--line); }

.meter { padding-block: clamp(1.5rem, 3.5vw, 2.75rem); }

.meter__label { padding-inline: clamp(.75rem, 2vw, 1.5rem); margin-bottom: 1.25rem; }

.rates {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rates li {
	font-family: var(--mono);
	font-size: clamp(1.25rem, 4.4vw, 4rem);
	line-height: 1;
	text-align: center;
	color: var(--amber-off);
	transition: color .45s ease, text-shadow .45s ease;
}

.rates li + li { border-left: 1px solid var(--line-dim); }

.rates li.is-lit {
	color: var(--amber);
	text-shadow: 0 0 2.25rem rgba(255, 180, 84, .55);
}

.rates .unit {
	display: block;
	margin-top: .75rem;
	font-size: .6875rem;
	letter-spacing: .18em;
	color: var(--dim);
	text-shadow: none;
}

.rates--static li:last-child { color: var(--amber); }

/* ── Signalwege ─────────────────────────────────────────────────── */

.paths {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	margin-top: 3rem;
}

.path {
	margin: 0;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: 1px solid var(--line);
	border-radius: 1rem;
	background: var(--panel);
}

.path--ours { border-color: rgba(255, 180, 84, .3); }

.path svg {
	width: 100%;
	height: auto;
	margin-block: 1.5rem;
}

.path figcaption { color: var(--dim); margin: 0; font-size: .9375rem; }

.path figcaption strong { color: var(--text); font-weight: 700; }

/* ── Funktionen ─────────────────────────────────────────────────── */

.split {
	display: grid;
	gap: clamp(2.5rem, 6vw, 5rem);
	grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
	align-items: start;
}

.features {
	display: grid;
	gap: 1.75rem 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	margin-top: 3rem;
	padding: 0;
	list-style: none;
}

.features li { border-top: 1px solid var(--line); padding-top: 1rem; }

.features p { margin: .375rem 0 0; color: var(--dim); font-size: .9375rem; }

.shot {
	border: 1px solid var(--line);
	border-radius: .875rem;
	overflow: hidden;
	background: var(--panel);
}

.shot figcaption {
	padding: .875rem 1rem;
	border-top: 1px solid var(--line);
}

/* ── Datenblatt ─────────────────────────────────────────────────── */

.specs {
	margin-top: 2.5rem;
	border-top: 1px solid var(--line);
}

.specs div {
	display: grid;
	gap: .25rem 2rem;
	grid-template-columns: 11rem minmax(0, 1fr);
	padding-block: 1.125rem;
	border-bottom: 1px solid var(--line-dim);
}

.specs dt { padding-top: .3rem; }

.specs dd { margin: 0; }

/* ── Abschluss vor dem Footer ───────────────────────────────────── */

.closing { text-align: center; }

.closing p {
	max-width: 46ch;
	margin-inline: auto;
	color: var(--dim);
}

.closing .badge { margin-top: 3rem; }

/* ── Footer ─────────────────────────────────────────────────────── */

.colophon {
	padding-block: clamp(3.5rem, 7vw, 6rem);
	border-top: 1px solid var(--line);
	color: var(--dim);
	font-size: .9375rem;
}

.colophon__grid {
	display: grid;
	gap: 2.5rem 3rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.colophon h2 {
	font-family: var(--mono);
	font-size: .6875rem;
	font-weight: 400;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--dim);
	margin-bottom: 1rem;
}

.colophon p { margin: 0 0 .5rem; }

.colophon a { color: var(--text); }

.colophon strong { color: var(--text); }

.reverse { unicode-bidi: bidi-override; direction: rtl; }

.fineprint {
	margin-top: 3.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line-dim);
	font-size: .8125rem;
}

/* ── Schmale Viewports ──────────────────────────────────────────── */

@media (max-width: 56rem) {
	.hero__grid,
	.split {
		grid-template-columns: minmax(0, 1fr);
	}

	.hero__grid { gap: clamp(4rem, 12vw, 5rem); }

	.device { margin-bottom: 2.5rem; }

	.specs div { grid-template-columns: minmax(0, 1fr); }

	.specs dt { padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* ── Fließtextseiten (Datenschutzerklärung) ─────────────────────── */

.content-box {
	max-width: 46rem;
	margin-inline: auto;
	padding: clamp(2.5rem, 7vw, 5rem) var(--gutter) clamp(5rem, 10vw, 8rem);
}

.content-box h1 {
	font-size: clamp(1.875rem, 4vw, 2.75rem);
	margin-bottom: 2.5rem;
}

.content-box h2 {
	font-size: clamp(1.125rem, 2vw, 1.375rem);
	letter-spacing: -.01em;
	margin-top: 3rem;
	margin-bottom: .75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line-dim);
}

.content-box p,
.content-box li {
	color: var(--dim);
	font-size: .9375rem;
}

.content-box strong { color: var(--text); }

.content-box ul,
.content-box ol { padding-left: 1.25rem; }

.content-box li { margin-bottom: .5rem; }

.content-box .seal { margin-top: 4rem; font-size: .8125rem; }

/* ── Kleingedrucktes unter dem Datenblatt ───────────────────────── */

.footnote {
	margin-top: 2rem;
	font-size: .8125rem;
	line-height: 1.6;
	color: var(--dim);
}

.lede--wide { max-width: 54ch; margin-top: 0; }

.prose { color: var(--dim); margin-top: 1.5rem; }

.closing p { margin-top: 1.5rem; }

/* ── Markenzeichen: derselbe Anzeigenrahmen wie die Abtastraten ──── */

.triad {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 0;
	padding: clamp(1.75rem, 4vw, 3rem) 0;
	border-block: 1px solid var(--line);
	list-style: none;
}

.triad li {
	font-size: clamp(1.125rem, 3.2vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.1;
	text-align: center;
}

.triad li + li { border-left: 1px solid var(--line-dim); }

@media (max-width: 34rem) {
	.triad { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
	.triad li + li { border-left: 0; }
}

@media (max-width: 40rem) {
	.meters { grid-template-columns: minmax(0, 1fr); }
	.meters > * + * { border-left: 0; border-top: 1px solid var(--line); }
}

/* ── Klammer unter der Skala: welche Rate zu welcher Stufe gehoert ─ */

.bands {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 1.25rem 0 0;
}

.bands span {
	padding-top: .75rem;
	border-top: 1px solid var(--line);
	font-family: var(--mono);
	font-size: .625rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--dim);
	text-align: center;
}

/* ── Das iPad auf dem Regal, wie in den App-Store-Bildern ────────── */

.stage {
	margin: clamp(2.5rem, 5vw, 4rem) auto 0;
	width: min(100%, 60rem);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.pad {
	width: 88%;
	padding: .5rem;
	border-radius: 1.5rem;
	background: linear-gradient(160deg, #34343a, #0a0a0c 55%);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 2.5rem 5rem rgba(0, 0, 0, .85);
}

.pad img { width: 100%; border-radius: 1.1rem; }

/* Bretter und Verstärker als Strichzeichnung — nur das Display trägt Farbe */
.rack { width: 100%; height: auto; margin-top: -.3rem; }

.stage figcaption { margin-top: 1.5rem; text-align: center; }

/* Die beiden Faelle muessen sich auf einen Blick unterscheiden lassen */
.path__title {
	margin: 0 0 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--line);
	font-family: var(--mono);
	font-size: clamp(.875rem, 1.3vw, 1.0625rem);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text);
}

.path--ours .path__title {
	color: var(--amber);
	border-bottom-color: rgba(255, 180, 84, .35);
}

/* Die Farbe trägt den Gegensatz: Einschränkung weiß, Lösung bernstein */
.lit { color: var(--amber); }