/* Sprout Tasks – landing page (sprouttasks.com/index.html).
   Sam (2026-09-27, docs/23): Redesign nach Mockup round 1 (docs/mockups/website/round1.html).
   Eigenständiges Stylesheet – index.html lädt style.css nicht, damit die alten
   .landing-page-Regeln nicht mit dem neuen Layout kollidieren. Paletten-Tokens = Sage-Theme
   wie in style.css. Strikte CSP (style-src 'self'): keine style-Attribute im HTML. */

/* ---------- fonts (self-hosted, SIL OFL – see fonts/OFL.txt) ---------- */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-latin-opsz96-wght700-800.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/figtree-latin-wght400-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens ---------- */
:root {
  color-scheme: light;
  --ground: #fbfaf6; --surface: #ffffff; --sunken: #f2f5ef;
  --ink: #1f2a23; --muted: #5d6b63; --line: #e3e8e1;
  --sage: #8fbfa0; --sage-deep: #3f6b4d; --sage-deeper: #2e5039; --sage-wash: #dcefe2;
  --peach: #f2a488; --peach-wash: #fbe3d8; --peach-deep: #a05a3e;
  --lav: #b8a9d9; --lav-wash: #e9e2f6; --lav-deep: #6a5a94;
  --blue-wash: #d6e8f5;
  --band: #26392d; --band-ink: #eef4ef; --band-muted: #b5c7ba; --band-accent: #bfe3cc;
  --err: #b3362c;
  --on-sage: #ffffff;
  --shadow: 0 1px 2px rgba(38,57,45,.06), 0 10px 30px rgba(38,57,45,.08);
  --phone-edge: #1d231f;
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --body: "Figtree", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
/* Sam (2026-09-28): theme.js setzt data-theme="light|dark" (eigene Wahl oder System). Ohne JS
   gilt weiter die Systemeinstellung; beide Blöcke tragen dieselben Werte. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #121814; --surface: #1a221d; --sunken: #161d19;
    --ink: #e7eee9; --muted: #a2b2a8; --line: #2b362f;
    --sage: #8fd77a; --sage-deep: #9fd0b0; --sage-deeper: #c2e6cf; --sage-wash: #22391c;
    --peach-wash: #3a2a23; --peach-deep: #f2b49c; --lav-wash: #2c2640; --lav-deep: #c9bcec; --blue-wash: #1f3140;
    --band: #0c110e; --band-ink: #e7eee9; --band-muted: #9fb3a6;
    --err: #ff8a7e;
    --on-sage: #0f1a13;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.35);
    --phone-edge: #050706;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #121814; --surface: #1a221d; --sunken: #161d19;
  --ink: #e7eee9; --muted: #a2b2a8; --line: #2b362f;
  --sage: #8fd77a; --sage-deep: #9fd0b0; --sage-deeper: #c2e6cf; --sage-wash: #22391c;
  --peach-wash: #3a2a23; --peach-deep: #f2b49c; --lav-wash: #2c2640; --lav-deep: #c9bcec; --blue-wash: #1f3140;
  --band: #0c110e; --band-ink: #e7eee9; --band-muted: #9fb3a6;
  --err: #ff8a7e;
  --on-sage: #0f1a13;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.35);
  --phone-edge: #050706;
}

/* ---------- i18n visibility ----------
   i18n.js setzt .lang-active; landing.js setzt html.lang-ready beim ersten
   sprout-lang-changed. Bis dahin (oder ohne JS) ist Englisch sichtbar. */
html:not(.lang-ready) [data-lang]:not([data-lang="en"]),
html.lang-ready [data-lang]:not(.lang-active) { display: none !important; }
[hidden] { display: none !important; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 1.0625rem/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
@supports (overflow: clip) { body { overflow-x: clip; } }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--sage-deep); }
:focus-visible { outline: 3px solid var(--peach); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 1140px; margin: 0 auto; padding-inline: 24px; }
@media (max-width: 520px) { .wrap { padding-inline: 16px; } }
h1, h2, h3 { font-family: var(--display); line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; margin: 0; }
h2 { font-size: clamp(2rem, 4.4vw, 3.25rem); font-weight: 800; }
h3 { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.lede { font-size: 1.15rem; color: var(--muted); max-width: 34em; }
.kicker { font: 600 .78rem/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--sage-deep); }
.kicker + h2, .kicker + h1 { margin-top: 12px; }
.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: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: var(--ground); font-weight: 600; transform: translateY(-160%); transition: transform .15s; }
.skip-link:focus { transform: none; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; background: var(--sage-deep); color: var(--on-sage); font: 700 1rem var(--body); text-decoration: none; border: 0; cursor: pointer; transition: transform .15s ease, background .15s; }
.btn:hover { background: var(--sage-deeper); color: var(--on-sage); transform: translateY(-1px); }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: .92rem; }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { background: var(--sunken); color: var(--ink); }

/* ---------- header ---------- */
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 800 1.2rem var(--display); color: var(--ink); text-decoration: none; letter-spacing: -.01em; white-space: nowrap; }
.brand img { width: 34px; height: 34px; }
.nav { display: flex; align-items: center; gap: 22px; font-weight: 500; font-size: .95rem; margin-left: auto; }
.nav a { color: var(--muted); text-decoration: none; }
.nav a:hover { color: var(--ink); }
.head-tools { display: flex; align-items: center; gap: 14px; }
.lang-flags { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.lang-flags button { font: 600 .78rem var(--body); color: var(--muted); background: transparent; border: 0; border-radius: 999px; min-width: 32px; min-height: 32px; padding: 0 7px; cursor: pointer; }
.lang-flags button:hover { color: var(--ink); }
.lang-flags button.active { background: var(--sage-wash); color: var(--sage-deeper); }
/* Hell/Dunkel (theme.js): Mond im hellen, Sonne im dunklen Design */
.theme-toggle { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
.theme-toggle:hover { color: var(--ink); background: var(--sunken); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .ti-sun, :root[data-theme="dark"] .theme-toggle .ti-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .ti-sun { display: block; }
@media (max-width: 860px) { .nav { display: none; } }
@media (max-width: 560px) {
  .site-head .wrap { padding-block: 12px; gap: 10px; }
  .brand { font-size: 1.08rem; gap: 8px; }
  .brand img { width: 30px; height: 30px; }
  .head-tools { gap: 8px; }
  .btn-sm { min-height: 44px; padding: 0 14px; font-size: .88rem; }
  .lang-flags button { min-width: 36px; min-height: 44px; padding: 0 5px; }
  .theme-toggle { width: 44px; height: 44px; }
}
@media (pointer: coarse) {
  .lang-flags button { min-width: 44px; min-height: 44px; }
  .btn-sm { min-height: 44px; }
  .theme-toggle { width: 44px; height: 44px; }
}
/* Sam (2026-09-27): bis 640 px zweizeilig – Marke + "Mittesten" oben, Sprachen darunter,
   damit alle Tippziele 44 px bleiben (auch lange CTA-Texte in es/fr) und nichts horizontal scrollt. */
@media (max-width: 640px) {
  .site-head .wrap { flex-wrap: wrap; row-gap: 8px; }
  .head-tools { display: contents; }
  .brand { order: 1; margin-right: auto; }
  .head-cta { order: 2; }
  .lang-flags { order: 3; }
  .theme-toggle { order: 4; }
  .lang-flags button { min-width: 44px; }
}

/* ---------- hero ---------- */
.hero { padding-block: 28px 72px; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
/* Obergrenze so gewählt, dass das nicht umbrechende Zitat (auch «¿a quién le toca?») in die
   Textspalte passt; ab 1600 px (breitere Spalte) darf es auf 5.1rem wachsen. */
.hero h1 { margin-top: 14px; font-size: clamp(2.5rem, 6vw, 4.4rem); font-weight: 800; letter-spacing: -.035em; overflow-wrap: break-word; }
.hero h1 .q { color: var(--peach-deep); }
@media (min-width: 700px) { .hero h1 .q { white-space: nowrap; } }
.hero .lede { margin-top: 22px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; font-size: .9rem; color: var(--muted); }
.facts li { display: inline-flex; align-items: center; gap: 7px; }
.facts li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sage); }
.stage { position: relative; display: flex; justify-content: center; min-height: 560px; }
.stage .blob { position: absolute; inset: 6% -10% 0 4%; border-radius: 48% 52% 42% 58% / 55% 45% 55% 45%; background: radial-gradient(circle at 30% 30%, var(--peach-wash), transparent 60%), radial-gradient(circle at 75% 70%, var(--lav-wash), transparent 60%), var(--sage-wash); opacity: .9; }
.phone { position: relative; width: min(290px, 72vw); border-radius: 40px; padding: 9px; background: var(--phone-edge); box-shadow: 0 30px 60px -20px rgba(31,42,35,.45), 0 0 0 1px rgba(255,255,255,.06) inset; }
.phone img { border-radius: 32px; width: 100%; }
.stage .phone { transform: rotate(3deg); margin-top: 10px; align-self: flex-start; }

/* interactive whose-turn card */
.turn { position: absolute; left: -6%; bottom: 40px; width: min(360px, 86vw); background: var(--surface); border-radius: 22px; padding: 16px 16px 14px; box-shadow: var(--shadow), 0 0 0 2px var(--peach); transform: rotate(-2deg); }
.turn-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.turn-top b { font: 700 1.02rem var(--display); }
.turn-top small { color: var(--muted); font-size: .8rem; }
.turn-row { display: flex; align-items: center; gap: 12px; background: var(--sunken); border-radius: 16px; padding: 10px 12px; margin-top: 10px; }
.av { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 700 1rem var(--body); color: #26392d; }
.av.J { background: #bcdcf0; } .av.M { background: #cfe9d6; } .av.E { background: #f7d3c3; }
.turn-name { flex: 1; min-width: 0; }
.turn-name b { display: block; font-size: 1.05rem; }
.turn-name .turn-next { display: block; font-size: .85rem; color: var(--muted); }
.turn-actions { display: flex; gap: 8px; margin-top: 10px; }
.chip-btn { flex: 1; min-height: 44px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: 600 .92rem var(--body); cursor: pointer; }
.chip-btn.primary { background: var(--sage-wash); border-color: transparent; color: var(--sage-deeper); }
.chip-btn:hover { border-color: var(--sage); }
.xp { position: absolute; right: 18px; top: -14px; background: var(--sage-deep); color: var(--on-sage); font: 700 .9rem var(--body); padding: 6px 12px; border-radius: 999px; opacity: 0; pointer-events: none; }
.xp.go { animation: xp 1.1s ease-out; }
@keyframes xp { 0% { opacity: 0; transform: translateY(10px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-34px); } }
.turn-name.swap { animation: swap .35s ease; }
@keyframes swap { 0% { opacity: .2; transform: translateX(10px); } 100% { opacity: 1; transform: none; } }
.try { position: absolute; left: -2%; bottom: calc(40px + 190px); font: 600 .8rem var(--body); color: var(--peach-deep); transform: rotate(-4deg); }
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .stage { min-height: 0; padding-bottom: 150px; }
  .turn { left: 50%; bottom: 0; transform: translateX(-50%) rotate(-1.5deg); }
  .try { display: none; }
  .phone { width: min(250px, 62vw); }
}

/* ---------- problem ---------- */
.problem { padding-block: 72px; background: var(--sunken); border-block: 1px solid var(--line); }
.problem .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.chat { display: flex; flex-direction: column; gap: 10px; max-width: 400px; }
.bubble { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 20px 20px 20px 6px; padding: 10px 16px; font-size: 1.02rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.bubble.me { align-self: flex-end; background: var(--sage-wash); border-color: transparent; border-radius: 20px 20px 6px 20px; }
.bubble small { display: block; font-size: .72rem; color: var(--muted); font-weight: 600; }
.bubble.fix { align-self: stretch; background: var(--band); color: var(--band-ink); border: 0; border-radius: 18px; font-weight: 600; }
.bubble.fix small { color: var(--band-muted); }
.problem .lede { margin-top: 18px; }
@media (max-width: 800px) { .problem .wrap { grid-template-columns: minmax(0, 1fr); } }

/* ---------- steps ---------- */
.steps { padding-block: 88px 40px; scroll-margin-top: 16px; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; counter-reset: s; }
.step { position: relative; padding: 26px 24px 24px; border-top: 2px solid var(--ink); }
.step::before { counter-increment: s; content: counter(s); font: 800 3.2rem/1 var(--display); color: var(--sage); display: block; margin-bottom: 14px; }
.step p { color: var(--muted); margin-top: 8px; }
@media (max-width: 760px) { .steps-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- bento ---------- */
.features { padding-block: 48px 96px; }
.features .head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.features .head .lede { max-width: 26em; }
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.tile { position: relative; border-radius: 28px; padding: 26px; overflow: hidden; display: flex; flex-direction: column; gap: 8px; min-height: 300px; }
.tile p { color: var(--muted); font-size: .98rem; max-width: 30em; }
.tile .shot { margin-top: auto; align-self: center; width: 78%; max-width: 260px; border-radius: 22px 22px 0 0; border: 7px solid var(--phone-edge); border-bottom: 0; margin-bottom: -26px; box-shadow: var(--shadow); background: var(--phone-edge); }
.tile .shot img { border-radius: 15px 15px 0 0; width: 100%; }
.t-sched { grid-column: span 3; grid-row: span 2; background: var(--peach-wash); }
.t-xp { grid-column: span 3; background: var(--sage-wash); flex-direction: row; align-items: flex-end; gap: 18px; }
.t-xp .txt { flex: 1; align-self: flex-start; display: flex; flex-direction: column; gap: 8px; }
.t-xp .shot { width: 44%; margin: 0 0 -26px; align-self: flex-end; }
.t-notes { grid-column: span 3; background: var(--surface); border: 1px solid var(--line); }
.t-cal { grid-column: span 2; background: var(--blue-wash); }
.t-theme { grid-column: span 2; background: var(--surface); border: 1px solid var(--line); }
.t-roles { grid-column: span 2; background: var(--lav-wash); }
.t-sched .shot { width: 70%; max-width: 300px; }
/* Sam (2026-10-04, promo batch 0.35): Einkaufs- und Kochansicht als breite Kachel, zwei Telefone */
.t-kitchen { grid-column: span 6; background: var(--peach-wash); flex-direction: row; align-items: flex-end; gap: 28px; min-height: 340px; }
.t-kitchen .txt { flex: 1; align-self: center; display: flex; flex-direction: column; gap: 8px; padding-bottom: 26px; }
.t-kitchen .shots { flex: 1; display: flex; justify-content: center; gap: 18px; align-self: flex-end; }
.t-kitchen .shot { width: 46%; max-width: 230px; margin: 0 0 -26px; align-self: flex-end; }
.t-kitchen .shot + .shot { margin-bottom: -60px; }
.calc { margin-top: auto; display: grid; gap: 10px; }
.calc table { width: 100%; border-collapse: collapse; font-size: .95rem; font-variant-numeric: tabular-nums; }
.calc td { padding: 8px 4px; border-bottom: 1px solid var(--line); }
.calc td:last-child { text-align: right; white-space: nowrap; }
.calc td:nth-child(2) { color: var(--muted); }
.calc .res { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; background: var(--sage-wash); border-radius: 14px; padding: 12px 16px; font-weight: 600; }
.calc .res b { font: 800 1.7rem var(--display); color: var(--sage-deeper); font-variant-numeric: tabular-nums; white-space: nowrap; }
.swatches { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.sw { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 1.5px var(--line); cursor: pointer; padding: 0; }
.sw[aria-pressed="true"] { box-shadow: 0 0 0 2.5px var(--ink); }
.sw.sage { background: linear-gradient(135deg, #8fbfa0, #f2a488); }
.sw.bloom { background: linear-gradient(135deg, #f4a6c8, #fbe3d8); }
.sw.glitch { background: linear-gradient(135deg, #6b2bd9, #18d6c8); }
.sw.ocean { background: linear-gradient(135deg, #0b1a26, #3fb3d8); }
.sw.slate { background: linear-gradient(135deg, #1e2a38, #8fd77a); }
.t-theme .shot { width: 62%; }
.t-cal .shot { width: 66%; }
.roles { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.role { display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: 14px; padding: 10px 12px; font-size: .93rem; }
.role b { min-width: 70px; }
.role > span { color: var(--muted); }
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-sched, .t-xp, .t-notes { grid-column: span 2; }
  .t-sched { grid-row: auto; }
  .t-cal, .t-theme, .t-roles { grid-column: span 1; }
  .t-kitchen { grid-column: span 2; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .t-sched, .t-xp, .t-notes, .t-cal, .t-theme, .t-roles, .t-kitchen { grid-column: auto; }
  .t-xp, .t-kitchen { flex-direction: column; align-items: stretch; }
  .t-kitchen .txt { padding-bottom: 0; }
  .t-kitchen .shots { gap: 12px; }
  .t-xp .shot { width: 64%; align-self: center; }
  .tile { padding: 22px; }
}

/* ---------- videos ----------
   Sam (2026-10-04): die zwei Promo-Filme (720 × 1280, Untertitel eingebrannt), preload="none" –
   geladen wird erst beim Abspielen. */
.watch { padding-block: 56px 40px; scroll-margin-top: 16px; }
.watch .head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.watch .head .lede { max-width: 24em; }
.films { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; gap: 48px; margin-top: 40px; }
.film { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.film video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 32px; border: 8px solid var(--phone-edge); background: var(--phone-edge); box-shadow: 0 30px 60px -24px rgba(31,42,35,.45); }
.film:nth-child(1) video { transform: rotate(-1.5deg); }
.film:nth-child(2) video { transform: rotate(1.5deg); }
.film figcaption b { display: block; font: 700 1.25rem/1.2 var(--display); }
.film figcaption span { display: block; color: var(--muted); font-size: .95rem; margin-top: 4px; }
@media (max-width: 760px) {
  .films { grid-template-columns: minmax(0, 320px); gap: 40px; }
  .film video { transform: none !important; }
}

/* ---------- rewind ---------- */
.rewind { padding-block: 96px; background: linear-gradient(180deg, var(--lav-wash), var(--ground)); }
.rewind .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; }
.rewind .lede { margin-top: 18px; }
.awards { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.award { background: var(--surface); border-radius: 999px; padding: 7px 14px; font-size: .88rem; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.fan { position: relative; height: 520px; }
.fan figure { position: absolute; top: 0; margin: 0; width: min(250px, 44%); border-radius: 26px; overflow: hidden; box-shadow: var(--shadow); transition: transform .3s ease; }
.fan figure img { width: 100%; }
.fan figure:nth-child(1) { left: 2%; transform: rotate(-9deg) translateY(40px); }
.fan figure:nth-child(2) { left: 50%; transform: translateX(-50%); z-index: 2; }
.fan figure:nth-child(3) { right: 2%; transform: rotate(9deg) translateY(40px); }
.fan:hover figure:nth-child(1) { transform: rotate(-12deg) translate(-12px, 34px); }
.fan:hover figure:nth-child(3) { transform: rotate(12deg) translate(12px, 34px); }
@media (max-width: 860px) { .rewind .wrap { grid-template-columns: minmax(0, 1fr); } .fan { height: min(420px, 108vw); } }

/* ---------- privacy band ---------- */
.trust { background: var(--band); color: var(--band-ink); padding-block: 96px; }
.trust .kicker { color: var(--band-accent); }
.trust h2 { color: var(--band-ink); max-width: 14em; }
.trust .lede { color: var(--band-muted); margin-top: 18px; }
.trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 48px; }
.trust-grid li { border-top: 1px solid rgba(255,255,255,.18); padding-top: 18px; }
.trust-grid h3 { font: 700 1.15rem/1.2 var(--display); margin-bottom: 6px; }
.trust-grid p { color: var(--band-muted); font-size: .95rem; }
.trust a { color: var(--band-accent); }
@media (max-width: 900px) { .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .trust-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- early testing ---------- */
.early { padding-block: 96px; }
.early .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.early .lede { margin-top: 18px; }
.early-steps { margin-top: 28px; display: grid; gap: 14px; }
.early-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.early-steps .num { font: 800 1rem/40px var(--display); text-align: center; border-radius: 50%; background: var(--sage-wash); color: var(--sage-deeper); height: 40px; }
.early-steps b { display: block; }
.early-steps .sub { display: block; color: var(--muted); font-size: .95rem; }
@media (max-width: 860px) { .early .wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; } }

/* ---------- signup form ---------- */
.signup { background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 28px; box-shadow: var(--shadow); position: relative; }
@media (max-width: 520px) { .signup { padding: 22px 18px; } }
.signup h3 { font-size: 1.5rem; margin-bottom: 14px; }
.signup label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.signup input[type="email"] { width: 100%; min-height: 52px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--ground); color: var(--ink); font: 500 1rem var(--body); padding: 0 16px; }
.signup input[type="email"]:focus { outline: none; border-color: var(--sage-deep); box-shadow: 0 0 0 3px var(--sage-wash); }
.signup input[type="email"][aria-invalid="true"] { border-color: var(--err); }
.signup .hint { font-size: .85rem; color: var(--muted); margin-top: 6px; }
.signup .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: .9rem; color: var(--muted); margin: 18px 0 0; }
.signup .check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--sage-deep); flex: none; }
.signup .submit { width: 100%; margin-top: 20px; }
.when-busy { display: none; }
form[aria-busy="true"] .when-idle { display: none; }
form[aria-busy="true"] .when-busy { display: inline; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.err { color: var(--err); font-size: .88rem; font-weight: 600; margin-top: 6px; }
.err-form { margin-top: 16px; }
.st { display: none; }
form[data-state="form"] .st-form, form[data-state="sent"] .st-sent { display: block; }
.st-sent { text-align: center; padding-block: 18px; }
.st-sent h3:focus { outline: none; }
.st-sent p { color: var(--muted); margin-top: 8px; overflow-wrap: anywhere; }
.st-sent p b { color: var(--ink); }
.sent-icon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: var(--sage-wash); color: var(--sage-deeper); display: grid; place-items: center; font-size: 1.7rem; }
.linkish { background: none; border: 0; padding: 0; color: var(--sage-deep); font: inherit; text-decoration: underline; cursor: pointer; }
.noscript-note { margin-top: 14px; font-size: .9rem; color: var(--muted); }

/* ---------- faq ---------- */
.faq { padding-block: 24px 96px; }
.faq .wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; }
.faq details { border-bottom: 1px solid var(--line); padding-block: 4px; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 16px; font: 700 1.08rem/1.3 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 500 1.4rem/1 var(--body); color: var(--muted); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding-bottom: 18px; max-width: 40em; }
@media (max-width: 800px) { .faq .wrap { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

/* ---------- final cta + footer ---------- */
.final { padding-block: 0 96px; }
.final-card { border-radius: 36px; background: var(--sage-wash); padding: 56px 48px; display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; }
.final-card img { width: 88px; height: 88px; }
.final-card h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.final-card p { color: var(--muted); margin-top: 10px; }
@media (max-width: 800px) { .final-card { grid-template-columns: minmax(0, 1fr); padding: 36px 24px; } .final-card .btn { justify-self: start; } }
.site-foot { border-top: 1px solid var(--line); padding-block: 28px; color: var(--muted); font-size: .9rem; }
.site-foot .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-foot a { color: var(--muted); }
.foot-links a { overflow-wrap: anywhere; }

/* ---------- widescreen ----------
   Sam (2026-09-27): Bänder (Problem, Rewind, Datenschutz) laufen ohnehin volle Breite;
   hier wachsen Inhaltsspalte und Grundschrift (rem) stufenweise mit, Telefon und Rewind-Karten
   bleiben in Proportion. Textspalten behalten ihre em-Obergrenzen (≤ ~70 Zeichen). */
@media (min-width: 1600px) {
  html { font-size: 106.25%; }
  .wrap { max-width: 1320px; }
  .hero { padding-block: 44px 96px; }
  .hero h1 { font-size: 4.9rem; }
  .stage { min-height: 640px; }
  .phone { width: 320px; }
  .turn { width: 380px; }
  .try { bottom: calc(40px + 200px); }
  .tile .shot { max-width: 290px; }
  .t-sched .shot { max-width: 330px; }
  .fan { height: 600px; }
  .fan figure { width: min(290px, 44%); }
  .films { grid-template-columns: repeat(2, minmax(0, 380px)); }
  .t-kitchen .shot { max-width: 260px; }
  .problem, .rewind, .trust, .early { padding-block: 112px; }
}
@media (min-width: 1920px) {
  html { font-size: 112.5%; }
  .wrap { max-width: 1480px; }
  .hero h1 { font-size: 5.2rem; }
  .stage { min-height: 740px; }
  .phone { width: 360px; border-radius: 46px; padding: 10px; }
  .phone img { border-radius: 37px; }
  .turn { width: 420px; }
  .try { bottom: calc(40px + 220px); }
  .tile { min-height: 340px; }
  .tile .shot { max-width: 320px; }
  .t-sched .shot { max-width: 370px; }
  .fan { height: 680px; }
  .fan figure { width: min(330px, 44%); }
  .problem, .rewind, .trust, .early { padding-block: 128px; }
}
@media (min-width: 2400px) {
  html { font-size: 125%; }
  .wrap { max-width: 1640px; }
  .stage { min-height: 820px; }
  .phone { width: 400px; }
  .turn { width: 460px; }
  .try { bottom: calc(40px + 240px); }
  .tile .shot { max-width: 350px; }
  .t-sched .shot { max-width: 410px; }
  .fan { height: 760px; }
  .fan figure { width: min(370px, 44%); }
}

/* ---------- section anchors below the page top ---------- */
#watch, #features, #privacy, #early { scroll-margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}