/* =============================================================================
   TEAM BUDESHEIM — Industrial-Cinematic Coaching Landing Page
   Barlow Condensed × DM Sans  |  Near-Black × Electric Cyan
   ============================================================================= */

/* ── Design Tokens ────────────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:         #0C0C0E;
  --bg-1:       #111114;
  --surface:    #1C1C1F;
  --surface-2:  #242428;

  /* Borders */
  --border:     rgba(255,255,255,0.06);
  --border-2:   rgba(255,255,255,0.10);
  --border-3:   rgba(255,255,255,0.18);

  /* Text */
  --text:       #E8E8EC;
  --text-2:     #888888;
  --text-3:     #4A4A50;

  /* Accent — electric cyan */
  --accent:      #A2E6F3;
  --accent-deep: #7DCFE0;
  --accent-dim:  rgba(162,230,243,0.07);
  --accent-glow: rgba(162,230,243,0.14);

  /* Typography */
  --display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --body:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --max-w:  1200px;
  --nav-h:  68px;
  --py:     100px;

  /* Radius — industrial sharp */
  --r:    2px;
  --r-lg: 4px;

  /* Motion */
  --ease: cubic-bezier(0.25, 0, 0.1, 1);
  --t:    0.25s var(--ease);
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; text-size-adjust: 100%; }
body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
p { max-width: 65ch; }
strong { font-weight: 600; }
figure, blockquote { margin: 0; }

/* ── Accessibility ───────────────────────────────────────────────────────── */
.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 999;
  background: var(--accent); color: #000;
  padding: 8px 20px; border-radius: var(--r);
  font-size: 0.85rem; font-weight: 600; transition: top 0.2s;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; border-radius: var(--r); }

/* ── Grain texture ───────────────────────────────────────────────────────── */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 9000; opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 250px;
}

/* ── Scroll progress bar ─────────────────────────────────────────────────── */
.scroll-bar {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  background: var(--accent); transform-origin: left; transform: scaleX(0);
  z-index: 9001; transition: transform 0.08s linear;
}

/* ── Layout utilities ────────────────────────────────────────────────────── */
.container {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px);
}
.section { padding: var(--py) 0; }

/* Ghost chapter numbers */
[data-chapter] { position: relative; overflow: hidden; }
[data-chapter]::before {
  content: attr(data-chapter);
  position: absolute;
  font-family: var(--display);
  font-size: clamp(140px, 26vw, 320px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.04);
  top: -0.05em; right: -0.04em;
  pointer-events: none; user-select: none; z-index: 0;
}

/* Section titles */
.section-title {
  font-family: var(--display);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 28px;
  overflow-wrap: break-word;
  word-break: break-word;
}
.section-title--light { color: var(--text); }

/* Eyebrow labels */
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--body); font-size: 0.65rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 16px;
}
.eyebrow::before {
  content: ''; display: block; width: 20px; height: 1px;
  background: currentColor; flex-shrink: 0;
}
.eyebrow--light { color: var(--accent); }
.eyebrow__num { opacity: 0.5; font-weight: 400; }
.about__copy .eyebrow,
.cta-close__copy .eyebrow { color: var(--accent); }

/* Eyebrow above the about grid — full container width, correct size */
.about__eyebrow {
  font-size: 0.65rem;
  margin-bottom: 24px;
}


/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 26px; border-radius: var(--r);
  font-family: var(--body); font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: var(--t); white-space: nowrap; cursor: pointer;
  border: 1px solid transparent;
}

/* Amber → remapped to cyan */
.btn--amber {
  background: var(--accent); color: #0C0C0E;
  border-color: var(--accent); font-weight: 600;
}
.btn--amber:hover { background: transparent; color: var(--accent); }

.btn--amber-sm {
  padding: 8px 16px; font-size: 0.78rem;
  background: var(--accent); color: #0C0C0E;
  border: 1px solid var(--accent); border-radius: var(--r);
  font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  transition: var(--t);
}
.btn--amber-sm:hover { background: transparent; color: var(--accent); }

.btn--gold-sm {
  padding: 8px 18px; font-size: 0.78rem;
  background: #E5C77B; color: #0C0C0E;
  border: 1px solid #E5C77B; border-radius: var(--r);
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  transition: var(--t);
  box-shadow: 0 0 14px rgba(229,199,123,0.25);
}
.btn--gold-sm:hover {
  background: transparent; color: #E5C77B; border-color: #E5C77B;
  box-shadow: 0 0 20px rgba(229,199,123,0.15);
}

.btn--ghost-sm {
  padding: 8px 16px; font-size: 0.78rem;
  background: transparent; color: var(--text-2);
  border: 1px solid var(--border-2); border-radius: var(--r);
  letter-spacing: 0.06em; text-transform: uppercase; transition: var(--t);
}
.btn--ghost-sm:hover { color: var(--text); border-color: var(--border-3); }
.btn--lg { padding: 14px 34px; font-size: 0.9rem; }
.btn--xl { padding: 16px 42px; font-size: 0.95rem; }

/* ── Cookie Banner ───────────────────────────────────────────────────────── */
/* ── Cookie Banner ────────────────────────────────────────────────────────── */
@keyframes cookieIn {
  from { opacity: 0; transform: translateX(-50%) translateY(18px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes cookieOut {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0; transform: translateX(-50%) translateY(14px); }
}

.cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8000;
  width: min(400px, calc(100vw - 32px));

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;

  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-top: 2px solid rgba(162,230,243,0.35);
  border-radius: var(--r-lg);
  padding: 24px 28px 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);

  animation: cookieIn 0.45s var(--ease) both;
}
.cookie-banner.is-hiding {
  animation: cookieOut 0.35s var(--ease) both;
}
.cookie-banner[hidden] { display: none; }

.cookie-banner__label {
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  max-width: none;
}
.cookie-banner__text {
  font-size: 0.83rem;
  color: var(--text-2);
  line-height: 1.65;
  font-weight: 300;
  max-width: none;
}
.cookie-banner__text a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(162,230,243,0.35);
  transition: text-decoration-color var(--t);
}
.cookie-banner__text a:hover { text-decoration-color: var(--accent); }

.cookie-banner__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
.cookie-banner__btn {
  flex: 1;
  max-width: 160px;
  padding: 9px 18px;
  border-radius: var(--r);
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
  border: 1px solid transparent;
}
.cookie-banner__btn--ghost {
  background: transparent;
  color: var(--text-2);
  border-color: var(--border-2);
}
.cookie-banner__btn--ghost:hover {
  color: var(--text);
  border-color: rgba(255,255,255,0.2);
}
.cookie-banner__btn--accent {
  background: var(--accent);
  color: #0C0C0E;
  font-weight: 600;
}
.cookie-banner__btn--accent:hover {
  background: #b8ecf7;
}

/* =============================================================================
   NAVIGATION
   ============================================================================= */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 500; height: var(--nav-h);
  transition: background var(--t), border-color var(--t);
}
.nav.scrolled {
  background: rgba(12,12,14,0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav__inner { height: 100%; display: flex; align-items: center; gap: 40px; }

.nav__logo {
  font-family: var(--display); font-size: 1.15rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text); margin-right: auto;
}
.nav__links { display: flex; gap: 28px; }
.nav__links a {
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-2); transition: color var(--t);
}
.nav__links a:hover { color: var(--text); }

.nav__toggle {
  display: none; flex-direction: column; justify-content: center;
  gap: 6px; width: 32px; height: 32px; margin-left: auto;
}
.nav__toggle span {
  display: block; width: 22px; height: 1px;
  background: var(--text); transition: var(--t); transform-origin: center;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { transform: rotate(-45deg) translate(5px, -5px); }

.nav__mobile {
  position: absolute; top: var(--nav-h); inset-inline: 0;
  background: rgba(17,17,20,0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 16px clamp(20px, 5vw, 56px) 28px;
  display: flex; flex-direction: column;
  animation: mobileIn 0.3s var(--ease);
}
.nav__mobile[hidden] { display: none; }
@keyframes mobileIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav__mobile a {
  display: block; padding: 14px 0;
  font-size: 0.9rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-2); border-bottom: 1px solid var(--border);
  transition: color var(--t);
}
.nav__mobile a:hover { color: var(--text); }
.nav__mobile a.btn--amber {
  border-bottom: none;
  margin-top: 16px;
  display: flex;
  width: 100%;
  justify-content: center;
  text-align: center;
}
.nav__mobile a.btn--gold-sm { border-bottom: none; margin-top: 8px; display: inline-flex; width: 100%; justify-content: center; }

/* CTA-Gruppe in der Desktop-Nav */
.nav__ctas { display: flex; align-items: center; gap: 10px; }

@media (max-width: 820px) {
  .nav__links, .nav__ctas { display: none; }
  .nav__toggle { display: flex; }
}

/* =============================================================================
   HERO — § 1
   ============================================================================= */
.hero {
  min-height: 100svh; background: var(--bg);
  position: relative; overflow: hidden;
  display: flex; align-items: center;
}
.hero__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 100svh; width: 100%;
  max-width: var(--max-w);
  padding: 0 clamp(20px, 5vw, 56px); margin: 0 auto;
}

/* Copy — left column */
.hero__copy {
  display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--nav-h) + 36px);
  padding-bottom: 72px; padding-right: 48px;
  position: relative; z-index: 2;
}

/* Headline — Barlow Condensed, massive uppercase */
.hero__headline {
  font-family: var(--display);
  font-size: clamp(3.5rem, 8.5vw, 7.5rem);
  font-weight: 700; line-height: 1.0;
  letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--text); margin-bottom: 32px;
}
/* padding-top öffnet den Clip-Bereich nach oben für Umlautpunkte (Ö);
   margin-top zieht den entstehenden Abstand wieder ein. */
.hero__line { display: block; overflow: hidden; padding-top: 0.1em; margin-top: -0.1em; }
.hero__li {
  display: block; transform: translateY(108%); opacity: 0;
  animation: heroLineUp 0.65s var(--ease) forwards;
}
.hero__line:nth-child(1) .hero__li { animation-delay: 0.05s; }
.hero__line:nth-child(2) .hero__li { animation-delay: 0.15s; }
.hero__line:nth-child(3) .hero__li { animation-delay: 0.25s; }
.hero__line:nth-child(4) .hero__li { animation-delay: 0.35s; }
@keyframes heroLineUp { to { transform: translateY(0); opacity: 1; } }

/* Accent-colored line (was --bold) */
.hero__line--accent .hero__li  { color: var(--accent); }
/* Subtitle line */
.hero__line--sub .hero__li {
  font-size: 0.46em; font-family: var(--body);
  font-weight: 300; letter-spacing: 0.02em;
  text-transform: none; color: var(--text-2);
  margin-top: 0.8em; line-height: 1.25;
}

/* Divider strip */
.hero__divider {
  display: flex; align-items: center; gap: 12px;
  margin: 28px 0; color: var(--accent); opacity: 0.4;
}
.hero__divider-line { display: block; width: 40px; height: 1px; background: currentColor; }
.hero__divider-gem  { font-size: 0.45rem; }

/* Fade-in elements below headline */
.hero__fade-in {
  opacity: 0; transform: translateY(10px);
  animation: heroFadeUp 0.55s var(--ease) forwards;
}
.hero__fade-in--0 { animation-delay: 0.05s; }
.hero__fade-in--1 { animation-delay: 0.5s; }
.hero__fade-in--2 { animation-delay: 0.65s; }
.hero__fade-in--3 { animation-delay: 0.8s; }
.hero__fade-in--4 { animation-delay: 0.95s; }
@keyframes heroFadeUp { to { opacity: 1; transform: translateY(0); } }

.hero__sub {
  font-size: clamp(0.85rem, 1.4vw, 0.97rem); color: var(--text-2);
  line-height: 1.8; margin-bottom: 32px; font-weight: 300; max-width: 52ch;
}
.hero__sub em { color: var(--text); font-style: normal; }

.hero__cta-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 16px; margin-bottom: 36px;
}
.hero__micro {
  font-size: 0.78rem; color: var(--text-3);
  font-weight: 300; max-width: none; letter-spacing: 0.02em;
}

/* Social proof strip */
.hero__proof {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0;
  padding: 12px 16px; border: 1px solid var(--border);
  border-radius: var(--r); background: rgba(255,255,255,0.02);
  width: fit-content; max-width: 100%;
  font-size: 0.78rem; color: var(--text-2); font-weight: 300;
}
.hero__proof li { padding: 2px 10px; display: flex; align-items: center; gap: 6px; }
.hero__proof em { font-style: italic; }
.proof__stars { color: var(--accent); letter-spacing: 2px; font-size: 0.7rem; }
.proof__div   { color: var(--text-3); font-size: 0.7rem; }

/* Portrait — right column */
.hero__portrait { position: relative; overflow: hidden; align-self: stretch; }
.hero__portrait img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  filter: grayscale(0.15) contrast(1.1) brightness(0.65);
}
.hero__portrait-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, var(--bg) 0%, rgba(12,12,14,0.15) 30%, transparent 60%),
    linear-gradient(to top,   var(--bg) 0%, transparent 20%);
}

/* Scroll hint */
.hero__scroll-hint {
  position: absolute; bottom: 36px; left: clamp(20px, 5vw, 56px);
  display: flex; align-items: center; gap: 12px; z-index: 3;
}
.hero__scroll-hint span {
  font-size: 0.58rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--text-3);
}
.hero__scroll-track {
  width: 40px; height: 1px;
  background: var(--border-2); position: relative; overflow: hidden;
}
.hero__scroll-dot {
  position: absolute; top: 0; left: 0; width: 12px; height: 1px;
  background: var(--accent); animation: scrollDot 2s ease infinite;
}
@keyframes scrollDot {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(380%); }
}

@media (max-width: 900px) {
  .hero { min-height: auto; }
  .hero__inner { grid-template-columns: 1fr; min-height: auto; }
  .hero__copy {
    padding-right: 0; padding-top: calc(var(--nav-h) + 48px);
    padding-bottom: 32px; z-index: 2;
  }
  .hero__portrait { position: absolute; inset: 0; opacity: 0.12; z-index: 1; }
  .hero__portrait-overlay {
    background: linear-gradient(to top, var(--bg) 35%, rgba(12,12,14,0.65) 70%, rgba(12,12,14,0.5) 100%);
  }
  .hero__headline { font-size: clamp(3rem, 10vw, 4.5rem); }
  .hero__scroll-hint { display: none; }
}

/* =============================================================================
   EMPATHY — § 2
   ============================================================================= */
.empathy { background: var(--bg-1); }
.empathy > .container { position: relative; z-index: 1; }

.pain__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; margin-bottom: 56px;
  background: var(--border);
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
}
.pain-card {
  background: var(--surface); padding: 40px 32px 32px;
  position: relative; transition: background var(--t);
}
.pain-card:hover { background: var(--surface-2); }
.pain-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.pain-card:hover::before { transform: scaleX(1); }
.pain-card__quote {
  font-family: var(--display); font-size: 4rem; line-height: 0.8;
  color: var(--accent); opacity: 0.18; margin-bottom: 16px;
  font-weight: 700; display: block; user-select: none;
}
.pain-card h3 {
  font-family: var(--display); font-size: 1.15rem; font-weight: 700;
  color: var(--text); margin-bottom: 12px;
  line-height: 1.35; letter-spacing: 0.01em;
}
.pain-card p {
  font-size: 0.875rem; color: var(--text-2);
  line-height: 1.75; font-weight: 300; max-width: none;
}

.empathy__bridge {
  text-align: center;
  font-family: var(--display); font-size: clamp(1.25rem, 2.8vw, 1.8rem);
  font-weight: 400; letter-spacing: 0.01em; color: var(--text-2);
  max-width: 100%; padding: 40px 0 0; border-top: 1px solid var(--border);
  position: relative; z-index: 1;
}
.empathy__bridge em { color: var(--accent); font-style: normal; }

@media (max-width: 768px) { .pain__grid { grid-template-columns: 1fr; } }

/* =============================================================================
   ABOUT — § 3
   ============================================================================= */
.about { background: var(--bg); }
.about > .container { position: relative; z-index: 1; }

.about__grid {
  display: grid; grid-template-columns: 5fr 6fr;
  gap: clamp(40px, 7vw, 96px); align-items: start;
}
.about__image-col { position: relative; overflow: visible; }
/* Safari: explicit overflow:visible prevents the positioned deco from being clipped */
.about__frame-wrap { position: relative; z-index: 1; overflow: visible; }
.about__photo {
  width: 100%; max-width: 100%; aspect-ratio: 4/5; object-fit: cover;
  object-position: center center; border-radius: var(--r);
  filter: contrast(1.05) brightness(0.85); display: block; height: auto;
}
.about__frame-deco {
  position: absolute; top: -12px; right: -12px; bottom: 12px; left: 12px;
  border: 1px solid rgba(162,230,243,0.2); border-radius: var(--r);
  z-index: 0; pointer-events: none;
}
.about__pull-quote {
  margin-top: 24px; padding: 18px 20px;
  border-left: 2px solid var(--accent); background: var(--surface);
  font-family: var(--display); font-size: 1rem; font-weight: 400;
  letter-spacing: 0.01em; color: var(--text-2); line-height: 1.5;
}
.about__pull-mark {
  display: block; font-size: 1.8rem; color: var(--accent);
  opacity: 0.4; line-height: 0.8; margin-bottom: 8px;
}

.about__copy { position: relative; z-index: 1; padding-top: 8px; }
.about__copy p { font-size: 0.95rem; color: var(--text-2); margin-bottom: 16px; line-height: 1.8; font-weight: 300; }
.about__copy strong { color: var(--text); }

.cred-row {
  display: flex; gap: 0; margin: 28px 0 32px;
  border: 1px solid var(--border-2); border-radius: var(--r); overflow: hidden;
  background: var(--surface);
}
.cred-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 18px 12px; border-right: 1px solid var(--border); text-align: center; gap: 4px;
}
.cred-item:last-child { border-right: none; }
.cred-item strong {
  font-family: var(--display); font-size: 1.5rem; font-weight: 700;
  color: var(--accent); line-height: 1.1; letter-spacing: 0.02em;
}
.cred-item span { font-size: 0.72rem; color: var(--text-3); letter-spacing: 0.04em; }

@media (max-width: 900px) {
  /* ── About grid: single column, kein horizontaler Overflow ── */
  .about__grid { grid-template-columns: 1fr; }

  /* min-width:0 ist der primäre Fix: Grid-Kinder haben sonst min-width:auto
     und dürfen breiter werden als ihre Zelle → Overflow nach rechts */
  .about__image-col,
  .about__copy { min-width: 0; width: 100%; box-sizing: border-box; }

  .about__image-col { max-width: 400px; margin: 0 auto; }

  /* Dekorahmen: right:-12px würde 12px über den Viewport ragen → neutralisieren */
  .about__frame-deco { right: 0; }

  /* Pull-Quote: border-left → border-top für einspaltiges Layout, zentriert */
  .about__pull-quote {
    border-left: none;
    border-top: 2px solid var(--accent);
    text-align: center;
    max-width: 100%;
    margin: 24px 0 0;
    padding: 16px;
  }
  .about__pull-mark { display: none; }

  /* ── Copy-Spalte: alles zentriert, nichts überläuft ── */
  .about__copy {
    text-align: center;
    margin-top: 8px;
  }

  /* Headline: Umbruch erzwingen, kein Overflow */
  .about__copy .section-title {
    text-align: center;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    font-size: clamp(1.8rem, 7vw, 2.6rem);
  }

  /* Fließtext: linksbündig für Lesbarkeit */
  .about__copy p { text-align: left; }

  /* KPI-Leiste mittig, volle Breite */
  .cred-row { width: 100%; margin: 28px 0 32px; }

  /* CTA mittig — max-width:100% und white-space:normal verhindern Overflow,
     da .btn global white-space:nowrap hat */
  .about__copy .btn {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    white-space: normal;
    text-align: center;
  }
}

/* =============================================================================
   RESULTS — § 8  (Spotlight Cards — per-card local tracking)
   ============================================================================= */
.results-sec { background: var(--bg); }
.results-sec > .container { position: relative; z-index: 1; }

.results-sec__header { max-width: 640px; margin-bottom: 52px; }
.results-sec__sub {
  font-size: 1rem; color: var(--text-2); font-weight: 300;
  line-height: 1.8; max-width: 52ch; margin-top: 16px;
}

.results__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  list-style: none;
  padding: 0;
}
/* Safari: grid children need min-width:0 to shrink below content size */
.results__card { min-width: 0; }

.results__card {
  --base: 185;
  --spread: 40;
  --card-radius: 14;
  --border: 1.5;
  --backdrop: hsl(220 18% 7% / 0.95);
  --backup-border: rgba(255, 255, 255, 0.06);
  --size: 320;
  --outer: 1;
  --bg-spot-opacity: 0;       /* card interior stays dark — border carries the glow */
  --border-spot-opacity: 0.75;
  --border-light-opacity: 0.15;

  --border-size: calc(var(--border) * 1px);
  --spotlight-size: calc(var(--size) * 1px);
  --hue: calc(var(--base) + (var(--xp, 0) * var(--spread, 0)));

  /* Local coordinates — scroll (not fixed), so --x/--y are relative to the card */
  background-image: radial-gradient(
    var(--spotlight-size) var(--spotlight-size) at
    calc(var(--x, -9999) * 1px)
    calc(var(--y, -9999) * 1px),
    hsl(var(--hue) 80% 65% / var(--bg-spot-opacity)),
    transparent
  );
  background-color: var(--backdrop);
  background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
  background-position: 50% 50%;
  background-attachment: scroll;
  border: var(--border-size) solid var(--backup-border);
  border-radius: calc(var(--card-radius) * 1px);
  position: relative;
  touch-action: none;
  /* Safari clips children at border-radius by default; explicit visible prevents that */
  overflow: visible;
}

.results__card::before,
.results__card::after {
  pointer-events: none;
  content: "";
  position: absolute;
  /* inset:0 keeps pseudo-elements inside card bounds — Safari clips anything
     that extends outside a border-radius ancestor, which is why inset:-Npx fails */
  inset: 0;
  /* padding defines the visible ring area; content-box excludes it from the mask */
  padding: var(--border-size);
  border-radius: calc(var(--card-radius) * 1px);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
  /* xor/exclude: show only where exactly ONE layer is opaque →
     content-box area cancels out, leaving only the padding ring visible.
     -webkit-mask-composite:xor is more reliably supported in Safari than
     destination-out for this specific pattern. */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.results__card::before {
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.75) calc(var(--spotlight-size) * 0.75) at
    calc(var(--x, -9999) * 1px)
    calc(var(--y, -9999) * 1px),
    hsl(var(--hue) 80% 50% / var(--border-spot-opacity)),
    transparent 100%
  );
  filter: brightness(2);
}

.results__card::after {
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.5) calc(var(--spotlight-size) * 0.5) at
    calc(var(--x, -9999) * 1px)
    calc(var(--y, -9999) * 1px),
    hsl(0 100% 100% / var(--border-light-opacity)),
    transparent 100%
  );
}

.results__card > [data-glow] {
  position: absolute;
  inset: 0;
  will-change: filter;
  opacity: var(--outer, 1);
  border-radius: calc(var(--card-radius) * 1px);
  filter: blur(calc(var(--border-size) * 10));
  background: none;
  pointer-events: none;
  border: none;
}

.results__card > [data-glow]::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 10px;
  border-radius: calc(var(--card-radius) * 1px);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.75) calc(var(--spotlight-size) * 0.75) at
    calc(var(--x, -9999) * 1px)
    calc(var(--y, -9999) * 1px),
    hsl(var(--hue) 80% 50% / var(--border-spot-opacity)),
    transparent 100%
  );
  filter: brightness(2);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

/* Card inner content */
.results__card-content {
  position: relative;
  z-index: 1;
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.results__card-stat {
  font-family: var(--display);
  font-size: clamp(2.8rem, 5vw, 4rem);
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 14px;
}

.results__card-title {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
  margin-bottom: 16px;
}

.results__card-text {
  font-size: 0.875rem;
  color: var(--text-2);
  line-height: 1.8;
  font-weight: 300;
  flex: 1;
  margin-bottom: 28px;
}

.results__card-rule {
  width: 32px;
  height: 1px;
  background: var(--accent);
  opacity: 0.5;
  margin-bottom: 14px;
}

.results__card-tag {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  opacity: 0.7;
}

@media (max-width: 900px) {
  .results__cards { grid-template-columns: 1fr; gap: 12px; }
}

/* =============================================================================
   PROCESS — § 5
   ============================================================================= */
.process { background: var(--bg); }
.process > .container { position: relative; z-index: 1; }

.process__steps { display: flex; flex-direction: column; margin-top: 48px; max-width: 680px; }
.process__step {
  display: grid; grid-template-columns: 72px 1fr;
  gap: 28px; align-items: start;
  padding: 28px 0; border-bottom: 1px solid var(--border);
}
.process__step:last-child { border-bottom: none; }
.process__step-meta { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 4px; }
.process__step-n {
  font-family: var(--display); font-size: 2.5rem; font-weight: 900;
  color: var(--accent); opacity: 0.4; line-height: 1;
  letter-spacing: -0.02em; transition: opacity var(--t);
}
.process__step:hover .process__step-n { opacity: 0.85; }
.process__step-rule { display: block; width: 1px; height: 100%; min-height: 16px; background: var(--border); }

.process__step-body h3 {
  font-family: var(--display); font-size: 1.3rem; font-weight: 700;
  color: var(--text); margin-bottom: 8px; line-height: 1.25;
  text-transform: uppercase; letter-spacing: 0.01em;
}
.process__step-body p { font-size: 0.9rem; color: var(--text-2); line-height: 1.75; font-weight: 300; max-width: none; }
.process__step-highlight {
  font-weight: 600 !important;
  color: var(--text) !important;
  margin-top: 10px;
  padding: 10px 14px;
  border-left: 2px solid var(--accent);
  background: rgba(162, 230, 243, 0.05);
  border-radius: 0 var(--r) var(--r) 0;
}

/* =============================================================================
   VIDEO — § 6
   ============================================================================= */
.video-sec { background: var(--surface); padding: var(--py) 0; }

.video-sec__inner {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; position: relative; z-index: 1;
}
.video-sec__copy { margin-bottom: 44px; }
.video-sec__copy .section-title { margin-bottom: 0; }

.video-facade {
  position: relative; width: 100%; max-width: 880px;
  aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden;
  cursor: pointer; margin-bottom: 44px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55);
  border: 1px solid var(--border); outline: none;
}
.video-facade::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: var(--accent); z-index: 3;
}
.video-facade:focus-visible { box-shadow: 0 0 0 2px var(--accent), 0 24px 80px rgba(0,0,0,0.55); }

.video-facade__thumb {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s var(--ease);
  filter: grayscale(0.1) contrast(1.1) brightness(0.65);
}
.video-facade:hover .video-facade__thumb { transform: scale(1.03); }

.video-facade__scrim {
  position: absolute; inset: 0; background: rgba(12,12,14,0.4); transition: background var(--t);
}
.video-facade:hover .video-facade__scrim { background: rgba(12,12,14,0.2); }

.video-facade__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: var(--r);
  background: var(--accent); display: flex; align-items: center; justify-content: center;
  color: #0C0C0E; box-shadow: 0 8px 30px rgba(162,230,243,0.25);
  transition: transform var(--t), box-shadow var(--t); z-index: 2;
}
.video-facade__play svg { margin-left: 3px; }
.video-facade:hover .video-facade__play {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 12px 44px rgba(162,230,243,0.4);
}
.video-facade__duration {
  position: absolute; bottom: 14px; right: 14px;
  background: rgba(12,12,14,0.75); color: var(--text);
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em;
  padding: 4px 10px; border-radius: var(--r); z-index: 2;
}
.video-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; z-index: 4; }

.video-sec__below { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.video-sec__below p { font-size: 0.95rem; color: var(--text-2); font-weight: 300; line-height: 1.8; max-width: 50ch; }

@media (max-width: 640px) {
  /* Video-CTA auf Mobile: gleiche Größe und Zentrierung wie Hero-CTA */
  .video-sec__below .btn--lg {
    padding: 8px 16px;
    font-size: 0.78rem;
    width: auto;
  }
}

/* ── Trust counter: 250+ Athleten transformiert ─────────────────────────── */
.video-counter {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-bottom: 44px;
  padding: 28px 48px 24px;
  border: 1px solid rgba(162,230,243,0.18);
  border-radius: var(--r-lg);
  background: rgba(162,230,243,0.04);
  position: relative;
  overflow: hidden;
}

/* Top glow line */
.video-counter::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 80px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* Ambient background glow */
.video-counter::after {
  content: '';
  position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
  width: 200px; height: 120px;
  background: radial-gradient(ellipse at center, rgba(162,230,243,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.video-counter__number {
  display: flex; align-items: baseline; gap: 2px;
  line-height: 1; position: relative; z-index: 1;
}

.video-counter__val {
  font-family: var(--display);
  font-size: clamp(4.5rem, 12vw, 7rem);
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -0.03em;
  line-height: 1;
  text-shadow: 0 0 40px rgba(162,230,243,0.3);
}

.video-counter__plus {
  font-family: var(--display);
  font-size: clamp(2.2rem, 6vw, 3.5rem);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
  opacity: 0.9;
}

.video-counter__label {
  font-family: var(--display);
  font-size: clamp(0.75rem, 2vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-2);
  max-width: none;
  position: relative; z-index: 1;
}

@media (max-width: 480px) {
  .video-counter { padding: 22px 32px 20px; }
}

/* =============================================================================
   TRANSFORMS MARQUEE — Vorher/Nachher trust strip
   ============================================================================= */
.transforms-sec {
  background: var(--bg);
  padding-block: 52px 56px;
  overflow: hidden;
}

.transforms-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 56px);
  margin-bottom: 32px;
}
.transforms-eyebrow {
  font-family: var(--display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
  flex-shrink: 0;
}
.transforms-eyebrow-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Gradient-overlay fade — replaces -webkit-mask-image entirely.
   Pseudo-elements sit on top of the scrolling track as static paint layers,
   with no compositing interaction with the animation. This is the only
   approach that works reliably in Safari across all versions. */
.transforms-track-wrap {
  position: relative;
  overflow: hidden;
}
.transforms-track-wrap::before,
.transforms-track-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10%;
  min-width: 48px;
  z-index: 2;
  pointer-events: none;
}
.transforms-track-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--bg) 0%, transparent 100%);
}
.transforms-track-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--bg) 0%, transparent 100%);
}

/* The scrolling strip.
   translate3d triggers the GPU path in Safari more reliably than translateX.
   backface-visibility:hidden suppresses the "flash" when the compositing
   layer is created at animation start. No will-change — it conflicts with
   the parent mask in Safari. */
.transforms-track {
  display: flex;
  gap: 10px;
  width: max-content;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: transformsScroll 42s linear infinite;
  animation: transformsScroll 42s linear infinite;
}
@media (hover: hover) {
  .transforms-track:hover { animation-play-state: paused; }
}

@-webkit-keyframes transformsScroll {
  from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  to   { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
}
@keyframes transformsScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@-webkit-keyframes transformsScrollRTL {
  from { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
  to   { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@keyframes transformsScrollRTL {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

.transforms-sec--rtl { padding-block: 0 0; }
.transforms-track--rtl {
  -webkit-animation: transformsScrollRTL 42s linear infinite;
  animation: transformsScrollRTL 42s linear infinite;
}
@media (hover: hover) {
  .transforms-track--rtl:hover { animation-play-state: paused; }
}

/* Individual photos — explicit dimensions prevent layout recalcs during animation */
.transform-img {
  height: 240px;
  width: auto;
  max-width: none;       /* prevent Safari from collapsing auto-width images */
  object-fit: cover;
  object-position: center top;
  border-radius: var(--r);
  flex-shrink: 0;
  display: block;
  /* Promote each image to its own layer to prevent repaints during scroll */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  filter: brightness(0.92) contrast(1.04);
}
@media (hover: hover) {
  .transforms-track:hover .transform-img:hover {
    filter: brightness(1) contrast(1.08);
  }
}

@media (max-width: 640px) {
  .transform-img { height: 190px; }
  .transforms-sec { padding-block: 40px 44px; }
}

/* =============================================================================
   TESTIMONIALS — § 7
   ============================================================================= */
.testimonials { background: var(--bg-1); }
.testimonials > .container { position: relative; z-index: 1; }

.t-featured {
  margin: 48px 0 28px; padding: 48px 52px;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r-lg); position: relative; overflow: hidden;
}
.t-featured::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0;
  width: 2px; background: var(--accent);
}
.t-featured__mark {
  font-family: var(--display); font-size: 5rem; line-height: 0.7;
  color: var(--accent); opacity: 0.12; margin-bottom: 20px; display: block; user-select: none;
}
.t-featured blockquote p {
  font-family: var(--display); font-size: clamp(1.15rem, 2.5vw, 1.55rem);
  font-weight: 400; color: var(--text); line-height: 1.5; max-width: 80ch; margin-bottom: 28px;
}
.t-featured figcaption { display: flex; align-items: center; gap: 14px; }
.t-featured figcaption img {
  width: 48px; height: 48px; border-radius: var(--r);
  object-fit: cover; flex-shrink: 0; border: 1px solid var(--border-2);
}
.t-featured figcaption strong { display: block; font-size: 0.9rem; color: var(--text); }
.t-featured figcaption span   { display: block; font-size: 0.78rem; color: var(--text-2); font-weight: 300; }
.t-featured__stars { color: var(--accent); font-size: 0.78rem; letter-spacing: 2px; margin-left: auto; }

.t-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; margin-bottom: 40px; background: var(--border);
}
.t-card {
  background: var(--surface); padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative; overflow: hidden; transition: background var(--t);
}
.t-card:hover { background: var(--surface-2); }
.t-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.t-card:hover::after { transform: scaleX(1); }
.t-card__stars { color: var(--accent); font-size: 0.72rem; letter-spacing: 2px; }
.t-card blockquote p { font-size: 0.875rem; color: var(--text-2); font-weight: 300; line-height: 1.75; max-width: none; }
.t-card figcaption { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--border); }
.t-card figcaption img { width: 36px; height: 36px; border-radius: var(--r); object-fit: cover; flex-shrink: 0; }
.t-card figcaption strong { display: block; font-size: 0.85rem; color: var(--text); }
.t-card figcaption span   { display: block; font-size: 0.75rem; color: var(--text-2); font-weight: 300; }

.trust-bar {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  padding: 16px 24px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r);
}
.trust-bar li { display: flex; align-items: center; gap: 8px; padding: 6px 20px; font-size: 0.82rem; color: var(--text-2); font-weight: 300; }
.trust-bar strong { color: var(--accent); font-weight: 700; }
.trust-bar__sep { width: 1px; height: 16px; background: var(--border-2); flex-shrink: 0; }

@media (max-width: 768px) {
  .t-grid { grid-template-columns: 1fr; }
  .t-featured { padding: 28px 24px; }
  .t-featured blockquote p { font-size: 1.1rem; }
  .trust-bar { flex-direction: column; align-items: flex-start; }
  .trust-bar__sep { display: none; }
}

/* =============================================================================
   FAQ — § 8
   ============================================================================= */
.faq { background: var(--bg); }
.faq > .container { position: relative; z-index: 1; }

.faq__list { max-width: 760px; margin-top: 48px; display: flex; flex-direction: column; }
.faq__entry { border-bottom: 1px solid var(--border); transition: padding var(--t), border-color var(--t); }
.faq__entry:first-child { border-top: 1px solid var(--border); }

.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 0; font-family: var(--body); font-size: 0.95rem; font-weight: 500;
  color: var(--text-2); text-align: left; transition: color var(--t);
}
.faq__q:hover { color: var(--text); }
.faq__q[aria-expanded="true"] { color: var(--accent); }

.faq__chev { flex-shrink: 0; color: var(--text-3); transition: transform var(--t), color var(--t); }
.faq__q[aria-expanded="true"] .faq__chev { transform: rotate(180deg); color: var(--accent); }

.faq__a { overflow: hidden; max-height: 0; transition: max-height 0.35s var(--ease); }
.faq__a:not([hidden]) { max-height: 400px; }
.faq__a[hidden] { display: block; max-height: 0; }
.faq__a p { padding: 0 0 20px; font-size: 0.875rem; color: var(--text-2); line-height: 1.8; font-weight: 300; max-width: none; }

.faq__entry:has(.faq__q[aria-expanded="true"]) {
  padding-left: 16px; border-left: 2px solid var(--accent);
}

/* =============================================================================
   FINAL CTA — § 9
   ============================================================================= */
.cta-close {
  background: var(--bg-1);
  padding: clamp(72px, 12vw, 144px) 0;
  position: relative; overflow: hidden;
}
.cta-close::after {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 600px; height: 400px;
  background: radial-gradient(ellipse, rgba(162,230,243,0.05) 0%, transparent 70%);
  pointer-events: none;
}
.cta-close__inner { position: relative; z-index: 1; text-align: center; max-width: 680px; margin: 0 auto; }
.cta-close__headline {
  font-family: var(--display); font-size: clamp(2.75rem, 7vw, 5.5rem);
  font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--text); line-height: 1.02; margin-bottom: 28px;
}
.cta-close__headline em { font-style: normal; color: var(--accent); }
.cta-close__copy > p { font-size: 1rem; color: var(--text-2); font-weight: 300; line-height: 1.8; margin-bottom: 16px; max-width: none; }
.cta-close__copy > p em { color: var(--text); font-style: normal; }
.cta-close__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 32px auto 20px;
  width: fit-content;
}
.cta-close__actions .btn--amber,
.cta-close__actions .btn--gold { margin: 0; }
.cta-close__gold-btn {
  background: #E5C77B;
  color: #0C0C0E;
  border: 1px solid #E5C77B;
  box-shadow: 0 0 20px rgba(229,199,123,0.35);
}
.cta-close__gold-btn:hover {
  background: transparent;
  color: #E5C77B;
  border-color: #E5C77B;
  box-shadow: 0 0 28px rgba(229,199,123,0.2);
}
@media (max-width: 520px) {
  .cta-close__actions { flex-direction: column; width: 100%; }
  .cta-close__actions .btn { width: 100%; justify-content: center; font-size: 0.82rem; padding-left: 20px; padding-right: 20px; }
}
.cta-close__micro { font-size: 0.75rem; color: var(--text-3); font-weight: 300; letter-spacing: 0.04em; margin-bottom: 0 !important; max-width: none; }
.cta-close__deco { display: none; }

/* =============================================================================
   FOOTER
   ============================================================================= */
.footer { background: var(--bg); padding: 52px 0 0; border-top: 1px solid var(--border); }
.footer__inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; padding-bottom: 48px; border-bottom: 1px solid var(--border);
}
.footer__logo {
  font-family: var(--display); font-size: 1.15rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text); display: block; margin-bottom: 12px;
}
.footer__brand p { font-size: 0.85rem; color: var(--text-2); line-height: 1.7; font-weight: 300; max-width: 28ch; margin-bottom: 20px; }
.footer__social { display: flex; gap: 8px; }
.footer__social a {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-2); border-radius: var(--r);
  color: var(--text-2); transition: var(--t);
}
.footer__social a:hover { border-color: var(--accent); color: var(--accent); }

.footer__nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; justify-self: end; }
.footer__nav h3 { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text); margin-bottom: 14px; }
.footer__nav ul { display: flex; flex-direction: column; gap: 8px; }
.footer__nav a { font-size: 0.85rem; color: var(--text-2); font-weight: 300; transition: color var(--t); }
.footer__nav a:hover { color: var(--text); }

.footer__bar { padding: 18px 0; border-top: 1px solid rgba(255,255,255,0.04); }
.footer__bar-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.footer__bar p { font-size: 0.78rem; color: var(--text-3); font-weight: 300; max-width: none; }
.footer__bar a { font-size: 0.78rem; color: var(--accent); font-weight: 500; transition: color var(--t); }
.footer__bar a:hover { color: #fff; }

@media (max-width: 768px) {
  .footer__inner { grid-template-columns: 1fr; gap: 40px; }
  .footer__nav { justify-self: start; }
  .footer__bar-inner { flex-direction: column; align-items: flex-start; }
}

/* =============================================================================
   SCROLL REVEAL
   ============================================================================= */
[data-reveal] {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
[data-reveal].revealed { opacity: 1; transform: translateY(0); }
[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .hero__li  { transform: none; opacity: 1; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* =============================================================================
   RESPONSIVE SCALE
   ============================================================================= */
@media (max-width: 1200px) { :root { --py: 88px; } }
@media (max-width: 768px) {
  :root { --py: 68px; }
  .section-title { font-size: clamp(2rem, 8vw, 2.75rem); }
  [data-chapter]::before { font-size: clamp(100px, 22vw, 180px); }
  .faq__entry:has(.faq__q[aria-expanded="true"]) { border-left: none; padding-left: 0; }
}
@media (max-width: 480px) {
  .hero__proof { flex-direction: column; align-items: flex-start; }
  .proof__div { display: none; }
}

/* =============================================================================
   SCROLLING TESTIMONIALS — §3
   ============================================================================= */
.tscroll-section { background: var(--bg-1); }
.tscroll-section > .container { position: relative; z-index: 1; }
.tscroll-sub {
  font-size: 1rem; color: var(--text-2); font-weight: 300;
  line-height: 1.7; max-width: 50ch; margin-top: -8px; margin-bottom: 0;
}

/* Gradient-overlay fade — same approach as transforms-track-wrap.
   Pseudo-elements on .tscroll-region create top/bottom fades without
   any mask/animation compositing conflict in Safari. */
.tscroll-region {
  margin-top: 48px;
  max-height: 700px;
  overflow: hidden;
  position: relative;
}
.tscroll-region::before,
.tscroll-region::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 10%;
  min-height: 56px;
  z-index: 2;
  pointer-events: none;
}
.tscroll-region::before {
  top: 0;
  background: linear-gradient(to bottom, var(--bg-1) 0%, transparent 100%);
}
.tscroll-region::after {
  bottom: 0;
  background: linear-gradient(to top, var(--bg-1) 0%, transparent 100%);
}
.tscroll-grid {
  display: flex; justify-content: center; gap: 16px;
  padding: 0 clamp(20px, 5vw, 56px);
  height: 100%;
}
.tscroll-col { width: 320px; flex-shrink: 0; min-width: 0; }
.tscroll-col--md { display: none; }
.tscroll-col--lg { display: none; }
@media (min-width: 768px)  { .tscroll-col--md { display: block; } }
@media (min-width: 1100px) { .tscroll-col--lg { display: block; } }

.tscroll-inner {
  display: flex; flex-direction: column; gap: 16px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: tScrollUp 22s linear infinite;
  animation: tScrollUp 22s linear infinite;
}
.tscroll-inner--slow { animation-duration: 28s; }
.tscroll-inner--fast { animation-duration: 17s; }
.tscroll-inner:hover { animation-play-state: paused; }
@-webkit-keyframes tScrollUp {
  from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  to   { -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); }
}
@keyframes tScrollUp {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -50%, 0); }
}

.tcard {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 24px 24px 20px;
  transition: border-color var(--t), background var(--t);
}
.tcard:hover { border-color: rgba(162,230,243,0.22); background: var(--surface-2); }
.tcard blockquote p {
  font-size: 0.875rem; color: var(--text-2);
  line-height: 1.75; font-weight: 300; margin-bottom: 20px; max-width: none;
}
.tcard-footer {
  display: flex; align-items: center; gap: 10px;
  padding-top: 14px; border-top: 1px solid var(--border);
}
.tcard-footer img {
  width: 36px; height: 36px; border-radius: var(--r);
  object-fit: cover; flex-shrink: 0; border: 1px solid var(--border-2);
}
.tcard-footer strong { display: block; font-size: 0.83rem; color: var(--text); font-weight: 500; }
.tcard-footer span   { font-size: 0.72rem; color: var(--text-2); font-weight: 300; }

@media (prefers-reduced-motion: reduce) {
  .tscroll-inner { animation: none; }
  .tscroll-region {
    max-height: none;
    -webkit-mask-image: none; mask-image: none;
    overflow: visible;
  }
}

/* =============================================================================
   TEAM VORSTELLUNG — §5
   ============================================================================= */
.vorstellung { background: var(--bg); }
.vorstellung > .container { position: relative; z-index: 1; }

.team-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-top: 48px;
}
.team-card {
  position: relative; border-radius: var(--r); overflow: hidden;
  aspect-ratio: 3/4; border: 1px solid var(--border); background: var(--surface);
  /* Safari: min-width:0 prevents grid children from overflowing */
  min-width: 0;
}
/* Safari: aspect-ratio alone doesn't give children a height reference;
   absolute positioning is the reliable cross-browser approach */
.team-card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center top;
  filter: grayscale(0.15) contrast(1.05) brightness(0.65);
  transition: transform 0.55s ease, filter 0.4s ease;
}
.team-card:hover .team-card__img {
  transform: scale(1.04);
  filter: grayscale(0) contrast(1.05) brightness(0.72);
}
.team-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,12,14,0.95) 0%, rgba(12,12,14,0.5) 45%, transparent 100%);
}
.team-card__body { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px; }
.team-card__icon {
  display: block; width: 28px; height: 28px;
  color: rgba(162,230,243,0.28); margin-bottom: 14px;
}
.team-card__body blockquote p {
  font-size: 0.875rem; color: rgba(232,232,236,0.78);
  line-height: 1.65; font-weight: 300; margin-bottom: 16px; max-width: none;
}
.team-card__name {
  display: block; font-size: 0.95rem; color: #fff;
  font-weight: 600; margin-bottom: 3px;
}
.team-card__role {
  font-size: 0.63rem; color: var(--accent);
  letter-spacing: 0.14em; text-transform: uppercase;
}

@media (max-width: 900px) and (min-width: 601px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .team-card:last-child { grid-column: span 2; aspect-ratio: 16/9; }
}
@media (max-width: 600px) {
  .team-grid { grid-template-columns: 1fr; }
  .team-card { aspect-ratio: 4/3; }
}

/* =============================================================================
   FOOTER — Glow enhancement (additive)
   ============================================================================= */
.footer { position: relative; overflow: hidden; }
.footer::before {
  content: '';
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 30%; height: 1px;
  background: rgba(255,255,255,0.14);
  filter: blur(4px);
  pointer-events: none; z-index: 1;
}
/* Footer centred logo — sits inside footer__inner, spans full width */
.footer__logo-center {
  grid-column: 1 / -1;          /* span both columns of footer__inner grid */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0 8px;
  width: 100%;
}
.footer__logo-img {
  height: 54px;                  /* 36px × 150% */
  width: auto;
  opacity: 0.18;
  filter: brightness(0) invert(1);
  transition: opacity var(--t);
  pointer-events: none;
  display: block;
}

.footer__radial {
  position: absolute; top: 0; left: 0; right: 0;
  height: 200px;
  background: radial-gradient(35% 128px at 50% 0%, rgba(255,255,255,0.035), transparent);
  pointer-events: none; z-index: 0;
}

/* =============================================================================
   PRICING — §X
   ============================================================================= */
.pricing-sec { background: var(--bg); }

.pricing-sec__title { text-align: center; }

.pricing-sub {
  color: var(--text-2); font-size: 0.92rem;
  max-width: 500px; margin: 8px auto 40px;
  text-align: center; line-height: 1.75;
}

/* Toggle */
.pricing-toggle {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; margin: 0 auto 52px;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 999px; padding: 5px;
  width: fit-content;
}
.pricing-toggle__btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 22px; font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.04em; text-transform: none;
  color: var(--text-2); background: transparent; border: none;
  border-radius: 999px; cursor: pointer;
  transition: color var(--t), background var(--t);
}
.pricing-toggle__btn--active {
  background: var(--surface-2); color: var(--text);
}
.pricing-toggle__badge {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
  background: rgba(162,230,243,0.08); border: 1px solid rgba(162,230,243,0.18);
  border-radius: 999px; padding: 2px 8px;
}

/* Grid */
.pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; align-items: start;
}
@media (max-width: 900px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 420px; margin-inline: auto;
  }
}

/* Gold button (12-month CTA) */
.btn--gold {
  background: #E5C77B; color: #0C0C0E;
  border: 1px solid #E5C77B; font-weight: 600;
}
.btn--gold:hover { background: transparent; color: #E5C77B; border-color: #E5C77B; }

/* Ghost button (outline) */
.btn--outline {
  background: transparent; color: var(--text-2);
  border: 1px solid var(--border-2);
}
.btn--outline:hover { color: var(--text); border-color: var(--border-3); }

/* Gold-border variant (12-month) */
.pricing-card--gold {
  border-color: #E6C97A;
  box-shadow: 0 0 0 1px rgba(230,201,122,0.08), 0 12px 40px rgba(0,0,0,0.35);
}
.pricing-card--gold:hover { border-color: rgba(230,201,122,0.75); }

/* Card base */
.pricing-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: visible;
  transition: border-color var(--t);
}
.pricing-card:hover { border-color: var(--border-2); }

/* Highlighted card */
.pricing-card--highlighted {
  border-color: rgba(162,230,243,0.3);
  background: linear-gradient(175deg, var(--surface-2) 0%, var(--surface) 100%);
  box-shadow: 0 0 0 1px rgba(162,230,243,0.08), 0 24px 64px rgba(0,0,0,0.45);
}
.pricing-card--highlighted:hover { border-color: rgba(162,230,243,0.5); }

/* Badge */
.pricing-card__badge {
  position: absolute; top: -12px; right: 18px;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #0C0C0E;
  background: var(--accent); border-radius: 999px;
  padding: 3px 12px; pointer-events: none;
}
.pricing-card__badge--warm {
  background: #E6C97A; color: #0C0C0E;
}

/* Head */
.pricing-card__head {
  padding: 28px 28px 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: 24px;
}
.pricing-card__name {
  display: block; font-family: var(--display);
  font-size: 1.4rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text);
  margin-bottom: 3px;
}
.pricing-card__desc {
  display: block; font-size: 0.78rem; color: var(--text-2);
  font-weight: 300; margin-bottom: 18px;
}
.pricing-card__price-row {
  display: flex; align-items: baseline; gap: 6px;
}
.pricing-card__amount {
  font-family: var(--display); font-size: 2.8rem; font-weight: 800;
  color: var(--text); line-height: 1; letter-spacing: -0.02em;
  transition: all 0.2s ease;
}
.pricing-card__per {
  font-size: 0.78rem; color: var(--text-2); font-weight: 300;
  transition: all 0.2s ease;
}
.pricing-card__saving {
  display: block; font-size: 0.72rem; color: var(--accent);
  font-weight: 500; min-height: 1.3em; margin-top: 4px;
  transition: opacity 0.2s ease;
}

/* Aufnahmegebühr-Waiver */
.pricing-card__onboarding {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px;
  padding: 7px 11px;
  background: rgba(162,230,243,0.05);
  border: 1px solid rgba(162,230,243,0.13);
  border-radius: 2px;
}
.pricing-card__onboarding-struck {
  font-size: 0.74rem; color: var(--text-3);
  text-decoration: line-through;
  font-weight: 300;
  font-style: normal;
  flex-shrink: 0;
}
.pricing-card__onboarding-free {
  font-size: 0.72rem; font-weight: 600;
  color: var(--accent); letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Gold-Card: leicht wärmerer Ton */
.pricing-card--gold .pricing-card__onboarding {
  background: rgba(230,201,122,0.05);
  border-color: rgba(230,201,122,0.15);
}
.pricing-card--gold .pricing-card__onboarding-free {
  color: #E6C97A;
}

/* Features */
.pricing-card__features {
  list-style: none; margin: 0; padding: 24px 28px;
  display: flex; flex-direction: column; gap: 11px;
  flex: 1;
}
.pricing-card__features li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.83rem; color: var(--text-2); font-weight: 300;
  line-height: 1.55;
}
.pricing-card__features strong { color: var(--text); font-weight: 500; }

.pricing-check {
  color: var(--accent); font-size: 0.72rem;
  flex-shrink: 0; margin-top: 3px; font-weight: 700;
}
.pricing-check--warm { color: #E6C97A; font-size: 0.8rem; }

/* CTA button in card */
.pricing-card__cta {
  margin: 0 20px 24px; justify-content: center;
  width: calc(100% - 40px);
}

/* Footer note */
.pricing-note {
  text-align: center; font-size: 0.74rem; color: var(--text-3);
  max-width: 580px; margin: 40px auto 0; line-height: 1.8;
}