:root {
  --bg: #EEECE7;
  --ink: #141312;
  --ink-2: #6E6A63;
  --line: #D8D4CB;
  --night: #141312;
  --paper: #F2F0EB;
  --red: #EF4136;
  --red-dark: #D8362C;

  --sans: "Host Grotesk", system-ui, sans-serif;
  --mono: "Martian Mono", ui-monospace, monospace;

  --gutter: 20px;
  --section: 64px;
  --expo: cubic-bezier(0.19, 1, 0.22, 1);
}
@media (min-width: 900px) { :root { --gutter: 40px; --section: 104px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.wrap { width: 100%; max-width: calc(1200px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--mono); font-size: 11px; line-height: 1.5; letter-spacing: 0.02em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.small { font-size: 10px; }

/* Knöpfe */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px; background: var(--red); color: var(--paper); font-weight: 500; font-size: 16px; text-decoration: none; transition: background-color 150ms ease-out, color 150ms ease-out; }
.btn:hover { background: var(--red-dark); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.link { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 4px; }

/* Chips wie „S.01 METHODE“ */
.chip { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; }
.chip span { padding: 3px 6px; border: 1px solid currentColor; border-radius: 3px; }
.chip--dark { color: var(--paper); }

/* ---------- 1 Einstieg ---------- */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; position: relative; z-index: 3; }
.nav__logo { display: inline-flex; align-items: center; min-height: 44px; }
.nav__logo img { height: 20px; width: auto; }
.nav__links { display: none; gap: 40px; font-size: 15px; }
.nav__links a, .nav__cta { text-decoration: none; transition: color 150ms ease-out; }
.nav__links a:hover { color: var(--ink-2); }
.nav__cta { font-size: 15px; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; }
.nav__cta:hover { color: var(--red); }
@media (min-width: 900px) { .nav__links { display: flex; } }

.hero__stage { position: relative; display: grid; place-items: center; min-height: 420px; }
.marquee { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-58%); font-weight: 600; font-size: clamp(132px, 21vw, 300px); line-height: 1; letter-spacing: -0.045em; white-space: nowrap; overflow: hidden; }
.marquee__track { display: inline-flex; }
.marquee__track span { flex: none; }

.frame { position: relative; z-index: 2; width: clamp(156px, 19vw, 290px); }
.frame__img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: var(--line); box-shadow: 0 0 0 8px var(--bg); }
.frame__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(100% 0 0 0); }
.frame__img img.is-on { clip-path: inset(0 0 0 0); z-index: 1; }
.frame__img img.was-on { clip-path: inset(0 0 0 0); z-index: 0; }
.sticker { position: absolute; z-index: 2; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(242, 240, 235, 0.9); transform: scale(0); }
.frame.has-sold .sticker { transform: scale(1); }
.frame__cap { margin-top: 14px; text-align: center; min-height: 2em; }

.hero__foot { display: grid; gap: 16px; padding-bottom: 24px; position: relative; z-index: 3; }
.hero__lead { max-width: 30ch; font-size: 17px; line-height: 1.4; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.cta__note { color: var(--ink-2); }
@media (min-width: 900px) {
  .hero__foot { grid-template-columns: 1fr auto; align-items: end; padding-bottom: 40px; }
  .hero__lead { font-size: 19px; }
}

/* ---------- 2 Methode ---------- */
.method { padding-top: var(--section); padding-bottom: var(--section); }
.statement { font-weight: 500; font-size: clamp(28px, 4.4vw, 60px); line-height: 1.08; letter-spacing: -0.03em; max-width: 21ch; }
.statement .w { transition: color 200ms linear; }
.js .statement .w { color: rgba(20, 19, 18, 0.16); }
.js .statement .w.on { color: var(--ink); }

.stats { display: grid; margin-top: 64px; border-top: 1px solid var(--line); }
.stats > div { display: grid; gap: 6px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.num { font-weight: 600; font-size: 48px; line-height: 1; letter-spacing: -0.04em; }
.stats dd { color: var(--ink-2); max-width: 26ch; }
@media (min-width: 700px) {
  .stats { grid-template-columns: repeat(3, 1fr); column-gap: 40px; margin-top: 104px; }
  .num { font-size: 64px; }
}

/* ---------- 3 Projekte (bleibt beim Scrollen stehen) ---------- */
.dial { position: relative; height: 400svh; background: var(--night); color: var(--paper); }
.dial__stage { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: 1fr auto; overflow: hidden; background: var(--night); background: color-mix(in srgb, var(--p) 52%, var(--night)); transition: background-color 700ms var(--expo); }
.dial__inner { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; gap: 16px; padding-top: 32px; padding-bottom: 8px; align-content: start; }
.dial__side .chip { margin-bottom: 12px; }
.dial__list { display: flex; flex-wrap: wrap; gap: 0 14px; }
.dial__list button { font-weight: 600; font-size: 26px; line-height: 1.15; letter-spacing: -0.03em; color: rgba(242, 240, 235, 0.3); min-height: 44px; transition: color 300ms ease-out; }
.dial__list button.is-on { color: var(--paper); }
.dial__list button:hover { color: rgba(242, 240, 235, 0.7); }

.dial__ring { position: relative; width: min(80vw, 48svh); aspect-ratio: 1; justify-self: center; }
.ring { position: absolute; inset: 0; }
.ring i { position: absolute; width: var(--d, 10px); height: var(--d, 10px); border-radius: 50%; transform: translate(-50%, -50%); background: transparent; box-shadow: inset 0 0 0 1.5px rgba(242, 240, 235, 0.45); transition: background-color 300ms ease-out, box-shadow 300ms ease-out; }
.ring.is-small i { box-shadow: none; background: rgba(242, 240, 235, 0.45); }
.ring i.on { background: var(--red); box-shadow: inset 0 0 0 1.5px var(--red); }
.ring.is-open i { box-shadow: inset 0 0 0 1px rgba(242, 240, 235, 0.25); background: transparent; }
.ring.is-small.is-open i { background: rgba(242, 240, 235, 0.22); box-shadow: none; }
.dial__img { position: absolute; inset: 11%; border-radius: 50%; overflow: hidden; background: rgba(0, 0, 0, 0.2); }
.dial__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity 600ms var(--expo), transform 1200ms var(--expo); }
.dial__img img.is-on { opacity: 1; transform: none; }

.dial__info { display: grid; gap: 6px; align-content: start; max-width: 40ch; }
.dial__place { color: rgba(242, 240, 235, 0.7); }
.dial__fact { font-size: 16px; line-height: 1.4; }
.dial__stand { display: flex; align-items: center; gap: 8px; }
.dial__stand::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.dial__stand.is-open::before { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(242, 240, 235, 0.6); }
.dial__link { min-height: 32px; color: var(--paper); }
.dial__legend { padding-top: 12px; padding-bottom: 20px; color: rgba(242, 240, 235, 0.55); font-size: 10px; }

@media (min-width: 900px) {
  .dial__inner { grid-template-columns: 4fr 5fr 3fr; grid-template-rows: 1fr; gap: 40px; align-items: center; padding-top: 64px; padding-bottom: 24px; }
  .dial__list { flex-direction: column; }
  .dial__list button { font-size: 64px; line-height: 1.02; min-height: 0; text-align: left; }
  .dial__ring { width: min(38vw, 62svh); }
  .dial__fact { font-size: 18px; }
}

/* ---------- 4 Team ---------- */
.team { padding-top: var(--section); padding-bottom: var(--section); }
.team__grid { display: grid; gap: 40px; }
.person { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: end; }
.person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
.person figcaption { display: grid; gap: 4px; }
.person__name { font-weight: 600; font-size: 22px; letter-spacing: -0.02em; }
.team__title { font-weight: 500; font-size: clamp(26px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.025em; max-width: 22ch; margin-bottom: 24px; }
.reels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.reels a { display: grid; gap: 6px; text-decoration: none; }
.reels img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 2px; transition: transform 600ms var(--expo); }
.reels a:hover img { transform: translateY(-4px); }
.reels .mono { font-size: 9px; }
.career { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 16px; justify-items: start; }
.career__quote { font-weight: 600; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.02; letter-spacing: -0.035em; max-width: 16ch; }
.career .muted { max-width: 48ch; }
@media (min-width: 900px) {
  .team__grid { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
  .person { position: sticky; top: 40px; display: block; }
  .person figcaption { padding-top: 14px; }
  .reels { gap: 16px; }
  .reels .mono { font-size: 11px; }
}

/* ---------- 5 Kontakt (Nacht) ---------- */
.contact { background: var(--night); color: var(--paper); padding-top: var(--section); overflow: hidden; }
.contact__grid { display: grid; gap: 40px; }
.contact__title { font-weight: 500; font-size: clamp(28px, 3.6vw, 52px); line-height: 1.08; letter-spacing: -0.03em; max-width: 20ch; margin-bottom: 24px; }
.facts { display: grid; gap: 16px 24px; grid-template-columns: 1fr 1fr; align-content: end; }
.facts dt { color: rgba(242, 240, 235, 0.55); margin-bottom: 4px; }
.facts a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 4px; text-decoration-color: rgba(242, 240, 235, 0.35); }
@media (min-width: 900px) { .contact__grid { grid-template-columns: 7fr 5fr; gap: 64px; } }

.giant { font-weight: 600; font-size: 39vw; line-height: 0.8; letter-spacing: -0.06em; margin: 64px 0 0 -0.04em; white-space: nowrap; display: flex; align-items: flex-end; }
.giant__dot { display: inline-block; width: 0.2em; height: 0.2em; border-radius: 50%; background: var(--red); margin-left: 0.04em; margin-bottom: 0.02em; }
.footer { display: grid; gap: 6px; padding-top: 24px; padding-bottom: 32px; color: rgba(242, 240, 235, 0.6); font-size: 10px; }
.footer__draft { color: var(--paper); margin-top: 8px; }
@media (min-width: 900px) { .footer { grid-template-columns: repeat(4, auto); justify-content: space-between; } .footer__draft { margin-top: 0; } }

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: run 26s linear infinite; }
  @keyframes run { to { transform: translateX(-50%); } }
  .frame__img img { transition: clip-path 900ms var(--expo); }
  .sticker { transition: transform 400ms var(--expo) 300ms; }
}
@media (prefers-reduced-motion: reduce) {
  .dial__stage, .dial__img img, .ring i, .statement .w { transition: none; }
}