/* streeek — Waitlist
   Farb-/Typo-Tokens aus streeek/design-system/tokens.css übernommen
   (Quelle bleibt dort führend; diese Datei ist eine eigenständige,
   nicht generierte Kopie für dieses Static-Projekt). */

@font-face {
	font-family: 'Funnel Sans';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('../fonts/funnel-sans-variable.woff2') format('woff2');
}
@font-face {
	font-family: 'Funnel Sans';
	font-style: italic;
	font-weight: 300 800;
	font-display: swap;
	src: url('../fonts/funnel-sans-italic-variable.woff2') format('woff2');
}
@font-face {
	font-family: 'Funnel Display';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('../fonts/funnel-display-variable.woff2') format('woff2');
}

:root {
	/* Primitive — aus design-system/tokens.css */
	--green-400: #adfc0f;
	--ink-900: #1b2021;
	--ink-950: #0f0f0f;
	--paper-50: #fdfffa;
	--paper-100: #f6f4f4;
	--grey-300: #d9dcd3;
	--grey-500: #7a7a78;
	--slate-600: #536265;

	/* Diese Seite: Marketing-Akzent aus dem Figma-Export (Logo-Chip, CTA-Button,
	   Headline-Akzent) — heller als das App-Grün --green-400 und bewusst nur
	   für externe Materialien; die App selbst bleibt bei --green-400. */
	--accent: #b8fc2f;
	--accent-ink: #0f0f0f;

	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-2xl: 32px;
	--radius-full: 999px;

	/* Innenabstand des Eingabefelds — Figma: 24px Desktop, 12px mobil.
	   Derselbe Wert rueckt Claim und Hinweiszeile ein, damit der Fliesstext
	   mit dem Text IM Feld fluchtet (Figma mobil: beide bei 28px vom Rand,
	   Desktop: beide bei 284px) und nicht mit der Feld-Aussenkante. */
	--field-inset: clamp(12px, 1.67vw, 24px);

	--font-sans: 'Funnel Sans', system-ui, -apple-system, sans-serif;
	--font-display: 'Funnel Display', 'Funnel Sans', system-ui, sans-serif;

	/* Raster — 1:1 aus den Figma-Layout-Guides
	   Desktop-Frame 1440: 12 Spalten, Rinne 24, Rand 24 (Spaltenbreite 94)
	   Mobile-Frame  402:  6 Spalten, Rinne 16, Rand 16 (Spaltenbreite 48,33)
	   Inhaltsspalte (Headline, Claim, Formular) liegt auf Spalte 3 bis 10. */
	--content-max: 1440px;
	--grid-cols: 12;
	--grid-gap: 24px;
	--page-gutter: 24px;

	--ease-standard: ease;
}

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

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

body {
	margin: 0;
	background: var(--paper-50);
	color: var(--ink-900);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

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

.skip-link {
	position: absolute;
	left: 12px;
	top: -48px;
	background: var(--ink-900);
	color: var(--paper-50);
	padding: 12px 18px;
	border-radius: var(--radius-md);
	z-index: 100;
	transition: top 150ms var(--ease-standard);
}
.skip-link:focus {
	top: 12px;
}

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

/* ---------- Page shell ---------- */

.page {
	max-width: var(--content-max);
	margin-inline: auto;
	padding-inline: var(--page-gutter);
	display: grid;
	grid-template-columns: repeat(var(--grid-cols), 1fr);
	column-gap: var(--grid-gap);
}

/* Inhalt sitzt auf Spalte 3 bis einschließlich 10 (Figma: x=260, Breite 920) */
.content-col { grid-column: 3 / 11; }

@media (max-width: 640px) {
	:root {
		--grid-cols: 6;
		--grid-gap: 16px;
		--page-gutter: 16px;
	}
	.content-col { grid-column: 1 / -1; }
}

/* ---------- Hero: Foto randlos, Logo + Headline als HTML, iPhones als Bild ---------- */

/* Figma (streeek-2): Desktop - 10, Frame 43 (1440 x 1392) und
   iPhone 17 - 5, Hero (402 x 640).
   Das Foto laeuft randlos ueber die volle Breite. Logo, Headline und
   iPhone-Paar sitzen auf einer Buehne mit dem Seitenverhaeltnis des
   Figma-Frames; alle Masse darauf sind cqw (1cqw = 1 % Buehnenbreite),
   also Figma-px / 14,4 auf Desktop und / 4,02 mobil. So steht jedes Teil
   bei jeder Breite dort, wo es im Frame steht. Breiter als 1440 waechst
   nur das Foto mit, die Buehne bleibt bei 1440. */
.hero {
	position: relative;
	overflow: hidden;
	background: var(--ink-900);
}

/* Foto inkl. 40 % Schwarz und Koernung, fertig aus Figma exportiert */
.hero-bg img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-stage {
	position: relative;
	max-width: 1440px;
	margin-inline: auto;
	aspect-ratio: 1440 / 1392;
	container-type: inline-size;
	/* haelt das Seitenverhaeltnis, auch wenn der Inhalt hoeher wird —
	   ohne overflow wuerde aspect-ratio die Buehne mitwachsen lassen */
	overflow: hidden;
}

/* Logo, Headline und iPhones stehen im Fluss untereinander, nicht absolut.
   Die Figma-Abstaende sind die Luecken dazwischen. Wird die Headline hoeher
   (anderer Umbruch, groessere Systemschrift, Text-Zoom), ruecken die iPhones
   mit nach unten, statt in den Text zu laufen. */

/* Figma: x 140, y 88, 248 x 56; Schatten 0 4 80 / 15 % */
.hero-logo {
	display: block;
	margin: 6.111cqw 0 0 9.722cqw;
	width: 17.222cqw;
	height: auto;
	filter: drop-shadow(0 0.278cqw 2.778cqw rgba(0, 0, 0, 0.15));
}

/* Figma: Funnel Sans ExtraBold Italic 118,55px, Zeilenhoehe 85 %,
   Laufweite -5,04px (= -0,0426em); x 139, y 294 (150 unter dem Logo),
   Breite 1161,5 */
.hero-title {
	margin: 10.417cqw 0 0 9.653cqw;
	width: 80.66cqw;
	font-family: var(--font-sans);
	font-style: italic;
	font-weight: 800;
	font-size: 8.2325cqw;
	line-height: 0.85;
	letter-spacing: -0.0426em;
	color: #fff;
}

.hero-accent { color: var(--accent); }

/* iPhone-Paar inkl. Schlagschatten; die Buehne (overflow: hidden am .hero)
   beschneidet es unten wie im Frame. Exportiert in den Render-Grenzen:
   x 129, y 523, 1128,75 breit. Die Headline endet im Browser bei
   294 + 2 x 0,85 x 118,55 = 495,5, also 27,5 darueber. */
.hero-phones img {
	display: block;
	margin: 1.91cqw 0 0 8.958cqw;
	width: 78.385cqw;
	height: auto;
}

@media (max-width: 640px) {
	.hero-stage { aspect-ratio: 402 / 640; }

	/* Figma: x 28, y 64, 136,4 x 30,8 */
	.hero-logo {
		margin: 15.92cqw 0 0 6.965cqw;
		width: 33.93cqw;
	}

	/* Figma: 49px, Laufweite -1,49px (= -0,0304em); x 28, y 153
	   (58,2 unter dem Logo), Breite 346 */
	.hero-title {
		margin: 14.478cqw 0 0 6.965cqw;
		width: 86.07cqw;
		font-size: 12.189cqw;
		letter-spacing: -0.0304em;
	}

	/* Render-Grenzen im Frame: x 0, y 316,8, volle Breite. Die Headline
	   endet bei 153 + 3 x 0,85 x 49 = 278, also 38,8 darueber. */
	.hero-phones img {
		margin: 9.664cqw 0 0;
		width: 100cqw;
	}
}

/* ---------- Content column (unterhalb des Heros) ---------- */

/* Abstände aus dem Desktop-Frame: Hero endet y=1392, Claim y=1520 (128px),
   Claim endet y=1693,6, Formular y=1750 (56px). Mobil: 32px bzw. 31px. */
.lead {
	padding-top: clamp(32px, 8.89vw, 128px);
	padding-bottom: clamp(31px, 3.89vw, 56px);
	padding-inline: var(--field-inset);
}

@media (max-width: 640px) {
	.lead { padding-top: 32px; }
}

/* Figma: Funnel Sans Bold 48px / mobil 22px, line-height 1.15 */
.lead h2 {
	margin: 0 0 8px;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: clamp(22px, 3.34vw, 48px);
	line-height: 1.15;
	color: var(--ink-900);
}

/* Figma setzt den Umbruch nach „heraus –" hart; mobil bricht der Satz frei um. */
@media (max-width: 640px) {
	.lead-break { display: none; }
}

/* Figma: Funnel Sans Medium 48px / mobil 22px, Ink auf 80 % */
.lead p {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: clamp(22px, 3.34vw, 48px);
	line-height: 1.15;
	color: rgba(27, 32, 33, 0.8);
}

/* ---------- Formular ---------- */

/* Figma: Formular 920px breit = Spalte 3–10, also volle Inhaltsspalte.
   Zeilenhöhe 96px (Desktop) bzw. 64px (mobil), Button quadratisch. */
.signup {
	padding-bottom: 8px;
	--signup-h: clamp(64px, 6.67vw, 96px);
}

.signup-row {
	display: flex;
	align-items: stretch;
	height: var(--signup-h);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.signup-row.is-loading { opacity: 0.7; }

.signup-email {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: rgba(27, 32, 33, 0.05);
	color: var(--ink-900);
	font-family: var(--font-sans);
	font-weight: 500;
	/* Figma: 32px Desktop / 20px mobil, Einzug 24px bzw. 12px */
	font-size: clamp(20px, 2.23vw, 32px);
	padding-inline: var(--field-inset);
	padding-block: 0;
	border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.signup-email::placeholder {
	color: rgba(27, 32, 33, 0.35);
}

.signup-email:focus-visible {
	outline-offset: -3px;
}

.signup-submit {
	flex: 0 0 auto;
	width: var(--signup-h); /* quadratisch, wie im Design */
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--accent);
	border: 0;
	border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
	cursor: pointer;
	transition: background 150ms var(--ease-standard);
}

.signup-submit:hover { background: var(--green-400); }
.signup-submit:disabled { cursor: default; opacity: 0.6; }

/* Figma: Pfeil 48px im 96px-Button, 32px im 64px-Button — also halbe Buttonhöhe */
.signup-submit img { width: 50%; height: 50%; }

/* Honeypot — für Menschen unsichtbar, für Bots erreichbar */
.signup-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.signup-status {
	margin-top: 16px;
	font-size: 15px;
	line-height: 1.5;
}
.signup-status:empty { display: none; }
.signup-status[data-state="error"] { color: #b91c1c; }
.signup-status[data-state="success"] { color: var(--ink-900); }

.signup-hint {
	margin-top: 16px;
	padding-inline: var(--field-inset);
	font-size: 13px;
	line-height: 1.5;
	color: var(--slate-600);
	max-width: 60ch;
}
.signup-hint a { text-decoration: underline; }

.signup-success {
	border-radius: var(--radius-lg);
	background: rgba(184, 252, 47, 0.15);
	border: 1px solid rgba(27, 32, 33, 0.1);
	padding: 24px;
	font-size: 17px;
	line-height: 1.5;
}
.signup-success[hidden] { display: none; }

/* No-JS Fallback */
.no-js-fallback { display: none; }
html:not(.js) .signup-js { display: none; }
html:not(.js) .no-js-fallback {
	display: block;
	font-size: 17px;
	line-height: 1.5;
}
html:not(.js) .no-js-fallback a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	background: var(--accent);
	color: var(--accent-ink);
	font-weight: 700;
	text-decoration: none;
	padding: 14px 24px;
	border-radius: var(--radius-lg);
}

/* ---------- Footer ---------- */

.site-footer {
	margin-top: 80px;
	padding-block: 32px 48px;
	border-top: 1px solid var(--grey-300);
}

.site-footer-inner {
	padding-inline: var(--field-inset);
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	color: var(--slate-600);
}

.site-footer nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.site-footer a {
	text-decoration: none;
	color: var(--slate-600);
}
.site-footer a:hover { color: var(--ink-900); text-decoration: underline; }

/* ---------- Statische Seiten (danke / impressum / datenschutz) ---------- */

.static-page {
	padding-block: 48px 96px;
}

/* Oberer Seitenrand nur am ersten Block, sonst addiert er sich auf jedes .page */
.static-page > .page:first-of-type { padding-top: var(--page-gutter); }

.static-page p, .static-page li { max-width: 70ch; }

.static-page h1 {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(32px, 5vw, 56px);
	line-height: 1.1;
	margin: 0 0 24px;
}

.static-page h2 {
	font-size: clamp(20px, 2.4vw, 26px);
	margin: 40px 0 12px;
}

.static-page p, .static-page li {
	font-size: 17px;
	line-height: 1.6;
	color: rgba(27, 32, 33, 0.85);
}

.static-page a { text-decoration: underline; }

.static-page .back-link {
	display: inline-block;
	margin-top: 40px;
	font-weight: 600;
}

.placeholder {
	background: rgba(184, 252, 47, 0.18);
	padding: 0 4px;
	border-radius: 4px;
}

.brand-mini {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 20px;
	color: var(--ink-900);
	text-decoration: none;
}
.brand-mini .brand-mini-icon {
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
}
.brand-mini .brand-mini-icon img { width: 13px; height: 13px; }

.danke-page {
	min-height: 70vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.danke-icon {
	width: 64px;
	height: 64px;
	border-radius: var(--radius-full);
	background: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
}

@media (max-width: 640px) {
	.site-footer-inner { flex-direction: column; align-items: flex-start; }
}