/* Startseite — eigene Gestaltung, die übrigen Seiten behalten style.css.
   Dieselbe Farbwelt wie die App: Papier, Tinte, Terrakotta. */
:root {
  --ground: #FFFFFF;
  --paper: #F6F4F1;
  --ink: #1D1A18;
  --muted: #6E6862;
  --rule: #E6E1DB;
  --accent: #9A4A31;
  --on-accent: #FAF8F5;
  --frame: #1D1D1F;

  --serif: "Newsreader", ui-serif, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Public Sans", "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0F0B09;
    --paper: #1A120D;
    --ink: #F3ECE6;
    --muted: #B3A79E;
    --rule: #2E211A;
    --accent: #C9775B;
    --on-accent: #1A120D;
    --frame: #2A2420;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

/* ── Navigation ─────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  background: color-mix(in srgb, var(--ground) 78%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 70%, transparent);
}
.nav-in {
  max-width: 1080px; margin: 0 auto; padding: 0 22px; height: 52px;
  display: flex; align-items: center; gap: 28px;
}
.logo { font-family: var(--serif); font-size: 22px; font-weight: 600; text-decoration: none; letter-spacing: -.01em; }
.nav-links { display: flex; gap: 24px; margin-left: auto; font-size: 14px; }
.nav-links a { text-decoration: none; color: var(--muted); transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
.nav .btn, .nav-links a.btn { padding: 7px 14px; font-size: 13px; color: var(--on-accent); }

/* ── Knöpfe ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--on-accent);
  text-decoration: none; font-weight: 600; font-size: 16px;
  padding: 13px 24px; border-radius: 999px;
  transition: transform .25s var(--ease), filter .25s;
}
.btn:hover { transform: scale(1.03); filter: brightness(1.06); }
.btn svg { width: 17px; height: 17px; fill: currentColor; }
.link-more { color: var(--accent); text-decoration: none; font-weight: 500; }
.link-more:hover { text-decoration: underline; }

/* ── Abschnitte allgemein ───────────────────────────────────── */
section { position: relative; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }
.eyebrow {
  font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--accent);
  margin: 0 0 12px;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(44px, 8vw, 92px); line-height: 1.02; }
h2 { font-size: clamp(36px, 5.6vw, 64px); line-height: 1.05; }
h3 { font-size: clamp(26px, 3vw, 34px); line-height: 1.12; }
.lede { font-size: clamp(19px, 2.1vw, 24px); color: var(--muted); line-height: 1.4; margin: 22px 0 0; max-width: 38ch; }

/* ── Hero ───────────────────────────────────────────────────── */
.hero { padding: 96px 0 0; text-align: center; overflow: hidden; }
.hero h1 { max-width: 13ch; margin: 0 auto; }
.hero .lede { margin-left: auto; margin-right: auto; }
.hero .actions { margin-top: 34px; display: flex; gap: 22px; justify-content: center; align-items: center; flex-wrap: wrap; }
.hero-stage { position: relative; margin-top: 70px; height: 640px; }
.hero-phone { position: absolute; left: 50%; top: 0; width: 300px; transform: translateX(-50%); will-change: transform; }
.hero-phone.side { width: 260px; top: 70px; }
.hero-phone.side.l { transform: translateX(calc(-50% - 300px)); }
.hero-phone.side.r { transform: translateX(calc(-50% + 300px)); }
.hero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(to bottom, transparent, var(--ground)); pointer-events: none; }

/* ── iPhone-Rahmen (selbst gezeichnet) ──────────────────────────
   Nach den Massen des iPhone 17: Bildschirm 402 × 874 Punkte mit rund 55
   Punkten Eckenradius, rundherum ein schmaler, gleich breiter Rand.
   Ein Element kann sich nicht selbst mit cqw messen, darum entsteht der Rand
   als Abstand des Bildschirms (der misst sich am Rahmen), und die äussere
   Rundung ist in Prozent angegeben: 17,2 % der Breite, umgerechnet auf die
   Höhe (Rahmen = 2,09 × Breite) 8,23 % — so bleibt sie kreisrund. */
.phone {
  container-type: inline-size;
  position: relative;
  border-radius: 17.2% / 8.23%;
  background: var(--frame);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--frame) 55%, #9a9a9a),
              0 40px 80px -30px rgba(40, 20, 10, .45);
}
.phone .screen {
  position: relative; aspect-ratio: 402 / 874; margin: 3.6cqw;
  border-radius: 13.6cqw; overflow: hidden; background: #fff;
}
.phone .screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Seitentasten, ganz dezent */
.phone::before, .phone::after { content: ""; position: absolute; width: .9cqw; border-radius: .5cqw; background: var(--frame); }
.phone::before { left: -.8cqw; top: 22%; height: 7%; box-shadow: 0 12cqw 0 var(--frame); }
.phone::after { right: -.8cqw; top: 28%; height: 11%; }

/* ── Geschichte: Text links, iPhone bleibt stehen ───────────── */
.story { padding: 120px 0 40px; }
.story-head { text-align: center; margin-bottom: 40px; }
.story-head h2 { max-width: 16ch; margin: 0 auto; }
.story-grid { display: grid; grid-template-columns: 1fr 360px; gap: 80px; align-items: start; }
.steps { padding: 10vh 0 20vh; }
.step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; opacity: .25; transition: opacity .6s var(--ease); }
.step.on { opacity: 1; }
.step .num { font-family: var(--serif); font-size: 18px; color: var(--accent); margin-bottom: 14px; }
.step p { font-size: clamp(18px, 1.7vw, 21px); color: var(--muted); max-width: 30ch; margin: 18px 0 0; line-height: 1.45; }
.step .inline { display: none; }
.sticky { position: sticky; top: 72px; height: calc(100vh - 96px); max-height: 780px; display: flex; align-items: center; justify-content: center; }
/* Die Höhe richtet sich nach dem Fenster, damit das iPhone nie abgeschnitten ist. */
.sticky .phone { width: min(100%, calc((100vh - 110px) * 0.465)); }
.sticky .screen img { opacity: 0; transform: scale(1.04); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.sticky .screen img.on { opacity: 1; transform: none; }

/* ── Grosser Satz, Wort für Wort ────────────────────────────── */
.statement { background: var(--paper); padding: 150px 0; }
.statement p {
  font-family: var(--serif); font-size: clamp(34px, 5.2vw, 62px); line-height: 1.12;
  letter-spacing: -.02em; max-width: 20ch; margin: 0 auto; text-align: center; text-wrap: balance;
}
.statement .w { color: color-mix(in srgb, var(--ink) 18%, transparent); transition: color .35s; }
.statement .w.lit { color: var(--ink); }

/* ── Privatsphäre ───────────────────────────────────────────── */
.privacy { padding: 140px 0; }
.privacy-head { max-width: 640px; margin-bottom: 56px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { background: var(--paper); border-radius: 28px; padding: 34px 30px 38px; }
.card .ico { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; margin-bottom: 26px; }
.card .ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card h3 { font-size: 26px; }
.card p { color: var(--muted); margin: 12px 0 0; }

/* ── Schluss ────────────────────────────────────────────────── */
.final { text-align: center; padding: 60px 0 150px; }
.final h2 { max-width: 14ch; margin: 0 auto; }
.final .lede { margin: 20px auto 34px; }

footer { border-top: 1px solid var(--rule); }
.foot { max-width: 1080px; margin: 0 auto; padding: 26px 22px 40px; display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--ink); }
.foot .copy { margin-left: auto; }

/* ── Einblenden beim Scrollen ───────────────────────────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.hero .reveal:nth-child(2) { transition-delay: .08s; }
.hero .reveal:nth-child(3) { transition-delay: .16s; }
.cards .reveal:nth-child(2) { transition-delay: .1s; }
.cards .reveal:nth-child(3) { transition-delay: .2s; }

/* ── Schmale Bildschirme ────────────────────────────────────── */
@media (max-width: 900px) {
  .nav-links a:not(.btn) { display: none; }
  .hero { padding-top: 64px; }
  .hero-stage { height: 520px; margin-top: 50px; }
  .hero-phone { width: 250px; }
  .hero-phone.side { display: none; }
  .story-grid { display: block; }
  .sticky { display: none; }
  .steps { padding: 0; }
  .step { min-height: 0; opacity: 1; padding: 50px 0; text-align: center; align-items: center; }
  .step p { margin-left: auto; margin-right: auto; }
  .step .inline { display: block; width: 250px; margin: 40px auto 0; }
  .cards { grid-template-columns: 1fr; }
  .statement { padding: 110px 0; }
  .privacy { padding: 100px 0; }
  .foot .copy { margin-left: 0; }
}

/* Wer in den Einstellungen weniger Bewegung gewählt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .step, .sticky .screen img, .btn { transition: none !important; transform: none !important; }
  .reveal { opacity: 1; }
  .statement .w { color: var(--ink); }
}