/* Design frames: Intro 1730×1117 · Landing 1728×1518.56 */

:root {
  --ink: #000000;
  --rule: #00001b;
  --paper: #ffffff;
  --font-serif: "plantin", "Plantin MT Pro", "Times New Roman", Times, serif;
  /* Type scale */
  --font-20: clamp(18px, calc(20 * var(--u)), 24px);
  --font-18: clamp(16px, calc(18 * var(--u)), 22px);
  --lh-text: 1.25;
  /* Text insets: two tiers, scale with the grid but never below their px floor */
  --inset-12: max(12px, calc(12 * var(--u)));
  --inset-36: max(36px, calc(36 * var(--u)));
  /* 3-column grid: outer margin 182u and gap 80u at the design frame, both shrink
     linearly to their floor (40px / 20px) at the 900px breakpoint so the text
     columns keep their width */
  --columns-side: clamp(40px, calc(17.11vw - 114px), calc(182 * var(--u)));
  --columns-gap: clamp(20px, calc(7.229vw - 45.06px), calc(80 * var(--u)));
  /* Page content scales with width */
  --u: calc(100vw / 1730);
  /* Intro overlay keeps the original contain fit so copy stays in-frame */
  --intro-u: min(calc(100vw / 1730), calc(100dvh / 1117));
  --line: max(1px, calc(3 * var(--intro-u)));

  /* First viewport 80/20 — Figma image 894 / 1117 */
  --landing-split: calc(100dvh * 894 / 1117);
  --reveal-bottom: calc(100dvh - var(--landing-split));
  /* Hero image: fixed size, independent of its container. svh = viewport with the
     mobile browser bar shown, so the crop never changes when the bar collapses or
     when the hero collapses to the menu banner — containers only mask it.
     Same value on the reference page so the click-through keeps the crop. */
  --hero-img-h: calc(1.45 * 100svh * 894 / 1117);
  /* "Über uns" head: height of the short rule above the title (mobile: 12.78px) */
  --about-rule-top-h: calc(12.78 * var(--u));

  /* Intro grid */
  --anim-duration: 1.4s;
  --anim-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Bottom copy staggered fades */
  --fade-stagger: 0.28s;
  --fade-duration: 0.85s;
  --fade-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* After last chunk + 1s, in sequence:
     1. copy fades out
     2. H line drops and the south mask reveals the three column titles
     3. hero image + "ZAX, Ihr Partner für:" fade in together (600ms)
     main.js sums the same tokens for the scroll unlock — keep them plain values */
  --copy-hold: 1s;
  --copy-out-duration: 1.1s;
  --drop-duration: 1.1s;
  --hero-fade-duration: 0.6s;
  --landing-duration: var(--drop-duration);
  --t-chunks-done: calc(
    var(--anim-duration) + var(--fade-stagger) * 4 + var(--fade-duration)
  );
  --t-transition: calc(var(--t-chunks-done) + var(--copy-hold));
  --t-drop: calc(var(--t-transition) + var(--copy-out-duration));
  --t-hero: calc(var(--t-drop) + var(--drop-duration));
  --hero-collapse-duration: 0.65s;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Echte Kapitälchen für Versalfolgen — gesetzt von smallcaps.js.
   Plantin MT Pro regular hat c2sc/smcp; die Kursive im Kit nicht, darum keine Synthese. */
.caps {
  font-variant-caps: all-small-caps;
  font-synthesis: none;
  letter-spacing: 1px;
}

html {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}

html.is-scrollable {
  overflow: auto;
}

/* Intro finished: remove the fixed overlay entirely. Its masks and H line are parked
   at 100lvh, and iOS Safari does not re-resolve dvh when the toolbar collapses on
   scroll, so the line would otherwise reappear inside the viewport. */
html.is-scrollable .intro {
  display: none;
}

/* Skip grid intro when returning from Referenz — fade in image + menu only */
html.is-intro-done .intro,
html.is-intro-done .mask--e,
html.is-intro-done .mask--s,
html.is-intro-done .line--v,
html.is-intro-done .line--h,
html.is-intro-done .chunk--fade,
html.is-intro-done .copy,
html.is-intro-done .layer {
  animation: none !important;
  animation-delay: 0s !important;
  transition: none !important;
}

html.is-intro-done .intro {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.is-intro-done .mask--e {
  left: 100vw !important;
}

html.is-intro-done .mask--s {
  top: 100lvh !important;
}

html.is-intro-done .line--v {
  transform: translateX(100vw) !important;
  opacity: 0 !important;
}

html.is-intro-done .line--h {
  top: calc(100lvh + var(--line)) !important;
  opacity: 0 !important;
}

html.is-intro-done .copy,
html.is-intro-done .chunk--fade {
  opacity: 0 !important;
  visibility: hidden !important;
}

html.is-intro-done .hero,
html.is-intro-done .menu-pane,
html.is-intro-done .logo,
html.is-intro-done .lang {
  opacity: 0;
  animation: soft-in 0.85s var(--fade-ease) forwards !important;
  animation-delay: 0.05s !important;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  /* Hyphenation for all text (lang="de"): inherited by every text block */
  hyphens: auto;
  hyphenate-limit-chars: auto 6;
  -webkit-hyphenate-limit-lines: 3; /* Safari */
  hyphenate-limit-lines: 3;
}

.stage {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  background: var(--paper);
}

/* —— Fixed chrome —— */
.logo {
  position: fixed;
  z-index: 2;
  left: calc(36 * var(--u));
  top: calc(60 * var(--u));
  display: block;
  /* Never render smaller than the 71×32 SVG box */
  width: max(calc(70.9925 * var(--u)), 71px);
  height: max(calc(32.037 * var(--u)), 32px);
  overflow: hidden;
  transition:
    opacity 0.45s var(--fade-ease),
    visibility 0.45s;
}

.logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lang {
  position: fixed;
  z-index: 2;
  top: calc(36 * var(--u));
  right: calc(36 * var(--u));
  font-family: var(--font-serif);
  font-style: normal;
  font-size: var(--font-18);
  line-height: var(--lh-text);
  letter-spacing: 0.03em;
  color: var(--ink);
  text-decoration: none;
  transition:
    opacity 0.45s var(--fade-ease),
    visibility 0.45s;
}

html.is-menu-open .logo,
html.is-menu-open .lang,
html.is-menu-closing .logo,
html.is-menu-closing .lang {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}

/* —— Intro (fixed overlay) —— */
.intro {
  position: fixed;
  /* inset:0 fills the visual viewport so landing plus-icons cannot peek
     through the iOS Safari toolbar gap. min-height covers the large
     viewport so the H-line can still travel off the physical screen. */
  inset: 0;
  min-height: 100vh;
  min-height: 100lvh;
  z-index: 3;
  pointer-events: none;
}

/* Content sits under the masks; masks retract to reveal it */
.layer {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.mask {
  position: absolute;
  z-index: 3;
  background: var(--paper);
  pointer-events: none;
}

/* East of the vertical line — full height, left edge rides with V */
.mask--e {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  animation: mask-e var(--anim-duration) var(--anim-ease) forwards;
}

@keyframes mask-e {
  from {
    left: 0;
  }

  to {
    left: 100vw;
  }
}

/* South of the horizontal line — top edge locked to H (hard cut through menu) */
.mask--s {
  left: 0;
  right: 0;
  top: 0;
  /* Extend past the overlay so a short iOS visual viewport cannot leave a
     gap where the menu plus buttons show through under the toolbar. */
  bottom: -100vh;
  bottom: -100lvh;
  animation:
    line-h-intro var(--anim-duration) var(--anim-ease) forwards,
    line-h-drop var(--drop-duration) var(--anim-ease) forwards;
  animation-delay: 0s, var(--t-drop);
}

.line {
  position: absolute;
  z-index: 4;
  background: var(--rule);
  pointer-events: none;
}

.line--v {
  top: 0;
  left: 0;
  width: var(--line);
  height: 100%;
  animation: line-v var(--anim-duration) var(--anim-ease) forwards;
}

/* H stays opaque — it’s the cutting edge that reveals the menu */
.line--h {
  left: 0;
  top: 0;
  width: 100%;
  height: var(--line);
  opacity: 1;
  animation:
    line-h-intro var(--anim-duration) var(--anim-ease) forwards,
    line-h-drop var(--drop-duration) var(--anim-ease) forwards;
  animation-delay: 0s, var(--t-drop);
}

@keyframes line-v {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100vw);
  }
}

@keyframes line-h-intro {
  from {
    top: 0;
  }

  to {
    top: var(--landing-split);
  }
}

@keyframes line-h-drop {
  from {
    top: var(--landing-split);
  }

  to {
    /* Past the physical screen bottom so the rule leaves the viewport
       (100dvh parks it on the iOS toolbar). */
    top: 100vh;
    top: calc(100lvh + var(--line));
  }
}

.copy {
  position: absolute;
  inset: 0;
  animation: copy-out var(--copy-out-duration) var(--fade-ease) forwards;
  animation-delay: var(--t-transition);
}

@keyframes copy-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.lead {
  position: absolute;
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: calc(30 * var(--intro-u));
  line-height: calc(36 * var(--intro-u));
  letter-spacing: calc(0.6 * var(--intro-u));
  color: var(--ink);
}

.lead--top {
  left: calc(351 * var(--intro-u));
  top: calc(221.18359375 * var(--intro-u));
  width: calc(345.22 * var(--intro-u));
  white-space: nowrap;
}

.lead--bottom {
  left: calc(696 * var(--intro-u));
  top: calc(790 * var(--intro-u));
  width: calc(683 * var(--intro-u));
}

.chunk--fade {
  opacity: 0;
  animation: chunk-fade var(--fade-duration) var(--fade-ease) forwards;
  animation-delay: calc(
    var(--anim-duration) + var(--fade-stagger) * (var(--i) + 1)
  );
}

@keyframes chunk-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* —— Landing (document flow, scrollable) —— */
.landing {
  position: relative;
  z-index: 1;
  width: 100%;
  background: var(--paper);
}

.hero {
  position: relative;
  display: block;
  width: 100%;
  height: var(--landing-split);
  overflow: hidden;
  background: var(--paper);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  animation: soft-in var(--hero-fade-duration) var(--fade-ease) forwards;
  animation-delay: var(--t-hero);
  transition: height var(--hero-collapse-duration) var(--anim-ease);
}

html.is-menu-open .hero {
  height: 50px;
}

.hero img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 145%; /* fallback for browsers without svh */
  height: var(--hero-img-h);
  object-fit: cover;
  object-position: center top;
}

.partner {
  position: absolute;
  z-index: 3;
  left: 50%;
  /* Figma: top 859 over image edge 894 — tracks hero bottom */
  top: calc(var(--landing-split) - 35 * var(--u));
  /* Same width as the centre column so the label stays flush with its text */
  width: min(
    600px,
    max(
      calc(402 * var(--u)),
      calc((100% - 2 * var(--columns-side) - 2 * var(--columns-gap)) / 3)
    )
  );
  margin: 0;
  padding: calc(11 * var(--u)) 0 0;
  transform: translateX(-50%);
  background: var(--paper);
  opacity: 0;
  animation: soft-in var(--hero-fade-duration) var(--fade-ease) forwards;
  animation-delay: var(--t-hero);
}

/* After intro: rise + fade together with the hero collapse */
html.is-scrollable .partner {
  animation: none;
  opacity: 1;
  transition:
    top var(--hero-collapse-duration) var(--anim-ease),
    opacity var(--hero-collapse-duration) var(--anim-ease);
}

html.is-scrollable.is-menu-open .partner {
  animation: none !important;
  top: calc(50px - 35 * var(--u));
  opacity: 0;
  pointer-events: none;
}

.partner__label {
  display: block;
  /* Vertical text padding follows the (clamped) type size, not the viewport */
  padding: calc(0.35 * var(--font-20)) var(--inset-12) calc(0.2 * var(--font-20));
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: var(--font-20);
  line-height: var(--lh-text);
  letter-spacing: 0.03em;
}

.partner__rule {
  display: block;
  width: calc(72 * var(--u));
  height: calc(24.78 * var(--u));
  object-fit: contain;
  object-position: left center;
}

/* Columns: already painted under the south mask — hard-cut reveal as H drops */
.columns {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--columns-gap);
  width: 100%;
  padding: calc(70 * var(--u)) var(--columns-side) 0;
  background: transparent;
}

.col {
  /* Design width as basis; grows to fill what the shrinking side margin frees up */
  flex: 1 1 calc(402 * var(--u));
  max-width: min(100%, 600px); /* text columns never wider than 600px */
}

.col--2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.nav-block {
  width: 100%;
}

.nav__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(0.6 * var(--font-20));
  width: 100%;
  margin: 0;
  /* Right padding reserves the icon slot: the icon sits absolutely, so the 35px
     icon never makes a single-line row taller than its text (keeps row rhythm equal) */
  position: relative;
  padding: 0 calc(var(--inset-12) + 35px + 0.6 * var(--font-20)) 0 var(--inset-12);
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
}

.nav__label {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: calc(0.35 * var(--font-20)) 0 calc(0.2 * var(--font-20));
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: var(--font-20);
  line-height: var(--lh-text);
  letter-spacing: 0.02em;
  /* Hard fallback: a word that still can't be hyphenated wraps instead of running into the icon */
  overflow-wrap: anywhere;
}

.nav__icon {
  position: absolute;
  top: 0;
  right: var(--inset-12);
  display: block;
  width: 35px;
  height: 35px;
  min-width: 35px;
  min-height: 35px;
  object-fit: contain;
  transform-origin: center;
  transition: transform 0.4s var(--anim-ease);
}

.nav-block.is-open > .nav__item .nav__icon {
  transform: rotate(45deg);
}

/* Accordion panel */
.submenu,
.subpanel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s var(--anim-ease);
}

.nav-block.is-open > .submenu,
.subitem.is-open > .subpanel {
  grid-template-rows: 1fr;
}

.submenu__inner,
.subpanel__inner {
  overflow: hidden;
  min-height: 0;
}

/* Space between a row and its opened content — collapses with the panel */
.submenu__inner > :first-child {
  margin-top: calc(1.25 * var(--font-20));
}

.subpanel__inner > :first-child,
.about__panel-inner > :first-child {
  margin-top: calc(1.056 * var(--font-18));
}

.submenu__inner {
  display: flex;
  flex-direction: column;
  /* Row rhythm follows the type size, not the viewport.
     Top spacing sits on the first child, not as padding here: padding on the
     collapsed (0fr) panel would keep its height and leak into the closed state. */
  gap: calc(1.25 * var(--font-20));
}

.subitem__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(0.6 * var(--font-20));
  width: 100%;
  margin: 0;
  position: relative;
  padding: 0 calc(var(--inset-12) + 35px + 0.6 * var(--font-20)) 0 var(--inset-12);
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.subitem__copy {
  flex: 1;
  min-width: 0;
  padding: calc(0.35 * var(--font-20)) 0 calc(0.2 * var(--font-20));
  /* Same fallback as .nav__label */
  overflow-wrap: anywhere;
}

.subitem__title,
.subitem__tag {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--font-20);
  line-height: var(--lh-text);
  letter-spacing: 0.02em;
}

.subitem__title {
  font-style: normal;
  font-weight: 400;
}

.subitem__tag {
  font-style: italic;
  font-weight: 400;
}

.subitem__icon {
  position: absolute;
  top: 0;
  right: var(--inset-12);
  display: block;
  width: 35px;
  height: 35px;
  min-width: 35px;
  min-height: 35px;
  object-fit: contain;
  transform-origin: center;
  transition: transform 0.4s var(--anim-ease);
}

.subitem.is-open > .subitem__row .subitem__icon {
  transform: rotate(45deg);
}

.subpanel__inner {
  display: flex;
  flex-direction: column;
  gap: calc(1.056 * var(--font-18));
}

.subpanel__text {
  margin: 0;
  padding: 0 var(--inset-12);
  font-family: var(--font-serif);
  font-size: var(--font-18);
  line-height: var(--lh-text);
  letter-spacing: 0.02em;
}

.subpanel__list {
  margin: 0;
  padding: 0 var(--inset-12);
  list-style: none;
}

.subpanel__list li {
  position: relative;
  padding-left: calc(1.333 * var(--font-18));
  font-family: var(--font-serif);
  font-size: var(--font-18);
  line-height: var(--lh-text);
  letter-spacing: 0.02em;
}

.subpanel__list li + li {
  margin-top: 0;
}

.subpanel__list li::before {
  content: "–";
  position: absolute;
  left: 0;
  width: calc(21 * var(--u));
}

.refs {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.refs__title {
  margin: 0;
  padding: 0 0 0 var(--inset-36);
  font-family: var(--font-serif);
  font-size: var(--font-18);
  line-height: var(--lh-text);
  letter-spacing: 0.02em;
}

.refs__rule {
  width: calc(72 * var(--u));
  height: max(1px, calc(2.78 * var(--u)));
  margin-top: 4px; /* air between "Referenzen:" and the rule */
  margin-bottom: calc(0.833 * var(--font-18));
  background: var(--rule);
}

.refs__item {
  display: flex;
  align-items: flex-start;
  gap: calc(0.556 * var(--font-18));
  width: 100%;
  padding: 0 0 calc(0.389 * var(--font-18)) var(--inset-36);
  color: var(--ink);
  text-decoration: none;
}

.refs__name {
  flex: 1;
  min-width: 0;
  padding: calc(0.444 * var(--font-18)) 0 calc(0.333 * var(--font-18));
  font-family: var(--font-serif);
  font-size: var(--font-18);
  line-height: var(--lh-text);
  letter-spacing: 0.02em;
  font-variant-numeric: oldstyle-nums proportional-nums;
}

.refs__arrow {
  flex-shrink: 0;
  width: 35px;
  height: 35px;
  min-width: 35px;
  min-height: 35px;
  object-fit: contain;
}

.refs__thumb {
  flex-shrink: 0;
  width: calc(80 * var(--u));
  height: calc(80 * var(--u));
  object-fit: cover;
}

html.is-menu-open .columns {
  padding-top: calc(40 * var(--u));
}

/* Menu open: white pane is capped under the 50px banner; scroll only inside it.
   Must beat html.is-scrollable / is-intro-done after returning from Referenz. */
html.is-menu-open,
html.is-scrollable.is-menu-open,
html.is-intro-done.is-menu-open {
  overflow: hidden !important;
}

html.is-menu-open .landing,
html.is-scrollable.is-menu-open .landing,
html.is-intro-done.is-menu-open .landing {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  background: var(--paper);
}

html.is-menu-open .hero,
html.is-scrollable.is-menu-open .hero,
html.is-intro-done.is-menu-open .hero {
  flex-shrink: 0;
  height: 50px;
}

.menu-pane {
  position: relative;
  width: 100%;
  background: var(--paper);
}

html.is-menu-open .menu-pane,
html.is-scrollable.is-menu-open .menu-pane,
html.is-intro-done.is-menu-open .menu-pane {
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(100dvh - 50px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--paper);
}

html.is-menu-open .about-row {
  margin-top: calc(80 * var(--u));
}

/* Same 3-col track as .columns so footer sits under centre; 300 below tallest L/C/R */
.about-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--columns-gap);
  width: 100%;
  margin-top: calc(300 * var(--u));
  padding: 0 var(--columns-side) calc(45 * var(--u));
}

.about {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 calc(402 * var(--u)); /* same track as .col */
  max-width: min(100%, 600px);
}

.about__toggle {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(0.6 * var(--font-20));
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.about__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.about__icon {
  flex-shrink: 0;
  display: block;
  /* Centre the icon on the title line, not on the whole head (rule + title + rule):
     top rule + title padding-top + half the title line, minus half the icon */
  margin-top: calc(
    var(--about-rule-top-h) + 0.35 * var(--font-20) +
      (var(--lh-text) * var(--font-20)) / 2 - 17.5px
  );
  width: 35px;
  height: 35px;
  min-width: 35px;
  min-height: 35px;
  object-fit: contain;
  transform-origin: center;
  transition: transform 0.4s var(--anim-ease);
}

.about.is-open > .about__toggle .about__icon {
  transform: rotate(45deg);
}

.about__panel {
  width: 100%;
}

.about__panel-inner {
  display: flex;
  flex-direction: column;
  gap: calc(1.056 * var(--font-18));
}

.about__narrative,
.about__founder,
.about__refs,
.about__cv {
  margin: 0;
  padding: 0 0 0 var(--inset-36);
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: var(--font-18);
  line-height: var(--lh-text);
  letter-spacing: 0.02em;
}

.about__founder {
  font-style: italic;
}

.about__refs {
  color: var(--ink);
  text-decoration: none;
}

.about__refs:hover {
  text-decoration: underline;
}

.about__cv {
  opacity: 0.55;
}

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

.about__body a:hover {
  text-decoration: underline;
}

.submenu__inner--direct {
  gap: calc(1.056 * var(--font-18));
}

.submenu__inner--direct > .subitem__tag {
  padding: 0 var(--inset-12);
}

.about__rule {
  display: block;
  width: calc(72 * var(--u));
  height: calc(24.78 * var(--u));
  object-fit: contain;
  object-position: left center;
}

.about__rule--top {
  height: var(--about-rule-top-h);
}

.about__title {
  display: block;
  margin: 0;
  padding: calc(0.35 * var(--font-20)) 0 calc(0.2 * var(--font-20)) var(--inset-12);
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: var(--font-20);
  line-height: var(--lh-text);
  letter-spacing: 0.02em;
}

.about__body {
  margin: 0;
  padding: 0 0 calc(0.389 * var(--font-18)) var(--inset-36);
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: var(--font-18);
  line-height: var(--lh-text);
  letter-spacing: 0.02em;
}

@keyframes soft-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* —— Reference page (Figma 444:3241) —— */
/* Reverse grid: lines come from landing’s outer edge → settle at 80%w / 20% from bottom */
html.is-ref {
  --landing-split: calc(100dvh * 894 / 1117);
  --reveal-bottom: calc(100dvh - var(--landing-split));
  --ref-v-x: 80vw;
  --ref-main-w: 80vw;
  --ref-side-w: 20vw;
  --ref-slide-duration: 0.9s;
  /* Exit to home: images fade out first, then the lines reverse (--anim-duration) */
  --ref-exit-fade: 0.55s;
  /* "Vorheriges Projekt": copy fades out (no sheet wipe), then fades back in */
  --ref-copy-fade: 0.45s;
}

html.is-ref .logo {
  /* Above opacity-animated carousel (own compositor layer) and chrome */
  z-index: 10000;
  opacity: 1 !important;
  visibility: visible;
  pointer-events: auto;
  transform: translateZ(0);
}

html.is-ref .lang {
  z-index: 10000;
  opacity: 1;
}

/* V: from right edge ← left to 80% — stays as the live divider (no handoff) */
html.is-ref .ref__v[data-v="divider"] {
  animation: line-v-ref var(--anim-duration) var(--anim-ease) forwards;
}

html.is-ref .ref__v[data-v="edge"] {
  opacity: 1;
  left: 100%;
  animation: none;
}

/* H: from bottom ↑ to 80% — stage-level, always the topmost paint layer */
html.is-ref .ref__h,
html.is-ref .line--h.ref__h {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 9999;
  width: 100%;
  height: var(--line);
  margin: 0;
  opacity: 1 !important;
  background: var(--rule);
  pointer-events: none;
  animation: line-h-ref var(--anim-duration) var(--anim-ease) forwards;
  animation-delay: 0s;
}

html.is-ref .stage--ref {
  position: relative;
  isolation: isolate;
}

@keyframes line-v-ref {
  from {
    left: 100vw;
  }

  to {
    left: var(--ref-v-x);
  }
}

/* Peek strip rides with the V line: already loaded, slides in from the right */
@keyframes peek-with-v {
  from {
    left: 100vw;
    width: 0;
  }

  to {
    left: var(--ref-v-x);
    width: var(--ref-side-w);
  }
}

@keyframes line-h-ref {
  from {
    top: 100vh;
    top: 100lvh;
  }

  to {
    top: var(--landing-split);
  }
}

/* Mask reverses with the lines: full open → image framed between them (80×80) */
html.is-ref .ref__frame .layer {
  animation: reveal-ref var(--anim-duration) var(--anim-ease) forwards;
}

@keyframes reveal-ref {
  from {
    clip-path: inset(0 0 0 0);
  }

  to {
    clip-path: inset(0 20% 20% 0);
  }
}

@keyframes reveal-ref-out {
  from {
    clip-path: inset(0 20% 20% 0);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes soft-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* Exit: fade projects out while lines reverse back out */
html.is-ref.is-ref-exiting {
  pointer-events: none;
}

html.is-ref.is-ref-exiting .ref__frame .layer {
  z-index: 6;
  animation: reveal-ref-out var(--anim-duration) var(--anim-ease) forwards;
}

html.is-ref.is-ref-exiting .ref__carousel,
html.is-ref.is-ref-exiting .ref__below,
html.is-ref.is-ref-exiting .ref__sheet,
html.is-ref.is-ref-exiting .ref__v[data-v="edge"] {
  animation: none !important;
  transition: opacity var(--ref-exit-fade) var(--fade-ease);
  opacity: 0;
}

html.is-ref.is-ref-exiting .logo {
  transition: opacity 0.45s var(--fade-ease);
  opacity: 0 !important;
}

.ref {
  position: relative;
  width: 100%;
  background: var(--paper);
}

.ref__frame {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--paper);
}

.ref__frame .layer {
  z-index: 1;
  /* White wipe only — images live in the carousel above */
  background: var(--paper);
}

.ref__frame .line {
  z-index: 4;
}

/* Full-page vertical rails — top to bottom of the article */
.ref__v {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--line);
  background: var(--rule);
  pointer-events: none;
  z-index: 5;
  transition: none;
  will-change: left;
}

.ref__v[data-v="divider"] {
  left: 100vw; /* intro animates → 80vw */
}

.ref__v[data-v="edge"] {
  left: 100%;
}

/* Sheet below the H-line — leading edge locked to the traveling divider */
.ref__sheet {
  position: absolute;
  top: calc(var(--landing-split) + var(--line));
  left: 80vw;
  right: 0;
  bottom: 0;
  z-index: 4;
  background: var(--paper);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: none;
}

.ref.is-wiping .ref__sheet {
  opacity: 1;
  visibility: visible;
}

.ref__carousel {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--landing-split);
  opacity: 1;
}

/* Images are preloaded and move with the lines — the panels themselves never fade */
html.is-ref .ref__panel,
html.is-ref .ref__panel-media,
html.is-ref .ref__panel img {
  opacity: 1;
  animation: none;
}

/* Entering from the Referenzen list: the image fades in once the lines have
   settled — same duration as the home hero. (From the home hero it stays
   visible, see html.is-ref-from-home below.) */
html.is-ref .ref__carousel {
  opacity: 0;
  animation: soft-in var(--hero-fade-duration) var(--fade-ease) forwards;
  animation-delay: var(--anim-duration);
}

html.is-ref .ref__panel[data-slot="peek"] {
  left: 100vw;
  width: 0;
  animation: peek-with-v var(--anim-duration) var(--anim-ease) forwards;
}

/* From home: same — image already there; peek still rides in with the V line */
html.is-ref-from-home .ref__carousel,
html.is-ref-from-home .ref__panel[data-slot="main"],
html.is-ref-from-home .ref__panel[data-slot="main"] .ref__panel-media,
html.is-ref-from-home .ref__panel[data-slot="main"] img {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}

.ref__panel {
  position: absolute;
  top: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  transition: none;
}

.ref__panel-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #d9d9d9;
}

/* Full-bleed under the peek — same crop as home .hero img */
.ref__panel-media img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100vw;
  height: 145%; /* fallback for browsers without svh */
  height: var(--hero-img-h);
  max-width: none;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
}

.ref__panel[data-slot="main"] {
  left: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none;
}

.ref__panel[data-slot="peek"] {
  left: var(--ref-v-x);
  width: var(--ref-side-w);
  z-index: 2;
  cursor: pointer;
  background: var(--paper);
}

.ref__panel[data-slot="peek"] .ref__panel-media {
  background: var(--paper);
}

/* After intro: freeze peek at the 80/20 slot (not while sliding) */
html.is-ref-ready:not(:has(.ref__carousel.is-sliding)) .ref__panel[data-slot="peek"],
html.is-ref-ready .ref__panel[data-slot="peek"]:not(.is-incoming) {
  animation: none !important;
  left: var(--ref-v-x);
  width: var(--ref-side-w);
}

html.is-ref-ready .ref__carousel.is-sliding .ref__panel.is-incoming {
  animation: none !important;
  /* left/width driven inline with the V line */
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 5;
  background: transparent;
}

html.is-ref-ready .ref__carousel.is-sliding .ref__panel.is-incoming .ref__panel-media,
html.is-ref-ready .ref__carousel.is-sliding .ref__panel.is-incoming img {
  opacity: 1 !important;
  visibility: visible !important;
}

html.is-ref-ready .ref__carousel.is-sliding .ref__panel.is-advancing {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 4;
}

.ref__panel[data-slot="wait"] {
  left: 100%;
  width: var(--ref-side-w);
  z-index: 1;
  pointer-events: none;
}

/* During next-slide, JS drives left edges; keep layers + no CSS left fights */
html.is-ref .ref__carousel.is-sliding .ref__panel.is-incoming,
.ref__carousel.is-sliding .ref__panel.is-incoming {
  z-index: 3;
  animation: none !important;
  /* left/width set inline in lockstep with the V line */
}

.ref__carousel.is-sliding .ref__panel.is-advancing {
  z-index: 2;
  animation: none !important;
}

.ref__carousel.is-sliding .ref__panel.is-cover {
  z-index: 1;
}

/* Reverse: main shrinks to peek; previous (under) stays full-bleed; old peek exits right */
.ref__carousel.is-sliding-prev .ref__panel.is-revealing {
  left: 0;
  width: 100%;
  z-index: 1;
}

.ref__carousel.is-sliding-prev .ref__panel.is-outgoing {
  left: var(--ref-v-x);
  width: var(--ref-side-w);
  z-index: 3;
  transition:
    left var(--ref-slide-duration) var(--anim-ease),
    width var(--ref-slide-duration) var(--anim-ease);
}

.ref__carousel.is-sliding-prev .ref__panel.is-retreating {
  left: 100%;
  z-index: 2;
  transition: left var(--ref-slide-duration) var(--anim-ease);
}

.ref__carousel.is-snap .ref__panel {
  transition: none !important;
}

.ref__below {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 0;
  margin-top: calc(var(--landing-split) - 100dvh);
  padding-top: calc(16 * var(--u));
  padding-bottom: 300px;
  box-sizing: border-box;
  opacity: 0;
  animation: soft-in 0.85s var(--fade-ease) forwards;
  animation-delay: var(--anim-duration);
}

.ref__below.is-copy-fade {
  animation: soft-in 0.85s var(--fade-ease) forwards;
}

.ref__nav {
  position: absolute;
  z-index: 2;
  top: calc(16 * var(--u));
  font-family: var(--font-serif);
  font-size: var(--font-18);
  line-height: var(--lh-text);
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  font-variant-numeric: oldstyle-nums proportional-nums;
  white-space: nowrap;
}

.ref__nav--prev {
  left: calc(36 * var(--u));
  display: none !important;
}

.ref__nav--prev.is-visible {
  display: block !important;
}

.ref__nav--next {
  /* Anchored to the right edge so the label never clips (design slot ends 35u from the edge) */
  right: calc(35 * var(--u));
  text-align: right;
}

.ref__title {
  position: absolute;
  left: calc(698 * var(--u));
  top: calc(16 * var(--u));
  width: calc(303 * var(--u));
  margin: 0;
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: var(--font-20);
  line-height: var(--lh-text);
  letter-spacing: 0.02em;
  font-variant-numeric: oldstyle-nums proportional-nums;
}

.ref__project {
  position: relative;
  left: calc(1015 * var(--u));
  top: auto;
  width: calc(367 * var(--u));
  display: flex;
  flex-direction: column;
  gap: var(--font-20);
  padding: 0 var(--inset-12) 0 0;
}

.ref__lead {
  margin: 0;
  padding: 0;
  font-family: var(--font-serif);
  font-size: var(--font-20);
  line-height: var(--lh-text);
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

.ref__kompetenzen {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.ref__kompetenzen-title {
  margin: 0;
  padding: 0 0 0 var(--inset-36);
  font-family: var(--font-serif);
  font-size: var(--font-18);
  line-height: var(--lh-text);
  letter-spacing: 0.02em;
}

.ref__kompetenzen-rule {
  display: block;
  width: calc(72 * var(--u));
  height: max(1px, calc(2.78 * var(--u)));
  margin-top: 4px; /* air between "Kompetenzen:" and the rule, same as .refs__rule */
  margin-bottom: calc(0.722 * var(--font-18));
  object-fit: fill;
}

.ref__skill {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  padding: 0 0 0 var(--inset-36);
  color: var(--ink);
  text-decoration: none;
}

.ref__skill + .ref__skill {
  margin-top: calc(0.722 * var(--font-18));
}

.ref__skill span {
  padding: calc(0.444 * var(--font-18)) 0 calc(0.333 * var(--font-18));
  font-family: var(--font-serif);
  font-size: var(--font-18);
  line-height: var(--lh-text);
  letter-spacing: 0.02em;
  font-variant-numeric: oldstyle-nums proportional-nums;
}

.ref__skill img {
  flex-shrink: 0;
  width: 35px;
  height: 35px;
  min-width: 35px;
  min-height: 35px;
  object-fit: contain;
}

.ref__meta {
  display: flex;
  flex-direction: column;
  gap: calc(1.722 * var(--font-18));
  width: 100%;
}

.ref__meta-block {
  margin: 0;
  padding: 0 0 0 var(--inset-36);
  font-family: var(--font-serif);
  font-size: var(--font-18);
  line-height: var(--lh-text);
  letter-spacing: 0.02em;
  font-variant-numeric: oldstyle-nums proportional-nums;
}

.ref__meta-label,
.ref__meta-value {
  display: block;
}

.ref__track {
  letter-spacing: 0.1em;
}

.ref__track--wide {
  letter-spacing: 0.2em;
}

.ref__about {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding-top: calc(280 * var(--u));
}

.ref__about .about__body {
  padding-bottom: 0;
}

@media (max-width: 900px) {
  :root {
    --u: calc(100vw / 900);
    /* One thickness for every V and H line on mobile (was 2px for H only, 1px for V) */
    --line: 2px;
    --about-rule-top-h: 12.78px;
  }

  .logo {
    left: 24px;
    top: 48px;
    width: 71px;
    height: 32px;
  }

  .lead {
    font-size: 27px;
    line-height: 1.25;
    letter-spacing: 0.02em;
    white-space: normal;
  }

  /* Fixed 4-line break on phones:
     Wir sehen Strategien / für Werte, Potenziale / und Projekte / in Immobilien.
     Chunks 1 and 4 start a line; the <br> after chunk 3 supplies the other break. */
  .lead--bottom .chunk:nth-of-type(1),
  .lead--bottom .chunk:nth-of-type(4) {
    display: block;
  }

  .lead--bottom .chunk {
    white-space: nowrap;
  }

  .lead--top {
    left: 12px;
    top: 22vh;
    width: min(345px, calc(100% - 24px));
  }

  .lead--bottom {
    left: 12px;
    right: 12px;
    top: auto;
    bottom: calc(var(--reveal-bottom) + 48px);
    width: auto;
  }

  .columns {
    flex-direction: column;
    align-items: stretch;
    gap: 25px;
    padding: 0;
  }

  .col {
    flex: 0 0 auto;
    width: 100%;
  }

  .about-row,
  html.is-menu-open .about-row {
    flex-direction: column;
    gap: 0;
    margin-top: 48px;
    padding: 0 12px 48px 0;
  }

  .about-row > .col {
    display: none;
  }

  .about {
    flex: 0 0 auto;
    width: 100%;
  }

  .nav__label,
  .about__title {
    font-size: var(--font-20);
    line-height: var(--lh-text);
  }

  .about__title {
    padding-left: var(--inset-12);
  }

  .about__body,
  .about__narrative,
  .about__founder,
  .about__refs,
  .about__cv {
    font-size: var(--font-18);
    line-height: var(--lh-text);
    text-indent: 0;
    padding-left: var(--inset-36);
  }

  .about__icon {
    width: 35px;
    height: 35px;
    min-width: 35px;
    min-height: 35px;
  }

  /* Partner line is the first row of the white body — not a notch on the image */
  .partner {
    position: relative;
    left: auto;
    top: auto;
    z-index: 2;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    transform: none;
    background: var(--paper);
  }

  html.is-scrollable .partner {
    transition: none;
  }

  html.is-menu-open .partner,
  html.is-scrollable.is-menu-open .partner,
  html.is-intro-done.is-menu-open .partner {
    top: auto;
    opacity: 1;
    pointer-events: auto;
    flex-shrink: 0;
  }

  .partner__label {
    padding: 19px 12px 4px;
  }

  .partner__rule {
    width: 72px;
    height: 24.78px;
  }

  .about__rule,
  .about__rule--top {
    width: 72px;
    height: 24.78px;
    object-fit: fill;
  }

  .about__rule--top {
    height: var(--about-rule-top-h);
  }

  /* 36px tier, same as .about__body; right inset matches the rows above */
  .refs__title {
    padding-left: var(--inset-36);
  }

  .refs__item {
    padding-left: var(--inset-36);
    padding-right: var(--inset-12);
  }

  .refs__rule {
    width: 72px;
    height: 2.7px;
  }

  .refs__thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
  }

  .nav__icon,
  .subitem__icon,
  .refs__arrow {
    width: 35px;
    height: 35px;
    min-width: 35px;
    min-height: 35px;
  }

  html.is-menu-open .columns {
    padding-top: 0;
  }

  .lang {
    right: 20px;
    top: 20px;
    font-size: var(--font-18);
  }
}

/* Reference page stacks earlier than the rest of the site: the desktop layout
   squeezes .ref__project below ~250px and clips "Nächstes Projekt" under 1200px */
@media (max-width: 1200px) {
  .ref__kompetenzen-rule {
    width: 72px;
    height: 2.7px;
  }

  html.is-ref {
    --ref-v-x: 80vw;
    --ref-main-w: 80vw;
    --ref-side-w: 20vw;
  }

  /* Frame only as tall as the image — no empty 20% paper below the H-line */
  .ref__frame {
    height: var(--landing-split);
  }

  .ref__below {
    margin-top: 0;
    min-height: 0;
    width: var(--ref-v-x);
    max-width: 80vw;
    padding: 15px 12px 300px 0;
    box-sizing: border-box;
  }

  .ref__nav--prev,
  .ref__nav--next,
  .ref__nav--prev.is-visible {
    display: none !important;
  }

  .ref__title,
  .ref__project {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .ref__title {
    display: block;
    margin: 0;
    padding-left: var(--inset-12);
  }

  .ref__project {
    margin-top: 12px;
    padding: 0;
    max-width: 600px;
  }

  .ref__lead,
  .ref__about .about__title {
    padding-left: var(--inset-12);
  }

  .ref__meta-block,
  .ref__skill,
  .ref__kompetenzen-title,
  .ref__about .about__body {
    padding-left: var(--inset-36);
  }

  .ref__about {
    /* 50px from Zeitraum to the rule; cancel the project flex gap */
    padding-top: 50px;
    margin-top: calc(-1 * var(--font-20)); /* cancels the .ref__project gap */
    padding-bottom: 0;
  }

  .ref__about .about__body {
    padding-left: var(--inset-36);
    padding-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .layer,
  .mask--e,
  .mask--s,
  .line--v,
  .line--h,
  .chunk--fade,
  .copy,
  .hero,
  .columns,
  .partner,
  .lang {
    animation: none;
  }

  .mask--e {
    left: 100vw;
  }

  .mask--s {
    top: 100lvh;
  }

  .line--v {
    transform: translateX(100vw);
  }

  .line--h {
    opacity: 0;
  }

  .chunk--fade,
  .hero,
  .partner,
  .lang {
    opacity: 1;
  }

  .copy {
    opacity: 0;
  }

  html.is-ref .ref__v[data-v="divider"] {
    left: var(--ref-v-x);
    animation: none;
  }

  html.is-ref .ref__v[data-v="edge"] {
    left: 100%;
    opacity: 1;
    animation: none;
  }

  html.is-ref .ref__panel[data-slot="peek"] {
    left: var(--ref-v-x);
    width: var(--ref-side-w);
    animation: none;
  }

  html.is-ref .ref__h,
  html.is-ref .line--h.ref__h {
    top: var(--landing-split);
    opacity: 1 !important;
    animation: none;
  }

  html.is-ref .ref__carousel {
    opacity: 1;
    animation: none;
  }

  html {
    overflow: auto;
  }
}