/* ============================================================
   ALPHAGYM — Quiet Luxury / Private Members Club
   Tokens · Look-Richtungen · Platzhalter · Komponenten
   ============================================================ */

:root {
  /* Base palette */
  --black:    #0E0E0E;
  --char:     #1A1A1A;
  --char-2:   #161616;
  --ink:      #F2EFE9;
  --ink-dim:  rgba(242, 239, 233, 0.58);
  --ink-faint:rgba(242, 239, 233, 0.32);
  --hair:     rgba(242, 239, 233, 0.13);
  --hair-soft:rgba(242, 239, 233, 0.07);

  --bronze:   #9A6B2F;
  --champ:    #C8A15A;

  /* Defaults — overridden per look via [data-look] */
  --bg:        var(--black);
  --bg-raised: var(--char);
  --font-display: "Bodoni Moda", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --disp-weight: 600;
  --disp-tracking: -0.005em;
  --disp-line: 1.04;
  --disp-style: normal;
  --accent-strength: 1;          /* multiplier set by Tweaks */

  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 88px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- LOOK · ATHLETIK (heavy condensed grotesk — sportlich) ---- */
[data-look="athletik"] {
  --font-display: "Anton", "Archivo", sans-serif;
  --disp-weight: 400;
  --disp-tracking: 0.006em;
  --disp-line: 0.96;
}
[data-look="athletik"] :is(.h-hero, .h-1, .h-2, .stage__hl) {
  text-transform: uppercase;
}
[data-look="athletik"] .gild { font-style: normal; }
[data-look="athletik"] .brand__wordmark { letter-spacing: 0.02em; }

/* ---- LOOK A · GRAVITAS (contrast serif) ---- */
[data-look="gravitas"] {
  --font-display: "Bodoni Moda", Georgia, serif;
  --disp-weight: 600;
  --disp-tracking: 0em;
  --disp-line: 1.03;
}
/* ---- LOOK B · PRÄZISE (sovereign grotesk) ---- */
[data-look="praezise"] {
  --font-display: "Archivo", "Inter", sans-serif;
  --disp-weight: 600;
  --disp-tracking: -0.02em;
  --disp-line: 1.0;
}
/* ---- LOOK C · EDITORIAL (warm serif, lighter) ---- */
[data-look="editorial"] {
  --bg:        #0F0E0C;
  --bg-raised: #1A1712;
  --ink:       #F1 EBE0;
  --ink:       #F1EBE0;
  --font-display: "Fraunces", Georgia, serif;
  --disp-weight: 480;
  --disp-tracking: -0.01em;
  --disp-line: 1.06;
  --disp-style: italic-allowed;
}

/* ===== Reset / base ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;   /* clip (not hidden) so it doesn't create a scroll container that breaks position: sticky */
}

::selection { background: var(--bronze); color: #0a0a0a; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ===== Layout primitives ===== */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.section { position: relative; padding-block: clamp(88px, 13vh, 180px); }
.section--tight { padding-block: clamp(64px, 9vh, 120px); }
/* Tighter vertical rhythm on phones — less leeres Schwarz zwischen Sektionen */
@media (max-width: 640px) {
  .section { padding-block: clamp(48px, 8vh, 68px); }
  .section--tight { padding-block: clamp(40px, 6vh, 56px); }
}

/* ===== Type system ===== */
.display {
  font-family: var(--font-display);
  font-weight: var(--disp-weight);
  letter-spacing: var(--disp-tracking);
  line-height: var(--disp-line);
  text-wrap: balance;
}
.h-hero {
  font-size: clamp(2.9rem, 8.2vw, 7.2rem);
}
.h-1 { font-size: clamp(2.2rem, 5vw, 4.2rem); }
.h-2 { font-size: clamp(1.7rem, 3vw, 2.9rem); }
.h-3 { font-size: clamp(1.3rem, 2vw, 1.85rem); }

.lede {
  font-size: clamp(1.12rem, 1.7vw, 1.5rem);
  line-height: 1.5;
  color: var(--ink-dim);
  font-weight: 380;
  text-wrap: pretty;
}
.body-lg { font-size: clamp(1.02rem, 1.3vw, 1.18rem); color: var(--ink-dim); text-wrap: pretty; }

/* eyebrow / kicker */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: color-mix(in srgb, var(--bronze) calc(100% * var(--accent-strength)), transparent);
}
.kicker--center { justify-content: center; }

/* bronze accent on a word */
.gild {
  color: #D2AC63;
  -webkit-text-fill-color: #D2AC63;
  font-style: italic;
}
[data-look="praezise"] .gild { font-style: normal; }

.dim { color: var(--ink-dim); }
.faint { color: var(--ink-faint); }

/* ===== Buttons ===== */
.btn {
  --pad-y: 1.05em;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: var(--pad-y) 1.85em;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background .5s var(--ease), color .5s var(--ease),
              border-color .5s var(--ease), transform .5s var(--ease);
  position: relative;
  background: none;
}
.btn .ar { transition: transform .5s var(--ease); }
.btn:hover .ar { transform: translateX(4px); }

.btn--primary {
  background: var(--ink);
  color: #0c0c0c;
}
.btn--primary:hover {
  background: linear-gradient(100deg, var(--champ), var(--bronze));
  color: #0c0c0c;
}
.btn--ghost {
  border-color: var(--hair);
  color: var(--ink);
}
.btn--ghost:hover {
  border-color: color-mix(in srgb, var(--champ) calc(70% * var(--accent-strength)), var(--hair));
  background: var(--hair-soft);
}
.btn--block { width: 100%; justify-content: center; }

/* link-arrow */
.lnk {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--hair);
  transition: border-color .5s var(--ease), color .5s var(--ease);
}
.lnk:hover { border-color: var(--champ); color: var(--champ); }
.lnk .ar { transition: transform .5s var(--ease); }
.lnk:hover .ar { transform: translateX(4px); }

/* ===== Placeholder (slot) — clearly marked ===== */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(242,239,233,0.028) 0 2px,
      transparent 2px 11px),
    linear-gradient(180deg, #131313, #0d0d0d);
  border: 1px solid var(--hair);
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.ph::after {
  /* corner ticks */
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px dashed var(--hair-soft);
  pointer-events: none;
}
.ph__tag {
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  text-align: center;
  padding: 1.4em 1.6em;
  max-width: 80%;
}
.ph__eyebrow {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--champ) 70%, var(--ink-faint));
}
.ph__label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  line-height: 1.5;
}
.ph__sub {
  font-family: ui-monospace, monospace;
  font-size: 0.66rem;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}
.ph__play {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 1px solid var(--hair);
  display: grid; place-items: center;
  margin-bottom: 0.4em;
  background: rgba(0,0,0,0.3);
}
.ph__play::before {
  content: "";
  width: 0; height: 0;
  border-left: 13px solid color-mix(in srgb, var(--champ) 80%, var(--ink));
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  margin-left: 4px;
}

/* ===== Navigation ===== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem var(--gut);
  background: var(--black);
  transition: background .6s var(--ease), backdrop-filter .6s var(--ease),
              padding .6s var(--ease), border-color .6s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav--scrolled {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--hair-soft);
  padding-block: 1rem;
}
.brand {
  font-family: var(--font-display);
  font-weight: var(--disp-weight);
  font-size: 1.32rem;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.brand .mark {
  width: 22px; height: 22px;
  display: inline-block;
  border: 1px solid color-mix(in srgb, var(--champ) calc(80% * var(--accent-strength)), var(--hair));
  transform: rotate(45deg);
  position: relative;
}
.brand .mark::after {
  content: "";
  position: absolute;
  inset: 5px;
  background: color-mix(in srgb, var(--champ) calc(70% * var(--accent-strength)), transparent);
}
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.6vw, 2.6rem);
}
.nav__links a {
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: color .4s var(--ease);
  position: relative;
}
.nav__links a:hover { color: var(--ink); }
.nav__links a.is-soon { color: var(--ink-faint); }
.nav__links a.is-soon::after {
  content: "bald";
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  vertical-align: super;
  margin-left: 0.3em;
  color: var(--bronze);
}
.nav__cta { display: flex; align-items: center; gap: 1.4rem; }

/* ---- Mobile hamburger button (hidden on desktop) ---- */
.nav__menu-btn {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.nav__menu-bars { position: relative; display: block; width: 24px; height: 12px; }
.nav__menu-bars i {
  position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 2px;
  background: var(--ink);
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.nav__menu-bars i:nth-child(1) { top: 0; }
.nav__menu-bars i:nth-child(2) { bottom: 0; }
html.nav-open .nav__menu-bars i:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
html.nav-open .nav__menu-bars i:nth-child(2) { transform: translateY(-5.25px) rotate(-45deg); }

/* ---- Mobile menu overlay ---- */
.navmenu {
  display: none;
  position: fixed; inset: 0; z-index: 90;
  flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(0.4rem, 2vw, 1rem);
  padding: 6rem var(--gut) calc(3rem + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease);
}
.navmenu__links { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.navmenu__links a {
  display: block; padding: 0.55em 0.2em;
  font-family: var(--font-display); font-weight: var(--disp-weight);
  font-size: clamp(1.8rem, 8vw, 2.6rem); line-height: 1.05;
  letter-spacing: var(--disp-tracking); text-transform: uppercase;
  color: var(--ink-dim); transition: color .3s var(--ease);
}
.navmenu__links a:hover, .navmenu__links a:focus-visible { color: var(--ink); }
.navmenu__cta { margin-top: clamp(1.4rem, 4vw, 2.4rem); }

.nav__cta-mobile { display: none; }
@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__cta .btn { display: none; }
  .nav__cta { gap: 0.7rem; }
  .nav__cta .nav__cta-mobile {
    display: inline-flex; white-space: nowrap;
    padding: 0.55rem 0.85rem; font-size: 0.68rem; letter-spacing: 0.05em;
  }
  .nav__menu-btn { display: inline-flex; }
  .navmenu { display: flex; }
  html.nav-open .navmenu { opacity: 1; pointer-events: auto; }
  html.nav-open, html.nav-open body { overflow: hidden; }
}

/* Hero-Subline auf dem Handy kürzen: „… stark." statt „… stark — und dein Körper ist der Beweis." */
@media (max-width: 600px) {
  .hero__sub-extra { display: none; }
}

/* ===== Hero (figure-led, Spurfit-style) ===== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* The figure, melting into black on its left edge */
.hero__figure {
  position: absolute;
  top: -3%; right: 0; height: 106%;
  width: clamp(440px, 56vw, 1000px);
  z-index: 1;
}
.hero__figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 58% 8%;
  -webkit-mask-image: linear-gradient(95deg, transparent 0%, #000 30%, #000 100%);
  mask-image: linear-gradient(95deg, transparent 0%, #000 30%, #000 100%);
}
.hero__figure::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 62%, var(--bg) 99%);
  pointer-events: none;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(70% 60% at 14% 44%, color-mix(in srgb, var(--bronze) calc(8% * var(--accent-strength)), transparent), transparent 72%),
    linear-gradient(90deg, var(--bg) 16%, color-mix(in srgb, var(--bg) 45%, transparent) 44%, transparent 66%),
    linear-gradient(180deg, transparent 72%, var(--bg) 100%);
}
.hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-top: 96px;
}
.hero__content { max-width: 640px; }
.hero__claim {
  max-width: 13ch;
  margin-top: 1.3rem;
}
.hero__sub {
  max-width: 40ch;
  margin-top: 1.6rem;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  margin-top: 2.3rem;
}

/* slim social proof */
.hero__proof {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  margin-top: 2.6rem;
}
.hero__avatars { display: flex; }
.hero__avatars span {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--hair);
  background: linear-gradient(160deg, #232323, #121212);
  margin-left: -10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.hero__avatars span:first-child { margin-left: 0; }
.hero__proof p { font-size: 0.85rem; color: var(--ink-dim); line-height: 1.4; }
.hero__proof b { color: var(--ink); font-weight: 500; }

/* location eyebrow (persistent, above the swapping copy) */
.hero__loc {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.hero__loc-pin { color: var(--champ); flex-shrink: 0; }
.hero__loc > span:first-of-type { color: var(--ink); font-weight: 600; }
.hero__loc-sep {
  width: 4px; height: 4px; border-radius: 50%;
  background: color-mix(in srgb, var(--bronze) 70%, transparent);
}
.hero__loc-sub { color: var(--ink-dim); letter-spacing: 0.1em; }

/* star rating in the social-proof row */
.hero__proofcol { display: flex; flex-direction: column; gap: 0.35rem; }
.hero__rating { display: flex; align-items: center; gap: 0.55rem; }
.stars {
  position: relative;
  display: inline-block;
  font-size: 0.92rem;
  line-height: 1;
  letter-spacing: 0.06em;
}
.stars__base { color: color-mix(in srgb, var(--ink) 22%, transparent); }
.stars__fill {
  position: absolute; inset: 0;
  width: var(--fill, 100%);
  overflow: hidden;
  white-space: nowrap;
  color: var(--champ);
}
.hero__rating-num { color: var(--ink); font-weight: 600; font-size: 0.9rem; }
.hero__rating-cap { font-size: 0.78rem; color: var(--ink-dim); }

/* annotation callouts */
.cue {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s var(--ease-out);
  transition-delay: var(--rd, 700ms);
}
.hero.cues-in .cue { opacity: 1; }
.cue__dot {
  position: relative;
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--champ);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--champ) 13%, transparent),
    0 0 12px 1px color-mix(in srgb, var(--champ) 55%, transparent);
}
.cue__dot::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--champ) 42%, transparent);
  animation: cuepulse 3.2s var(--ease) infinite;
}
@keyframes cuepulse {
  0% { transform: scale(.6); opacity: .9; }
  70% { transform: scale(2.3); opacity: 0; }
  100% { opacity: 0; }
}
.cue__line {
  height: 1px;
  width: clamp(40px, 5vw, 78px);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--champ) 50%, transparent),
    color-mix(in srgb, var(--champ) 8%, transparent));
}
.cue__txt { display: flex; flex-direction: column; gap: 0.2em; }
.cue__ey {
  font-family: ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--champ) 78%, var(--ink-faint));
}
.cue__lb {
  font-family: var(--font-display);
  font-weight: var(--disp-weight);
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  letter-spacing: var(--disp-tracking);
  color: var(--ink);
  line-height: 1.1;
  white-space: nowrap;
}
/* label-on-the-left variant: [label][line][dot] */
.cue--left { flex-direction: row-reverse; }
.cue--left .cue__txt { align-items: flex-end; text-align: right; }
.cue--left .cue__line {
  background: linear-gradient(270deg,
    color-mix(in srgb, var(--champ) 50%, transparent),
    color-mix(in srgb, var(--champ) 8%, transparent));
}

/* cue placements (track the figure box) */
.cue--a { top: 27%; right: 44%; }
.cue--b { top: 51%; right: 39%; }
.cue--c { top: 73%; right: 36%; }
@media (max-width: 1040px) {
  .cue--a { right: 36%; }
  .cue--b { right: 30%; }
  .cue--c { right: 27%; }
}
@media (max-width: 860px) { .cue { display: none; } }

.hero__scroll {
  position: absolute;
  bottom: 2rem; right: var(--gut);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-family: ui-monospace, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.hero__scroll .line {
  display: block;
  width: 1px; height: 42px;
  background: linear-gradient(var(--ink-faint), transparent);
  animation: scrolldrip 2.6s var(--ease) infinite;
}
@keyframes scrolldrip {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  35% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  65% { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}
@media (max-width: 860px) {
  .hero { align-items: flex-end; }
  .hero__figure {
    width: 100%; top: 0; height: 100%;
    opacity: 0.32;
  }
  .hero__figure img {
    object-position: 50% 6%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 78%);
    mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 78%);
  }
  .hero__scrim {
    background:
      linear-gradient(180deg, color-mix(in srgb,var(--bg) 30%, transparent) 0%, transparent 30%, var(--bg) 82%);
  }
  .hero__inner { padding-bottom: clamp(40px, 8vh, 80px); }
  .hero__scroll { display: none; }
}

/* ===== Manifest / Haltung ===== */
.manifest {
  border-top: 1px solid var(--hair-soft);
}
.manifest__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.manifest__lead { position: sticky; top: 18vh; }
.manifest__body p { margin-bottom: 1.6rem; }
.manifest__body p:last-child { margin-bottom: 0; }
.manifest__hook {
  font-family: var(--font-display);
  font-weight: var(--disp-weight);
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  line-height: 1.28;
  letter-spacing: var(--disp-tracking);
  color: var(--ink);
  text-wrap: balance;
}
@media (max-width: 820px) {
  .manifest__grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .manifest__lead { position: static; }
}

/* shared section heading */
.shead { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); max-width: 38ch; }
.shead--center { margin-inline: auto; text-align: center; max-width: 30ch; }
.shead .kicker { margin-bottom: 1.4rem; }
/* Preis-Headline darf mehr Breite nutzen — weniger Umbrüche, ausgewogene Zeilen */
.pricing .shead--center { max-width: 52rem; }
.pricing .shead--center .h-1 { text-wrap: balance; }

/* ===== App section (largest) ===== */
.app { background: var(--bg-raised); border-block: 1px solid var(--hair-soft); }
.app__top {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
  margin-bottom: clamp(3rem, 6vw, 5.5rem);
}
.app__showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.4vw, 2.2rem);
  align-items: center;
}
.phone {
  aspect-ratio: 9 / 19.5;
  border-radius: 34px;
  border: 1px solid var(--hair);
  padding: 9px;
  background: linear-gradient(160deg, #1d1d1d, #0c0c0c);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.9);
}
.phone--lead { transform: translateY(-22px) scale(1.04); z-index: 2; }
.phone .ph {
  width: 100%; height: 100%;
  border-radius: 26px;
  border-color: var(--hair-soft);
}
.app__features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 3rem);
  margin-top: clamp(3rem, 6vw, 5.5rem);
  border-top: 1px solid var(--hair-soft);
  padding-top: clamp(2.4rem, 4vw, 3.4rem);
}
.feat__n {
  font-family: ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: color-mix(in srgb, var(--champ) calc(70% * var(--accent-strength)), var(--ink-faint));
  margin-bottom: 1rem;
}
.feat h4 {
  font-family: var(--font-display);
  font-weight: var(--disp-weight);
  font-size: 1.32rem;
  letter-spacing: var(--disp-tracking);
  margin-bottom: 0.7rem;
}
.feat p { font-size: 0.98rem; color: var(--ink-dim); }
@media (max-width: 820px) {
  .app__top { grid-template-columns: 1fr; }
  .app__features { grid-template-columns: 1fr; gap: 2rem; }
  .phone--lead { transform: none; }
}
@media (max-width: 560px) {
  .app__showcase { grid-template-columns: 1fr; max-width: 280px; margin-inline: auto; }
  .app__showcase .phone:not(.phone--lead) { display: none; }
}

/* ===== Kollegah ===== */
.kol__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.kol__portrait { aspect-ratio: 4 / 5; }
.kol__portrait .ph { width: 100%; height: 100%; }
.kol__quote {
  font-family: var(--font-display);
  font-weight: var(--disp-weight);
  font-size: clamp(1.5rem, 2.7vw, 2.4rem);
  line-height: 1.3;
  letter-spacing: var(--disp-tracking);
  text-wrap: balance;
}
.kol__quote .q { color: color-mix(in srgb, var(--champ) calc(75% * var(--accent-strength)), var(--ink)); }
.kol__attr {
  margin-top: 1.8rem;
  display: flex;
  align-items: center;
  gap: 0.9em;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.kol__attr::before { content: ""; width: 30px; height: 1px; background: var(--hair); }
.kol__voice {
  margin-top: 2.4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--hair);
  border-radius: 3px;
  background: rgba(0,0,0,0.25);
  max-width: 380px;
}
.kol__voice .wave {
  display: flex; align-items: center; gap: 3px; height: 26px; flex: 1;
}
.kol__voice .wave i {
  display: block; width: 2px; border-radius: 2px;
  background: color-mix(in srgb, var(--champ) 60%, var(--ink-faint));
  opacity: 0.65;
}
@media (max-width: 820px) {
  .kol__grid { grid-template-columns: 1fr; }
  .kol__portrait { max-width: 440px; }
}

/* ===== Studio ===== */
.studio__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 2rem;
  margin-bottom: clamp(2.4rem, 4vw, 3.6rem);
}
.studio__gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(120px, 16vw, 220px);
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
}
.studio__gallery .ph { width: 100%; height: 100%; }
.g-a { grid-column: span 7; grid-row: span 2; }
.g-b { grid-column: span 5; grid-row: span 1; }
.g-c { grid-column: span 5; grid-row: span 1; }
.g-d { grid-column: span 4; grid-row: span 1; }
.g-e { grid-column: span 8; grid-row: span 1; }
@media (max-width: 700px) {
  .studio__gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .g-a, .g-b, .g-c, .g-d, .g-e { grid-column: span 2; grid-row: span 1; }
}

/* women's safe-space band */
.safe {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(2.4rem, 5vw, 4rem);
  border: 1px solid var(--hair-soft);
  background: linear-gradient(180deg, rgba(255,255,255,0.012), transparent);
}
.safe__q {
  font-family: var(--font-display);
  font-weight: var(--disp-weight);
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  line-height: 1.3;
  letter-spacing: var(--disp-tracking);
  text-wrap: balance;
}
.trial {
  margin-top: clamp(2.2rem, 4vw, 3.4rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  padding-top: clamp(2.4rem, 4vw, 3.4rem);
  border-top: 1px solid var(--hair);
}
.trial__txt { max-width: 46ch; }
@media (max-width: 700px) { .safe { grid-template-columns: 1fr; } }

/* ===== Numbers / Stimmen ===== */
.numbers { background: var(--bg-raised); border-block: 1px solid var(--hair-soft); position: relative; overflow: hidden; }
/* Studio-Footage als ruhiger Hintergrund (startet ab Sek. 30, läuft in Schleife) */
.numbers__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.numbers__bg video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(0.25) contrast(1.05) brightness(0.66);
  opacity: 0; transition: opacity 1.2s ease;
}
.numbers__bg video.is-ready { opacity: 0.52; }
.numbers__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg-raised) 86%, transparent) 0%,
    color-mix(in srgb, var(--bg-raised) 62%, transparent) 42%,
    color-mix(in srgb, var(--bg-raised) 74%, transparent) 100%);
}
.numbers > .wrap { position: relative; z-index: 2; }
/* Karten als dunkles Glas, damit die Zitate über dem Video klar lesbar bleiben */
.numbers .voice {
  background: rgba(10, 10, 10, 0.46);
  -webkit-backdrop-filter: blur(9px) saturate(120%);
  backdrop-filter: blur(9px) saturate(120%);
  border-color: var(--hair);
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.4rem, 3vw, 2.6rem);
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
}
.stat { border-top: 1px solid var(--hair); padding-top: 1.4rem; }
.stat__n {
  font-family: var(--font-display);
  font-weight: var(--disp-weight);
  font-size: clamp(2.6rem, 5.5vw, 4.6rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}
.stat__n .u { color: color-mix(in srgb, var(--champ) calc(72% * var(--accent-strength)), var(--ink)); }
.stat__l {
  margin-top: 0.8rem;
  font-size: 0.82rem;
  color: var(--ink-dim);
  letter-spacing: 0.02em;
}
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }

.voices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.4vw, 2rem);
}
.voice {
  border: 1px solid var(--hair-soft);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.012), transparent);
  transition: border-color .5s var(--ease), transform .5s var(--ease);
}
.voice:hover { border-color: var(--hair); transform: translateY(-3px); }
.voice p {
  font-size: 1.04rem;
  line-height: 1.55;
  color: var(--ink);
  text-wrap: pretty;
}
.voice__who {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.8em;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}
.voice__who .dot {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--hair);
  background: var(--char);
  flex-shrink: 0;
}
@media (max-width: 820px) { .voices { grid-template-columns: 1fr; } }

/* ===== CTA band ===== */
.cta {
  text-align: center;
  padding-block: clamp(96px, 16vh, 200px);
  position: relative;
  overflow: hidden;
}
.cta__glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 80vw; height: 80vw;
  max-width: 900px; max-height: 900px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    color-mix(in srgb, var(--bronze) calc(13% * var(--accent-strength)), transparent) 0%,
    transparent 62%);
  z-index: 0;
  pointer-events: none;
}
.cta__inner { position: relative; z-index: 1; }
.cta__actions {
  margin-top: 2.6rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 1.4rem;
}

/* ===== Footer ===== */
.foot {
  border-top: 1px solid var(--hair-soft);
  padding-block: clamp(3.4rem, 6vw, 5rem) 2.4rem;
}
.foot__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  margin-bottom: clamp(3rem, 5vw, 4rem);
}
.foot__col h5 {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.2rem;
}
.foot__col ul { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.foot__col a { font-size: 0.92rem; color: var(--ink-dim); transition: color .4s var(--ease); }
.foot__col a:hover { color: var(--ink); }
.foot__brand .brand { font-size: 1.6rem; margin-bottom: 1.2rem; }
.foot__brand p { font-size: 0.92rem; color: var(--ink-faint); max-width: 32ch; }
.foot__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hair-soft);
  font-size: 0.76rem;
  color: var(--ink-faint);
  letter-spacing: 0.03em;
}
.foot__bottom a { color: inherit; transition: color .3s var(--ease); }
.foot__bottom a:hover { color: var(--ink); }
@media (max-width: 760px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .foot__grid { grid-template-columns: 1fr; } }

/* ===== Scroll reveal =====
   Base state is VISIBLE. Hiding + entrance animation are a JS enhancement
   (gated on html.js-anim) so throttled iframes, print/PDF, no-JS and
   reduced-motion always show content instead of a stuck opacity:0. */
.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  html.js-anim .reveal { opacity: 0; }
  html.js-anim .reveal.in {
    opacity: 1;
    animation: reveal-in 0.9s var(--ease-out) forwards;
  }
}
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@media print {
  .reveal { opacity: 1 !important; animation: none !important; transform: none !important; }
}
.hero__scroll .line { animation: scrolldrip 2.6s var(--ease) infinite; }
@media (prefers-reduced-motion: reduce) {
  .hero__scroll .line { animation: none; }
}

/* parallax target gets transform from JS */
.parallax { will-change: transform; }

/* ============================================================
   ADDITIONS · logo · photo media · athletic hero + person stage
   ============================================================ */

/* ---- Real brand logo (emblem) via mask, inherits ink, champagne on hover ---- */
.logo-mark {
  width: 30px; height: 30px;
  flex-shrink: 0;
  background: var(--ink);
  -webkit-mask: url("alphagym-logo.svg") center / contain no-repeat;
  mask: url("alphagym-logo.svg") center / contain no-repeat;
  transition: background .45s var(--ease);
}
.brand:hover .logo-mark {
  background: linear-gradient(120deg, var(--champ), var(--bronze));
}
.brand__wordmark {
  font-family: var(--font-display);
  font-weight: var(--disp-weight);
}
.foot__brand .logo-mark { width: 40px; height: 40px; }

/* ---- Rechtstexte (Impressum · Datenschutz · AGB · Hausordnung) ---- */
.legal-nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.2rem var(--gut);
  border-bottom: 1px solid var(--hair-soft);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
.legal {
  max-width: 880px; margin-inline: auto;
  padding: clamp(2.6rem, 7vw, 5rem) var(--gut) clamp(4rem, 9vw, 7rem);
}
.legal h1 {
  font-family: var(--font-display); font-weight: var(--disp-weight);
  font-size: clamp(2.1rem, 6vw, 3.6rem); line-height: 1.02;
  text-transform: uppercase; letter-spacing: var(--disp-tracking); color: var(--ink);
}
.legal__updated {
  display: block; margin: 0.7rem 0 clamp(2rem, 5vw, 3.4rem);
  font-size: 0.8rem; letter-spacing: 0.04em; color: var(--ink-faint);
}
.legal h2 {
  font-family: var(--font-display); font-weight: var(--disp-weight);
  font-size: clamp(1.18rem, 2.4vw, 1.5rem); text-transform: uppercase;
  letter-spacing: 0.01em; color: var(--ink);
  margin: 2.6rem 0 0.9rem; padding-top: 1.4rem; border-top: 1px solid var(--hair-soft);
}
.legal h3 { font-size: 1rem; font-weight: 600; color: var(--ink); margin: 1.5rem 0 0.4rem; }
.legal p, .legal li { color: var(--ink-dim); line-height: 1.7; font-size: 0.95rem; }
.legal p { margin-bottom: 1rem; }
.legal ul { margin: 0 0 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.45rem; }
.legal address { font-style: normal; color: var(--ink-dim); line-height: 1.7; margin-bottom: 1rem; }
.legal a { color: var(--champ); text-decoration: underline; text-underline-offset: 2px; }
.legal strong { color: var(--ink); font-weight: 600; }

/* ---- CTA-Banner (goldener Balken mit Angebot) ---- */
.cta-bar { background: linear-gradient(100deg, #E6C57E 0%, var(--champ) 45%, var(--bronze) 100%); color: #14110b; }
.cta-bar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.2rem, 3vw, 2.6rem); flex-wrap: wrap;
  padding-block: clamp(1.5rem, 3.2vw, 2.4rem);
}
.cta-bar__txt { display: flex; flex-direction: column; gap: 0.3rem; }
.cta-bar__kicker { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.78; }
.cta-bar__headline { display: inline-flex; align-items: baseline; gap: 0.4rem; }
.cta-bar__price { font-family: var(--font-display); font-weight: var(--disp-weight); font-size: clamp(2rem, 3.4vw, 2.7rem); line-height: 1; letter-spacing: -0.01em; }
.cta-bar__per { font-size: 0.9rem; font-weight: 600; letter-spacing: 0.04em; }
.cta-bar__lead { font-family: var(--font-display); font-weight: var(--disp-weight); font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.05; text-transform: uppercase; letter-spacing: -0.005em; }
.cta-bar__note { font-size: 0.86rem; font-weight: 500; opacity: 0.82; }
.cta-bar__btn { flex: 0 0 auto; background: #14110b; color: var(--champ); border: 0; }
.cta-bar__btn:hover { background: #000; color: var(--champ); }

/* ---- "Was ist Alpha" · Manifest ---- */
.alpha { position: relative; overflow: hidden; }
.alpha__mark {
  position: absolute; top: 50%; right: -1%; transform: translateY(-50%);
  font-family: var(--font-display); font-weight: var(--disp-weight); line-height: 0.8;
  font-size: clamp(18rem, 42vw, 40rem);
  color: color-mix(in srgb, var(--champ) 9%, transparent);
  pointer-events: none; user-select: none; z-index: 0;
}
.alpha__body { position: relative; z-index: 1; max-width: 60ch; }
.alpha__body .lede { margin-top: 1.6rem; }
.alpha__body .body-lg { margin-top: 1.1rem; }
.alpha__decide {
  margin-top: 1.9rem;
  font-family: var(--font-display); font-weight: var(--disp-weight);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.1;
  text-transform: uppercase; letter-spacing: -0.005em; color: var(--ink);
}
.alpha__actions { margin-top: 1.5rem; }

/* CTA-Sprungziel: 24-Monats-Deal nicht unter die fixe Nav scrollen */
#alpha-deal { scroll-margin-top: 104px; }
@media (max-width: 700px) {
  .alpha__mark { font-size: 52vw; right: -8%; color: color-mix(in srgb, var(--champ) 7%, transparent); }
}

@media (max-width: 720px) {
  .cta-bar__inner { flex-direction: column; align-items: flex-start; }
  .cta-bar__btn { width: 100%; justify-content: center; }
}

/* ---- Photo media (real images, not placeholders) ---- */
.media {
  position: relative;
  overflow: hidden;
  background: #0c0c0c;
}
.media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* unify the look across shots: slightly cooler, deeper blacks */
  filter: contrast(1.05) saturate(0.9) brightness(0.94);
}
.media--warm img { filter: contrast(1.04) saturate(0.96) brightness(0.96); }

/* ===== Hero (screen 1) — athletic typographic statement ===== */
.hero {
  align-items: center;
  text-align: left;
}
/* Schwarzer Header-Balken oben, Bild beginnt erst darunter */
.hero { --bar-h: clamp(66px, 8.5vh, 88px); }
.hero__bg {
  position: absolute;
  top: var(--bar-h); left: 0; right: 0; bottom: 0;
  z-index: 0;
}
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 70% 42%;
  filter: url(#heroSharpen) contrast(1.0) saturate(1.03) brightness(1.05);
}
.hero__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 72% 46%;
  filter: contrast(1.0) saturate(1.03) brightness(1.02);
}
/* Handy: schwarzer Header-Balken oben, das Bild startet darunter */
@media (max-width: 760px) {
  .hero__pin::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: var(--hero-header-h, 96px);
    background: var(--black, #0E0E0E);
    z-index: 2;
    pointer-events: none;
  }
  /* Standort oben, restlicher Inhalt unten — Hero als volle Flex-Spalte. */
  .hero .hero__pin { align-items: stretch; }
  .hero__inner {
    padding-top: calc(var(--hero-header-h, 96px) + 16px);
    padding-bottom: clamp(40px, 7vh, 76px);
    display: flex; flex-direction: column;
  }
  .hero__copy { transform: none; display: flex; flex-direction: column; flex: 1 1 auto; }
  /* Athlet zentriert und ruhiger einrahmen (wie im Entwurf) statt rechtslastig. */
  .hero__bg { transform: scale(1.06) translateY(2%); }
  .hero__poster, .hero__bg img { object-position: 74% 16%; }
  /* Promo-Badge auf dem Handy ausblenden — aufgeräumter Header. */
  .promo-badge { display: none; }
  /* Standort-Zeile (Solingen + „Das Studio von Kollegah") oben halten, gestapelt. */
  .hero__loc {
    margin: 0 0 auto;
    display: flex; flex-wrap: wrap; row-gap: 0.3rem;
    text-shadow: 0 1px 12px rgba(0,0,0,0.7);
  }
  .hero__loc-sep { display: none; }
  .hero__loc-sub { flex-basis: 100%; color: var(--ink-dim); }
  /* Headline und Inhalt sitzen auf einem klar abgedunkelten Verlauf. */
  .hero__bgscrim {
    background:
      linear-gradient(180deg, rgba(8,8,8,0.34) 0%, transparent 24%),
      linear-gradient(0deg, rgba(8,8,8,0.94) 4%, rgba(8,8,8,0.74) 30%, rgba(8,8,8,0.32) 52%, transparent 72%);
  }
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  filter: contrast(1.02) saturate(1.02) brightness(1.0);
  display: block;
  opacity: 0;
  transition: opacity .6s ease;
}
.hero__video.is-ready { opacity: 1; }
/* Crossfade layers: stage/crowd → gym on scroll. Both stacked, subject aligned
   so it reads as the *background* changing while the man stays put. */
.hero__bg-layer {
  position: absolute; inset: 0;
}
.hero__bg-layer--stage {
  object-position: 74% 38%;
}
.hero__bg-layer--gym {
  object-position: 59% 27%;
  opacity: var(--hero-swap, 0);
  will-change: opacity;
}
.hero__bgscrim {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,8,8,0.7) 0%, rgba(8,8,8,0.36) 32%, rgba(8,8,8,0.04) 56%, transparent 74%),
    linear-gradient(180deg, rgba(8,8,8,0.42) 0%, transparent 16%),
    linear-gradient(0deg, rgba(8,8,8,0.82) 0%, rgba(8,8,8,0.5) 28%, rgba(8,8,8,0.12) 52%, transparent 66%);
}
.hero::after {
  /* faint champagne aura, upper-left */
  content: "";
  position: absolute;
  left: 12%; top: -8%;
  width: 55vw; height: 48vh;
  background: radial-gradient(60% 60% at 50% 50%,
    color-mix(in srgb, var(--bronze) calc(9% * var(--accent-strength)), transparent), transparent 70%);
  z-index: 1; pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(40px, 8vh, 96px);
  text-align: left;
}
.hero__scroll { z-index: 2; }
.hero .kicker { justify-content: flex-start; }
.hero__content {
  max-width: 860px;
  margin-inline: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-shadow: 0 2px 30px rgba(0,0,0,0.5);
}
.hero__claim {
  max-width: none;
  margin: 1.5rem 0 0;
  line-height: 1.0;
  text-shadow: 0 2px 40px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.35);
}
[data-look="athletik"] .hero__claim { font-size: clamp(2.4rem, 6vw, 5rem); }
.hero__sub {
  max-width: 42ch;
  margin: 1.7rem 0 0;
  color: var(--ink);
  text-shadow: 0 1px 18px rgba(0,0,0,0.65), 0 1px 3px rgba(0,0,0,0.45);
}
.hero__actions { justify-content: flex-start; margin-top: 2.3rem; }
.hero__proof { justify-content: flex-start; margin-top: 2.5rem; }

/* ===== Person stage (screen 2) — full-bleed image + overlay ===== */
.stage {
  position: relative;
  background: var(--bg);
}
.stage__pin {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
/* JS mode: tall track + pinned screen so the video scrubs as you scroll */
html.js-anim .stage { height: auto; }

/* ---- Static stage: Hintergrundvideo + statischer Text in Kontrast-Box ---- */
.stage--static { position: relative; height: auto; min-height: 88svh; display: flex; align-items: center; overflow: hidden; }
.stage__bgvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.stage--static .stage__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,8,8,0.92) 0%, rgba(8,8,8,0.6) 44%, rgba(8,8,8,0.25) 100%),
    linear-gradient(0deg, rgba(8,8,8,0.55) 0%, transparent 42%);
}
.stage__content { position: relative; z-index: 2; width: 100%; padding-block: clamp(80px, 12vh, 140px); }
.stage__box {
  max-width: 46ch; padding: clamp(1.5rem, 3.5vw, 2.6rem);
  background: rgba(10,10,10,0.5); border: 1px solid var(--hair); border-radius: 4px;
  -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%);
}
.stage--static .stage__hl { font-size: clamp(2.4rem, 6vw, 4.6rem); max-width: 18ch; }
.stage--static .stage__cap { margin-top: 1.2rem; }
@media (prefers-reduced-motion: reduce) { .stage__bgvid { display: none; } .stage--static { background: #0a0a0a; } }
html.js-anim .stage__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 0;
}
.stage__media {
  position: absolute;
  inset: -10% 0;          /* oversized so parallax never reveals edges */
  height: 120%;
  z-index: 0;
  transform: scale(1.22);
  transform-origin: 30% 42%;
}
.stage__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  filter: contrast(1.02) saturate(0.97) brightness(1.0);
}
.stage__scrim {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,8,8,0.5) 0%, transparent 13%),
    linear-gradient(0deg, rgba(8,8,8,0.52) 0%, transparent 22%);
}
.stage__inner {
  position: relative; z-index: 2;
  width: 100%;
  padding-inline: var(--gut);
  padding-top: 120px;
  padding-bottom: clamp(44px, 9vh, 110px);
}
.stage__hl {
  font-size: clamp(2.9rem, 9vw, 8rem);
  color: var(--ink);
  max-width: 15ch;
  text-shadow: 0 2px 40px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.4);
}
.stage__cap {
  margin-top: 1.5rem;
  max-width: 42ch;
  color: var(--ink);
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  text-wrap: pretty;
  text-shadow: 0 1px 18px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.5);
}
/* Two crossfading copy states in the pinned video stage.
   Fallback (no-JS / reduced-motion): only state 1 shows here; the welcome
   message lives in the studio section instead. */
.stage__states { position: relative; }
.stage__state--2 { display: none; }
.stage__kicker { margin-bottom: 1.2rem; }
.stage__hl--2 { max-width: 15ch; font-size: clamp(2.2rem, 5.4vw, 4.6rem); line-height: 1.02; }
.stage__hl--2 .gild { color: var(--champ); }

html.js-anim .stage__state--1 { opacity: var(--s1, 1); }
html.js-anim .stage__state--2 {
  display: block;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  opacity: var(--s2, 0);
  pointer-events: none;
}
html.js-anim .stage__state--2 .stage__cap { margin-top: 1.4rem; }

/* ---- Spatial walk-through ----
   Each copy block is anchored to a spot in the room and drifts in 3D as you
   scroll: state 1 sits low-left and we pass it on our left (drifts left + grows);
   state 2 emerges from depth on the right and we approach it. JS sets the
   transforms/opacity inline; these rules just establish the anchors + stage. */
html.js-anim .stage__pin { perspective: 1500px; perspective-origin: 50% 60%; }
html.js-anim .stage__inner {
  position: absolute; inset: 0; z-index: 2;
  padding: 0;
}
html.js-anim .stage__states { position: absolute; inset: 0; pointer-events: none; }
html.js-anim .stage__state {
  position: absolute;
  bottom: clamp(44px, 9vh, 110px);
  width: min(48ch, 88vw);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
html.js-anim .stage__state--1 {
  left: var(--gut); right: auto;
  transform-origin: left bottom;
}
html.js-anim .stage__state--2 {
  left: auto; right: var(--gut);
  text-align: right;
  transform-origin: right bottom;
}
html.js-anim .stage__state--2 .stage__hl--2 { margin-left: auto; }
html.js-anim .stage__state--2 .stage__cap { margin-top: 1.4rem; margin-left: auto; }
/* welcome message now revealed in the video stage — drop the duplicate here */
/* Women-Welcome bleibt im Studio-Bereich sichtbar */
.stage__marker {
  position: absolute;
  top: clamp(86px, 13vh, 128px);
  left: var(--gut);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--champ) 65%, var(--ink-faint));
  padding: 0.5em 0.85em;
  border: 1px solid var(--hair);
  background: rgba(0,0,0,0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.stage__marker::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--champ);
}
.stage__ctrl {
  position: absolute;
  right: var(--gut);
  bottom: clamp(44px, 9vh, 110px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  font-family: ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  background: none; border: none;
  text-shadow: 0 1px 14px rgba(0,0,0,0.7);
}
.stage__ctrl .pp {
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid rgba(242,239,233,0.5);
  display: grid; place-items: center;
  background: rgba(0,0,0,0.4);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: border-color .45s var(--ease), background .45s var(--ease);
}
.stage__ctrl:hover .pp {
  border-color: color-mix(in srgb, var(--champ) 70%, var(--hair));
  background: rgba(0,0,0,0.5);
}
.stage__ctrl .pp::before {
  content: ""; width: 0; height: 0;
  border-left: 12px solid color-mix(in srgb, var(--champ) 82%, var(--ink));
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin-left: 3px;
}
@media (max-width: 640px) {
  .stage__ctrl span { display: none; }
}

/* ============================================================
   ADDITIONS · Fakten · Preise/Tabs · Probetraining-Buchung
   ============================================================ */

/* ---- Fakten (was dich erwartet) ---- */
.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
}
.fact {
  border: 1px solid var(--hair);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-height: 260px;
  background: linear-gradient(180deg, rgba(255,255,255,0.014), transparent);
  transition: border-color .5s var(--ease), transform .5s var(--ease);
}
.fact:hover {
  border-color: color-mix(in srgb, var(--champ) calc(42% * var(--accent-strength)), var(--hair));
  transform: translateY(-3px);
}
.fact__n {
  font-family: var(--font-display);
  font-weight: var(--disp-weight);
  font-size: clamp(2.8rem, 5.2vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.fact__n .u { color: color-mix(in srgb, var(--champ) calc(75% * var(--accent-strength)), var(--ink)); }
.fact__l {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 0.7rem;
}
.fact__s {
  font-family: var(--font-display);
  font-weight: var(--disp-weight);
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1.25;
  letter-spacing: var(--disp-tracking);
  color: var(--ink);
  margin-top: auto;
  padding-top: 1.4rem;
  text-wrap: balance;
}
@media (max-width: 760px) { .facts { grid-template-columns: 1fr; } .fact { min-height: 0; } }

/* ---- Preise ---- */
.pricing { background: var(--bg-raised); border-block: 1px solid var(--hair-soft); }
.tabs {
  display: flex;
  gap: 4px;
  margin: 0 auto clamp(2.4rem, 4vw, 3.6rem);
  border: 1px solid var(--hair);
  border-radius: 4px;
  padding: 5px;
  width: max-content;
  max-width: 100%;
  background: rgba(0,0,0,0.28);
}
.tab {
  font-family: var(--font-body);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 0.8em 1.5em;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 2px;
  transition: background .4s var(--ease), color .4s var(--ease);
  white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab.is-active {
  background: linear-gradient(100deg, var(--champ), var(--bronze));
  color: #0c0c0c;
}
.tabpanel { display: none; }
.tabpanel.is-active { display: block; animation: reveal-in .6s var(--ease-out); }

.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: start;
}
.plan {
  position: relative;
  border: 1px solid var(--hair);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255,255,255,0.014), transparent);
  transition: border-color .5s var(--ease), transform .5s var(--ease);
}
.plan:hover { transform: translateY(-4px); }
.plan--hot {
  border-color: transparent;
  background:
    linear-gradient(150deg, #F2D9A0 0%, #E6C57F 20%, var(--champ) 50%, #B88945 78%, var(--bronze) 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--champ) 60%, transparent),
              0 50px 100px -50px rgba(200,161,90,0.6);
  color: #14110b;
}
/* dezente Glanz-/Metallic-Optik über dem Goldverlauf */
.plan--hot::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(125deg,
    rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.14) 16%,
    transparent 40%, transparent 60%,
    rgba(255,255,255,0.06) 84%, rgba(255,255,255,0.28) 100%);
  mix-blend-mode: soft-light;
}
.plan--hot > * { position: relative; z-index: 1; }
/* Vollflächig goldene Karte — Inhalte auf dunkel umstellen für Lesbarkeit */
.plan--hot .plan__kicker { color: rgba(20,17,11,0.62); }
.plan--hot .plan__name { color: #14110b; }
.plan--hot .plan__tag { color: rgba(20,17,11,0.78); }
.plan--hot .plan__price { color: #14110b; }
.plan--hot .plan__price .eur { color: rgba(20,17,11,0.72); }
.plan--hot .plan__per { color: rgba(20,17,11,0.7); }
.plan--hot .plan__fee { color: rgba(20,17,11,0.7); border-top-color: rgba(20,17,11,0.2); }
.plan--hot .plan__fee-offer { color: #14110b; }
.plan--hot .plan__feats li { color: #1b1710; }
.plan--hot .plan__feats .ck { border-color: rgba(20,17,11,0.5); }
.plan--hot .plan__feats .ck::after { border-color: #14110b; }
.plan--hot .plan__trial { color: #14110b; }
.plan--hot .plan__badge { background: #14110b; color: var(--champ); }
.plan--hot .btn { background: #14110b; color: var(--ink); border-color: #14110b; }
.plan--hot .btn:hover { background: #000; color: var(--ink); }
.plan__badge {
  position: absolute;
  top: 0; right: 1.6rem;
  transform: translateY(-50%);
  background: linear-gradient(100deg, var(--champ), var(--bronze));
  color: #0c0c0c;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.55em 0.95em;
  border-radius: 2px;
}
.plan__kicker { font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); }
.plan__name {
  font-family: var(--font-display);
  font-weight: var(--disp-weight);
  font-size: 1.3rem;
  letter-spacing: var(--disp-tracking);
  text-transform: uppercase;
  margin: 0.6rem 0 0.6rem;
}
.plan__tag { font-size: 0.86rem; color: var(--ink-dim); min-height: 2.8em; }
.plan__price {
  font-family: var(--font-display);
  font-weight: var(--disp-weight);
  font-size: clamp(2.6rem, 4.4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-top: 1.2rem;
  display: flex;
  align-items: flex-start;
  gap: 0.12em;
}
.plan__price .eur { font-size: 0.46em; color: color-mix(in srgb, var(--champ) 82%, var(--ink)); margin-top: 0.25em; }
.plan__per { font-size: 0.82rem; color: var(--ink-dim); margin-top: 0.5rem; }
.plan__fee {
  font-size: 0.76rem; color: var(--ink-faint);
  margin-top: 1.1rem; padding-top: 1.1rem;
  border-top: 1px solid var(--hair-soft);
}
.plan__fee s { text-decoration-thickness: 1px; }
.plan__fee-offer { color: var(--champ); font-weight: 600; }
.plan__feats { list-style: none; display: flex; flex-direction: column; gap: 0.85rem; margin: 1.4rem 0 1.8rem; }
.plan__feats li { display: flex; gap: 0.7em; align-items: flex-start; font-size: 0.9rem; color: var(--ink-dim); line-height: 1.4; }
.plan__feats .ck {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--bronze) 60%, var(--hair));
  display: grid; place-items: center; margin-top: 0.06em;
}
.plan__feats .ck::after {
  content: ""; width: 5px; height: 9px;
  border: solid color-mix(in srgb, var(--champ) 85%, var(--ink));
  border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px);
}
.plan .btn { margin-top: auto; }
.plan__trial {
  margin-top: 1.1rem;
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--champ) 85%, var(--ink));
}
.plan__trial-ic { width: 14px; height: 14px; flex: 0 0 auto; opacity: 0.9; }
.plans__disclaimer {
  max-width: 64ch; margin: 2rem auto 0; text-align: center;
  font-size: 0.78rem; line-height: 1.55; color: var(--ink-faint);
}
.plans__disclaimer strong { color: var(--ink-dim); font-weight: 600; }
.plans__avail {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  margin: clamp(1.3rem, 3vw, 2rem) auto clamp(2rem, 4vw, 3rem);
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0.04em;
  color: #5ec27e;
}
.live-dot {
  position: relative; flex: 0 0 auto; width: 9px; height: 9px;
  border-radius: 50%; background: #5ec27e; box-shadow: 0 0 8px #5ec27e;
}
.live-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: #5ec27e; animation: live-pulse 1.8s ease-out infinite;
}
@keyframes live-pulse {
  0% { transform: scale(1); opacity: 0.65; }
  100% { transform: scale(3.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .live-dot::after { animation: none; } }

/* ---- Cookie-Banner ---- */
.cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  padding: clamp(0.9rem, 2vw, 1.3rem) 0 calc(clamp(0.9rem, 2vw, 1.3rem) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg-raised) 92%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  border-top: 1px solid var(--hair);
  transform: translateY(110%); opacity: 0;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.cookie.is-open { transform: translateY(0); opacity: 1; }
.cookie__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.4rem);
}
.cookie__title { font-size: 0.95rem; font-weight: 600; color: var(--ink); margin-bottom: 0.25rem; }
.cookie__text p { margin: 0; font-size: 0.84rem; line-height: 1.55; color: var(--ink-dim); max-width: 72ch; }
.cookie__text a { color: var(--champ); text-decoration: underline; text-underline-offset: 2px; }
.cookie__actions { display: flex; gap: 0.7rem; flex: 0 0 auto; }
.cookie__actions .btn { white-space: nowrap; }
@media (max-width: 760px) {
  .cookie__inner { flex-direction: column; align-items: stretch; gap: 0.9rem; }
  .cookie__actions { flex-direction: column-reverse; }
  .cookie__actions .btn { width: 100%; justify-content: center; }
}
@media (max-width: 880px) { .plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

/* ---- Probezeitraum-Buchung ---- */
.book {
  max-width: 760px;
  margin-inline: auto;
  border: 1px solid color-mix(in srgb, var(--champ) 45%, var(--hair));
  padding: clamp(1.8rem, 4vw, 3.2rem);
  background: linear-gradient(180deg, rgba(200,161,90,0.045), transparent);
  text-align: center;
}

/* Markanter 7-Tage-Probezeitraum */
.book--trial {
  position: relative;
  border-color: color-mix(in srgb, var(--champ) 62%, var(--hair));
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(200,161,90,0.10), transparent 60%),
    linear-gradient(180deg, rgba(200,161,90,0.05), transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--champ) 22%, transparent),
    0 30px 80px -40px rgba(0,0,0,0.7);
  padding-top: clamp(3.4rem, 6vw, 4.6rem);
}
.book--trial .trial-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.3rem 0.7rem 1rem;
  background: var(--champ);
  color: var(--ink, #0c0b09);
  box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--champ) 80%, transparent);
}
.book--trial .trial-badge b {
  font-family: var(--font-display, "Anton"), sans-serif;
  font-size: clamp(2rem, 4.4vw, 2.7rem);
  line-height: 0.8;
  font-weight: 400;
}
.book--trial .trial-badge span {
  font-family: var(--font-body), sans-serif;
  font-size: 0.66rem;
  line-height: 1.05;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  text-align: left;
}
.book__lead { max-width: 48ch; margin: 1rem auto 0; }
.book__form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; text-align: left; }
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.field input, .field select {
  background: rgba(0,0,0,0.32); border: 1px solid var(--hair); color: var(--ink);
  padding: 0.9em 1em; border-radius: 2px; font-family: var(--font-body); font-size: 0.95rem;
  transition: border-color .4s var(--ease);
}
.field input::placeholder { color: var(--ink-faint); }
.field input:focus, .field select:focus { outline: none; border-color: color-mix(in srgb, var(--champ) 70%, var(--hair)); }
.book__note { font-size: 0.78rem; color: var(--ink-faint); margin-top: 1.2rem; }
.book__done {
  display: none; flex-direction: column; align-items: center; gap: 1rem;
  padding: 1.5rem 0;
}
.book.is-done .book__form, .book.is-done .book__note { display: none; }
.book.is-done .book__done { display: flex; }
.book__check {
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--champ) 60%, var(--hair));
  display: grid; place-items: center;
}
.book__check::after {
  content: ""; width: 11px; height: 20px;
  border: solid color-mix(in srgb, var(--champ) 85%, var(--ink));
  border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -2px);
}
@media (max-width: 560px) { .book__form { grid-template-columns: 1fr; } }

/* =========================================================
   Instagram — horizontal-pin gallery
   JS mode: cards scroll sideways while the page scrolls down (pinned),
   with a progress bar. Fallback / mobile: native swipe carousel.
   ========================================================= */
.insta { background: var(--bg-raised); border-block: 1px solid var(--hair-soft); padding-block: 0; }
.insta__track { padding-block: clamp(72px, 11vh, 150px); }
.insta__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 2rem; margin-bottom: clamp(2rem, 4vh, 3.2rem);
}
.insta__head h2 { margin-top: 1.1rem; }
.insta__follow {
  display: inline-flex; align-items: center; gap: 0.6em; flex-shrink: 0;
  font-family: var(--font-body); font-size: 0.82rem; letter-spacing: 0.04em;
  color: var(--ink); text-decoration: none; padding-bottom: 0.3rem;
  border-bottom: 1px solid color-mix(in srgb, var(--champ) 55%, var(--hair));
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.insta__follow:hover { color: var(--champ); border-color: var(--champ); }
.insta__follow .ar { transition: transform .35s var(--ease); }
.insta__follow:hover .ar { transform: translateX(3px); }

.insta__viewport {
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.insta__viewport::-webkit-scrollbar { display: none; }
.insta__row {
  display: flex; gap: clamp(0.9rem, 1.5vw, 1.5rem);
  padding-inline: var(--gut); width: max-content;
}
.insta__card {
  flex: 0 0 auto;
  width: clamp(260px, 27vw, 360px);
  scroll-snap-align: start;
  background: var(--bg); border: 1px solid var(--hair);
  display: flex; flex-direction: column;
}
.insta__media {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #0a0a0a;
}
.insta__media image-slot { width: 100%; height: 100%; display: block; }
.insta__media img, .insta__media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.06) brightness(0.98);
}
.insta__tag {
  position: absolute; top: 0.8rem; left: 0.8rem; z-index: 2;
  font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink);
  background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
  border: 1px solid var(--hair); padding: 0.4em 0.7em;
}
.insta__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.95rem 1.05rem 1.05rem;
}
.insta__cap { font-size: 0.86rem; line-height: 1.35; color: var(--ink-dim); text-wrap: pretty; }
.insta__cap b { color: var(--ink); font-weight: 500; }
.insta__meta {
  display: inline-flex; align-items: center; gap: 0.4em; flex-shrink: 0;
  font-family: ui-monospace, monospace; font-size: 0.74rem; color: var(--ink-faint);
}
.insta__heart { width: 13px; height: 13px; color: var(--bronze); }

.insta__progress {
  height: 2px; margin: clamp(2rem, 4vh, 3rem) var(--gut) 0;
  background: var(--hair); overflow: hidden;
}
.insta__progress i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--bronze), var(--champ));
  transform: scaleX(0.06); transform-origin: left center;
}
html.js-anim .insta__progress { display: none; }

@media (max-width: 880px) {
  .insta__head { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* ===== Prominentes Angebot (vor dem Social-Bereich) ===== */
.offer__panel {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(1.6rem, 4vw, 3.6rem); align-items: center;
  padding: clamp(1.8rem, 4vw, 3.4rem);
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--champ) 45%, var(--hair));
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--bronze) 16%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  box-shadow: 0 50px 110px -60px rgba(200,161,90,0.5);
}
.offer__kicker { font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: color-mix(in srgb, var(--champ) 80%, var(--ink-faint)); }
.offer__headline { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.0; margin-top: 1rem; }
.offer__price { display: flex; align-items: flex-end; gap: 0.5rem; margin-top: 1.3rem; }
.offer__amount { font-family: var(--font-display); font-weight: var(--disp-weight); font-size: clamp(3rem, 6.5vw, 4.8rem); line-height: 0.85; color: var(--ink); letter-spacing: -0.01em; }
.offer__cur { font-size: 0.42em; color: var(--champ); margin-left: 0.08em; }
.offer__per { font-size: 1rem; color: var(--ink-dim); padding-bottom: 0.5rem; }
.offer__sub { margin-top: 0.9rem; font-size: 0.92rem; color: var(--ink-dim); }
.offer__sub s { opacity: 0.7; }
.offer__hl { color: var(--champ); font-weight: 600; }
.offer__cta { margin-top: 1.8rem; }
.offer__trial { margin-top: 1rem; font-size: 0.8rem; color: var(--ink-faint); max-width: 44ch; line-height: 1.5; }
.offer__value { list-style: none; display: flex; flex-direction: column; gap: 0.9rem; }
.offer__value li { display: flex; gap: 0.7em; align-items: flex-start; font-size: clamp(0.95rem, 1.3vw, 1.08rem); color: var(--ink); line-height: 1.4; }
.offer__value .ck { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--champ) 55%, var(--hair)); display: grid; place-items: center; margin-top: 0.05em; }
.offer__value .ck::after { content: ""; width: 5px; height: 9px; border: solid var(--champ); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
@media (max-width: 820px) {
  .offer__panel { grid-template-columns: 1fr; gap: 1.8rem; padding: 1.5rem 1.3rem; }
}