/*
 * Schaad Advisors — Über mich page
 * Pixel-perfect from Figma node 85:545.
 *
 *   Hero (1440 × 720): dark navy with photo overlay; logo / nav /
 *   Kontakt anchored to top; two-column content row at top 191/201;
 *   four circular photos bleeding 76 px below the hero.
 *
 *   Karriere (paper bg): 5fr / 7fr grid — eyebrow + H2 + intro left,
 *   six-station vertical stepper right (numbered 01–06, atlas disc +
 *   atlas hairline connector + org/role/desc).
 */

:root {
  --gutter: max(0px, calc((100vw - 1440px) / 2));
  /* --rail-pad is the global side-padding token (shared/tokens.css). */
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { margin: 0; padding: 0; }
html {
  font-family: var(--font-sans);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  background: var(--color-paper);
  color: var(--color-charcoal);
  overflow-x: clip;
}
a   { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }

/* ─── Entrance animation · same rhythm as home hero ──────────
   Staggered fade-up reveal on initial load. fill-mode: backwards
   keeps elements hidden during the delay window so nothing flashes
   in before its turn. Delays mirror home/styles.css cadence. */

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Header chrome (logo, nav, Kontakt) stays static — only the page
   content reveals. Same rule across all pages. */
.ueber-hero__lead                   { animation: hero-rise 0.9s cubic-bezier(0.23,1,0.32,1) 0.10s backwards; }
.ueber-hero__body                   { animation: hero-rise 0.9s cubic-bezier(0.23,1,0.32,1) 0.25s backwards; }
.ueber-hero__photos li:nth-child(1) { animation: hero-rise 0.9s cubic-bezier(0.23,1,0.32,1) 0.40s backwards; }
.ueber-hero__photos li:nth-child(2) { animation: hero-rise 0.9s cubic-bezier(0.23,1,0.32,1) 0.48s backwards; }
.ueber-hero__photos li:nth-child(3) { animation: hero-rise 0.9s cubic-bezier(0.23,1,0.32,1) 0.56s backwards; }
.ueber-hero__photos li:nth-child(4) { animation: hero-rise 0.9s cubic-bezier(0.23,1,0.32,1) 0.64s backwards; }

@media (prefers-reduced-motion: reduce) {
  .ueber-hero__lead,
  .ueber-hero__body,
  .ueber-hero__photos li { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
 *  HERO
 * ─────────────────────────────────────────────────────────────── */

.ueber-hero {
  position: relative;
  width: 100vw;
  height: 720px;
  overflow: visible;                /* photos bleed below */
  color: var(--color-white);
  z-index: 5;
}

/* ════════════════════════════════════════════════════════════════
 * STUDIO BACKDROP — soft atlas-blue radial halo + SVG-turbulence
 * grain overlay. Same generative backdrop as home/.hero so the
 * page feels like it belongs to the same studio. Apply with
 * `class="ueber-hero bg-studio"` on the <section>.
 * ─────────────────────────────────────────────────────────────── */

.bg-studio {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse 70% 60% at 50% 35%,
      rgba(17, 100, 144, 0.22) 0%,
      transparent 65%),
    var(--color-bg-deep);
}

.bg-studio::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feComponentTransfer><feFuncR type='linear' slope='3' intercept='-1'/><feFuncG type='linear' slope='3' intercept='-1'/><feFuncB type='linear' slope='3' intercept='-1'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: 0.85;
}

/* Header chrome (logo · nav · Kontakt · burger · panel) lives in
   shared/site-header.css — same source on every page. */

/* Top content row — 2 columns: lead (eyebrow + H1) + body */

.ueber-hero__top {
  position: absolute;
  left: var(--rail-pad);
  right: var(--rail-pad);
  top: 191px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(40px, 6vw, 110px);
  z-index: 7;
}

.ueber-hero__lead {
  flex: 0 1 765px;
  max-width: 765px;
}

.ueber-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-alpine);
  margin: 8px 0 24px;           /* 8-grid: eyebrow → title gap = 24 across the site */
}
.ueber-hero__eyebrow-line {
  width: 16px;
  height: 1px;
  background: var(--color-alpine);
  flex-shrink: 0;
}

.ueber-hero__title {
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1;
  color: var(--color-white);
}

.ueber-hero__body {
  flex: 0 0 405px;
  max-width: 405px;
  font-size: 16px;
  line-height: 1.3;
  color: var(--color-white);
}
.ueber-hero__body p { margin-bottom: 24px; }
.ueber-hero__body p:last-child { margin-bottom: 0; }

/* Photo strip · 4 circular events, fluid · center-anchor scaling
   ──────────────────────────────────────────────────────────────
   Adapts the home-page rings center-anchor pattern (see
   docs/03-adaptive-principles.md), with one key difference:

   ⚠ Unlike the home rings, this strip stays INSIDE the content rail
     (`--rail-pad` on either side), it never extends edge-to-edge of
     the viewport. So `--strip-w` is the inner content width, capped
     at 1280 (the Figma desktop inner). The bleed onto white Karriere
     happens vertically only — never horizontally past the rail.

   Other rules unchanged:
     · Strip width follows the inner content width — circles shrink
       smoothly on narrow desktops/tablets (резина).
     · Strip's vertical centre stays K=84 px above hero.bottom
       regardless of strip width (center-anchor scaling), so the bleed
       onto the white Karriere section scales proportionally.
     · K=84 (vs home's 40): Jakob's torso lives in the lower 30 % of
       each circle, so we keep more of it on the dark hero side and
       let only the legs/feet cut into the white. */

.ueber-hero__photos {
  --strip-w: min(calc(100vw - 2 * var(--rail-pad)), 1280px);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* strip.bottom_offset = K − strip_h/2 = 84 − strip-w/8  (4 cells) */
  bottom: calc(84px - var(--strip-w) / 8);
  width: var(--strip-w);
  height: calc(var(--strip-w) / 4);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 6;
}
/* Each circle is painted in CSS — border-radius + atlas-blue fill —
   so the transparent webp cut-outs sit on a brand surface, not the
   dark hero. The fill rhymes with the home-page service rings. */
.ueber-hero__photos li {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: var(--color-atlas);
}
.ueber-hero__photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ════════════════════════════════════════════════════════════════
 * HERO · 3-ZONE ADAPTIVE BREAKDOWN
 * ─────────────────────────────────────────────────────────────────
 * Per the brief — try to keep the 4-in-a-row composition as long as
 * possible before reflowing. Three zones:
 *
 *   A.  ≥ 732           4-in-a-row · INSIDE the content rail
 *                       (base rule above; --strip-w bound to inner
 *                       content). Hero is the fixed 720-px stage.
 *
 *   B.  600 – 731       4-in-a-row · EDGE-TO-EDGE of the viewport.
 *                       Hero structure reflows — height auto, content
 *                       in flex column, top in single column. Photos
 *                       remain absolutely positioned at hero.bottom
 *                       with the same K=84 center-anchor formula, but
 *                       --strip-w switches to 100vw so circles span
 *                       the full viewport width.
 *
 *   C.  < 600           Photos restructure to 2 × 2 (boundary-span).
 *                       Hero structure stays the same as zone B; only
 *                       the photo grid changes — top row centred at
 *                       hero.bottom − 40 (matching home-rings mobile
 *                       pattern), bottom row falls onto white Karriere.
 *                       Photos go BACK inside the rail (so the 2×2
 *                       circles aren't disturbingly large on a phone).
 * ════════════════════════════════════════════════════════════════ */

/* Zone B + C share the hero/top reflow */
@media (max-width: 731.98px) {

  .ueber-hero {
    height: auto;
    display: flex;
    flex-direction: column;
    /* padding-bottom (zone B default) reserves vertical room for the
       absolutely-positioned 4-in-row photos. With strip-w = 100vw and
       K=84: bleed = 12.5vw − 84, photos.top = hero.bottom − 84 − strip_h/2
       = hero.bottom − 84 − 12.5vw. We need text-end + 24 ≤ photos.top,
       so padding-bottom = 24 + 84 + 12.5vw = 108 + 12.5vw. Zone C
       overrides this below. */
    padding: 96px var(--rail-pad) calc(108px + 12.5vw);
    overflow: visible;
  }

  /* Top row reflows to single column · lead above body */
  .ueber-hero__top {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    flex-direction: column;
    gap: 24px;
    z-index: auto;
    order: 1;
    margin-bottom: 24px;
  }
  .ueber-hero__lead,
  .ueber-hero__body {
    flex: 1 1 100%;
    max-width: 100%;
    width: 100%;
  }
  .ueber-hero__title {
    font-size: clamp(36px, 9vw, 48px);   /* shrinks gracefully on narrow */
  }

  /* Zone B · 4-in-a-row, edge-to-edge viewport
     Override --strip-w only — base rule's `bottom: calc(84 − strip-w/8)`,
     `width: var(--strip-w)`, `height: calc(strip-w/4)` and the 4-col
     grid all stay. left:50% + translateX(-50%) keep the strip centred. */
  .ueber-hero__photos {
    --strip-w: 100vw;
  }
}

/* Zone C · < 600 · photos restructure to 2 × 2 (back inside the rail) */
@media (max-width: 599.98px) {

  .ueber-hero {
    /* Different padding-bottom for the 2×2 layout: 24 buffer + 40 K
       + half-row (strip-w/4) where strip-w is the rail-aware mobile
       value below. */
    padding: 96px var(--rail-pad) calc(64px + (100vw - 2 * var(--rail-pad)) / 4);
  }

  .ueber-hero__photos {
    --strip-w: calc(100vw - 2 * var(--rail-pad));
    left: var(--rail-pad);
    right: auto;
    top: calc(100% - 40px - var(--strip-w) / 4);
    bottom: auto;
    transform: none;
    width: var(--strip-w);
    height: var(--strip-w);              /* 2 rows × strip-w/2 */
    grid-template-columns: 1fr 1fr;
    margin: 0;
  }
}


/* ════════════════════════════════════════════════════════════════
 *  KARRIERE · Berufsbiografie
 * ─────────────────────────────────────────────────────────────── */

.karriere {
  background: var(--color-paper);
  color: var(--color-charcoal);
  /* 170 px top clears the 76-px photo bleed plus breathing room */
  padding: clamp(140px, 14vw, 200px) 0 clamp(80px, 10vw, 120px);
}

.karriere__inner {
  padding: 0 var(--rail-pad);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}

/* Karriere padding-top tracks the photo-zone in use, so the eyebrow
   always clears the bleed.  Lives here, AFTER the .karriere base
   rule, so its `padding` shorthand cannot override the longhand
   override (same caveat that bit us before).
   Zone A (≥732):  base rule's clamp(140, 14vw, 200) is enough — the
                   bleed there is at most 76 px (1280/8 − 84).
   Zone B (600-731): bleed = 12.5vw − 84; can be small or negative.
                   The base 140 is plenty; no override needed.
   Zone C (<600):  2×2 photos extend ~3*strip-w/4 − 40 below the hero,
                   which exceeds the base 140 — override required. */
@media (max-width: 599.98px) {
  .karriere {
    padding-top: calc(3 * (100vw - 2 * var(--rail-pad)) / 4 + 24px);
  }
}
@media (max-width: 980px) {
  .karriere__inner { grid-template-columns: 1fr; gap: 40px; }
}

.karriere__head {
  position: sticky;
  top: 32px;
  max-width: 437px;
}
@media (max-width: 980px) { .karriere__head { position: static; } }

.karriere__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-atlas);
  margin-bottom: 24px;          /* 8-grid: eyebrow → title gap */
}
.karriere__eyebrow-line {
  width: 16px;
  height: 1px;
  background: var(--color-atlas);
  flex-shrink: 0;
}

.karriere__title {
  font-size: var(--text-h2);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.06;
  color: var(--color-charcoal);
  margin-bottom: 20px;
}

.karriere__intro {
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-charcoal);
  max-width: 328px;
}

/* ── Stepper ───────────────────────────────────────────────────── */

.stepper {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.stepper__item {
  display: flex;
  gap: 32px;
  align-items: stretch;
}

/* Left rail: 48-px atlas disc on top, 1-px atlas line continuing
   down to the next disc. Last item omits the line.
   `padding-top` pushes the disc down so its top edge aligns with the
   org-eyebrow top edge in the content column. */
.stepper__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 48px;
  padding-top: 8px;
}

.stepper__disc {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--color-atlas);
  color: var(--color-white);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.stepper__line {
  flex: 1;
  width: 1px;
  background: var(--color-atlas);
  opacity: 0.4;
  margin-top: 4px;
  margin-bottom: 4px;
}

.stepper__content {
  flex: 1;
  padding-top: 8px;            /* baselines align with disc number */
  padding-bottom: 56px;        /* gap to next station */
  max-width: 720px;
}
.stepper__item:last-child .stepper__content {
  padding-bottom: 0;
}

.stepper__org {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-atlas);
  margin-bottom: 12px;
}

.stepper__role {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--color-charcoal);
  margin-bottom: 24px;
}

.stepper__desc {
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-charcoal);
}

/* .karriere-alt · Variant B (editorial 4-col stations) moved to
   /sandbox/ as block B/03. Vertical stepper above is the canonical
   layout. */

/* .site-footer · moved to shared/site-footer.css (loaded via <link>). */

/* ════════════════════════════════════════════════════════════════
 * Multiperspektiven · Mehrwert  (Figma 96:858)
 * Atlas-blue stage with four 500px rings overlapping by -43px.
 * Outer rings (1, 4) bleed past the inner column and fade into the
 * bg via gradient masks; inner rings (2, 3) carry text and meet at
 * a sky-pale lens at the shared centre.
 * ════════════════════════════════════════════════════════════════ */

.multiperspektiven {
  position: relative;
  background: var(--color-atlas);
  color: var(--color-white);
  padding: 80px 0 0;            /* rings flush with section bottom edge */
  overflow: hidden;
}

.multiperspektiven__inner {
  /* Side padding follows --rail-pad — same horizontal anchor as every
     other section's content (Karriere, Leistungen, FAQ, CTA, …) so the
     eyebrow + title align across the page. The decorative rings break
     out of this column on purpose via their own negative margins. */
  padding: 0 var(--rail-pad);
  position: relative;
  /* No z-index here — let the gradient masks (z-2) layer above the
     decorative rings, while head + text rings opt into z-3 below. */
}

/* Head sits above the gradient masks (z-2) so the title can't be
   accidentally clipped on narrow viewports where the masks bleed
   inward. */
.multiperspektiven__head {
  position: relative;
  z-index: 3;
}

.multiperspektiven__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-alpine);
  margin: 0 0 24px;             /* 8-grid: eyebrow → title gap */
}
.multiperspektiven__eyebrow-line {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--color-alpine);
}

.multiperspektiven__title {
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.06;
  color: var(--color-white);
  max-width: 657px;
  margin: 0 0 64px;
}

/* Rings rail — overflows the .multiperspektiven__inner column on
   purpose, so the decorative outer rings reach the gradient masks. */
.rings {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: calc(50% - 50vw + 17px);   /* break out of column to viewport */
  margin-right: calc(50% - 50vw + 17px);
  /* Hairline rule of total rings = 4*500 - 3*43 = 1871px;
     viewport may be narrower, so let it overflow horizontally. */
}
.rings__ring {
  flex: 0 0 500px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  margin-right: -43px;
  position: relative;
  /* Inset box-shadow keeps the 500px content-box intact (no border-
     box shrinkage), so the lens math `calc(100% - 43px)` stays exact. */
  box-shadow: inset 0 0 0 1px var(--color-white);
}
/* Only the FINAL ring drops its overlap. Using :last-of-type would
   also reset ring 3 (the last <article>) and break the right pair's
   intersection — :last-child is type-agnostic, so only ring 4 (the
   final <span> decor) loses its negative margin. */
.rings__ring:last-child { margin-right: 0; }

.rings__ring--text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 123px 80px 0;
  text-align: center;
  /* Sit above the gradient bleed masks so the inner text rings stay
     fully visible regardless of mask width. Decorative rings have
     no position/z-index → they sink under the masks and fade out. */
  z-index: 3;
}
.rings__title {
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--color-white);
}
.rings__desc {
  font-size: 16px;
  line-height: 1.3;
  font-weight: 400;
  margin: 0;
  color: var(--color-white);
}

/* Lens at the shared centre of rings 2 & 3.
   Mounted inside ring 2 and pinned to its right edge (overlap = 43px),
   so its centre falls exactly on the symmetry axis of the two text
   rings — independent of the surrounding flex math. The lens path
   itself (43 × 203.165) is the boolean intersection from Figma 102:944. */
.rings__ring--text { position: relative; }
.rings__lens {
  position: absolute;
  left: calc(100% - 43px);    /* lens left = ring2 right edge - lens width */
  top: 50%;
  transform: translateY(-50%);
  width: 43px;
  height: 203.165px;
  pointer-events: none;
  z-index: 1;
}

/* Gradient bleed — soft edge that fades the decorative outer rings
   out into the atlas backdrop on either side. Width covers the
   full visible chord of those rings (~270px each at 1440 vw),
   height covers the ring's full diameter so the fade is uniform
   top to bottom. Rings 1 & 4 sit at z-index 0 (default), masks at
   z-index 1, inner content (.multiperspektiven__inner) at z-index 2. */
.multiperspektiven::before,
.multiperspektiven::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;                  /* full section height — no peeking arc tops */
  width: 360px;
  pointer-events: none;
  z-index: 2;
}
.multiperspektiven::before {
  left: 0;
  background: linear-gradient(90deg,
    var(--color-atlas) 0%,
    rgba(17, 100, 144, 0) 100%);
}
.multiperspektiven::after {
  right: 0;
  background: linear-gradient(270deg,
    var(--color-atlas) 0%,
    rgba(17, 100, 144, 0) 100%);
}

/* ════════════════════════════════════════════════════════════════
 * Aktuelle Engagements  (Figma 102:948)
 * Paper backdrop, three white cards with a 5px atlas top-rule.
 * ════════════════════════════════════════════════════════════════ */

.engagements {
  background: var(--color-paper);
  padding: 80px 0;
}
.engagements__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px;
}

.engagements__head {
  margin-bottom: 40px;
  max-width: 657px;
}
.engagements__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-atlas);
  margin: 0 0 24px;             /* 8-grid: eyebrow → title gap */
}
.engagements__eyebrow-line {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--color-atlas);
}
.engagements__title {
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.06;
  color: var(--color-charcoal);
  margin: 0;
}

.engagements__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.engagement-card {
  background: var(--color-white);
  border-top: 5px solid var(--color-atlas);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 248px;
}

/* Logo · subtle brand mark above the text. Height locked at 48 px so
   one logo never visually outweighs another regardless of native
   aspect ratio. Object-fit contain keeps proportions; left-aligned to
   match the text below; extra 8 px below the flex gap adds breathing
   room before the org eyebrow (24 px total cluster gap, 8-grid). */
.engagement-card__logo {
  height: 48px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}
.engagement-card__logo img {
  height: 100%;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
}

.engagement-card__org {
  font-size: 12px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-atlas);
  margin: 0;
}
.engagement-card__role {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--color-charcoal);
  margin: 0;
}
.engagement-card__desc {
  font-size: 16px;
  line-height: 1.3;
  color: var(--color-charcoal);
  margin: 0;
}

/* ════════════════════════════════════════════════════════════════
 * Meine Partner · Netzwerk  (Figma 102:994)
 * White stage, three square portraits with name + role + blurb.
 * Same head-row grid pattern as Stationen meiner Laufbahn.
 * ════════════════════════════════════════════════════════════════ */

.partner {
  background: var(--color-white);
  padding: 80px 0 120px;
}
.partner__inner {
  /* Side padding follows --rail-pad — same horizontal anchor as every
     other section. Cards inside the 3-col grid never stretch past
     their max width and stay left-anchored in their column. */
  padding: 0 var(--rail-pad);
}

.partner__head {
  margin-bottom: 64px;
}
.partner__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-atlas);
  margin: 0 0 24px;             /* 8-grid: eyebrow → title gap */
}
.partner__eyebrow-line {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--color-atlas);
}

.partner__head-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 32px;
  align-items: start;
}
.partner__title {
  grid-column: 1 / 3;
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.06;
  color: var(--color-charcoal);
  margin: 0;
  max-width: 438px;
}
.partner__intro {
  grid-column: 3;
  font-size: 16px;
  line-height: 1.3;
  color: var(--color-charcoal);
  margin: 0;
  max-width: 328px;
}

.partner__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  /* Cards never stretch — they cap at 405 (the natural Figma-1440
     column width) and anchor to the left edge of their grid cell.
     On wider viewports the extra column space stays empty on the
     right, which keeps the photo discs from blowing up beyond the
     intended portrait size. */
  justify-items: start;
}

.partner-card {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: 405px;
}
.partner-card__photo {
  margin: 0;
  aspect-ratio: 1 / 1;
  width: 100%;
  background: var(--color-alpine);
  overflow: hidden;
  border-radius: 50%;             /* circular frame · same size as the square */
}
.partner-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.partner-card__photo--placeholder {
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(17, 100, 144, 0.08), rgba(17, 100, 144, 0.02)),
    var(--color-alpine);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.partner-card__name {
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--color-charcoal);
  margin: 0;
}
.partner-card__role {
  font-size: 12px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-atlas);
  margin: -24px 0 0;          /* tighten name → role gap inside the 40px column gap */
}
.partner-card__desc {
  font-size: 16px;
  line-height: 1.3;
  color: var(--color-charcoal);
  margin: -24px 0 0;
  padding-right: 20%;             /* narrow blurb — column feels less crowded */
}

/* ════════════════════════════════════════════════════════════════
 * Über mich · CTA  (Lassen Sie uns ins Gespräch kommen.)
 * Charcoal stage, editorial 4-column rhythm. Headline + tag rail
 * + intro / primary CTA. Texts come verbatim from the wireframe;
 * the layout is our Swiss-grid voice (no centred boxes).
 * ════════════════════════════════════════════════════════════════ */

.ueber-cta {
  background: var(--color-atlas);          /* same atlas blue as Mehrwert rings */
  color: var(--color-white);
  padding: 96px 0 112px;
}
.ueber-cta__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px;
}

.ueber-cta__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-alpine);
  margin: 0 0 24px;             /* 8-grid: eyebrow → title gap */
}
.ueber-cta__eyebrow-line {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--color-alpine);
}

.ueber-cta__row {
  display: grid;
  grid-template-columns:
    minmax(0, 1.4fr)        /* headline */
    minmax(0, 0.7fr)        /* tag rail */
    minmax(0, 1fr);         /* intro + button */
  column-gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

.ueber-cta__title {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.04;
  color: var(--color-white);
  margin: 0;
  max-width: 540px;
}

.ueber-cta__tags {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  padding-left: 20px;
}
.ueber-cta__tags li {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-alpine);
}

.ueber-cta__col {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  max-width: 360px;
}
.ueber-cta__sub {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  margin: 8px 0 0;
}
/* CTA button uses shared .btn-cta primitive (shared/buttons.css).
   The atlas-on-blue context uses the .btn-cta--on-blue inverse. */

/* ─── Tablet reflow for the four new sections ───────────────── */
@media (max-width: 1024px) {
  .engagements__inner,
  .partner__inner,
  .ueber-cta__inner { padding: 0 32px; }

  .engagements__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .partner__head-row { grid-template-columns: 1fr 1fr; }
  .partner__title { grid-column: 1; }
  .partner__intro { grid-column: 2; }

  .ueber-cta__row {
    grid-template-columns: 1fr 1fr;
    row-gap: 32px;
  }
  .ueber-cta__title { grid-column: 1 / -1; }
  .ueber-cta__tags { grid-column: 1; }
  .ueber-cta__col { grid-column: 2; }
}

/* ─── Multiperspektiven · structural break extended down to 800 ──
   Iteration #2 — keep the horizontal 4-ring composition (decorative
   outers + two text rings meeting at the lens) all the way down to
   800 px. Below 800 the rings switch to the vertical 2-ring stack
   (decoratives hidden, text rings carry the meaning).
   The break is intentionally 224 px narrower than the engagements /
   partner / cta tablet break above (1024) — those have their own
   reasons to reflow earlier; the rings can stretch much further. */
@media (max-width: 799.98px) {
  .multiperspektiven { padding: 64px 0 96px; }
  /* No inner padding override needed — base rule already uses
     var(--rail-pad), which on this viewport range is the clamped 20-32-ish. */

  /* Two text rings stack vertically and OVERLAP each other by 8.6 %
     of their diameter — matches the desktop horizontal pattern where
     ring spacing is 43 px on 500-px rings (43 / 500 = 0.086). The lens
     (vesica-piscis intersection) is rotated 90° so its long axis is
     horizontal, sized proportionally so it always fills exactly the
     intersection of the two visible circles. */
  .rings {
    margin: 0;
    flex-direction: column;
    gap: 0;
    --ring-size: min(440px, 90vw);
    --overlap: calc(var(--ring-size) * 0.086);
    align-items: center;
  }
  .rings__ring--decor { display: none; }
  .rings__ring {
    flex: 0 0 auto;
    width: var(--ring-size);
    height: var(--ring-size);
    margin: 0;
  }
  /* Content lifts inside the circle: tighter top padding so title/body
     sit higher (away from the white lens at the bottom of the upper
     ring), narrower side padding so long German body lines wrap on
     fewer rows, and a bottom buffer so the desc never collides with
     the lens. Gap between title and body trimmed to claw back another
     6 px of vertical space on the smallest phones. Body text drops
     to 14 px so the long German paragraphs always fit inside the
     circle's narrowing top/bottom curves. */
  .rings__ring--text {
    padding: 64px 36px 48px;
    gap: 16px;
  }
  .rings__desc {
    font-size: 14px;
    line-height: 1.4;
  }
  /* Second text ring overlaps the first */
  .rings__ring--text + .rings__ring--text {
    margin-top: calc(-1 * var(--overlap));
  }
  /* Lens — scaled to match ring size, rotated so its long axis is
     horizontal, positioned at the centre of the overlap zone. Pure
     white fill (overrides the SVG's #E8F2F7 attribute). */
  .rings__lens {
    width: calc(var(--ring-size) * 0.086);    /* 43 / 500 */
    height: calc(var(--ring-size) * 0.406);   /* 203 / 500 */
    left: 50%;
    top: calc(100% - var(--overlap) / 2);
    transform: translate(-50%, -50%) rotate(90deg);
    fill: var(--color-white);
  }
  .multiperspektiven::before,
  .multiperspektiven::after { display: none; }
}

@media (max-width: 640px) {
  .engagements__grid,
  .partner__grid { grid-template-columns: 1fr; }
  .partner__head-row { grid-template-columns: 1fr; row-gap: 16px; }
  .partner__title,
  .partner__intro { grid-column: 1; }
  .ueber-cta__row { grid-template-columns: 1fr; }
  .ueber-cta__title,
  .ueber-cta__tags,
  .ueber-cta__col { grid-column: 1; }
  .ueber-cta__tags { padding-left: 16px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}