/* =========================================================
   Bewegungsraum Physiotherapie – Demo (GreenLabz Studio)
   Sand, tiefes Petrol, Mint für „gesund“, Koralle für „Schmerz“ · Bricolage Grotesque
   ========================================================= */
:root {
  --sand: #f2eee7;
  --ink: #0f2229;
  --teal: #0e4a57;
  --mint: #7fd6bd;
  --coral: #ff6a55;
  --f-disp: "Bricolage Grotesque", system-ui, sans-serif;
  --f-mono: "Red Hat Mono", ui-monospace, monospace;
  --f-body: "Inter", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--sand); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.5; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--f-mono); }
.big { margin: 0; font-family: var(--f-disp); font-weight: 780; font-variation-settings: "opsz" 96; line-height: 0.9; letter-spacing: -0.045em; }
.big span { display: block; }
.big .hl { color: var(--teal); font-weight: 300; font-style: normal; }
.kicker { margin: 0; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(15, 34, 41, 0.6); }

.hd { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; align-items: center; gap: 28px; padding: 22px clamp(20px, 4vw, 56px); transition: color 0.3s ease; }
.hd-logo { display: flex; align-items: baseline; gap: 10px; font-family: var(--f-disp); font-weight: 700; font-size: 26px; letter-spacing: -0.04em; }
.hd-logo span { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; }
.hd-nav { margin-left: auto; display: flex; gap: 26px; font-size: 14px; font-weight: 500; }
.hd-nav a { padding: 12px 0; }
.hd-cta { min-height: 44px; display: inline-flex; align-items: center; padding: 0 22px; border-radius: 999px; background: var(--teal); color: var(--sand); font-size: 14px; font-weight: 500; transition: background 0.3s ease, color 0.3s ease; }
.hd-cta:hover { background: var(--mint); color: var(--ink); }
.hd.on-dark { color: var(--sand); }
.hd.on-dark .hd-cta { background: var(--mint); color: var(--ink); }

.stage { position: relative; height: 420vh; }
.stage-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.studio { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.copy { position: absolute; left: clamp(20px, 5vw, 72px); top: 50%; transform: translateY(-50%); width: min(50vw, 660px); z-index: 2; }
.copy-swap { position: relative; margin-top: 22px; height: calc(2 * 0.9 * clamp(56px, 8.2vw, 128px) + 16px); overflow: hidden; }
.copy-swap .big { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; font-size: clamp(56px, 8.2vw, 128px); white-space: nowrap; will-change: transform; }
.copy-b, .copy-c { transform: translateY(115%); }
.meter { margin: 26px 0 0; font-size: 14px; letter-spacing: 0.02em; }
.meter b { font-weight: 500; color: var(--teal); }
.meter i { font-style: normal; opacity: 0.4; padding: 0 6px; }

.termin { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 14vh clamp(20px, 5vw, 72px) 12vh; background: var(--teal); color: var(--sand); }
.termin .kicker { color: var(--mint); margin-bottom: 20px; }
.termin-title { font-size: clamp(72px, 11vw, 180px); }
.termin-title .hl { color: var(--mint); }
.termin-title span { will-change: transform; }
.termin-btn { align-self: flex-start; margin-top: 44px; min-height: 60px; display: inline-flex; align-items: center; gap: 14px; padding: 0 30px; border-radius: 999px; background: var(--mint); color: var(--ink); font-weight: 500; font-size: 16px; transition: transform 0.3s ease; }
.termin-btn:hover { transform: translateY(-2px); }
.foot { position: absolute; left: clamp(20px, 5vw, 72px); bottom: 26px; margin: 0; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55; }

.wipe { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: var(--mint); transform: translateY(101%); pointer-events: none; }
.wipe b { font-family: var(--f-disp); font-weight: 780; font-size: clamp(60px, 10vw, 170px); letter-spacing: -0.05em; color: var(--ink); }

@media (max-width: 860px) { .hd-nav { display: none; } .copy { top: 16vh; transform: none; width: auto; right: 20px; } }
@media (prefers-reduced-motion: reduce) { .stage { height: auto; } .stage-pin { position: relative; } }