/* JK ACCESS — combined site stylesheet (tokens + components + menu) */

/* =============================================================
   JK ACCESS — Colors & Type Foundation
   All tokens. Import this once; then style with semantic classes
   or CSS vars.
   ============================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "GT America";
  src: url("assets/fonts/GT-America-Standard-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GT America";
  src: url("assets/fonts/GT-America-Standard-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GT America Mono";
  src: url("assets/fonts/GT-America-Mono-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Core palette (from Brand Guide) ---------- */
  --jka-cream:        #F4F1EC;   /* Hauptfarbe — backgrounds */
  --jka-green:        #47645A;   /* Hauptfarbe — primary ink / CTA */
  --jka-leuchtgruen:  #2AFFAA;   /* Akzent — initial logo, highlights */

  /* ---------- Tonal ladder (from guide: green 100/80/60/40 + cream) ---------- */
  --jka-green-100: #47645A;
  --jka-green-80:  #6C8379;
  --jka-green-60:  #91A298;
  --jka-green-40:  #B5C1BB;
  --jka-green-20:  #DAE0DD;

  /* ---------- Off-tones derived from cream (subtle layering) ---------- */
  --jka-cream-deep: #ECE7DE;
  --jka-cream-soft: #FAF8F4;
  --jka-ink:        #1A201E;     /* Near-black for body on cream */
  --jka-ink-muted:  #5E6A64;

  /* ---------- Semantic roles ---------- */
  --fg-1: var(--jka-ink);            /* primary text */
  --fg-2: var(--jka-ink-muted);      /* secondary text, labels */
  --fg-brand: var(--jka-green);      /* brand ink, used on cream */
  --fg-accent: var(--jka-leuchtgruen);
  --fg-on-dark: var(--jka-cream);    /* text on green */

  --bg-page:  var(--jka-cream);
  --bg-panel: var(--jka-cream-soft);
  --bg-deep:  var(--jka-cream-deep);
  --bg-brand: var(--jka-green);      /* dark section bg */

  --border-hair:   rgba(71,100,90,0.18);
  --border-strong: rgba(71,100,90,0.35);
  --border-on-dark: rgba(244,241,236,0.22);

  /* ---------- Type family ---------- */
  --font-sans: "GT America", "Neue Haas Grotesk", Helvetica, Arial, sans-serif;
  --font-mono: "GT America Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* ---------- Type scale (desktop first) ---------- */
  --type-display:  clamp(56px, 7vw, 104px); /* hero marker */
  --type-h1:       clamp(40px, 4.4vw, 64px);
  --type-h2:       clamp(30px, 3vw, 40px);
  --type-h3:       22px;
  --type-body-lg:  18px;
  --type-body:     16px;
  --type-small:    14px;
  --type-label:    11px;  /* mono caps labels */

  --lh-tight: 1.05; /* @kind font */
  --lh-snug:  1.15; /* @kind font */
  --lh-body:  1.55; /* @kind font */
  --lh-loose: 1.7; /* @kind font */

  --ls-label:   0.16em;
  --ls-mono-sm: 0.12em;
  --ls-heading: -0.01em;

  /* ---------- Spacing (8-based, plus 4 for inline) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 144px;

  /* ---------- Radius (generous pill + small hairline) ---------- */
  --r-xs: 2px;
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* ---------- Shadows (restrained; print-premium, not web-shiny) ---------- */
  --sh-hairline: 0 0 0 1px var(--border-hair);
  --sh-sm:  0 1px 2px rgba(26,32,30,0.06);
  --sh-md:  0 6px 24px -8px rgba(26,32,30,0.12);
  --sh-lg:  0 24px 60px -24px rgba(26,32,30,0.25);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 240ms; /* @kind other */
  --dur-slow: 480ms; /* @kind other */

  /* ---------- Layout ---------- */
  --maxw-page: 1280px;
  --maxw-prose: 640px;
  --gutter: clamp(20px, 4vw, 56px); /* @kind spacing */
}

/* =============================================================
   Base semantic element styles
   ============================================================= */
html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--type-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--type-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  color: var(--fg-brand);
  margin: 0;
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--type-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--fg-brand);
  margin: 0;
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--type-h3);
  line-height: var(--lh-snug);
  color: var(--fg-brand);
  margin: 0;
}

p, .body {
  font-size: var(--type-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  text-wrap: pretty;
}

.lead, .body-lg {
  font-size: var(--type-body-lg);
  line-height: var(--lh-body);
  color: var(--fg-1);
}

small, .small {
  font-size: var(--type-small);
  color: var(--fg-2);
}

.label, .mono-label {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-2);
  line-height: 1;
}

.mono {
  font-family: var(--font-mono);
  letter-spacing: var(--ls-mono-sm);
}

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-deep);
  padding: 2px 6px;
  border-radius: var(--r-xs);
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--dur-fast) var(--ease-out);
}
a:hover { opacity: 0.6; }

hr {
  border: 0;
  border-top: 1px solid var(--border-hair);
  margin: var(--s-7) 0;
}

::selection { background: var(--jka-leuchtgruen); color: var(--jka-green); }


/* JK ACCESS website UI kit – shared component styles */


* { box-sizing: border-box; }
/* overflow-x: clip preserves sticky positioning (overflow:hidden breaks it). */
html, body { margin: 0; padding: 0; background: var(--bg-page); overflow-x: clip; }

.site {
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.site__main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 100px);
  padding-bottom: clamp(24px, 3.5vh, 58px);
}
.site__main:has(.hero) {
  padding-bottom: 0;
}
.site__main:has(.expertise-zone) {
  padding-bottom: 0;
}
.site__main > .hero {
  flex: 1 0 auto;
}

/* ---------- Nav ---------- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(24px, 4vw, 64px);
  background: rgba(244, 241, 236, 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  border-bottom: 1px solid transparent;
  position: sticky; top: 0; z-index: 20;
  min-height: 64px;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
/* Browsers without backdrop-filter — fall back to a more opaque cream */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: var(--bg-page); }
}
/* Subtle scroll indicator — hairline divider once content slides under */
.nav.is-scrolled {
  border-bottom-color: var(--border-hair);
  background: rgba(244, 241, 236, 0.88);
}
.nav__logo { border-bottom: none; }
.nav__logo img { height: 14px; display: block; }
.nav__links {
  display: flex; gap: clamp(20px, 3vw, 40px);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--jka-ink);
}
.nav__links a { border: none; cursor: pointer; }
.nav__links a.active { color: var(--jka-green); }
.nav__cta {
  background: var(--jka-green);
  color: var(--jka-cream);
  border: none;
  border-radius: var(--r-pill);
  padding: 11px 26px;
  font-family: var(--font-sans);
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.nav__cta:hover { opacity: 0.85; }

/* Keyboard focus – visible & on-brand */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--jka-green);
  outline-offset: 3px;
  border-radius: 4px;
}
.nav__cta:focus-visible,
.hero__cta:focus-visible,
.footer__cta:focus-visible,
.nav__sheet-cta:focus-visible,
.karriere-detail__cta:focus-visible {
  outline-offset: 4px;
  border-radius: var(--r-pill);
}

/* Burger (hidden on desktop) */
.nav__burger {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  margin: -8px;
  cursor: pointer;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  /* Sit above the open mobile sheet so the close (X) icon stays tappable */
  position: relative;
  z-index: 50;
}
.nav__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--jka-ink);
  border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav--open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav--open .nav__burger span:nth-child(2) { opacity: 0; }
.nav--open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__sheet {
  position: fixed;
  inset: 0;
  background: var(--bg-page);
  z-index: 30;
  display: none;
  animation: nav-sheet-in .25s var(--ease-out);
}
.nav--open { z-index: 40; }
@keyframes nav-sheet-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.nav__sheet-inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 96px 28px 40px;
}
.nav__sheet-link {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 32px;
  letter-spacing: -.01em;
  color: var(--jka-ink);
  cursor: pointer;
  text-decoration: none;
}
.nav__sheet-link.active { color: var(--jka-green); }
.nav__sheet-cta {
  margin-top: 16px;
  align-self: flex-start;
  background: var(--jka-green);
  color: var(--jka-cream);
  border-radius: var(--r-pill);
  padding: 14px 28px;
  font-family: var(--font-sans);
  font-size: 15px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(32px, 4vw, 64px) clamp(24px, 4vw, 64px);
  min-height: calc(100vh - 64px);
  overflow: hidden;
  color: var(--jka-green);
  background: #CFCFC9 url("assets/hero_fabric_v2.jpg") center/cover no-repeat;
  display: flex;
  flex-direction: column;
}
.hero__texture {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(244,241,236,.72) 0%, rgba(244,241,236,.55) 30%, rgba(244,241,236,.1) 55%, rgba(244,241,236,0) 75%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; }
.hero__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--jka-green);
  /* Frosted-glass chip – tints + blurs whatever fabric sits behind,
     so the text is legible on light AND dark patches of the photo. */
  background: rgba(244, 241, 236, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(71, 100, 90, 0.14);
  border-radius: 999px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
}
/* Browsers without backdrop-filter – fall back to a more opaque cream */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero__meta { background: rgba(244, 241, 236, 0.92); }
}
.hero__meta--left { align-self: flex-start; }
.hero__meta-row {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}
.hero__meta--right {
  color: var(--jka-green);
  text-decoration: none;
  cursor: pointer;
  justify-self: end;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.hero__meta--right:hover {
  background: rgba(244, 241, 236, 0.92);
  border-color: rgba(71, 100, 90, 0.28);
}
.hero__meta--right:hover .hero__meta-arrow { transform: translate(2px, -2px); }
.hero__meta-arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}
.hero__meta-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--jka-leuchtgruen);
  flex: 0 0 auto;
  /* Soft glow keeps the neon dot crisp inside the frosted chip */
  box-shadow:
    0 0 0 0 rgba(42, 255, 170, 0.55),
    0 0 8px rgba(42, 255, 170, 0.6);
  animation: hero-meta-pulse 2.4s var(--ease-out) infinite;
}
@keyframes hero-meta-pulse {
  0% {
    box-shadow:
      0 0 0 0 rgba(42, 255, 170, 0.55),
      0 0 8px rgba(42, 255, 170, 0.6);
  }
  70% {
    box-shadow:
      0 0 0 8px rgba(42, 255, 170, 0),
      0 0 8px rgba(42, 255, 170, 0.6);
  }
  100% {
    box-shadow:
      0 0 0 0 rgba(42, 255, 170, 0),
      0 0 8px rgba(42, 255, 170, 0.6);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__meta-dot { animation: none; }
}
.hero__text {
  margin-top: auto;
  margin-bottom: clamp(48px, 8vh, 120px);
  max-width: 640px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.hero__title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(36px, 4.2vw, 60px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--jka-green);
  margin: 0 0 28px;
  max-width: 640px;
  text-wrap: pretty;
}
.hero__ghost { display: none; }
.hero__cta {
  margin-top: 8px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--jka-green);
  color: var(--jka-cream);
  border: none;
  border-radius: var(--r-pill);
  padding: 16px 32px;
  font-family: var(--font-sans);
  font-size: 15px;
  cursor: pointer;
  position: relative;
  z-index: 3;
  white-space: nowrap;
  min-width: 160px;
  justify-content: center;
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.hero__cta:hover { opacity: .88; }
.nav__cta { white-space: nowrap; }
.footer__cta { white-space: nowrap; }
.nl-submit { white-space: nowrap; }

/* ---------- Editorial section ---------- */
.section {
  padding: clamp(64px, 8vw, 120px) clamp(24px, 4vw, 64px);
}
.editorial-row {
  display: grid;
  grid-template-columns: clamp(120px, 14vw, 180px) 1fr;
  gap: clamp(24px, 4vw, 56px);
  padding: 28px 0;
  max-width: 1200px;
}
.editorial-row:first-child {
  padding-top: 0;
}
.editorial-row:last-child {
  padding-bottom: 0;
}
.editorial-row__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--jka-green);
  opacity: .8;
}
.editorial-row__body p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--jka-ink);
  max-width: 760px;
  margin: 0 0 14px;
}

/* ---------- Über uns – editorial spread (Route A) ---------- */
.site__main:has(.about-page) { padding-bottom: 0; }

.about-page {
  padding: clamp(56px, 6vw, 96px) clamp(24px, 4vw, 64px) clamp(64px, 8vw, 120px);
  display: flex;
  flex-direction: column;
}

/* ── Anchor – label-only opener ── */
.about-anchor {
  padding-bottom: clamp(20px, 2vw, 28px);
  border-bottom: 1px solid var(--border-strong);
  margin-bottom: 0;
}
.about-anchor__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--jka-green);
  line-height: 1;
  margin-bottom: 0;
}
.about-anchor__eyebrow span:last-child { color: var(--jka-green-80); }
.about-anchor__rule {
  width: 48px;
  height: 1px;
  background: var(--border-strong);
}
.about-anchor__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(56px, 8.4vw, 176px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--jka-green);
  margin: 0;
  white-space: nowrap;
}

/* ── Editorial blocks – label/content with proper body register ── */
.about-block {
  display: grid;
  grid-template-columns: clamp(180px, 18vw, 240px) 1fr;
  gap: clamp(32px, 5vw, 80px);
  padding: clamp(40px, 4vw, 64px) 0;
  border-bottom: 1px solid var(--border-hair);
  align-items: start;
}
.about-block__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--jka-green-80);
  line-height: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: sticky;
  top: 84px;
  align-self: start;
}
.about-block__label-line { color: var(--jka-green); }
.about-block__label-meta { color: var(--jka-green-60); }
.about-block__body {
  /* Fills the available grid column up to a readable cap — no more
     stranded right-side gap on wide displays. */
  max-width: 900px;
  width: 100%;
}
.about-block__body p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--jka-ink);
  margin: 0 0 1em;
  text-wrap: pretty;
}
.about-block__body p:last-child { margin-bottom: 0; }
.about-block__link {
  color: var(--jka-green);
  border-bottom: 1px solid currentColor;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.about-block__link:hover { opacity: .7; }
.about-block__link-arrow {
  display: inline-block;
  margin-left: 2px;
  transition: transform var(--dur-base) var(--ease-out);
}
.about-block__link:hover .about-block__link-arrow {
  transform: translate(2px, -2px);
}

/* ── Expertise – four pillars at credential scale, stacked, presence equal to the headline ── */
.about-expertise {
  padding: clamp(40px, 4vw, 64px) 0;
}
.about-expertise__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: clamp(20px, 2vw, 28px);
  margin-bottom: 0;
  border-bottom: none;
}
.about-expertise__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--jka-green);
  line-height: 1;
}
.about-expertise__caption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--jka-green-60);
  line-height: 1;
}
.about-expertise__list {
  list-style: none;
  margin: 0;
  padding: clamp(28px, 3vw, 36px) 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
}
.about-pillar {
  padding: 0;
  border: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 18px;
  cursor: default;
  transition: padding-left var(--dur-base) var(--ease-out);
}
.about-pillar::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--jka-green);
  flex: 0 0 auto;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.about-pillar__name {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(34px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--jka-green);
  display: block;
  white-space: nowrap;
  transition: color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.about-pillar:hover::before {
  opacity: 1;
  transform: translateX(0);
}
.about-pillar:hover .about-pillar__name {
  transform: translateX(4px);
}

/* ── Meta – administrative info, where it belongs ── */
.about-meta {
  margin-top: clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 3vw, 48px);
}
.about-meta__line {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.2;
}
.about-meta__k { color: var(--jka-green-60); }
.about-meta__v { color: var(--jka-green); }
.about-meta__link {
  border: none;
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.about-meta__link:hover { opacity: .65; }

/* ── Mobile ── */
@media (max-width: 720px) {
  .about-page { padding: 32px 20px 56px; }
  .about-anchor { padding-bottom: 16px; }
  .about-anchor__eyebrow {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 0;
    font-size: 10px;
  }
  .about-anchor__rule { width: 32px; }
  .about-anchor__title {
    font-size: clamp(28px, 8.4vw, 56px);
    letter-spacing: -0.025em;
  }
  .about-block {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 28px 0;
  }
  .about-block__label {
    position: static;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
  }
  .about-block__body p { font-size: 16px; }
  .about-expertise__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-bottom: 16px;
  }
  .about-meta {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 28px;
  }
  .about-meta__line { flex-direction: row; gap: 16px; }
  .about-meta__k { min-width: 88px; }
}

/* Legacy expertise-zone styles intentionally retired – selectors no longer in markup */

/* ---------- Expertise accordion ---------- */
.expertise {
  padding: 0;
  max-width: 760px;
}
.editorial-row__body .expertise { padding: 0; max-width: 760px; }
.expertise__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  border-top: 1px solid rgba(71,100,90,.25);
  cursor: pointer;
  transition: padding var(--dur-base) var(--ease-out);
}
.expertise__item:last-child { border-bottom: 1px solid rgba(71,100,90,.25); }
.expertise__item:hover { padding-left: 8px; }
.expertise__title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--jka-green);
}
.expertise__arrow {
  font-size: 24px;
  color: var(--jka-green);
  transition: transform var(--dur-base) var(--ease-out);
}
.expertise__item.open .expertise__arrow { transform: rotate(180deg); }
.expertise__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-out);
}
.expertise__body-inner {
  padding: 0 0 18px;
  max-width: 760px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--jka-ink);
}
.expertise__item.open + .expertise__body { max-height: 260px; }

/* ---------- Footer ---------- */
.footer {
  margin-top: auto;
  background: var(--jka-green);
  color: var(--jka-cream);
  padding: clamp(48px, 6vw, 80px) clamp(24px, 4vw, 64px) clamp(24px, 3vw, 36px);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.footer__contact-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgba(244,241,236,.7);
  margin-bottom: 10px;
}
.footer__contact-title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(44px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.015em;
}
.footer__cta {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--jka-cream);
  color: var(--jka-green);
  border: none;
  border-radius: var(--r-pill);
  padding: 12px 24px;
  font-family: var(--font-sans);
  font-size: 14px;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.footer__cta:hover { opacity: .88; }
.footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding-top: 10px;
}
.footer__link-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border: none;
  color: var(--jka-cream);
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.footer__link-row:hover { opacity: .75; }
.footer__copy {
  grid-column: 1 / -1;
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: 24px;
  border-top: 1px solid rgba(244,241,236,.18);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgba(244,241,236,.6);
}

/* ---------- Legal pages ---------- */
.legal__body {
  max-width: 860px;
  margin-top: clamp(28px, 4vw, 48px);
}
.legal__body p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
  color: var(--jka-ink);
  margin: 0 0 14px;
}
.legal__h2 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -.01em;
  color: var(--jka-green);
  margin: 40px 0 16px;
}
.legal__h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--jka-green);
  margin: 28px 0 10px;
  font-weight: 500;
}
.legal__list {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
  color: var(--jka-ink);
  padding-left: 20px;
  margin: 0 0 14px;
}
.legal__link {
  color: var(--jka-green);
  border-bottom: 1px solid currentColor;
  text-decoration: none;
  padding-bottom: 1px;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.legal__link:hover { opacity: .7; }

/* ---------- Karriere ---------- */
.karriere__intro {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--jka-ink);
  max-width: 760px;
  margin: 0;
}
.karriere__intro-link {
  color: var(--jka-green);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.karriere__intro-link:hover { opacity: .7; }

.karriere-list {
  padding: 0 clamp(24px, 4vw, 64px) clamp(48px, 6vw, 80px);
  margin: clamp(8px, 1vw, 16px) clamp(24px, 4vw, 64px) 0;
  padding-left: 0;
  padding-right: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.karriere-row {
  display: grid;
  grid-template-columns: clamp(220px, 21vw, 290px) 1fr clamp(140px, 15vw, 200px) 40px;
  gap: clamp(20px, 3vw, 40px);
  align-items: baseline;
  padding: clamp(22.4px, 2.72vw, 41.6px) 0;
  border-bottom: 1px solid rgba(71,100,90,.2);
  cursor: pointer;
  transition: padding var(--dur-base) var(--ease-out);
}
.karriere-row:hover { padding-left: 8px; }
.karriere-row__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--jka-ink-muted);
  white-space: nowrap;
}
.karriere-row__title-wrap {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.karriere-row__title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--jka-green);
}
.karriere-row__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--jka-ink-muted);
}
.karriere-row__badge {
  padding: 3px 10px;
  border-radius: 999px;
  background: #2AFFAA;
  color: #47645A;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: 700;
}
.karriere-row__type {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--jka-green);
}
.karriere-row__arrow {
  color: var(--jka-green);
  font-size: 20px;
  text-align: right;
  transition: transform var(--dur-base) var(--ease-out);
}

/* ---------- Karriere expanded detail ---------- */
.karriere-item {
  border-bottom: 1px solid rgba(71,100,90,.2);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.karriere-item:not(.is-open) {
  justify-content: center;
}
.karriere-item .karriere-row {
  border-bottom: none;
}
.karriere-item.is-open .karriere-row {
  padding-left: 8px;
}
.karriere-detail {
  overflow: hidden;
  animation: karriereDetailIn var(--dur-base) var(--ease-out);
}
@keyframes karriereDetailIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.karriere-detail__inner {
  position: relative;
  display: grid;
  grid-template-columns: clamp(220px, 21vw, 290px) 1fr;
  gap: clamp(20px, 3vw, 40px);
  padding: 20px 0 56px;
  padding-left: 8px;
  max-width: 1200px;
}
.karriere-detail__inner > *:first-child:not(.karriere-detail__section) {
  grid-column: 2;
}
.karriere-detail__lede {
  grid-column: 2;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.65;
  letter-spacing: .005em;
  color: var(--jka-ink);
  margin: 0 0 28px;
  max-width: 760px;
}
.karriere-detail__section {
  display: contents;
}
.karriere-detail__body {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.karriere-detail__h {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--jka-green);
  opacity: .8;
  padding-top: 6px;
}
.karriere-detail__p,
.karriere-detail__list {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.65;
  letter-spacing: .005em;
  color: var(--jka-ink);
  max-width: 760px;
  margin: 0 0 18px;
}
.karriere-detail__body > :last-child { margin-bottom: 0; }
.karriere-detail__list {
  padding-left: 0;
  list-style: none;
}
.karriere-detail__list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 10px;
}
.karriere-detail__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 1px;
  background: var(--jka-green);
  opacity: .6;
}
.karriere-detail__list li strong {
  color: var(--jka-green);
  font-weight: 500;
}
.karriere-detail__cta {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: start;
  padding: 12px 22px;
  background: var(--jka-green);
  color: var(--jka-cream);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  transition: opacity var(--dur-fast) var(--ease-out);
  width: fit-content;
}
.karriere-detail__cta:hover { opacity: .85; }
.karriere-detail__cta span { font-size: 13px; }

/* ---------- Referenzen – editorial roster ---------- */
.ref-page {
  padding: clamp(56px, 6vw, 96px) clamp(24px, 4vw, 64px) clamp(32px, 4vw, 56px);
  display: flex;
  flex-direction: column;
}

.ref-page__body {
  display: flex;
  flex-direction: column;
}

.ref-group {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(36px, 4vw, 56px) 0;
}

.ref-group__head {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 14px;
  position: sticky;
  top: 84px;
  align-self: start;
  padding-top: 14px;
}
.ref-group__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  color: var(--jka-green-60);
  line-height: 1;
}
.ref-group__label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--jka-green);
}

.ref-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  column-gap: clamp(24px, 3vw, 48px);
  row-gap: 0;
}

.ref-name {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 0 14px 0;
  border-bottom: 1px solid var(--border-hair);
  cursor: default;
  transition: padding-left var(--dur-base) var(--ease-out);
}
.ref-name__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--jka-green);
  opacity: 0;
  flex: 0 0 auto;
  transform: translateX(-6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.ref-name__text {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--jka-ink);
  text-wrap: balance;
  transition: color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.ref-name:hover .ref-name__dot {
  opacity: 1;
  transform: translateX(0);
}
.ref-name:hover .ref-name__text {
  color: var(--jka-green);
  transform: translateX(4px);
}

/* ---- Close with intent ---- */
.ref-page__body { padding-bottom: clamp(24px, 4vw, 56px); }

/* Legacy ref-* classes – kept harmless in case other pages reference them */
.ref-section { padding: clamp(48px, 6vw, 80px) clamp(24px, 4vw, 64px); }
.ref-cluster { margin-bottom: 48px; }
.ref-cluster__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--jka-green);
  margin-bottom: 12px;
}
.ref-cluster__list { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.ref-cluster__list span {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: var(--jka-ink);
  padding-right: 10px;
  border-right: 1px solid rgba(71,100,90,.25);
}
.ref-cluster__list span:last-child { border-right: none; }

/* ---------- Page title (subpages) ---------- */
.page-title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--jka-green);
  margin: 0;
}

/* ---------- Newsletter panel ---------- */
.newsletter {
  background: var(--bg-deep);
  padding: 64px 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

/* ---------- Newsletter modal ---------- */
.nl-modal {
  position: fixed; inset: 0;
  background: rgba(26,32,30,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  padding: 24px;
  animation: nl-fade .25s ease-out;
}
@keyframes nl-fade { from { opacity: 0 } to { opacity: 1 } }
.nl-modal__panel {
  position: relative;
  width: 100%;
  max-width: 880px;
  max-height: 90vh;
  overflow: auto;
  background: var(--bg-deep);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(26,32,30,.35);
}
.nl-modal__panel .newsletter { padding: 56px; border-radius: 14px; }
.nl-modal__close {
  position: absolute;
  top: 16px; right: 20px;
  background: none; border: none;
  font-size: 28px; line-height: 1;
  color: var(--jka-green);
  cursor: pointer;
  z-index: 2;
}
.newsletter__title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--jka-green);
}
.newsletter__form { display: flex; flex-direction: column; gap: 22px; }
.nl-field {
  border: none;
  border-bottom: 1px solid rgba(71,100,90,.35);
  background: transparent;
  padding: 10px 0;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--jka-ink);
  outline: none;
}
.nl-field::placeholder { color: var(--jka-ink-muted); }
.nl-field:focus { border-bottom-color: var(--jka-green); }

.nl-submit {
  align-self: flex-start;
  background: var(--jka-green);
  color: var(--jka-cream);
  border: none;
  border-radius: var(--r-pill);
  padding: 12px 28px;
  font-family: var(--font-sans);
  font-size: 13px;
  cursor: pointer;
  margin-top: 8px;
}

/* Expertise pillars — at narrow widths, allow the names to wrap and tighten the gap */
@media (max-width: 720px) {
  .about-expertise { padding: clamp(32px, 4vw, 56px) 0; }
  .about-expertise__list {
    gap: 36px;
    padding-top: 24px;
  }
  .about-pillar__name {
    font-size: clamp(26px, 7vw, 34px);
    line-height: 1.05;
    white-space: normal;
  }
}

/* ============================================================
   Responsive – Tablet & Mobile
   ============================================================ */

/* Tablet (≤ 960px) – tighten gutters, single-column footer */
@media (max-width: 960px) {
  .footer {
    grid-template-columns: 1fr 1fr;
  }
  .footer > div:first-child {
    grid-column: 1 / -1;
    margin-bottom: 24px;
  }
  .newsletter,
  .nl-modal__panel .newsletter {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 48px 36px;
  }
}

/* Karriere — stack into card layout earlier (long meta strings need room) */
@media (max-width: 1080px) {
  .karriere-row {
    grid-template-columns: 1fr 32px;
    grid-template-areas:
      "meta meta"
      "title arrow"
      "type type";
    gap: 6px 12px;
    padding: 17.6px 0;
    align-items: start;
  }
  .karriere-row__meta { grid-area: meta; white-space: normal; }
  .karriere-row__title-wrap { grid-area: title; }
  .karriere-row__type { grid-area: type; }
  .karriere-row__arrow { grid-area: arrow; align-self: start; }
  .karriere-row:hover { padding-left: 0; }
  .karriere-item.is-open .karriere-row { padding-left: 0; }

  .karriere-detail__inner {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 8px 0 36px;
    padding-left: 0;
  }
  .karriere-detail__inner > *:first-child:not(.karriere-detail__section) {
    grid-column: auto;
  }
  .karriere-detail__lede {
    grid-column: auto;
    margin-bottom: 22px;
  }
  .karriere-detail__h {
    grid-column: auto;
    padding-top: 14px;
    margin-bottom: 4px;
  }
  .karriere-detail__p,
  .karriere-detail__list { margin-bottom: 12px; }
  .karriere-detail__cta { grid-column: auto; }
}

/* Mobile (≤ 720px) */
@media (max-width: 720px) {
  /* Override inline paddingTop on sections (96/72px is too much on mobile) */
  .section[style],
  .ref-section[style] {
    padding-top: 40px !important;
  }
  .section.legal[style] {
    padding-top: 32px !important;
  }
  /* Nav – collapse desktop links + CTA, show burger */
  .nav {
    padding: 16px 20px;
    min-height: 56px;
  }
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__burger {
    display: flex;
  }
  .nav__sheet { display: block; }

  /* Site main bottom padding tighter */
  .site__main {
    padding-bottom: clamp(20px, 4vh, 40px);
    min-height: calc(100vh - 80px);
  }

  /* Hero */
  .hero {
    padding: 24px 20px 32px;
    min-height: calc(100vh - 56px);
  }
  .hero__title {
    font-size: clamp(30px, 9vw, 44px);
    margin-bottom: 22px;
  }
  .hero__text {
    margin-bottom: clamp(32px, 6vh, 64px);
  }
  .hero__cta {
    padding: 14px 24px;
    font-size: 14px;
  }
  .hero__meta-roles { display: none; }
  .hero__meta-row {
    grid-template-columns: 1fr;
    justify-content: stretch;
    gap: 10px;
  }
  .hero__meta--right {
    justify-self: start;
  }
  .hero__meta {
    font-size: 10px;
    padding: 7px 12px;
  }
  .hero__texture {
    background:
      linear-gradient(180deg,
        rgba(244,241,236,.45) 0%,
        rgba(244,241,236,.18) 22%,
        rgba(244,241,236,.35) 50%,
        rgba(244,241,236,.78) 75%,
        rgba(244,241,236,.95) 100%);
  }
  .hero__cta {
    box-shadow: 0 12px 32px -10px rgba(26,32,30,.35), 0 2px 6px -2px rgba(26,32,30,.2);
  }

  /* Editorial sections – stack label above body */
  .section {
    padding: 56px 20px;
  }
  .editorial-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 22px 0;
  }
  .editorial-row__label {
    margin-bottom: 4px;
  }
  .editorial-row__body p {
    font-size: 15px;
  }

  /* Expertise accordion */
  .expertise__title {
    font-size: 19px;
    line-height: 1.25;
    padding-right: 12px;
  }
  .expertise__item {
    padding: 16px 0;
    align-items: flex-start;
  }
  .expertise__arrow { font-size: 20px; flex-shrink: 0; }
  .expertise__item.open + .expertise__body { max-height: 360px; }
  .expertise__body-inner { font-size: 15px; }

  /* Footer */
  .footer {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 56px 20px 28px;
  }
  .footer > div:first-child { margin-bottom: 0; }
  .footer__contact-title { font-size: clamp(40px, 12vw, 56px); }
  .footer__cta { margin-top: 20px; }
  .footer__copy { margin-top: 28px; padding-top: 18px; }

  /* Karriere – mobile refinements (stacked layout already applied at ≤1080) */
  .karriere__intro { font-size: 15px; }
  .karriere-list {
    margin: 12px 0 0;
    padding: 0 20px;
  }
  .karriere-row__title { font-size: 17px; line-height: 1.3; }
  .karriere-row__tag { font-size: 10px; }

  /* Referenzen */
  .ref-section { padding: 48px 20px; }
  .ref-cluster { margin-bottom: 36px; }
  .ref-cluster__list span {
    font-size: 15px;
    padding-right: 8px;
  }

  /* Referenzen – editorial roster (mobile) */
  .ref-page {
    padding: 40px 20px 32px;
  }
  .ref-group {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 28px 0;
  }
  .ref-group__head {
    position: static;
    flex-direction: row;
    align-items: baseline;
    gap: 16px;
    padding-top: 12px;
  }
  .ref-group__label { font-size: 18px; flex: 1; }
  .ref-group__list {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .ref-name { padding: 12px 0; }
  .ref-name__text { font-size: 18px; }

  /* Page title (legal pages) */
  .page-title { font-size: 32px; }

  /* Newsletter */
  .newsletter,
  .nl-modal__panel .newsletter {
    padding: 40px 24px;
    gap: 28px;
  }
  .newsletter__title { font-size: 32px; }
  .nl-modal { padding: 16px; }
  .nl-modal__close { top: 10px; right: 14px; font-size: 26px; }
  /* Tap targets – comfy on touch */
  .footer__link-row {
    padding: 10px 0;
  }
  .nav__sheet-link {
    padding: 4px 0;
  }
}
@media (max-width: 380px) {
  .hero__title { font-size: 28px; }
  .footer__contact-title { font-size: 36px; }
  .newsletter__title { font-size: 28px; }
}

/* =============================================================
   Hero v2 – positioning-claim redesign
   "Access is the strategy." register. Bold grotesque or editorial
   serif via .hero--grotesque / .hero--serif modifier.
   ============================================================= */
.hero.hero--v2 {
  padding: clamp(28px, 3.2vw, 56px) clamp(24px, 4vw, 64px) clamp(40px, 6vh, 80px);
  min-height: calc(100vh - 64px);
  background: #CFCFC9 url("assets/hero_fabric_v2.jpg") center/cover no-repeat;
}
.hero.hero--v2 .hero__texture {
  background:
    radial-gradient(120% 80% at 0% 100%, rgba(244,241,236,.78) 0%, rgba(244,241,236,.38) 38%, rgba(244,241,236,0) 70%),
    linear-gradient(180deg, rgba(244,241,236,.55) 0%, rgba(244,241,236,.18) 28%, rgba(244,241,236,0) 60%);
}

/* ---- Meta row: locations as secondary signal (no chip) ---- */
.hero.hero--v2 .hero__meta-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 32px;
}
.hero.hero--v2 .hero__locations {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--jka-green);
  line-height: 1;
}
.hero.hero--v2 .hero__locations-label {
  position: relative;
  padding-right: 14px;
  color: #1F2E29;
}
.hero.hero--v2 .hero__locations-label::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 1px;
  height: 11px;
  margin-top: -5.5px;
  background: rgba(71,100,90,0.4);
}
.hero.hero--v2 .hero__locations-list { color: #1F2E29; }

/* ---- Hiring nudge – quiet sibling of the locations caption ---- */
.hero.hero--v2 .hero__hiring {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: #1F2E29;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  border: none;
  padding: 6px 4px;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.hero.hero--v2 .hero__hiring:hover { opacity: .7; }
.hero.hero--v2 .hero__hiring:hover .hero__hiring-arrow { transform: translate(2px,-2px); }
.hero.hero--v2 .hero__hiring-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jka-leuchtgruen);
  flex: 0 0 auto;
  box-shadow:
    0 0 0 0 rgba(42,255,170,0.55),
    0 0 8px rgba(42,255,170,0.55);
  animation: hero-meta-pulse 2.4s var(--ease-out) infinite;
}
.hero.hero--v2 .hero__hiring-label { color: #1F2E29; }
.hero.hero--v2 .hero__hiring-arrow {
  display: inline-block;
  color: #2E413A;
  transition: transform var(--dur-fast) var(--ease-out);
}

.hero.hero--v2 .hero__index {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--jka-green-80);
  line-height: 1;
}
.hero.hero--v2 .hero__index-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--jka-green);
  opacity: .55;
}

/* ---- ACCESS watermark – editorial gravitas, not noise ---- */
.hero.hero--v2 .hero__ghost {
  display: block;
  position: absolute;
  right: clamp(-80px, -4vw, -32px);
  bottom: clamp(-40px, -3vw, -16px);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(220px, 30vw, 460px);
  line-height: .82;
  letter-spacing: -0.045em;
  color: rgba(71,100,90,0.055);
  pointer-events: none;
  user-select: none;
  z-index: 1;
  white-space: nowrap;
}
.hero.hero--serif .hero__ghost {
  font-family: "Instrument Serif", "Times New Roman", serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
  color: rgba(71,100,90,0.07);
}

/* ---- Headline – owns the space ---- */
.hero.hero--v2 .hero__text {
  margin-top: auto;
  margin-bottom: 0;
  max-width: min(1100px, 92%);
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
}
.hero.hero--v2 .hero__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(36px, 9.4vw, 140px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--jka-green);
  margin: 0;
  max-width: none;
}
.hero.hero--serif .hero__title {
  font-family: "Instrument Serif", "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(72px, 10.4vw, 172px);
  line-height: 0.92;
  letter-spacing: -0.022em;
  font-feature-settings: "liga", "dlig";
}

/* ---- Subline + CTA in a sibling row ---- */
.hero.hero--v2 .hero__deck {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: clamp(24px, 4vw, 56px);
  max-width: 1100px;
}
.hero.hero--v2 .hero__sub {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.45;
  color: var(--jka-green);
  opacity: .82;
  margin: 0;
  max-width: 38ch;
  text-wrap: pretty;
}
.hero.hero--v2 .hero__cta {
  margin-top: 0;
  align-self: end;
  background: var(--jka-green);
  color: var(--jka-cream);
  border-radius: var(--r-pill);
  padding: 16px 32px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  white-space: nowrap;
  min-width: 0;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.hero.hero--v2 .hero__cta:hover {
  background: #3a544c;
  opacity: 1;
}
.hero.hero--v2 .hero__cta span {
  transition: transform var(--dur-fast) var(--ease-out);
  display: inline-block;
}
.hero.hero--v2 .hero__cta:hover span { transform: translate(2px,-2px); }

/* ---- Responsive: mobile ---- */
@media (max-width: 720px) {
  .hero.hero--v2 {
    padding: 22px 20px 36px;
    min-height: calc(100vh - 56px);
  }
  .hero.hero--v2 .hero__meta-row {
    flex-direction: column;
    gap: 12px;
  }
  .hero.hero--v2 .hero__index { display: none; }
  .hero.hero--v2 .hero__locations { font-size: 10px; }
  .hero.hero--v2 .hero__title {
    font-size: clamp(26px, 8.5vw, 64px);
    letter-spacing: -0.025em;
  }
  .hero.hero--serif .hero__title {
    font-size: clamp(52px, 15vw, 88px);
  }
  .hero.hero--v2 .hero__deck {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .hero.hero--v2 .hero__sub {
    font-size: 14px;
    max-width: 32ch;
  }
  .hero.hero--v2 .hero__cta {
    align-self: start;
    padding: 14px 24px;
    font-size: 14px;
    box-shadow: 0 12px 32px -10px rgba(26,32,30,.35), 0 2px 6px -2px rgba(26,32,30,.2);
  }
  .hero.hero--v2 .hero__ghost {
    font-size: clamp(160px, 50vw, 260px);
    right: -24px;
    bottom: 30%;
    opacity: .9;
  }
}

/* =============================================================
   Responsive polish v2 — tablet zone + mobile UX refinements
   Layered after the original breakpoints so it can refine without
   rewriting them. Targets the 721–960px gap (iPad portrait,
   landscape phones, small tablets) and tightens touch UX.
   ============================================================= */

/* ── iOS safe-area insets — float as a FLOOR alongside the responsive
      clamp() values so wide screens keep their generous gutters and
      iOS notch/home-bar still gets respected.                       ── */
@supports (padding: max(env(safe-area-inset-left), 0px)) {
  .nav,
  .nav__sheet-inner {
    padding-left: max(env(safe-area-inset-left), clamp(20px, 4vw, 64px));
    padding-right: max(env(safe-area-inset-right), clamp(20px, 4vw, 64px));
  }
  .footer {
    padding-left: max(env(safe-area-inset-left), clamp(24px, 4vw, 64px));
    padding-right: max(env(safe-area-inset-right), clamp(24px, 4vw, 64px));
  }
  .hero,
  .hero.hero--v2 {
    padding-left: max(env(safe-area-inset-left), clamp(20px, 4vw, 64px));
    padding-right: max(env(safe-area-inset-right), clamp(20px, 4vw, 64px));
  }
}

/* ============================================================
   Tablet zone (721–960px) — narrow tablets, iPad portrait,
   landscape phones. Collapse desktop nav, stack editorial
   columns, soften padding. Bounded below by 721px so the
   stricter mobile rules in @media (max-width: 720px) win
   despite coming earlier in source order.
   ============================================================ */
@media (min-width: 721px) and (max-width: 960px) {
  /* Nav — switch to burger before desktop layout gets cramped */
  .nav { padding: 16px 24px; min-height: 60px; }
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__burger { display: flex; }

  /* About — drop the sticky label rail, stack vertically */
  .about-block {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: clamp(28px, 4vw, 40px) 0;
  }
  .about-block__label {
    position: static;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
  }
  .about-page {
    padding: clamp(40px, 5vw, 64px) clamp(20px, 4vw, 40px) clamp(48px, 6vw, 80px);
  }
  .about-expertise__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .about-expertise__list {
    gap: 40px;
    padding-top: 24px;
  }
  .about-pillar__name {
    font-size: clamp(28px, 4.4vw, 38px);
    white-space: normal;
    line-height: 1.08;
  }

  /* Referenzen — drop the sticky label rail */
  .ref-page {
    padding: clamp(40px, 5vw, 64px) clamp(20px, 4vw, 40px) clamp(32px, 4vw, 48px);
  }
  .ref-group {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: clamp(28px, 4vw, 40px) 0;
  }
  .ref-group__head {
    position: static;
    flex-direction: row;
    align-items: baseline;
    gap: 16px;
    padding-top: 6px;
  }
  .ref-group__list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(20px, 3vw, 32px);
  }

  /* Section padding tighter on tablet so content doesn't feel marooned */
  .section {
    padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 40px);
  }

  /* Hero v2 — meta row breathes on tablet portrait */
  .hero.hero--v2 .hero__meta-row {
    flex-wrap: wrap;
    gap: 12px 24px;
  }
  .hero.hero--v2 .hero__title {
    font-size: clamp(40px, 9vw, 96px);
  }

  /* Karriere intro/list comfortable inset on tablet */
  .karriere-list {
    padding-left: clamp(20px, 4vw, 40px);
    padding-right: clamp(20px, 4vw, 40px);
    margin-left: 0;
    margin-right: 0;
  }
  .karriere-list .section[style],
  .karriere__intro {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ============================================================
   Mobile refinements (≤ 720px) — touch tap targets,
   ghost watermark restraint, modal sizing
   ============================================================ */
@media (max-width: 720px) {
  /* Restrain the hero ghost so it never crowds the headline */
  .hero.hero--v2 .hero__ghost {
    bottom: clamp(-24px, -2vw, 0px);
    right: clamp(-48px, -6vw, -16px);
    font-size: clamp(140px, 42vw, 220px);
    opacity: .5;
  }

  /* Touch targets — links and buttons get tap-friendly height */
  .nav__cta,
  .nav__sheet-cta,
  .hero__cta,
  .footer__cta,
  .karriere-detail__cta,
  .nl-submit {
    min-height: 48px;
    padding-top: 0;
    padding-bottom: 0;
    align-items: center;
    line-height: 1;
  }
  .nav__sheet-link {
    padding: 10px 0;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
  }
  .footer__link-row {
    min-height: 44px;
    padding: 12px 0;
  }
  .nl-field {
    min-height: 48px;
    font-size: 16px; /* iOS: prevent zoom-on-focus */
  }

  /* Newsletter modal — fits short viewports & uses dynamic viewport */
  .nl-modal {
    align-items: flex-end;
    padding: 0;
  }
  .nl-modal__panel {
    border-radius: 14px 14px 0 0;
    max-height: 92dvh;
    max-height: 92vh;
  }
  .nl-modal__panel .newsletter { border-radius: 14px 14px 0 0; padding: 32px 22px 28px; }
  .nl-modal__close {
    top: 8px; right: 12px;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* Karriere row — let meta breathe on very narrow */
  .karriere-row__meta { line-height: 1.45; }
  .karriere-row__title-wrap { row-gap: 6px; }

  /* Hero meta chip — wrap-safe on tiny widths */
  .hero.hero--v2 .hero__locations {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .hero.hero--v2 .hero__locations-label::after { display: none; }

  /* Legal pages — comfortable read on phones */
  .legal__body p,
  .legal__list {
    font-size: 15px;
    line-height: 1.7;
  }
  .section.legal {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* About anchor eyebrow wraps gracefully */
  .about-anchor__eyebrow span {
    display: inline;
  }
}

/* ============================================================
   Compact phones (≤ 380px) — iPhone SE / mini class
   ============================================================ */
@media (max-width: 380px) {
  .nav { padding: 14px 18px; }
  .hero { padding: 22px 18px 28px; }
  .hero.hero--v2 { padding: 20px 18px 30px; }
  .hero.hero--v2 .hero__title {
    font-size: clamp(26px, 9.5vw, 36px);
  }
  .hero.hero--serif .hero__title {
    font-size: clamp(44px, 16vw, 60px);
  }
  .section { padding: 44px 18px; }
  .about-page,
  .ref-page,
  .karriere-list {
    padding-left: 18px;
    padding-right: 18px;
  }
  .footer { padding: 48px 18px 24px; }
  .ref-group__list { grid-template-columns: 1fr; }
  .nav__sheet-inner { padding: 88px 22px 32px; }
  .nav__sheet-link { font-size: 28px; }
  .about-expertise__list { gap: 28px; }
  .about-pillar__name { font-size: clamp(24px, 7.6vw, 30px); }
}

/* ============================================================
   Landscape phones (short viewports) — keep hero usable
   ============================================================ */
@media (max-height: 520px) and (orientation: landscape) {
  .hero,
  .hero.hero--v2 {
    min-height: auto;
    padding-top: 18px;
    padding-bottom: 28px;
  }
  .hero__text { margin-top: 28px; }
  .hero.hero--v2 .hero__ghost { display: none; }
  .nav__sheet-inner {
    padding: 72px 24px 24px;
    gap: 18px;
  }
  .nav__sheet-link { font-size: 24px; }
}

/* ============================================================
   Global guardrails — keep long words from breaking layouts
   ============================================================ */
.hero__title,
.footer__contact-title,
.about-pillar__name,
.ref-name__text,
.page-title,
.karriere-row__title {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Images & embeds always fluid */
img, svg, video, iframe {
  max-width: 100%;
  height: auto;
}
.nav__logo img { height: 14px; width: auto; }


/* =============================================================
   Mobile menu — redesigned: solid, considered, on-brand
   (overrides the earlier nav__sheet rules)
   ============================================================= */
.nav__sheet {
  position: fixed;
  inset: 0;
  background: var(--bg-page);
  z-index: 30;
  display: none;
  animation: none;
}
/* Show only when the nav is open AND we're in burger territory */
.nav--open .nav__sheet { display: flex; }
@media (min-width: 961px) { .nav--open .nav__sheet { display: none; } }

.nav__sheet-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: calc(env(safe-area-inset-top, 0px) + 84px) clamp(20px, 6vw, 44px) calc(env(safe-area-inset-bottom, 0px) + 28px);
  gap: 0;
  opacity: 1;
}

.nav__sheet-list { display: flex; flex-direction: column; }
.nav__sheet-link {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: baseline;
  column-gap: 14px;
  padding: clamp(16px, 2.6vh, 22px) 0;
  border-bottom: 1px solid var(--border-hair);
  text-decoration: none;
  cursor: pointer;
  color: var(--jka-ink);
}
.nav__sheet-list .nav__sheet-link:first-child { border-top: 1px solid var(--border-hair); }
.nav__sheet-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  color: var(--jka-green-60);
  transform: translateY(-2px);
}
.nav__sheet-label {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(27px, 7.4vw, 34px);
  line-height: 1.02;
  letter-spacing: -.01em;
}
.nav__sheet-go {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--jka-green);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.nav__sheet-link.active .nav__sheet-label { color: var(--jka-green); }
.nav__sheet-link.active .nav__sheet-num { color: var(--jka-green); }
.nav__sheet-link.active .nav__sheet-go,
.nav__sheet-link:hover .nav__sheet-go { opacity: 1; transform: none; }

.nav__sheet-foot {
  margin-top: auto;
  padding-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.nav__sheet-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.nav__sheet-meta-label { color: var(--jka-green-60); }
.nav__sheet-meta-val { color: var(--jka-green); }
.nav__sheet-social {
  display: flex;
  gap: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.nav__sheet-social a { color: var(--jka-ink); text-decoration: none; display: inline-flex; gap: 5px; }
.nav__sheet-social a:hover { opacity: .6; }
.nav__sheet-cta {
  align-self: flex-start;
  background: var(--jka-green);
  color: var(--jka-cream);
  border-radius: var(--r-pill);
  padding: 14px 30px;
  font-family: var(--font-sans);
  font-size: 15px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.nav__sheet-cta:hover { opacity: .88; }

/* When the menu is open, lift the bar's logo/X above the sheet & keep bar solid.
   Dropping backdrop-filter is essential: it establishes a containing block that
   would otherwise trap the position:fixed sheet inside the 60px nav bar. */
.nav--open {
  background: var(--bg-page);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.nav--open .nav__logo, .nav--open .nav__burger { position: relative; z-index: 50; }

@media (max-height: 560px) {
  .nav__sheet-inner { padding-top: 72px; }
  .nav__sheet-link { padding: 12px 0; }
  .nav__sheet-label { font-size: 24px; }
}

/* Karriere accordion — static markup, CSS-gated open state */
.karriere-item:not(.is-open) .karriere-detail { display: none; }
/* Don't gate detail visibility on a once-run entrance animation (it can hang at opacity:0) */
.karriere-detail { animation: none; opacity: 1; transform: none; }

/* Burger → X: transition only opacity so the rotate applies reliably
   (transitioning transform from `none` can fail to settle on the end value). */
.nav__burger span { transition: opacity var(--dur-fast) var(--ease-out); }
.nav.nav--open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.nav--open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.nav--open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   404 — Seite nicht gefunden
   ============================================================ */
.notfound {
  min-height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(48px, 8vh, 140px) clamp(24px, 4vw, 64px);
}
.notfound__code {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: 24px;
}
.notfound__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(40px, 8vw, 104px);
  line-height: 1.02;
  letter-spacing: var(--ls-heading);
  color: var(--jka-green);
  margin: 0 0 20px;
}
.notfound__text {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--type-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  margin: 0 0 36px;
  max-width: 48ch;
}
.notfound__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--jka-green);
  text-decoration: none;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 14px 24px;
  transition: background var(--dur-base, .25s) var(--ease-out, ease), color var(--dur-base, .25s) var(--ease-out, ease);
}
.notfound__cta:hover {
  background: var(--jka-green);
  color: var(--jka-cream);
}