/* ═══════════════════════════════════════════════════════════
   Tasty Studios — Agentur-Seite, Apple-Stil MacBook-Strecke
   Bühne 1: Hero (Bild 1) · 2: Solche & solche (Bild 2)
   3: Vergleich (Bild 3) · 4: Frage rechts (Bild 4)
   5: Analyse im Screen (Bild 5) · 6: Frage links (Bild 6)
   7: Zoom in den Screen (Bild 7)
   ═══════════════════════════════════════════════════════════ */

@font-face{font-family:'Jakarta';src:url('../fonts/jakarta-var.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'PlexMono';src:url('../fonts/plexmono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --ink:#1d1d1f;
  --mute:#66686d;
  --gold:#9A7B4F;
  --amber:#b9803f;          /* Demo-Seite („schlecht") */
  --dark:#0b0d10;
  --font:'Jakarta',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'PlexMono','SF Mono',monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:#fff;color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}

.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}

/* ── Navigation: schwebende Pille, mittig ─────────────────── */
.pillnav{
  position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:100;
  display:flex;align-items:center;gap:2px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.07);
  border-radius:999px;padding:5px 8px;
  box-shadow:0 10px 34px rgba(20,30,50,.10);
  white-space:nowrap;
}
.pillnav .brand{font-weight:740;font-size:14px;letter-spacing:-.01em;padding:8px 18px 8px 14px;text-decoration:none;display:flex;align-items:center;gap:8px}
.pillnav .brand img{width:20px;height:20px}
.pillnav .sep{width:1px;height:18px;background:rgba(0,0,0,.10);margin:0 7px}
.pillnav a.item{padding:8px 15px;border-radius:999px;font-size:13.5px;font-weight:520;color:#454549;text-decoration:none;transition:background .18s}
.pillnav a.item:hover{background:rgba(0,0,0,.055)}
.pillnav a.item.is-on{background:var(--ink);color:#fff}

/* ── Bühne 1: Hero ────────────────────────────────────────── */
.hero{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;
  background:linear-gradient(180deg,#f5f9fc 0%,#e6f0f9 38%,#d6eaf5 60%,#d6eaf5 100%);
  padding-top:12vh;overflow:hidden;position:relative;
}
.hero__logo{width:58px;height:58px;margin-bottom:30px}
.hero h1{
  font-size:clamp(42px,6.4vw,96px);font-weight:760;letter-spacing:-.032em;
  line-height:1.02;text-align:center;max-width:14ch;
}
.hero__sub{margin-top:22px;font-size:clamp(16px,1.25vw,20px);color:#4c5866;text-align:center;max-width:44ch;line-height:1.5}
.hero__img{width:100vw;max-width:none;margin-top:auto}
.hero__media{position:relative;width:112vw;flex-shrink:0;margin-top:auto;aspect-ratio:2200/799;overflow:hidden}
.hero__media .hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0;opacity:0;transition:opacity .45s ease}
.hero__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.hero__media.is-playing .hero__vid{opacity:1}
.hero__media.is-done .hero__img{opacity:1}
.hero__media.is-done .hero__vid{display:none}
@media (prefers-reduced-motion:reduce){.hero__vid{display:none}.hero__media .hero__img{opacity:1}}
.hero__hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#5c7288;opacity:.75}

/* ── Bühnen-Grundgerüst ───────────────────────────────────── */
.stage{position:relative;background:#fff}
#s2{background:linear-gradient(180deg,#f1f4f9 0%,#fff 16%)}
.stage__pin{
  height:100vh;overflow:hidden;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:9vh 0 4vh;
}

/* ── Bühne 2: Es gibt solche und solche ───────────────────── */
.s2__head{text-align:center;margin-bottom:4.5vh;padding:0 6vw}
.s2__head h2{font-size:clamp(30px,4.1vw,58px);font-weight:750;letter-spacing:-.03em;line-height:1.05}
.s2__sub{margin-top:16px;font-size:clamp(15px,1.15vw,19px);color:var(--mute);max-width:52ch;margin-left:auto;margin-right:auto;line-height:1.55}
.s2__img{width:min(78vw,126vh);will-change:transform,opacity}

/* ── Bühne 3: Vergleich unter den PCs ─────────────────────── */
.s3__img{width:min(66vw,86vh);will-change:transform,opacity}
.s3__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:5vw;
  width:min(1040px,82vw);margin-top:3.5vh;
}
.s3__col{opacity:0;transform:translateY(24px)}
.s3__col .tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:10px;display:block}
.s3__col:first-child .tag{color:#9a9aa0}
.s3__col:last-child .tag{color:var(--gold)}
.s3__col h3{font-size:clamp(19px,1.65vw,26px);font-weight:700;letter-spacing:-.015em;margin-bottom:8px}
.s3__col p{font-size:clamp(14px,1.05vw,17px);color:var(--mute);line-height:1.6}

/* ── Bühne 4 + 6: Bild mit Frage im Weißraum ──────────────── */
.sq__wrap{position:relative;width:min(90vw,128vh)}
.sq__wrap img{width:100%;will-change:transform,opacity}
.sq__ask{position:absolute;width:34%;opacity:0}
.sq__ask--right{right:2%;top:24%;text-align:left}
.sq__ask--left{left:3%;top:30%;text-align:left}
.sq__ask h2{font-size:clamp(26px,2.9vw,44px);font-weight:740;letter-spacing:-.028em;line-height:1.08}
.sq__ask p{margin-top:14px;font-size:clamp(14px,1.1vw,18px);color:var(--mute)}

#s5 .stage__pin,#s7 .stage__pin{padding:0}

/* ── Bühne 5: Analyse im Bildschirm ───────────────────────── */
.s5__stage{width:100vw;height:100vh;position:relative}
.s5__mac{
  position:absolute;top:50%;right:1.5vw;transform:translateY(-50%);
  height:min(80vh,43vw);aspect-ratio:2600/1632;
}
.s5__mac > img{width:100%;height:100%}
.s5__screen{
  position:absolute;left:21.62%;top:12.02%;width:58.34%;height:59.92%;
  overflow:hidden;background:#fff;container-type:size;
}
.s5__track{will-change:transform}
.s5__panel{width:100%;height:100cqh;overflow:hidden}
.s5__panel > img{width:100%;height:100%;object-fit:cover}

.s5__notes{position:absolute;left:3.5vw;top:50%;transform:translateY(-50%);width:21.5vw}
.s5__notes .kicker{display:block;margin-bottom:18px}
.s5__note{position:absolute;top:34px;left:0;right:0;opacity:0}
.s5__note h3{font-size:clamp(20px,1.65vw,28px);font-weight:730;letter-spacing:-.025em;line-height:1.15;margin-bottom:12px}
.s5__note p{font-size:clamp(14px,1.08vw,17px);color:var(--mute);line-height:1.62}
.s5__count{position:absolute;top:-34px;left:0;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:#b6b8bd}

/* Demo-Seite („schlecht") im Screen — bewusst austauschbar gebaut */
.bad{font-family:Helvetica,Arial,sans-serif;background:#fff;height:100%;display:flex;flex-direction:column}
.bad h4{font-family:Georgia,'Times New Roman',serif;font-weight:700;color:#222}
.bad__gal{padding:7cqh 6cqw;text-align:center;flex:1;display:flex;flex-direction:column}
.bad__gal h4{font-size:5.4cqh;margin-bottom:1.2cqh}
.bad__gal small{display:block;font-size:2.6cqh;color:#999;margin-bottom:4cqh}
.bad__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw;flex:1}
.bad__grid div{background:#e9e9e9;border:1px solid #ddd;display:flex;align-items:center;justify-content:center;color:#b5b5b5;font-size:2.4cqh}
.bad__foot{background:#fff;padding:6cqh 8cqw;text-align:center;height:100%;display:flex;flex-direction:column;justify-content:center}
.bad__foot h4{font-size:5.4cqh;margin-bottom:3cqh}
.bad__foot table{margin:0 auto 3.4cqh;border-collapse:collapse;font-size:2.7cqh;color:#555}
.bad__foot td{padding:.9cqh 2.6cqw;border-bottom:1px solid #eee;text-align:left}
.bad__foot .btn{display:inline-block;margin:0 auto;background:#b9803f;color:#fff;font-size:2.5cqh;letter-spacing:.12em;padding:1.8cqh 4.5cqw;border-radius:.6cqh}
.bad__copyright{margin-top:4cqh;font-size:2.2cqh;color:#aaa}

/* ── Bühne 7: Zoom in den Bildschirm ──────────────────────── */
.s7__stage{width:100vw;height:100vh;position:relative;overflow:hidden;background:#fff}
.s7__zoom{
  position:absolute;top:50%;left:50%;
  height:min(86vh,49vw);aspect-ratio:2600/1632;
  will-change:transform;
}
.s7__zoom > img{width:100%;height:100%}
.s7__screenimg{position:absolute;left:21.46%;top:12.02%;width:58.27%;height:59.92%;object-fit:cover}

/* Gute Seite: liegt IN der Bühne, wird nach dem Zoom eingeblendet */
.gs{position:absolute;inset:0;opacity:0;pointer-events:none;overflow:hidden;background:var(--dark)}
.gs__track{will-change:transform}
.gs__panel{width:100vw;height:100vh;position:relative;display:flex;align-items:center;justify-content:center;background:var(--dark);color:#f2efe8}
.gs__panel--hero{background:url('../img/mac/screen-good.webp') center/cover no-repeat}
.gs__inner{max-width:880px;padding:0 6vw;text-align:center}
.gs__inner .kicker{color:#c9a96a;display:block;margin-bottom:20px}
.gs__inner h2{font-size:clamp(34px,4.4vw,64px);font-weight:730;letter-spacing:-.028em;line-height:1.06;margin-bottom:22px}
.gs__inner p{font-size:clamp(15px,1.2vw,19px);color:#b8b5ac;line-height:1.65;max-width:56ch;margin:0 auto}
.gs__btn{display:inline-block;margin-top:34px;background:#c9a96a;color:#161511;font-weight:650;font-size:15px;letter-spacing:.06em;padding:15px 34px;border-radius:999px}
.gs__menu{margin-top:30px;font-family:var(--mono);font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:#8d8a80;line-height:2.4}

/* ── Outro ────────────────────────────────────────────────── */
.outro{min-height:58vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#fff;text-align:center;padding:10vh 6vw}
.outro img{width:44px;height:44px;opacity:.9}
.outro p{font-size:15px;color:var(--mute)}
.outro a{font-weight:600;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.2)}

/* ═══ Mobil & reduzierte Bewegung: ruhige, stehende Fassung ═══ */
@media (max-width:899px){
  .pillnav{top:12px;padding:4px 6px}
  .pillnav a.item{padding:7px 11px;font-size:12.5px}
  .pillnav .brand{font-size:13px;padding:7px 10px}
  .hero{padding-top:13vh}
  .stage__pin{height:auto;min-height:0;padding:14vh 0}
  .s2__img,.s3__img{width:94vw}
  .s3__grid{grid-template-columns:1fr;gap:28px;width:88vw}
  .s3__col{opacity:1;transform:none}
  .sq__wrap{width:96vw}
  .sq__ask{position:static;width:auto;opacity:1;margin-top:26px;text-align:center;padding:0 6vw}
  .s5__stage{height:auto;display:flex;flex-direction:column;gap:30px;align-items:center}
  .s5__mac{position:static;transform:none;height:auto;width:96vw}
  .s5__screen{display:none}
  .s5__notes{position:static;transform:none;width:88vw}
  .s5__note{position:static;opacity:1;margin-bottom:26px}
  .s5__count{display:none}
  .s7__stage{height:auto;overflow:visible}
  .s7__zoom{position:static;transform:none;height:auto;width:96vw;margin:0 auto}
  .gs{position:static;opacity:1;pointer-events:auto}
  .gs__panel{height:auto;min-height:70vh;padding:12vh 0}
  .gs__panel--hero{min-height:52vh}
}