/* ===========================================================================
 * yudicon.com — site stylesheet
 * ---------------------------------------------------------------------------
 * Implements "Yudicon Website.dc.html" (Claude Design project a739474b).
 * Token files under tokens/ are verbatim from the Yudicon design system;
 * everything here is the site layer: the five DS React components expressed
 * as CSS classes, plus page layout lifted out of the prototype's inline styles.
 *
 * Contents
 *   1. Base
 *   2. Design-system components  (Button · CircledNumber · Claim · Wordmark · Footer)
 *   3. Layout primitives
 *   4. Site header + mobile navigation
 *   5. Home
 *   6. Leistungen
 *   7. Lebenslauf
 *   8. Site footer
 *   9. Motion & focus
 * ======================================================================== */

/* ── 1. Base ────────────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  /* Sticky header height — anchor targets clear it. */
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--yud-white);
  color: var(--yud-sea);
  font-family: var(--font-sans);
  font-weight: var(--weight-light);
}

a { color: var(--yud-sea); text-decoration: none; transition: opacity .3s ease; }
a:hover { opacity: .6; }

img { max-width: 100%; }

h1, h2, h3, h4, p, blockquote, figure, ul, ol { margin: 0; }
ul { list-style: none; padding: 0; }

/* Screen-reader-only, for labels the design carries visually but markup needs. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ── 2. Design-system components ────────────────────────────────────────── */

/* Button — hairline outline, transparent fill, extended lowercase.
 * Rendered as <a> or <button>; the prototype wrapped the DS <button> in an
 * <a>, which would nest interactive elements in real markup. */
.yud-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-sans-extended);
  font-variation-settings: "wdth" var(--width-extended);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-button);
  text-transform: lowercase;
  background: transparent;
  border: var(--hairline) solid currentColor;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: opacity .3s ease;
  text-align: center;
}
.yud-btn:hover { opacity: .6; }

/* Tones: `color` carries the text, `--btn-border` the outline where it differs. */
.yud-btn--dark  { color: var(--yud-sea);    border-color: var(--yud-sea); }
.yud-btn--light { color: var(--yud-silver); border-color: var(--yud-steel); }
.yud-btn--steel { color: var(--yud-steel);  border-color: var(--yud-steel); }

.yud-btn--sm { font-size: 12px; padding: 10px 20px; }
.yud-btn--md { font-size: 14px; padding: 12px 24px; }
.yud-btn--lg { font-size: 18px; padding: 16px 36px; }

/* CircledNumber — thin 1px circle around a light numeral. Size via --s. */
.yud-circnum {
  --s: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  border: var(--hairline) solid currentColor;
  font-family: var(--font-sans);
  font-weight: var(--weight-light);
  font-size: calc(var(--s) * .55);
  line-height: 1;
}

/* Claim — "THE NEXT      NORMAL", uppercase, exaggerated word gap.
 * The gap is the brand's "dramaturgische (Sprech-)Lesepause" and is carried
 * by literal spaces in the markup, so white-space must be preserved. */
.yud-claim {
  font-family: var(--font-sans-extended);
  font-variation-settings: "wdth" var(--width-extended);
  font-weight: var(--weight-light);
  font-size: 13px;
  letter-spacing: var(--tracking-extended);
  line-height: var(--leading-claim);
  text-transform: uppercase;
  white-space: pre;
}
.yud-claim--vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* Rotated claim parked on the right page edge. */
.claim-edge {
  position: absolute;
  right: clamp(16px, 2.5vw, 36px);
  top: 64px;
  z-index: 2;
}

/* Over the hero photograph the claim is set in white. */
.hero__claim { color: var(--yud-white); }

/* Wordmark — inline SVG; width drives the height via the intrinsic ratio. */
.yud-wordmark {
  display: block;
  width: var(--w, 222px);
  height: auto;
  fill: currentColor;
}

/* Footer row — "Information / Technology" left · wordmark centre · Bildmarke
 * right. Replaces the design system's Footer component, which set the right
 * column as the "yudicon.com" url. */
.yud-footer-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 16px;
  width: 100%;
  font-size: 14px;
  line-height: 1.15;
}
/* "Technology" is set in Saol italic, a touch larger to match the x-height. */
.yud-footer-row__label .yud-em { font-size: 1.06em; }
.yud-footer-row__mark { display: flex; justify-content: flex-end; }
.yud-footer-row__mark .yud-bildmarke { --h: 32px; }
.yud-footer-row .yud-wordmark { --w: 186px; }

@media (max-width: 720px) {
  /* 186px of wordmark plus both marks will not fit a phone — stack it. */
  .yud-footer-row {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 20px;
  }
  .yud-footer-row__mark { justify-content: center; }
  .yud-footer-row .yud-wordmark { --w: min(220px, 70vw); }
}


/* ── 3. Layout primitives ───────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  padding-inline: clamp(24px, 5vw, 72px);
}

/* The standard section rhythm from the prototype. */
.section { padding-block: clamp(80px, 12vw, 160px); }
.section--white  { background: var(--yud-white); }
.section--silver { background: var(--yud-silver); }

/* Small uppercase label above a headline ("Unsere Leistungen", "Ihr Vorteil"). */
.eyebrow {
  font-family: var(--font-sans-extended);
  font-variation-settings: "wdth" var(--width-extended);
  font-weight: var(--weight-light);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.14em;
  line-height: var(--leading-subhead);
  color: var(--yud-ink);
}
.eyebrow--sm { font-size: 11px; }
.eyebrow--md { font-size: 12px; }
.eyebrow--sea    { color: var(--yud-sea); }
.eyebrow--steel  { color: var(--yud-steel); }

/* Arrow-led list: ↘ or → in a fixed gutter, text in the second column. */
.arrow-list > li {
  display: grid;
  grid-template-columns: var(--gutter, 24px) 1fr;
}

/* Two-column split used by Vorteile and the Leistungen pillar details:
 * a sticky intro column beside a scrolling content column. */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.split__sticky { position: sticky; top: 120px; }

/* Sticky ist sinnlos, sobald die Spalten untereinander stehen — und schädlich:
 * die Überschrift bleibt dann stehen, während die Punkte darunter durchlaufen
 * und sie überdecken.
 *
 * Der Reset stand auf 900px, das Raster bricht aber erst knapp unter 1000px um
 * (2 × 420px Mindestspalte plus gap). Dazwischen lag ein Band, in dem beides
 * galt — genau die Breite, die iPadOS Safari im Hochformat meldet (980px).
 *
 * Deshalb wird hier nicht nur zurückgesetzt, sondern das Einspaltige auch
 * erzwungen. Damit ist diese Zahl der Umschaltpunkt und nicht mehr eine
 * Nebenwirkung von grid-template-columns. */
@media (max-width: 1000px) {
  .split { grid-template-columns: 1fr; }
  .split__sticky { position: static; }
}

/* Standard gap between an eyebrow label and the headline beneath it. */
.eyebrow--gap { margin-bottom: 28px; }

/* Intro paragraph under a sticky split headline. */
.split__lead {
  margin-top: 32px;
  font-size: 20px;
  line-height: 1.4;
  max-width: 40ch;
  text-wrap: pretty;
}

/* Full-bleed photographic hero with the brand's paper-noise on top.
 * --grain-a / --grain-b mirror the prototype's `noise` prop (default 23%):
 *   grainA = min(1, n / 50)   grainB = max(0, (n - 50) / 50) */
.photo-hero {
  --grain-a: .46;
  --grain-b: 0;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: var(--yud-dark-sea);
  background-size: cover;
}
.photo-hero__noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: url("../img/noise-neutral.png") repeat;
}
.photo-hero__noise--a {
  background-size: 256px 256px;
  mix-blend-mode: soft-light;
  opacity: var(--grain-a);
}
.photo-hero__noise--b {
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  opacity: var(--grain-b);
}
.photo-hero > .wrap { position: relative; z-index: 1; }


/* ── 4. Site header + mobile navigation ─────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 244, 244, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: var(--hairline-thin) solid var(--yud-steel);
}
.site-header__inner {
  max-width: 1360px;
  margin-inline: auto;
  padding: 18px clamp(24px, 5vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* Logo lockup: Bildmarke ("Flügel") beside the wordmark. */
.site-header__home { display: flex; align-items: center; gap: 14px; color: var(--yud-sea); }
.site-header__home .yud-wordmark { --w: 150px; }

/* Bildmarke — height drives the width via the intrinsic 58.007:67 ratio. */
.yud-bildmarke {
  display: block;
  height: var(--h, 28px);
  width: auto;
  flex: none;
  fill: currentColor;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.6vw, 40px);
  font-family: var(--font-sans-extended);
  font-variation-settings: "wdth" var(--width-extended);
  font-weight: var(--weight-light);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: var(--leading-subhead);
}
/* Nav pill CTA — same shape as .yud-btn but sized for the header strip. */
.site-nav__cta {
  border: var(--hairline) solid var(--yud-sea);
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  text-transform: lowercase;
  letter-spacing: var(--tracking-button);
  white-space: nowrap;
}
/* Current page marker — the prototype had no active state; a hairline
 * underline is the only emphasis device the brand allows. */
.site-nav a[aria-current="page"] {
  border-bottom: var(--hairline) solid currentColor;
  padding-bottom: 2px;
}
.site-nav__cta[aria-current="page"] { border-bottom-width: var(--hairline); padding-bottom: 9px; }

/* Hamburger — two 24px hairlines, 12px apart (the brand's only menu icon). */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  /* The mark is two 24px hairlines; the box is grown to a 44px touch target
   * and pulled back by the difference so the hairlines keep the edge inset. */
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--yud-sea);
}
.nav-toggle span { display: block; height: 1px; width: 24px; background: currentColor; }

/* Full-screen frosted overlay menu, after the design system's WebsiteMenu. */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 6vw, 48px) clamp(24px, 5vw, 48px);
  color: var(--yud-silver);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.mobile-nav[data-open="true"] { opacity: 1; pointer-events: auto; }
.mobile-nav__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.mobile-nav__top .yud-wordmark { --w: min(222px, 58vw); }

.mobile-nav__close {
  position: relative;
  width: 24px; height: 24px;
  flex: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--yud-steel);
}
.mobile-nav__close span {
  position: absolute;
  left: 0; top: 11px;
  width: 24px; height: 1px;
  background: currentColor;
}
.mobile-nav__close span:first-child { transform: rotate(45deg); }
.mobile-nav__close span:last-child  { transform: rotate(-45deg); }

/* The <nav> is the flex child of .mobile-nav, so the growth belongs here —
 * putting it on the <ul> leaves the list hugging the wordmark. */
.mobile-nav nav {
  flex: 1;
  display: flex;
  align-items: center;
}
.mobile-nav__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4.5vh, 40px);
}
.mobile-nav__list a {
  display: flex;
  gap: 24px;
  align-items: baseline;
  color: var(--yud-silver);
}
.mobile-nav__n { font-size: 20px; }
.mobile-nav__label { font-size: clamp(22px, 6vw, 28px); line-height: var(--leading-subhead); }

/* Wordmark top-left, Bildmarke bottom-right — the overlay carries no footer
 * row of its own, unlike the site footer. */
.mobile-nav__foot { display: flex; justify-content: flex-end; }
.mobile-nav__foot .yud-bildmarke { --h: 32px; }

@media (max-width: 900px) {
  .site-nav { display: none; }
  .nav-toggle { display: flex; }
}
/* No JS, no overlay — keep the inline nav rather than an unreachable menu. */
html:not(.js) .site-nav { display: flex; flex-wrap: wrap; }
html:not(.js) .nav-toggle { display: none; }
html:not(.js) .mobile-nav { display: none; }
/* Lock background scroll while the overlay is open. */
body.nav-open { overflow: hidden; }


/* ── 5. Home ────────────────────────────────────────────────────────────── */

/* 5.1 Hero — "Wir schaffen Klarheit, wo IT festgefahren ist." */
.hero {
  min-height: 86vh;
  background-image: url("../img/hero-home.jpg");
  /* Moderne Formate zuerst, und je Pixeldichte die passende Datei.
   * Ohne 2x-Variante rechnet ein Retina-Display die 1x-Datei hoch und
   * das Bild wird sichtbar weich. Browser ohne image-set()/type()
   * ignorieren die Deklaration und behalten das JPEG darüber. */
  background-image: image-set(
      url("../img/hero-home.avif")    type("image/avif") 1x,
      url("../img/hero-home@2x.avif") type("image/avif") 2x,
      url("../img/hero-home.webp")    type("image/webp") 1x,
      url("../img/hero-home@2x.webp") type("image/webp") 2x,
      url("../img/hero-home.jpg")     type("image/jpeg") 1x,
      url("../img/hero-home@2x.jpg")  type("image/jpeg") 2x);
  /* y=46 %: das Hero ist bei niedrigen Fenstern höher als der sichtbare
   * Bereich (bei 1440x700 sind es 807 px). Steht das Motiv weiter oben,
   * schneidet der untere Fensterrand das Gesicht an. */
  background-position: 35% 46%;
  color: var(--yud-sea);
}
/* Aufhellender Schleier von links, damit die Sea-farbige Schrift auf dem
 * Foto trägt. Ohne ihn liegt die Vorzeile bei 3,4:1 und damit unter dem
 * AA-Minimum von 4,5:1 für kleine Schrift. Dasselbe Mittel wie
 * .founder__scrim, nur umgekehrt: dort dunkelt es für helle Schrift ab. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(244, 244, 244, 0.82) 0%,
    rgba(244, 244, 244, 0.55) 34%,
    rgba(244, 244, 244, 0.12) 56%,
    transparent 70%);
}
.hero > .wrap { padding-block: clamp(120px, 16vh, 200px) clamp(56px, 9vh, 100px); }
.hero__body { max-width: max(340px, 44%); }
.hero__eyebrow { margin-bottom: 40px; }
.hero__title {
  font-size: clamp(40px, 5vw, 78px);
  line-height: 1.06;
  max-width: 13ch;
  text-wrap: balance;
}
.hero__stack {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: clamp(40px, 6vh, 64px);
}
.hero__lead {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.4;
  max-width: 52ch;
  text-wrap: pretty;
}
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* 5.2 Vorteile — sticky intro beside four numbered benefits. */
.benefit-list { display: flex; flex-direction: column; }
.benefit {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  padding: 36px 0;
  border-top: var(--hairline-thin) solid var(--yud-sea);
}
.benefit .yud-circnum { --s: 40px; }
.benefit__title {
  margin: 4px 0 12px;
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: var(--leading-headline);
}
.benefit__text { font-size: 18px; line-height: 1.45; max-width: 48ch; text-wrap: pretty; }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.section-head__title { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.1; text-wrap: balance; }
.section-head__note { font-size: 18px; line-height: 1.45; max-width: 36ch; }

/* 5.3 Drei Säulen — three square cards separated by 2px Steel gutters. */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 2px;
  background: var(--yud-steel);
  border: var(--hairline-thin) solid var(--yud-steel);
}
.pillar {
  background: var(--yud-white);
  padding: clamp(32px, 3.2vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.pillar__top { display: flex; justify-content: space-between; align-items: center; }
/* min-height keeps the three headlines on a shared baseline across cards. */
.pillar__question { font-size: 22px; line-height: 1.25; min-height: 3.75em; }
.pillar__name { font-size: clamp(34px, 3vw, 44px); line-height: 1.1; }
.pillar__text { font-size: 17px; line-height: 1.5; text-wrap: pretty; }
/* Pin the results block to the card foot so the hairline rules line up across
 * all three cards regardless of how long each pillar's description runs. */
.pillar__results {
  margin-top: auto;
  border-top: var(--hairline-thin) solid var(--yud-sea);
  padding-top: 20px;
}
.pillar__results .eyebrow { margin-bottom: 14px; }
.pillar__results ul { display: flex; flex-direction: column; gap: 10px; font-size: 17px; line-height: 1.4; }

.pillars-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 48px;
}
.pillars-foot p { font-size: 18px; line-height: 1.45; max-width: 52ch; }

@media (max-width: 720px) {
  /* Stacked cards need no artificial headline alignment. */
  .pillar__question { min-height: 0; }
}

/* 5.4 Kunden — tab rail beside the selected case study. */
.clients__title {
  margin-bottom: clamp(48px, 6vw, 88px);
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.1;
  max-width: 18ch;
  text-wrap: balance;
}
.clients__layout {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(40px, 5vw, 80px);
  align-items: flex-start;
}
.clients__rail {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  border-bottom: var(--hairline-thin) solid var(--yud-sea);
}
.client-tab {
  all: unset;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: 24px 0;
  border-top: var(--hairline-thin) solid var(--yud-sea);
  /* Unselected tabs recede to a muted Steel-blue, per the prototype. */
  color: #A9B3BE;
  transition: color .4s ease;
}
.client-tab[aria-selected="true"] { color: var(--yud-sea); }
.client-tab__label { display: flex; flex-direction: column; gap: 6px; }
.client-tab__name {
  font-family: var(--font-sans);
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.1;
}
.client-tab__headline { font-size: 15px; line-height: 1.3; }
/* The arrow marks the selected row; hidden rather than absent so the
 * grid column keeps its width and the rows do not shift on selection. */
.client-tab__arrow { font-size: 24px; visibility: hidden; }
.client-tab[aria-selected="true"] .client-tab__arrow { visibility: visible; }

.clients__panels { flex: 2 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.case[hidden] { display: none; }

.case {
  background: var(--yud-silver);
  padding: clamp(32px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.case__meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  align-items: baseline;
}
.case__title { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.1; text-wrap: balance; }
.case__result {
  padding: 24px 0;
  border-top: var(--hairline-thin) solid var(--yud-sea);
  border-bottom: var(--hairline-thin) solid var(--yud-sea);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: baseline;
}
.case__result-value { font-size: clamp(22px, 2vw, 28px); line-height: var(--leading-headline); }
.case__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 32px;
}
.case__col { display: flex; flex-direction: column; gap: 14px; }
.case__col p { font-size: 16px; line-height: 1.5; text-wrap: pretty; }
.case__col ul { display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.4; }
.case__outcome { font-size: 16px; line-height: 1.5; text-wrap: pretty; }

.case__quote {
  margin-top: 8px;
  background: var(--yud-white);
  padding: 28px;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 24px;
  align-items: start;
}
.case__photo {
  width: 72px; height: 72px;
  object-fit: cover;
  display: block;
  filter: grayscale(0.2);
}
.case__quote > div { display: flex; flex-direction: column; gap: 14px; }
.case__quote blockquote { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.25; }
.case__quote figcaption { font-size: 14px; line-height: 1.35; color: var(--yud-ink); }

/* 5.4b Kunden auf schmalen Schirmen — Wischen statt Hoch-und-Runter.
 *
 * Nebeneinander passt die Leiste neben den Fall; untereinander stehen vier
 * hohe Schaltflächen über der Karte, und wer den nächsten Fall sehen will,
 * scrollt erst hoch und dann wieder runter. Deshalb hier: die Namen werden
 * zu einer waagrechten Leiste, die Fälle zu einem Karussell.
 *
 * Die 970px sind gemessen, nicht gegriffen: genau dort passt die Leiste nicht
 * mehr neben den Fall und das Flex-Layout bricht von selbst um. Solange sie
 * passt, bleibt sie — auch auf dem Tablet. Innerhalb der Abfrage wird das
 * Untereinander zusätzlich erzwungen, damit der Umschaltpunkt hier steht und
 * nicht als Nebenwirkung aus flex-basis und gap herausfällt.
 *
 * Wer flex-basis oder gap von .clients__rail / .clients__panels ändert,
 * verschiebt den natürlichen Umbruch und muss diese Zahl nachmessen.
 *
 * Ohne JavaScript greift das ebenfalls: dann liegen alle vier Karten im
 * Karussell und lassen sich wischen — nur die Namensleiste markiert nichts. */
@media (max-width: 970px) {
  .clients__layout { display: block; }

  .clients__rail {
    flex-direction: row;
    gap: 28px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-bottom: 28px;
  }
  .clients__rail::-webkit-scrollbar { display: none; }

  .client-tab {
    flex: 0 0 auto;
    display: block;
    padding: 0 0 14px;
    border-top: 0;
    /* Sitzt auf der Hairline der Leiste und verdeckt sie beim aktiven Namen. */
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
  }
  .client-tab[aria-selected="true"],
  .client-tab[aria-current="true"] { border-bottom-color: var(--yud-sea); }
  .client-tab[aria-current="true"] { color: var(--yud-sea); }
  .client-tab__headline,
  .client-tab__arrow { display: none; }
  .client-tab__name { font-size: 17px; }

  .clients__panels {
    /* Wie weit die nächste Karte hervorlugt. Steht einmal hier, weil unten
     * zweimal genau dieser Wert gebraucht wird. */
    --peek: 32px;
    flex-direction: row;
    gap: 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .clients__panels::-webkit-scrollbar { display: none; }

  /* Nicht ganz 100%: der Rest der nächsten Karte am Rand ist das Signal,
   * dass hier etwas zu wischen ist.
   *
   * min-width: 0 ist nicht kosmetisch. Flex-Elemente haben min-width: auto,
   * schrumpfen also nicht unter ihre Inhaltsbreite — ohne das werden die
   * ersten beiden Karten breiter als die Vorgabe (gemessen 338 und 360 statt
   * 310) und das Einrasten trifft daneben. */
  .case {
    flex: 0 0 calc(100% - var(--peek));
    min-width: 0;
    scroll-snap-align: start;
  }

  /* Die letzte Karte käme sonst nie an den linken Rand: bei Karten, die
   * schmaler als der Streifen sind, endet der Scrollweg genau um die
   * Spähbreite zu früh. Der Abstand dahinter verlängert ihn um exakt diesen
   * Betrag — Rand am letzten Flex-Element zählt überall zur Scrollbreite,
   * anders als padding am Streifen selbst. */
  .case:last-child { margin-inline-end: var(--peek); }
}

/* 5.4c Auf Handbreite ist in der Karte kein Platz für zwei Spalten.
 *
 * `.case__result` stellt Label und Wert nebeneinander, `.case__quote` das
 * Porträt neben das Zitat. Bei 390px bleiben dem Zitat davon rund 150px —
 * das ergibt Zeilen aus einem Wort. Beides kommt hier untereinander. */
@media (max-width: 560px) {
  /* Karte und Zitatkasten bringen zusammen 60px Innenabstand mit. Bei einer
   * 310px breiten Karte bleiben dem Zitat davon 190px; mit den schlankeren
   * Abständen hier sind es 218px — wieder so viel wie vor dem Karussell,
   * als die Karte noch die volle Breite hatte. */
  .case { padding: 26px 24px; }
  .case__quote { padding: 22px; }

  .case__result {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .case__quote {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* 5.5 Jasmin — portrait masked into a Dark Sea field. */
.founder {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  background-color: var(--yud-dark-sea);
  color: var(--yud-silver);
  overflow: hidden;
}
/* Square photo pinned right, faded out towards the text with a mask. */
.founder__photo {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  background-image: url("../img/jasmin-portrait.jpg");
  /* Moderne Formate zuerst, und je Pixeldichte die passende Datei.
   * Ohne 2x-Variante rechnet ein Retina-Display die 1x-Datei hoch und
   * das Bild wird sichtbar weich. Browser ohne image-set()/type()
   * ignorieren die Deklaration und behalten das JPEG darüber. */
  background-image: image-set(
      url("../img/jasmin-portrait.avif")    type("image/avif") 1x,
      url("../img/jasmin-portrait@2x.avif") type("image/avif") 2x,
      url("../img/jasmin-portrait.webp")    type("image/webp") 1x,
      url("../img/jasmin-portrait@2x.webp") type("image/webp") 2x,
      url("../img/jasmin-portrait.jpg")     type("image/jpeg") 1x,
      url("../img/jasmin-portrait@2x.jpg")  type("image/jpeg") 2x);
  background-size: cover;
  background-position: right center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 25%, rgba(0,0,0,0.85) 50%, #000 70%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 25%, rgba(0,0,0,0.85) 50%, #000 70%);
}
/* Hochformat: das Porträt ist quadratisch und der Abschnitt hoch. Über die
 * volle Breite gezogen zoomt `cover` weit am Motiv vorbei — hinter dem Text
 * bleibt dann nur Wand. Stattdessen oben rechts verankert, 72% breit, nach
 * links und nach unten ausgeblendet, damit es ein Feld bleibt und kein
 * eingeklebtes Bild wird.
 *
 * Die Bedingung ist nicht nur die Breite: entscheidend ist, dass der
 * Abschnitt hoch im Verhältnis zur Breite ist. Genau das prüft
 * `orientation: portrait` — und nur so greift die Regel auch auf dem iPad
 * im Hochformat, das 980px meldet und damit über jeder Handy-Schwelle liegt. */
@media (max-width: 900px), (orientation: portrait) {
  .founder__photo {
    width: 72%;
    max-width: none;
    background-position: 58% center;
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.45) 30%, #000 72%),
      linear-gradient(180deg, #000 52%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.45) 30%, #000 72%),
      linear-gradient(180deg, #000 52%, transparent 100%);
    mask-composite: intersect;
  }
}

.founder__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(24,44,67,0.9) 0%, rgba(24,44,67,0.6) 40%, rgba(24,44,67,0) 70%);
}
.founder > .wrap { position: relative; z-index: 1; padding-block: clamp(96px, 12vw, 160px); }
.founder__body { max-width: 620px; display: flex; flex-direction: column; gap: 36px; }
.founder__name { font-size: clamp(44px, 5.6vw, 84px); line-height: 1.04; }
.founder__quote {
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: var(--leading-headline);
  color: var(--yud-silver);
  text-wrap: pretty;
}
.founder__facts { display: flex; flex-direction: column; }
.founder__facts li {
  padding: 13px 0;
  border-top: var(--hairline-thin) solid rgba(209, 209, 209, 0.5);
  font-size: 17px;
  line-height: 1.4;
}
.founder__facts li > span:first-child { color: var(--yud-steel); }

/* 5.6 Mission statement — a framed certificate on a Silver YUD Visual field. */
.mission { position: relative; overflow: hidden; }
.mission .claim-edge { top: 96px; color: var(--yud-sea); }
.mission > .wrap {
  padding-block: clamp(80px, 11vw, 160px);
  padding-inline: clamp(20px, 5vw, 72px);
}

.mission__card {
  max-width: 820px;
  margin-inline: auto;
  background: var(--yud-white);
  padding: clamp(14px, 1.6vw, 20px);
}
/* Two hairline frames, 4px apart — the brand's engraved-certificate device. */
.mission__frame { border: var(--hairline-thin) solid var(--yud-sea); padding: 4px; }
.mission__inner {
  border: var(--hairline-thin) solid var(--yud-sea);
  padding: clamp(40px, 7vw, 96px) clamp(24px, 7vw, 96px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.mission__inner .yud-bildmarke { --h: 44px; }

/* Label centred between two rules. */
.mission__rule {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
}
.mission__rule-line { flex: 1; height: var(--hairline-thin); background: var(--yud-sea); }
.mission__rule-label { font-size: 12px; letter-spacing: 0.24em; }

.mission__claim {
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.1;
  text-align: center;
  text-wrap: balance;
}

.mission__body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 580px;
}
.mission__body p {
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.7;
  hyphens: auto;
  text-wrap: pretty;
}

.mission__dots { font-size: 18px; letter-spacing: 0.6em; padding-left: 0.6em; }

.mission__normal {
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.35;
  text-align: center;
  max-width: 30ch;
}
.mission__welcome {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  text-align: center;
}

/* Signature row: who · wordmark · where. */
.mission__sign {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 24px;
  margin-top: 24px;
  padding-top: 28px;
  border-top: var(--hairline-thin) solid var(--yud-sea);
}
.mission__signer { font-size: 13px; line-height: 1.35; }
.mission__role { color: var(--yud-ink); }
.mission__sign .yud-wordmark { --w: 120px; }
.mission__place { font-size: 11px; letter-spacing: 0.14em; text-align: right; }

@media (max-width: 560px) {
  /* 120px of wordmark between two labels is too tight on a phone. */
  .mission__sign {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 20px;
  }
  .mission__place { text-align: center; }
}

/* ── 6. Leistungen ──────────────────────────────────────────────────────── */

.leistungen-hero {
  min-height: 78vh;
  background-image: url("../img/hero-leistungen.jpg");
  /* Moderne Formate zuerst, und je Pixeldichte die passende Datei.
   * Ohne 2x-Variante rechnet ein Retina-Display die 1x-Datei hoch und
   * das Bild wird sichtbar weich. Browser ohne image-set()/type()
   * ignorieren die Deklaration und behalten das JPEG darüber. */
  background-image: image-set(
      url("../img/hero-leistungen.avif")    type("image/avif") 1x,
      url("../img/hero-leistungen@2x.avif") type("image/avif") 2x,
      url("../img/hero-leistungen.webp")    type("image/webp") 1x,
      url("../img/hero-leistungen@2x.webp") type("image/webp") 2x,
      url("../img/hero-leistungen.jpg")     type("image/jpeg") 1x,
      url("../img/hero-leistungen@2x.jpg")  type("image/jpeg") 2x);
  background-position: center 62%;
  color: var(--yud-silver);
}
.leistungen-hero > .wrap { padding-block: 160px clamp(56px, 8vh, 96px); }
.leistungen-hero__title {
  margin-top: 40px;
  font-size: clamp(48px, 7.2vw, 108px);
  line-height: 1.04;
}
.leistungen-hero__lead {
  margin-top: 28px;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.4;
  max-width: 44ch;
}
.leistungen-hero__jump {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 56px;
  font-size: 13px;
  letter-spacing: 0.12em;
}
.leistungen-hero__jump a { color: var(--yud-silver); display: flex; gap: 12px; align-items: center; }

/* Back link — ← Zurück, on dark and light heroes alike. */
.back-link { font-size: 12px; letter-spacing: 0.14em; }
.back-link--on-dark { color: var(--yud-steel); }

/* 6.1 Pillar detail — sticky pillar intro beside its three content blocks. */
.pillar-detail { background: var(--yud-white); border-bottom: var(--hairline-thin) solid var(--yud-steel); }
.pillar-detail > .wrap { padding-block: clamp(80px, 10vw, 140px); }
.pillar-detail__intro { display: flex; flex-direction: column; gap: 28px; }
.pillar-detail__intro .yud-circnum { --s: 44px; }
.pillar-detail__name { font-size: clamp(44px, 5.4vw, 80px); line-height: 1.04; }
.pillar-detail__tagline {
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: var(--leading-headline);
  max-width: 24ch;
}
.pillar-detail__lead { font-size: 18px; line-height: 1.5; max-width: 46ch; text-wrap: pretty; }
.pillar-detail__quote {
  margin-top: 16px;
  padding: 28px;
  background: var(--yud-silver);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pillar-detail__quote blockquote { font-size: 21px; line-height: 1.25; }

.pillar-detail__blocks { display: flex; flex-direction: column; gap: 64px; }
.pillar-detail__blocks .eyebrow { display: block; margin-bottom: 20px; }

/* "Wann Sie uns holen sollten" — hairline-ruled list. */
.rule-list { border-bottom: var(--hairline-thin) solid var(--yud-sea); }
.rule-list > li {
  display: grid;
  grid-template-columns: 28px 1fr;
  padding: 18px 0;
  border-top: var(--hairline-thin) solid var(--yud-sea);
  font-size: 18px;
  line-height: 1.45;
  text-wrap: pretty;
}

.prose-stack { display: flex; flex-direction: column; gap: 18px; }
.prose-stack p { font-size: 18px; line-height: 1.5; text-wrap: pretty; }
.pillar-detail__claim { margin-top: 28px; font-size: 26px; line-height: var(--leading-headline); }

/* Engagement models as outlined pills. */
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  border: var(--hairline) solid var(--yud-sea);
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  font-size: 15px;
  line-height: var(--leading-headline);
}

/* 6.2 Tarife — Deep Sea YUD Visual field. */
.tarife { overflow: hidden; }
.tarife > .wrap {
  padding-block: clamp(96px, 12vw, 160px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(48px, 6vw, 96px);
}
.tarife__body { display: flex; flex-direction: column; gap: 24px; }
.tarife__title { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.1; color: var(--yud-silver); }
.tarife__body p { font-size: 18px; line-height: 1.5; color: var(--yud-silver); text-wrap: pretty; }
.tarife__aside {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 28px;
}
.tarife__aside blockquote {
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.15;
  color: var(--yud-silver);
  text-wrap: pretty;
}
.tarife__aside > p { margin-top: 16px; font-size: 18px; color: var(--yud-silver); }


/* ── 7. Lebenslauf ──────────────────────────────────────────────────────── */

.cv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  background: var(--yud-white);
}
.cv__media { position: relative; background-color: var(--yud-silver); }
/* Photo column tracks the scroll of the text column beside it. */
.cv__media-inner {
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  min-height: 520px;
  background-image: url("../img/lebenslauf.jpg");
  /* Moderne Formate zuerst, und je Pixeldichte die passende Datei.
   * Ohne 2x-Variante rechnet ein Retina-Display die 1x-Datei hoch und
   * das Bild wird sichtbar weich. Browser ohne image-set()/type()
   * ignorieren die Deklaration und behalten das JPEG darüber. */
  background-image: image-set(
      url("../img/lebenslauf.avif")    type("image/avif") 1x,
      url("../img/lebenslauf@2x.avif") type("image/avif") 2x,
      url("../img/lebenslauf.webp")    type("image/webp") 1x,
      url("../img/lebenslauf@2x.webp") type("image/webp") 2x,
      url("../img/lebenslauf.jpg")     type("image/jpeg") 1x,
      url("../img/lebenslauf@2x.jpg")  type("image/jpeg") 2x);
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
}
.cv__body {
  padding: clamp(64px, 8vw, 120px) clamp(24px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.cv__head { display: flex; flex-direction: column; gap: 20px; }
.cv__head .eyebrow { margin-top: 24px; }
.cv__name { font-size: clamp(44px, 5.4vw, 80px); line-height: 1.04; }
.cv__tagline {
  margin-top: 8px;
  font-size: clamp(22px, 2vw, 28px);
  line-height: var(--leading-headline);
  max-width: 26ch;
}
.cv__block > .eyebrow { display: block; margin-bottom: 20px; }
.cv__table { border-bottom: var(--hairline-thin) solid var(--yud-sea); }
.cv__row {
  display: grid;
  grid-template-columns: minmax(110px, 150px) 1fr;
  gap: 20px;
  padding: 20px 0;
  border-top: var(--hairline-thin) solid var(--yud-sea);
}
.cv__when { font-size: 15px; line-height: 1.45; color: var(--yud-ink); }
.cv__what { display: flex; flex-direction: column; gap: 4px; }
.cv__role { font-size: 19px; line-height: 1.35; }
.cv__org { font-size: 15px; line-height: 1.4; color: var(--yud-ink); }
.cv__text { font-size: 17px; line-height: 1.45; text-wrap: pretty; }
.cv__thesis { display: inline-block; margin-top: 20px; font-size: 16px; }
.cv__block p { font-size: 17px; line-height: 1.45; }

@media (max-width: 880px) {
  /* Stacked: a full-height sticky photo would push the CV off-screen. */
  .cv__media-inner {
    position: static;
    height: min(60vh, 460px);
    min-height: 0;
  }
}

/* "Let's meet." — Silver YUD Visual closing band. */
.meet { overflow: hidden; }
.meet > .wrap {
  padding-block: clamp(80px, 10vw, 140px);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
}
.meet__body { display: flex; flex-direction: column; gap: 20px; max-width: 560px; }
.meet__title { font-size: clamp(40px, 5vw, 72px); line-height: var(--leading-display); }
.meet__body p { font-size: 18px; line-height: 1.45; }


/* ── 7b. Legal notes ────────────────────────────────────────────────────────
 * Impressum · AGB · Nutzungsbedingungen · Datenschutzerklärung. A long,
 * quiet reading page: hairline rules, no accents, generous measure.
 */
.legal { background: var(--yud-white); }
.legal > .wrap { padding-block: clamp(80px, 10vw, 140px); }

.legal__head { display: flex; flex-direction: column; gap: 20px; }
.legal__head .eyebrow { margin-top: 0; }
.legal__title {
  margin-top: 8px;
  font-size: clamp(36px, 4.6vw, 68px);
  line-height: var(--leading-display);
  max-width: 18ch;
  text-wrap: balance;
}

/* Table of contents — circled numerals, the brand's only list marker. */
.legal__toc { margin-top: clamp(24px, 4vw, 40px); }
.legal__toc ul { display: flex; flex-direction: column; }
.legal__toc a {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 0;
  border-top: var(--hairline-thin) solid var(--yud-sea);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: var(--leading-headline);
}
.legal__toc li:last-child a { border-bottom: var(--hairline-thin) solid var(--yud-sea); }
.legal__toc .yud-circnum { --s: 32px; }
.legal__toc-label { text-wrap: balance; }

.legal__section {
  margin-top: clamp(64px, 8vw, 104px);
  scroll-margin-top: 6rem;
}
.legal__heading {
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1;
  padding-bottom: 20px;
  border-bottom: var(--hairline-thin) solid var(--yud-sea);
  margin-bottom: 36px;
}
/* Sub-headings use the brand's extended caps, not a larger display size. */
.legal__sub {
  font-family: var(--font-sans-extended);
  font-variation-settings: "wdth" var(--width-extended);
  font-weight: var(--weight-light);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  line-height: var(--leading-subhead);
  margin: 40px 0 16px;
}
.legal__section > p {
  font-size: 17px;
  line-height: 1.55;
  max-width: 76ch;
  text-wrap: pretty;
  margin-bottom: 14px;
}

/* Hairline-separated list rows — no bullet, matching the brand's dividers. */
.legal__list { max-width: 76ch; border-bottom: var(--hairline-thin) solid var(--yud-steel); }
.legal__list > li {
  padding: 13px 0;
  border-top: var(--hairline-thin) solid var(--yud-steel);
  font-size: 17px;
  line-height: 1.5;
  text-wrap: pretty;
}
.legal__list--termed > li { display: flex; flex-direction: column; gap: 6px; }
.legal__term { font-size: 18px; line-height: var(--leading-headline); }

/* Prose following a ruled list needs air, or it reads as part of the list. */
.legal__list + p,
.legal__facts + p { margin-top: 24px; }
.legal__section > p + .legal__list,
.legal__section > p + .legal__facts { margin-top: 8px; }

/* Impressum key/value rows. */
.legal__facts { max-width: 76ch; border-bottom: var(--hairline-thin) solid var(--yud-sea); }
.legal__fact {
  display: grid;
  grid-template-columns: minmax(150px, 230px) 1fr;
  gap: 20px;
  padding: 14px 0;
  border-top: var(--hairline-thin) solid var(--yud-sea);
  font-size: 17px;
  line-height: 1.45;
}
.legal__fact-key { color: var(--yud-ink); }

@media (max-width: 620px) {
  .legal__fact { grid-template-columns: 1fr; gap: 4px; }
}

/* Links inside running legal text need to be visible as links. The document
 * quotes bare URLs, which have no break opportunities and would otherwise push
 * the page wider than a phone. */
.legal__section a {
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.legal__section { overflow-wrap: break-word; }


/* ── 7c. 404 ────────────────────────────────────────────────────────────────*/
.notfound { position: relative; overflow: hidden; min-height: 72vh; display: flex; align-items: center; }
.notfound .claim-edge { color: var(--yud-sea); }
.notfound > .wrap { padding-block: clamp(80px, 12vw, 160px); }
.notfound__title {
  margin-top: 24px;
  font-size: clamp(40px, 5.6vw, 84px);
  line-height: var(--leading-display);
  max-width: 14ch;
  text-wrap: balance;
}
.notfound__lead {
  margin-top: 28px;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.45;
  max-width: 46ch;
  text-wrap: pretty;
}
.notfound__links {
  margin-top: clamp(40px, 6vw, 64px);
  max-width: 420px;
  border-bottom: var(--hairline-thin) solid var(--yud-sea);
}
.notfound__links a {
  display: grid;
  grid-template-columns: 26px 1fr;
  padding: 15px 0;
  border-top: var(--hairline-thin) solid var(--yud-sea);
  font-size: 18px;
  line-height: 1.4;
}


/* ── 8. Site footer ─────────────────────────────────────────────────────── */

.site-footer { background: var(--yud-dark-sea); color: var(--yud-silver); }
.site-footer > .wrap {
  padding-block: clamp(72px, 9vw, 120px) 40px;
  display: flex;
  flex-direction: column;
  gap: 72px;
}
.site-footer__top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 48px;
  align-items: end;
}
.site-footer__pitch { display: flex; flex-direction: column; gap: 20px; }
.site-footer__pitch h2 { font-size: clamp(28px, 3vw, 42px); line-height: 1.15; }
.site-footer__pitch p { font-size: 17px; line-height: 1.45; max-width: 46ch; }
.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  font-size: 20px;
}
.site-footer__contact a { color: var(--yud-silver); }
.site-footer__contact .yud-btn { margin-top: 12px; }
.site-footer__base {
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-top: var(--hairline-thin) solid rgba(209, 209, 209, 0.4);
  padding-top: 32px;
}
.site-footer__legal { font-size: var(--text-xs); color: var(--yud-steel); align-self: center; }


/* ── 8b. WebKit workaround: grain texture must be a small tile ──────────────
 *
 * The design system paints the YUD Visual grain as
 *     .yud-grain { background: url(grain.jpg) center / cover repeat;
 *                  mix-blend-mode: color-burn; opacity: var(--vis-grain); }
 *
 * `cover` stretches the 1600×884 scan across the whole field. WebKit (Safari)
 * mis-rasterises a large background image in that overlay: one backing-store
 * tile is composited wrong and paints a hard-edged band across the field. It
 * sits at a fixed document line, so scrolling does not clear it. Under
 * `color-burn` the band reads black; under any other blend it reads blue —
 * which is the giveaway that the blend mode was never the cause.
 *
 * Narrowed down in real WebKit (Playwright, 1512×950 @2x, 8 frames containing
 * a field per run; the oracle looks for hard horizontal edges strictly inside
 * a field, where a mesh gradient must vary smoothly):
 *
 *   grain.jpg @ cover (as shipped) ................. 5/8 frames bad
 *   ├─ blend → multiply ............................ 5/8   blend is not the cause
 *   ├─ blend removed, opacity only ................. 5/8
 *   ├─ background-blend-mode, no overlay element ... 5/8
 *   ├─ mesh gradient removed, grain kept ........... 5/8   backdrop is not the cause
 *   ├─ re-encoded to 800px, metadata stripped ...... 5/8   source size is not the cause
 *   ├─ same texture as PNG rather than JPEG ........ 5/8   format is not the cause
 *   ├─ grain.jpg tiled at 400 / 800px .............. 7/8   worse: the scan is not seamless
 *   ├─ seam-free mirror tile, 1024px source ........ 6/8
 *   ├─ seam-free mirror tile, 512px source ......... 4/8
 *   ├─ overlay with opacity but no image ........... CLEAN
 *   ├─ grain layer removed entirely ................ CLEAN
 *   ├─ 256px source drawn at 1024px tiles .......... CLEAN
 *   └─ seam-free mirror tile, 256px source ......... CLEAN  ← the fix
 *
 * The last two pin it down: a 256px source stays clean even when drawn at
 * 1024px, while a 512px source breaks. The trigger is the SOURCE image's pixel
 * dimensions — a decode threshold somewhere between 256 and 512 px — not the
 * size it is painted at, the blend, the backdrop, the format or the element.
 * So the fix
 * keeps `mix-blend-mode: color-burn` and `--vis-grain` exactly as the design
 * system specifies and changes only the texture: assets/img/grain-tile.png is
 * a 256×256 crop of the same scan, mirrored in both axes so it repeats without
 * a seam, tiled at its natural 1:1 scale. Same paper grain, same size on
 * screen — measured against the original in Chrome, mean error is 1.72/255 on
 * the deep field and 0.22/255 on silver, against the grain's own contribution
 * of 3.13/255. It is also 27 KB instead of 192 KB.
 *
 * grain.jpg is kept: tokens/visuals.css still references it and is left
 * byte-faithful to the design system. Delete this block to go back to it.
 * Regenerate the tile with tasks/make-grain-tile.py.
 */
.yud-grain {
  background-image: url("../img/grain-tile.png");
  background-size: 256px 256px;
  background-repeat: repeat;
}


/* ── 9. Motion & focus ──────────────────────────────────────────────────── */

/* The brand book specifies no motion beyond slow opacity fades; honour the
 * OS-level preference for anyone who has asked for less. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Keyboard focus. The brand defines no focus treatment, so this uses its only
 * emphasis device: a hairline outline, offset so it reads as a rule. */
:focus-visible {
  outline: var(--hairline) solid var(--yud-sea);
  outline-offset: 3px;
}
.founder :focus-visible,
.tarife :focus-visible,
.site-footer :focus-visible,
.leistungen-hero :focus-visible,
.mobile-nav :focus-visible {
  outline-color: var(--yud-silver);
}