/* ==========================================================================
   Self-hosted fonts

   Nothing is fetched from a third party: no external request, nothing for a CDN
   to log, and the page renders the same with no network beyond this origin.

   Public Sans is variable, so one file per style covers every weight the design
   uses. GT Planar is licensed as static cuts, so each one is its own file.

   GT Planar's slant is the point of the typeface: the design sets the hero in
   alternating Italic 15 (forward) and Retalic 15 (backward) lines. CSS has no
   keyword for a backslant, and the vendor ships Retalic under its own family
   name with a positive italicAngle, so it is declared as a separate family
   rather than as an italic of the first. Only the 15-degree cuts are wired up;
   the 30 and 45 files in fonts/ are unused, kept for future design work.
   ========================================================================== */

@font-face {
  font-family: 'GT Planar';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/GT-Planar-Bold.woff2') format('woff2'),
       url('/fonts/GT-Planar-Bold.woff') format('woff');
}

@font-face {
  font-family: 'GT Planar';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/GT-Planar-Italic-15-Bold.woff2') format('woff2'),
       url('/fonts/GT-Planar-Italic-15-Bold.woff') format('woff');
}

/* Backslanted. Its own family, so `font-style` stays free — see above. */
@font-face {
  font-family: 'GT Planar Retalic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/GT-Planar-Retalic-15-Bold.woff2') format('woff2'),
       url('/fonts/GT-Planar-Retalic-15-Bold.woff') format('woff');
}

@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/public-sans-latin-ext-italic.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/public-sans-latin-italic.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/public-sans-latin-ext.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/public-sans-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
   Stefan Böck — Keynote Speaker Website

   Built from the Figma design "Böck Stefan" (Startseite, node 2012:216),
   a fixed 1920px canvas. Every size below is the design's own pixel value
   expressed in --u, a unit that equals 1px at a 1920px viewport and scales
   down with the viewport, so proportions and line breaks hold across the
   desktop range. --u has a floor so body copy never drops below ~16px.

   Design tokens: navy #042759, red #ca0733, tint #e7f0f7
   Display: GT Planar Bold, with the Italic 15 and Retalic 15 cuts in the hero
   Body/UI: Public Sans
   ========================================================================== */

:root {
  --navy: #042759;
  --red: #ca0733;
  --tint: #e7f0f7;
  --white: #ffffff;
  --ink: #042759;
  --paper: #ffffff;

  --font-display: 'GT Planar', sans-serif;
  /* The hero's backslanted lines; see the @font-face block. */
  --font-display-back: 'GT Planar Retalic', sans-serif;
  --font-body: 'Public Sans', sans-serif;

  /* GT Planar is licensed as Bold only. The design sets the hero headline in
     Bold and the eyebrow, pivot words and marquee in Black; without a Black cut
     those three render Bold too. Declared once here so the substitution is in
     one place if a Black licence is added later. */
  --display-weight: 700;

  /* 1px on the design's 1920 canvas. */
  --u: clamp(0.9px, 0.0520833vw, 1px);
  --gutter: clamp(24px, 5vw, 96px);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* The header is fixed, so nav jumps would otherwise land with the section's
   first line hidden underneath it. */
section[id] {
  scroll-margin-top: calc(130 * var(--u));
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

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

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

button {
  font-family: inherit;
  cursor: pointer;
}

/* ==========================================================================
   Type scale — the design's values, verbatim
   ========================================================================== */

/* Every text box in the design is trimmed to the cap height and the baseline
   (Figma's `text-box-trim: trim-both` with `text-box-edge: cap alphabetic`), so
   the gaps it specifies run cap-top to baseline, not box to box. Reproducing
   the trim is what makes those numbers literal here: without it the font's
   leading is added on top of every gap and each stack reads 12-24px looser
   than the design. Applied to the outer edges of a block only, never to every
   line inside it — the blank line between paragraphs is a design value too.
   Firefox has no `text-box` yet and keeps the older, looser spacing. */

/* 26px SemiBold, uppercase, no tracking. */
.eyebrow {
  font-weight: 600;
  font-size: calc(26 * var(--u));
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  margin: 0;
  text-box: trim-both cap alphabetic;
}

/* The #hashtag eyebrows keep their mixed case in the design, and are set in
   Regular rather than the SemiBold of the section eyebrows. */
.eyebrow--tag {
  text-transform: none;
  font-weight: 400;
}

.eyebrow--red { color: var(--red); }
.eyebrow--navy { color: var(--navy); }
.eyebrow--white { color: var(--white); }

h1, h2, h3 {
  margin: 0;
  font-weight: 600;
  line-height: 1.17;
}

/* 64px — bio, Keynote, Quick Wins, Buch, Referenzen. The margin reset is here
   as well as on h1-h3 because the intro role is a <p>, which would otherwise
   keep the browser's 1em default and open a 46px hole under the name. */
.section-title {
  font-weight: 600;
  font-size: calc(64 * var(--u));
  line-height: 1.17;
  margin: 0;
  text-box: trim-both cap alphabetic;
}

/* 46px — intro role, pivot, method, final CTA. */
.section-title--md {
  font-size: calc(46 * var(--u));
}

/* 26px / 38px Medium. */
.body-lg {
  font-size: calc(26 * var(--u));
  line-height: calc(38 * var(--u));
  font-weight: 500;
  margin: 0;
  text-box: trim-both cap alphabetic;
}

/* 18px / 32px Medium — the workhorse. */
.body-md {
  font-size: calc(18 * var(--u));
  line-height: calc(32 * var(--u));
  font-weight: 500;
}

/* Paragraph breaks in the design are blank lines, i.e. one line-height. */
.body-md p { margin: 0 0 calc(32 * var(--u)); }
.body-md p:last-child { margin-bottom: 0; }
.body-md strong { font-weight: 700; }

/* The block trims against its neighbours, but the paragraphs inside it do not
   trim against each other: a 32px margin between two untrimmed 32px lines is
   what puts the design's blank line between them. Trimming every paragraph
   would pull that to 45px baseline-to-baseline instead of 64px. The same
   first/last pattern is used for the Quick Wins items and the testimonials. */
.body-md > *,
.quickwins__item > * { text-box-edge: cap alphabetic; }
.body-md > :first-child,
.quickwins__item > :first-child { text-box-trim: trim-start; }
.body-md > :last-child,
.quickwins__item > :last-child { text-box-trim: trim-end; }
.body-md > :first-child:last-child,
.quickwins__item > :first-child:last-child { text-box-trim: trim-both; }

/* Stacks matching the design's auto-layout gaps. */
.heading-group {
  display: flex;
  flex-direction: column;
  gap: calc(30 * var(--u));
}

.stack-50 {
  display: flex;
  flex-direction: column;
  gap: calc(50 * var(--u));
}

/* Photography — real assets exported from Figma; see images/README.md. */
.media-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split__media,
.method-video__frame,
.book__media {
  position: relative;
  overflow: hidden;
}

/* ==========================================================================
   Buttons — 20px Bold uppercase, 5px border, 14/26 padding
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  border: calc(5 * var(--u)) solid currentColor;
  padding: calc(14 * var(--u)) calc(26 * var(--u));
  font-weight: 700;
  font-size: calc(20 * var(--u));
  line-height: calc(24 * var(--u));
  letter-spacing: 0;
  text-transform: uppercase;
  background: transparent;
  color: var(--navy);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
  white-space: nowrap;
}

.btn:hover, .btn:focus-visible {
  background: var(--navy);
  color: var(--white);
}

.btn--on-red {
  color: var(--navy);
  border-color: var(--navy);
}
.btn--on-red:hover, .btn--on-red:focus-visible {
  background: var(--navy);
  color: var(--white);
}

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

/* On the navy and red panels a red ring would disappear — switch to white. */
.pivot__turn:focus-visible,
.method__rail-dot:focus-visible {
  outline-color: var(--white);
}

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

/* ==========================================================================
   Header — 108px tall, 35px gutters, 53px logo
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: calc(27 * var(--u)) calc(35 * var(--u));
  transition: background 0.3s var(--ease), padding 0.3s var(--ease);
}

.site-header.is-scrolled {
  background: rgba(4, 39, 89, 0.92);
  backdrop-filter: blur(6px);
  padding: calc(16 * var(--u)) calc(35 * var(--u));
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
}

.logo__img {
  height: calc(53 * var(--u));
  width: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: calc(15 * var(--u));
}

.nav__link {
  padding: calc(16 * var(--u)) calc(18 * var(--u));
  font-weight: 600;
  font-size: calc(20 * var(--u));
  color: var(--white);
}

.nav__link:hover {
  opacity: 0.75;
}

.nav__cta {
  border: calc(3 * var(--u)) solid var(--white);
  padding: calc(13 * var(--u)) calc(24 * var(--u));
  font-weight: 700;
  font-size: calc(20 * var(--u));
  color: var(--white);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.nav__cta:hover {
  background: var(--white);
  color: var(--navy);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 40px;
  height: 32px;
  padding: 0;
  position: relative;
}
.nav-toggle span {
  position: absolute;
  left: 4px;
  right: 4px;
  height: 3px;
  background: var(--white);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 8px; }
.nav-toggle span:nth-child(2) { top: 16px; }
.nav-toggle span:nth-child(3) { top: 24px; }

.nav-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ==========================================================================
   Hero — 1080px band, headline 90px in a 1166px measure
   ========================================================================== */

.hero {
  position: relative;
  height: calc(1080 * var(--u));
  min-height: 560px;
  color: var(--white);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(4, 39, 89, 0.55);
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  height: 100%;
  padding-top: calc(343 * var(--u));
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__headline {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-transform: uppercase;
  font-size: calc(90 * var(--u));
  line-height: 1;
  max-width: calc(1166 * var(--u));
  margin: 0 0 calc(37 * var(--u));
  /* Trimmed in the design, so the 343px top inset lands on the cap and the
     37px below it starts at the last baseline. */
  text-box: trim-both cap alphabetic;
}

/* The design alternates GT Planar's Italic 15 and Retalic 15 cuts line by line.
   Both are real cuts now, so the slant is drawn by the typeface rather than
   faked by skewing an upright face: the strokes keep their designed weight
   distribution and the letterforms are the ones Grilli Type drew for the angle. */
.hero__headline span {
  display: block;
}
.hero__headline .tilt-fwd { font-style: italic; }
.hero__headline .tilt-rev { font-family: var(--font-display-back); }

.hero__sub {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: calc(22 * var(--u));
  /* The eyebrow and the tag are the two boxes the design leaves untrimmed, so
     they keep their full leading and the 44/36 below them measure from the box
     edge rather than from the baseline. */
  line-height: normal;
  letter-spacing: 0.02em;
  margin: 0 0 calc(44 * var(--u));
}

.hero__tag {
  font-weight: 600;
  font-size: calc(22 * var(--u));
  line-height: normal;
  margin: 0 0 calc(36 * var(--u));
}
.hero__tag b { font-weight: 900; }

/* Red brand mark as a downward cue under the hero copy. */
.hero__cue {
  width: calc(60 * var(--u));
  height: auto;
}

/* ==========================================================================
   Intro name strip — 430px band, 868px measure
   ========================================================================== */

.intro {
  background: var(--white);
  padding: calc(120 * var(--u)) var(--gutter);
  text-align: center;
}

.intro__inner {
  max-width: calc(868 * var(--u));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: calc(30 * var(--u));
}

/* ==========================================================================
   Mut / Angst + Blickwinkel ändern — two 960x915 halves
   ========================================================================== */

.pivot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(915 * var(--u));
}

.pivot__stack {
  background: var(--navy);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(100 * var(--u)) var(--gutter);
}

/* Each word slot stacks all five options in one grid cell, so the box is as
   tall as the tallest and nothing shifts as they cycle. */
.pivot__word {
  display: grid;
  /* The cell would otherwise size to the widest option and overflow narrow
     viewports; minmax(0,…) lets it shrink and wrap instead. */
  grid-template-columns: minmax(0, 1fr);
  max-width: 100%;
  margin: 0;
  /* The cell is as wide as the longest option, so each word has to centre
     inside it or the short ones sit off-axis from the arrow. */
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-transform: uppercase;
  /* 78px is the design value and is what resolves at 1920. Below that the
     column narrows faster than --u shrinks, so also cap against the space the
     longest word needs. Re-measured from the shipped GT Planar Bold hmtx:
     ORIENTIERUNG is the widest at 7.480em (then UNSICHERHEIT at 7.379em);
     7.6 leaves a little margin. The old 8.3 was measured in Archivo 800. */
  font-size: min(calc(78 * var(--u)), calc((50vw - 2 * var(--gutter)) / 7.6));
  line-height: 1;
}

.pivot__opt {
  grid-area: 1 / 1;
  min-width: 0;
  overflow-wrap: break-word;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease);
}

.pivot__opt.is-active {
  opacity: 1;
  visibility: visible;
}

/* The arrow is the control — "bis du ihn drehst". Padding gives it a hit area,
   so its margins carry the design's gaps minus that padding. */
.pivot__turn {
  display: block;
  padding: calc(20 * var(--u));
  margin: calc(13 * var(--u)) 0 calc(36 * var(--u));
  border: 0;
  background: none;
  line-height: 0;
}

/* The angle accumulates in JS — 180° per press, always turning the same way —
   so the arrow alternates between pointing down and pointing up at the
   positive word. */
.pivot__arrow {
  width: calc(118 * var(--u));
  height: auto;
  transition: transform 0.55s var(--ease);
}

.pivot__content {
  background: var(--red);
  color: var(--white);
  padding: calc(100 * var(--u)) var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.pivot__inner {
  max-width: calc(717 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--u));
}

/* The one body block the design sets at 20px rather than the 18px workhorse;
   the 32px leading is shared with every other body block. */
.pivot__body { font-size: calc(20 * var(--u)); }
.pivot__body .tag { font-weight: 700; }

/* ==========================================================================
   Bio split — 714px text column at a 225px margin, 792px photo flush right
   ========================================================================== */

/* Columns and insets are percentages of the 1920 canvas rather than --u
   multiples: they land on the design's pixels at 1920 but stay proportional
   at every width, where --u's readability floor would overflow. */
/* The design leaves 189px of dead space between the copy and the photo, which
   reads as a gap rather than as breathing room. The text measure is widened
   from the design's 714px to 749px and the photo column from 792 to 864, which
   closes the gap to ~82px. Kept modest on purpose: at 18px, 749px is already
   around 83 characters a line, and going wider would hurt reading more than
   the empty strip hurt the layout. */
.split {
  display: grid;
  grid-template-columns: 55% 45%;
  padding: calc(116 * var(--u)) 0;
  align-items: start;
  /* Stop scaling at the design canvas: past 1920 the percentages would keep
     stretching the measure (111 characters a line at 2560) and reopen the very
     gap this section was widened to close. */
  max-width: calc(1920 * var(--u));
  margin: 0 auto;
}

.split__text {
  padding-left: 21.3%;
  display: flex;
  flex-direction: column;
  gap: calc(50 * var(--u));
}

/* Percentage of the content box, i.e. the column minus that left inset: at
   1920 that is 831px, so 90.1% gives the 749px measure and leaves the ~82px
   gap to the photo. No right padding — the leftover is the gap. */
.split__text > * { max-width: 90.1%; }

/* The photo stops short of the section's full height in the design. */
.split__media {
  aspect-ratio: 792 / 909;
}

/* ==========================================================================
   Full-bleed statement bands — 721px tall, 868px measure
   ========================================================================== */

.statement {
  position: relative;
  height: calc(721 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  overflow: hidden;
  padding: 0 var(--gutter);
}

.statement__overlay {
  position: absolute;
  inset: 0;
  background: rgba(4, 39, 89, 0.55);
}

.statement__content {
  position: relative;
  z-index: 1;
  max-width: calc(868 * var(--u));
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--u));
}

.statement__claim {
  font-size: calc(38 * var(--u));
  font-weight: 600;
  line-height: 1.17;
  margin: 0;
  text-box: trim-both cap alphabetic;
}

/* ==========================================================================
   Marquee — 96px outlined display type with the brand mark riding over it
   ========================================================================== */

.marquee {
  background: var(--white);
  overflow: hidden;
  padding: calc(56 * var(--u)) 0;
  white-space: nowrap;
}

.marquee__track {
  display: inline-flex;
  align-items: center;
  animation: marquee 26s linear infinite;
}

/* The design's fill is transparent; the letters read as an outline. Upright:
   the design sets this in the unslanted cut, not an italic one. */
.marquee__item {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: calc(96 * var(--u));
  line-height: 1.1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--red);
  padding: 0 calc(48 * var(--u));
  text-transform: uppercase;
}

/* The brand mark rides in the track, separating repetitions. */
.marquee__mark {
  flex: none;
  width: calc(185 * var(--u));
  height: auto;
}

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

/* ==========================================================================
   Keynote — 865px measure, centred
   ========================================================================== */

.rich-section {
  padding: calc(120 * var(--u)) var(--gutter);
  background: var(--white);
}

.rich-section__inner {
  max-width: calc(865 * var(--u));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: calc(50 * var(--u));
}

.rich-section__lede .accent { color: var(--red); }

/* ==========================================================================
   Quick wins — 1170px block: three 266px columns, 186px gaps, red rules
   ========================================================================== */

.quickwins {
  background: var(--tint);
  padding: calc(102 * var(--u)) var(--gutter);
}

.quickwins__inner {
  max-width: calc(1170 * var(--u));
  margin: 0 auto;
}

.quickwins__heading {
  margin: 0 0 calc(50 * var(--u));
}

.quickwins__grid {
  --qw-gap: calc(186 * var(--u));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--qw-gap);
}

.quickwins__item + .quickwins__item {
  border-left: calc(2 * var(--u)) solid var(--red);
  padding-left: calc(var(--qw-gap) / 2);
  margin-left: calc(var(--qw-gap) / -2);
}

.quickwins__item h3 {
  color: var(--navy);
  font-size: calc(26 * var(--u));
  line-height: calc(32 * var(--u));
  font-weight: 700;
  margin: 0;
}

.quickwins__item p {
  font-size: calc(18 * var(--u));
  line-height: calc(32 * var(--u));
  font-weight: 500;
  margin: 0;
}

/* ==========================================================================
   H.E.R.O. video block — 1770x996 photo inset 75px, 192px play badge
   ========================================================================== */

.method-video {
  background: var(--white);
  padding: calc(108 * var(--u)) calc(75 * var(--u));
}

.method-video__frame {
  aspect-ratio: 1770 / 996;
}

.method-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(192 * var(--u));
  height: calc(192 * var(--u));
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--white);
}
.method-video__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: hm-spin 18s linear infinite;
}
.method-video__ring text {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--white);
}
/* Outlined triangle, as in the design. */
.method-video__glyph {
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  fill: none;
  stroke: var(--white);
  stroke-width: 5;
}
.method-video__play:hover .method-video__ring { animation-duration: 8s; }

/* The player is added on the click and covers the still it replaces. */
.method-video__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.method-video__frame.is-playing .method-video__play { display: none; }
@keyframes hm-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   H.E.R.O. method split — navy copy left, red "01" panel right
   ========================================================================== */

.method {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(1153 * var(--u));
}

.method__body {
  background: var(--navy);
  color: var(--white);
  padding: calc(157 * var(--u)) var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.method__inner {
  max-width: calc(717 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--u));
}

/* This is the one section where the design sets 40 between the eyebrow and the
   title, not the 30 the other five use. */
.method__inner .heading-group {
  gap: calc(40 * var(--u));
}

.method__panel {
  position: relative;
  background: var(--red);
  color: var(--white);
  padding: calc(157 * var(--u)) var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Steps share one grid cell so the panel is sized by the longest caption and
   switching phases never moves the layout. */
.method__steps {
  display: grid;
  width: 100%;
}

.method__step {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease);
}

.method__step.is-active {
  opacity: 1;
  visibility: visible;
}

.method__digit {
  font-weight: 300;
  font-size: calc(90 * var(--u));
  color: var(--navy);
  line-height: 1.17;
  margin: 0 0 calc(46 * var(--u));
}

.method__caption {
  font-size: calc(46 * var(--u));
  font-weight: 600;
  line-height: 1.17;
  max-width: calc(567 * var(--u));
  margin: 0;
}

/* Phase rail hugging the right edge of the red panel. */
.method__rail {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(59 * var(--u));
  width: calc(33 * var(--u));
}
.method__rail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: max(1px, calc(2 * var(--u)));
  background: var(--white);
  transform: translateX(-50%);
}
.method__rail-dot {
  position: absolute;
  left: 0;
  padding: 0;
  width: calc(33 * var(--u));
  height: calc(38 * var(--u));
  border: max(1px, calc(2 * var(--u))) solid var(--white);
  border-radius: 50%;
  background: var(--red);
  transition: background 0.25s var(--ease);
}
.method__rail-dot:nth-of-type(1) { top: calc(197 * var(--u)); }
.method__rail-dot:nth-of-type(2) { top: calc(574 * var(--u)); }
.method__rail-dot:nth-of-type(3) { top: calc(978 * var(--u)); }

.method__rail-dot:hover { background: rgba(255, 255, 255, 0.45); }

.method__rail-dot.is-active {
  background: var(--white);
}
.method__rail-dot.is-active::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(17 * var(--u));
  height: calc(19 * var(--u));
  border-radius: 50%;
  background: var(--red);
}

/* ==========================================================================
   Buch — 792px cover flush left, 717px copy column
   ========================================================================== */

/* Mirrors the bio: same 749px measure, same ~82px gap to the photo, photo
   widened from the design's 792 to 864. Here the photo is on the left, so the
   gap is this column's left inset and the right inset is the page margin. */
.book {
  display: grid;
  grid-template-columns: 45% 55%;
  padding: calc(105 * var(--u)) 0;
  align-items: start;
  background: var(--white);
  max-width: calc(1920 * var(--u));
  margin: 0 auto;
}

.book__media {
  aspect-ratio: 792 / 910;
}

/* Insets are percentages of the column (1056 at 1920), chosen so the content
   box is exactly the 749px measure — no child cap needed on top. */
.book__content {
  padding-left: 7.77%;
  padding-right: 21.3%;
  display: flex;
  flex-direction: column;
  gap: calc(50 * var(--u));
}

/* Deviation from the design: the meta line and the order form left the text
   column and sit centred under both columns, so the form does not hang in the
   right column below the shorter book image. */
.book__order {
  grid-column: 1 / -1;
  width: 100%;
  max-width: calc(760 * var(--u));
  margin: calc(90 * var(--u)) auto 0;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--u));
}

.book__order .btn { align-self: center; }

.book__meta {
  font-size: calc(26 * var(--u));
  line-height: calc(38 * var(--u));
  font-weight: 500;
  text-align: center;
  text-box: trim-both cap alphabetic;
  margin: 0;
}

.book__examples { margin: 0; padding: 0; list-style: none; }
.book__examples li {
  position: relative;
  padding-left: calc(52 * var(--u));
  margin: 0 0 calc(32 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: calc(32 * var(--u));
  font-weight: 500;
}
.book__examples li:last-child { margin-bottom: 0; }
.book__examples li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(8 * var(--u));
  width: calc(32 * var(--u));
  height: calc(18 * var(--u));
  background: url("images/brand-mark.svg") left center / contain no-repeat;
}

/* ==========================================================================
   Referenzen — 868px measure on tint, centred pager dots
   ========================================================================== */

.references {
  padding: calc(146 * var(--u)) var(--gutter);
  background: var(--tint);
}

.references__inner {
  max-width: calc(868 * var(--u));
  margin: 0 auto;
}

.references__heading {
  margin: 0 0 calc(48 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(30 * var(--u));
}

/* Same one-cell stack: the carousel is as tall as the longest testimonial, so
   paging between them does not jump. */
.references__carousel {
  display: grid;
}

.quote {
  grid-area: 1 / 1;
  border-left: max(2px, calc(3 * var(--u))) solid var(--red);
  padding-left: calc(39 * var(--u));
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease);
}

.quote.is-active {
  opacity: 1;
  visibility: visible;
}

/* Trims against the 48px under the heading. The name and role below it are one
   text node in the design, so their leading is left alone. */
.quote blockquote {
  text-box-trim: trim-start;
  text-box-edge: cap alphabetic;
  margin: 0 0 calc(33 * var(--u));
  font-size: calc(22 * var(--u));
  line-height: calc(33 * var(--u));
  font-weight: 400;
}

.quote cite {
  display: block;
  font-style: normal;
  font-weight: 700;
  font-size: calc(18 * var(--u));
  line-height: calc(33 * var(--u));
}

.quote .role {
  display: block;
  font-weight: 400;
  font-size: calc(16 * var(--u));
  line-height: calc(26 * var(--u));
}

.references__dots {
  display: flex;
  justify-content: center;
  gap: calc(14 * var(--u));
  margin-top: calc(157 * var(--u));
}

.references__dot {
  padding: 0;
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  border-radius: 50%;
  border: max(2px, calc(2 * var(--u))) solid var(--navy);
  background: transparent;
  transition: background 0.25s var(--ease);
}

.references__dot:hover { background: rgba(4, 39, 89, 0.35); }

.references__dot.is-active {
  background: var(--navy);
}

/* ==========================================================================
   Final CTA — 576px measure on red
   ========================================================================== */

.cta-final {
  background: var(--red);
  color: var(--white);
  padding: calc(106 * var(--u)) var(--gutter);
  text-align: center;
}

.cta-final__inner {
  max-width: calc(576 * var(--u));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(30 * var(--u));
}

.cta-final__title {
  font-size: calc(46 * var(--u));
  max-width: calc(563 * var(--u));
  text-box: trim-both cap alphabetic;
}

.cta-final__body {
  font-size: calc(18 * var(--u));
  line-height: calc(32 * var(--u));
  font-weight: 500;
  text-box: trim-both cap alphabetic;
  /* The design gives the title 42 below it where the rest of the column has 30. */
  margin: calc(12 * var(--u)) 0 0;
}

.cta-final .btn { align-self: center; margin-top: calc(28 * var(--u)); }

/* ==========================================================================
   Anfrage-Formulare — the book order and the final CTA
   ========================================================================== */

/* Not in the Figma design: the forms replace the two plain buttons, so the
   fields borrow the button's border language and inherit each panel's color
   scheme through currentColor. */
.inquiry-form {
  display: flex;
  flex-direction: column;
  gap: calc(28 * var(--u));
  width: 100%;
  text-align: left;
}

.inquiry-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(28 * var(--u));
}

.inquiry-form__row--order {
  grid-template-columns: calc(150 * var(--u)) 1fr;
}

/* PLZ, Ort, Land: the postcode stays as narrow as the quantity above it. */
.inquiry-form__row--place {
  grid-template-columns: calc(150 * var(--u)) 1fr 1fr;
}

.inquiry-form__field {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  min-width: 0;
}

.inquiry-form__label {
  font-size: calc(15 * var(--u));
  line-height: calc(20 * var(--u));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.inquiry-form__field input,
.inquiry-form__field textarea {
  font: inherit;
  font-size: calc(18 * var(--u));
  line-height: calc(28 * var(--u));
  font-weight: 500;
  color: inherit;
  background: transparent;
  border: calc(3 * var(--u)) solid currentColor;
  border-radius: 0;
  padding: calc(12 * var(--u)) calc(16 * var(--u));
  width: 100%;
}

.inquiry-form__field textarea { resize: vertical; }

.inquiry-form__field input:focus-visible,
.inquiry-form__field textarea:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

/* A red ring would disappear on the red panel. */
.inquiry-form--on-red .inquiry-form__field input:focus-visible,
.inquiry-form--on-red .inquiry-form__field textarea:focus-visible {
  outline-color: var(--white);
}

/* The honeypot: off-screen rather than display:none, and only bots fill it. */
.inquiry-form__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: 0;
}

/* ==========================================================================
   Legal documents — Impressum, Datenschutz, AGB
   ========================================================================== */

.legal-page {
  max-width: calc(868 * var(--u));
  margin: 0 auto;
  padding: calc(120 * var(--u)) var(--gutter) calc(140 * var(--u));
}

.legal-page h1 {
  margin: 0 0 calc(40 * var(--u));
}

.legal-page__back {
  display: inline-block;
  margin-bottom: calc(40 * var(--u));
  font-weight: 600;
  font-size: calc(18 * var(--u));
}
.legal-page__back:hover { text-decoration: underline; }

/* Drawn rather than set as "←", which Public Sans has no glyph for — it fell
   back to a placeholder. A triangle also matches the brand mark. */
.legal-page__back::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 0.55em;
  border-style: solid;
  border-width: 0.3em 0.4em 0.3em 0;
  border-color: transparent var(--red) transparent transparent;
}

/* ==========================================================================
   Footer — 693px band, oversized wordmark bleeding off both edges
   ========================================================================== */

.site-footer {
  position: relative;
  background: var(--navy);
  color: var(--white);
  height: calc(693 * var(--u));
  overflow: hidden;
}

.site-footer__top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(40 * var(--u));
  padding: calc(63 * var(--u)) calc(43 * var(--u)) 0 calc(7 * var(--u));
}

.site-footer__mark {
  width: calc(214 * var(--u));
  height: auto;
  flex: none;
}

.site-footer__contact {
  font-size: calc(40 * var(--u));
  line-height: calc(60 * var(--u));
  font-weight: 600;
}
.site-footer__contact a:hover { text-decoration: underline; }

.site-footer__meta {
  margin-left: auto;
  display: flex;
  align-items: flex-end;
  gap: calc(66 * var(--u));
  align-self: flex-end;
  padding-bottom: calc(12 * var(--u));
}

.site-footer__address {
  font-size: calc(18 * var(--u));
  font-weight: 500;
  margin: 0;
}

.legal-links {
  display: flex;
  gap: calc(18 * var(--u));
  font-size: calc(18 * var(--u));
  font-weight: 500;
}
.legal-links a:hover { text-decoration: underline; }

/* Oversized wordmark anchoring the footer. This is the brand artwork, not
   type: the wordmark's face has a left-leaning A with a vertical right stem,
   and its umlaut is a white triangle seated in a V cut through the O's top —
   neither of which any web font will reproduce. Set from the same asset the
   logo uses (Figma exports it as a raster; there is no vector version).

   left/right bound it so the full wordmark is on screen at every width, and
   max-width stops it growing past its design size on wide viewports. */
.site-footer__wordmark {
  position: absolute;
  left: calc(36 * var(--u));
  right: calc(41 * var(--u));
  bottom: 0;
  max-width: calc(1843 * var(--u));
}

/* The art is 3488x381 with its cap line 9px down. A negative bottom margin of
   1.172% of the width drops the letter bottoms about a tenth of their height
   past the footer edge, the slight crossing the design has — expressed as a
   ratio so it holds at any rendered size. */
.site-footer__wordmark img {
  width: 100%;
  height: auto;
  margin-bottom: -1.172%;
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Responsive — below the desktop range the 1920 proportions stop working,
   so columns stack and the fixed band heights are released.
   ========================================================================== */

@media (max-width: 1100px) {
  :root {
    /* Below the desktop range, hold a readable floor instead of shrinking. */
    --u: 1px;
  }

  .site-header { padding: 18px var(--gutter); }
  .site-header.is-scrolled { padding: 12px var(--gutter); }
  .nav { display: none; }
  .nav-toggle { display: block; }
  .site-header__bar { position: relative; }

  .nav.is-open {
    display: flex;
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    background: rgba(4, 39, 89, 0.97);
    flex-direction: column;
    align-items: stretch;
    padding: 10px 20px 26px;
    gap: 4px;
  }
  .nav.is-open .nav__link { padding: 14px 6px; font-size: 18px; }
  .nav.is-open .nav__cta { margin: 10px 6px 0; text-align: center; font-size: 18px; }

  .hero {
    height: auto;
    min-height: 100svh;
  }
  .hero__content {
    padding: 140px var(--gutter) 80px;
    justify-content: center;
    min-height: 100svh;
  }
  /* Floor leaves room for the skew, which widens each line by a few px. */
  .hero__headline { font-size: clamp(34px, 7vw, 72px); }
  .hero__sub, .hero__tag { font-size: clamp(15px, 2vw, 22px); }

  /* Same cap, but the column is the full width once the halves stack. */
  .pivot__word { font-size: min(78px, calc((100vw - 2 * var(--gutter)) / 7.6)); }
  .pivot__arrow { width: clamp(72px, 20vw, 118px); }

  .section-title { font-size: clamp(32px, 5vw, 56px); }
  .section-title--md,
  .cta-final__title,
  .method__caption { font-size: clamp(26px, 4vw, 40px); }
  .statement__claim { font-size: clamp(22px, 3.4vw, 34px); }
  .body-lg { font-size: clamp(18px, 2.4vw, 24px); line-height: 1.55; }
  .body-md { font-size: 17px; line-height: 1.75; }
  .body-md p { margin-bottom: 26px; }
  .eyebrow { font-size: clamp(17px, 2.2vw, 22px); }

  .pivot,
  .split,
  .method,
  .book {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 0;
  }

  .split__text,
  .book__content {
    padding: 70px var(--gutter);
    max-width: none;
  }
  .split__text > *,
  .book__content > * { max-width: none; }

  /* The content column above already ends on 70px of padding. */
  .book__order {
    margin-top: 0;
    padding: 0 var(--gutter) 70px;
  }

  .split__media,
  .book__media {
    aspect-ratio: 16 / 11;
    order: -1;
  }

  /* bio-portrait.jpg is 1584x1818, taller than the 16/11 box, so `cover`
     throws away 40% of its height. Centred, that cut takes the head: Stefan's
     face sits in the top third of the frame. Anchor the crop to the top so the
     head survives and the frame loses the floor instead. */
  #antrieb .media-fill { object-position: 50% 0; }

  .statement { height: auto; min-height: 480px; padding: 90px 0; }

  .method__body, .method__panel { padding: 70px var(--gutter); }

  /* The rail's line and its three hand-placed dots are measured against the
     desktop panel's fixed height, so they cannot survive the stack. The same
     tablist becomes a row of dots under the caption instead — the pager the
     testimonials already use, and the only way to reach phases 2 and 3 on a
     phone. */
  .method__rail {
    position: static;
    width: auto;
    margin-top: 44px;
    display: flex;
    justify-content: center;
    gap: 18px;
  }
  .method__rail::before { display: none; }
  /* Selected through the rail to outrank the desktop rule that places each dot
     at its own `top`; the row lays them out now. */
  .method__rail .method__rail-dot {
    position: relative;
    top: auto;
    width: 26px;
    height: 26px;
  }
  /* A 26px circle is smaller than a fingertip, so the target reaches past it. */
  .method__rail-dot::before {
    content: "";
    position: absolute;
    inset: -9px;
  }
  .method__rail-dot.is-active::after {
    width: 12px;
    height: 12px;
  }
  .method-video { padding: 40px var(--gutter); }

  .quickwins__grid {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }
  .quickwins__item + .quickwins__item {
    border-left: none;
    border-top: 2px solid var(--red);
    padding-left: 0;
    margin-left: 0;
    padding-top: 30px;
  }

  .intro, .rich-section, .references, .cta-final, .quickwins {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .references__dots { margin-top: 60px; }

  .site-footer {
    height: auto;
    padding-top: 70px;
  }
  .site-footer__top {
    flex-wrap: wrap;
    padding: 0 var(--gutter);
    gap: 28px 40px;
  }
  .site-footer__contact { font-size: clamp(20px, 3.4vw, 32px); line-height: 1.5; }
  .site-footer__meta {
    margin-left: 0;
    align-self: auto;
    flex-wrap: wrap;
    gap: 12px 32px;
    padding-bottom: 0;
  }
  /* The footer grows with its content here, so the wordmark goes back in flow
     rather than being pinned to the bottom. The image's own negative margin
     keeps it crossing the edge. */
  .site-footer__wordmark {
    position: static;
    max-width: none;
    margin: 60px var(--gutter) 0;
  }
}

@media (max-width: 620px) {
  .marquee__item { font-size: clamp(40px, 12vw, 72px); }
  .marquee__mark { width: 90px; }
  .quote { padding-left: 24px; }
  .book__examples li { padding-left: 34px; }
  .book__examples li::before { width: 22px; height: 13px; top: 6px; }
  .inquiry-form__row,
  .inquiry-form__row--order,
  .inquiry-form__row--place { grid-template-columns: 1fr; }
}