/* ==================================================================
   Der Schulter Physio — homepage
   Plain CSS. No framework, no build step.
   Every token below maps 1:1 to a `theme.json` entry in the WP theme.
   ================================================================== */

/* ---------- 1. Tokens ---------- */
/* Design tokens live in tokens.css, enqueued globally ahead of this file. */

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* Keep browser refresh/history restoration instant. Smooth scrolling is applied
   only to deliberate anchor clicks in JS, avoiding a visible top-to-section
   journey when a deep page position is restored. */
html { scroll-behavior: auto; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 800; letter-spacing: -.04em; line-height: .95; margin: 0; }
p, ul { margin: 0; }
ul  { list-style: none; padding: 0; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }

/* ---------- Fixed page backdrop ----------
   Sits behind everything; JS drives its opacity from scroll position.
   Content layers above it, so section backgrounds must stay transparent. */
.page-backdrop {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; opacity: 1; will-change: opacity;
  transition: opacity .65s var(--ease);
}
.page-backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* No overlay veil. But the original keeps a soft red glow on the right after
   the portrait dissolves, so the page never drops to flat black. Separate fixed
   layer, behind the content, that does not fade with the portrait. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(78% 70% at 88% 42%, rgba(255,0,25,.20), transparent 64%);
}
.site-header, main, .site-footer { position: relative; z-index: 1; }

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--red); color: #fff; padding: 10px 18px; border-radius: 999px;
  font-weight: 600; text-decoration: none; transition: top .2s var(--ease);
}
.skip-link:focus { top: 8px; }

/* ---------- 3. Shared type ---------- */
/* Type scale matched to the original's voice: big, tight, confident.
   Measured off the Framer build — section titles 72px, body copy 24–32px at
   weight 700. The first pass here used 16–18px regular grey and read flat. */
.section__title {
  font-size: clamp(2.25rem, 5.4vw, 4.5rem);
  line-height: .96;
  max-width: 18ch;
  margin-bottom: clamp(28px, 3.5vw, 48px);
}

.eyebrow {
  font-size: clamp(.8rem, 1.1vw, .95rem);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.eyebrow--red { color: var(--red-soft); }

/* Long-form body copy runs at 400. At 700 whole paragraphs read as shouting and
   nothing inside a section could be emphasised relative to them. */
/* Weight only. Leading and tracking stay at the original measured values —
   loosening them made the copy read larger than before. */
.prose p {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
  line-height: 1.45;
  letter-spacing: -.02em;
  color: var(--text);
  max-width: 54ch;
}
.prose p + p { margin-top: .9em; }

/* Kept one step above .prose so the statement still leads, without the old 700.
   Leading and tracking unchanged from the original. */
.lead {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  line-height: 1.36;
  letter-spacing: -.025em;
  color: var(--text);
  max-width: 48ch;
}

.rule { border: 0; height: 1px; background: var(--red); opacity: .55; margin: clamp(32px,4vw,56px) 0; }
.rule--tight { margin: 20px 0 24px; }

/* ---------- 4. Buttons — one hierarchy, four variants ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .95rem 1.6rem;
  border: 1px solid transparent; border-radius: 999px;
  font-family: var(--f-body); font-size: .975rem; font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease),
              transform .2s var(--ease), box-shadow .25s var(--ease);
}
.btn__arrow { transition: transform .25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--primary { background: var(--red); color: #fff; box-shadow: 0 6px 24px -8px var(--red-glow); }
.btn--primary:hover { background: #ff2033; transform: translateY(-2px); box-shadow: 0 10px 30px -6px var(--red-glow); }

.btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--text); }
.btn--ghost:hover { border-color: var(--red); color: var(--red-soft); transform: translateY(-2px); }

.btn--sm    { padding: .7rem 1.15rem; font-size: .9rem; }
.btn--lg    { padding: 1.1rem 2rem; font-size: 1.05rem; }
.btn--block { width: 100%; }

/* ---------- 5. Header ---------- */
.site-header {
  position: fixed; inset: 18px 0 auto; z-index: 100;
  background: none; border: 0;
  transition: transform .35s var(--ease);
}
/* The floating pill the client likes — but opaque, so it never shows page text
   through itself the way the original did. */
.nav-shell {
  width: auto; max-width: min(860px, calc(100% - 2 * var(--gutter)));
  margin-inline: auto; padding: 7px 7px 7px 20px;
  background: rgba(18,18,20,.94);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.7);
  transition: background .3s var(--ease);
}
.site-header.is-scrolled .nav-shell { background: rgba(18,18,20,.97); }
/* hides on scroll-down, returns on scroll-up — never sits on top of content */
.site-header.is-hidden { transform: translateY(-100%); }

.nav-shell { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 54px; }

.nav-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-brand img { width: 30px; height: 30px; object-fit: contain; }
/* wordmark hidden in the pill — the mark alone, as in the original */
.nav-brand__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.nav-links { display: flex; align-items: center; gap: 18px; }
.nav-links a {
  font-size: .95rem; font-weight: 500; color: var(--text-2); text-decoration: none;
  position: relative; transition: color .2s var(--ease);
}
.nav-links a:not(.btn):hover { color: var(--text); }
.nav-links a:not(.btn) + a:not(.btn)::before {
  content: "·"; color: var(--red); position: absolute; left: -11px; font-weight: 700;
}
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 2px;
  background: var(--red); transition: right .25s var(--ease);
}
.nav-links a:not(.btn):hover::after { right: 0; }
.nav-cta { color: #fff !important; margin-left: 4px; }

.nav-toggle {
  display: none; width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--line-strong); border-radius: 12px;
  cursor: pointer; place-items: center; gap: 5px; flex-direction: column;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--text); transition: transform .25s var(--ease), opacity .2s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 6. Hero ---------- */
.hero {
  position: relative; display: flex; align-items: center;
  min-height: min(92svh, 860px);
  padding-block: 132px clamp(48px, 6vw, 80px);
  overflow: hidden;
}
/* no solid base — the fixed .page-backdrop must show through on desktop */
.hero__bg { position: absolute; inset: 0; }
/* the hero's own portrait is the mobile fallback; desktop uses .page-backdrop */
.hero__portrait { display: none; }
.hero__scrim { display: none; }   /* desktop scrim lives on .page-backdrop */
.hero__inner { position: relative; }

.badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 15px; margin-bottom: 20px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: rgba(255,255,255,.04);
  font-size: .875rem; font-weight: 600; letter-spacing: .02em;
}
/* was a lime-green dot — the only green on the page */
/* Green reads as "open / available" — the one place green is allowed on the page. */
.badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 var(--green-glow); animation: pulse 2.4s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

.hero__title {
  font-size: clamp(1.9rem, 4.5vw, 4rem);
  line-height: .94;
  /* No text-wrap:balance and no ch cap — the breaks are explicit (.lb).
     NO overflow-wrap:break-word either; it chops mid-word with no hyphen. */
}
.hero__title em { font-style: normal; color: var(--red); }

.lb { display: none; }
@media (min-width: 861px) { .lb { display: inline; } }

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 2.8vw, 36px); }

/* ---------- 7. Stats ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.stat-grid--3 { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin-block: clamp(40px,5vw,64px); }

.stat { border-top: 1px solid var(--line); padding-top: 20px; }
.stat__value {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(3rem, 5.8vw, 5rem);
  line-height: 1; letter-spacing: -.04em; color: var(--red);
  display: flex; align-items: flex-start;
}
.stat__plus { font-size: .45em; line-height: 1.1; margin-left: .06em; }
.stat__label { margin-top: 16px; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.0625rem, 1.5vw, 1.375rem); line-height: 1.25; letter-spacing: -.02em; color: var(--text); }
.stat__note  { margin-top: 8px; font-size: 1rem; color: var(--muted); line-height: 1.55; }

/* ---------- 8. Problem + offers ---------- */
.problem__grid {
  display: grid; grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(28px, 3.6vw, 56px); align-items: center;
}
.problem__figure { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.problem__figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; }

.problem__title { font-size: clamp(1.85rem, 3.4vw, 2.9rem); line-height: 1; color: var(--red); max-width: 18ch; }
.problem__copy .rule { margin: clamp(20px,2.4vw,28px) 0; }

.offer-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
  margin-top: clamp(40px, 5vw, 64px);
}
.card {
  display: flex; flex-direction: column;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(24px, 2.6vw, 34px);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
/* subgrid keeps title / sub / chip / body / CTA on shared rows across all three
   cards, so nothing drifts when one card's copy is longer */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1025px) {
    .offer-grid { grid-template-rows: auto auto auto 1fr auto; }
    .card { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; }
  }
}
.card:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.card--featured { border-color: rgba(255,0,25,.55); box-shadow: 0 0 40px -18px var(--red-glow); }
.card--featured:hover { border-color: var(--red); }

.card__title { font-size: clamp(1.375rem, 1.9vw, 1.625rem); text-transform: uppercase; letter-spacing: -.01em; }
.card__sub   { margin-top: 14px; color: var(--red-soft); font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.35; }
.card__chip {
  margin-top: 20px; align-self: flex-start;
  background: var(--red); color: #fff;
  padding: 10px 16px; border-radius: var(--radius-sm);
  font-family: var(--f-display); font-weight: 800; font-size: .875rem;
  letter-spacing: .04em; text-transform: uppercase; line-height: 1.3;
}
/* Body sits at 400 so the 800-weight title above it reads as the card's heading.
   At 700 the two were indistinguishable and the card had no hierarchy. */
.card__body { flex: 1; margin-top: 24px; margin-bottom: 28px; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.5; letter-spacing: -.015em; color: var(--text-2); }

/* ---------- 9. PSSP ---------- */
.pssp__head {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 3.6vw, 56px); align-items: end;
}
.pssp__head .section__title { margin-bottom: 0; margin-top: 14px; max-width: 16ch; }
.pssp__lede p { max-width: 46ch; }

.pssp__figure {
  position: relative; margin: clamp(32px,3.6vw,52px) 0;
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line);
}
.pssp__figure::after {                 /* brand glow so the mockup sits in the page */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 120% at 88% 50%, rgba(255,0,25,.16), transparent 62%);
}
.pssp__figure img { width: 100%; display: block; }

.pssp__body {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(28px, 3.6vw, 56px); align-items: start;
}
.pssp__panel {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(22px, 2.4vw, 30px);
}
.pssp__panel .stat-grid--3 { margin: 0 0 24px; max-width: none; gap: 18px; }
.pssp__panel .stat { border-top: 0; border-left: 2px solid var(--red); padding: 2px 0 2px 14px; }
.pssp .stat-grid--3 .stat__value { color: var(--text); font-size: clamp(1.9rem, 2.6vw, 2.5rem); }
.pssp .stat-grid--3 .stat__label { color: var(--muted); font-size: .95rem; margin-top: 4px; }

/* ---------- 10. Testimonials ---------- */
.testimonials { overflow: hidden; }
.testimonials__head .section__title { margin-bottom: clamp(32px,4vw,48px); }

.marquee {
  /* edge masks — quotes no longer get sliced mid-word at the viewport edge */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track { display: flex; gap: var(--gap); width: max-content; animation: marquee 70s linear infinite; }
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - (var(--gap) / 2))); } }

.quote {
  display: flex; flex-direction: column; flex: 0 0 auto;
  width: min(360px, 78vw); margin: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px;
}
.quote blockquote { flex: 1; margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 1.125rem; line-height: 1.5; letter-spacing: -.015em; color: var(--text-2); }
.quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: 24px; font-size: .9375rem; }
.quote figcaption img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.quote figcaption b { display: block; color: var(--text); font-weight: 600; line-height: 1.3; }
.quote figcaption small { display: block; color: var(--muted); font-size: .875rem; line-height: 1.3; }

/* ---------- 11. About ---------- */
.about__grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 4vw, 64px); align-items: start; }
.about__figure { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.about__figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.about__closing { margin-top: clamp(48px, 6vw, 80px); }
.about__closing .btn { margin-top: 32px; }

/* reveal-on-scroll — resting state is fully legible, never mid-grey */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- 12. Action band ---------- */
.band { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.band img {
  width: 100%; height: clamp(300px, 42vw, 520px);
  object-fit: cover; object-position: 50% 30%;   /* rings + face in frame, feet cropped out */
  border-radius: var(--radius-lg); border: 1px solid var(--line);
}

/* ---------- 13. Newsletter ---------- */
.newsletter__card {
  max-width: 640px; margin-inline: auto; text-align: center;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(32px, 5vw, 56px);
}
.newsletter__card .section__title { max-width: none; margin-bottom: 16px; }
.newsletter__lede { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.5; letter-spacing: -.015em; color: var(--text-2); margin-bottom: 32px; }
.newsletter__lede b { color: var(--text); }

.newsletter__form { display: grid; gap: 16px; text-align: left; }
.field label { display: block; font-size: .875rem; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.field input {
  width: 100%; padding: 14px 16px;
  background: rgba(255,255,255,.05); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 1rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input::placeholder { color: #71747A; }
.field input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(255,0,25,.18); }

/* DSGVO — required for a signup collecting name + email in the EU */
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .875rem; color: var(--muted); line-height: 1.55; margin-top: 4px; }
.consent input { accent-color: var(--red); width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; }
.consent a { color: var(--red-soft); }

.form-msg { margin-top: 4px; font-size: .875rem; min-height: 1.2em; color: var(--red-soft); }
.form-msg.is-ok { color: #57D26A; }

/* ---------- 14. Closing CTA ---------- */
.closing { text-align: center; }
/* Size and measure are set on the h2 in divi-v2.css — a Divi-scoped rule there
   outranks this one, and `ch` here resolves against the wrapper's font-size. */
.closing__title { font-size: clamp(2rem, 5vw, 4rem); line-height: .98; max-width: 20ch; text-shadow: 0 2px 30px rgba(0,0,0,.75); margin-inline: auto; text-wrap: balance; }
.closing__title em { font-style: normal; color: var(--red); }
.closing .btn { margin-top: clamp(28px, 3.5vw, 44px); }

/* ---------- 15. Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-top: clamp(48px, 6vw, 80px); }
.footer__grid { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: clamp(32px, 4vw, 56px); }
.footer__brand img { width: clamp(150px, 16vw, 200px); }

.footer__title { font-family: var(--f-body); font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.footer__title--spaced { margin-top: 32px; }
.footer__col li + li { margin-top: 10px; }
.footer__col a { color: var(--text-2); text-decoration: none; transition: color .2s var(--ease); }
.footer__col a:hover { color: var(--red-soft); }
.footer__contact a { font-weight: 500; }

/* monochrome — was full-colour LinkedIn blue / Instagram gradient */
.social { display: flex; gap: 10px; }
.social li + li { margin-top: 0; }
.social a {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  color: var(--text-2); transition: color .2s var(--ease), border-color .2s var(--ease);
}
.social a:hover { color: var(--red); border-color: var(--red); }
.social svg { width: 19px; height: 19px; fill: currentColor; }

.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: clamp(40px, 5vw, 64px); padding-block: 24px;
  border-top: 1px solid var(--line);
}
/* legally required links — now actually look like links */
.legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.legal a { color: var(--muted); font-size: .875rem; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); transition: color .2s var(--ease); }
.legal a:hover { color: var(--text); text-decoration-color: var(--red); }
.copyright { font-size: .875rem; color: var(--muted); }
.copyright b { color: var(--text-2); font-weight: 600; }

/* ==================================================================
   16. Responsive
   ================================================================== */
@media (max-width: 1024px) {
  .problem__grid,
  .pssp__head,
  .pssp__body { grid-template-columns: 1fr; }
  .pssp__head { align-items: start; }
  .pssp__panel .stat-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .stat-grid   { grid-template-columns: repeat(2, 1fr); gap: 32px var(--gap); }
  .offer-grid  { grid-template-columns: 1fr; max-width: 560px; }
  .about__grid { grid-template-columns: 1fr; }
  .about__figure img { aspect-ratio: 16 / 10; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .nav-toggle { display: flex; width: 40px; height: 40px; }
  .nav-shell { padding: 6px 6px 6px 16px; }

  .nav-links {
    position: fixed; inset: 84px 0 auto; flex-direction: column; align-items: stretch; gap: 4px;
    background: rgba(15,15,16,.98);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    padding: 20px var(--gutter) 28px;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  .nav-links.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav-links a:not(.btn) { padding: 14px 0; font-size: 1.125rem; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--line); }
  .nav-links a:not(.btn)::after { display: none; }
  .nav-cta { margin-top: 20px; }

  /* Hero: the portrait sits behind the type. The headline is never split. */
  .hero { min-height: min(96svh, 780px); padding-block: 120px 56px; align-items: flex-end; }
  .page-backdrop { display: none; }   /* desktop/tablet only, as in the original */
  .hero__portrait {
    display: block; position: absolute; top: 0; right: 0; left: 0;
    width: 100%; height: 68%; object-fit: cover; object-position: 50% 12%;
  }
  .hero__scrim {
    display: block; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15,15,16,.30) 0%, rgba(15,15,16,.55) 32%, rgba(15,15,16,.93) 62%, var(--bg) 82%);
  }
  .hero__title { max-width: 100%; text-shadow: 0 2px 24px rgba(0,0,0,.7); }
  .hero__actions .btn { width: 100%; }

  .section__title, .problem__title, .closing__title { max-width: 100%; overflow-wrap: break-word; hyphens: auto; }
  .stat-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .stat-grid--3 .stat__value { font-size: clamp(2rem, 8vw, 2.75rem); }
}

@media (max-width: 640px) {
  .pssp__panel .stat-grid--3 { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 560px) {
  /* "Sportphysiotherapeut" and "Schulterrehabilitation" are wider than the
     viewport at the desktop scale — step down and allow hyphenation. */
  .hero__title { font-size: clamp(1.75rem, 8.2vw, 2.5rem); }
}

/* very narrow phones — step down so compounds fit without leaving a stub */
@media (max-width: 380px) {
  .hero__title { font-size: 1.6rem; }
  .stat-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .quote { padding: 24px; }
}

/* ---------- 17. Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-backdrop { transition: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}

/* ==================================================================
   V2 — editorial refinement
   ================================================================== */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .22;
  background-image: radial-gradient(rgba(255,255,255,.16) .55px, transparent .55px);
  background-size: 5px 5px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 220;
  height: 2px;
  pointer-events: none;
  background: rgba(255,255,255,.04);
}
.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--red);
  box-shadow: 0 0 14px var(--red-glow);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.hero__inner { max-width: var(--shell); }
.hero__lead {
  max-width: 650px;
  margin-top: clamp(24px,3vw,36px);
  color: var(--text-2);
  font-family: var(--f-display);
  font-size: clamp(1.05rem,1.45vw,1.3rem);
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: -.018em;
}
.hero__actions { margin-top: 24px; }

.section-intro {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(280px,.9fr);
  gap: var(--gap);
  align-items: end;
  margin-bottom: clamp(38px,5vw,64px);
}
.section-intro .eyebrow { grid-column: 1 / -1; }
.section-intro .section__title { margin-bottom: 0; }
.section-intro__copy {
  max-width: 48ch;
  color: var(--text-2);
  font-family: var(--f-display);
  font-size: clamp(1.05rem,1.45vw,1.3rem);
  font-weight: 650;
  line-height: 1.5;
}
.stats .stat-grid {
  padding: clamp(24px,3vw,38px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(21,21,23,.72);
  backdrop-filter: blur(16px);
}
.stats .stat { border-top-color: rgba(255,0,25,.55); }

.problem__grid {
  padding: clamp(18px,2vw,26px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(21,21,23,.76);
  backdrop-filter: blur(18px);
}
.problem__copy { padding: clamp(8px,2vw,24px); }
.problem__copy .eyebrow { margin-bottom: 18px; }
.problem__text {
  max-width: 46ch;
  color: var(--text-2);
  font-family: var(--f-display);
  font-size: clamp(1.05rem,1.4vw,1.25rem);
  font-weight: 650;
  line-height: 1.5;
}

.offers-head {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr);
  gap: var(--gap);
  align-items: end;
  margin-top: clamp(64px,8vw,112px);
}
.offers-head__title {
  max-width: 18ch;
  margin-top: 14px;
  font-size: clamp(2rem,4vw,3.8rem);
  line-height: .98;
}
.offers-head > p {
  max-width: 46ch;
  color: var(--text-2);
  font-family: var(--f-display);
  font-size: clamp(1rem,1.35vw,1.2rem);
  font-weight: 650;
  line-height: 1.5;
}
.offer-grid { margin-top: clamp(34px,4vw,52px); }
.card { position: relative; overflow: hidden; }
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg,var(--red),transparent 72%);
  opacity: .42;
}
.card--featured::before { opacity: 1; }
.card__index {
  margin-bottom: 22px;
  color: var(--muted);
  font-family: var(--f-display);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .16em;
}
.card__flag {
  position: absolute;
  top: 24px;
  right: 24px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #fff;
  background: var(--red);
  font-size: .7rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pssp { border-block: 1px solid var(--line); }
.check-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.check-list li {
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text-2);
  font-size: .85rem;
  font-weight: 650;
}
.check-list li::before { content: "✓"; margin-right: 7px; color: var(--red-soft); }
.pssp__figure { box-shadow: 0 32px 90px -48px rgba(255,0,25,.75); }

.testimonials__head {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(280px,.9fr);
  gap: 12px var(--gap);
  align-items: end;
}
.testimonials__head .eyebrow { grid-column: 1 / -1; }
.testimonials__head .section__title { margin-bottom: 0; }
.testimonials__intro {
  max-width: 38ch;
  padding-bottom: 6px;
  color: var(--text-2);
  font-family: var(--f-display);
  font-size: clamp(1.05rem,1.5vw,1.3rem);
  font-weight: 650;
  line-height: 1.45;
}
.marquee { margin-top: clamp(34px,4vw,52px); }
.quote { min-height: 300px; }

.about { border-top: 1px solid var(--line); }
.about__grid { align-items: center; }
.about__figure { position: relative; }
.about__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,transparent 60%,rgba(15,15,16,.38));
}
.about__copy .eyebrow { margin-bottom: 18px; font-family: var(--f-body); font-size: .85rem; }
.about__title {
  max-width: 16ch;
  margin-bottom: clamp(28px,3vw,42px);
  color: var(--text);
  font-size: clamp(2rem,4vw,3.8rem);
  line-height: .98;
}
.credential-strip {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  margin-bottom: clamp(42px,5vw,70px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
}
.credential-strip li { padding: clamp(20px,2.6vw,32px); background: rgba(21,21,23,.9); }
.credential-strip strong { display: block; color: var(--red); font-family: var(--f-display); font-size: clamp(1.35rem,2vw,2rem); line-height: 1.1; }
.credential-strip span { display: block; margin-top: 8px; color: var(--muted); font-size: .9rem; }
.about__closing .lead { max-width: 56ch; }

.band {
  position: relative;
  min-height: clamp(440px,58vw,720px);
  margin-bottom: var(--section-y);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.band img { position: absolute; inset: 0; height: 100%; object-position: 50% 24%; }
.band__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(15,15,16,.94) 0%,rgba(15,15,16,.72) 42%,rgba(15,15,16,.05) 75%);
}
.band__content {
  position: absolute;
  z-index: 1;
  left: clamp(24px,5vw,72px);
  bottom: clamp(28px,6vw,80px);
  max-width: 620px;
}
.band__content .eyebrow { margin-bottom: 18px; color: var(--red-soft); }
.band__content h2 { max-width: 13ch; font-size: clamp(2.2rem,5vw,4.8rem); line-height: .92; }
.band__content > p:last-child { max-width: 48ch; margin-top: 24px; color: var(--text-2); font-size: clamp(1rem,1.3vw,1.2rem); }
.band__content .btn { margin-top: clamp(26px,3vw,40px); }

.newsletter__card { position: relative; overflow: hidden; }
.newsletter__card::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto;
  height: 260px;
  pointer-events: none;
  background: radial-gradient(circle,rgba(255,0,25,.22),transparent 66%);
}
.newsletter__card > * { position: relative; }
.newsletter__benefits {
  display: grid;
  gap: 10px;
  margin: 0 0 30px;
  text-align: left;
}
.newsletter__benefits li { color: var(--text-2); font-size: .95rem; }
.newsletter__benefits li::before { content: "✓"; margin-right: 10px; color: var(--red); font-weight: 800; }
.form-trust { text-align: center; color: var(--muted); font-size: .78rem; }

.closing { padding-block: clamp(96px,12vw,170px); }
.closing .eyebrow { margin-bottom: 22px; }
.closing__title { max-width: 12ch; font-size: clamp(3rem,8vw,7.5rem); }
.closing__copy {
  max-width: 620px;
  margin: 26px auto 0;
  color: var(--text-2);
  font-family: var(--f-display);
  font-size: clamp(1.05rem,1.5vw,1.35rem);
  font-weight: 650;
  line-height: 1.45;
}

@media (max-width: 1024px) {
  .section-intro,
  .offers-head,
  .testimonials__head { grid-template-columns: 1fr; align-items: start; }
  .section-intro .eyebrow,
  .testimonials__head .eyebrow { grid-column: auto; }
  .section-intro__copy,
  .offers-head > p,
  .testimonials__intro { max-width: 56ch; }
}

@media (max-width: 860px) {
  .hero__lead { max-width: 36ch; }
  .stats .stat-grid { padding: 24px; }
  .problem__grid { padding: 12px; }
  .problem__copy { padding: 20px 10px 12px; }
  .credential-strip { grid-template-columns: 1fr; }
  .band { min-height: 620px; }
  .band img { object-position: 56% 25%; }
  .band__scrim { background: linear-gradient(180deg,rgba(15,15,16,.04),rgba(15,15,16,.92) 68%); }
  .band__content { right: 24px; }
  .band__content .closing__title { max-width: 15ch; }
}

@media (max-width: 560px) {
  .hero__lead { font-size: 1rem; }
  .section-intro { margin-bottom: 32px; }
  .stats .stat-grid { padding: 20px; }
  .offers-head { margin-top: 58px; }
  .card__flag { top: 20px; right: 20px; }
  .check-list { display: grid; }
  .testimonials__head .section__title { font-size: 2.35rem; }
  .about__title { font-size: 2.35rem; }
  .band { min-height: 560px; border-radius: var(--radius); }
  .band__content h2 { font-size: 2.55rem; }
  .band__content .closing__title { max-width: 15ch; overflow-wrap: break-word; hyphens: auto; }
  .band__content .btn { width: 100%; }
  .newsletter__card { padding: 28px 20px; }
  .closing__title { font-size: clamp(3.2rem,16vw,5rem); overflow-wrap: normal; hyphens: none; }
}