/* ===========================================================
   KKA Website v2 — Global Stylesheet (dark-premium)
   Source: docs/legacy/mockup-base/index.html (02b-dark-premium-kka)
   Tokens: docs/kka-web-tokens.md (chambray + lochmara)
   =========================================================== */

/* ----- Self-hosted fonts ----- */
@font-face {
  font-family: 'DM Sans';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/_shared/fonts/dm-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/_shared/fonts/dm-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/_shared/fonts/dm-sans-700.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Serif Display';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/_shared/fonts/dm-serif-display-400.woff2') format('woff2');
}

/* ----- Tokens ----- */
:root {
  /* Chambray scale */
  --chambray-50:  #edf0fd;
  --chambray-100: #d1dbf9;
  --chambray-200: #a5baf4;
  --chambray-300: #7a9eef;
  --chambray-400: #4784ea;
  --chambray-500: #366dc5;
  --chambray-600: #2a57a0;
  --chambray-700: #1f437d;
  --chambray-800: #163260;
  --chambray-900: #0a1d3b;
  --chambray-950: #041026;

  /* Lochmara scale */
  --lochmara-50:  #eaf1fd;
  --lochmara-100: #ccddfb;
  --lochmara-200: #97bff7;
  --lochmara-300: #5ca5f3;
  --lochmara-400: #398dd9;
  --lochmara-500: #2e75b6;

  --white: #ffffff;

  /* Dark-premium semantic — LEGACY: lifted two full chambray steps
     (bg 950→800, surface 900→700 / KKA Navy). On the official KKA
     token scale (see docs/kka-web-tokens.md). Glass colour mirrors
     surface so cards still pop. */
  --bg:           var(--white);
  /* Page background field only — a whisper off-white so white cards/ink
     (which keep --bg / --white) lift subtly. NOT used for any surface that
     must read as true white. */
  --page-bg:      #fafafa;
  --surface:      var(--chambray-700);
  --text:         var(--chambray-900);
  --text-soft:    #45526b;
  --muted:        #7a8ba8;
  --accent:       var(--lochmara-300);
  --accent-hover: var(--lochmara-200);
  --navy:         var(--chambray-700);
  --border:       rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.18);
  --glass:        rgba(31, 67, 125, 0.6);
  --glass-strong: rgba(31, 67, 125, 0.85);

  /* RGB triples — used with rgba(var(--token-rgb), <alpha>) so the
     same accent or background can be reused at any opacity without
     duplicating literal RGB values across the file. Keep in sync
     with --accent (lochmara-300) and --bg. */
  --accent-rgb:   92, 165, 243;
  --bg-rgb:       22, 50, 96;
  --navy-rgb:     31, 67, 125;

  /* Reusable monospaced stack (kickers, numerals, code-tone labels). */
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Standard easing for editorial micro-interactions (lifts, scales). */
  --ease-out:     cubic-bezier(.2, .8, .2, 1);

  /* Atmospheric gradient mesh used by .hero--inner overlays and
     left-aligned page headers (.portco-header, .news-header). */
  --mesh-bg:
    radial-gradient(ellipse 70% 60% at 18% 25%, rgba(var(--accent-rgb), 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 82% 20%, rgba(var(--navy-rgb), 0.20) 0%, transparent 60%);

  /* Site-wide scam-warning banner sits above the fixed site-header.
     Layout offsets (header.top, hero/section padding-top) reference
     this height so the banner can be resized in one place. */
  --banner-h: 44px;

  /* Layout */
  --container: 1200px;
  --gap: 1.5rem;
  --radius: 12px;
  --radius-sm: 6px;
  --radius-pill: 999px;
  --transition: 300ms ease;

  /* Typography */
  --font-sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'DM Serif Display', Georgia, serif;
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
img, picture, svg { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ----- Base ----- */
body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--page-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.15;
  color: var(--chambray-800);
}
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1rem; }
p { margin: 0 0 1em; }

a {
  color: var(--accent);
  transition: color var(--transition);
}
a:hover { color: var(--accent-hover); }

/* Dark-surface text scope — :root --text is dark for the light page body;
   these containers sit on a dark (navy / glass / surface) background, so
   they flip --text back to light. Inherited body text stays legible on
   both grounds without touching the ~35 individual color: var(--text) rules. */
.scam-banner, .site-header, .site-footer, .hero,
.card, .portfolio-card, .news-card, .team-card, .facts-strip, .facts,
.lookup-card, .tev-pillar, .esg-lifecycle li, .cw-node, .esg-doc, .sector-cluster,
.modal-card, .modal-portrait, .lightbox, .arrival-tile {
  --text: var(--lochmara-50);
  --text-soft: #cfd9eb;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* Skip-link */
.skip-link {
  position: absolute; top: -40px; left: 0;
  background: var(--accent); color: var(--bg);
  padding: 0.5rem 1rem; z-index: 10000;
  border-radius: 0 0 4px 0;
  font-size: 0.85rem; font-weight: 600;
}
.skip-link:focus { top: 0; }

/* ----- Layout primitives ----- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 2rem;
}
.section { padding-block: 6rem; }
@media (max-width: 600px) {
  .container { padding-inline: 1.25rem; }
  .section { padding-block: 4rem; }
}

/* Tinted band — quiet alternating shade for stats/teaser sections.
   Replaces inline gradient styles that were sprinkled across pages.
   LEGACY: 0.04 → 0.07 so the band still reads after lifting --bg. */
.section--tinted {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(var(--accent-rgb), 0.07) 50%,
    transparent 100%);
}

/* ----- Glass-tile surface — institutional dark-glass card body shared
   across portfolio cards, lookup cards, news cards, team cards,
   factbook pillars, ESG lifecycle steps, sector clusters and the
   ESG document list. Each individual rule below adds only its
   spacing, typography and per-component overrides. */
.card,
.portfolio-card,
.news-card,
.team-card,
.facts-strip,
.facts,
.lookup-card,
.tev-pillar,
.esg-lifecycle li,
.cw-node,
.esg-doc a,
.sector-cluster {
  background: var(--chambray-800);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ----- Mono kicker family — small mono-uppercase labels that act as
   numerical indices, eyebrow tags, and step counters across the site
   (TEV pillars, ESG lifecycle, document type chips, etymology
   transliterations). Each individual rule still sets its own size,
   letter-spacing and any padding; this base only unifies the two
   identical properties. */
.tev-pillar__num,
.tev-lifecycle__steps li::before,
.esg-lifecycle li::before,
.etymology__translit,
.esg-doc__type {
  font-family: var(--font-mono);
  color: var(--accent);
}

/* Section heading kit (mockup-derived) */
.section-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--chambray-400);
  margin-bottom: 0.75rem;
}
.section-title { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 1rem; }
.section-desc { color: var(--muted); max-width: 600px; margin-bottom: 3rem; }
.gold-line {
  width: 60px; height: 2px;
  background: var(--accent);
  margin-bottom: 2rem;
}

/* ----- Header (sticky, blur) ----- */
/* ----- Scam-warning banner -----
   Sticky strip above the fixed site-header. Cool, institutional —
   takes the visitor seriously without feeling alarmist. References
   --banner-h so the rest of the layout offsets in one place. */
.scam-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1001;
  height: var(--banner-h);
  background: linear-gradient(180deg, rgb(var(--navy-rgb)) 0%, #163260 100%);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.25rem;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--text);
}
/* Higher specificity than `.scam-banner { display:flex }`, so the
   default UA `[hidden]{display:none}` rule actually wins after dismiss. */
.scam-banner[hidden] { display: none !important; }
.scam-banner__inner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}
.scam-banner__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--accent);
  font-size: 0.85rem;
  line-height: 1;
}
.scam-banner__text {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text);
}
.scam-banner__cta {
  flex-shrink: 0;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.5);
  padding-bottom: 1px;
  transition: color 200ms ease, border-color 200ms ease;
  white-space: nowrap;
}
.scam-banner__cta:hover,
.scam-banner__cta:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
  outline: none;
}
.scam-banner__close {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: 0.5rem;
  /* Disable iOS double-tap-to-zoom delay + tap highlight noise */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.scam-banner__close:hover,
.scam-banner__close:focus-visible {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.5);
  color: var(--accent);
  outline: none;
}
/* Tablet / narrow desktop — keep single line, just tighten copy */
@media (max-width: 1080px) {
  .scam-banner__text { font-size: 0.78rem; }
  .scam-banner__cta { font-size: 0.78rem; }
}
/* Mobile — banner allowed to wrap (icon + close on row 1, text on row 2, CTA on row 3).
   --banner-h is syncronised to actual height by scam-banner.js so the header
   always sits flush below the banner. */
@media (max-width: 760px) {
  .scam-banner {
    height: auto;
    padding: 0.5rem 0.75rem;
  }
  .scam-banner__inner { gap: 0.4rem 0.6rem; flex-wrap: wrap; align-items: center; }
  .scam-banner__icon { order: 1; }
  .scam-banner__close { order: 2; margin-left: auto; width: 44px; height: 44px; }
  .scam-banner__text { font-size: 0.74rem; flex-basis: 100%; order: 3; line-height: 1.4; }
  .scam-banner__cta { font-size: 0.76rem; order: 4; margin-left: 0; }
}
/* When the mobile menu is open, lift it above the banner so the dropdown
   sits in front and the user can dismiss either layer. */
@media (max-width: 1024px) {
  .site-nav__links.open { z-index: 1002; }
}

.site-header {
  position: fixed;
  top: var(--banner-h); left: 0; right: 0;
  z-index: 1000;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(var(--bg-rgb), 1.0);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
  transition: background var(--transition), border-color var(--transition);
}
.site-header.scrolled { background: rgba(var(--bg-rgb), 0.96); }
.site-header__inner {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: var(--container);
  margin-inline: auto;
}
.site-header__logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.site-header__logo img { height: 32px; width: auto; display: block; }
.site-nav {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-left: auto;
}
.site-nav__links { display: flex; gap: 1.5rem; align-items: center; }
.site-nav__link {
  font-size: 0.825rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
  transition: color var(--transition);
}
.site-nav__link:hover { color: var(--accent); }
.site-nav__link[aria-current="page"] {
  color: var(--accent);
  position: relative;
}
.site-nav__link[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}
.site-nav__link--cta[aria-current="page"]::after { display: none; }
.site-footer a[aria-current="page"] { color: var(--accent); font-weight: 500; }
.site-nav__link--cta {
  padding: 0.45rem 1rem;
  border: 1px solid var(--accent);
  border-radius: 2px;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  transition: all var(--transition);
}
.site-nav__link--cta:hover { background: var(--accent); color: var(--bg); }

/* Lang-switch — pill */
.lang-switch {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}
.lang-switch button {
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.35rem 0.65rem;
  cursor: pointer;
  transition: all var(--transition);
  min-width: 36px;
  min-height: 32px;
}
.lang-switch button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--bg);
}
.lang-switch button:hover:not([aria-pressed="true"]) { color: var(--text); }

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 0.25rem;
}

@media (max-width: 1024px) {
  .site-header { padding: 1rem 1.25rem; }
  .site-nav { gap: 0.75rem; }
  .site-nav__links {
    display: none;
    position: absolute;
    top: 100%; left: 0;
    width: 100%;
    flex-direction: column;
    background: rgba(var(--bg-rgb), 0.97);
    backdrop-filter: blur(20px);
    padding: 2rem;
    gap: 1.25rem;
    border-bottom: 1px solid var(--border);
  }
  .site-nav__links.open { display: flex; }
  .menu-toggle { display: block; }
}

/* ----- Hero ----- */
.hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 6rem 2rem 4rem;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 65%;
  z-index: 0;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
      linear-gradient(95deg,
    rgba(255,255,255,0.8) 20%, rgba(255,255,255,0) 80%),
    /* gentle top + bottom scrim so banner/header and section edge blend */
     linear-gradient(180deg,
    rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%);

    /* linear-gradient(180deg,
      rgba(var(--bg-rgb), 0.85) 0%,
      rgba(var(--bg-rgb), 0.55) 30%,
      rgba(var(--bg-rgb), 0.7) 65%,
      var(--bg) 100%),
    radial-gradient(ellipse at 30% 20%, rgba(var(--navy-rgb), 0.3) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(var(--accent-rgb), 0.18) 0%, transparent 50%);*/
}
.hero__content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  text-align: center;
}
.hero__tag {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--chambray-600);
  margin-bottom: 1.5rem;
}
.hero h1 {
  margin-bottom: 1.5rem;
  /* text-shadow: 0 2px 24px rgba(var(--bg-rgb), 0.6); */
}
.hero h1 .accent { color: var(--chambray-400); }
.hero__sub {
  font-size: 1.125rem;
  color: var(--chambray-800);
  max-width: 640px;
  margin: 0 auto 3rem;
  /* text-shadow: 0 1px 12px rgba(var(--bg-rgb), 0.6); */
  text-wrap: balance; /* avoid orphan-word lines like "Berlin." alone */
}
/* Inner-hero typography: a step down from the home-hero size. Long
   manifest-style headlines (the home page) need 4.5rem, but inner
   heroes carry short noun phrases ("Companies we back.") that look
   marooned at that size. Editorial/FT convention is to scale down
   the inner hero one step. */
.hero--inner h1 {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  margin-bottom: 1rem;
}
.hero--inner .hero__sub {
  margin-bottom: 1.5rem;
}
/* Editorial accent: thin 32px rule above the kicker. Adds craft
   without weight — same trick FT, The Economist and EQT use to
   anchor a section opener. */
.hero--inner .section-tag {
  position: relative;
  padding-top: 1.25rem;
  display: inline-block;
}
.hero--inner .section-tag::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 1px;
  background: var(--accent);
  opacity: 0.55;
}

/* Lighter hero (no full-bleed image) for inner pages — atmospheric
   gradient mesh creates depth without an extra image asset.
   Fixed min-height so all inner-page heroes share the same vertical
   footprint (legal pages have short titles, team/about have longer
   ones — without this they'd visually mismatch). */
.hero--inner {
  /* Compact editorial intro band — auto-height. Top padding accounts
     for the fixed site-header AND the scam-warning banner above it. */
  min-height: 0;
  padding: calc(8rem + var(--banner-h)) 2rem 1.25rem;
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
@media (max-width: 700px) {
  .hero--inner { padding: calc(6.5rem + var(--banner-h)) 1.25rem 1rem; }
}

.hero--inner .hero__overlay {
  background: rgba(0, 0, 0, 0.0);
    /*radial-gradient(ellipse 70% 60% at 18% 25%, rgba(var(--accent-rgb), 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 82% 20%, rgba(var(--navy-rgb), 0.30) 0%, transparent 60%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(var(--accent-rgb), 0.08) 0%, transparent 65%),
    linear-gradient(180deg, rgba(var(--bg-rgb), 0.0) 0%, rgba(var(--bg-rgb), 0.4) 100%); */
}

/* Stats counter */
.stats {
  display: flex;
  gap: 3rem;
  justify-content: center;
  flex-wrap: wrap;
}
.stat { text-align: center; }
.stat__value {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  color: var(--accent);
  line-height: 1;
}
.stat__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--chambray-600);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 0.5rem;
}
@media (max-width: 700px) {
  .stats { gap: 2rem; }
  .stat__value { font-size: 2rem; }
}

/* ----- CTA buttons ----- */

.cta-btn {
  display: inline-block;
  padding: 0.875rem 2.5rem;
  background: var(--accent);
  color: var(--bg);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: all var(--transition);
}
.cta-btn:hover {
  background: var(--accent-hover);
  color: var(--bg);
  transform: translateY(-2px);
}
.cta-btn--ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.825rem 2.5rem;
}
.cta-btn--ghost:hover {
  background: var(--accent);
  color: var(--bg);
}
.cta-section {
  text-align: center;
  padding: 8rem 2rem;
  position: relative;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(var(--accent-rgb), 0.08) 0%, transparent 70%);
}
.cta-section > * { position: relative; }

/* ----- Glass cards (universal) ----- */
.card {  padding: 2rem;
  transition: border-color var(--transition), transform var(--transition);
}
.card:hover {
  border-color: rgba(var(--accent-rgb), 0.35);
  transform: translateY(-4px);
}
.card__icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.05));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 1.25rem;
}
.card h3 { color: var(--accent); font-size: 1.25rem; margin-bottom: 0.75rem; }
.card p { color: var(--chambray-50); font-size: 0.95rem; line-height: 1.7; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* ----- Portfolio cards (magazine-grid: 3-up desktop, EQT/Apax style) -----
   Bigger tiles than the news-card grid because each portco is a trust
   anchor, not a feed item. 4:3 hero photo for a magazine-cover feel,
   serif title in display register, restrained sub-line. Whole card is
   an <a> already. Hover reveals a "Profil ansehen →" cue. */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
@media (max-width: 900px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .portfolio-grid { grid-template-columns: 1fr; }
}

.portfolio-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  transition: border-color 350ms ease, transform 350ms var(--ease-out), box-shadow 350ms ease;
}
.portfolio-card:hover,
.portfolio-card:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.4);
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(var(--bg-rgb), 0.35);
  color: inherit;
  outline: none;
}
.portfolio-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface);
  position: relative;
}
.portfolio-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(var(--bg-rgb), 0.45) 100%);
  pointer-events: none;
}
/* Brand mark in the top-right of each hero photo. Small white
   silhouette inside a dark glass tile — Permira / Bridgepoint
   convention. The tile gives every logo a uniform readable backdrop
   regardless of photo content; the small image size (22px) keeps
   the badge subordinate to the photo, not a screaming label.
   - White silhouette via brightness(0) invert(1) (source colour
     irrelevant; works for any transparent-bg SVG/PNG/WebP)
   - Glass tile: dark navy 55% with 10px backdrop-blur, 1px subtle
     border, 8px radius — matches the site's glass vocabulary
   - max-width: calc(100% - 2rem) ensures the tile never clips the
     card edge */
.portfolio-card__brand {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  max-width: calc(100% - 2rem);
  background: rgba(var(--chambray-100), 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  pointer-events: none;
  transition: background 280ms ease, border-color 280ms ease;
}
.portfolio-card__brand > img {
  height: 22px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.92;
  transition: opacity 280ms ease;
}
/* BLACKROLL wordmark is very wide (≈7:1) — trim its height so it
   doesn't overpower the card next to other brand marks. */
.portfolio-card__brand > img[src$="/blackroll.svg"] {
  height: 16px;
}
.portfolio-card:hover .portfolio-card__brand {
  background: rgba(var(--bg-rgb), 0.72);
  border-color: rgba(var(--accent-rgb), 0.25);
}
.portfolio-card:hover .portfolio-card__brand > img { opacity: 1; }
.portfolio-card__media > picture img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease-out), filter 400ms ease;
  filter: saturate(0.9);
}
.portfolio-card:hover .portfolio-card__media > picture img {
  transform: scale(1.06);
  filter: saturate(1);
}
.portfolio-card__body {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  flex: 1;            /* fills remaining card height so cue can sit at bottom */
}
.portfolio-card__sector {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
  /* Reserve two lines so single-line sectors don't shorten their card. */
  min-height: 2.4em;
  line-height: 1.4;
}
.portfolio-card h3 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--text);
  margin-bottom: 0.5rem;
  line-height: 1.15;
  transition: color 250ms ease;
}
.portfolio-card:hover h3 { color: var(--accent); }
.portfolio-card__meta {
  font-size: 0.9rem;
  color: var(--lochmara-200);
  margin-bottom: 0;
}
/* Hover cue — "Profil ansehen →" slides in from the left when the
   card is hovered. Lives in its own slot below the meta line so it
   doesn't push existing content around. */
.portfolio-card__cue {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;       /* push cue to the bottom of the body */
  padding-top: 1.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 280ms ease, transform 320ms var(--ease-out);
}
.portfolio-card__cue::after {
  content: '→';
  font-size: 1rem;
  transition: transform 320ms var(--ease-out);
}
.portfolio-card:hover .portfolio-card__cue,
.portfolio-card:focus-visible .portfolio-card__cue {
  opacity: 1;
  transform: translateX(0);
}
.portfolio-card:hover .portfolio-card__cue::after {
  transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-card__cue { opacity: 1; transform: none; }
}

/* ----- News list / cards ----- */
.news-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--gap);
}
.news-card {
  position: relative;
  display: block;
  padding: 1.75rem;
  color: inherit;
  transition: border-color 350ms ease, transform 350ms var(--ease-out), box-shadow 350ms ease;
}
.news-card:hover,
.news-card:focus-within {
  border-color: rgba(var(--accent-rgb), 0.4);
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(var(--bg-rgb), 0.5);
  color: inherit;
}
/* Whole-card click target: pseudo-element on the title's <a> stretches
   over the full card. Other interactive elements (none here) would
   need z-index: 1 to stay clickable above it. */
.news-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.news-card__link { color: inherit; text-decoration: none; }
.news-card:hover .news-card__link,
.news-card:focus-within .news-card__link { color: var(--accent); }
.news-card__date {
  color: var(--accent);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.news-card__type {
  display: inline-block;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: var(--radius-pill);
  padding: 2px 12px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-block: 0.75rem 1rem;
}
.news-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--text);
}
.news-card h3 a { color: inherit; }
.news-card p { color: var(--chambray-100); font-size: 0.9rem; }
.news-card[hidden] { display: none !important; }

/* News-filter UI */
.news-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 2rem;
}
.news-filter__search-wrap {
  position: relative;
  flex: 1 1 240px;
  display: flex;
}
.news-filter__search {
  flex: 1;
  padding: 0.7rem 2.5rem 0.7rem 1rem;  /* room for clear button on the right */
  background: var(--white);
  border: 1px solid var(--chambray-800);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
}
.news-filter__search::placeholder { color: var(--muted); }
.news-filter__search:focus { border-color: var(--accent); outline: none; }
/* Suppress WebKit's native (and ugly on dark) clear button — we render
   our own. */
.news-filter__search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.news-filter__clear {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.news-filter__clear:hover,
.news-filter__clear:focus-visible {
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--text);
  outline: none;
}
.news-filter__chip {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.4rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  transition: all var(--transition);
}
.news-filter__chip:hover { color: var(--accent); border-color: var(--border-strong); }
.news-filter__chip[aria-pressed="true"] {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

/* ----- Team cards — uniform editorial grid -----
   Identical card composition for every team member, regardless of seniority.
   Hierarchy lives in the section heading, not in card size. Square 1:1
   portraits keep faces uncropped and feel modern (LinkedIn-style avatars
   read as flat hierarchy — appropriate for an institutional PE team).

   Responsive grid:
     ≥1100px → 4 columns
     ≥760px  → 3 columns
     ≥440px  → 2 columns
     <440px  → 1 column
   Last incomplete row is centered via `.team-grid` flex justification. */
.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 1.5rem;
  margin: 0 auto;
}
.team-card { flex: 0 0 calc((100% - 4.5rem) / 4); }
@media (max-width: 1099px) { .team-card { flex-basis: calc((100% - 3rem) / 3); } }
@media (max-width: 759px) {
  .team-grid { gap: 1.5rem 1rem; }
  .team-card { flex-basis: calc((100% - 1rem) / 2); }
}
@media (max-width: 439px) {
  .team-grid { max-width: 320px; }
  .team-card { flex-basis: 100%; }
}

.team-card {
  text-align: center;
  cursor: pointer;
  padding: 0;
  color: inherit;
  font: inherit;
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: transform 320ms var(--ease-out, ease-out);
}
.team-card:hover { transform: translateY(-3px); }
.team-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: 4px;
}

/* Photo: 1:1 square, identical for every card */
.team-card picture,
.team-card__avatar {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--chambray-800), var(--chambray-900));
  border: 1px solid var(--border);
  transition: border-color 280ms ease, box-shadow 280ms ease;
}
.team-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
  border-radius: 0;
  margin: 0;
  transition: transform 600ms var(--ease-out, ease-out);
}
.team-card:hover picture,
.team-card:hover .team-card__avatar {
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 12px 32px rgba(var(--accent-rgb), 0.12);
}
.team-card:hover img { transform: scale(1.04); }

/* Avatar fallback (initials) when no photo file exists */
.team-card__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-family: var(--font-serif);
  font-size: 3rem;
  letter-spacing: -0.02em;
}

/* Typography: name in serif (display), role as mono kicker */
.team-card__name {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--chambray-800);
  font-size: 1.05rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.team-card__role {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: -0.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .team-card,
  .team-card img,
  .team-card picture,
  .team-card__avatar { transition: none; }
  .team-card:hover { transform: none; }
  .team-card:hover img { transform: none; }
}

/* ----- Modal (single, JS-populated) ----- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(var(--bg-rgb), 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 300ms ease;
}
.modal-backdrop.is-open { opacity: 1; visibility: visible; }
.modal-card {
  /* background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); */
  border: 1px solid var(--border);
  border-radius: 18px;
  max-width: 620px;
  width: 100%;
  outline: none; /* tabindex=-1 receives initial focus; no visible ring */
  /* Some browsers (Firefox, Safari with caret browsing) show a blinking
     text caret on the first text node when a tabindex=-1 element gets
     focus. That ends up inside the × of the close button. Hide it here;
     children with their own caret-color (inputs, etc.) are unaffected. */
  caret-color: transparent;
  /* dvh tracks the dynamic viewport on iOS as the URL bar slides in/out;
     vh would freeze at the initial height and let content go offscreen. */
  max-height: 88dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  position: relative;
  transform: scale(0.94) translateY(20px);
  opacity: 0;
  transition: transform 350ms var(--ease-out), opacity 250ms ease;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--accent-rgb), 0.08);
  color: var(--text);
  /* Subtle custom scrollbar (Firefox + WebKit) */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.modal-card::-webkit-scrollbar { width: 6px; }
.modal-card::-webkit-scrollbar-track { background: transparent; }
.modal-card::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 3px;
}
.modal-card::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); }
.modal-backdrop.is-open .modal-card {
  transform: scale(1) translateY(0);
  opacity: 1;
}
/* Sticky anchor at the top of the scrolling modal-card. Zero height
   so it doesn't push the portrait down; the close button is absolutely
   positioned inside it. Pointer-events flip-flop so only the button
   itself catches clicks (the anchor is a layout ghost). */
.modal-close-anchor {
  position: sticky;
  top: 0;
  height: 0;
  z-index: 5;
  pointer-events: none;
}

/* Close button sits over the portrait photo (light studio background),
   so we need contrast that holds on any image. Dark scrim pill with
   backdrop-blur is the iOS pattern for close-over-media. */
.modal-close {
  position: absolute;
  top: 1rem; right: 1rem;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms var(--ease-out);
  z-index: 2;
  font-size: 1.2rem;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.modal-close:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.06);
}
.modal-close:active { transform: scale(0.96); }
/* Scroll-over-image pattern:
   The portrait is sticky at the top with a fixed visible height. The
   body card has higher z-index, a solid background, a top corner-
   radius and a subtle shadow at its top edge, so it slides up and
   over the photo as the user scrolls — like a card lifting onto the
   portrait. Generous text room from the start. */
.modal-portrait {
  width: 100%;
  /* Photo dominates the initial view (Apple Music / iOS profile-sheet
     pattern). User sees the face fully on open, then scrolls to read.
     clamp keeps it readable on short laptops AND big monitors. */
  height: clamp(360px, 65dvh, 520px);
  overflow: hidden;
  border-radius: 18px 18px 0 0;
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 0;
}
.modal-portrait picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.modal-portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
@media (max-width: 700px) {
  .modal-portrait { height: clamp(280px, 55dvh, 400px); }
}
.modal-portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(10, 29, 59, 0.55) 100%);
  pointer-events: none;
}
.modal-body {
  position: relative;
  z-index: 1;
  background: var(--bg);
  border-radius: 18px 18px 0 0;
  /* No initial overlap — the photo is meant to be fully visible when
     the modal opens. Top-corner radius + box-shadow give the body a
     "card" feel that lifts over the photo as the user scrolls. */
  margin-top: 0;
  padding: 2.5rem 2.25rem 2.5rem;
  box-shadow: 0 -16px 32px -8px rgba(var(--bg-rgb), 0.55);
  /* Enough body to scroll fully over the photo (so the photo gets
     completely covered when the user reaches the bottom). dvh keeps
     the proportion accurate while the iOS URL bar slides in/out. */
  min-height: 70dvh;
}
.modal-body .modal-role {
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 1.5rem;
}
.modal-body .modal-bio {
  color: var(--text-soft);
  font-size: 0.95rem;
  line-height: 1.75;
  margin-bottom: 1.75rem;
}
@media (max-width: 700px) {
  .modal-body { padding: 2rem 1.5rem 2.25rem; }
}
.modal-body .modal-bio p { margin-bottom: 0.85em; color: var(--chambray-800);}
.modal-body .modal-bio p:last-child { margin-bottom: 0; color: var(--chambray-800);}
/* Name + inline LinkedIn icon. Brand glyph (the "in" mark) sits next
   to the name as a small accent-coloured affordance — discoverable
   but quiet, not a primary CTA. 36×36 hit area for touch comfort,
   icon is 22px. */
.modal-name-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.modal-name-row h2 {
  margin: 0;
  font-size: 1.7rem;
  color: var(--chambray-800);
  letter-spacing: -0.01em;
}
.modal-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--accent);
  transition: color 200ms ease, background 200ms ease, transform 200ms ease;
}
.modal-linkedin:hover,
.modal-linkedin:focus-visible {
  color: #fff;
  background: rgba(var(--accent-rgb), 0.15);
  transform: translateY(-1px);
}
.modal-linkedin svg { width: 22px; height: 22px; flex-shrink: 0; }
@media (max-width: 700px) {
  .modal-name-row h2 { font-size: 1.45rem; }
}

/* ----- News detail header — left-aligned title block, mirrors
   .portco-header (institutional document rhythm). */
.news-header {
  padding: calc(7rem + var(--banner-h)) 0 0;
  background:
    radial-gradient(ellipse 70% 60% at 18% 25%, rgba(var(--accent-rgb), 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 82% 20%, rgba(var(--navy-rgb), 0.20) 0%, transparent 60%);
}
.news-header__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2.5rem 2rem 2.5rem;
  border-bottom: 1px solid var(--border);
}
.news-header h1 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin: 0.75rem 0 0.75rem;
  color: var(--chambray-800);
  text-align: left;
  text-wrap: balance;
}
.news-header__lead {
  margin: 0;
  color: var(--chambray-800);
  font-size: 1.05rem;
  line-height: 1.55;
}

@media (max-width: 700px) {
  .news-header { padding-top: 6rem; }
  .news-header__inner { padding: 1.75rem 1.25rem; }
}

/* News article 2-col layout: left sidebar with article meta + portco
   logos, right column with the body copy (existing .article-body). */
.news-layout {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 5rem;
  align-items: start;
}
@media (max-width: 860px) {
  .news-layout { grid-template-columns: 1fr; gap: 2rem; padding: 0 1.25rem; }
}

.news-aside {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.news-aside__logos {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}
/* News logos appear in many shapes (full lockups, multi-color marks,
   tagline-bearing). The white-filter trick used in the portfolio
   factbook destroys colored elements (anykey-blue, xantaro-red).
   Render every news logo on a small white tile, preserving brand
   colors. The tile shrinks to fit each logo's natural width. */
.news-aside__logo {
  display: inline-flex;
  align-items: center;
  max-width: 200px;
}
.news-aside__logo img {
  height: 36px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

.news-meta {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-top: 1px solid var(--chambray-100);
  border-bottom: 1px solid var(--chambray-100);
  padding: 1.25rem 0;
}
.news-meta__row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.news-meta dt {
  color: var(--accent);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.news-meta dd {
  color: var(--chambray-600);
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.4;
}

/* Override .article-body container to flow inside the right column
   of .news-layout (no longer centered max-w-720 on its own). */
.news-layout .article-body {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Inline links inside the article body — soft-blue underline that
   firms up on hover, consistent with the lookup-card cue. */
.news-layout .article-body a {
  color: var(--accent);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.45);
  transition: color 200ms ease, border-color 200ms ease;
}
.news-layout .article-body a:hover,
.news-layout .article-body a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
  outline: none;
}

/* Standard "About KKA" footer block. Single source of truth — every
   news article ends with the same boilerplate, rendered from the
   template, never repeated in body content. */
.news-boilerplate {
  max-width: 1080px;
  margin: 4rem auto 0;
  padding: 0 2rem;
}
.news-boilerplate__inner {
  max-width: 1080px;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border);
}
.news-boilerplate h3 {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--accent);
  margin: 0 0 0.5rem;
  letter-spacing: 0.01em;
}
/* Second+ About section ("Über KKA Partners" after the PortCo block) needs
   breathing room from the preceding paragraph; first heading is unaffected. */
.news-boilerplate p + h3 {
  margin-top: 1.75rem;
}
.news-boilerplate p {
  margin: 0;
  color: var(--chambray-800);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* ----- Article (legacy team-detail / centered articles) ----- */
.article-header {
  padding: calc(7rem + var(--banner-h)) 2rem 3rem;
  text-align: center;
  position: relative;
}
.article-header__date {
  color: var(--accent);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.article-header h1 {
  max-width: 900px;
  margin: 0 auto 1.5rem;
}
.article-header__lead {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text-soft);
  font-size: 1.125rem;
}
.article-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 2rem 6rem;
}
.article-body p { color: var(--chambray-800); margin-bottom: 1.25em; }
.article-body h2 { font-size: 1.6rem; margin-block: 2rem 1rem; }
.article-body h3 { font-size: 1.2rem; margin-block: 1.5rem 0.75rem; color: var(--chambray-800); }
.article-body ul, .article-body ol { margin: 0 0 1.25em 1.5em; color: var(--chambray-800); }
.article-body li { margin-bottom: 0.5em; }
.article-body a { border-bottom: 1px solid rgba(var(--accent-rgb), 0.4); }
.article-body a:hover { border-bottom-color: var(--accent); }
.article-body figure {
  margin: 2rem 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(var(--navy-rgb), 0.18);
}
.article-body figure img { display: block; width: 100%; height: auto; }
.article-body figcaption {
  padding: 0.65rem 1rem 0.85rem;
  font-size: 0.82rem;
  color: var(--chambray-600);
  border-top: 1px solid var(--border);
}

/* ----- Portfolio detail header — left-aligned title block with
   breadcrumb. Replaces the centered hero on detail pages: less
   "magazine cover", more institutional/document. */
.portco-header {
  padding: calc(7rem + var(--banner-h)) 0 0;
  background:
    radial-gradient(ellipse 70% 60% at 18% 25%, rgba(var(--accent-rgb), 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 82% 20%, rgba(var(--navy-rgb), 0.20) 0%, transparent 60%);
}
.portco-header__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2.5rem 2rem 2.5rem;
  border-bottom: 1px solid var(--border);
}
.portco-header h1 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  margin: 0.75rem 0 0.5rem;
  text-align: left;
}
.portco-header__sub {
  margin: 0;
  color: var(--accent);
  font-size: 1.05rem;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.breadcrumb a {
  color: var(--muted);
  border-bottom: 1px solid transparent;
  transition: color 200ms ease, border-color 200ms ease;
}
.breadcrumb a:hover { color: var(--accent); border-bottom-color: rgba(var(--accent-rgb), 0.4); }
.breadcrumb [aria-current="page"] { color: var(--accent); }
.breadcrumb span[aria-hidden] { color: var(--chambray-300); }

/* Uniform vertical rhythm for every section after the page header,
   regardless of whether the header is a centered .hero, a left-aligned
   .portco-header, or a .news-header. Single source of truth for
   multi-section pages (TEV / ESG / About / Investment Focus). */
main > .portco-header ~ section:not(.cta-section),
main > .news-header   ~ section:not(.cta-section),
main > .hero          ~ section:not(.cta-section) { padding-block: 4rem 0; }
main > .portco-header + section:not(.cta-section),
main > .news-header   + section:not(.cta-section),
main > .hero          + section:not(.cta-section) { padding-block: 3rem 0; }
main > .portco-header ~ section:not(.cta-section):last-of-type,
main > .news-header   ~ section:not(.cta-section):last-of-type,
main > .hero          ~ section:not(.cta-section):last-of-type { padding-bottom: 5rem; }
@media (max-width: 700px) {
  .portco-header { padding-top: calc(6rem + var(--banner-h)); }
  .portco-header__inner { padding: 1.75rem 1.25rem; }
  main > .portco-header ~ section:not(.cta-section),
  main > .news-header   ~ section:not(.cta-section),
  main > .hero          ~ section:not(.cta-section) { padding-block: 2.5rem 0; }
  main > .portco-header + section:not(.cta-section),
  main > .news-header   + section:not(.cta-section),
  main > .hero          + section:not(.cta-section) { padding-block: 2rem 0; }
  main > .portco-header ~ section:not(.cta-section):last-of-type,
  main > .news-header   ~ section:not(.cta-section):last-of-type,
  main > .hero          ~ section:not(.cta-section):last-of-type { padding-bottom: 4rem; }
}

.portco-detail {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Factbook block — text-only top surface. Narrow data rail (logo +
   facts + CTA) on the left, wide narrative body on the right. Both
   columns top-aligned and balanced; photos live separately in the
   gallery below as visual evidence. */
.portco-factbook {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 5rem;
  align-items: start;
  margin-bottom: 4rem;
}
@media (max-width: 860px) {
  .portco-factbook { grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 3rem; }
}

.portco-factbook__side {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* Logo: present brand mark, sized to feel anchored without
   becoming a billboard. */
.portco-factbook__logo {
  height: 48px;
  display: flex;
  align-items: center;
}
.portco-factbook__logo img {
  height: 100%;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  /*filter: brightness(0) invert(1);
  opacity: 1;*/
}
/* White logo on the light factbook → dark plate so it reads. */
.portco-factbook__logo img[src$="/evago.png"] {
  background: var(--chambray-800);
  padding: 6px 10px;
  border-radius: 4px;
}
/* Stacked lockup: a platform logo with a sub-brand beneath it (e.g. SSF + Cho-Time).
   Base .portco-factbook__logo is a 48px flex row; this switches to a left-aligned
   column and re-establishes an explicit img height (height:100% collapses here). */
.portco-factbook__logo--stack {
  height: auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
}
.portco-factbook__logo--stack img { height: 40px; }

.portco-factbook__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
/* Lead: clean sans-serif, slightly larger than body, weight 500.
   No competing typeface with the serif H1 above. */
.portco-factbook__lead {
  font-size: 1.15rem;
  line-height: 1.55;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 0.5rem;
  text-wrap: balance;
}
.portco-factbook__body p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--chambray-800);
  margin: 0;
}

/* Facts list — labels stacked above values. Stacking removes the
   wrapping problem with long German labels (KKA-INVESTMENT) and
   matches institutional report style (Pitchbook, BCG Datasheet). */
.portco-facts {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-top: 1px solid var(--chambray-100);
  border-bottom: 1px solid var(--chambray-100);
  padding: 1.25rem 0;
}
.portco-facts__row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.portco-facts dt {
  color: var(--accent);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.portco-facts dd {
  color: var(--chambray-600);
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.4;
}
.portco-factbook__side .portco-cta {
  align-self: flex-start;
}

/* Portco gallery — listing photo + extras shown as a 3-up thumbnail
   grid below the factbook. Each thumb opens the shared #lightbox. */
.portco-gallery {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 700px) {
  .portco-gallery { grid-template-columns: repeat(2, 1fr); }
}
.portco-gallery__item {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  cursor: zoom-in;
  padding: 0;
  transition: border-color 280ms ease, transform 280ms var(--ease-out);
}
.portco-gallery__item:hover,
.portco-gallery__item:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.4);
  transform: translateY(-3px);
  outline: none;
}
.portco-gallery__item picture,
.portco-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.portco-gallery__item:hover img { transform: scale(1.04); }

/* Lightbox overlay — full-viewport, dim backdrop, image centered.
   The image animates from a small scale (0.94) to full size on open
   so the click feels like a physical zoom into the thumbnail. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(var(--bg-rgb), 0.92);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms ease, visibility 0s linear 250ms;
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 250ms ease, visibility 0s;
}
.lightbox__img {
  max-width: min(100%, 1400px);
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  transform: scale(0.94);
  opacity: 0;
  transition: transform 320ms var(--ease-out), opacity 250ms ease;
}
.lightbox.is-open .lightbox__img {
  transform: scale(1);
  opacity: 1;
}
.lightbox__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(var(--bg-rgb), 0.6);
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
}
.lightbox__close:hover,
.lightbox__close:focus-visible {
  background: rgba(var(--accent-rgb), 0.25);
  border-color: rgba(var(--accent-rgb), 0.5);
  outline: none;
}

.facts-strip {
  display: grid;
  /* auto-fit: column count adapts to how many fact cells the page
     supplies (4-6 depending on optional hq / founded). At desktop
     widths most pages render 4-6 cells in a single row. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem 2rem;
  margin-bottom: 3.5rem;
  padding: 1.75rem 2rem;
}
@media (max-width: 480px) {
  .facts-strip { grid-template-columns: 1fr; padding: 1.5rem; }
}
.facts-strip > div { min-width: 0; }
.facts-strip dt {
  color: var(--muted);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.facts-strip dd {
  color: var(--text);
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.4;
}
.facts-strip dd a {
  color: var(--accent);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.4);
  transition: border-color 200ms ease;
}
.facts-strip dd a:hover { border-bottom-color: var(--accent); }
.facts-strip__cta {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
  text-align: right;
}
@media (max-width: 720px) {
  .facts-strip__cta { text-align: left; }
}

.portco-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  background: var(--accent);
  color: var(--bg);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 200ms ease, background 200ms ease;
}
.portco-cta::after { content: '↗'; font-size: 0.95rem; }
.portco-cta:hover { background: var(--accent-hover); transform: translateY(-1px); color: var(--bg); }

.portco-narrative {
  max-width: 720px;
  margin: 0 auto;
}
.portco-narrative h2 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--text);
  margin: 0 0 0.85rem;
  line-height: 1.2;
}
.portco-narrative h2 + p { margin-top: 0; }
.portco-narrative h2:not(:first-child) { margin-top: 2.5rem; }
.portco-narrative p {
  color: var(--text-soft);
  line-height: 1.75;
  margin: 0 0 1.1rem;
  font-size: 1.02rem;
}
.portco-narrative ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.1rem;
}
.portco-narrative ul li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.6rem;
  color: var(--text-soft);
  line-height: 1.65;
}
.portco-narrative ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.portco-detail__back {
  max-width: 920px;
  margin: 4rem auto 0;
  padding: 0 2rem;
  font-size: 0.85rem;
}
.portco-detail__back a {
  color: var(--muted);
  letter-spacing: 0.04em;
  transition: color 200ms ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.portco-detail__back a:hover { color: var(--accent); }

/* Legacy .facts class — keep CSS thin so any remaining detail page
   that hasn't been rebuilt still renders, but new pages use
   .portco-facts. */
.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.75rem 2rem;
  padding: 1.5rem 2rem;
  margin: 2rem auto 3rem;
  max-width: 720px;
  font-size: 0.95rem;
}
.facts dt { color: var(--muted); }
.facts dd { color: var(--text); }

/* ----- Footer ----- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 4rem 2rem 2rem;
  margin-top: 0;
  background: var(--chambray-800);
  color: var(--muted);
}
.site-footer__cols {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}
.site-footer h4 {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text);
  margin-bottom: 1rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.site-footer a { color: var(--lochmara-200); font-size: 0.85rem; transition: color var(--transition); }
.site-footer a:hover { color: var(--chambray-50); }
.site-footer__brand img { height: 32px; width: auto; }
.site-footer__brand p { font-size: 0.85rem; margin-top: 1rem; color: var(--lochmara-200); }
/* Brand column meta: LinkedIn glyph stacked above copyright. Bare
   icon (no circle), color-only hover. */
.site-footer__brand-meta {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}
.site-footer__brand-meta .site-footer__copy {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--lochmara-200);
  opacity: 1.0;
}
.site-footer .social-link {
  display: inline-flex;
  color: var(--lochmara-200);
  transition: color 200ms ease, transform 200ms var(--ease-out);
}
.site-footer .social-link:hover,
.site-footer .social-link:focus-visible {
  color: var(--chambray-50);
  transform: translateY(-1px);
  outline: none;
}

/* ----- Spec tiles (Investment Focus parameters) -----
   Big serif numbers + mono kicker. Goldman-Sachs-research-style stat
   tiles. Anchors institutional credibility on the hard parameters. */
.specs {
  list-style: none;
  padding: 0;
  margin: 3rem auto 1rem;
  max-width: 980px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.spec {
  text-align: center;
  padding: 1.25rem 1rem;
  position: relative;
}
/* Hairline draws in left-to-right when the tile enters view. Sits where
   border-top would, but is animatable via scaleX(). */
.spec::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(var(--accent-rgb), 0.5);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 200ms;
}
.spec.is-visible::before { transform: scaleX(1); }
/* More pronounced fade-up specifically for specs — bigger lift, slight
   scale-from-below, longer duration. The grid stagger comes from the
   parent [data-reveal-stagger] (80ms per tile via animations.js). */
.spec[data-reveal] {
  transform: translateY(32px) scale(0.97);
  transition: opacity 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.spec[data-reveal].is-visible {
  transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .spec::before { transform: scaleX(1) !important; transition: none !important; }
}
.spec__kicker {
  margin: 0 0 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.spec__value {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--text);
}
.spec__unit {
  font-size: 0.55em;
  vertical-align: baseline;
  margin-left: 0.05em;
  color: var(--muted);
  font-style: italic;
  font-weight: 400;
}
.specs__profile {
  text-align: center;
  margin: 1.5rem auto 0;
  max-width: 720px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--muted);
  letter-spacing: 0.005em;
}
@media (max-width: 880px) {
  .specs { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
@media (max-width: 480px) {
  .specs { grid-template-columns: 1fr; gap: 1rem; }
  .spec__value { font-size: 2.1rem; }
}

/* ----- FAQ block (TEV, Investment-Focus) -----
   Native <details>/<summary> for accessibility + zero JS. */
.faq {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2rem;
  max-width: 820px;
}
.faq__item {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.04);
  transition: border-color 200ms ease, background 200ms ease;
}
.faq__item[open] {
  border-color: rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.08);
}
.faq__q {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 1.4rem;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--text);
  position: relative;
  padding-right: 3rem;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: '+';
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 1.3rem;
  font-weight: 300;
  transition: transform 250ms var(--ease-out);
}
.faq__item[open] .faq__q::after {
  transform: translateY(-50%) rotate(45deg);
}
.faq__q:hover { color: var(--accent); }
.faq__a {
  margin: 0;
  padding: 0 1.4rem 1.2rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.65;
}
.site-footer .social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  color: var(--muted);
  transition: color 200ms ease, border-color 200ms ease, transform 200ms var(--ease-out), background 200ms ease;
}
.site-footer .social-icon:hover,
.site-footer .social-icon:focus-visible {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
  outline: none;
}

/* ----- Newsletter form ----- */
.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.newsletter-form__row {
  display: flex;
  gap: 0.5rem;
}
.newsletter-form input[type="email"] {
  flex: 1;
  padding: 0.6rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  min-width: 0;
}
.newsletter-form input[type="email"]::placeholder { color: var(--muted); }
.newsletter-form input[type="email"]:focus { border-color: var(--accent); outline: none; }
.newsletter-form button {
  padding: 0.6rem 1.25rem;
  background: var(--accent);
  color: var(--bg);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--transition);
}
.newsletter-form button:hover { background: var(--accent-hover); }
.newsletter-form__hint { font-size: 0.75rem; color: var(--lochmara-200); line-height: 1.5; }

/* ----- Reveal on scroll ----- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms ease, transform 700ms ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
p.is-visible { color: var(--chambray-800); }
p.is-visible a { color: var(--accent); }
p.is-visible > a.cta-btn { color: var(--white); }
p.section-tag { color: var(--accent); }


/* Animation fallback (Motion-less or reduced motion) */
[data-hero] [data-hero-item] { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-hero] [data-hero-item] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ----- Utility ----- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.text-center { text-align: center; }

/* ----- 404 — three "wayfinding" cards for the most-likely landings ----- */
.lookup-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
@media (max-width: 900px) { .lookup-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }
.lookup-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  color: inherit;
  text-decoration: none;
  transition: border-color 350ms ease, transform 350ms var(--ease-out), box-shadow 350ms ease;
}
.lookup-card:hover,
.lookup-card:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.4);
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(var(--bg-rgb), 0.5);
  color: inherit;
  outline: none;
}
.lookup-card__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}
.lookup-card h3 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--text);
  margin-bottom: 0;
  line-height: 1.2;
  transition: color 250ms ease;
}
.lookup-card:hover h3 { color: var(--accent); }
.lookup-card__cue {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 1.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.7;
  transition: opacity 280ms ease, transform 320ms var(--ease-out);
}
.lookup-card__cue::after {
  content: '→';
  font-size: 1rem;
  transition: transform 320ms var(--ease-out);
}
.lookup-card:hover .lookup-card__cue { opacity: 1; }
.lookup-card:hover .lookup-card__cue::after { transform: translateX(4px); }

/* Pad below fixed header on inner pages */
main { padding-top: 0; }
main > section:first-child:not(.hero):not(.article-header) { padding-top: calc(8rem + var(--banner-h)); }

/* Articles after a hero (legacy team-detail layout). The full
   uniform-rhythm rule lives near the .portco-header section above. */
main > .hero--inner + article { padding-block: 2rem 6rem; }
@media (max-width: 700px) {
  main > .hero--inner + article { padding-block: 1.5rem 4rem; }
}

/* =====================================================================
   About / TEV / ESG / Investment-Focus — diagram & feature modules.
   Anchor classes for the editorial framework slides on the redesigned
   institutional pages. Designed to read like Pitchbook / Roland Berger
   spreads: framework first, narrative second, no decorative noise.
   ===================================================================== */

/* ----- TEV: 3-Pillar framework ----- */
.tev-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media (max-width: 860px) {
  .tev-pillars { grid-template-columns: 1fr; gap: 1rem; }
}
.tev-pillar {
  position: relative;
  border-left: 3px solid rgba(var(--accent-rgb), 0.35);
  padding: 2rem 1.75rem 1.75rem;
  transition: transform 380ms var(--ease-out),
              border-color 380ms ease,
              box-shadow 380ms ease;
}
.tev-pillar::before {
  content: '';
  position: absolute;
  left: -3px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent) 0%, transparent 75%);
  opacity: 0;
  transition: opacity 380ms ease;
}
.tev-pillar:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow: 0 18px 40px rgba(var(--bg-rgb), 0.45);
}
.tev-pillar:hover::before { opacity: 1; }
.tev-pillar__num {  font-size: 0.78rem;
  letter-spacing: 0.22em;
  opacity: 0.7;
  margin: 0 0 1.25rem;
}
.tev-pillar h3 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  margin: 0 0 0.85rem;
  line-height: 1.2;
  color: var(--text);
}
.tev-pillar p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-soft);
}

/* ----- TEV: Lifecycle stepper ----- */
.tev-lifecycle { margin-top: 2.5rem; }
.tev-lifecycle__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  position: relative;
  counter-reset: tev-step;
}
.tev-lifecycle__steps::before {
  content: '';
  position: absolute;
  top: 14px;
  left: calc(100% / 12);
  right: calc(100% / 12);
  height: 1px;
  background: linear-gradient(90deg,
    rgba(var(--accent-rgb), 0.15) 0%,
    rgba(var(--accent-rgb), 0.55) 50%,
    rgba(var(--accent-rgb), 0.15) 100%);
  z-index: 0;
}
.tev-lifecycle__steps li {
  position: relative;
  text-align: center;
  counter-increment: tev-step;
  padding: 0 0.5rem;
}
.tev-lifecycle__steps li::before {
  content: counter(tev-step, decimal-leading-zero);
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid rgba(var(--accent-rgb), 0.55);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  line-height: 26px;
  margin: 0 auto 0.85rem;
  position: relative;
  z-index: 1;
  transition: background 280ms ease, border-color 280ms ease;
}
.tev-lifecycle__steps li:hover::before {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: var(--accent);
}
.tev-lifecycle__steps li span {
  display: block;
  font-size: 0.85rem;
  color: var(--text-soft);
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.tev-lifecycle__caption {
  margin: 2rem auto 0;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 720px;
  font-style: italic;
}
@media (max-width: 720px) {
  .tev-lifecycle__steps {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .tev-lifecycle__steps::before { display: none; }
  .tev-lifecycle__steps li {
    text-align: left;
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 0.85rem;
    align-items: center;
    padding: 0;
  }
  .tev-lifecycle__steps li::before { margin: 0; }
  .tev-lifecycle__caption { text-align: left; }
}

/* ----- ESG: 4-step lifecycle (cards + chevron flow) ----- */
.esg-lifecycle ol {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.65rem;
  counter-reset: esg-step;
}
.esg-lifecycle li {
  position: relative;
  padding: 1.5rem 1.35rem 1.35rem;
  counter-increment: esg-step;
  transition: border-color 280ms ease, transform 280ms var(--ease-out);
}
.esg-lifecycle li:hover {
  border-color: rgba(var(--accent-rgb), 0.4);
  transform: translateY(-3px);
}
.esg-lifecycle li::before {
  content: counter(esg-step, decimal-leading-zero);
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font-size: 0.7rem;
  opacity: 0.55;
  letter-spacing: 0.18em;
}
.esg-lifecycle li::after {
  content: '›';
  position: absolute;
  top: 50%;
  right: -0.65rem;
  transform: translateY(-50%);
  font-size: 1.6rem;
  color: var(--accent);
  opacity: 0.4;
  z-index: 2;
  pointer-events: none;
}
.esg-lifecycle li:last-child::after { display: none; }
.esg-lifecycle li h3 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  margin: 0 0 0.6rem;
  line-height: 1.25;
  color: var(--text);
}
.esg-lifecycle li p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-soft);
}
@media (max-width: 960px) {
  .esg-lifecycle ol { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
  .esg-lifecycle li::after { display: none; }
}
@media (max-width: 560px) {
  .esg-lifecycle ol { grid-template-columns: 1fr; }
}

/* ----- Brand coda — closing wordmark line on sub-pages.
   Anchored to "Futureproofing Mittelstand" homepage hero. Reads as
   the brand's tagline echo at the end of a sub-page that explains
   the mechanic behind the wordmark (TEV → Futureproofing). */
.brand-coda {
  max-width: 720px;
  margin: 4rem auto 0;
  padding: 2.5rem 2rem;
  text-align: center;
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.4;
  color: var(--text-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-wrap: balance;
}
.brand-coda em {
  font-style: italic;
  color: var(--text);
}
@media (max-width: 700px) {
  .brand-coda { padding: 2rem 1.25rem; margin-top: 2.5rem; }
}

/* ----- ESG: Closing stance quote ----- */
.esg-quote {
  max-width: 820px;
  margin: 4rem auto 0;
  padding: 3rem 2rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
  position: relative;
}
.esg-quote::before {
  content: '“';
  position: absolute;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-serif);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.25;
}
.esg-quote blockquote {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--text);
  margin: 1.5rem 0 0;
  text-wrap: balance;
}
.esg-quote blockquote p { margin: 0 0 0.5rem; }
.esg-quote footer,
.esg-quote cite {
  display: block;
  margin-top: 1.5rem;
  font-style: normal;
  font-family: var(--font-sans);
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
@media (max-width: 700px) {
  .esg-quote { padding: 2rem 1.25rem; margin-top: 2.5rem; }
  .esg-quote blockquote { font-size: 1.2rem; }
}

/* ----- Investment Focus: Criteria web -----
   Hexagonal radar visualisation of the firm's six investment criteria.
   SVG renders the geometric web (concentric hexagons + spokes + vertex
   dots + KKA hub); HTML nodes carry icon + kicker + value, positioned
   absolutely at the six vertex anchors. Below 720px the SVG hides
   and the nodes collapse into a vertical institutional list. */
.criteria-web {
  position: relative;
  width: 100%;
  max-width: 880px;
  margin: 3rem auto 0;
  aspect-ratio: 800 / 600;
}
.criteria-web__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.cw-hex { fill: none; stroke-linejoin: round; }
.cw-hex--outer { stroke: rgba(var(--accent-rgb), 0.22); stroke-width: 1; }
.cw-hex--inner { stroke: rgba(var(--accent-rgb), 0.13); stroke-width: 1; }
.cw-spoke { stroke: rgba(var(--accent-rgb), 0.18); stroke-width: 1; }
.cw-hub {
  fill: rgba(var(--accent-rgb), 0.10);
  stroke: rgba(var(--accent-rgb), 0.45);
  stroke-width: 1;
}
/* Hub logo: KKA wordmark sits inside the central hub circle.
   opacity tuned so it reads clearly without competing with the
   surrounding spokes and node cards. */
.cw-hub-logo { opacity: 0.95; }
.cw-dot {
  fill: var(--bg);
  stroke: rgba(var(--accent-rgb), 0.7);
  stroke-width: 2;
}

.criteria-web__nodes {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cw-node {
  position: absolute;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
  transition: border-color 320ms ease, transform 320ms var(--ease-out);
}
.cw-node:hover { border-color: rgba(var(--accent-rgb), 0.4); transform: translateY(-2px); }
.cw-node__icon {
  width: 22px;
  height: 22px;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 0.1rem;
}
.cw-node__icon svg { width: 22px; height: 22px; stroke-width: 1.5; }
.cw-node__kicker {
  margin: 0;
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.cw-node__value {
  margin: 0;
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 0.98rem;
  line-height: 1.3;
}

/* Position each node at its vertex. Coordinates derived from the
   viewBox (800×600) — vertex / container = percentage. */
.cw-node--n  { top: 0;            left: 50%;  transform: translate(-50%, 0); text-align: center; align-items: center; }
.cw-node--ne { top: 18.3%;        right: 0;   text-align: right; align-items: flex-end; }
.cw-node--se { bottom: 18.3%;     right: 0;   text-align: right; align-items: flex-end; }
.cw-node--s  { bottom: 0;         left: 50%;  transform: translate(-50%, 0); text-align: center; align-items: center; }
.cw-node--sw { bottom: 18.3%;     left: 0;    text-align: left; }
.cw-node--nw { top: 18.3%;        left: 0;    text-align: left; }

/* Hover lift consistency: the centred top/bottom nodes need to
   preserve the horizontal-centering translate while lifting on Y. */
.cw-node--n:hover  { transform: translate(-50%, -2px); }
.cw-node--s:hover  { transform: translate(-50%, -2px); }

@media (max-width: 720px) {
  .criteria-web {
    aspect-ratio: auto;
    max-width: 540px;
  }
  .criteria-web__svg { display: none; }
  .criteria-web__nodes {
    position: static;
    display: grid;
    gap: 0.85rem;
  }
  .cw-node,
  .cw-node--n, .cw-node--ne, .cw-node--se,
  .cw-node--s, .cw-node--sw, .cw-node--nw {
    position: static;
    width: auto;
    text-align: left;
    align-items: flex-start;
    transform: none;
  }
  .cw-node:hover,
  .cw-node--n:hover, .cw-node--s:hover { transform: translateY(-2px); }
}

/* ----- About hub: Etymology hero variant -----
   Two-font system: serif for the typographic anchor (Greek h1) +
   transliteration; sans-serif for the body subtitle. The section-tag
   kicker reuses its standard mono+accent styling. Three colour roles:
   accent (kicker), text (h1), text-soft (transliteration + sub). */
.hero--inner.hero--etymology h1.hero__greek {
  font-size: clamp(2.6rem, 5.5vw, 4.4rem);
  line-height: 1.1;
  margin: 0 0 0.75rem;
  letter-spacing: 0.01em;
}
.hero__translit {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: var(--chambray-400);
  margin: 0 0 1.5rem;
  letter-spacing: 0.02em;
  /* text-shadow: 0 1px 12px rgba(var(--bg-rgb), 0.6); */
}


/* ----- EIF / InvestEU disclosure block -----
   Mandatory regulatory disclosure for portcos and news items funded
   via the EIF-co-investing Value Fund II. Logo prominent (the EIF
   tag-line "#BelieveInSmall" must remain legible), text in a slightly
   warmer institutional tone — reads as compliance, not marketing. */
.eif-disclosure {
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: 1080px;
  margin: 3rem auto 0;
  padding: 1.5rem 2rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.eif-disclosure img {
  height: 72px;
  width: auto;
  flex-shrink: 0;
}
.eif-disclosure p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
}
@media (max-width: 640px) {
  .eif-disclosure {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
  }
  .eif-disclosure img { height: 56px; }
  .eif-disclosure p { font-size: 0.9rem; }
}

/* ----- ESG: Document download list -----
   Compliance-style row: file-type chip, title + description, download
   cue. Reads as institutional, not as a marketing CTA. */
.esg-docs {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.esg-doc a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  color: inherit;
  text-decoration: none;
  transition: border-color 280ms ease,
              transform 280ms var(--ease-out),
              box-shadow 280ms ease;
}
.esg-doc a:hover,
.esg-doc a:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.4);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(var(--bg-rgb), 0.4);
  color: inherit;
  outline: none;
}
.esg-doc__type {  font-size: 0.7rem;
  letter-spacing: 0.18em;
  background: rgba(var(--accent-rgb), 0.12);
  padding: 0.4rem 0.65rem;
  border-radius: 4px;
}
.esg-doc__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.esg-doc__title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.3;
}
.esg-doc__desc {
  font-size: 0.82rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.esg-doc__cue {
  font-size: 1.25rem;
  color: var(--accent);
  opacity: 0.6;
  transition: transform 280ms var(--ease-out), opacity 280ms ease;
}
.esg-doc a:hover .esg-doc__cue,
.esg-doc a:focus-visible .esg-doc__cue {
  opacity: 1;
  transform: translateY(2px);
}
@media (max-width: 560px) {
  .esg-doc a { grid-template-columns: auto 1fr; padding: 1rem 1.25rem; gap: 0.85rem; }
  .esg-doc__cue { display: none; }
}

/* ----- Investment Focus: Sector clusters (4-up editorial) ----- */
.sector-clusters {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;        /* all rows share the tallest row's height */
  gap: 1.25rem;
  margin-top: 2.5rem;
  align-items: stretch;
}
/* Homepage variant: short, equal-length descriptions per card. Force
   a min-height so all four cards across both rows have identical
   geometry — divider line lands at the same y-coordinate, PortCo
   strip sits at the bottom with consistent gap. */
.sector-clusters--home .sector-cluster { min-height: 19rem; }
@media (max-width: 720px) {
  .sector-clusters { grid-template-columns: 1fr; gap: 0.85rem; }
}
.sector-cluster {
  position: relative;
  padding: 2rem 1.75rem 1.5rem;
  overflow: hidden;
  transition: border-color 380ms ease, transform 380ms var(--ease-out);
  /* Flex column lets the body text grow and pushes the PortCo strip
     (with its top border) to the bottom of the card — so the divider
     line sits at the same y-coordinate across all four cards. */
  display: flex;
  flex-direction: column;
}
.sector-cluster::before {
  /* Subtle accent gradient that seals the top edge — gives each
     cluster a faint identity stripe without imagery. */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(var(--accent-rgb), 0.45) 0%,
    rgba(var(--navy-rgb), 0.25) 50%,
    rgba(var(--accent-rgb), 0.45) 100%);
  opacity: 0.6;
  transition: opacity 380ms ease;
}
.sector-cluster:hover {
  border-color: rgba(var(--accent-rgb), 0.4);
  transform: translateY(-3px);
}
.sector-cluster:hover::before { opacity: 1; }
.sector-cluster h3 {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  margin: 0 0 1rem;
  color: var(--text);
}
/* Sector icon (homepage variant) — small Lucide glyph above the
   serif heading, accent-coloured. Optional element; investment-focus
   page sectors render without it. */
.sector-cluster__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--accent);
  margin: 0 0 1rem;
}
.sector-cluster__icon svg { width: 28px; height: 28px; stroke-width: 1.5; }
.sector-cluster p {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-soft);
}
.sector-cluster__portcos {
  /* margin-top: auto pushes the strip (with its top border) to the
     bottom of the flex card. The fixed 1.25rem padding + bottom card
     padding (1.5rem) keep a consistent gap from the divider to the
     card bottom across all variants. */
  margin: auto 0 0 !important;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-family: var(--font-sans);
}

/* ============================================================
   Contact page (v2): map-as-hero + asymmetric grid + arrival tiles
   Editorial / institutional. Map sets atmosphere, content takes
   stage. Two distinct markers (office vs entry) — solves the
   "everyone walks past Gipsstr. 9" problem with visual emphasis.
   ============================================================ */

/* ----- Hero with map background ----- */
.hero--map {
  position: relative;
  overflow: hidden;
  min-height: clamp(520px, 72vh, 720px);
  padding: calc(8rem + var(--banner-h)) 2rem 4rem;
}
@media (max-width: 768px) {
  .hero--map {
    min-height: clamp(460px, 78vh, 620px);
    padding: calc(6rem + var(--banner-h)) 1.25rem 3rem;
  }
}
.hero__map {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Tint OSM tiles to match brand-dark register without external tile servers.
     iOS Safari renders multi-step filters on the CPU per tile — keep this
     budget tight. `will-change` promotes the layer to the GPU. */
  /*filter: hue-rotate(190deg) saturate(0.55) brightness(0.5) contrast(1.05);*/
  will-change: filter, opacity;
  opacity: 0;
  transition: opacity 900ms ease-out;
}
/* On phones, drop the multi-stage filter — single brightness op is ~5× faster
   on iOS Safari and the page becomes interactive much sooner. */
@media (max-width: 760px) {
  .hero__map { filter: brightness(0.55) contrast(1.05); }
}
.hero__map.is-ready { opacity: 1; }
.hero__map .leaflet-container {
  background: var(--chambray-950);
  font-family: var(--font-sans);
}
/* Hide map UI chrome inside hero; users get full-control map elsewhere if needed */
.hero__map .leaflet-control-zoom,
.hero__map .leaflet-control-attribution { display: none; }
/* Layered scrim — readability for hero text + section-blend at top/bottom */
.hero--map .hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* horizontal scrim — left strong (text legibility), right clear (map shows) */
    linear-gradient(95deg,
    rgba(255,255,255,0.8) 20%, rgba(255,255,255,0) 80%),
    /* gentle top + bottom scrim so banner/header and section edge blend */
     linear-gradient(180deg,
    rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.8) 100%);
  pointer-events: none;
  transition: opacity 380ms ease;
}
.hero--map .hero__content {
  position: relative;
  z-index: 2;
  max-width: 560px;
  margin: 0;
  transition: opacity 380ms ease, transform 380ms ease;
}

/* "Explore map" toggle — sits in lower-right of hero, invites interaction */
.hero__map-toggle {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  border-radius: 999px;
  background: rgba(var(--bg-rgb), 1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.hero__map-toggle:hover,
.hero__map-toggle:focus-visible {
  background: rgba(var(--accent-rgb), 1);
  border-color: var(--accent);
  outline: none;
  transform: translateY(-2px);
}
.hero__map-toggle svg { width: 16px; height: 16px; color: var(--white); }
@media (max-width: 600px) {
  .hero__map-toggle { right: 1rem; bottom: 1rem; padding: 0.6rem 0.9rem; font-size: 0.66rem; }
}

/* Explore state — map takes center stage, content recedes, controls activate */
.hero--map.is-explore .hero__map {
  filter: hue-rotate(190deg) saturate(0.7) brightness(0.78) contrast(1);
}
.hero--map.is-explore .hero__overlay {
  opacity: 0.18;
}
.hero--map.is-explore .hero__content {
  opacity: 0.0;
  transform: translateX(-12px);
  pointer-events: none;
}
.hero--map.is-explore .hero__map .leaflet-control-zoom {
  display: block;
  margin: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.hero--map.is-explore .hero__map .leaflet-control-zoom a {
  background: rgba(var(--bg-rgb), 0.85);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  width: 32px;
  height: 32px;
  line-height: 30px;
  font-size: 1.05rem;
}
.hero--map.is-explore .hero__map .leaflet-control-zoom a:hover {
  background: rgba(var(--accent-rgb), 0.25);
  color: var(--accent);
}
.hero--map.is-explore .hero__map .leaflet-control-attribution {
  display: block;
  background: rgba(var(--bg-rgb), 0.85);
  color: var(--text-soft, var(--muted));
  font-size: 0.7rem;
  padding: 2px 8px;
}
.hero--map.is-explore .hero__map .leaflet-control-attribution a { color: var(--accent); }
.hero--map.is-explore .hero__map-toggle {
  background: rgba(var(--bg-rgb), 0.85);
  border-color: var(--accent);
}
.hero--map h1 {
  /*text-shadow: 0 2px 24px rgba(4, 16, 38, 0.55);*/
    color: var(--chambray-800);
}
.hero--map .hero__sub {
  /*text-shadow: 0 1px 12px rgba(4, 16, 38, 0.65);*/
}

/* Hero entry pill — door icon + entry hint, sits below h1 */
.hero__entry {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.25rem;
  padding: 0.55rem 1rem 0.55rem 0.7rem;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 999px;
  background: rgba(var(--bg-rgb), 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.85rem;
  color: var(--text);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.hero__entry svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
  flex-shrink: 0;
}
.hero__entry strong { color: var(--accent); font-weight: 600; }
@media (max-width: 600px) {
  .hero__entry {
    white-space: normal;
    font-size: 0.8rem;
    line-height: 1.45;
    padding: 0.6rem 0.95rem 0.6rem 0.7rem;
  }
}

/* ----- Map markers: two distinct visual languages ----- */
/* Pin marker (office) — classic teardrop, pre-existing language */
.kka-marker {
  width: 30px;
  height: 30px;
  position: relative;
  animation: marker-drop 700ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.kka-marker__pin {
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 50% 0;
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(4, 16, 38, 0.55);
  transform: rotate(-45deg);
}
.kka-marker__pin::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: #fff;
}

/* Entry marker — round disc with door icon + pulse ring drawing the eye */
.kka-marker--entry {
  width: 38px;
  height: 38px;
  animation-delay: 280ms;
}
.kka-marker--entry .kka-marker__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent);
  box-shadow: 0 4px 14px rgba(4, 16, 38, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lochmara-500);
}
.kka-marker--entry .kka-marker__disc svg {
  width: 18px;
  height: 18px;
}
.kka-marker--entry::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: marker-pulse 2.4s ease-out 1.4s infinite;
  pointer-events: none;
}

@keyframes marker-drop {
  0%   { transform: translateY(-32px); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes marker-pulse {
  0%   { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(2.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__map { transition: none; }
  .kka-marker, .kka-marker--entry::before { animation: none !important; }
}

/* Connector polyline (drawn via Leaflet) — a soft dashed lane between
   pin and door, visualizing the actual path. Class applied via JS. */
.leaflet-pane .kka-route { stroke: var(--accent); stroke-opacity: 0.7; }

/* ----- Asymmetric info grid (Office card + vCard) ----- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 1.75rem;
  align-items: stretch;
}
@media (max-width: 880px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.contact-info__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 1.5rem;
  align-items: start;
  padding: 1.25rem 0;
  border-top: 1px solid var(--border);
}
.contact-info__row:first-of-type { border-top: none; padding-top: 0.5rem; }
.contact-info__row:last-of-type { padding-bottom: 0.25rem; }
.contact-info__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.04));
  color: var(--accent);
  flex-shrink: 0;
}
.contact-info__icon svg { width: 20px; height: 20px; }
.contact-info__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.35rem;
}
.contact-info__value {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
}
.contact-info__value a {
  color: var(--text);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.35);
  transition: border-color 200ms ease, color 200ms ease;
}
.contact-info__value a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
/* Entry row gets a subtle accent treatment */
.contact-info__row--entry {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0));
  border-radius: 8px;
  padding: 1.1rem 1rem;
  margin: 0.5rem -0.5rem;
  border-top: none;
}
.contact-info__row--entry + .contact-info__row { border-top: none; }
.contact-info__row--entry .contact-info__icon {
  background: var(--accent);
  color: var(--bg);
}

/* Three-column rows when a copy button is present:
   icon · value · copy-btn (collapses to icon · value with copy below
   on very narrow viewports). */
.contact-info__row {
  grid-template-columns: auto 1fr auto;
  align-items: center;
}
.contact-info__row > .copy-btn { justify-self: end; }

/* Copy-to-clipboard button — icon only, layout-stable across states.
   Only colour changes on hover/copied; focus-visible adds an outline
   (which lives outside the box) instead of border + background, so the
   button never visually expands or shifts in the row. */
.copy-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
  transition: color 200ms ease;
}
.copy-btn::before {
  /* Extend hit area to 44×44 on desktop without enlarging the visual */
  content: "";
  position: absolute;
  inset: -4px;
}
.copy-btn:hover { color: var(--accent); }
.copy-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  color: var(--accent);
}
/* Touch devices: don't keep `:hover` state stuck after tap */
@media (hover: none) {
  .copy-btn:hover { color: var(--muted); }
}

.copy-btn__icon {
  width: 18px;
  height: 18px;
  position: absolute;
  inset: 9px;          /* (36-18)/2 */
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
}
.copy-btn__icon--check { opacity: 0; transform: scale(0.85); color: var(--accent); }
.copy-btn.is-copied { color: var(--accent); }
.copy-btn.is-copied .copy-btn__icon--copy { opacity: 0; transform: scale(0.85); }
.copy-btn.is-copied .copy-btn__icon--check { opacity: 1; transform: scale(1); }

@media (max-width: 600px) {
  .copy-btn { width: 44px; height: 44px; }
  .copy-btn__icon { inset: 13px; }   /* (44-18)/2 */
}
@media (prefers-reduced-motion: reduce) {
  .copy-btn,
  .copy-btn__icon { transition: none; }
}
.contact-info__hint {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  line-height: 1.6;
}

/* ----- vCard / QR card ----- */
.contact-vcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
  padding: 2rem 1.75rem !important;
}
.contact-vcard__qr {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 10px;
  padding: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(4, 16, 38, 0.35);
  transition: transform 280ms var(--ease-out, ease-out);
}
.contact-vcard:hover .contact-vcard__qr { transform: translateY(-3px) scale(1.015); }
.contact-vcard__qr img { width: 100%; height: 100%; display: block; }
.contact-vcard__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.contact-vcard__title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  margin: -0.15rem 0 0.1rem;
  color: var(--text);
  line-height: 1.3;
}
.contact-vcard p { margin: 0; font-size: 0.85rem; color: var(--lochmara-100); }
.contact-vcard .cta-btn {
  margin-top: 0.5rem;
  padding: 0.7rem 1.6rem;
  font-size: 0.74rem;
}

/* ----- Arrival tiles (ÖPNV / Auto / Flughafen) ----- */
.arrival-section { padding-block: 5rem 6rem; }
.arrival-section .section-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.65rem;
}
.arrival-section h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0 0 2.5rem;
  line-height: 1.15;
}
.arrival-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (max-width: 880px) {
  .arrival-grid { grid-template-columns: 1fr; }
}
.arrival-tile {
  padding: 1.75rem 1.5rem;
  /* background: linear-gradient(135deg,
    rgba(var(--accent-rgb), 0.04),
    rgba(var(--accent-rgb), 0)); */
  background: var(--chambray-700);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: border-color 280ms ease, transform 280ms ease, background 280ms ease;
}
.arrival-tile:hover {
  border-color: rgba(var(--accent-rgb), 0.4);
  transform: translateY(-3px);
  /* background: linear-gradient(135deg,
    rgba(var(--accent-rgb), 0.10),
    rgba(var(--accent-rgb), 0.02)); */
    background: var(--chambray-500);
}
.arrival-tile__icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.arrival-tile__icon svg { width: 22px; height: 22px; }
.arrival-tile h3 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--text);
  letter-spacing: -0.005em;
}
.arrival-tile p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--lochmara-100);
}
.arrival-tile strong { color: var(--white); font-weight: 700; }

.tev-matrix {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(4, 16, 38, 0.92);
  cursor: pointer;
  transition: opacity 450ms ease;
}
.tev-matrix--out { opacity: 0; }

@keyframes df-flash {
  0%   { filter: none; }
  20%  { filter: hue-rotate(-12deg) saturate(1.4) brightness(1.05); }
  100% { filter: none; }
}
.df-flash { animation: df-flash 1100ms ease-out 1; }

.pf-mega {
  transform: scale(1.4);
  transform-origin: top center;
  transition: transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.knh-rocket {
  position: fixed;
  bottom: 0;
  left: -10vw;
  font-size: 5rem;
  z-index: 99999;
  pointer-events: none;
  user-select: none;
  animation: knh-rocket-fly 3.2s cubic-bezier(0.4, 0, 0.6, 1) forwards;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
}
@keyframes knh-rocket-fly {
  0%   { transform: translate(0, 0) rotate(-15deg) scale(0.6); opacity: 0; }
  8%   { transform: translate(2vw, -5vh) rotate(-10deg) scale(1); opacity: 1; }
  50%  { transform: translate(60vw, -70vh) rotate(0deg) scale(1.15); opacity: 1; }
  100% { transform: translate(130vw, -130vh) rotate(15deg) scale(0.7); opacity: 0; }
}

.fp-bubble {
  position: fixed;
  top: 0; left: 0;
  width: 60px; height: 60px;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: auto;
  z-index: 99999;
  border: 2px solid var(--accent);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35),
              0 0 0 4px rgba(var(--accent-rgb), 0.14);
  cursor: pointer;
  transform: translate3d(-200px, -200px, 0);
  will-change: transform;
  animation: fp-bubble-in 320ms var(--ease-out) both;
}
.fp-bubble img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border: none; border-radius: 0; margin: 0;
}
.fp-bubble--out { animation: fp-bubble-out 280ms ease both; }
@keyframes fp-bubble-in {
  from { opacity: 0; scale: 0.4; }
  to   { opacity: 1; scale: 1; }
}
@keyframes fp-bubble-out {
  from { opacity: 1; scale: 1; }
  to   { opacity: 0; scale: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-bubble { animation: none; }
}