/* 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 {
	/* Der Markengrund der App: das Dunkelgrün des Icons */
	--ground:   #0C1A15;
	--ground-2: #04090B;
	--panel:    rgba(255, 255, 255, .06);
	--line:     rgba(234, 244, 237, .14);
	--line-dim: rgba(234, 244, 237, .06);
	--text:     #EAF4ED;
	--dim:      #8FA79A;

	/* Markengrün: Sieg, laufend, auf dem Platz. Lime: Beschriftung. */
	--green: #14BF78;
	--neon:  #C7E021;

	--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: linear-gradient(160deg, var(--ground), var(--ground-2) 70%) fixed;
	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(--green); }

:focus-visible {
	outline: 2px solid var(--neon);
	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 die Sektionsüberschriften der App ─ */

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

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

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

/* Silbentrennung für die langen deutschen Wörter in den Überschriften;
   die Größe wächst langsamer, damit die Hero-Spalte auf dem iPad nicht
   in Einwortzeilen zerfällt */
h2 { hyphens: auto; -webkit-hyphens: auto; }

/* Keine Trennung im Hero: „Hand-gelenk" darf dort nicht passieren */
h1 { font-size: clamp(2.5rem, 5.4vw, 4.25rem); hyphens: manual; -webkit-hyphens: manual; text-wrap: initial; }
h2 { font-size: clamp(2rem, 4.6vw, 3.25rem); }
h3 { font-size: 1.0625rem; letter-spacing: -.01em; line-height: 1.3; }

.lit { color: var(--green); }

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

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

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

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

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

.masthead__mark {
	width: 40px;
	height: 40px;
	border-radius: 22%;
}

/* Sprachwechsel rechts in der Kopfzeile */
.masthead__switch {
	margin-left: auto;
	font-family: var(--mono);
	font-size: .6875rem;
	letter-spacing: .18em;
	text-decoration: none;
	color: var(--dim);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: .35rem .7rem;
}

.masthead__switch:hover { color: var(--text); border-color: var(--text); }

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

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

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

/* Der Anstoßkreis des Icons, angeschnitten wie in der App */
.hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	width: 120vw;
	height: 120vw;
	left: 50%;
	top: 68%;
	transform: translateX(-50%);
	border-radius: 50%;
	border: 2vw solid rgba(234, 244, 237, .045);
}

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

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

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

/* ── Geräterahmen ───────────────────────────────────────────────── */

.device {
	--radius: 2.75rem;
	position: relative;
	width: min(100%, 320px);
	margin-inline: auto;
	padding: .5rem;
	border-radius: var(--radius);
	background: linear-gradient(160deg, #26302B, #06100C 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,
.watch__caption {
	position: absolute;
	left: 50%;
	bottom: -2.75rem;
	transform: translateX(-50%);
	white-space: nowrap;
}

/* Die Uhr: Gehäuse mit Krone, wie in den Store-Bildern */
.watch {
	position: relative;
	width: min(100%, 300px);
	margin-inline: auto;
	padding: 1rem;
	border-radius: 3.6rem;
	background: linear-gradient(160deg, #2A332E, #06100C 60%);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, .12),
		inset 0 0 0 .3rem #0A0F0C,
		0 2.5rem 5rem rgba(0, 0, 0, .8);
}

.watch__screen {
	border-radius: 2.7rem;
	overflow: hidden;
	background: #000;
}

.watch__screen img { width: 100%; }

.watch__crown {
	position: absolute;
	right: -.55rem;
	top: 27%;
	width: .65rem;
	height: 2.2rem;
	border-radius: .25rem;
	background: linear-gradient(90deg, #3A443E, #141A17);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .1);
}

.watch__crown::after {
	content: "";
	position: absolute;
	right: 0;
	top: 3.2rem;
	width: .5rem;
	height: 1.5rem;
	border-radius: .25rem;
	background: linear-gradient(90deg, #3A443E, #141A17);
}

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

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

.badge img { width: 168px; }

.badge:hover { opacity: .78; }

/* ── Signature: Spiele gegen Einsätze ───────────────────────────── */

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

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

.tally div {
	padding-block: clamp(1.5rem, 3.5vw, 2.75rem);
	text-align: center;
}

.tally strong {
	display: block;
	font-family: var(--mono);
	font-size: clamp(2.5rem, 6vw, 5rem);
	line-height: 1;
	color: var(--text);
}

.tally strong.is-lit {
	color: var(--green);
	text-shadow: 0 0 2.25rem rgba(20, 191, 120, .45);
}

.tally .engraved { margin-top: 1rem; }

/* ── Der Weg: iPhone → Uhr → Bericht ────────────────────────────── */

.steps {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	margin-top: 3rem;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

.steps li {
	position: relative;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: 1px solid var(--line);
	border-radius: 1rem;
	background: var(--panel);
}

.steps li::before {
	counter-increment: step;
	content: counter(step);
	display: block;
	font-family: var(--mono);
	font-size: .6875rem;
	letter-spacing: .18em;
	color: var(--neon);
	margin-bottom: 1rem;
}

/* Neben dem Formular: zwei mal zwei statt drei plus eins */
.split .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.steps h3 { margin-bottom: .5rem; }

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

/* ── 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; }

/* Bild links, Text rechts — die Spalten tauschen, der Text bleibt schmal */
.split--reverse { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: center; }

/* Kürzere Liste neben einem hohen Bild: eine Spalte, enger gesetzt */
.features--tight { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 2rem; max-width: 34rem; }

/* ── Share-Karte: das Bild selbst, wie es im Chat ankommt ─────────── */

.card {
	width: min(100%, 26rem);
	margin: clamp(2.5rem, 5vw, 4rem) auto 0;
	border-radius: 1.5rem;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 2.5rem 5rem rgba(0, 0, 0, .8);
}

.card img { width: 100%; }

/* Die Uhr unter dem Text, links ausgerichtet, mit Luft für die Unterschrift */
.watch--inline { margin: 3rem 0 3.5rem; width: min(100%, 240px); padding: .8rem; border-radius: 2.9rem; }

.watch--inline .watch__screen { border-radius: 2.15rem; }

/* ── Fragen ─────────────────────────────────────────────────────── */

.faq {
	display: grid;
	gap: 2rem 3rem;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	margin: 3rem 0 0;
}

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

.faq dt { font-weight: 700; letter-spacing: -.01em; }

.faq dd { margin: .5rem 0 0; color: var(--dim); font-size: .9375rem; }

/* ── Die Uhr in Reihe: vier Screens ─────────────────────────────── */

.faces {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	margin-top: 3rem;
	padding: 0;
	list-style: none;
}

.faces li { text-align: center; }

.faces .watch { width: min(100%, 220px); padding: .7rem; border-radius: 2.6rem; }

.faces .watch__screen { border-radius: 1.95rem; }

.faces .watch__crown { right: -.4rem; width: .5rem; height: 1.6rem; }

.faces .watch__crown::after { top: 2.3rem; height: 1.1rem; }

.faces figcaption { margin-top: 1.25rem; }

/* ── Markenzeichen ──────────────────────────────────────────────── */

.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); }

/* ── 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; }

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

/* ── Abschluss ──────────────────────────────────────────────────── */

.closing { text-align: center; }

.closing p {
	max-width: 46ch;
	margin: 1.5rem auto 0;
	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;
}

/* ── 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; }

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

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

	.split--reverse .device { order: 2; }

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

	.device, .hero .watch { margin-bottom: 2.5rem; }

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

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

@media (max-width: 40rem) {
	.tally { grid-template-columns: minmax(0, 1fr); }
	.tally > * + * { border-left: 0; border-top: 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 (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

.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; }