/* ==========================================================================
   Goeerki Coaching — Stylesheet
   --------------------------------------------------------------------------
   Architecture
     1.  Fonts
     2.  Design tokens (colour, type scale, spacing, layout)
     3.  Reset & base elements
     4.  Typography helpers
     5.  Layout primitives (container, card, section rhythm)
     6.  Buttons & links
     7.  Header
     8.  Hero
     9.  Press band
     10. Coaching intro
     11. Transformation
     12. Features
     13. Process timeline
     14. About the coach
     15. Testimonials
     16. Call-to-action marquee
     17. FAQ
     18. Footer
     19. Scroll cue
     20. Motion / reveal
   --------------------------------------------------------------------------
   Approach: mobile-first, fluid type & spacing via clamp(), intrinsic grids
   (auto-fit / explicit column counts) so layouts reflow smoothly between the
   420px and 1512px design targets with no "dead zones".
   ========================================================================== */

/* 1. Fonts ----------------------------------------------------------------- */
/* Halogen Black – Fontspring Webfont-Lizenz (Positype). Nur WOFF/WOFF2 per
   @font-face (lt. EULA), Single-Weight; Bereich 100–900, damit jeder
   font-weight-Wert ohne synthetisches Fett auf diese Schnitt-Datei mappt. */
@font-face {
  font-family: "halogen-bl";
  src: url("../fonts/halogen-bl-webfont.woff2") format("woff2"),
       url("../fonts/halogen-bl-webfont.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Urbanist";
  src: url("../fonts/Urbanist-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Urbanist";
  src: url("../fonts/Urbanist-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* 2. Design tokens --------------------------------------------------------- */
:root {
  /* Brand colours */
  --onyx:        #0D0C0D;
  --platinum:    #EBEDEC;
  --page:        #E3E8E4;
  --card:        #FCFDFC;
  --card-soft:   #F1F4F1;
  --green:       #009950;
  --yellow:      #FFD96E;
  --ink:         var(--onyx);
  --ink-soft:    #46494A;
  /* Full 1.7px borders — black on light cards/buttons, white on dark bands */
  --card-border:       0px solid var(--onyx);
  --card-border-light: 0px solid var(--platinum);

  /* Typography */
  --font-display: "halogen-bl", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Urbanist", "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale (≈420px → ≈1512px) */
  --fs-eyebrow:  clamp(12px, 11px + 0.2vw, 14px);
  --fs-body:     clamp(15px, 14px + 0.3vw, 18px);
  --fs-lede:     clamp(16px, 14px + 0.5vw, 20px);
  --fs-h3:       clamp(20px, 17px + 0.7vw, 24px);
  --fs-quote:    clamp(20px, 16.5px + 0.9vw, 28px);
  --fs-display:  clamp(32px, 24px + 1.95vw, 53px);
  --fs-hero:     clamp(36px, 26px + 2.4vw, 62px);
  --fs-figure:   clamp(40px, 26px + 2.8vw, 66px);
  --fs-step:     clamp(22px, 18px + 1vw, 28px);

  /* Spacing & layout */
  --max:         1320px;
  --gutter:      clamp(16px, 4vw, 48px);
  --stack-gap:   clamp(24px, 2.8vw, 40px);
  --card-pad-y:  clamp(34px, 20px + 2.6vw, 66px);
  --card-pad-x:  clamp(30px, 17px + 2.8vw, 70px);
  --inner-pad:   clamp(30px, 18px + 2.1vw, 54px);
  --radius:      12px;
  --radius-pill: 999px;
  /* Long shaft + a tall, horizontally-compact chevron head (used as a mask) */
  --arrow-mask:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 24'%3E%3Cpath d='M2 12H53M43 4L53 12L43 20' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E");
  /* Same shape, thicker stroke — for the large marquee arrows */
  --arrow-mask-bold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 24'%3E%3Cpath d='M2 12H53M43 4L53 12L43 20' fill='none' stroke='%23000' stroke-width='3.3' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E");
  --header-h:    clamp(88px, 6vw + 52px, 98px);
  --header-space: calc(var(--header-h) + clamp(24px, 3vw, 40px));
  /* Header sits a touch wider than the content column */
  --header-bleed:  32px;
  --header-gutter: max(8px, calc(var(--gutter) - var(--header-bleed)));
}

/* Slightly roomier card rhythm on desktop using shared tokens */
@media (min-width: 960px) {
  :root {
    --card-pad-y: clamp(34px, 20px + 2.2vw, 66px);
    --card-pad-x: clamp(30px, 17px + 2.4vw, 70px);
    --inner-pad:  clamp(30px, 18px + 1.7vw, 54px);
  }
}

/* 3. Reset & base ---------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { min-width: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; cursor: pointer; }

p { margin: 0; overflow-wrap: break-word; }

h1, h2, h3 { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

dl, dd { margin: 0; }

/* 4. Typography helpers ---------------------------------------------------- */
.display,
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
}

h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.16;
  text-wrap: balance;
  hyphens: auto;
  overflow-wrap: break-word;
}

.display { font-size: var(--fs-display); }

/* Green outlined word inside headings (e.g. "deinem", "Transformation") */
h1 em,
.display em {
  font-style: normal;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: clamp(1px, 0.05em, 1.6px) var(--green);
}

/* Eyebrow label + trailing rule */
.eyebrow {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 18px);
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
}

.eyebrow::after {
  content: "";
  flex: 1 1 auto;
  height: 1.7px;
  background: var(--yellow);
}

.lede,
.sub {
  font-family: var(--font-display);
  font-size: var(--fs-lede);
  font-weight: 400;
  line-height: 1.34;
  text-wrap: pretty;
}

/* 5. Layout primitives ----------------------------------------------------- */
main {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
  padding-top: var(--header-space);
  padding-bottom: var(--stack-gap);
}

/* Every top-level band is centred to the same measure */
.hero,
.section,
.press-band,
.cta-card-section,
.site-footer {
  width: min(var(--max), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.site-footer { margin-top: var(--stack-gap); }

/* The section wrapper is just a transparent vertical stack now — the header
   and every content block are their own individual cards. */
.section-parent-card {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
}

/* Section heading is its own card */
.section-header,
.intro-lv-header {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 16px);
  max-width: 100%;
  background: var(--card);
  border-radius: var(--radius);
  padding: var(--card-pad-y) var(--card-pad-x);
}

.section-header .display { max-width: 16ch; }
.section-header .sub { max-width: 66ch; }

/* Shared child-card surface (features, steps, testimonials, faq) */
.feature-card,
.timeline-step,
.testimonial-track article,
.faq-item {
  background: var(--card);
  border-radius: var(--radius);
}

/* 6. Buttons & links ------------------------------------------------------- */
.link-arrow,
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  padding: clamp(13px, 1.1vw, 17px) clamp(22px, 1.8vw, 30px);
  border-radius: var(--radius-pill);
  background: var(--green);
  color: var(--platinum);
  font-family: var(--font-display);
  font-size: clamp(15px, 14px + 0.3vw, 17px);
  line-height: 1;
  white-space: nowrap;
  transition: transform 240ms ease, box-shadow 240ms ease;
}

.link-arrow::after,
.header-cta i {
  content: "";
  display: inline-block;
  width: 2.2em;
  height: 0.92em;
  background: currentColor;
  -webkit-mask: var(--arrow-mask) center / contain no-repeat;
          mask: var(--arrow-mask) center / contain no-repeat;
  transition: transform 260ms ease;
}
/* The header CTA arrow is a real <i> holding a "→" glyph — hide that glyph */
.header-cta i {
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

.link-arrow.xl {
  font-size: clamp(16px, 14px + 0.4vw, 19px);
  padding: clamp(15px, 1.2vw, 19px) clamp(26px, 2vw, 34px);
}

.link-arrow:hover,
.header-cta:hover { transform: translateY(-2px); }

.link-arrow:hover::after,
.header-cta:hover i { transform: translateX(5px); }

/* 7. Header ---------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 8px;
  left: var(--header-gutter);
  right: var(--header-gutter);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 32px);
  height: var(--header-h);
  padding-inline: clamp(26px, 3.2vw, 60px);
  background: var(--onyx);
  color: var(--platinum);
  border-radius: var(--radius-pill);
  max-width: calc(var(--max) + 2 * var(--header-bleed));
  margin-inline: auto;
}

/* Logo (einzelne SVG) */
.site-logo { display: block; line-height: 0; }
.site-logo img { display: block; width: auto; max-width: 100%; }
.header-logo img { height: clamp(28px, 3.2vw, 40px); }

.header-nav {
  display: none;
  font-family: var(--font-display);
  font-size: 15px;
}

.header-nav a { position: relative; padding-bottom: 3px; }
.header-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.header-nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.header-cta {
  display: none;
  gap: 10px;
  /* Solid green pill, no border (text + arrow at nav scale) – kompakter */
  padding: clamp(9px, 0.8vw, 12px) clamp(18px, 1.5vw, 26px);
  font-size: clamp(12px, 12px + 0.2vw, 14px);
}
.header-cta i { width: 2.1em; height: 0.88em; }
.header-cta i::before { content: none; }
.header-cta:hover i { transform: translateX(4px); }

/* Hamburger */
.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 46px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 0;
}
.menu-toggle span {
  display: block;
  width: 32px;
  height: 2px;
  background: var(--platinum);
  transition: transform 220ms ease, opacity 220ms ease;
}
.site-header.menu-open .menu-toggle span:first-child { transform: translateY(4.5px) rotate(45deg); }
.site-header.menu-open .menu-toggle span:last-child  { transform: translateY(-4.5px) rotate(-45deg); }

/* Mobile dropdown */
.header-nav {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 10px);
  flex-direction: column;
  padding: 10px clamp(20px, 2.4vw, 40px);
  background: var(--onyx);
  border: 1.5px solid rgba(235, 237, 236, 0.55);
  border-radius: 18px;
  font-size: clamp(18px, 4vw, 22px);
}
.header-nav a { padding: 12px 0; border-bottom: 1px solid rgba(235, 237, 236, 0.16); }
.header-nav a:last-child { border-bottom: 0; }
.site-header.menu-open .header-nav { display: flex; }

@media (min-width: 1180px) {
  .header-nav {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: clamp(26px, 2.6vw, 46px);
    padding: 0;
    background: transparent;
    border: 0;
    font-size: clamp(15px, 1vw, 17px);
    display: flex;
  }
  .header-nav a { padding: 0 0 3px; border: 0; }
  .menu-toggle { display: none; }
  .header-cta { display: inline-flex; }
}

/* 8. Hero ------------------------------------------------------------------ */
.hero {
  display: grid;
  gap: clamp(24px, 4vw, 56px);
}

.hero-grid {
  display: grid;
  gap: clamp(24px, 3vw, 48px);
  align-items: stretch;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 28px);
  background: var(--card);
  border-radius: var(--radius);
  padding: var(--card-pad-y) var(--card-pad-x);
}

.hero-copy h1 {
  font-size: var(--fs-hero);
  line-height: 1;
  max-width: 13ch;
}
.hero-copy h1 span { display: block; }

/* Hero: erster Absatz (Lede) in der Secondary-/Body-Font statt Display */
.hero-copy .lede { max-width: 36ch; font-family: var(--font-body); }

/* Proof strip — three across at every size.
   Mobile: icon on top / text below (centred).  Desktop: icon-left / text-right. */
.hero-proof-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 16px);
  font-family: var(--font-display);
}
.hero-proof-strip span {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(8px, 1vw, 12px);
  min-width: 0;
  padding: clamp(12px, 1.3vw, 18px);
  background: var(--yellow);
  border: var(--card-border);
  border-radius: var(--radius);
  font-size: clamp(10px, 8.5px + 0.4vw, 13px);
  line-height: 1.2;
}
/* Horizontal (icon-left) only once the copy column is wide enough to hold
   the text on two lines; below that the compact 3-up vertical cards are used. */
@media (min-width: 1180px) {
  .hero-proof-strip span {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: clamp(7px, 0.6vw, 10px);
    /* equal padding all round → the icon sits with the same inset on every side */
    padding: clamp(13px, 1.1vw, 16px);
  }
}
/* Icon sits in a yellow circular chip — yellow stays a punctual accent */
.hero-proof-strip span img {
  width: clamp(40px, 3.7vw, 50px);
  height: clamp(40px, 3.7vw, 50px);
  flex: 0 0 auto;
  /* less inner padding → the icon itself reads a touch larger in the circle */
  padding: clamp(6px, 0.65vw, 9px);
  background: var(--yellow);
  border-radius: 50%;
  object-fit: contain;
}

/* Portrait + spinning badge */
.hero-portrait {
  position: relative;
  margin: 0;
  width: 100%;
}
.hero-portrait .portrait-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius);
  filter: saturate(1.04) contrast(1.02);
}
.hero-badge {
  position: absolute;
  /* Overhangs the portrait's top-right corner at every size (clipped by
     html/body overflow-x: clip so it never creates a scrollbar). */
  top: clamp(-16px, -2.4vw, -8px);
  right: clamp(-16px, -2.4vw, -8px);
  width: clamp(96px, 22vw, 150px);
  height: clamp(96px, 22vw, 150px);
  display: grid;
  place-items: center;
  animation: badge-spin 26s linear infinite;
}
.hero-badge-img { width: 100%; height: 100%; object-fit: contain; }

@keyframes badge-spin { to { transform: rotate(360deg); } }

/* Two-column hero on larger screens (portrait left, copy right) */
@media (min-width: 960px) {
  .hero-grid {
    grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1fr);
    align-items: stretch;
  }
  /* The portrait fills the row height that the copy card defines, so the two
     columns are always equal height with no leftover whitespace. The image is
     absolutely positioned so its tall aspect ratio can't stretch the row. */
  .hero-portrait { grid-column: 1; grid-row: 1; max-width: none; margin-inline: 0; justify-self: stretch; align-self: stretch; min-height: clamp(440px, 42vw, 600px); }
  .hero-portrait .portrait-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center top;
  }
  .hero-copy { grid-column: 2; grid-row: 1; padding: clamp(40px, 3.6vw, 60px); }
  .hero-copy h1 { max-width: 13ch; }
  /* On desktop the portrait sits inside the centred grid, so the badge can
     bleed past its top-right corner without touching the viewport edge. */
  .hero-badge {
    top: clamp(-22px, -1.4vw, -10px);
    right: clamp(-22px, -1.4vw, -10px);
    width: clamp(150px, 12vw, 190px);
    height: clamp(150px, 12vw, 190px);
  }
}

/* 9. Press band ------------------------------------------------------------ */
.press-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2.4vw, 32px);
  background: var(--onyx);
  color: var(--platinum);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 40px) clamp(28px, 3.4vw, 56px);
}
.press-label {
  font-family: var(--font-display);
  font-size: clamp(13px, 1vw, 16px);
  white-space: nowrap;
}
.press-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  gap: clamp(22px, 4vw, 56px);
  flex: 1 1 auto;
}
/* The SVG logos ship without intrinsic dimensions, so the browser would
   stretch them to its 300×150 default. Pin each logo's real aspect ratio
   (from its viewBox) and a fixed height to render them crisp and true. */
.press-logos img,
.youtube-logo img {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}
.big-brother-logo                 { height: clamp(30px, 3.4vw, 44px); aspect-ratio: 164 / 85; }
.press-logos > img:nth-of-type(2) { height: clamp(22px, 2.4vw, 30px); aspect-ratio: 68 / 34; }
.rtl-logo                         { height: clamp(15px, 1.7vw, 22px); aspect-ratio: 88 / 15.5; }
.youtube-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.youtube-logo img:first-child { height: clamp(18px, 2vw, 26px); aspect-ratio: 28 / 19.67; }
.youtube-logo img:last-child  { height: clamp(15px, 1.7vw, 22px); aspect-ratio: 57 / 17.68; }

/* 10. Coaching intro ------------------------------------------------------- */
.intro-lv {
  display: grid;
  gap: clamp(22px, 2.6vw, 36px);
}
.intro-lv-header { display: flex; flex-direction: column; gap: clamp(10px, 1.2vw, 16px); }
.intro-lv-header .display { max-width: 13ch; }

.intro-lv-media { margin: 0; }
.video-frame-lv {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
}
.video-frame-lv .video-preview-img,
.video-frame-lv .lv-video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Play-Button (echtes <button> für Bedienbarkeit/A11y) */
.video-frame-lv .video-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(58px, 6vw, 84px);
  height: clamp(58px, 6vw, 84px);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--yellow);
  cursor: pointer;
  transition: transform 240ms ease;
}
.video-frame-lv .video-play::before {
  content: "";
  width: 0; height: 0;
  margin-left: 4px;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 18px solid var(--onyx);
}
.video-frame-lv .video-play:hover { transform: translate(-50%, -50%) scale(1.06); }
.video-frame-lv .video-play:focus-visible { outline: 3px solid var(--onyx); outline-offset: 3px; }
/* Während der Wiedergabe: Button weg, Standard-Cursor */
.video-frame-lv.is-playing { cursor: default; }
.video-frame-lv.is-playing .video-play { display: none; }

.intro-lv-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 26px);
  background: var(--card);
  border-radius: var(--radius);
  padding: var(--card-pad-y) var(--card-pad-x);
}
.intro-lv-text { display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 18px); }
.intro-lv-text p { color: var(--ink-soft); }
/* The opening sub-line stays full black, not the muted body grey */
.intro-lv-text .sub { font-size: var(--fs-lede); color: var(--ink); }

@media (min-width: 960px) {
  .intro-lv {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "header header"
      "copy   video";
    align-items: start;
    column-gap: clamp(32px, 4vw, 64px);
  }
  .intro-lv-header { grid-area: header; }
  .intro-lv-copy   { grid-area: copy; }
  .intro-lv-media  { grid-area: video; align-self: start; }
}

/* 11. Transformation ------------------------------------------------------- */
/* Figures stack full-width on small screens, then sit 3-up once there is
   room — the big numbers never get squeezed or wrap. */
.transformation-figures {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 1.9vw, 28px);
  font-family: var(--font-display);
}
@media (min-width: 680px) {
  .transformation-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.figure-item {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vw, 12px);
  padding: clamp(20px, 2.2vw, 38px) clamp(18px, 2vw, 34px);
  background: var(--card);
  border: var(--card-border);
  border-radius: var(--radius);
}
/* Big numbers become the green emphasis accent */
.figure-num {
  font-size: var(--fs-figure);
  line-height: 0.95;
  color: var(--green);
}
.figure-num em {
  font-style: normal;
  font-size: 0.4em;
  vertical-align: 0.35em;
  margin-left: 0.08em;
}
.figure-label {
  font-size: clamp(11px, 9px + 0.4vw, 16px);
  color: var(--ink);
}

.transformation-slider-shell { position: relative; }
.image-slider {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 30px);
}
.transformation-shot {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
}
.transformation-shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.04) contrast(1.02);
}
.transformation-shot figcaption {
  position: absolute;
  left: 12px; bottom: 12px;
  padding: 8px 13px;
  background: var(--yellow);
  color: var(--ink);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: clamp(12px, 0.9vw, 15px);
  line-height: 1;
}
.slider-arrow { display: none; }

/* Mobile slider */
@media (max-width: 639px) {
  .image-slider {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .image-slider::-webkit-scrollbar { display: none; }
  .transformation-shot { flex: 0 0 100%; scroll-snap-align: start; }
  .slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    padding: 0;
    background: var(--yellow);
    border: 0;
    border-radius: 50%;
  }
  .slider-arrow.left  { left: 10px; }
  .slider-arrow.right { right: 10px; }
  .slider-arrow::before {
    content: "";
    width: 10px; height: 10px;
    border-left: 2px solid var(--onyx);
    border-bottom: 2px solid var(--onyx);
    transform: rotate(45deg);
    margin-left: 3px;
  }
  .slider-arrow.right::before { transform: rotate(225deg); margin-left: -3px; }
}

/* 12. Features ------------------------------------------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(18px, 2vw, 30px);
}
.feature-card {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 20px);
  padding: var(--inner-pad);
}
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(60px, 5vw, 78px);
  height: clamp(60px, 5vw, 78px);
  background: var(--yellow);
  border-radius: 50%;
}
.feature-icon img:first-child { display: none; }
.feature-icon img:last-child {
  width: 52%; height: 52%;
  object-fit: contain;
  filter: brightness(0);
}
.feature-card h3 { max-width: 22ch; }
.feature-card p { color: var(--ink-soft); max-width: 40ch; }

/* 13. Process timeline ----------------------------------------------------- */
.timeline {
  --step-badge: clamp(48px, 4.4vw, 64px);
  --timeline-gap: clamp(18px, 2vw, 30px);
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--timeline-gap);
}
.timeline-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 18px);
  padding: var(--inner-pad);
}
.step-num {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--step-badge);
  height: var(--step-badge);
  background: var(--yellow);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: var(--fs-step);
  color: var(--onyx);
}
.timeline-step h3 { max-width: 18ch; }
.timeline-step p { color: var(--ink-soft); max-width: 42ch; }

/* Mobile: badges hang into the left gutter, joined by a vertical line */
@media (max-width: 799px) {
  .timeline { padding-left: calc(var(--step-badge) + 18px); }
  .step-num {
    position: absolute;
    top: var(--inner-pad);
    left: calc(-1 * var(--step-badge) - 18px);
  }
  .timeline-step:not(:last-child)::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: calc(var(--inner-pad) + var(--step-badge) / 2);
    left: calc(-1 * (var(--step-badge) / 2) - 18px);
    width: 2px;
    height: calc(100% + var(--timeline-gap));
    transform: translateX(-1px);
    background: var(--yellow);
  }
}

/* Desktop: three across, joined by a horizontal line through the badges */
@media (min-width: 800px) {
  .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .timeline::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: calc(var(--inner-pad) + var(--step-badge) / 2);
    left: calc(var(--inner-pad) + var(--step-badge) / 2);
    width: calc((200% + 2 * var(--timeline-gap)) / 3);
    height: 2px;
    transform: translateY(-1px);
    background: var(--yellow);
  }
}

/* 14. About the coach ------------------------------------------------------ */
.about-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 2.6vw, 36px);
  background: var(--card);
  border-radius: var(--radius);
  padding: var(--card-pad-y) var(--card-pad-x);
}
.about-panel-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 20px);
}
.about-panel-copy .display { max-width: 12ch; }
.about-lead { font-size: var(--fs-lede); font-family: var(--font-display); line-height: 1.32; }
.about-panel-copy p:not(.eyebrow):not(.about-lead) { color: var(--ink-soft); max-width: 60ch; }
.about-panel-copy .link-arrow { margin-top: clamp(4px, 0.6vw, 10px); }

.about-portrait {
  margin: 0;
  width: 100%;
}
.about-portrait .portrait-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius);
  filter: saturate(1.04) contrast(1.02);
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}
.about-stats > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: clamp(18px, 1.8vw, 26px) clamp(14px, 1.5vw, 22px);
  background: var(--yellow);
  border: var(--card-border);
  border-radius: var(--radius);
  text-align: center;
}
.about-stats dt {
  font-family: var(--font-display);
  font-size: clamp(11px, 9px + 0.4vw, 14px);
  color: var(--green);
}
.about-stats dd {
  font-family: var(--font-display);
  font-size: clamp(17px, 13px + 1vw, 24px);
  color: var(--onyx);
  line-height: 1.1;
}

@media (min-width: 960px) {
  .about-panel {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.82fr);
    grid-template-areas:
      "copy  portrait"
      "stats portrait";
    align-items: start;
    column-gap: clamp(32px, 3.6vw, 56px);
  }
  .about-panel-copy { grid-area: copy; }
  .about-stats      { grid-area: stats; grid-template-columns: repeat(3, 1fr); }
  .about-portrait   { grid-area: portrait; max-width: none; margin-inline: 0; height: 100%; }
  .about-portrait .portrait-img { height: 100%; aspect-ratio: auto; min-height: 100%; }
}

/* 15. Testimonials --------------------------------------------------------- */
.testimonial-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr));
  gap: clamp(18px, 2vw, 30px);
}
.testimonial-track article {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 18px);
  padding: var(--inner-pad);
}
.stars {
  margin: 0;
  color: var(--yellow);
  font-size: clamp(15px, 1.2vw, 20px);
  letter-spacing: 0.08em;
}
.quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(15px, 12.5px + 0.5vw, 19px);
  line-height: 1.36;
}
.testimonial-track h3 {
  font-family: var(--font-body);
  font-size: clamp(14px, 0.9vw, 16px);
  font-weight: 600;
  color: var(--ink-soft);
}

/* 16. CTA marquee ---------------------------------------------------------- */
.cta-card {
  --cta-pad-x: clamp(24px, 3vw, 48px);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 3vw, 40px);
  background: var(--onyx);
  color: var(--platinum);
  border-radius: var(--radius);
  padding: clamp(28px, 3.4vw, 52px) var(--cta-pad-x);
}
/* Marquee bleeds to the full width of the card */
.cta-infinity {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.8vw, 12px);
  margin-inline: calc(-1 * var(--cta-pad-x));
  pointer-events: none;
  user-select: none;
}
.cta-infinity-row { display: flex; overflow: hidden; }
.cta-infinity-track {
  display: flex;
  flex: 0 0 auto;
  gap: clamp(20px, 2vw, 36px);
  padding-right: clamp(20px, 2vw, 36px);
  animation: marquee 28s linear infinite;
}
.cta-infinity-row.reverse .cta-infinity-track { animation-direction: reverse; }
.cta-infinity-track span {
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 76px);
  line-height: 1.05;
  white-space: nowrap;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.1px #FFFFFF;
}
.cta-infinity-track span::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 1.5em;
  height: 0.6em;
  margin-left: clamp(20px, 2vw, 36px);
  background: var(--green);
  -webkit-mask: var(--arrow-mask-bold) center / contain no-repeat;
          mask: var(--arrow-mask-bold) center / contain no-repeat;
}
.cta-infinity-row.reverse .cta-infinity-track span::after { background: var(--yellow); }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.cta-card-body {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 26px);
  padding-top: clamp(18px, 2vw, 28px);
  border-top: 1px solid rgba(235, 237, 236, 0.22);
}
.cta-eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  color: var(--platinum);
}
.cta-action-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 2vw, 32px);
}
.cta-copy {
  font-family: var(--font-display);
  font-size: var(--fs-lede);
  line-height: 1.3;
  max-width: 24ch;
}

/* 17. FAQ ------------------------------------------------------------------ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 16px);
}
.faq-item { overflow: hidden; }
.faq-item button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: clamp(18px, 1.8vw, 26px) var(--inner-pad);
  background: transparent;
  border: 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(16px, 13px + 0.6vw, 21px);
  line-height: 1.3;
  color: var(--ink);
}
.faq-icon,
.faq-item button::after {
  content: "";
  flex: 0 0 auto;
  width: clamp(34px, 3vw, 40px);
  height: clamp(34px, 3vw, 40px);
  border-radius: 50%;
  background:
    linear-gradient(var(--onyx), var(--onyx)) center / 48% 2px no-repeat,
    linear-gradient(var(--onyx), var(--onyx)) center / 2px 48% no-repeat,
    var(--yellow);
  transition: transform 280ms ease;
}
.faq-item.open button::after {
  background:
    linear-gradient(var(--onyx), var(--onyx)) center / 48% 2px no-repeat,
    var(--yellow);
}
.faq-item p {
  max-width: 70ch;
  margin: 0;
  padding: 0 var(--inner-pad) clamp(20px, 2vw, 26px);
  color: var(--ink-soft);
  font-size: clamp(15px, 14px + 0.2vw, 17px);
  line-height: 1.6;
  display: none;
}
.faq-item.open p { display: block; }

/* 18. Footer --------------------------------------------------------------- */
.site-footer {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 32px);
  background: var(--onyx);
  color: var(--platinum);
  border-radius: var(--radius);
  padding: clamp(28px, 3.4vw, 48px) clamp(24px, 3vw, 48px);
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(28px, 3.2vw, 42px);
  border-bottom: 2px solid var(--green);
}
.footer-logo img { height: clamp(32px, 3.8vw, 44px); }

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.2vw, 16px);
}
.socials a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: clamp(44px, 3.6vw, 52px);
  padding: 0 clamp(16px, 1.6vw, 24px);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--yellow);
  color: var(--onyx);
  font-family: var(--font-display);
  font-size: clamp(14px, 1vw, 16px);
  transition: background-color 220ms ease, color 220ms ease;
}
/* Black icon on the yellow pill */
.socials a img { width: 20px; height: 20px; filter: brightness(0); }
.youtube-social i {
  position: relative;
  width: 26px; height: 18px;
  background: var(--onyx);
  border-radius: 5px;
  flex: 0 0 auto;
}
.youtube-social i::after {
  content: "";
  position: absolute;
  left: 10px; top: 5px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid var(--yellow);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(8px, 1.2vw, 16px) clamp(18px, 2vw, 30px);
}
.footer-bottom p { margin: 0; }
.footer-bottom p,
.footer-bottom nav a {
  font-size: clamp(12px, 0.9vw, 14px);
  color: var(--platinum);
}
.footer-bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 1.8vw, 24px);
}
.footer-bottom nav a { transition: color 200ms ease; }
.footer-bottom nav a:hover { color: var(--platinum); }

/* 18b. Borders ------------------------------------------------------------- */
/* Light cards, framed media and content buttons → solid black border */
.section-header,
.intro-lv-header,
.intro-lv-copy,
.hero-copy,
.about-panel,
.feature-card,
.timeline-step,
.testimonial-track article,
.faq-item,
.figure-item,
.hero-portrait .portrait-img,
.about-portrait .portrait-img,
.video-frame-lv,
.transformation-shot,
.link-arrow {
  border: var(--card-border);
}

/* Dark bands and the buttons sitting on them → solid white border */
.site-header,
.press-band,
.cta-card,
.site-footer,
.header-cta,
.cta-card .link-arrow {
  border: var(--card-border-light);
}

/* 19. Scroll cue ----------------------------------------------------------- */
body::after {
  content: "";
  position: fixed;
  right: clamp(12px, 2vw, 26px);
  bottom: clamp(16px, 3vw, 30px);
  z-index: 90;
  width: clamp(38px, 3vw, 48px);
  height: clamp(52px, 4.6vw, 68px);
  background: var(--green)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 44'%3E%3Cpath d='M12 2V41M4 27L12 41L20 27' fill='none' stroke='%23FFFFFF' stroke-width='2.8' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E")
    center / 36% no-repeat;
  border-radius: var(--radius-pill);
  pointer-events: none;
  opacity: 1;
  transition: opacity 240ms ease, transform 240ms ease;
  animation: cue-drift 1.8s ease-in-out infinite;
}
body.has-scrolled::after { opacity: 0; transform: translateY(10px); }

@keyframes cue-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}

/* 20. Motion / reveal ------------------------------------------------------ */
.motion-ready [data-reveal]:not(.is-visible) {
  opacity: 0;
  transform: translateY(18px);
}
[data-reveal] {
  transition: opacity 0.6s ease calc(var(--reveal-delay, 0ms)),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--reveal-delay, 0ms));
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  [data-reveal] { transition: none; opacity: 1; transform: none; }
}

/* ============================================================
   Mobile refinements (placed last so they override base rules)
   ============================================================ */
@media (max-width: 600px) {
  /* Shorter header to match the smaller logo (also lifts the hero) */
  :root { --header-h: clamp(68px, 17vw, 84px); }
  /* Smaller, more balanced header logo */
  .header-logo img { height: clamp(26px, 7vw, 34px); }

  /* Harmonious hero: roomier rhythm, bigger headline, calmer lede */
  .hero { gap: clamp(16px, 4vw, 24px); }
  .hero-copy {
    gap: clamp(17px, 4.2vw, 24px);
    padding: clamp(22px, 5.4vw, 30px);
  }
  .hero-copy h1 { font-size: clamp(31px, 8.4vw, 40px); line-height: 1.04; }
  .hero-copy .lede { font-size: clamp(14px, 3.5vw, 15.5px); line-height: 1.5; }

  /* Bigger spinning badge */
  .hero-badge { width: clamp(116px, 28vw, 150px); height: clamp(116px, 28vw, 150px); }

  /* Bigger proof icons, tighter to their label */
  .hero-proof-strip { gap: clamp(8px, 2vw, 12px); }
  .hero-proof-strip span { padding: clamp(10px, 2.6vw, 14px); gap: clamp(4px, 1vw, 6px); }
  .hero-proof-strip span img {
    width: clamp(44px, 10.5vw, 54px);
    height: clamp(44px, 10.5vw, 54px);
    padding: clamp(9px, 2.2vw, 12px);
  }

  /* Headings: softer green outline + proper German hyphenation */
  h1 em,
  .display em { -webkit-text-stroke-width: clamp(0.5px, 0.03em, 0.9px); }
  .display,
  h1, h2 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
  .hero-copy h1 { hyphens: none; }
}

/* =========================================================================
 * TEST: Halogen Black als Display-Schrift. Schnell rückgängig zu machen:
 *   – diesen Block entfernen
 *   – das Halogen-@font-face löschen
 *   – --font-display wieder auf eine andere Display-Schrift setzen (Preload ebenso)
 * Hinweis: Halogen ist einzelgewichtig (Black) – "dünner" ist nicht möglich,
 * Taglines unterscheiden sich daher nur über Letter-Spacing.
 * ========================================================================= */

/* a) Überschriften & große Display-Labels: uppercase */
h1, h2, h3,
.hero-proof-strip, .transformation-figures, .transformation-shot figcaption,
.step-num, .about-stats dt, .about-stats dd,
.cta-infinity-track span, .faq-item button, .socials a {
  text-transform: uppercase;
}

/* H2 + H3: etwas mehr Letter-Spacing */
h2, h3 { letter-spacing: 0.03em; }

/* b) Taglines, Menülinks & Header-Button: etwas mehr Letter-Spacing + uppercase */
.eyebrow, .cta-eyebrow, .press-label,
.header-nav a, .header-cta {
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* d) Buttons im Main-Bereich (Link-Arrow-CTAs): kleiner + mehr Letter-Spacing, uppercase */
.link-arrow-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: clamp(12px, 11px + 0.2vw, 14px);
}

/* c) Absätze: nicht Display-Schrift, sondern Body-Font (Urbanist), normal */
.sub, .about-lead, .quote, .cta-copy {
  font-family: var(--font-body);
  letter-spacing: normal;
  text-transform: none;
}

/* =========================================================================
 * Mobile-Feinschliff (Telefon)
 * ===================================================================== */
@media (max-width: 639px) {
  /* Hero- & About-Portrait waren mobil zu hoch (4/5) → kompakter.
     height:auto nötig, da die <img>-height-Attribute sonst aspect-ratio aushebeln. */
  .hero-portrait .portrait-img,
  .about-portrait .portrait-img {
    height: auto;
    aspect-ratio: 1 / 1;
  }

  /* „Bekannt aus“ mobil zentriert: Label über den Logos, alles mittig */
  .press-band {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .press-label { width: 100%; text-align: center; }
  .press-logos { width: 100%; justify-content: center; }
}