/* ===========================================================================
   Solution Lab Rur Erft — site styles
   Palette: navy, teal, cyan, white. One radius, two elevation levels.
   ========================================================================= */

/* ---------- fonts ---------- */
@font-face {
  font-family: "Helmholtz";
  src: url("../fonts/HelmholtzHalvarMittel-Rg.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hermann";
  src: url("../fonts/Hermann-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --navy: #002864;
  --navy-deep: #001b45;
  --teal: #05e5ba;
  --cyan: #14c8ff;
  --white: #ffffff;

  --ink: #12233a;
  --ink-soft: #41546b;
  --line: #dde5ee;

  --on-dark: #e6eef7;
  --on-dark-soft: #b9cde2;
  --link-dark: #9fe8ff;

  --sh-1: 0 1px 2px rgba(0, 27, 69, 0.06), 0 6px 18px rgba(0, 27, 69, 0.08);
  --sh-2: 0 2px 4px rgba(0, 27, 69, 0.08), 0 16px 36px rgba(0, 27, 69, 0.16);
  --sh-dark: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 18px 40px rgba(0, 0, 0, 0.45);
  /* sticky chrome (nav, mobile menu): sits over content, needs its own level */
  --sh-nav: 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 27, 69, 0.22);

  /* edges: 10px = every surface and photo, 999px = pills/buttons only,
     50% = avatars only, 0 = full-bleed (hero, band dividers) */
  --r: 10px;
  --maxw: 1080px;
  --hero-tint: 0.28;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: "Helmholtz", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Hermann", "Helmholtz", serif;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin: 0 0 0.6rem;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 4.4vw, 3.3rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 1rem; }
h3 { font-size: 1.35rem; margin-top: 2.4rem; }
h4 { font-size: 1.05rem; }

p {
  margin: 0 0 1.05em;
  /* full-width bands otherwise run to ~110 characters per line */
  max-width: 70ch;
}
p:last-child { margin-bottom: 0; }

img { max-width: 100%; height: auto; }

a {
  color: var(--navy);
  text-decoration-color: var(--teal);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover { color: #0b7f8f; }

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

ul, ol { margin: 0 0 1.05em; padding-left: 1.3em; }
li { margin-bottom: 0.25rem; }
/* Square bullets are part of the identity. Drawn rather than left to
   ::marker, because a marker cannot be made chunkier than the glyph it
   belongs to. Scoped to content lists; navigation, reference items and the
   parts grid opt out below. */
main ul {
  list-style: none;
  padding-left: 0;
}
main ul li {
  position: relative;
  padding-left: 1.05em;
}
main ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 0.46em;
  height: 0.46em;
  border-radius: 1px;
  background: var(--teal);
}
/* opt-outs */
.ref-list li { padding-left: 0; }
.ref-list li::before { content: none; }
.parts li { padding-left: 20px; }
.parts li::before { content: none; }

/* deep links (#how, #news, #team, #demo, ...): land below the sticky navbar.
   72px clears the 60px desktop bar and the 56px phone bar with a little air. */
[id] { scroll-margin-top: 72px; }

/* ---------- layout ---------- */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(36px, 5.5vw, 76px) clamp(18px, 4vw, 56px);
}

.bg-1 {
  background: var(--navy);
  color: var(--on-dark);
}
.bg-1 h1, .bg-1 h2, .bg-1 h3, .bg-1 h4 { color: var(--white); }
/* :not(.btn) - a button on a dark band keeps its own text colour */
.bg-1 a:not(.btn) { color: var(--link-dark); }
.bg-1 a:not(.btn):hover { color: var(--white); }

.bg-2 {
  background: var(--white);
  color: var(--ink);
}

/* ---------- skip link ---------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--teal);
  color: var(--navy);
  padding: 10px 16px;
  font-weight: 700;
  z-index: 100;
}
.skip:focus { left: 8px; top: 8px; }

/* ---------- navigation ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--sh-nav);
}

.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 56px);
  height: 60px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  font-family: "Hermann", serif;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  color: var(--white);
  text-decoration: none;
}
.brand:hover { color: var(--teal); }

.navlinks {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
  font-size: 0.93rem;
}

.navlinks li { margin: 0; }

.navlinks a {
  color: var(--white);
  text-decoration: none;
  opacity: 0.86;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  display: inline-block;
}
.navlinks a:hover { opacity: 1; border-bottom-color: var(--teal); }

.nav-badge img {
  display: block;
  height: 26px;
  width: auto;
}

.navburger {
  display: none;
  margin-left: auto;
  width: 40px;
  height: 40px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.navburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 74vh;
  display: flex;
  align-items: center;
  color: var(--white);
  background-image: url("../img/banner/PXL_20210715_143145623.MP_preview.jpeg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  isolation: isolate;
}
/* No full-canvas overlay: the photograph stays at full brightness so the
   river reads. Contrast comes from a soft patch of darkness that sits only
   behind the type and fades out well before the middle of the image. */

/* A light flat tint, no gradient: enough to settle the brightest water
   without dimming the photograph. Tune with --hero-tint (0 = none). */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 14, 32, var(--hero-tint, 0.28));
}

.hero-inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(40px, 8vh, 90px) clamp(18px, 4vw, 56px);
}

.hero h1 {
  color: var(--white);
  margin-bottom: 12px;
}

/* no tint on the photograph: the type separates itself from the image with
   a layered shadow - a tight dark edge plus a soft halo. Each glyph darkens
   its own immediate backdrop, which is what the eye needs. */
.hero h1,
.hero-sub,
.hero-by {
  text-shadow:
    0 2px 6px rgba(0, 10, 24, 0.7),
    0 8px 22px rgba(0, 10, 24, 0.55),
    0 18px 46px rgba(0, 10, 24, 0.42);
}
.hero .btn--ghost { text-shadow: 0 2px 6px rgba(0, 10, 24, 0.5); }

.hero-sub {
  font-size: clamp(1.02rem, 1.8vw, 1.22rem);
  color: #dce8f4;
  max-width: 46ch;
  margin-bottom: 10px;
}

/* the initiative, folded in where the eyebrow used to be */
.hero-by {
  font-size: 0.92rem;
  color: #b9cde2;
  max-width: 46ch;
  margin-bottom: 26px;
}
.hero-by a { color: var(--link-dark); text-decoration-color: var(--teal); }
.hero-by a:hover { color: var(--white); }

/* ---------- buttons ----------
   Buttons are for the hero's primary actions only. In-content next steps
   are text links, so they read like "All news" and "Team and stakeholders". */
.btn {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 0.94rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease,
    border-color 150ms ease, color 150ms ease;
}
.btn--solid {
  background: var(--teal);
  color: var(--navy);

}
.btn--solid:hover {
  color: var(--navy);
  background: #00cfa6;
  transform: translateY(-1px);
}
.btn--ghost {
  /* over a photograph an outline alone disappears: a translucent fill keeps
     the pill and its label visible on any part of the image, while still
     reading as the secondary action next to the solid teal button */
  background: rgba(0, 14, 32, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: var(--white);
  margin-left: 8px;
}
.btn--ghost:hover {
  background: rgba(0, 14, 32, 0.75);
  border-color: var(--teal);
  color: var(--teal);
}

.btn-row { margin: 0; }

/* emphasis inside body copy: bold only, same colour as the text around it.
   Colour is reserved for links. */
.slre-concept { color: inherit; }

/* Helmholtz ships a single weight (400), so bold has to be built rather than
   requested. Asking for 700 AND stroking the glyphs did both jobs at once:
   2.2x the ink of regular text, and that double thickness is what smeared on
   dark text. The stroke alone carries the weight now, in em so that small
   labels thicken by the same proportion as body copy (0.48px at 17px, 0.32px
   on the 11.5px pills). No synthetic weight on top, no change in size. */
strong,
b,
.ref-title,
.slre-concept,
.ref-link,
.person-name,
.pill {
  font-weight: 400;
  -webkit-text-stroke: 0.028em currentColor;
}

/* ---------- surfaces ----------
   One box, two bands, one attention variant.
   Used by: model cards, news feature, reference items, legal panel. */
.box {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
}
.box--dark {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}
.box--attention { border-left: 3px solid var(--teal); }
/* a light box keeps light-band colours even when it sits on a navy band */
.box { color: var(--ink); }
.box h1, .box h2, .box h3, .box h4, .box h5, .box h6 { color: var(--navy); }
.box--dark { color: var(--on-dark-soft); }
.box--dark h1, .box--dark h2, .box--dark h3, .box--dark h4 { color: var(--white); }

/* ---------- news ---------- */
/* the whole card sits in the softer tone. Paragraphs were the only things
   that got it, so a list at the end of the same card came out darker than the
   text above it. Headings keep their navy through .box h*. */
.news-featured {
  padding: 24px 26px;
  margin-top: 1.5rem;
  color: var(--ink-soft);
}

/* Attention surfaces (news feature, references): 10px radius, 1px border,
   and a 3px teal left border. A border - unlike a pseudo-element or an inset
   shadow - is drawn along the corner arc, so the strip meets the curve. */

.news-header { margin-top: 2.4rem; }
.news-featured .news-header { margin-top: 0; }
/* the home teaser puts a paragraph straight under the header, while the news
   page has a .row there which carries 1.2rem of its own. Same gap in both. */
.news-featured .news-header + p { margin-top: 1.2rem; }

/* ---- labels: one shape, three tones, one size ---- */
.pill {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.72rem;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}
.pill--solid { background: var(--navy); color: var(--white); }
.pill--ghost {
  color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--line);
}
/* language labels (EN / DE) keep one tone wherever they appear: sources,
   outputs, product cards */
.pill--lang,
.pill--accent { background: var(--teal); color: var(--navy); }
.bg-1 .pill--ghost {
  color: var(--white);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.news-header .pill { margin: 0 6px 8px 0; }
.ref-list .pill { margin-right: 8px; }

.news-title {
  font-size: 1.22rem;
  margin: 0;
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 1.2rem;
}
.col-sm-6 { min-width: 0; }

/* every non-full-bleed image shares the surface radius */
.row figure img,
.split figure img,
figure > img { border-radius: var(--r); display: block; }

/* deliberate exceptions: avatars (50 %) and the full-bleed hero (0) */

figure { margin: 0; }
figcaption {
  font-size: 0.86rem;
  color: var(--ink-soft);
  margin-top: 8px;
}
.bg-1 figcaption { color: var(--on-dark-soft); }

/* ---------- cards / models ---------- */
.model-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
  margin-top: 1.8rem;
}

.model-card { grid-column: span 2; }
.model-card:nth-child(4) { grid-column: 2 / span 2; }
.model-card:nth-child(5) { grid-column: 4 / span 2; }

.model-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.model-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
}

.model-card-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.model-card-body {
  padding: 16px 18px 20px;
  flex: 1;
}

.model-card-title {
  font-size: 1rem;
  margin: 0 0 6px;
}

.model-card-body ul {
  margin: 0;
  padding-left: 17px;
  /* 1rem = 16 px: the size the Transfer-by-Design cards render their body
     copy at (18 user units at 0.89 scale, 1280 px viewport). rem resolves
     against the 16 px root, not the 17 px body. The SVG shrinks with its
     panel, the HTML list does not, so below ~1200 px the cards run slightly
     larger than the diagram. */
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ---------- split (storylines / ISR) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  margin-top: 1.4rem;
}

.split figure { margin: 0; }

.split--reverse .split-media { order: 2; }

.split img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r);
}

/* ---------- figure: transfer by design ---------- */
.tbd {
  margin: 2rem 0 2.4rem;
}
/* white cards need a dark ground; on a light band the figure brings its own */
.tbd-panel {
  background: var(--navy-deep);
  border-radius: var(--r);
  padding: clamp(12px, 2.2vw, 26px);
}
.tbd svg {
  display: block;
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin: 0 auto;
}
.tbd .node rect { fill: #ffffff; }
.tbd .node-title { fill: var(--navy); font-family: "Hermann", serif; }
.tbd .node-kicker {
  fill: #0b8f79;
  font-family: "Helmholtz", sans-serif;
  letter-spacing: 0.08em;
}
.tbd .node-body { fill: var(--ink-soft); font-family: "Helmholtz", sans-serif; }
.tbd .flow { fill: none; stroke: var(--teal); stroke-width: 5; stroke-linecap: round; }
.tbd .flow-head { fill: var(--teal); }
/* rect.node-bullet, not .node-bullet: ".tbd .node rect" paints every rect
   in a card white, which out-specifies a plain class selector */
.tbd .node rect.node-bullet { fill: var(--teal); }
.tbd .hub-ring { fill: var(--navy); stroke: var(--teal); stroke-opacity: 0.85; stroke-width: 3.5; }
.tbd .hub-title { fill: #ffffff; font-family: "Hermann", serif; }

/* ---------- logo clouds ---------- */
.logo-cloud {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px 26px;
  align-items: center;
  justify-items: center;
  margin: 1.6rem 0 2rem;
  padding: 0;
}

.logo-cloud .stake-logo {
  max-width: 100%;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
/* full colour at rest; the feedback is a small lift */
.logo-cloud .stake-logo:hover {
  transform: translateY(-3px);
}

/* flush with the text: first logo on the left edge, last on the right */
.logo-cloud.partners {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  margin-left: 0;
  margin-right: 0;
}
.logo-cloud.partners .stake-logo { min-width: 0; }
.logo-cloud.partners .stake-logo {
  max-height: 56px;
  /* width cap: without it the 6:1 GFZ wordmark grows to 345 px at 56 px tall
     and pushes the row onto a second line */
  max-width: 240px;
}
/* KIT is a compact, heavy mark: equal height reads visually larger than the wordmarks */
.logo-cloud.partners .stake-logo:nth-child(3) { max-height: 48px; }

/* ---------- people ---------- */
.person-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem;
  margin: 1.4rem 0 0;
}

/* deliberately unboxed: cards imply clickable media, people are not */
.person-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  max-width: 220px;
}

.person-photo {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin-bottom: 8px;
  background: var(--line);
}

.person-name {
  margin: 0;
  color: var(--navy);
}
.person-role {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--ink-soft);
  margin: 0;
}
.person-affiliation {
  font-size: 0.86rem;
  color: var(--ink-soft);
  margin: 0;
}
.person-email {
  font-size: 0.86rem;
  margin: 2px 0 0;
}

/* ---------- references ---------- */
.ref-list {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.ref-list li {
  padding: 14px 18px;
  font-size: 0.94rem;
  line-height: 1.55;
  margin: 0;
}

.ref-authors { color: var(--ink-soft); }
.ref-title { color: var(--navy); }
.ref-venue { color: var(--ink-soft); font-style: italic; }

.ref-link {
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}
.ref-link:hover { color: #0a7d6c; text-decoration: underline; }

/* ---------- footer / legal ---------- */
footer {
  background: var(--navy-deep);
  color: var(--on-dark-soft);
  padding: 34px clamp(18px, 4vw, 56px);
  font-size: 0.86rem;
}

.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: baseline;
}
.footer-inner p { margin: 0; }
.footer-spacer { flex: 1 1 40px; }
/* footer sits outside .bg-1, so it needs its own link colour:
   without this, links inherit a { color: navy } on navy */
footer a { color: var(--white); }
footer a:hover { color: var(--teal); }

.legal-body {
  padding: clamp(20px, 3vw, 34px);
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.7;
}
.legal-body h3 { font-size: 1.05rem; margin-top: 1.8rem; }
.legal-body h3:first-child { margin-top: 0; }
.legal-body h4 { font-size: 0.95rem; margin-top: 1.2rem; }
.legal-body ul { margin-bottom: 1em; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .model-grid { grid-template-columns: repeat(2, 1fr); }
  .model-card,
  .model-card:nth-child(4),
  .model-card:nth-child(5) { grid-column: auto; }
  .logo-cloud { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split--reverse .split-media { order: 0; }
}

@media (max-width: 820px) {
  .nav-inner { height: 56px; }
  .navburger { display: flex; }
  .navlinks {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 56px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px clamp(18px, 4vw, 56px) 16px;
    background: var(--navy);
    box-shadow: var(--sh-nav);
  }
  .navtoggle:checked ~ .navlinks { display: flex; }
  .navlinks a { padding: 10px 0; width: 100%; }
  .nav-badge { padding-top: 10px; }

  .row { grid-template-columns: 1fr; gap: 20px; }
  .hero { min-height: 62vh; }
  .logo-cloud.partners { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .model-grid { grid-template-columns: 1fr; }
  .logo-cloud { grid-template-columns: repeat(2, 1fr); }
  .btn--ghost { margin-left: 0; margin-top: 10px; }
  .logo-cloud { gap: 20px; }
  .logo-cloud .stake-logo { max-height: 46px; max-width: 140px; }
  .logo-cloud.partners .stake-logo { max-height: 56px; }
  .person-grid { gap: 1.8rem; }
  .person-card { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---------- sub-page header ---------- */
.page-head.bg-1 h1 { color: var(--white); }
.page-head .container {
  padding-top: clamp(26px, 3.6vw, 52px);
  padding-bottom: clamp(22px, 3vw, 38px);
}
.page-head h1 { margin-bottom: 6px; }
.page-head p {
  color: var(--on-dark-soft);
  font-size: 1.06rem;
  max-width: 62ch;
  margin: 0;
}

/* ---------- the three parts, summarised on the home page ---------- */
.parts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
  margin: 1.6rem 0 1.9rem;
  padding: 0;
}
.parts li {
  padding: 18px 20px;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--on-dark-soft);
}
.parts strong {
  display: block;
  font-family: "Hermann", serif;
  font-size: 1.02rem;
  color: var(--white);
  margin-bottom: 6px;
}
@media (max-width: 760px) {
  .parts { grid-template-columns: 1fr; }
}

/* ---------- tables (synthesis) ----------
   The synthesis carries two tables that have to survive a narrow screen.
   They live in a scroll wrapper rather than being collapsed into cards. */
.table-wrap {
  margin: 1.5rem 0 1.8rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
}
.tbl {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.5;
}
.tbl th {
  text-align: left;
  font-family: "Hermann", serif;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
  background: #f2f7fc;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: bottom;
}
.tbl td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .num { width: 1%; white-space: nowrap; }
.tbl .nowrap { white-space: nowrap; }

/* ---------- quote (synthesis voices) ----------
   Same 3 px teal edge as .box--attention, no surface behind it. */
.quote {
  border-left: 3px solid var(--teal);
  padding: 2px 0 2px 22px;
  margin: 1.3rem 0 1.6rem;
}
.quote p {
  font-size: 1.06rem;
  line-height: 1.55;
  margin-bottom: 0.7rem;
}
.quote cite {
  font-style: normal;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.bg-1 .quote cite { color: var(--on-dark-soft); }

/* ---------- table of contents (synthesis) ---------- */
.toc {
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 36px;
  font-size: 0.96rem;
}
.toc li { padding-left: 0; margin-bottom: 0.35rem; }
.toc li::before { content: none; }
@media (max-width: 760px) { .toc { columns: 1; } }

/* ---------- transfer-by-design on small screens ----------
   SVG text scales with the viewBox, so at phone width the box copy drops
   below legibility no matter how large the font-size is set. Below 760 px
   the diagram gives way to the same content as stacked cards. */
.tbd-cards { display: none; }

@media (max-width: 900px) {
  .tbd svg.tbd-svg { display: none; }

  .tbd-cards {
    display: grid;
    gap: 12px;
    padding: 4px;
  }
  .tbd-cards .tbd-hub {
    margin: 0 0 2px;
    text-align: center;
    font-family: "Hermann", serif;
    font-size: 1.05rem;
    color: var(--white);
  }
  .tbd-cards .tbd-card {
    background: var(--white);
    border-radius: var(--r);
    padding: 16px 18px;
    color: var(--ink);
  }
  .tbd-cards .tbd-card h4 {
    margin: 0 0 4px;
    font-size: 1.02rem;
  }
  .tbd-cards .tbd-card .kicker {
    margin: 0 0 10px;
    font-family: "Helmholtz", sans-serif;
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0b8f79;
  }
  .tbd-cards ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.95rem;
    line-height: 1.55;
  }
  .tbd-cards li {
    margin-bottom: 4px;
    padding-left: 18px;
    color: var(--ink);
  }
  .tbd-cards li:last-child { margin-bottom: 0; }
  .tbd-cards li::before { top: 0.62em; }
}

/* ---------- generic content card ----------
   .box carries the surface, this carries the padding and drops the leading
   margin of the first heading so cards line up on a grid. */
.card { padding: 24px 26px; }
.card > h3, .card > h4 { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 1.4rem;
}
@media (max-width: 760px) { .card-grid { grid-template-columns: 1fr; } }
.card .status { margin: 0 0 10px; }
.card .status .pill { margin-right: 6px; }

/* ---------- team block ----------
   Partners, Stakeholders and Coordination are three shelves of the same
   page, and each one is a wall of logos or cards. The global 2.4rem above
   an h3 reads as a caption on the block before it; these get room to
   breathe. The first one sits under the Team heading, so it starts closer. */
#team h2 + h3 { margin-top: 1.9rem; }
#team h3 { margin-top: 4.4rem; }
#team .logo-cloud { margin-bottom: 0; }
#team .person-grid { margin-top: 1.6rem; }

@media (max-width: 760px) {
  #team h3 { margin-top: 3.2rem; }
}

/* ---------- language switch ----------
   One more nav item before the Helmholtz badge. The two codes sit close
   together so they read as one control, and the active language carries the
   same teal underline a hovered nav link gets. */
.nav-lang { display: flex; align-items: center; gap: 5px; letter-spacing: 0.06em; }
.nav-lang .sep { opacity: 0.5; }
.nav-lang a[aria-current] { opacity: 1; border-bottom-color: var(--teal); }