/* ============================================================
   AI Business Manager — Karriere-Track (v2, Multi-Page)
   Design language: Apple-restraint primary, bold-black type +
   single magenta accent for numbered/interactive elements.
   Shared design system across all pages.
   ============================================================ */

:root {
  --bg: #ffffff;
  --bg-soft: #f6f6f7;
  --bg-soft-2: #f0f0f2;
  --ink: #0c0c0d;
  --ink-soft: #56565c;
  --ink-faint: #96969c;
  --accent: #e31c5f;
  --accent-dim: rgba(227, 28, 95, 0.08);
  --accent-dim-2: rgba(227, 28, 95, 0.14);
  --line: rgba(12, 12, 13, 0.1);
  --line-soft: rgba(12, 12, 13, 0.07);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --radius-pill: 100px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.35, 0.4, 1);
  --font: "General Sans", -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "Segoe UI", Roboto, sans-serif;
  --nav-h: 68px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

p {
  margin: 0;
}

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

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

button {
  font-family: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Reveal on scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  /* will-change is toggled dynamically in script.js only while the
     transition actually runs, not left on permanently — with 20-30+
     [data-reveal] elements per page, a permanent will-change here kept
     that many compositor layers alive for the life of the page. */
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
[data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0.02s; }
[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 0.08s; }
[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 0.14s; }
[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 0.2s; }
[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 0.26s; }
[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 0.32s; }
[data-reveal-stagger].is-visible > *:nth-child(7) { transition-delay: 0.38s; }
[data-reveal-stagger].is-visible > *:nth-child(8) { transition-delay: 0.44s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-stagger] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html { scroll-behavior: auto; }
  .stage-panel, .journey-detail, .journey-orbit * { transition: none !important; animation: none !important; }
}

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  padding: 14px 0;
  /* Trimmed from blur(20px) saturate(180%): a fixed, full-width
     backdrop-filter recomputes every scroll frame (the content behind it
     keeps changing), and the heavier the blur/saturate, the more that
     costs — a real, measurable contributor to scroll jank on a page this
     long, independent of the reveal-system fix above. Slightly higher
     background opacity compensates so the glass look reads the same. */
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: rgba(255, 255, 255, 0.78);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease), padding 0.4s var(--ease);
}
.nav.scrolled {
  border-bottom-color: var(--line);
}
.nav-inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}
.logo-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  flex-shrink: 0;
}
.logo-dot.small { margin-right: 6px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.nav-links a {
  position: relative;
  padding: 7px 8px;
  margin: -7px -8px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  transition: color 0.2s ease, background-color 0.2s ease;
}
/* Round 47 gave nav items a pill background on hover - real feedback
   after that shipped: a hover-only affordance still can't be discovered
   by someone who doesn't already know to hover (that's the definition
   of hover-only). Round 48 fix: make the resting state itself read as
   "clickable nav" - heavier weight by default (500, not inherited
   body-text weight), real breathing room between items instead of a
   tight cluster (28px gap, was 6px), and a permanent low-opacity
   underline under every item via ::before so the row visibly reads as
   a set of separate targets even before any interaction. Hover/focus
   then intensifies that same underline to full accent color plus the
   existing soft pill fill, rather than being the only signal.
   ::before is the always-on resting affordance; ::after (below) stays
   reserved for the current-page accent bar so the two never collide. */
.nav-links a::before {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: -7px;
  height: 1.5px;
  background: var(--ink-faint);
  opacity: 0.4;
  border-radius: 2px;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}
.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--ink);
  background: var(--bg-soft);
}
.nav-links a:hover::before,
.nav-links a:focus-visible::before {
  opacity: 1;
  background: var(--accent);
}
.nav-links a:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-dim-2) inset; }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav-links a[aria-current="page"]::before { display: none; }
.nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: -7px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.nav-link-muted {
  color: var(--ink-faint) !important;
  font-weight: 500;
}
.nav-link-muted:hover { color: var(--accent) !important; }
/* Round 2 fix (affects both DE and EN special-editions.html): every
   other nav item marks itself current with aria-current="page" on a
   plain <a>, styled by .nav-links a[aria-current="page"] (bold, ink
   color, underline). "Special Editions" lives in .nav-right, not
   .nav-links, so that selector never applied to it — it used to render
   a completely different bespoke <span class="nav-current"> pill (pink
   fill + dot) instead. Now it's a normal self-link with aria-current,
   like every other page, so it gets this matching treatment: bold +
   accent color, no pill background, no dot. The old .nav-current /
   .nav-current-dot component is removed as dead code (no longer used
   anywhere once special-editions.html and en/special-editions.html were
   updated to the standard pattern). */
.nav-right a.nav-link-muted[aria-current="page"] {
  color: var(--accent) !important;
  font-weight: 600;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-shrink: 0;
}

.nav-cta {
  font-size: 13px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: #fff;
  white-space: nowrap;
  transition: background 0.25s ease, transform 0.25s var(--ease);
  flex-shrink: 0;
}
.nav-cta:hover {
  background: var(--accent);
  transform: translateY(-1px);
}
.nav-cta:active { transform: translateY(0) scale(0.97); }

.nav-toggle {
  display: none;
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 34px;
  height: 34px;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink);
}
.nav-toggle svg { display: block; }
.nav-toggle .icon-close { display: none; }
.nav.menu-open .nav-toggle .icon-open { display: none; }
.nav.menu-open .nav-toggle .icon-close { display: block; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-link-muted { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .nav-mobile {
    display: none;
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    padding: 8px 24px 28px;
    z-index: 199;
  }
  .nav.menu-open .nav-mobile {
    display: flex;
    flex-direction: column;
  }
  .nav-mobile a {
    padding: 15px 4px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
  }
  .nav-mobile a[aria-current="page"] { color: var(--accent); }
  .nav-mobile-current[aria-current="page"] {
    color: var(--accent);
    font-weight: 600;
    cursor: default;
    user-select: none;
  }
  .nav-mobile a:last-of-type { border-bottom: none; }
}
@media (min-width: 901px) {
  .nav-mobile { display: none !important; }
}

@media (max-width: 480px) {
  .nav-inner { padding: 0 16px; gap: 10px; }
  .nav-logo { font-size: 12.5px; }
  .nav-cta { font-size: 11.5px; padding: 8px 12px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.btn-primary {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.btn-primary:hover {
  background: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -8px rgba(var(--accent-rgb), 0.45);
}
.btn-primary:active { transform: translateY(0) scale(0.98); }
.btn-secondary {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-secondary:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.btn-ghost {
  color: var(--ink);
  padding: 14px 8px;
  background: none;
}
.btn-ghost svg { transition: transform 0.3s var(--ease); }
.btn-ghost:hover svg { transform: translateX(4px); }
.btn-large { padding: 17px 36px; font-size: 16px; }

@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; }
  .btn-large { padding: 15px 22px; font-size: 15px; }
}

/* ---------- Page header (non-home pages) ---------- */
.page-header {
  padding: 156px 32px 88px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-header-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0) 70%);
}
.page-eyebrow {
  position: relative;
  z-index: 1;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.page-header h1 {
  position: relative;
  z-index: 1;
  font-size: clamp(32px, 5.4vw, 56px);
  max-width: 760px;
  margin: 0 auto;
}
.page-header p {
  position: relative;
  z-index: 1;
  margin: 22px auto 0;
  max-width: 560px;
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.6;
  color: var(--ink-soft);
}
.page-header-actions {
  position: relative;
  z-index: 1;
  margin-top: 32px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .page-header { padding: 132px 24px 64px; }
}

/* ---------- Hero (home) ---------- */
.hero {
  position: relative;
  min-height: 84svh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 48px) 32px 48px;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: -10% 0 -10%;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.hero-glow {
  position: absolute;
  top: -10%;
  left: 20%;
  width: 900px;
  height: 700px;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.10), rgba(var(--accent-rgb), 0) 70%);
  filter: blur(10px);
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, var(--line-soft) 1px, transparent 1px);
  background-size: 120px 100%;
  mask-image: radial-gradient(ellipse 55% 50% at 30% 40%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 55% 50% at 30% 40%, black 20%, transparent 75%);
  opacity: 0.6;
}
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  animation: hero-drift 26s ease-in-out infinite;
}
.hero-orb-a {
  width: 440px;
  height: 440px;
  top: -140px;
  right: 6%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.16), transparent 70%);
  animation-delay: 0s;
}
.hero-orb-b {
  width: 300px;
  height: 300px;
  bottom: -100px;
  left: 2%;
  background: radial-gradient(circle, rgba(12, 12, 13, 0.07), transparent 70%);
  animation-delay: -11s;
}
@keyframes hero-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(26px, -20px) scale(1.06); }
  66% { transform: translate(-18px, 18px) scale(0.96); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-orb { animation: none; }
}

.hero-split {
  position: relative;
  z-index: 1;
  max-width: 1220px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
.hero-content { max-width: 600px; }
/* Round 17: real Munich Business School lockup (crest + wordmark),
   rebuilt as live text at the exact brand navy sampled from the crest
   asset (#1E2444) — a faithful 1:1 layout match of their official
   logo, not a screenshot crop, so it stays crisp and on-brand at any
   size. Replaces the round 14/16 crest-only + separate kicker-text
   version, which read as small/redundant once compared side by side
   with the real logo. */
.hero-mbs-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 8px auto 36px;
}
.hero-mbs-crest {
  display: block;
  height: 64px;
  width: auto;
  flex: none;
}
.hero-mbs-wordmark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}
.hero-mbs-name {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: #1e2444;
}
.hero-mbs-tagline {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #5a6180;
}
@media (max-width: 600px) {
  .hero-mbs-lockup { gap: 12px; margin: 4px auto 26px; }
  .hero-mbs-crest { height: 46px; }
  .hero-mbs-name { font-size: 17px; }
  .hero-mbs-tagline { font-size: 10.5px; }
}
.hero h1 {
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 700;
  letter-spacing: -0.035em;
}
.hero-sub {
  margin: 22px 0 0;
  max-width: 480px;
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.55;
  color: var(--ink-soft);
  font-weight: 400;
}
.hero-actions {
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* Hero, round 13: single-column "hook" hero — headline + CTAs + a
   prominent trust block (MBS certification + condensed 3-stat row)
   replace the old two-column layout and the journey-orbit graphic. */
.hero-solo .hero-split { grid-template-columns: 1fr; }
.hero-solo .hero-content { max-width: 720px; margin: 0 auto; text-align: center; }
.hero-solo .hero-sub { margin-left: auto; margin-right: auto; }
.hero-solo .hero-actions { justify-content: center; }
.hero-solo h1 { font-size: clamp(32px, 5vw, 56px); }

/* Round 14: hero stat row redesigned to match the reference deck's
   fact-row treatment — bold large numbers with a smaller adjoining
   unit, thin vertical dividers, pink accent reserved for the single
   standout figure (9,8/10), muted micro-label underneath. Sits
   directly under the CTAs (the old separate .hero-trust-block /
   .hero-mbs logo lockup was removed — the kicker above now carries
   the certification signal instead of a second, competing logo). */
.hero-stats-row {
  margin-top: 52px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 34px;
}
.hero-stat + .hero-stat { border-left: 1px solid var(--line); }
.hero-stat-value {
  margin: 0;
  font-size: clamp(32px, 4.2vw, 48px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hero-stat-unit {
  margin-left: 5px;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: -0.01em;
}
.hero-stat-accent .hero-stat-value,
.hero-stat-accent .hero-stat-value span { color: var(--accent); }
.hero-stat-label { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-soft); text-align: center; max-width: 170px; line-height: 1.4; }

/* Round 28 addendum: small hybrid-format badge between the CTAs and the
   stat row — surfaces the third core differentiator (online + Präsenz)
   without adding a heavy new section next to the hero. */
.hero-format-note {
  margin: 26px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(12, 12, 13, 0.025);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
}
.hero-format-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

@media (max-width: 600px) {
  /* Round 49: each .hero-stat was shrink-to-fit + internally centered, so
     with three stats stacked in a column, whichever of value/label text
     happened to be widest for THAT stat set that stat's own box width —
     the big number then centered inside its own differently-sized box,
     so the numbers landed at three different x-positions instead of one
     shared left edge ("nicht synchron", per David, comparing screenshots
     of the stacked stats). Fix: stretch every stat to the row's full
     width and left-align both value and label within it, so all three
     numbers sit flush on the same vertical line regardless of label
     length. */
  .hero-stats-row { flex-direction: column; align-items: stretch; gap: 24px; padding-top: 32px; }
  .hero-stat { padding: 0; align-items: flex-start; }
  .hero-stat + .hero-stat { border-left: none; border-top: 1px solid var(--line); padding-top: 24px; }
  .hero-stat-label { text-align: left; max-width: none; }
  .hero-format-note { margin-top: 20px; font-size: 12.5px; text-align: center; white-space: normal; }
}

.scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 32px;
  width: 22px;
  height: 36px;
  border: 1.5px solid var(--ink-faint);
  border-radius: 100px;
  z-index: 1;
}
.scroll-cue span {
  position: absolute;
  top: 6px; left: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ink-faint);
  transform: translateX(-50%);
  animation: scrollcue 2s ease-in-out infinite;
}
@keyframes scrollcue {
  0% { opacity: 1; top: 6px; }
  60% { opacity: 0; top: 18px; }
  100% { opacity: 0; top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue span { animation: none; opacity: 1; }
}

@media (max-width: 980px) {
  .hero-split { grid-template-columns: 1fr; text-align: center; gap: 56px; }
  .hero-content { max-width: 100%; margin: 0 auto; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .scroll-cue { display: none; }
}
@media (max-width: 600px) {
  .hero { padding-top: calc(var(--nav-h) + 32px); min-height: auto; padding-bottom: 64px; }
}

/* ---------- Stat band ---------- */
.stat-band {
  position: relative;
  overflow: hidden;
  padding: 96px 32px;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat-band::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 780px; height: 420px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.06), transparent 72%);
  pointer-events: none;
}
.stats-grid {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
}
.stat { padding: 0 24px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: none; }
.stat-value {
  display: block;
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat-value-accent {
  background: linear-gradient(120deg, var(--ink) 30%, var(--accent) 130%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.stat-label {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-soft);
}
@media (max-width: 700px) {
  .stats-grid { grid-template-columns: 1fr; gap: 40px; }
  .stat { border-left: none; border-top: 1px solid var(--line); padding: 28px 0 0; }
  .stat:first-child { border-top: none; padding-top: 0; }
}

/* ---------- Mentors ---------- */
.mentors { padding: 140px 32px; }
.mentors.mentors-soft { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mentors-inner { max-width: 1180px; margin: 0 auto; }
.mentors-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.mentors h2 { font-size: clamp(28px, 4vw, 44px); max-width: 620px; }
.mentors-intro { margin-top: 18px; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); max-width: 560px; }
.mentors-more { font-size: 14.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mentors-more svg { transition: transform 0.3s var(--ease); }
.mentors-more:hover svg { transform: translateX(4px); }

.mentors-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 28px;
}
.mentor-photo {
  overflow: hidden;
  border-radius: var(--radius-md);
  /* Round 29: pure white, not a gray placeholder tone — every source
     photo's real backdrop is already 255/255/255, so a gray fallback
     here only risked showing as a mismatched sliver/frame around any
     photo whose crop transform doesn't fully overscan the box (e.g. a
     zoom factor at/near 1.0). White keeps every card visually seamless
     with its own backdrop regardless of the exact crop math. */
  background: #fff;
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.mentor img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 0.5s var(--ease);
}
/* Per-photo crop fix (round 28, refined): every mentor headshot was
   measured pixel-by-pixel (headroom above the head + how far the torso
   runs before hitting background) and mapped onto a single shared
   reference framing — the ratio already shared by Stefan Neumann /
   Dr. Gunther Schunk / Prof. Dr. Heiko Seif (~11% headroom, subject
   running full-bleed to the bottom of the frame). Since every source
   file already matches the card's 4:5 aspect ratio exactly, plain
   object-position has nothing to reposition — object-fit: cover applies
   zero crop when ratios already match. Instead each image gets its own
   two-point affine fit (--zoom scale + --ty vertical shift, both solved
   from the image's actual measured top/bottom content offsets so the
   same head-to-frame and torso-to-frame proportions land in the same
   place for every mentor), with the wrapper's overflow: hidden clipping
   whatever the transform pushes outside the card. No source pixels are
   invented — this only repositions/scales existing image content. */
.mentor-crop {
  transform: translateY(var(--ty, 0%)) scale(var(--zoom, 1));
  transform-origin: 50% 0%;
}
.mentor:hover .mentor-photo {
  transform: translateY(-5px);
  box-shadow: 0 26px 46px -22px rgba(12, 12, 13, 0.4);
}
.mentor:hover img {
  filter: grayscale(0%);
}
.mentor h3 { margin-top: 16px; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.mentor p { margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); }
/* Thin accent rule between name and role — homepage editorial cards
   only (see .mentor-rule usage below); base mentoren.html cards don't
   include this element in their markup, so it's a no-op there. */
.mentor-rule {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  margin: 10px 0 6px;
}

@media (max-width: 980px) { .mentors-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .mentors-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 18px; } }

/* Homepage-only variant: 6 curated mentors in a single clean row
   (round 14, replaces the round-13 5-up grid). Uses a double-class
   selector (.mentors-grid.mentors-grid-6) so it always wins over the
   base 4-col .mentors-grid rule regardless of source order — the
   previous single-class .mentors-grid-5 override was fragile to that
   exact failure mode. Kept as its own class (not touching the base
   .mentors-grid used on the full mentoren.html roster) so that page
   is unaffected. */
.mentors-grid.mentors-grid-6 { grid-template-columns: repeat(6, 1fr); gap: 30px 20px; }
@media (max-width: 1100px) { .mentors-grid.mentors-grid-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .mentors-grid.mentors-grid-6 { grid-template-columns: repeat(2, 1fr); gap: 32px 18px; } }

/* ---------- Format facts strip ---------- */
.facts { padding: 0 32px 120px; }
.facts-inner {
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line);
}
.fact { padding: 32px 24px; border-left: 1px solid var(--line); }
.fact:first-child { border-left: none; }
.fact-value { font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; letter-spacing: -0.02em; }
.fact-label { margin-top: 8px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.4; }
@media (max-width: 780px) {
  .facts-inner { grid-template-columns: repeat(2, 1fr); }
  .fact:nth-child(3) { border-left: none; }
  .fact:nth-child(1), .fact:nth-child(2) { border-bottom: 1px solid var(--line); }
}

/* ---------- Stages (accordion, Programm page) ---------- */
.stages { padding: 20px 32px 160px; background: var(--bg); }
/* Round 47: on programm.html this section is now a short intro heading
   immediately followed by the embedded journey app (stat strip + 12-stage
   stepper), not the old full accordion — the accordion's 160px bottom
   padding would leave a big dead gap before the stepper starts. */
#etappen.stages { padding-bottom: 12px; }
.stages-inner { max-width: 880px; margin: 0 auto; }
.stages h2 { font-size: clamp(30px, 4.4vw, 46px); font-weight: 700; }
.stages-intro { margin-top: 18px; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); max-width: 560px; }

.stage-list { margin-top: 60px; border-top: 1px solid var(--ink); }
.stage { border-bottom: 1px solid var(--line); }
.stage-trigger {
  appearance: none; background: none; border: none; width: 100%;
  display: grid; grid-template-columns: 56px 1fr 40px; align-items: center; gap: 20px;
  padding: 30px 0; cursor: pointer; text-align: left; font-family: inherit; color: var(--ink);
  transition: transform 0.15s ease;
}
.stage-trigger:active { transform: scale(0.997); }
.stage-trigger:hover .stage-title, .stage-trigger:hover .stage-num { color: var(--accent); }
.stage-num { font-size: 15px; font-weight: 600; color: var(--ink-faint); transition: color 0.25s ease; font-variant-numeric: tabular-nums; }
.stage-title { font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -0.02em; transition: color 0.25s ease; }
.stage-icon {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; color: var(--ink);
  transition: transform 0.35s var(--ease), background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  flex-shrink: 0;
}
.stage-trigger[aria-expanded="true"] .stage-icon { transform: rotate(45deg); background: var(--ink); border-color: var(--ink); color: #fff; }
.stage-trigger[aria-expanded="true"] .stage-title, .stage-trigger[aria-expanded="true"] .stage-num { color: var(--accent); }

.stage-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
.stage-panel.open { grid-template-rows: 1fr; }
.stage-panel-inner { overflow: hidden; }
.stage-panel-inner .stage-panel-body { padding: 0 0 36px 76px; max-width: 620px; }
.stage-panel-body p { font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.stage-sub {
  margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px;
}
.stage-sub-chip {
  font-size: 12.5px; font-weight: 600; padding: 7px 13px;
  border-radius: var(--radius-pill); background: var(--accent-dim); color: var(--accent);
}
/* Round 28: distinguish the 6 AI-skill stages from the 6 stages built
   around direct top-manager experience — same pill shape, so it reads
   as a light tag rather than a bolted-on badge system. AI-Thema keeps
   the existing accent-pink treatment (it was already the only chip
   style); Top-Manager-Erfahrung gets a neutral ink-toned fill instead
   of introducing a brand-new hue into an otherwise monochrome+accent
   palette. */
.stage-sub-chip--ai { background: var(--accent-dim); color: var(--accent); }
.stage-sub-chip--tm { background: rgba(12, 12, 13, 0.06); color: var(--ink-soft); }
.stage-legend {
  margin-top: 22px; display: flex; flex-wrap: wrap; gap: 20px;
}
.stage-legend-item {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
}
.stage-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.stage-legend-dot-ai { background: var(--accent); }
.stage-legend-dot-tm { background: var(--ink-faint); }
@media (max-width: 600px) {
  .stage-trigger { grid-template-columns: 36px 1fr 32px; gap: 12px; padding: 22px 0; }
  .stage-icon { width: 32px; height: 32px; }
  .stage-panel-inner .stage-panel-body { padding-left: 48px; }
  .stage-panel-body p { font-size: 15.5px; }
  .stage-legend { gap: 14px 20px; margin-top: 18px; }
}

/* ---------- Journey CTA banner (Programm page) ---------- */
.journey-banner {
  margin: 0 32px 160px;
  max-width: 1120px;
  margin-left: auto; margin-right: auto;
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: #fff;
  padding: 64px 56px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
  position: relative;
  overflow: hidden;
}
.journey-banner::before {
  content: "";
  position: absolute;
  top: -30%; right: -10%;
  width: 480px; height: 480px;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.28), transparent 70%);
  pointer-events: none;
}
.journey-banner-copy { position: relative; z-index: 1; max-width: 520px; }
.journey-banner-copy span.jb-kicker {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-bright);
}
.journey-banner-copy h2 { margin-top: 14px; font-size: clamp(24px, 3vw, 32px); color: #fff; }
.journey-banner-copy p { margin-top: 14px; font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,0.68); }
.journey-banner .btn-primary { position: relative; z-index: 1; background: #fff; color: var(--ink); }
.journey-banner .btn-primary:hover { background: var(--accent); color: #fff; }
@media (max-width: 700px) {
  .journey-banner { grid-template-columns: 1fr; text-align: left; padding: 48px 32px; }
}

/* ---------- Audience rows ---------- */
.audience { padding: 20px 32px 150px; }
.audience-inner { max-width: 900px; margin: 0 auto; }
.audience h2 { font-size: clamp(28px, 4vw, 42px); max-width: 620px; }
.audience-intro { margin-top: 20px; font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 620px; }
.audience-rows { margin-top: 56px; border-top: 1px solid var(--line); }
.audience-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.audience-row h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.audience-row p { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 760px) { .audience-row { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- Logo wall / references ---------- */
.partners { padding: 110px 32px; background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.partners-inner { max-width: 1120px; margin: 0 auto; text-align: center; }
.partners-head { display: flex; flex-direction: column; align-items: center; }
.partners h2 { font-size: clamp(22px, 2.8vw, 30px); }
.partners-more { margin-top: 14px; font-size: 14.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.partners-more svg { transition: transform 0.3s var(--ease); }
.partners-more:hover svg { transform: translateX(4px); }
.partners-intro { margin: 14px auto 0; max-width: 560px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

.partners-quote {
  margin: 44px auto 0;
  max-width: 560px;
  padding: 28px 32px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: #fff;
  text-align: center;
}
.partners-quote p { font-size: 16.5px; line-height: 1.5; font-weight: 500; letter-spacing: -0.005em; color: var(--ink); }
.partners-quote footer { margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--ink-faint); }
.partners-quote footer span { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--ink-faint); }
@media (max-width: 600px) {
  .partners-quote { padding: 24px 22px; }
}

.logo-wall { margin-top: 52px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 26px; }
.logo-wall img {
  height: 88px; width: 88px; object-fit: contain;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: #fff;
  padding: 10px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s ease;
}
.logo-wall img:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -14px rgba(12,12,13,0.3); border-color: var(--line); }

@media (max-width: 640px) {
  .logo-wall { gap: 14px; }
  .logo-wall img { height: 66px; width: 66px; padding: 7px; }
}

/* Partner logos (transparent-style, wordmarks) reused on unternehmen/index secondary walls.
   A fixed height alone makes square icon-marks (e.g. Management Forum
   Starnberg, Thalia) read much smaller than wide wordmarks (e.g. Lehmanns,
   Senator) at the same height, since rendered area differs a lot by
   aspect ratio. Instead we size by visual footprint: icon-marks get a
   taller box, mid-ratio marks a medium box, wordmarks the base height —
   so every logo reads with roughly the same prominence. */
.logo-wall-flat { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 44px 60px; }
/* Round 47 design call: kept grayscale-by-default rather than switching
   to permanent full color. Reasoning: these are 8 visually unrelated
   brand colors (BFB blue, FOX orange, Thalia red, etc.) — a unified
   gray wall reads as one coherent "trusted institutions" row (the
   established premium-minimal pattern, e.g. Stripe/Linear-style partner
   walls); full color risks reading busier/more "logo soup", working
   against this site's stated Apple-restraint direction. Nudged the idle
   opacity up (0.6 -> 0.78) and eased the grayscale slightly (100% ->
   90%) so they feel a bit more "alive" at rest without abandoning the
   unified treatment — hover still goes fully saturated as the reward
   for engaging, which is now also called out explicitly in the copy
   above the wall (see .coop-partners-note). */
.logo-wall-flat img {
  height: 44px; width: auto; max-width: 170px; object-fit: contain;
  filter: grayscale(90%); opacity: 0.78;
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.logo-wall-flat img.logo-mark { height: 72px; }
.logo-wall-flat img.logo-mid { height: 54px; }
/* Round 28: BFB, FOX Group and Thalia individually bumped up — BFB's
   mark was unreadably small at the shared .logo-mid size, and FOX Group
   / Thalia needed a touch more visual weight relative to the rest of
   the row. Kept as their own classes rather than resizing .logo-mid /
   .logo-mark so Talk Concrete and Management Forum Starnberg (which
   read fine already) aren't affected. */
.logo-wall-flat img.logo-bfb { height: 66px; }
.logo-wall-flat img.logo-fox { height: 63px; }
.logo-wall-flat img.logo-thalia { height: 82px; }
.logo-wall-flat img:hover { filter: grayscale(0%); opacity: 1; }
.logo-wall-flat a { display: inline-flex; align-items: center; border-radius: 4px; outline-offset: 4px; }
.logo-wall-flat a img { display: block; }
.logo-wall-flat a:hover img { filter: grayscale(0%); opacity: 1; transform: translateY(-2px); }
.logo-wall-flat a img { transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease; }
.logo-wall-flat a:focus-visible { outline: 2px solid var(--accent); }
.mbs-lockup-logo-link { display: inline-flex; border-radius: 6px; outline-offset: 6px; transition: opacity 0.25s ease; }
.mbs-lockup-logo-link:hover { opacity: 0.82; }
.mbs-lockup-logo-link:focus-visible { outline: 2px solid var(--accent); }
@media (max-width: 640px) {
  .logo-wall-flat { gap: 28px 36px; }
  .logo-wall-flat img { height: 34px; max-width: 130px; }
  .logo-wall-flat img.logo-mark { height: 56px; }
  .logo-wall-flat img.logo-mid { height: 42px; }
  .logo-wall-flat img.logo-bfb { height: 50px; }
  .logo-wall-flat img.logo-fox { height: 48px; }
  .logo-wall-flat img.logo-thalia { height: 62px; }
}

/* (legacy .trust-chip removed — replaced by .hero-cert-badge / .hero-stat-badge above) */

/* ---------- Kooperationspartner ---------- */
.coop { padding: 96px 32px 84px; background: var(--bg); border-top: 1px solid var(--line); }
.coop-inner { max-width: 1040px; margin: 0 auto; text-align: center; }
.coop-eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.coop h2 { margin-top: 14px; font-size: clamp(28px, 4vw, 44px); }
.coop-intro {
  margin: 18px auto 0; max-width: 620px; font-size: 16.5px; line-height: 1.55;
  /* Round 47 already made this bigger and moved it above the logos, but
     it still read as regular body copy - not different enough from the
     paragraphs around it to land as a credibility statement. Round 48:
     push it to genuinely bold black (700, var(--ink)) rather than
     bigger, per explicit feedback ("fettes Schwarz"). */
  font-weight: 700;
  color: var(--ink);
}

.mbs-lockup {
  margin-top: 56px;
  display: flex;
  align-items: center;
  gap: 36px;
  text-align: left;
}
.mbs-lockup-logo {
  flex-shrink: 0;
  height: 76px;
  width: auto;
  object-fit: contain;
}
.mbs-lockup-copy {}
.mbs-lockup-tag { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.mbs-lockup-copy h3 { margin-top: 10px; font-size: clamp(22px, 2.6vw, 28px); color: var(--ink); letter-spacing: -0.02em; }
.mbs-lockup-copy p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); max-width: 480px; }

/* Round 47: this used to be a small gray caption sitting *after* the
   logo wall (13px, --ink-faint) — real people David shared the link
   with missed it entirely and didn't realize the logos were live links
   to real partner pages. Promoted to a proper section label + a
   legible, dark sentence positioned *above* the logos instead, so it
   reads as real content (setting up what's below) rather than fine
   print (explaining what already happened). */
.coop-partners-head {
  margin-top: 52px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.coop-grid-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}
.coop-partners-note {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (max-width: 700px) {
  .mbs-lockup { flex-direction: column; text-align: center; gap: 20px; }
  .mbs-lockup-copy p { margin-left: auto; margin-right: auto; }
}

/* Centered single-column variant (round 13, homepage) — tighter, more
   elegant presentation than the left-aligned lockup used elsewhere. */
.mbs-lockup-centered {
  flex-direction: column;
  text-align: center;
  gap: 22px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.mbs-lockup-centered .mbs-lockup-logo { height: 84px; }
.mbs-lockup-centered .mbs-lockup-copy p { margin-left: auto; margin-right: auto; }

/* Certified-by lockup reused on Programm page (near header) — unframed:
   just the logo and a small authenticity caption, no card/border/background. */
.mbs-badge-block { padding: 24px 32px 68px; display: flex; justify-content: center; }
.mbs-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  max-width: 440px;
}
.mbs-badge-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.mbs-badge-logo { height: 76px; width: auto; max-width: 260px; object-fit: contain; }
.mbs-badge-note { font-size: 12.5px; font-weight: 500; color: var(--ink-faint); line-height: 1.5; max-width: 340px; }
@media (max-width: 600px) {
  .mbs-badge-logo { height: 60px; }
}

/* ---------- CTA ---------- */
.cta {
  position: relative;
  overflow: hidden;
  padding: 170px 32px;
  text-align: center;
}
.cta::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 900px; height: 560px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.07), transparent 72%);
  pointer-events: none;
}
.cta > * { position: relative; z-index: 1; }
.cta h2 { font-size: clamp(28px, 4.6vw, 48px); }
.cta p { margin-top: 16px; font-size: 16.5px; color: var(--ink-soft); }
.cta .btn { margin-top: 34px; }
.cta-note { margin-top: 16px; font-size: 13px; color: var(--ink-faint); }
.cta-alt { margin-top: 24px; font-size: 14px; color: var(--ink-faint); }
.cta-alt a { font-weight: 600; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.cta-alt a:hover { color: var(--accent); }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 56px 32px 32px; }
.footer-inner { max-width: 1220px; margin: 0 auto; }
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 32px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--line-soft);
}
.footer-brand .footer-logo { display: flex; align-items: center; font-weight: 600; font-size: 15px; color: var(--ink); }
.footer-brand p { margin-top: 14px; font-size: 13.5px; line-height: 1.6; color: var(--ink-faint); max-width: 220px; }
.footer-brand p.footer-partners { margin-top: 10px; font-size: 11px; line-height: 1.55; letter-spacing: 0.02em; opacity: 0.72; max-width: 240px; }
.footer-col-title { font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); margin: 0; }
.footer-col ul { margin-top: 16px; display: flex; flex-direction: column; gap: 11px; }
.footer-col a { font-size: 13.5px; color: var(--ink-soft); transition: color 0.2s ease; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  padding-top: 24px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 13px; color: var(--ink-faint);
}
@media (max-width: 860px) {
  .footer-top { grid-template-columns: repeat(2, 1fr); }
  .footer-brand { grid-column: 1 / 3; }
}
@media (max-width: 480px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-brand { grid-column: 1; }
}

/* ============================================================
   JOURNEY PAGE — the 12-stage interactive centerpiece
   ============================================================ */
.journey-app {
  padding: 20px 32px 160px;
}
.journey-app-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 40px;
  align-items: flex-start;
}

.journey-nav {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg);
}
.journey-nav-progress {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-faint);
}
.journey-nav-progress-bar {
  margin: 0 20px 16px;
  height: 3px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}
.journey-nav-progress-fill {
  position: relative;
  height: 100%;
  width: 8.33%;
  background: linear-gradient(90deg, var(--accent-bright), var(--accent));
  border-radius: 3px;
  box-shadow: 0 0 12px 1px rgba(var(--accent-rgb), 0.45);
  transition: width 0.6s var(--ease-spring);
}
.journey-tablist {
  display: flex;
  flex-direction: column;
  max-height: 520px;
  overflow-y: auto;
}
.journey-tab {
  appearance: none;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 20px;
  color: var(--ink-soft);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.journey-tab:hover { background: var(--bg-soft); color: var(--ink); }
.journey-tab .jt-num { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-faint); flex-shrink: 0; width: 18px; }
.journey-tab .jt-title { font-size: 14.5px; font-weight: 500; }
.journey-tab[aria-selected="true"] {
  background: var(--accent-dim);
  border-left-color: var(--accent);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(var(--accent-rgb), 0.06);
}
.journey-tab[aria-selected="true"] .jt-num { color: var(--accent); }
.journey-tab[aria-selected="true"] .jt-title { font-weight: 600; }

.journey-detail {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 56px;
  min-height: 480px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, #fff 0%, var(--bg-soft) 130%);
  box-shadow: 0 40px 80px -50px rgba(12, 12, 13, 0.25);
}
.journey-detail::before {
  content: "";
  position: absolute;
  top: -20%; right: -8%;
  width: 360px; height: 360px;
  background: radial-gradient(closest-side, var(--accent-dim), transparent 72%);
  pointer-events: none;
}
.journey-detail-content {
  position: relative;
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);
}
.journey-detail-content.jd-enter-next { opacity: 0; transform: translateX(18px); }
.journey-detail-content.jd-enter-prev { opacity: 0; transform: translateX(-18px); }

.jd-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-faint);
}
.jd-kicker .jd-num-badge {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(155deg, #17171a, var(--ink) 60%, #24121a);
  box-shadow: 0 0 0 4px var(--accent-dim), 0 8px 16px -6px rgba(var(--accent-rgb), 0.35);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.jd-title {
  margin-top: 22px;
  font-size: clamp(28px, 3.6vw, 40px);
  letter-spacing: -0.02em;
}
.jd-hook {
  margin-top: 20px;
  font-size: 19px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--ink);
  max-width: 620px;
  padding-left: 18px;
  border-left: 3px solid var(--accent);
}
.jd-audience {
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-faint);
  max-width: 600px;
}
.jd-audience-label {
  font-weight: 600;
  color: var(--ink-soft);
}
.jd-bullets {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 24px;
}
.jd-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  padding: 14px 16px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
}
.jd-bullets li svg { flex-shrink: 0; margin-top: 3px; color: var(--accent); }

.journey-detail-footer {
  position: relative;
  z-index: 1;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.jd-nav-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 11px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.25s ease, transform 0.25s var(--ease), background 0.25s ease, color 0.25s ease;
}
.jd-nav-btn:hover:not(:disabled) { border-color: var(--ink); transform: translateY(-1px); }
.jd-nav-btn:active:not(:disabled) { transform: translateY(0) scale(0.97); }
.jd-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.jd-nav-btn.jd-next { background: var(--ink); color: #fff; border-color: var(--ink); }
.jd-nav-btn.jd-next:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
.jd-progress-text { font-size: 13px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

@media (max-width: 1000px) {
  .journey-app-inner { grid-template-columns: 1fr; }
  .journey-nav { position: static; }
  .journey-tablist {
    flex-direction: row;
    max-height: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .journey-tab {
    flex-shrink: 0;
    scroll-snap-align: start;
    border-left: none;
    border-bottom: 3px solid transparent;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }
  .journey-tab[aria-selected="true"] { border-left: none; border-bottom-color: var(--accent); }
  .journey-detail { padding: 36px 28px; }
  .jd-bullets { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .journey-detail-footer { flex-wrap: wrap; }
  .jd-hook { font-size: 17px; }
}

/* Journey page header micro-progress ring (page header addon) */
.journey-meta-strip {
  max-width: 1180px;
  margin: 0 auto 48px;
  padding: 0 32px;
  display: flex;
  justify-content: center;
  gap: 34px;
  flex-wrap: wrap;
}
.journey-meta-item { text-align: center; }
.journey-meta-value { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.journey-meta-label { margin-top: 4px; font-size: 12.5px; color: var(--ink-faint); }

/* ============================================================
   REFERENCES PAGE — featured + progressive disclosure
   ============================================================ */
.ref-featured { padding: 20px 32px 24px; }
.ref-featured-inner { max-width: 1120px; margin: 0 auto; }
.ref-featured h2 { font-size: clamp(24px, 3.2vw, 34px); text-align: center; }
.ref-featured-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.ref-card {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.ref-card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -20px rgba(12,12,13,0.25); }
.ref-card img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) { .ref-featured-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .ref-featured-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Pull quote ---------- */
.pull-quote { padding: 80px 32px 150px; }
.pull-quote-inner {
  max-width: 780px; margin: 0 auto; text-align: center;
}
.pull-quote blockquote {
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.45; font-weight: 500; letter-spacing: -0.015em;
  color: var(--ink);
}
.pull-quote footer { margin-top: 24px; font-size: 14.5px; font-weight: 600; color: var(--ink-soft); }
.pull-quote footer span { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--ink-faint); }

/* ---------- Value cards (Unternehmen page) ---------- */
.value-cards { padding: 20px 32px 150px; }
.value-cards-inner { max-width: 1120px; margin: 0 auto; }
.value-cards-head { max-width: 640px; }
.value-cards-head h2 { font-size: clamp(26px, 3.4vw, 38px); }
.value-cards-head p { margin-top: 16px; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); }
.value-grid {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.value-card {
  position: relative;
  overflow: hidden;
  padding: 36px 30px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, #fbfbfc 0%, var(--bg-soft) 65%);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s ease;
}
.value-card::before {
  content: "";
  position: absolute;
  top: -20px; left: -20px;
  width: 140px; height: 140px;
  background: radial-gradient(closest-side, var(--accent-dim), transparent 75%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.value-card:hover {
  transform: translateY(-4px);
  border-color: var(--line);
  box-shadow: 0 26px 50px -28px rgba(12, 12, 13, 0.25);
}
.value-card:hover::before { opacity: 1; }
.value-card > * { position: relative; z-index: 1; }
.value-card-num { font-size: 13px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.value-card h3 { margin-top: 18px; font-size: 20px; letter-spacing: -0.01em; }
.value-card p { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 860px) { .value-grid { grid-template-columns: 1fr; } }

/* ---------- Statement / big line ---------- */
.statement { padding: 30px 32px 20px; max-width: 900px; margin: 0 auto; text-align: center; }
.statement p { font-size: clamp(20px, 2.6vw, 28px); line-height: 1.5; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.statement .dim { color: var(--ink-soft); font-weight: 400; }

/* ============================================================
   FAQ (accordion — same interaction language as .stage-trigger)
   ============================================================ */
.faq { padding: 20px 32px 150px; background: var(--bg); }
.faq-inner { max-width: 780px; margin: 0 auto; padding-top: 64px; }
.faq h2 { font-size: clamp(28px, 4vw, 40px); text-align: center; }
.faq-intro { margin-top: 14px; text-align: center; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.faq-list { margin-top: 48px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-trigger {
  appearance: none;
  background: none;
  border: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 2px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--ink);
  transition: transform 0.15s ease;
}
.faq-trigger:active { transform: scale(0.997); }
.faq-q { font-size: 16.5px; font-weight: 600; letter-spacing: -0.005em; transition: color 0.25s ease; }
.faq-trigger:hover .faq-q { color: var(--accent); }
.faq-icon {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: #fff;
  display: flex; align-items: center; justify-content: center; color: var(--ink); flex-shrink: 0;
  transition: transform 0.35s var(--ease), background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.faq-trigger[aria-expanded="true"] .faq-icon { transform: rotate(45deg); background: var(--ink); border-color: var(--ink); color: #fff; }
.faq-trigger[aria-expanded="true"] .faq-q { color: var(--accent); }
.faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
.faq-panel.open { grid-template-rows: 1fr; }
.faq-panel-inner { overflow: hidden; }
.faq-panel-inner p { padding: 0 44px 26px 2px; font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); }
.faq-more { margin-top: 40px; text-align: center; font-size: 14.5px; font-weight: 600; }
.faq-more a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; }
.faq-more a:hover { color: var(--accent); }
@media (max-width: 600px) {
  .faq-inner { padding-top: 48px; }
  .faq-q { font-size: 15.5px; }
  .faq-panel-inner p { padding-right: 20px; }
}

/* ============================================================
   ERFOLGSGESCHICHTEN — stat hero, video testimonials, quote bento
   ============================================================ */
.story-stat { padding: 30px 32px 60px; text-align: center; }
.story-stat-inner { max-width: 700px; margin: 0 auto; }
.story-stat-value {
  display: block;
  font-size: clamp(64px, 12vw, 128px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(120deg, var(--ink) 25%, var(--accent) 115%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.story-stat-value span {
  font-size: 0.42em; font-weight: 600; letter-spacing: -0.02em;
  background: none; -webkit-text-fill-color: var(--ink-faint); color: var(--ink-faint);
}
.story-stat-label {
  display: block;
  margin-top: 18px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}
.story-stat-sub { margin-top: 16px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); max-width: 480px; margin-left: auto; margin-right: auto; }

.story-videos { padding: 90px 32px; background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.story-videos-inner { max-width: 1080px; margin: 0 auto; text-align: center; }
.story-videos h2 { font-size: clamp(26px, 3.6vw, 38px); }
.story-videos-inner > p { margin: 16px auto 0; max-width: 560px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }

.video-grid {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: left;
}
.video-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink);
  border: 1px solid var(--line);
}
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.video-play {
  appearance: none;
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  display: block;
  overflow: hidden;
}
.video-play img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease); }
.video-play:hover img { transform: scale(1.04); }
.video-play::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.35));
}
.video-play-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,0.94);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  transition: transform 0.3s var(--ease-spring), background 0.25s ease;
  z-index: 1;
}
.video-play:hover .video-play-icon { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
.video-frame iframe { width: 100%; height: 100%; border: none; display: block; }
.video-meta { padding: 18px 22px 22px; color: #fff; }
.video-meta h3 { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.video-meta p { margin-top: 3px; font-size: 13px; color: rgba(255,255,255,0.6); }

@media (max-width: 860px) { .video-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; } }

/* ============================================================
   STORY OUTCOMES — round 33: a dedicated "what actually happened
   after the course" feature, distinct from the short-quote wall
   below. Reuses the boxless numbered-list language already
   established on the homepage .outcomes section (round 16) rather
   than inventing a new card style, so the two "outcome" moments on
   the site (curriculum results vs. real participant results) read
   as a family. Facts (12 agents, AI Ambassador role, follower
   growth) are as supplied by David for these three named,
   already-verified participants - no numbers invented beyond that.
   ============================================================ */
.story-outcomes { padding: 100px 32px; background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.story-outcomes-inner { max-width: 1120px; margin: 0 auto; text-align: center; }
.story-outcomes h2 { font-size: clamp(26px, 3.6vw, 38px); }
.story-outcomes-inner > p { margin: 16px auto 0; max-width: 560px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.outcome-story-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 40px;
  text-align: left;
}
.outcome-story-grid-pair {
  grid-template-columns: repeat(2, 1fr);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.outcome-story-item {
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.outcome-story-num {
  display: block;
  font-size: 14px; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  margin-bottom: 18px;
}
.outcome-story-item h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.outcome-story-role { margin-top: 3px; font-size: 13.5px; color: var(--ink-faint); }
.outcome-story-result { margin-top: 16px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.outcome-story-detail { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 760px) {
  .outcome-story-grid { grid-template-columns: 1fr; gap: 32px; }
}

.story-quotes { padding: 130px 32px; }
.story-quotes-inner { max-width: 1120px; margin: 0 auto; }
.story-quotes h2 { font-size: clamp(28px, 4vw, 42px); text-align: center; }
.story-quotes-inner > p.story-quotes-sub { text-align: center; margin-top: 14px; color: var(--ink-soft); font-size: 16px; max-width: 480px; margin-left: auto; margin-right: auto; }

/* The testimonial wall is deliberately wider than the site's usual
   1120px reading column — it's a proof wall, not prose, and wants to
   use more of the page on large screens instead of leaving big dead
   margins either side. Heading/sub stay centered and narrow above it. */
.story-bento {
  margin-top: 56px;
  max-width: min(94vw, 2200px);
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  gap: 18px;
}
.story-item {
  /* .story-item is a <blockquote> - resetting margin here because the
     browser default UA stylesheet gives blockquote a 40px inline
     margin, which was silently padding out every card in the desktop
     grid (invisible bug, just read as slightly more whitespace) and
     broke the new mobile carousel outright (each card was appearing
     ~94px farther from the next than the intended 14px gap: 40px UA
     margin + 14px gap + 40px UA margin on the neighbor). */
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s ease;
}
.story-item:not(.story-item-featured):hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -28px rgba(12, 12, 13, 0.28);
}
.story-item > * { position: relative; z-index: 1; }
.story-item-featured {
  grid-column: 1 / 3;
  background: linear-gradient(155deg, #131315 0%, #0c0c0d 55%, #1a0a11 100%);
  color: #fff;
  justify-content: center;
}
.story-item-featured::before {
  content: "";
  position: absolute;
  top: -25%; right: -12%;
  width: 380px; height: 380px;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.3), transparent 70%);
  pointer-events: none;
}
.story-item-featured .story-stars { color: var(--accent-bright); }
.story-item-featured p { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.45; font-weight: 500; letter-spacing: -0.01em; }
.story-item-featured footer { color: rgba(255,255,255,0.6); }
.story-stars { color: var(--accent); font-size: 13px; letter-spacing: 2px; }
.story-item p { margin: 0; font-size: 15.5px; line-height: 1.55; color: inherit; }
.story-item footer { font-size: 13.5px; font-weight: 600; }
.story-item footer span { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--ink-faint); }

/* Bento breakout — a handful of cards span 2 columns and sit at bigger
   type scale, so the list breaks its own rhythm left/right instead of
   reading as one uniform column of identical boxes. Kept on the light
   --bg-soft ground (not dark) so the single dark accent card stays the
   one bold moment on the page. */
.story-item-wide {
  grid-column: span 2;
  padding: 44px 52px;
}
.story-item-wide p { font-size: clamp(19px, 2.1vw, 23px); line-height: 1.5; font-weight: 500; letter-spacing: -0.015em; }
.story-item-wide-r { grid-column: 3 / span 2; }

@media (max-width: 1080px) {
  .story-bento { grid-template-columns: repeat(2, 1fr); }
  .story-item-wide-r { grid-column: span 2; }
}
@media (max-width: 620px) {
  /* Round 47 fixed the bug where the reveal-on-scroll IntersectionObserver
     never fired on mobile, so all ~17 testimonials were invisible (opacity
     stuck at 0). They all render now - but stacking all 17 as one long
     single-column scroll is still the wrong mobile pattern for a proof
     wall on its own merits, independent of that bug: nobody reads 17
     quotes top to bottom on a phone. Round 48: redesigned as a
     horizontally swipeable, snap-scrolling carousel instead (the
     Apple/Stripe-style mobile proof-wall pattern) - same 17 cards, same
     content and order, just browsed sideways at a glance instead of an
     endless vertical scroll. Full-bleed to the viewport edge with each
     card sized so the next one visibly peeks in from the right; that
     peek is the scroll affordance, no extra "swipe" hint UI needed.
     Desktop's bento grid above 620px is untouched. */
  .story-bento {
    display: flex;
    grid-template-columns: none;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 4px 20px 14px;
    overflow-x: auto;
    overflow-anchor: none;
    scroll-snap-type: x proximity;
    scroll-padding-left: 20px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    gap: 14px;
  }
  .story-bento::-webkit-scrollbar { display: none; }
  .story-bento > .story-item {
    grid-column: unset;
    flex: 0 0 78vw;
    max-width: 340px;
    scroll-snap-align: start;
    padding: 26px 24px;
  }
}

/* ============================================================
   REFERENCES MARQUEE (replaces the old click-to-expand grid)
   ============================================================ */
.ref-marquee-section { padding: 10px 0 150px; overflow: hidden; }
.ref-marquee-label {
  max-width: 1120px; margin: 0 auto 40px; padding: 0 32px; text-align: center;
  font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint);
}
.ref-marquee-rows { display: flex; flex-direction: column; gap: 22px; }
.ref-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.ref-marquee-track {
  display: flex;
  align-items: center;
  gap: 20px;
  width: max-content;
  padding: 6px 28px;
  animation: ref-scroll 58s linear infinite;
}
.ref-marquee-track.ref-marquee-track-reverse {
  animation-name: ref-scroll-reverse;
  animation-duration: 72s;
}
.ref-marquee:hover .ref-marquee-track { animation-play-state: paused; }

/* Each logo gets real visual weight — a bordered, shadowed card, matching
   the depth language of the featured grid above instead of a bare wordmark. */
.ref-marquee-card {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 108px;
  width: 168px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: #fff;
  padding: 14px 22px;
  box-shadow: 0 18px 32px -24px rgba(12, 12, 13, 0.2);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.3s ease;
}
.ref-marquee-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 44px -20px rgba(12, 12, 13, 0.28);
  border-color: var(--line);
}
/* Round 29: logos are auto-cropped to their true content bounding box
   (assets/references/marquee/, generated from the featured-grid source
   files, deterministic crop, no image generation) — the original PNGs
   sit on a uniform 383x383 canvas but the actual glyphs range from ~10%
   to ~58% of that canvas height, so a fixed CSS height made wordmark
   logos (Schaeffler, Novartis, Lufthansa...) render many times smaller
   than icon marks (BMW, Apple...) at the same box size. Cropping first
   means the same height now maps to comparable visual weight for all 27. */
.ref-marquee-card img {
  height: 56px; width: auto; max-width: 100%; object-fit: contain;
  filter: grayscale(100%); opacity: 0.6;
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.ref-marquee-card:hover img { filter: grayscale(0%); opacity: 1; }
@keyframes ref-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes ref-scroll-reverse {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ref-marquee-track { animation: none; }
}
@media (max-width: 640px) {
  .ref-marquee-rows { gap: 14px; }
  .ref-marquee-track { gap: 14px; }
  .ref-marquee-card { height: 84px; width: 130px; padding: 8px 14px; }
  .ref-marquee-card img { height: 44px; }
}

/* ============================================================
   QUOTE MARQUEE — rotating short testimonials, directly under the
   hook statement / format facts
   ============================================================ */
/* Round 19: embedded directly into .hook (dark photo panel) instead of
   its own light-grey section — the hard black-to-grey seam that used
   to sit right under the photo read as a "box" stacked underneath it.
   Living inside the same dark panel as the headline, separated only
   by a faint hairline, keeps it noticeable while reading as one
   continuous moment instead of a second stacked block. */
.quote-marquee.qm-on-dark {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  max-width: 560px;
}
.qm-viewport {
  display: grid;
  min-height: 96px;
  align-content: center;
}
.qm-quote {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  pointer-events: none;
}
.qm-quote.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.qm-quote p {
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.92);
}
.qm-quote footer {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
}
.qm-quote footer span { font-weight: 400; }
.qm-quote footer span::before { content: " · "; }
.qm-dots {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
}
.qm-dot {
  appearance: none;
  border: none;
  background: rgba(255, 255, 255, 0.25);
  width: 7px;
  height: 7px;
  border-radius: 4px;
  padding: 0;
  cursor: pointer;
  transition: width 0.35s var(--ease), background 0.3s ease;
}
.qm-dot.is-active { width: 22px; background: var(--accent); }
.qm-dot:hover { background: rgba(255, 255, 255, 0.5); }
.qm-more {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.25s ease;
}
.qm-more svg { transition: transform 0.3s var(--ease); }
.qm-more:hover { color: #fff; }
.qm-more:hover svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .qm-quote { transition: none; }
}
@media (max-width: 600px) {
  .quote-marquee.qm-on-dark { margin-top: 24px; padding-top: 20px; }
  .qm-viewport { min-height: 128px; }
}

/* ============================================================
   OUTCOMES — "3 concrete outcomes after 12 weeks"
   ============================================================ */
.outcomes { padding: 130px 32px 110px; }
.outcomes-inner { max-width: 1120px; margin: 0 auto; }
.outcomes-head { max-width: 640px; }
.outcomes-eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.outcomes-head h2 { margin-top: 14px; font-size: clamp(26px, 3.4vw, 38px); }
.outcomes-head p { margin-top: 16px; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); }
.outcomes-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 64px;
  row-gap: 0;
}
/* Round 16: boxless 2x2 grid — bare numbers + thin divider lines,
   now with BOTH a horizontal rule (between rows) and a vertical rule
   (between columns), matching the reference deck's divider
   convention. Still no card backgrounds — collapses to a single
   stacked column with only horizontal rules on mobile. */
.outcome-item {
  display: grid;
  grid-template-columns: 76px 1fr;
  grid-template-rows: auto auto;
  column-gap: 28px;
  padding: 36px 0;
  border-top: 1px solid var(--line);
}
.outcome-item:nth-child(even) {
  border-left: 1px solid var(--line);
  margin-left: -32px;
  padding-left: 32px;
}
.outcome-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
.outcome-num {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-size: 16px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; padding-top: 3px;
}
.outcome-item h3 { grid-column: 2; grid-row: 1; font-size: 21px; letter-spacing: -0.01em; line-height: 1.25; }
.outcome-item p { grid-column: 2; grid-row: 2; margin-top: 10px; font-size: 15px; line-height: 1.65; color: var(--ink-soft); max-width: 560px; }
@media (max-width: 760px) {
  .outcomes-grid { grid-template-columns: 1fr; }
  .outcome-item:nth-child(even) { border-left: none; margin-left: 0; padding-left: 0; }
  .outcome-item:nth-last-child(-n+2) { border-bottom: none; }
  .outcome-item:last-child { border-bottom: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .outcomes { padding-top: 90px; padding-bottom: 72px; }
  .outcome-item { grid-template-columns: 40px 1fr; column-gap: 16px; padding: 28px 0; }
  .outcome-num { font-size: 14px; }
}

.outcomes-close {
  margin: 26px auto 0;
  max-width: 640px;
  text-align: center;
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding-bottom: 8px;
}

/* ============================================================
   COHORTS — start dates / cohort urgency block
   ============================================================ */
.cohorts { padding: 112px 32px; }
.cohorts-card {
  max-width: 1120px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, #131315 0%, #0c0c0d 55%, #1a0a11 100%);
  color: #fff;
  padding: 64px 56px 56px;
  text-align: center;
}
.cohorts-card::before {
  content: "";
  position: absolute;
  top: -30%; left: 50%;
  width: 640px; height: 480px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.26), transparent 70%);
  pointer-events: none;
  animation: cohorts-glow 8s ease-in-out infinite;
}
@keyframes cohorts-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
  .cohorts-card::before { animation: none; }
}
.cohorts-card > * { position: relative; z-index: 1; }
.cohorts-eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-bright); }
.cohorts-card h2 { margin-top: 14px; font-size: clamp(26px, 3.6vw, 40px); color: #fff; max-width: 640px; margin-left: auto; margin-right: auto; }
.cohorts-sub { margin-top: 14px; font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,0.62); max-width: 520px; margin-left: auto; margin-right: auto; }

.cohorts-row {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  text-align: left;
}
.cohort-date-card, .cohort-seats {
  padding: 24px 22px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: border-color 0.3s ease, transform 0.3s var(--ease), background 0.3s ease;
}
.cohort-date-card:hover {
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.07);
  transform: translateY(-3px);
}
.cohort-date-season { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.cohort-date-day { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; color: #fff; white-space: nowrap; }
.cohort-seats { align-items: flex-start; justify-content: center; }
.cohort-seats-num {
  font-size: 30px; font-weight: 700; letter-spacing: -0.02em;
  background: linear-gradient(120deg, #fff 35%, var(--accent-bright) 140%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.cohort-seats-label { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.4; }

.cohorts-cta { margin-top: 40px; }
.cohorts-card .btn-primary {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 16px 40px -12px rgba(var(--accent-rgb), 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.cohorts-card .btn-primary svg { transition: transform 0.3s var(--ease); }
.cohorts-card .btn-primary:hover {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 20px 48px -12px rgba(var(--accent-rgb), 0.65), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.cohorts-card .btn-primary:hover svg { transform: translateX(3px); }
.cohorts-note { margin-top: 18px; font-size: 12.5px; color: rgba(255,255,255,0.45); }

@media (max-width: 980px) and (min-width: 781px) {
  .cohorts-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
  .cohorts { padding: 76px 24px; }
  .cohorts-card { padding: 48px 28px 40px; }
  .cohorts-row { grid-template-columns: 1fr; text-align: center; }
  .cohort-date-card, .cohort-seats { align-items: center; text-align: center; }
}

/* ============================================================
   MENTORS — uniform grid (round 7). Client explicitly asked for a
   perfectly uniform grid ("wie bei Apple") — every mentor card must
   be pixel-identical: same image ratio, same padding (zero), same
   background (none), same alignment. Do not reintroduce per-card
   background/padding/offset variety here.
   ============================================================ */

/* ============================================================
   ANCHOR STATS — real price/format facts, near the program section
   ============================================================ */
.anchor-stats { padding: 130px 32px 100px; }
.anchor-stats-inner { max-width: 1120px; margin: 0 auto; }
.anchor-stats-head { max-width: 640px; margin: 0 auto; text-align: center; }
.anchor-stats-eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.anchor-stats-head h2 { margin-top: 14px; font-size: clamp(26px, 3.4vw, 38px); }

.anchor-stats-grid {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.anchor-stat {
  padding: 30px 26px;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  text-align: left;
}
.anchor-stat:nth-child(3n+1) { border-left: none; }
.anchor-stat:nth-child(-n+3) { border-top: none; }
.anchor-stat-value { display: block; font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; letter-spacing: -0.02em; }
.anchor-stat-label { display: block; margin-top: 8px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }

@media (max-width: 860px) {
  .anchor-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .anchor-stat:nth-child(3n+1) { border-left: 1px solid var(--line); }
  .anchor-stat:nth-child(odd) { border-left: none; }
  .anchor-stat:nth-child(-n+3) { border-top: 1px solid var(--line); }
  .anchor-stat:nth-child(-n+2) { border-top: none; }
}
@media (max-width: 560px) {
  .anchor-stats { padding-top: 90px; }
  .anchor-stats-grid { grid-template-columns: 1fr; }
  .anchor-stat { border-left: none !important; text-align: center; }
  .anchor-stat:nth-child(n) { border-top: 1px solid var(--line); }
  .anchor-stat:first-child { border-top: none; }
}

/* ============================================================
   MENTORS — trust-badge strip below the homepage teaser
   ============================================================ */
.mentors-trust-strip {
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}
.mentors-trust-strip span:not(.mts-dot) {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
}
.mts-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ink-faint);
  flex-shrink: 0;
}
@media (max-width: 640px) { .mts-dot { display: none; } }

/* ============================================================
   HOOK — foundational mission statement, directly after the format
   facts block and before the quote marquee / outcomes (frames the
   page before diving into outcomes, journey, and mentor content)
   ============================================================ */
.hook { padding: 96px 0; }
.hook-inner { padding: 0 32px; }
.hook-inner-col { max-width: 1120px; margin: 0 auto; text-align: left; }
.hook-inner h2 {
  font-size: clamp(34px, 5.6vw, 60px);
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.hook-accent { color: var(--accent); }
.hook-eyebrow {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.55);
}
.hook-lede {
  margin-top: 16px;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: #fff;
  max-width: 640px;
}
@media (max-width: 600px) {
  .hook { padding: 64px 0; }
  .hook-inner { padding: 0 24px; }
}

/* ============================================================
   NEXT STEP — 3-CTA section before the final footer CTA
   ============================================================ */
.next-step { padding: 0 32px 140px; }
.next-step-inner { max-width: 1120px; margin: 0 auto; }
.next-step-head { max-width: 620px; }
.next-step-head h2 { font-size: clamp(26px, 3.4vw, 38px); }
.next-step-head p { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }

.next-step-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.next-step-card {
  padding: 38px 32px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, #fbfbfc 0%, var(--bg-soft) 65%);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.next-step-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -28px rgba(12, 12, 13, 0.22); }
.next-step-card h3 { font-size: 19.5px; letter-spacing: -0.01em; }
.next-step-card p { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); flex-grow: 1; }
.next-step-card .btn { margin-top: 24px; align-self: flex-start; }
.next-step-card-primary {
  background: linear-gradient(165deg, #131315 0%, #0c0c0d 55%, #1a0a11 100%);
  border-color: var(--ink);
  color: #fff;
}
.next-step-card-primary h3 { color: #fff; }
.next-step-card-primary p { color: rgba(255, 255, 255, 0.68); }

@media (max-width: 860px) { .next-step-grid { grid-template-columns: 1fr; } }

/* ============================================================
   FOOTER SOCIAL LINKS
   ============================================================ */
.footer-bottom { flex-wrap: wrap; }
.social-links { display: flex; align-items: center; gap: 14px; }
.social-link {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s var(--ease);
}
.social-link:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.social-link svg { width: 15px; height: 15px; }

/* ============================================================
   GUIDED QUALIFIER WIDGET — floating, client-side only
   ============================================================ */
.qw {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 300;
}
.qw-fab {
  appearance: none;
  border: none;
  cursor: pointer;
  width: 56px; height: 56px;
  border-radius: 18px;
  background: var(--ink);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 18px 36px -14px rgba(12, 12, 13, 0.45);
  transition: background 0.25s ease, transform 0.3s var(--ease-spring), box-shadow 0.3s ease;
}
.qw-fab:hover { background: var(--accent); transform: translateY(-2px) scale(1.04); }
.qw-fab:active { transform: translateY(0) scale(0.96); }
.qw-fab svg { transition: transform 0.35s var(--ease-spring); }
.qw.qw-open .qw-fab svg.qw-icon-open { transform: rotate(90deg) scale(0); opacity: 0; }
.qw-fab svg.qw-icon-close { position: absolute; opacity: 0; transform: rotate(-90deg) scale(0); }
.qw.qw-open .qw-fab svg.qw-icon-close { opacity: 1; transform: rotate(0) scale(1); }
.qw.qw-open .qw-fab svg.qw-icon-open { position: absolute; }

.qw-panel {
  position: absolute;
  right: 0;
  bottom: 68px;
  width: 340px;
  max-width: calc(100vw - 44px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 40px 80px -30px rgba(12, 12, 13, 0.4);
  overflow: hidden;
  transform-origin: bottom right;
  opacity: 0;
  transform: scale(0.92) translateY(10px);
  pointer-events: none;
  transition: opacity 0.3s var(--ease-spring), transform 0.3s var(--ease-spring);
}
.qw.qw-open .qw-panel { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }

.qw-header {
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
}
.qw-header-title { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.qw-header-sub { margin-top: 2px; font-size: 12px; color: var(--ink-faint); }
.qw-progress { display: flex; gap: 5px; margin-top: 4px; }
.qw-progress-dot { width: 16px; height: 3px; border-radius: 3px; background: var(--line); transition: background 0.3s ease; }
.qw-progress-dot.is-done { background: var(--accent); }

.qw-body { padding: 20px 22px 22px; min-height: 168px; }
.qw-step-q { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; }
.qw-options { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.qw-option {
  appearance: none; text-align: left; font-family: inherit;
  padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--bg-soft);
  font-size: 13.5px; font-weight: 500; color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s var(--ease);
}
.qw-option:hover { border-color: var(--accent); background: var(--accent-dim); transform: translateX(2px); }

.qw-back {
  appearance: none; border: none; background: none; cursor: pointer;
  margin-top: 16px; font-size: 12.5px; font-weight: 600; color: var(--ink-faint);
  display: inline-flex; align-items: center; gap: 5px; font-family: inherit;
  padding: 0;
}
.qw-back:hover { color: var(--ink); }

.qw-result-tag { font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); }
.qw-result-text { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.qw-result-cta {
  margin-top: 18px; display: inline-flex; width: 100%; justify-content: center;
  padding: 12px 18px; border-radius: var(--radius-pill);
  background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 600;
  transition: background 0.25s ease, transform 0.25s var(--ease);
}
.qw-result-cta:hover { background: var(--accent); transform: translateY(-1px); }
.qw-restart {
  margin-top: 12px; width: 100%; text-align: center; appearance: none; border: none; background: none;
  font-family: inherit; font-size: 12px; color: var(--ink-faint); cursor: pointer; padding: 4px;
}
.qw-restart:hover { color: var(--ink-soft); }

@media (max-width: 480px) {
  .qw { right: 14px; bottom: 14px; }
  .qw-panel { width: calc(100vw - 28px); right: -6px; }
}
@media (prefers-reduced-motion: reduce) {
  .qw-panel, .qw-fab, .qw-fab svg { transition: none; }
}

/* ============================================================
   PHOTOGRAPHY — real workshop photography (round 9). Restrained,
   black-and-white editorial accents only. Do not add more without
   a clear reason — this design intentionally uses very few photos.
   ============================================================ */

/* Full-bleed feature band with caption, used once after "outcomes" */
.photo-feature {
  position: relative;
  width: 100%;
  /* Round 31: round 30's fixed 760px cap re-triggered the documented
     "wide-viewport crop bug class" - object-fit: cover scales with the
     viewport width (~0.72x, the image's own aspect ratio) while a
     px-capped box height doesn't, so past ~1400px wide the gap between
     the two keeps growing and the effective top-crop grows right along
     with it. Cap raised further and the vw factor bumped so box height
     keeps pace with the image's own scaling for longer. */
  /* Round 47: at the 1440-1512px laptop widths most visitors actually
     use, 57vw (~825-861px) was hugging the 830px cap almost immediately
     — the "big screen" ceiling was effectively also the laptop size, so
     this full-bleed photo band ate ~85% of a MacBook Pro's viewport
     height for one decorative image. Lower vw factor + cap keeps it a
     generous but proportionate ~500-530px at 1440-1512px, still scaling
     up gently for genuinely large/wide displays. */
  height: clamp(420px, 35vw, 620px);
  margin-top: 64px;
  overflow: hidden;
}
.photo-feature picture,
.photo-feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Round 31: 22% (was 30% in round 28) - trims less off the top of the
     frame so there's headroom above both heads at any viewport width;
     there's ample floor/legs below to absorb the extra bottom crop. */
  object-position: 50% 22%;
  filter: grayscale(1) contrast(0.97) brightness(1.02);
}
.photo-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 12, 13, 0) 35%, rgba(12, 12, 13, 0.8) 100%);
  pointer-events: none;
}
.photo-feature-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 0 32px 56px;
  color: #fff;
}
.photo-feature-caption-inner { max-width: 1120px; margin: 0 auto; }
.photo-feature-rule {
  display: block;
  width: 32px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  margin-bottom: 18px;
}
.photo-feature-line {
  max-width: 680px;
  font-size: clamp(20px, 3.1vw, 32px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.3;
}
@media (max-width: 600px) {
  .photo-feature { margin-top: 44px; height: clamp(340px, 92vw, 460px); }
  .photo-feature-caption { padding: 0 24px 30px; }
  /* Round 29: at narrow/tall mobile ratios this crop is height-driven
     (object-fit: cover has zero vertical overflow to work with), so the
     handshake's head sits close enough to the very top of the section
     that it reads as cut off right as the fixed nav bar scrolls over it.
     A small top-anchored zoom pushes the head down a bit for clearance
     without meaningfully losing the sides. */
  .photo-feature img { transform: scale(1.25); transform-origin: 50% 0%; }
}

/* Slim full-bleed divider band, no caption — a quiet visual pause
   between "reise" and "mentoren" */
.divider-photo {
  position: relative;
  width: 100%;
  /* Round 31: same wide-viewport fix as .photo-feature above.
     Round 47: same 1440-1512px recalibration as .photo-feature — was
     hitting its 800px cap almost as soon as the primary laptop-width
     target began. */
  height: clamp(320px, 27vw, 560px);
  overflow: hidden;
}
.divider-photo picture,
.divider-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  filter: grayscale(1) contrast(0.96) brightness(1.02);
}

/* Hook section — photo as texture/depth behind the emotional statement.
   Full-bleed with its own dark overlay, so it reads as a clean break
   regardless of what precedes/follows it. */
.hook {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Round 19: section height was purely text-content-driven (padding +
     heading line count), while the photo behind it fills 100% width —
     on very wide screens (iMac-class, 2500px+) the image's covered
     area grew far wider than tall, so object-fit:cover exposed a much
     thinner vertical slice of the source photo and cropped into the
     subject's face. min-height now scales with viewport width so the
     visible crop window stays proportionally consistent at any size. */
  min-height: clamp(380px, 32vw, 680px);
}
.hook-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hook-media picture,
.hook-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  filter: grayscale(1) contrast(1.05);
}
.hook-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 50% 32%, rgba(12, 12, 13, 0.55) 0%, rgba(12, 12, 13, 0.9) 68%, rgba(12, 12, 13, 0.96) 100%);
}
.hook-inner { position: relative; z-index: 1; }
.hook-inner h2 { color: #fff; }

/* ============================================================
   FEATURE — two-column highlight (Unternehmen page): kicker +
   heading + copy + checklist, paired with a restrained pulsing-
   ring visual. No card background — matches the boxless language
   used elsewhere; the pulse is the only accent motion, echoing
   the cohorts-glow / hero-orb pulse already established on the
   site. Round 21 audit finding: this markup previously had zero
   matching CSS anywhere in the file and rendered as unstyled,
   near-invisible plain text — this block fixes that.
   ============================================================ */
.features { padding: 30px 32px 150px; }
.feature {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 72px;
  align-items: center;
}
.feature-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.f-card {
  position: relative;
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.f-pulse-core {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-dim);
}
.f-pulse-ring {
  position: absolute;
  inset: 0;
}
.f-pulse-ring::before,
.f-pulse-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--accent-dim-2);
  animation: f-pulse 3.6s var(--ease) infinite;
}
.f-pulse-ring::after { animation-delay: 1.8s; }
@keyframes f-pulse {
  0% { transform: scale(0.22); opacity: 0.9; }
  85%, 100% { transform: scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .f-pulse-ring::before, .f-pulse-ring::after { animation: none; opacity: 0; }
}
.feature-kicker {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.feature-copy h2 { margin-top: 14px; font-size: clamp(26px, 3.4vw, 38px); }
.feature-copy > p { margin-top: 16px; font-size: 16.5px; line-height: 1.65; color: var(--ink-soft); max-width: 560px; }
.feature-copy ul { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.feature-copy li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.feature-copy li svg { flex-shrink: 0; margin-top: 3px; color: var(--accent); }

@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .feature-visual { order: -1; }
  .feature-copy > p, .feature-copy ul { margin-left: auto; margin-right: auto; }
  .feature-copy li { text-align: left; }
}
@media (max-width: 480px) {
  .f-card { width: 180px; height: 180px; }
}

/* ============================================================
   BLOG
   ============================================================ */

/* -- Index: list of post cards -- */
.blog-list-section { padding: 0 32px 120px; }
.blog-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.blog-card {
  padding: 40px 0;
  border-bottom: 1px solid var(--line-soft);
}
.blog-list .blog-card:first-child { padding-top: 0; }
.blog-card-meta {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
}
.blog-card-meta span { color: var(--accent); text-transform: uppercase; }
.blog-card h2 { margin-top: 12px; font-size: clamp(21px, 2.6vw, 27px); line-height: 1.25; }
.blog-card h2 a { color: var(--ink); transition: color 0.2s ease; }
.blog-card h2 a:hover { color: var(--accent); }
.blog-card-excerpt { margin-top: 12px; font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); max-width: 640px; }
.blog-card-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.blog-card-more span { transition: transform 0.25s var(--ease); }
.blog-card-more:hover span { transform: translateX(3px); }

/* -- Post header (extends .page-header) -- */
.blog-post-header h1 { max-width: 820px; }
.blog-post-standfirst { max-width: 620px; }
.blog-article-meta {
  position: relative;
  z-index: 1;
  margin-top: 24px !important;
  font-size: 12.5px !important;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-faint) !important;
  text-transform: uppercase;
}

/* -- Article body -- */
.blog-article {
  max-width: 700px;
  margin: 0 auto;
  padding: 8px 32px 120px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-soft);
}
.blog-article > p { margin-top: 22px; }
.blog-article > p:first-of-type { margin-top: 0; }
.blog-article h2 {
  margin-top: 52px;
  font-size: clamp(22px, 2.8vw, 27px);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.blog-article ul { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.blog-article li { padding-left: 22px; position: relative; }
.blog-article li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.blog-article strong { color: var(--ink); font-weight: 600; }
.blog-article em { color: var(--ink); }

.blog-cta-box {
  margin-top: 56px;
  padding: 36px;
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  text-align: center;
}
.blog-cta-box h3 { font-size: 21px; color: var(--ink); }
.blog-cta-box p { margin-top: 10px; font-size: 15px; line-height: 1.6; max-width: 440px; margin-left: auto; margin-right: auto; }
.blog-cta-box .btn { margin-top: 22px; }
.blog-cta-box .btn + .btn { margin-left: 12px; }

.blog-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 48px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
}
.blog-back:hover { color: var(--accent); }

@media (max-width: 600px) {
  .blog-list-section { padding: 0 24px 90px; }
  .blog-article { padding: 8px 24px 90px; font-size: 16px; }
  .blog-cta-box { padding: 28px 22px; }
  .blog-cta-box .btn { display: block; width: 100%; }
  .blog-cta-box .btn + .btn { margin-left: 0; margin-top: 12px; }
}

.blog-archive-label {
  max-width: 760px;
  margin: 12px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.blog-list-archive { margin-top: 4px; }

/* -- Overview: card grid with media (Round: blog migration) -- */
.blog-grid-section { padding: 0 32px 130px; }
.blog-grid-inner { max-width: 1180px; margin: 0 auto; }
.blog-year-group { margin-top: 64px; }
.blog-year-group:first-child { margin-top: 0; }
.blog-year-label {
  display: flex; align-items: center; gap: 16px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 28px;
}
.blog-year-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
}
.blog-grid.blog-grid-related { grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-tile {
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s ease;
}
.blog-tile:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -22px rgba(12,12,13,0.22); border-color: var(--line-soft); }
.blog-tile-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(155deg, #fbfbfc 0%, var(--bg-soft-2) 70%);
}
.blog-tile-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.blog-tile:hover .blog-tile-media img { transform: scale(1.045); }
.blog-tile-media.no-image { display: flex; align-items: flex-end; padding: 20px; }
.blog-tile-media.no-image::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 22%, var(--accent-dim) 0%, transparent 45%),
    linear-gradient(155deg, #fbfbfc 0%, var(--bg-soft-2) 75%);
}
.blog-tile-mark {
  position: relative; z-index: 1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 64px; line-height: 1; color: var(--accent-dim-2);
  font-style: italic;
}
.blog-tile-body { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.blog-tile-meta { font-size: 12px; font-weight: 600; letter-spacing: 0.03em; color: var(--ink-faint); }
.blog-tile-meta span { color: var(--accent); text-transform: uppercase; }
.blog-tile-body h3 { font-size: 17.5px; line-height: 1.35; letter-spacing: -0.01em; }
.blog-tile-body h3 a { color: var(--ink); transition: color 0.2s ease; }
.blog-tile-body h3 a:hover { color: var(--accent); }
.blog-tile-excerpt { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-tile-more { margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 5px; }
.blog-tile-more span { transition: transform 0.25s var(--ease); }
.blog-tile:hover .blog-tile-more span { transform: translateX(3px); }

@media (max-width: 980px) {
  .blog-grid, .blog-grid.blog-grid-related { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .blog-grid-section { padding: 0 20px 90px; }
  .blog-grid, .blog-grid.blog-grid-related { grid-template-columns: 1fr; gap: 20px; }
  .blog-year-group { margin-top: 48px; }
}

/* -- Post page: hero media -- */
.blog-hero-media {
  max-width: 820px; margin: 36px auto 0; padding: 0 32px;
}
.blog-hero-media-inner {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(155deg, #fbfbfc 0%, var(--bg-soft-2) 70%);
}
.blog-hero-media-inner img { width: 100%; height: 100%; object-fit: cover; }
.blog-hero-media-inner iframe, .blog-hero-media-inner video { width: 100%; height: 100%; border: 0; object-fit: cover; background: #000; }
.blog-hero-media-inner.no-image { display: flex; align-items: flex-end; padding: 28px 32px; }
.blog-hero-media-inner.no-image::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 15% 20%, var(--accent-dim) 0%, transparent 50%),
    linear-gradient(155deg, #fbfbfc 0%, var(--bg-soft-2) 78%);
}
.blog-hero-media-inner .blog-tile-mark { font-size: 96px; }
@media (max-width: 600px) {
  .blog-hero-media { padding: 0 24px; margin-top: 28px; }
}

/* -- Post page: article inline images -- */
.blog-article img { width: 100%; height: auto; border-radius: var(--radius-md); margin: 8px 0; display: block; }
.blog-article figure { margin: 32px 0; }
.blog-article iframe.blog-video-embed { width: 100%; aspect-ratio: 16/9; border-radius: var(--radius-md); border: none; margin: 32px 0; }
.blog-article video.blog-video-embed { width: 100%; border-radius: var(--radius-md); margin: 32px 0; }

/* -- Post page: author box -- */
.blog-author-box {
  max-width: 700px; margin: 40px auto 0; padding: 20px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.blog-author-id { display: flex; align-items: center; gap: 14px; }
.blog-author-photo {
  width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: var(--bg-soft-2);
}
.blog-author-photo img { width: 100%; height: 100%; object-fit: cover; }
.blog-author-name { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.blog-author-role { margin-top: 2px; font-size: 12.5px; color: var(--ink-faint); }
.blog-author-meta { font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-faint); text-transform: uppercase; text-align: right; }

/* -- Post page: share row -- */
.blog-share-row {
  max-width: 700px; margin: 44px auto 0; padding: 0 32px;
  display: flex; align-items: center; gap: 16px;
}
.blog-share-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-faint); }
.blog-share-links { display: flex; align-items: center; gap: 10px; }
.blog-share-link {
  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); color: var(--ink-soft);
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.25s var(--ease-spring);
}
.blog-share-link:hover { color: var(--accent); border-color: var(--accent-dim-2); transform: translateY(-2px); }
.blog-share-link svg { width: 16px; height: 16px; }
@media (max-width: 600px) { .blog-share-row { padding: 0 24px; } }

/* -- Post page: related posts -- */
.blog-related-section { max-width: 1180px; margin: 80px auto 0; padding: 64px 32px 0; border-top: 1px solid var(--line); }
.blog-related-section h3 { font-size: 22px; color: var(--ink); margin-bottom: 28px; }
@media (max-width: 600px) { .blog-related-section { padding: 56px 24px 0; margin-top: 64px; } }


/* ============================================================
   SPECIAL EDITIONS PAGE
   ============================================================ */
.editions-flagship { padding: 30px 32px 20px; }
.editions-flagship-inner { max-width: 1180px; margin: 0 auto; }
.editions-flagship-head { max-width: 640px; }
.editions-flagship-head p.page-eyebrow { margin: 0; }
.editions-flagship-head h2 { margin-top: 10px; font-size: clamp(24px, 3vw, 32px); }
.editions-flagship-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.edition-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--bg-soft);
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s ease;
}
.edition-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 50px -28px rgba(12, 12, 13, 0.25);
}
.edition-card img { display: block; width: 100%; height: auto; }
.edition-card-media {
  height: clamp(260px, 26vw, 380px);
  background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.edition-card-media img { width: 100%; height: 100%; object-fit: contain; }
.hero-stats-row-flagship { margin-top: 56px; }
.edition-card-caption { padding: 20px 24px 24px; }
.edition-card-caption .edition-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent);
}
.edition-card-caption h3 { margin-top: 8px; font-size: 18px; letter-spacing: -0.01em; }
.edition-card-caption .edition-role { margin-top: 2px; font-size: 13.5px; color: var(--ink-soft); }
.edition-card-caption p.edition-tagline { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }

.editions-grid-section { padding: 100px 32px 40px; }
.editions-grid-inner { max-width: 1180px; margin: 0 auto; }
.editions-grid-head { max-width: 640px; }
.editions-grid-head h2 { font-size: clamp(26px, 3.4vw, 38px); }
.editions-grid-head p { margin-top: 16px; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); }
.edition-card-caption .edition-top-row { display: flex; align-items: center; gap: 8px; }

@media (max-width: 860px) {
  .editions-flagship-grid { grid-template-columns: 1fr; }
}

/* ---------- Special Editions: industry showcase grid (round 48 —
   real isolated product cutouts replace the round-47 packshot-frame
   treatment. Round 47 boxed each image in a bordered, gradient-backed
   "pedestal" because the only source material was a cropped sliver of
   a composite photo (box + baked-in studio scene in one JPEG) — the
   frame's job was to hide that seam. That constraint is gone: these
   are real rembg cutouts with genuine alpha transparency, so the book
   itself can simply stand on the page ("nur das Buch da steht" — no
   visible photo rectangle). The shadow is now a CSS drop-shadow
   traced to the object's actual silhouette (contact + ambient pass),
   not a box shadow on a frame, so it reads as a real object grounded
   on a surface rather than "a photo with a shadow behind it". Cards
   flipped from a horizontal thumbnail+text row to a vertical
   image-on-top layout so the product — now worth showing — gets the
   visual weight; the 1px hairline "background-as-gutter" 2-up grid is
   kept from round 47 because it's still the right device for "one
   system, eight branches" (a catalog, not eight disconnected cards).
   All 8 books are height-normalized and bottom-aligned within a fixed
   stage so they read as one consistent product line despite each
   render's slightly different angle/aspect ratio. ---------- */
.edition-showcase-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.edition-showcase {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  transition: background 0.3s ease;
}
.edition-showcase:hover { background: var(--bg-soft); }
.edition-showcase-media {
  position: relative;
  height: clamp(220px, 25vw, 300px);
  padding: 36px 32px 0;
}
.edition-showcase-stage {
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.edition-showcase-stage img {
  height: 100%;
  width: auto;
  max-width: 76%;
  object-fit: contain;
  display: block;
  filter:
    drop-shadow(0 2px 4px rgba(12, 12, 13, 0.13))
    drop-shadow(0 20px 26px rgba(12, 12, 13, 0.15));
  transition: transform 0.5s var(--ease), filter 0.5s var(--ease);
}
.edition-showcase:hover .edition-showcase-stage img {
  transform: translateY(-5px) scale(1.025);
  filter:
    drop-shadow(0 3px 5px rgba(12, 12, 13, 0.14))
    drop-shadow(0 26px 32px rgba(12, 12, 13, 0.19));
}
.edition-showcase-body { padding: 22px 32px 32px; }
.edition-showcase-top { display: flex; align-items: center; gap: 8px; }
.edition-showcase-icon {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; color: var(--accent); flex-shrink: 0;
}
.edition-showcase-body .edition-eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint);
}
.edition-showcase-body h3 {
  margin-top: 8px;
  font-size: clamp(20px, 2.1vw, 25px);
  letter-spacing: -0.01em;
}
.edition-showcase-body .edition-director {
  margin-top: 10px; font-size: 14.5px; font-weight: 700; color: var(--accent);
}
.edition-showcase-body .edition-role {
  margin-top: 3px; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); max-width: 480px;
}
.edition-showcase-body .edition-tagline {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft);
  font-size: 14px; font-weight: 500; color: var(--ink); max-width: 440px;
}
.edition-showcase-cta {
  margin-top: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--accent);
}
.edition-showcase-cta svg { transition: transform 0.3s var(--ease); }
.edition-showcase-cta:hover svg { transform: translateX(3px); }

@media (max-width: 900px) {
  .edition-showcase-grid { grid-template-columns: 1fr; }
  .edition-showcase-media { height: clamp(240px, 46vw, 300px); }
}
@media (max-width: 560px) {
  .edition-showcase-media { padding: 28px 24px 0; height: 230px; }
  .edition-showcase-body { padding: 18px 24px 28px; }
  .edition-showcase-body .edition-role,
  .edition-showcase-body .edition-tagline { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .edition-showcase-stage img { transition: none; }
  .edition-showcase:hover .edition-showcase-stage img { transform: none; }
}

/* ---------- Trust strip (mirrors the reference deck's closing
   3-column icon row) ---------- */
.editions-trust {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 36px 0 0;
  border-top: 1px solid var(--line);
}
.editions-trust-item { display: flex; align-items: flex-start; gap: 12px; }
.editions-trust-item svg { flex-shrink: 0; color: var(--accent); margin-top: 2px; }
.editions-trust-item h4 { font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; }
.editions-trust-item p { margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 760px) { .editions-trust { grid-template-columns: 1fr; } }

/* ===== Legal pages (Impressum, AGB, Datenschutz, Haftungsausschluss) ===== */
.legal-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 24px 96px;
}
.legal-updated {
  font-size: 13px;
  color: var(--ink-faint);
  margin-bottom: 40px;
}
.legal-main h2 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 44px 0 14px;
}
.legal-main h2:first-of-type { margin-top: 0; }
.legal-main h3 {
  font-size: 15.5px;
  font-weight: 600;
  margin: 26px 0 10px;
}
.legal-main p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.legal-main a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.legal-main a:hover { text-decoration-color: var(--ink); }
.legal-main ul, .legal-main ol {
  margin: 0 0 14px;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.legal-main li { margin-bottom: 6px; }
.legal-main strong { color: var(--ink); font-weight: 600; }
.legal-box {
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  margin: 20px 0;
}
.legal-box p:last-child { margin-bottom: 0; }
.legal-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 16px 20px;
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  margin-bottom: 36px;
}
.legal-toc a {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
}
.legal-toc a:hover { color: var(--accent); }

/* Footer legal row */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 14px;
}
/* Round 47: was --ink-faint (very light gray) at regular weight — read
   as fine print, not as links. Bumped to --ink-soft + medium weight by
   default (still clearly secondary to the main footer columns above),
   with a solid near-black + underline on hover/focus so the click
   affordance is unambiguous — elegant black/bold rather than pink,
   per feedback this doesn't need the accent color to read as clickable. */
.footer-legal a {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft);
  text-underline-offset: 3px;
  text-decoration-color: transparent;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.footer-legal a:hover,
.footer-legal a:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: currentColor;
}

/* ============================================================
   English homepage (en/index.html) — round 1
   New rules added for the international-launch homepage. Reuses the
   shared design tokens/type scale above; only net-new layout ideas
   that had no existing counterpart get new classes here.
   ============================================================ */

/* Small, unobtrusive DE language-switch link in the nav — sits left of
   the muted "Special Editions" link so it reads as a secondary utility,
   not a primary nav item. Hidden on mobile (folded into nav-mobile list
   instead, styled like a normal mobile nav row there). */
.nav-lang-switch {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.nav-lang-switch:hover,
.nav-lang-switch:focus-visible { color: var(--accent); border-color: var(--accent-dim-2); }
@media (max-width: 900px) { .nav-lang-switch { display: none; } }

/* Tiered logo credibility band, directly under the hero (never inside
   it — trust strips belong in their own section, not crammed into the
   hero stack). Two tiers: a handful of large, globally recognizable
   "top experience" logos (reuses .ref-featured-grid / .ref-card from
   the referenzen.html pattern as-is), then a wider, smaller "further
   experience" row (reuses .logo-wall-flat, dialed down in size/opacity
   so it visibly reads as the second, denser tier rather than a repeat
   of the same hierarchy level). Every logo is a real reference-company
   asset from assets/references — never invented, never the example
   brands from David's reference screenshot.
   Round 2 (rhythm pass): background changed from plain white to the
   same --bg-soft band treatment already used by .mentors-soft and
   .audience-statement further down this page. Round 1 stacked three
   flat white sections in a row here (glance, credibility, features)
   before the first real visual break — this turns credibility into a
   second, earlier tone break (glance stays white, credibility bands
   grey, features gets a real photo, for whom bands grey again), so no
   more than one white section sits between two breaks anywhere in the
   top half of the page. (Superseded by round 4, below: credibility is
   plain/white again now that the photo break moved to #references-hook
   right above it.) */
/* Round 6 (prototype): a soft pink-glow radial layer added behind
   this section's plain white fill — the top of David's mockup'd
   pink-glow atmosphere for the #references -> #real-difference ->
   #story-stat stretch. Same technique/intensity as the hero's own
   .hero-glow (see that rule above): a single blurred radial-gradient,
   very low opacity, no hard edge. Bleeds slightly above the section's
   own top edge (negative Y%) so it reads as continuing down from the
   page rather than starting abruptly at this section's boundary. */
/* Round 7: David couldn't perceive round 6's glow at all ("ich sehe
   keinen pinken Verlauf") -- verified the CSS was present and
   rendering, just far too faint. Fix: roughly doubled the opacity of
   the existing centered wash, and added a second, distinctly stronger
   diagonal swoosh anchored in the top-left corner (a rotated radial
   blob via ::before, not a new asset/element in the HTML) so the
   section visibly "opens" with a pink diagonal streak instead of a
   flat, barely-tinted glow. Calibrated to read at the same visibility
   level as .hero-glow above, not softer. overflow:hidden clips the
   rotated swoosh cleanly at the section edge. */
/* Round 8: round 7 overshot the other way -- David's direct feedback
   was "too much pink" and a full-width/full-height wash rather than
   his reference's restrained corner accent. Two fixes: (1) the
   full-width centered ellipse wash is removed entirely -- it was the
   main source of the "whole background is pink" read, since at
   1200px wide it covered the section edge-to-edge regardless of the
   corner swoosh; (2) the corner swoosh itself stays (it's the actual
   "soft diagonal swoosh in one corner" from David's reference) but is
   cut down substantially -- opacity roughly halved (0.40/0.14 ->
   0.20/0.06), reshaped flatter/thinner (900x520 -> 760x300) so it
   reads as a thin diagonal streak rather than a large blob, and
   blurred slightly more (46px -> 50px) so its edges dissolve softly
   instead of presenting a visible glow boundary. This is now the
   *only* pink in the #references -> #story-stat stretch besides the
   #story-stat halo itself -- #real-difference and #for-whom go back
   to zero pink (see .pull-statement / .audience-statement below). */
.credibility {
  padding: 72px 32px 96px;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.credibility::before {
  content: "";
  position: absolute;
  top: -160px;
  left: -200px;
  width: 760px;
  height: 300px;
  background: radial-gradient(ellipse at center, rgba(var(--accent-rgb), 0.20), rgba(var(--accent-rgb), 0.06) 55%, transparent 78%);
  transform: rotate(-20deg);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 640px) {
  .credibility::before { width: 480px; height: 200px; top: -110px; left: -140px; filter: blur(36px); }
}
.credibility-inner { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; text-align: center; }
/* Round 9: the small caption this section was missing — David compared
   directly against his own mockup and found logos "just appear mid-page
   with no text." Reuses .feature-kicker's exact visual weight (uppercase,
   12.5px, 600 weight, 0.06em tracking, accent color) rather than a new
   caption style, just with its own block-level spacing since it isn't
   paired with a heading directly beneath it like .feature-kicker is. */
.credibility-kicker {
  display: block;
  margin-bottom: 24px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.credibility h2 { font-size: clamp(28px, 4vw, 44px); }
.credibility-sub {
  margin: 16px auto 0;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.credibility-top { max-width: 720px; margin-left: auto; margin-right: auto; margin-top: 0; }
/* Round 8: .credibility-top's 720px cap (set when .trusted-row logos
   were 34px tall) is too narrow for the round-8 52px logos -- 8 of
   them plus the wider gap need ~890px and were wrapping to two rows.
   Widened only for this specific combination (.trusted-row is the
   sole element that carries both classes) rather than raising the
   shared .credibility-top max-width itself, in case that class is
   ever reused elsewhere with different content. */
.trusted-row.credibility-top { max-width: 1260px; }
/* Round 11: enlarged .trusted-card/.trusted-row img sizing (David: "viel
   zu klein") needs a wider row than the shared 1040px .credibility-inner
   cap allows for 8 cards in one line — widened scoped to #references
   only, so no other .credibility use on the site is affected. */
#references .credibility-inner { max-width: 1260px; }
/* Round 5: raised from a washed-out 13px/faint caption to a more
   confident, still-quiet credibility line — heavier weight and darker
   (ink-soft, not ink-faint) so it reads as a real statement of scale
   rather than fine print, plus a constrained measure so the sentence
   sets on a tighter, more considered line. Same real copy, no content
   change. */
.credibility-more-label {
  margin-top: 44px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--ink-soft);
}
/* Denser, quieter second tier: smaller logos, permanently lower opacity
   at rest than the .coop partner wall (that wall represents official
   partners and stays at the standard .logo-wall-flat prominence; this
   is a broader "alumni work here too" network, so it reads as visibly
   secondary even before any hover). */
.credibility-more { margin-top: 20px; gap: 24px 30px; }
.credibility-more img { height: 28px; filter: grayscale(100%); opacity: 0.5; }
.credibility-more img:hover { filter: grayscale(20%); opacity: 0.85; }
/* Round 6 (prototype): replaces the old "19 more companies" headcount
   claim, which no longer matches the now-curated (8-logo) row above —
   points to referenzen.html instead, which already states the real
   total (27 companies) in full. Same quiet visual weight as the
   .faq-more link pattern used elsewhere on this site. */
/* Round 11: David — gap to this link reads as "riesig", tightened from
   20px to sit right under the grayscale row like his reference. */
.credibility-more-cta { margin-top: 8px; text-align: center; font-size: 14px; font-weight: 600; }
.credibility-more-cta a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; }
.credibility-more-cta a:hover { color: var(--accent); }

/* Round 7: replaces .ref-featured-grid / .ref-card (the bordered/boxed
   card treatment) for the top-tier logos on the EN homepage only — see
   the HTML comment on #references. A single quiet row, no borders, no
   boxes, every logo at the same fixed height (unlike .logo-wall-flat's
   footprint-based per-brand sizing) so the strip reads as one
   deliberately plain "trusted by" line. Kept a touch larger/less muted
   than .credibility-more directly below it, so the two rows still read
   as a clear hierarchy (marquee names, then a broader network) even
   though neither has a box around it anymore. */
/* Round 8: David confirmed — after the box removal in commit 8760466 —
   that the marks themselves now read as too small/timid without a
   card to anchor them, and asked for them roughly as large as round
   6's original boxed version, just still boxless. Height raised
   34px -> 52px (all 8 source PNGs are square 383x383 canvases, so
   width scales 1:1 with height — at 52px that's 8*52 = 416px of logos
   plus 7 gaps, comfortably inside the 1040px .credibility-inner
   container at both 1440px and 1280px viewports with no wrapping;
   verified in-browser, see round-8 notes). Gap widened to match the
   larger marks so the row doesn't feel cramped. Kept all 8 logos —
   no need to cut to 6, they fit cleanly at this size. */
.trusted-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
}
/* Round 10: David's direct 1:1 request from his ChatGPT-rebuilt reference
   — top tier goes into bordered card tiles (kept full color, per his own
   earlier Round 9 call, which stands), bottom tier goes back to grayscale
   (reverses Round 9's #references override below, per his explicit
   instruction: "die oberen acht in Farbe und die unteren acht in grau").
   New .trusted-card is deliberately its own class, not a reuse of
   .ref-card/.ref-featured-grid, so referenzen.html's own grid is
   untouched — same reasoning as Round 7, just applied the other
   direction this time since David wants the box look here now. */
.trusted-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg);
  min-width: 140px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.trusted-card:hover { transform: translateY(-3px); box-shadow: 0 20px 36px -22px rgba(12,12,13,0.22); }
.trusted-row img {
  height: 44px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  opacity: 0.92;
  transition: opacity 0.3s ease;
}
.trusted-row img:hover { opacity: 1; }
/* Round 10: reverts Round 9's full-color override for the second tier —
   David confirmed the bottom eight should be grayscale again, so this
   instance of .logo-wall-flat now just falls back to the existing
   .credibility-more img rule (grayscale, 0.5 opacity, hover 20%/0.85)
   like every other .logo-wall-flat use on the site. */
@media (max-width: 640px) {
  .credibility { padding: 64px 24px 72px; }
  .trusted-row { gap: 14px; }
  .trusted-card { padding: 16px 18px; min-width: 108px; }
  .trusted-row img { height: 26px; max-width: 100px; }
  .credibility-more { gap: 18px 22px; }
  .credibility-more img { height: 22px; }
}

/* Footer note flagging that legal pages are still German-only on the
   English site (round 1) — sits under the legal link row, quiet but
   legible, not styled as a warning. */
.footer-legal-note {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--ink-faint);
  max-width: 480px;
  line-height: 1.5;
}

/* ============================================================
   English homepage (en/index.html) — round 2, blueprint alignment
   Two genuinely new layout ideas with no existing counterpart: the
   "program at a glance" strip (sits directly under the hero, reuses
   .facts/.fact from programm.html but needs its own top padding plus
   a centered heading above the grid) and the "for whom" positioning
   statement (a single centered headline+body block — deliberately
   narrower audience framing than the DE site uses). Everything else
   touched in this round (real-difference, certificate, 9.8 strip,
   success-stories, curated company logos) reuses existing section
   patterns as-is (.features/.feature, .story-stat, .hook, .coop,
   .logo-wall-flat) with copy/content changes only — see the matching
   HTML comments in en/index.html for what was reused vs. added.
   ============================================================ */
.glance { padding: 56px 32px 0; text-align: center; }
.glance-inner { max-width: 1120px; margin: 0 auto; }
.glance-inner h2 { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 40px; }
.glance-inner .facts-inner { margin-top: 0; }
@media (max-width: 640px) { .glance { padding-top: 64px; } }

/* Round 5 (gap-tightening + seam-blend pass): top padding cut from the
   original 96px — paired with #real-difference's own reduced bottom
   padding below, this closes the oversized internal gap David flagged
   between the two halves of the merged grey block. Bottom padding (the
   exit into the white #story-stat strip further down) is untouched —
   that boundary was never the complaint. Background changed from a
   flat fill to a gradient that holds --bg-soft for the section's
   height and only fades to white (--bg) in the final 90px — replacing
   the previous instant flat-to-white cut with a soft blend, per
   David's "hier fängt jetzt der andere Teil an" feedback (same
   technique as #real-difference's top-edge fade below). */
/* Round 6 (prototype): a second, faint glow layer near this section's
   bottom edge (where it fades grey -> white) leads the eye into the
   concentrated halo behind the #story-stat card just below it, so the
   two moments read as connected rather than the glow appearing twice
   independently. */
/* Round 7: same intensity fix as #references / #real-difference above. */
/* Round 8: David's reference shows the pink confined to #references'
   opening corner (see .credibility::before above) and the #story-stat
   halo further down -- everything in between, including this section
   (#for-whom), should read as plain grey/white again. Removed the
   radial wash entirely; the existing grey->white tone-fade
   (linear-gradient below) is untouched and does all the work here. */
.audience-statement {
  padding: 56px 32px 96px;
  background: linear-gradient(to bottom, var(--bg-soft) calc(100% - 90px), var(--bg) 100%);
}
/* Round 11: David — "Built for people who lead" and the 9.8 card directly
   below should read as one tight block, not two separate sections.
   Scoped to #for-whom specifically (not the shared .audience-statement
   class, which erfolgsgeschichten.html / the DE site may reuse with
   different content after it). */
#for-whom { padding-bottom: 20px; }
.audience-statement-inner { max-width: 760px; margin: 0 auto; text-align: center; }
/* Small decorative rule standing in for a text kicker here — #real-
   difference directly above already has its own text kicker ("The
   real difference"), so a second one back-to-back would over-signpost
   the same beat. A thin rule reads as a deliberate pause between the
   two thoughts without repeating the kicker pattern twice in a row.
   Round 9: David asked for "a touch more presence" — widened 40px ->
   56px, thickened 2px -> 3px, and the fill darkened from the very
   faint --accent-dim-2 (0.14 alpha) to a slightly stronger 0.24 alpha
   of the same accent color. Still a quiet hairline, not a bold
   divider — just no longer disappearing at a glance. */
.audience-statement-rule {
  display: block;
  width: 56px;
  height: 3px;
  margin: 0 auto 28px;
  background: rgba(var(--accent-rgb), 0.24);
  border-radius: 3px;
}
.audience-statement-inner h2 { font-size: clamp(26px, 3.4vw, 38px); }
.audience-statement-inner p { margin-top: 18px; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 640px) {
  .audience-statement { padding: 40px 24px 64px; }
  .audience-statement-rule { margin-bottom: 22px; }
}

/* ============================================================
   English homepage (en/index.html) — round 3, rhythm/redundancy pass
   Pure presentation fixes on top of round 2's already-complete
   content (see the HTML comments at each touched section for what
   changed and why): tighter hero→glance connection, an earlier tone
   break (.credibility, above) and a real photo in the "real
   difference" feature instead of a placeholder pulse dot, plus the
   certificate/partners re-merge and trusted-companies removal in the
   HTML (no new CSS needed there — both reuse .coop as-is).
   ============================================================ */

/* Item 6: EN's hero omits the DE hero's stats row inside .hero-content,
   so the shared .hero { min-height: 84svh; align-items: center } rule
   (tuned for DE's taller content block) left a large empty gap between
   the CTAs and the "at a glance" strip below on desktop — the hero
   read as floating rather than connected to what follows. This is a
   desktop-only fix: .hero's own <600px media query already sets
   min-height: auto for every language, so mobile needs no change. */
.hero-compact { min-height: auto; padding-top: calc(var(--nav-h) + 56px); padding-bottom: 56px; }


/* ============================================================
   English homepage (en/index.html) — round 4, photo-duplication +
   rhythm fix
   David flagged two things after round 3: (1) divider-mentors-5826 was
   now used twice on this page (round 3's "real difference" portrait
   crop, plus the existing full-bleed divider further down) — every
   real photo on this page must appear exactly once; (2) the
   White→Grey→White→Grey→White run from #real-difference through
   #story-stat still read as choppy, and the strong photo break he
   wanted ("brechen mit dem Bild und dann 'Lerne von den besten
   Deutschlands'") needed to happen earlier, right after #glance.
   Net changes: #real-difference drops the round-3 photo card for the
   .pull-statement typographic treatment below (the old photo-card CSS
   is removed entirely, not left as dead code); #references' headline
   moves into its own early full-bleed .hook (.hook-early / hook-lede-lg
   / .hook-sub below), which is also why the plain .credibility rule
   above lost its grey band/borders — the photo break now does that
   job; and #stories drops its hook-mentor-3817 photo for a solid
   --ink background (.hook-solid).
   (Superseded by round 5, at the end of this file: .hook-solid was
   removed and #stories got a real photo back — divider-mentors-5826 —
   per David's follow-up feedback that the solid panel read as "just a
   black image" on the homepage.)
   ============================================================ */

/* #references-hook: shorter content (headline + one line of body copy,
   no marquee) than the taller .hook usage in #stories, so it doesn't
   need the same min-height. */
#references-hook.hook { min-height: clamp(340px, 27vw, 560px); }
/* Round 5: slightly tighter tracking on the headline and a touch more
   size/contrast on the sub-line for a more considered, less "default
   paragraph" feel — same real copy. */
.hook-lede-lg { font-size: clamp(28px, 4.2vw, 44px); letter-spacing: -0.035em; }
.hook-sub {
  margin-top: 18px;
  max-width: 600px;
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}

/* #real-difference: large centered pull-quote-style statement — no
   photo, no card, no icon (see the HTML comment on #real-difference).
   Shares its grey band with #for-whom. Round 5 (seamless-flow pass):
   dropped the 1px border-top that used to mark this boundary — per
   David's direct flag ("ich möchte nicht, dass man weiß, hier fängt
   jetzt der andere Teil an"), the white→grey color change plus this
   section's already-generous 130px top padding now carries the
   transition on its own, no rule line needed. Same fix applied to
   .audience-statement's border-bottom above (bottom edge of this same
   grey stretch) and to the EN-only overrides for #mentors/#partner at
   the end of this file.
   Round 5 follow-up: the flat instant white→grey swap still read as a
   hard cut to David even with the border gone, and separately, bottom
   padding cut from 120px to 64px — paired with .audience-statement's
   own reduced top padding above — to close the oversized gap he
   flagged between this paragraph and "For managers, entrepreneurs...".
   Background is now a gradient that starts white (--bg) and only
   reaches full --bg-soft by 90px down, instead of an instant flat
   swap — the top padding is generous enough that the fade completes
   well above the kicker/headline. */
/* Round 6 (prototype): continues the pink-glow atmosphere from
   #references above into this section's own white-to-grey fade — a
   fainter wash than #references' (this section reads mid-stretch, not
   the start of the effect), sitting in the same white top band so the
   glow reads continuous across the section boundary instead of
   resetting. Layered underneath the existing tone-fade, which is
   otherwise untouched. */
/* Round 7: same fix as #references above -- 0.05 was invisible at
   normal viewing distance. Raised to a clearly-perceptible level,
   still fainter than #references' own opening swoosh since this
   section reads mid-stretch, not the start of the effect (per the
   round 6 comment below), but now unmistakably a pink wash rather
   than a barely-there tint. */
/* Round 8: same fix as .audience-statement above -- David's reference
   confines the pink to #references' corner and the #story-stat halo
   only. Removed this mid-stretch wash entirely; #real-difference goes
   back to the plain white->grey tone-fade (linear-gradient below),
   no pink at all. */
.pull-statement {
  padding: 130px 32px 64px;
  text-align: center;
  background: linear-gradient(to bottom, var(--bg) 0, var(--bg-soft) 90px);
}
.pull-statement-inner { max-width: 860px; margin: 0 auto; }
.pull-statement-head {
  margin-top: 18px;
  font-size: clamp(32px, 5.2vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.pull-statement-body {
  margin: 26px auto 0;
  max-width: 580px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
}
/* Round 10: David's direct request from his ChatGPT reference — a photo
   back in #real-difference, after all. Round 6 declined a stock photo
   here for unclear licensing; this is a clearly-labelled placeholder
   only, to get the surrounding layout/spacing right, swapped for one of
   David's own real photos (Desktop/website folder) before anything
   ships — see aria-hidden span in the HTML. */
.pull-statement-media {
  margin: 40px auto 0;
  max-width: 900px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg, 20px);
  background: linear-gradient(135deg, var(--bg-soft) 0%, var(--line) 100%);
  border: 1px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pull-statement-media span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
@media (max-width: 640px) {
  .pull-statement { padding: 88px 24px 48px; }
  .pull-statement-media { margin-top: 28px; border-radius: var(--radius-md); }
}

/* #stories: round 5 (seamless-flow + photo-restore pass) — David
   flagged round 4's solid-ink treatment as reading like "einfach nur
   ein schwarzes Bild" (just a black image) on the homepage, and asked
   for a real photo back here (the solid-panel treatment stays on
   erfolgsgeschichten.html for the same headline — he confirmed that's
   fine as-is, homepage-only complaint). First attempt reused
   divider-mentors-5826 — David rejected that directly once he saw the
   same photo twice on this page. Round 5, take two: hook-group-3897,
   a genuinely new photo (see the HTML comment on #stories), so this
   is back to 4 real photos in 4 unique placements. object-position is
   tuned for this photo's own composition — its three subjects sit
   higher/more centered in the frame than divider-mentors-5826 did, so
   the previous 50%/12% top-anchored crop is replaced with a value that
   keeps all three faces inside the visible band at typical hook
   heights. Quote type keeps the slightly larger presence from round 4
   per David's "diese Statements ... ein bisschen mehr raussuchen" —
   scoped to #stories only so the shared .qm-quote/.quote-marquee rules
   (also used by DE's own .hook section) stay untouched. */
#stories .hook-media img { object-position: 50% 30%; }
#stories .quote-marquee.qm-on-dark { margin-top: 40px; padding-top: 28px; max-width: 620px; }
#stories .qm-viewport { min-height: 110px; }
#stories .qm-quote p { font-size: clamp(16px, 1.9vw, 19px); }

/* ============================================================
   English homepage (en/index.html) — round 5, seamless-flow polish
   David's direct round-4 feedback: (1) remove every hard 1px section-
   divider line so tone changes read as continuous flow, not "boxed-off
   blocks" — audience-statement/pull-statement above are the shared-band
   case (both EN-only classes, edited directly); #mentors and #partner
   below reuse .mentors-soft / .coop, which the DE homepage also uses
   under different IDs, so those two overrides are scoped with
   html[lang="en"] + the EN-only #mentors / #partner IDs to guarantee
   zero effect on the German page. (2) "Backed by strong partners"
   should feel more premium without changing its structure — added a
   small gold accent bar echoing the real MBS crest asset's own gold
   stripe (sampled directly from
   assets/partners/munich-business-school-crest.png, not invented) plus
   a touch more type confidence and breathing room. Same scoping
   approach (html[lang="en"] #partner ...) since .mbs-lockup-centered /
   .mbs-lockup-tag / .coop-partners-head are also shared with DE.
   ============================================================ */

/* #mentors: drop .mentors-soft's shared border-top/bottom for this
   page only — the photo before (.photo-feature) and after
   (.divider-photo) it already do the job of separating it from
   neighboring sections; a rule line on top of that read as redundant
   "here's the edge" marking. */
html[lang="en"] #mentors.mentors-soft { border-top: none; border-bottom: none; }

/* #partner: same fix — drop .coop's shared border-top so the
   .divider-photo image above flows straight into "Backed by strong
   partners" without a hard cut line under the photo. */
html[lang="en"] #partner.coop { border-top: none; }

/* "Backed by strong partners" craft pass. Gold value (#fbb61a) sampled
   directly from the solid fill of the real crest asset's top accent
   bar — same real brand color, not a new invented one. Structure is
   untouched: same MBS lockup, same partner grid, same copy. */
html[lang="en"] #partner .mbs-lockup-centered { gap: 24px; margin-top: 64px; }
html[lang="en"] #partner .mbs-lockup-tag {
  position: relative;
  display: inline-block;
  padding-top: 16px;
  /* MBS navy instead of the site-wide magenta accent, so this one tag
     matches the hero's own MBS lockup (.hero-mbs-name/.hero-mbs-tagline,
     also navy) rather than borrowing the AI Business Manager brand
     color for a Munich Business School credential. */
  color: #1e2444;
  letter-spacing: 0.08em;
}
html[lang="en"] #partner .mbs-lockup-tag::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: #fbb61a;
}
html[lang="en"] #partner .mbs-lockup-copy h3 {
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: clamp(23px, 2.7vw, 29px);
}
html[lang="en"] #partner .coop-partners-head { margin-top: 72px; }

/* ============================================================
   English homepage (en/index.html) — round 6, pink-glow prototype
   PROTOTYPE round, pending David's decision after reviewing it. Per
   his own style mockups: a soft, diffuse pink-glow atmosphere across
   the #references -> #real-difference -> #story-stat stretch (see the
   .credibility / .pull-statement / .audience-statement background
   edits above, all layered on top of round 5's existing tone-fades,
   not replacing them), a curated/shrunk logo row + honest copy in
   #references (see that section's HTML comment), shortened #for-whom
   copy (David's own simplification, shown identically across two of
   his three mockups), and this #story-stat card treatment: the 9.8
   rating gets a distinct rounded, bordered container with the glow
   concentrated behind it, instead of bare text on the page background.
   Scoped entirely to #story-stat (an id added only on this one
   instance in en/index.html) so the shared .story-stat/.story-stat-inner
   base rules — also used by en/erfolgsgeschichten.html and the DE
   site's own equivalent page — are completely untouched.
   ============================================================ */
#story-stat {
  position: relative;
  /* Round 11: David — this card should sit directly under "Built for
     people who lead", not float in its own separate section. Top
     padding cut well below the bottom padding (was equal, 96/96, for
     glow-centering reasons — see below) to close that gap; bottom
     padding kept so the section still ends with normal breathing room. */
  padding: 20px 32px 96px;
  overflow: hidden;
  background: var(--bg);
}
/* Round 7: David's exact complaint was that this halo was invisible —
   raised both stops of the radial gradient noticeably (0.20/0.08 ->
   0.38/0.16) and reduced the blur slightly (34px -> 28px) so the pink
   reads as an obviously-pink glow bleeding around the card, not a soft
   hint of warmth. Card's own drop shadow tint raised to match. */
/* Round 8: round 7 overshot here too — David wants this halo "gentle,
   visible but not dominant," and separately flagged a purple/violet
   tint ("vielleicht weg mit diesem Lila"). The color itself is the
   same real --accent pink (rgba(var(--accent-rgb), ...)) at every stop — there
   was never a blue channel in the mix — but stacking it this saturated
   (0.38/0.16) against the card's grey fill and dark border read as a
   deeper, purple-leaning magenta rather than a clean pink. Fix: cut
   both stops roughly in half (0.38/0.16 -> 0.16/0.05) and the card's
   own shadow tint to match (0.32 -> 0.12) — at this lower saturation
   it reads unambiguously as pink, not violet (verified by sampling the
   rendered halo's most saturated pixel after the change). */
#story-stat .story-stat-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Deliberately larger than the card in both directions so the halo
     reads as visibly "around" it, not just hidden entirely behind its
     opaque fill. */
  width: 780px;
  height: 560px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.05) 55%, transparent 80%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
}
#story-stat .story-stat-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 56px 48px 48px;
  box-shadow: 0 40px 80px -44px rgba(var(--accent-rgb), 0.12);
}
/* Round 7: "AVERAGE PARTICIPANT RATING" wrapping fix, scoped to this
   card only (the shared .story-stat-label rule stays untouched since
   en/erfolgsgeschichten.html and the DE site reuse it too). The card
   has ample width for this label at every normal viewport (measured:
   the label's natural single-line width is ~251px against a ~544px
   content box on desktop and a ~300px+ content box down to ~360px
   wide phones) — nowrap guarantees it never wraps at any of those
   widths regardless of font-metric differences across browsers/
   devices. Below ~400px the card's own padding narrows the available
   width enough that the label needs a touch less size/tracking to
   keep clearing it safely (verified down to a 320px-wide viewport). */
/* Round 8: David: "AVERAGE PARTICIPANT RATING" reads a bit large —
   trimmed from the shared 15px/0.04em down to 13.5px/0.035em, scoped
   to this card only (same reasoning as the nowrap rule above — the
   shared .story-stat-label base rule stays untouched for the other
   pages that reuse it). The existing <400px override already sits
   below this new value (13px), so no conflict there. */
#story-stat .story-stat-label { white-space: nowrap; font-size: 13.5px; letter-spacing: 0.035em; }
/* Round 10: 1:1 from David's ChatGPT reference — swaps the card's old
   sub-line for "Rated by participants after completing the program."
   plus a new CTA link, same quiet visual weight as .credibility-more-cta
   elsewhere on this page. */
.story-stat-cta { margin-top: 14px; text-align: center; font-size: 14px; font-weight: 600; }
.story-stat-cta a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; }
.story-stat-cta a:hover { color: var(--accent); }
@media (max-width: 640px) {
  #story-stat { padding: 68px 20px 68px; }
  #story-stat .story-stat-glow { width: 400px; height: 380px; filter: blur(22px); }
  #story-stat .story-stat-inner { padding: 40px 24px 36px; border-radius: var(--radius-md); }
}
@media (max-width: 400px) {
  #story-stat .story-stat-label { font-size: 13px; letter-spacing: 0.02em; }
}

/* Round 11: standard skip-link pattern, added alongside the new
   #main-content anchor (David's reference had both; ours had neither).
   Visually hidden off-screen until keyboard focus, standard a11y pattern. */
.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: 999;
  padding: 10px 18px;
  background: var(--ink, #161411);
  color: #fff;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }

/* ============================================================
   Round 12: real implementation-journey / journey-* markup, matching
   David's ChatGPT-rebuilt reference's actual page source (Cmd+Option+U)
   instead of our own pull-statement/credibility/audience-statement/
   story-stat reconstruction. That older component family (further up
   this file, "Tiered logo credibility band" through the #story-stat
   prototype block) is now dead code on this page — left in place since
   it's still just unused weight, not touched here to avoid risking the
   #glance/#references-hook/#stories/#mentors/#partner rules that sit
   interleaved with it in the same file region.
   The reference's own home.css wasn't retrievable (view-source only
   shows its URL, not contents) — values below are a fresh build reusing
   the spacing/sizing already tuned and verified in-browser under the
   old class names (card size, gaps, tightened seams, etc.).
   ============================================================ */
.implementation-inner { max-width: 1340px; margin: 0 auto; text-align: center; padding: 0 32px; }

/* Round 14: David caught this — my earlier guessed per-section
   backgrounds (this gray gradient, .journey-references' pink corner
   glow below, .journey-audience's gray-to-white gradient) were painting
   over the real home.css's single continuous white+glow background on
   the shared .implementation-journey wrapper, creating a visible
   Grau/Weiß/Pink/Weiß patchwork instead of one seamless canvas. Removed
   all three now that the real home.css owns this. */
/* Round 15: David — gap between the dark hero above and "The Real
   Difference" was too big. Found it: home.css's .implementation-journey
   wrapper already sets its own top padding (clamp 64-100px) for the
   whole block; this section's own 130px top padding was stacking on
   top of that, doubling the gap. Removed. */
.implementation-intro {
  padding: 0 0 64px;
}
/* Round 13: David's direct pixel-comparison against his reference
   screenshots (not just structure this time). Fix 1 of 5 — the photo
   was trapped inside the same 860px text column as the headline,
   reading as a narrow image with empty rails either side instead of
   breaking out wider like the reference. Removed the blanket 860px cap
   on .implementation-inner here; the text elements below now carry
   their own narrower max-width individually, so .implementation-image
   is free to use more of the section's full width. */
.journey-kicker {
  display: block;
  margin-bottom: 24px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
/* Fix 2 — David's reference headline reads noticeably bigger/heavier;
   raised the cap 56px -> 68px. Also gets its own 780px measure now that
   the parent's blanket 860px cap is gone. */
#implementation-heading {
  margin: 18px auto 0;
  max-width: 780px;
  font-size: clamp(32px, 5.6vw, 68px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.journey-lead {
  margin: 26px auto 0;
  max-width: 580px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.implementation-image { margin: 40px auto 0; max-width: 1040px; }
.implementation-image-placeholder {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg, 20px);
  background: linear-gradient(135deg, var(--bg-soft) 0%, var(--line) 100%);
  border: 1px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.implementation-image-placeholder span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.journey-references {
  padding: 72px 0 96px;
}
/* Fix 3 — David's reference shows this kicker in a neutral dark gray,
   not the pink accent color; "-muted" was only cutting opacity of the
   same pink before, which still read as pink. Overrides the color
   entirely now. */
.journey-kicker-muted { color: var(--ink); opacity: 1; }
.journey-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 16px; }
.journey-logos-primary { max-width: 1260px; margin: 0 auto; }
.journey-logos-primary li {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg);
  min-width: 140px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.journey-logos-primary li:hover { transform: translateY(-3px); box-shadow: 0 20px 36px -22px rgba(12,12,13,0.22); }
.journey-logos-primary img { height: 44px; width: auto; max-width: 140px; object-fit: contain; opacity: 0.92; transition: opacity 0.3s ease; }
.journey-logos-primary img:hover { opacity: 1; }
/* Fix 4 — KUKA was wrapping to its own line alone; reference fits all 8
   secondary logos on one row. Gap was too generous for the available
   width at these smaller logo sizes — tightened so all 8 fit. */
.journey-logos-secondary { margin-top: 44px; gap: 20px 22px; flex-wrap: nowrap; }
.journey-logos-secondary img { height: 28px; width: auto; object-fit: contain; filter: grayscale(100%); opacity: 0.5; transition: filter 0.3s ease, opacity 0.3s ease; }
.journey-logos-secondary img:hover { filter: grayscale(20%); opacity: 0.85; }
.journey-text-link { display: block; margin-top: 8px; text-align: center; font-size: 14px; font-weight: 600; }
.journey-text-link a, a.journey-text-link { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; }
.journey-text-link:hover, a.journey-text-link:hover { color: var(--accent); }
@media (max-width: 640px) {
  .journey-references { padding: 64px 0 72px; }
  .journey-logos { gap: 14px; }
  .journey-logos-primary li { padding: 16px 18px; min-width: 108px; }
  .journey-logos-primary img { height: 26px; max-width: 100px; }
  .journey-logos-secondary { gap: 18px 22px; flex-wrap: wrap; }
  .journey-logos-secondary img { height: 22px; }
}

.journey-audience {
  padding: 56px 32px 20px;
}
.journey-audience .implementation-inner { max-width: 760px; }
.journey-rule {
  display: block;
  width: 56px;
  height: 3px;
  margin: 0 auto 28px;
  background: rgba(var(--accent-rgb), 0.24);
  border-radius: 3px;
}
.journey-audience h2 { font-size: clamp(26px, 3.4vw, 38px); }
.journey-audience p { margin-top: 18px; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 640px) {
  .journey-audience { padding: 40px 24px 20px; }
  .journey-rule { margin-bottom: 22px; }
}

/* Round 14: removed the old ::before glow pseudo-element — home.css
   already paints its own corner-glow directly via #story-stat.journey-
   rating's background (see home.css), so this was a redundant second
   glow layered underneath, adding to the same patchwork problem. Kept
   max-width/margin/text-align/box-shadow, which home.css doesn't set. */
/* Round 15: David — card reads narrower than the reference relative to
   the "Built for people who lead" paragraph above it; widened to match
   that text column's own 760px measure plus a touch of breathing room. */
.journey-rating {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  box-shadow: 0 40px 80px -44px rgba(var(--accent-rgb), 0.12);
}
.journey-rating .journey-kicker { white-space: nowrap; font-size: 13.5px; letter-spacing: 0.035em; margin-bottom: 0; }
/* Fix 5 — David's reference shows the "9.8" in black, not the pink
   accent color (only the "AVERAGE PARTICIPANT RATING" label above it
   is pink). */
.journey-rating-value {
  margin-top: 8px;
  font-size: clamp(48px, 7vw, 72px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.journey-rating-value span { font-size: 0.4em; font-weight: 600; color: var(--ink-faint); }
.journey-rating-caption { margin-top: 12px; font-size: 16px; color: var(--ink-soft); }
.journey-rating .journey-text-link { margin-top: 14px; }
@media (max-width: 400px) {
  .journey-rating .journey-kicker { font-size: 13px; letter-spacing: 0.02em; }
}