/* ===========================================================================
   rencolab website — global stylesheet
   Layer order: fonts → design tokens → reset → base → layout → components
   =========================================================================== */

/* --- Fonts ----------------------------------------------------------------
   Light (300) fordert derzeit keine Regel an. Es bleibt trotzdem hier: die
   Datei liegt ohnehin in fonts/, und @font-face lädt nichts, solange niemand
   das Gewicht setzt — der Vorrat kostet also keinen Transfer, nur die fünf
   Zeilen. Absicht, kein Rest einer gelöschten Regel. */
@font-face {
  font-family: 'KoHo';
  src: url('/fonts/KoHo-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'KoHo';
  src: url('/fonts/KoHo-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'KoHo';
  src: url('/fonts/KoHo-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'KoHo';
  src: url('/fonts/KoHo-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'KoHo';
  src: url('/fonts/KoHo-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Nova Round';
  src: url('/fonts/NovaRound-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* --- Design tokens -------------------------------------------------------- */
/* The site is dark only — there is no light theme and no toggle. Every role
   below is defined once, against the dark ground. */
:root {
  color-scheme: dark;

  /* rencolab brand palette (shared with the ETC/EMC frontends) */
  --c-white: #f7f7f7;
  --c-dark-blue: #192435;
  --c-petrol-blue: #063f5b;
  --c-light-blue: #409eba;
  --c-dark-orange: #e24a1b;
  --c-light-orange: #ee8f49;
  --c-light-peach: #f6ebe4;

  /* Semantic roles — components reference these, never the raw palette.
     One dark ground throughout and an opaque card surface that reads on it.
     Petrol blue enters only through the gradients, which reach for
     --c-petrol-blue directly. */
  --bg: var(--c-dark-blue);
  --surface: color-mix(in srgb, var(--c-white) 6%, var(--c-dark-blue));
  --surface-raised: color-mix(in srgb, var(--c-white) 10%, var(--c-dark-blue));

  --text: var(--c-white);
  --text-muted: color-mix(in srgb, var(--c-white) 70%, transparent);
  /* Dark ink for text sitting *on* an accent fill — white on orange is 2.3:1. */
  --ink: var(--c-dark-blue);

  /* Light orange is the accent that carries text: 6.4:1 on the ground, 4.6:1 on
     petrol. Dark orange reaches only 2.8:1 on petrol, so it decorates — rules,
     gradients, glows — and never sets type. */
  --accent: var(--c-light-orange);
  --accent-strong: var(--c-dark-orange);

  /* The three-colour brand lockup (slogan, product name) is the one place dark
     orange sets type. It is legal only there because a lockup is always large
     text, where the floor is 3:1 and dark orange measures 3.89:1 on the ground. */
  --lockup-1: var(--c-dark-orange);
  --lockup-2: var(--c-light-orange);
  --lockup-3: var(--c-light-blue);

  /* The lockup as a gradient, top to bottom. Not in use right now — it was the
     hover ring on .post-link and .sector-card — and kept here so it can come
     back without being re-derived. */
  --gradient-lockup: linear-gradient(180deg, var(--lockup-1), var(--lockup-2), var(--lockup-3));

  --border: color-mix(in srgb, var(--c-light-blue) 25%, transparent);
  --border-strong: color-mix(in srgb, var(--c-light-blue) 50%, transparent);
  --shadow: 0 0.75rem 1.75rem rgba(4, 10, 18, 0.55);

  /* The brand icons are full-colour and contain navy, so they keep their own
     light tile instead of dissolving into the ground. */
  --icon-tile: var(--c-light-peach);

  --font-body: 'KoHo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Nova Round', 'KoHo', system-ui, sans-serif;

  /* Small-text scale. Six fixed steps at 16px root, named by their pixel size
     so a call site cannot drift to a neighbouring value by accident. Anything
     larger than body text is a one-off heading size and stays literal.

     --fs-10 zieht derzeit keine Regel. Es bleibt als Stufe der Skala stehen,
     damit die sechs Schritte lückenlos sind und der nächste Bedarf an 10px
     nicht als Literal neben der Skala landet. Absicht, kein toter Rest. */
  --fs-10: 0.625rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;

  /* Uppercase tracking, in two steps paired to the size scale above. Caps need
     the optical gap between letters to stay roughly constant in absolute terms,
     so the em value has to rise as the type gets smaller. Check that the numbers
     agree at the call site: a label set in --fs-13 takes --caps-10-13. */
  --caps-14-16: 0.07em;
  --caps-10-13: 0.1em;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 4.5rem;

  /* Radius ladder. The step follows what the element *is*, never which section
     it happens to sit in: sm for controls and for anything nested inside a
     card, lg for the cards and panels that sit in a content grid, xl for the
     full-width panels that bridge or close a section. A child's radius is
     never larger than its parent's. pill and round are shapes, not steps, and
     are not interchangeable: 50% resolves per axis, so it only reads as a
     circle on a square box, while a pill needs a radius past half its own
     height. */
  --radius-sm: 0.5rem;
  --radius-lg: 1.25rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;
  --radius-round: 50%;
  --header-height: 4.5rem;
  --content-width: 72rem;
  --transition: 160ms ease;
  --transition-card: 300ms ease;
  --ease-reveal: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --- Breakpoints ---------------------------------------------------------
   The whole site reflows at two screen widths and no others:

     60rem (960px)  wide screen → tablet. Every multi-column grid gives up
                    its widest layout here: three-column card grids drop to
                    one column, four-column grids drop to two.
     40rem (640px)  tablet → phone. Anything still showing two columns at
                    that point drops to one.

   Why these two numbers: inside the 72rem container, three columns at a
   60rem viewport leave 18rem per card, which is about as narrow as a card
   with a heading and a paragraph can get before it reads badly. Two columns
   hit the same limit at 40rem.

   A media query cannot read a custom property, so each @media rule has to
   repeat the number and this comment is the only place they are written
   down. When a new section needs to reflow, use 60rem or 40rem. Please do
   not add a third width because one section's cards feel slightly tight
   somewhere in between: that is how this file ended up with five different
   widths (64rem, 60rem, 48rem, 40rem, 36rem), and the effect was that
   shrinking the window broke the page apart one section at a time instead
   of all at once.

   One deliberate exception: .funding-cards holds logos rather than text, so
   it skips the 60rem step and stays three across until 40rem. Narrow logos
   still read fine, and a single full-width logo per row looks empty. */

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

body,
h1,
h2,
h3,
h4,
p,
ul,
figure {
  margin: 0;
}

ul[class] {
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* Das Zurücksetzen deckt genau die Elemente ab, die auf der Website
   vorkommen — kein <ol> und kein <select>. Wer eins davon einbaut, nimmt es
   hier mit auf: sonst behält es die Browser-Vorgaben für Innenabstand,
   Aufzählungszeichen und Schrift. */
button,
input,
textarea {
  font: inherit;
  color: inherit;
}

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

/* --- Base ----------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

::selection {
  background-color: var(--accent);
  color: var(--ink);
}

/* Firefox and WebKit both need telling, or the scrollbar stays light grey. */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--c-light-blue) 55%, transparent) transparent;
}

*::-webkit-scrollbar {
  width: 0.6rem;
  height: 0.6rem;
}

*::-webkit-scrollbar-thumb {
  border-radius: var(--radius-pill);
  background-color: color-mix(in srgb, var(--c-light-blue) 55%, transparent);
}

/* The body is a column so the footer is pushed to the bottom of the viewport
   on pages too short to fill it. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.site-main {
  flex: 1;
}

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
}
h2,
.h1--section {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* Nova Round is reserved for the display sizes. At h3's 1.25rem it reads as a
   novelty face rather than a heading, so the sub-heading level — card titles
   above all — sits in KoHo, at the weight .legal h4 already uses to be a
   heading in the body face. */
h3 {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
}

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

/* --- Layout --------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-sm);
}

.section {
  padding-block: var(--space-xl);
}

.section--fluid {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--c-petrol-blue) 14%, transparent) 0%,
    transparent 55%
  );
}

.section__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* Second heading level inside a section, for a block that belongs to the
   section's h2 but needs its own label — e.g. the reference list under the
   sector cards. Sits lower than an h2 and keeps the section to one h2.
   The top margin is deliberately larger than the gap between the cards it
   follows, so the sub-head reads as the start of a new block rather than as
   a caption glued to the row above. */
.section__subhead {
  margin-top: var(--space-xl);
  color: var(--text-muted);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Shared "eyebrow + heading + lead" sub-title treatment. One size and width
   for every section/hero/page-header lead, so a long sentence doesn't wrap
   onto three lines just because its particular section happened to cap
   narrower. .hero__lead and .page-header__lead only add what's specific to
   their spot (hero keeps its own bottom margin and inherits the hero's
   brighter text color; page-header has no extra rule left at all). */
.section__lead,
.page-header__lead,
.hero__lead {
  max-width: 54rem;
  margin-top: var(--space-sm);
  font-size: 1.1rem;
  line-height: 1.75;
}

.section__lead,
.page-header__lead {
  color: var(--text-muted);
}

.grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-top: var(--space-lg);
}

/* At most three columns, so six cards land as 3 + 3 instead of the 4 + 2 the
   full container width would allow; narrower screens still wrap to 2 and 1. */
.grid--thirds {
  grid-template-columns: repeat(auto-fit, minmax(max(16rem, (100% - 2 * var(--space-md)) / 3), 1fr));
}

/* A lead placed after a card grid closes the section, so it keeps the same
   distance from the cards as the grid keeps from the heading. */
.grid + .section__lead {
  margin-top: var(--space-lg);
}

/* --- Components ----------------------------------------------------------- */
.button {
  display: inline-block;
  padding: 0.7rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background-color: var(--accent);
  color: var(--ink);
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color var(--transition),
    transform var(--transition);
}

.button:hover {
  background-color: color-mix(in srgb, var(--c-white) 18%, var(--accent));
}

.button:active {
  transform: translateY(1px);
}

.button--ghost {
  background-color: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}

.button--ghost:hover {
  background-color: color-mix(in srgb, var(--c-light-blue) 14%, transparent);
  border-color: var(--accent);
}

.card {
  height: 100%;
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  transition: border-color var(--transition-card), box-shadow var(--transition-card);
}

/* A card that only carries text gets a brighter border on hover and nothing
   more — same as .value-card in the hero. The lift is reserved for cards that
   lead somewhere (.card-link, .sector-card, .post-link): there it is the
   promise that a click does something, so it must not be spent on a card
   where a click does nothing. Both kinds turn the border dark orange, and the
   clickable ones add the same 0.25rem lift and shadow. */
.card:hover {
  border-color: var(--accent-strong);
}

.card__title {
  margin-bottom: var(--space-xs);
}

.card__text {
  color: var(--text-muted);
}

/* The caps gesture. Every uppercase label in the file shares the transform and
   the weight from here; only size, tracking and colour are set per component.
   Adding a new caps label means joining this selector list, not restating the
   gesture — that is how the file ended up with four trackings for one idea. */
.eyebrow,
.contact__list dt,
.photo-card__quality,
.post__date {
  font-weight: 600;
  text-transform: uppercase;
}

.eyebrow {
  color: var(--accent);
  font-size: var(--fs-16);
  letter-spacing: var(--caps-14-16);
}

.eyebrow + h1,
.eyebrow + h2 {
  margin-top: 0.5rem;
}

/* Site header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--header-height);
  border-bottom: 1px solid var(--border);
  background-color: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.site-header__logo {
  height: 1.75rem;
  width: auto;
}

.site-header__end {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.site-nav__list {
  display: flex;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__item {
  position: relative;
}

.site-nav__link {
  display: block;
  padding-block: 0.5rem;
  color: var(--text-muted);
  transition: color var(--transition);
}

.site-nav__link:hover,
.site-nav__link--current {
  color: var(--text);
}

.site-nav__link--current {
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* The submenu is a hover disclosure: no JS. It stays reachable by keyboard
   because :focus-visible inside the item holds it open — plain :focus-within
   would also match the lingering focus a mouse click leaves behind, which kept
   the panel open after the pointer had gone. Touch users tap the parent instead
   and get the same list as cards. */
.site-nav__submenu {
  position: absolute;
  top: 100%;
  left: calc(var(--space-sm) * -1);
  z-index: 20;
  display: grid;
  gap: 0.15rem;
  min-width: max-content;
  padding: var(--space-xs);
  margin: 0;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--surface-raised);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.35rem);
  transition:
    opacity var(--transition),
    transform var(--transition),
    visibility var(--transition);
}

.site-nav__item:hover > .site-nav__submenu,
.site-nav__item:has(:focus-visible) > .site-nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-nav__sublink {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  white-space: nowrap;
  transition:
    background-color var(--transition),
    color var(--transition);
}

.site-nav__sublink:hover,
.site-nav__sublink--current {
  background-color: color-mix(in srgb, var(--c-light-blue) 18%, transparent);
  color: var(--text);
}

/* Mobile: one toggle reveals the whole tree, stacked and always expanded.
   The toggle is a checkbox so it needs no script; the input stays in the
   accessibility tree (visually hidden, not display: none) so it can take
   keyboard focus, and the label draws the focus ring on its behalf. */
.site-header__toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.site-header__toggle {
  display: none;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--text);
  cursor: pointer;
}

.site-header__toggle-input:focus-visible + .site-header__toggle {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (max-width: 60rem) {
  .site-header {
    height: auto;
  }

  .site-header__inner {
    flex-wrap: wrap;
    padding-block: var(--space-xs);
  }

  .site-header__toggle {
    display: block;
  }

  .site-header__end {
    flex-basis: 100%;
    display: none;
  }

  .site-header__toggle-input:checked ~ .site-header__end {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
    padding-block: var(--space-sm);
  }

  .site-nav__list {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .site-nav__submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    box-shadow: none;
    padding-left: var(--space-sm);
  }
}

/* Language switcher */
.lang-switcher {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.lang-switcher__item {
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-13);
  font-weight: 600;
  letter-spacing: 0.04em;
  transition:
    color var(--transition),
    background-color var(--transition);
}

.lang-switcher__item:hover {
  background-color: color-mix(in srgb, var(--c-light-blue) 18%, transparent);
  color: var(--text);
}

.lang-switcher__item--active {
  background-color: var(--accent);
  color: var(--ink);
}

.lang-switcher abbr {
  text-decoration: none;
}

/* Site footer */
.site-footer {
  padding-block: var(--space-md);
  border-top: 1px solid var(--border);
  background-color: var(--surface);
  color: var(--text);
  font-size: var(--fs-14);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  justify-content: space-between;
}

.site-footer__logo {
  height: 1.5rem;
  width: auto;
}

.site-footer__claim {
  margin-top: 0.35rem;
  color: var(--text-muted);
  font-size: var(--fs-14);
}

.site-footer__address,
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  align-items: center;
  font-style: normal;
}

.site-footer__address {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  color: var(--text-muted);
}

.site-footer__copyright {
  color: var(--text-muted);
}

.site-footer a {
  color: var(--accent);
}

.site-footer a:hover {
  text-decoration: underline;
}

/* Hero */
.hero {
  padding-block: var(--space-xl);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(
      70rem 40rem at 82% 18%,
      color-mix(in srgb, var(--c-light-blue) 26%, transparent) 0%,
      transparent 62%
    ),
    radial-gradient(
      42rem 30rem at 8% 92%,
      color-mix(in srgb, var(--accent-strong) 16%, transparent) 0%,
      transparent 60%
    ),
    linear-gradient(155deg, var(--c-petrol-blue) 0%, var(--c-dark-blue) 62%);
  color: var(--text);
}

.hero__inner {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 60rem) {
  .hero__inner {
    grid-template-columns: 1.1fr 1fr;
  }
}

/* Size, width and line-height come from the shared lead rule above. The hero
   sets the gap under its own title wider than the shared one: an h1 is taller
   than the section headings that rule also serves, so the same gap reads as
   crowding here. The bottom margin applies only where something follows the
   lead — on the homepage the hero's :last-child rule zeroes it. */
.hero__lead {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

/* The hero sits on the same dark family as the rest of the page, so the ghost
   button needs no override any more — only a slightly brighter edge. */
.hero .button--ghost {
  border-color: color-mix(in srgb, var(--c-white) 35%, transparent);
}

/* A whole card acting as one link */
/* The clickable wrapper carries the lift, because .card itself no longer
   does. Hovering the link therefore moves the card; hovering a bare card
   does not. */
.card-link {
  display: block;
  border-radius: var(--radius-lg);
  transition: transform var(--transition-card);
}

.card-link:hover {
  transform: translateY(-0.25rem);
}

.card-link:hover .card {
  border-color: var(--accent-strong);
  box-shadow: var(--shadow);
}

/* Sector pages */
.sector__intro {
  max-width: 42rem;
  margin-top: var(--space-sm);
  color: var(--text-muted);
  font-size: 1.1rem;
}

.sector__intro p + p {
  margin-top: var(--space-sm);
}

.sector__intro--full {
  max-width: none;
}

.sector__questions {
  max-width: 42rem;
  margin-top: var(--space-md);
  padding-left: 1.1rem;
  list-style: disc;
}

.sector__questions li + li {
  margin-top: var(--space-sm);
}

/* Legal documents — imprint, privacy policy */
/* Prose measure: the container is sized for cards, which is far too wide to
   read a privacy policy in. */
.legal {
  max-width: 48rem;
}

.legal h3 {
  margin-top: var(--space-lg);
}

.legal h4 {
  margin-top: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  font-weight: 600;
}

.legal p,
.legal .legal__list {
  margin-top: var(--space-sm);
  color: var(--text-muted);
}

.legal h1 + p,
.legal h2 + p,
.legal h3 + p,
.legal h4 + p {
  margin-top: var(--space-xs);
}

.legal__lines {
  display: flex;
  flex-direction: column;
}

.legal__list {
  padding-left: 1.1rem;
  list-style: disc;
}

.legal__list li + li {
  margin-top: var(--space-xs);
}

/* Contact page: details beside the form */
.contact {
  display: grid;
  gap: var(--space-lg);
  align-items: start;
  grid-template-columns: 1fr;
  margin-top: var(--space-lg);
}

@media (min-width: 60rem) {
  .contact {
    grid-template-columns: 1fr 1.4fr;
  }
}

.contact__details address {
  display: grid;
  gap: 0.15rem;
  font-style: normal;
}

.contact__list {
  display: grid;
  margin-top: var(--space-sm);
}

.contact__list dt:not(:first-child) {
  margin-top: 1.5rem;
}

.contact__list dt {
  color: var(--text-muted);
  font-size: var(--fs-13);
  letter-spacing: var(--caps-10-13);
}

.contact__list dd {
  display: grid;
  justify-items: start;
  gap: 0.15rem;
  margin: 0;
  margin-top: 0.2rem;
}

/* Also the phone and mail links on the sector pages' contact-partner card
   (a .finale-card holding a .post__head byline). */
.contact__list a,
.contact-partner a {
  color: var(--accent);
}

.contact__list a:hover,
.contact-partner a:hover {
  text-decoration: underline;
}

/* The form heading and the details heading start on the same line. */
.contact h3 {
  margin-bottom: var(--space-xs);
}

.contact .form {
  margin-top: var(--space-sm);
}

/* Simple form */
.form {
  display: grid;
  gap: var(--space-sm);
  max-width: 34rem;
  margin-top: var(--space-md);
}

.form label {
  display: grid;
  gap: 0.25rem;
  font-size: var(--fs-14);
  font-weight: 500;
}

.form input,
.form textarea {
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  color: var(--text);
  transition: border-color var(--transition);
}

.form input::placeholder,
.form textarea::placeholder {
  color: color-mix(in srgb, var(--c-white) 45%, transparent);
}

.form input:focus,
.form textarea:focus {
  border-color: var(--accent);
}

/* Tag-Pille — .post-tag (Blog-Fuß) und .photo-card__tags li (Teamfoto) */
.post-tag,
.photo-card__tags li {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--accent);
  font-size: var(--fs-12);
}

@media (max-width: 40rem) {
  .site-header__end {
    gap: var(--space-sm);
  }

  .site-nav {
    gap: var(--space-sm);
    font-size: var(--fs-14);
  }
}

/* --- Team page ------------------------------------------------------------ */
/* Ported from the Figma "TeamPage" prototype. Three bands: a gradient page
   header, the portrait mosaic with a brand duotone, and the diagonal photo
   wall. What was React hover state in the prototype is :hover / :focus-within
   here. */

.page-header {
  padding: var(--space-lg) 0 var(--space-md);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(160deg, var(--c-petrol-blue) 0%, var(--c-dark-blue) 65%);
}

.page-header h1 {
  margin-top: 0.5rem;
  max-width: 22ch;
  font-size: clamp(2rem, 4vw, 3.25rem);
}

/* Portrait mosaic: the page header above already carries the section's
   heading and lead, so this is just the four portraits in a row. */
.team-photo-section {
  padding-block: var(--space-xl);
  background-color: var(--c-dark-blue);
  overflow: hidden;
}

.team-photo-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-sm);
}

.photo-card {
  container-type: inline-size;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
}

/* Portrait card: the photo fills the top --photo-height of the frame with the
   face at the top, then dissolves into the plain --surface colour, and the
   badge/name/bio sit in that plain lower area rather than on the face.
   The frame is the isolation context, so mix-blend-mode on the tint only
   blends with the photo and never with the page behind it.
   The hover durations are staggered on purpose: strip and info settle at
   400ms, tint and colour at 500ms, the zoom last at 600ms.

   The frame is photo plus info area, sized separately, not one aspect ratio
   split by a percentage. The photo scales with the card's width; the info
   area has to hold text at a fixed size, which wraps onto more lines the
   narrower the card gets, so it grows as the card narrows (cqw = 1% of the
   card's width). It is sized for the hover state, bio unfolded — with one
   ratio for both, the tags slid out of the bottom of the frame on hover
   whenever the four cards sat in a row on a screen under ~1440px. */
.photo-card__frame {
  --photo-height: 103cqw;
  --info-height: max(16rem, calc(32.5rem - 76cqw));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  height: calc(var(--photo-height) + var(--info-height));
  background-color: var(--surface);
}

.photo-card__img {
  position: absolute;
  inset: 0 0 auto 0;
  display: block;
  width: 100%;
  height: var(--photo-height);
  object-fit: cover;
  object-position: center top;
  filter: grayscale(85%) brightness(0.75) contrast(1.1);
  transform-origin: center top;
  transition:
    filter 500ms var(--ease-reveal),
    transform 600ms var(--ease-reveal);
}

.photo-card:hover .photo-card__img,
.photo-card:focus-within .photo-card__img {
  filter: grayscale(20%) brightness(0.85) contrast(1.05);
  transform: scale(1.04);
}

/* Brand duotone: mix-blend-mode: color tints the desaturated photo. */
.photo-card__tint {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--photo-height);
  background: linear-gradient(148deg, #063f5b 0%, #0d4f6e 40%, #192435 100%);
  mix-blend-mode: color;
  opacity: 0.82;
  pointer-events: none;
  transition: opacity 500ms ease;
}

.photo-card:hover .photo-card__tint,
.photo-card:focus-within .photo-card__tint {
  opacity: 0.38;
}

/* Dissolves the bottom of the photo into the frame's plain colour; below
   --photo-height the gradient is solid, so the info area is never on the photo. */
.photo-card__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    transparent calc(var(--photo-height) * 0.71),
    color-mix(in srgb, var(--surface) 55%, transparent) calc(var(--photo-height) * 0.87),
    var(--surface) var(--photo-height)
  );
  pointer-events: none;
}

.photo-card__accent-corner {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 3px;
  height: 0;
  background: linear-gradient(to bottom, var(--c-light-orange), var(--c-dark-orange));
  transition: height 400ms var(--ease-reveal);
}

.photo-card:hover .photo-card__accent-corner,
.photo-card:focus-within .photo-card__accent-corner {
  height: 100%;
}

/* Anchored to the top of the plain area so the badge sits at the same height
   on every card whatever the tag count; the bio unfolds downward on hover. */
.photo-card__info {
  position: absolute;
  inset: var(--photo-height) 0 auto 0;
  z-index: 2;
  padding: 0.25rem 1.5rem 1.25rem;
  transform: translateY(0.5rem);
  opacity: 0.88;
  transition: opacity 400ms ease, transform 400ms ease;
}

.photo-card:hover .photo-card__info,
.photo-card:focus-within .photo-card__info {
  transform: translateY(0);
  opacity: 1;
}

.photo-card__quality {
  margin-bottom: 0.25rem;
  color: var(--accent);
  font-size: var(--fs-12);
  letter-spacing: var(--caps-10-13);
}

.photo-card__name {
  margin-bottom: 0.2rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--c-white);
}

.photo-card__degree {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--c-white) 60%, transparent);
  font-size: var(--fs-13);
}

/* The prototype only mounts the bio on hover. Here it stays in the DOM (so it
   is readable without a pointer) and unfolds through a 0fr-to-1fr grid row. */
.photo-card__bio {
  display: grid;
  grid-template-rows: 0fr;
  margin-bottom: 0;
  color: color-mix(in srgb, var(--c-white) 75%, transparent);
  font-size: var(--fs-13);
  line-height: 1.5;
  opacity: 0;
  transition: grid-template-rows var(--transition-card), opacity var(--transition-card), margin-bottom var(--transition-card);
}

.photo-card__bio > span {
  overflow: hidden;
}

.photo-card:hover .photo-card__bio,
.photo-card:focus-within .photo-card__bio {
  grid-template-rows: 1fr;
  margin-bottom: 0.75rem;
  opacity: 1;
}

.photo-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.photo-card__tags li {
  border-color: color-mix(in srgb, var(--c-light-blue) 35%, transparent);
  color: color-mix(in srgb, var(--c-white) 65%, transparent);
}

@media (max-width: 60rem) {
  .team-photo-mosaic {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* The prototype keeps two portrait columns on phones; at 390px the info
   overlay then covers the face, so the portraits stack instead. */
@media (max-width: 40rem) {
  .team-photo-mosaic {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

/* No pointer, no hover: keep the bio unfolded on touch devices. */
@media (hover: none) {
  .photo-card__bio {
    grid-template-rows: 1fr;
    margin-bottom: 0.75rem;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo-card__img,
  .photo-card__tint,
  .photo-card__info,
  .photo-card__bio,
  .photo-card__accent-corner {
    transition: none;
  }
}

/* --- Home page — fluid sections -------------------------------------------
   Ported from the Figma "fluid canvas" homepage prototype: an oversized hero
   photo card, a staggered value grid, a mission/core-values bridge, sector
   cards, a two-node tool diagram, a reference list and a funding marquee.
   ---------------------------------------------------------------------- */


.eyebrow--sm {
  margin-bottom: 0.5rem;
  font-size: var(--fs-14);
}

.eyebrow--center {
  display: block;
  text-align: center;
}

h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--c-light-orange) 0%, var(--c-dark-orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Hero background */
.hero--fluid {
  position: relative;
  padding-top: calc(var(--space-xl) * 1.5);
  padding-bottom: calc(var(--space-xl) * 1.6);
  border-bottom-color: color-mix(in srgb, var(--c-light-blue) 35%, var(--c-dark-blue) 65%);
  background:
    linear-gradient(
      90deg,
      var(--c-dark-blue) 0%,
      var(--c-dark-blue) calc(50vw - (var(--content-width) / 2) + var(--space-sm) + 2rem),
      color-mix(in srgb, var(--c-dark-blue) 75%, transparent)
        calc(50vw - (var(--content-width) / 2) + var(--space-sm) + 44rem),
      color-mix(in srgb, var(--c-dark-blue) 55%, transparent)
        calc(50vw - (var(--content-width) / 2) + var(--space-sm) + 70rem)
    ),
    linear-gradient(
      180deg,
      var(--c-dark-blue) 0%,
      transparent 22%
    ),
    url('/img/illustration-charging-depot.jpg');
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: left, left, right 18%;
  background-size: auto, auto, 62% auto;
  background-attachment: scroll, scroll, fixed;
}

@media (max-width: 60rem) {
  .hero--fluid {
    background:
      linear-gradient(
        180deg,
        var(--c-dark-blue) 0%,
        var(--c-dark-blue) 60%,
        color-mix(in srgb, var(--c-dark-blue) 45%, transparent) 100%
      ),
      url('/img/illustration-charging-depot.jpg');
    background-repeat: no-repeat, no-repeat;
    background-position: left, center 30%;
    background-size: auto, cover;
    background-attachment: scroll, scroll;
  }
}

/* The charging-depot illustration only fits logistics; the other sector
   heroes keep the dark blue and the glows but drop the picture. */
.hero--fluid.hero--plain {
  background: var(--c-dark-blue);
}

.hero__content {
  max-width: 40rem;
}

/* The value cards now sit in the hero as a sibling of .hero__content, so they
   run the container's full width while the prose keeps its 40rem measure. The
   hero__inner grid gap already spaces them off the lead — the standalone
   grid's own top margin would double it. */
.hero__values {
  margin-top: 0;
}

/* With the CTA row gone, nothing follows the lead inside .hero__content, so
   its bottom margin would stack on top of that same grid gap. */
.hero__content > :last-child {
  margin-bottom: 0;
}

.hero__glow {
  position: absolute;
  z-index: 0;
  border-radius: var(--radius-round);
  filter: blur(120px);
  opacity: 0.3;
  pointer-events: none;
}

.hero__glow--1 {
  top: -10%;
  left: -10%;
  width: 40vw;
  height: 40vw;
  background: radial-gradient(circle, var(--c-petrol-blue), transparent);
}

.hero__glow--2 {
  top: 20%;
  right: -15%;
  width: 45vw;
  height: 45vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--c-dark-orange) 40%, transparent), transparent);
}

.hero--fluid .hero__inner {
  position: relative;
  z-index: 1;
}

/* Bridges the hero lead and a card sitting further down the same hero. It
   stays inside .hero__content so it inherits that column's 40rem measure —
   wide enough to stand on its own, narrow enough not to run into the
   illustration — and sits closer to the lead than the gap to the card. */
.hero__bridge {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--space-sm) * 1.5);
  margin-top: var(--space-sm);
}

/* Every running text in a sector hero — lead, bridge sentence, intro card and
   its question list — shares the lead's 1.1rem, so the hero reads at one size
   and only the headings step out of it. */
.hero__bridge-text {
  color: var(--text-muted);
  font-size: 1.1rem;
}

/* This value-card sits in a hero, not a grid of its own — it isn't a link,
   so it drops the hover affordance, and its prose runs the card's full
   width instead of the 42rem measure the plain sector sections use. */
.hero__intro-card:hover {
  border-color: var(--border);
}

.hero__intro-card .sector__intro,
.hero__intro-card .sector__questions {
  max-width: none;
}

.hero__intro-card .sector__questions {
  font-size: 1.1rem;
}

/* The label introduces the question list, so it sits further from the text
   above than from the questions below. */
.hero__questions-label {
  margin-top: var(--space-md);
}

.hero__questions-label + .sector__questions {
  margin-top: 0;
}

@media (min-width: 60rem) {
  .hero--fluid .hero__inner {
    grid-template-columns: 1fr;
  }
}

/* Value cards */
.value-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.value-card {
  position: relative;
  padding: var(--space-md) 1.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: color-mix(in srgb, var(--c-dark-blue) 85%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color var(--transition-card);
}

.value-card:hover {
  border-color: var(--accent-strong);
}

.value-card h3 {
  margin-bottom: var(--space-sm);
}

/* The numeral is 2.75rem tall and absolutely placed in the top-right corner,
   so it reaches further down the card than the one-line eyebrow beside it. The
   eyebrow's own margin is too small to carry the body text past it, which is
   what made the text read as crowded against the numeral. */
.value-card .eyebrow {
  margin-bottom: var(--space-sm);
}

/* Whichever element starts the card shares the numeral's line, so it has to
   keep clear of it; the one below it is already pushed clear. */
.value-card__num + h3,
.value-card__num + .eyebrow {
  padding-right: 3.5rem;
}

.value-card__num {
  position: absolute;
  top: 1.2rem;
  right: 1.5rem;
  font-family: var(--font-display);
  font-size: 2.75rem;
  line-height: 1;
  color: color-mix(in srgb, var(--c-light-blue) 25%, transparent);
}

.value-card__text {
  color: var(--text-muted);
  font-size: var(--fs-16);
}

@media (max-width: 60rem) {
  .value-cards {
    grid-template-columns: 1fr;
  }
}

/* Key figures ------------------------------------------------------------
   One wide band inside the hero, under the value cards, not four cards of its
   own: the figures belong to one statement about how rencolab works, and four
   separate cards would invite reading them as four separate claims. Hence one
   panel, hairline dividers, no hover — nothing here is clickable. The spacing
   to the value cards above is the .hero__inner grid gap, same as the gap
   between the lead and those cards.

   No icon above the figure: the number is the graphic.

   The value uses --font-body, not --font-display: Nova Round is a rounded
   display face and at 2.75rem it reads as decoration rather than as a number.
   No tabular-nums either — it gives every digit the width of a zero, which
   makes a figure like 525.600 look gappy at this size. The label runs at
   1rem, the same size as .value-card__text, and inherits the body's 1.6
   line-height, so it reads as ordinary prose and not as a caption.

   --- The colour switch ---
   The colour comes from one variant class on the div (--orange today); the
   base rule keeps the mechanism, not a second variant. Geometry,
   dividers and type stay here, and the variant retunes --kf-rule so every
   hairline — the outer border and both the vertical and the wrapped
   horizontal dividers — follows its fill from one place. A second variant
   therefore costs a fill and a --kf-rule, nothing more. */
.keyfigures {
  --kf-rule: var(--border);

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--kf-rule);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Orange: the reverse — a warm fill that carries the band clear of the glass
   cards above it and the dark section below, which is the point of it.

   Light orange, not dark, and dark ink, not white. On a dark-orange fill
   neither white (3.75:1) nor the navy ink (3.89:1) clears 4.5:1, so dark
   orange cannot legally hold body text at all — it stays what the token
   comment says it is, a decorating colour. White on light orange would be
   2.3:1, so --ink is the only ink this fill can carry.

   84% is as transparent as this band goes, and the ink is why. The hero's
   backdrop under the band runs from opaque navy on the left to the
   illustration showing through at 45% on the right — and the illustration has
   near-white highlights down there, which `background-attachment: fixed`
   slides around as the page scrolls. Dark ink is worst off over the DARK end,
   so that end sets the floor: at 84% the ink measures 4.94:1 against opaque
   navy and better everywhere else. 80% would still pass at 4.60:1 but leaves
   no margin for a moving backdrop; below 78% the label fails outright.

   Both the figure and the label take solid --ink for the same reason. The
   label was on --ink at 90%, which costs about 0.5 of contrast — enough that
   at this transparency it would drop under 4.5:1. Size and weight carry the
   hierarchy here instead of opacity. */
.keyfigures--orange {
  --kf-rule: color-mix(in srgb, var(--ink) 28%, transparent);

  background-color: color-mix(in srgb, var(--c-light-orange) 84%, transparent);
}

.keyfigures--orange .keyfigure__value,
.keyfigures--orange .keyfigure__label {
  color: var(--ink);
}

.keyfigure {
  padding: var(--space-md) 1.6rem;
}

/* Dividers as borders on the items, so they stop at the panel's padding
   instead of running into its rounded corners. */
.keyfigure + .keyfigure {
  border-left: 1px solid var(--kf-rule);
}

.keyfigure__value {
  font-family: var(--font-body);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.05;
}

.keyfigure__label {
  margin-top: var(--space-xs);
  color: var(--text-muted);
  font-size: var(--fs-16);
}

@media (max-width: 60rem) {
  .keyfigures {
    grid-template-columns: repeat(2, 1fr);
  }

  /* With two per row the divider has to follow the row, not the DOM order:
     every third item starts a new row and loses its left rule, and the lower
     row gets a rule on top instead. */
  .keyfigure:nth-child(odd) {
    border-left: 0;
  }

  .keyfigure:nth-child(n + 3) {
    border-top: 1px solid var(--kf-rule);
  }
}

@media (max-width: 40rem) {
  .keyfigures {
    grid-template-columns: 1fr;
  }

  .keyfigure + .keyfigure {
    border-left: 0;
    border-top: 1px solid var(--kf-rule);
  }
}

/* Sector cards */
.sector-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
}

/* The whole card is an <a>, so it gets the clickable hover: lift, shadow and
   dark-orange border, the same as .card-link and .post-link. */
.sector-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: color-mix(in srgb, var(--c-petrol-blue) 25%, transparent);
  transition:
    transform var(--transition-card),
    border-color var(--transition-card),
    box-shadow var(--transition-card);
}

.sector-card:hover {
  transform: translateY(-0.25rem);
  border-color: var(--accent-strong);
  box-shadow: var(--shadow);
}

.sector-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-md);
}

.sector-card__body h3 {
  margin-bottom: var(--space-xs);
}

.sector-card__text {
  flex: 1;
  margin-bottom: var(--space-sm);
  color: var(--text-muted);
  font-size: var(--fs-16);
}

.sector-card__link {
  color: var(--accent);
  font-size: var(--fs-14);
  font-weight: 700;
}

@media (max-width: 60rem) {
  .sector-cards {
    grid-template-columns: 1fr;
  }
}

/* Sector lead — the focus sector (currently logistics) sits as a full-width
   banner above the remaining two cards, and the e-truck calculator CTA rides
   along in a panel of its own.

   Deliberately NOT an <a>, unlike .sector-card: the lead carries two
   destinations, the sector page and the calculator, and a link inside a link is
   invalid HTML — the browser unnests it and the two click targets end up
   overlapping unpredictably. So the lead is an <article> with two separately
   clickable targets. .sector-card can keep the whole-card link pattern because
   it only ever has the one destination. */
/* Border, radius and surface are deliberately identical to .sector-card: the
   lead is one of the three sector cards, not a different kind of object, and
   the only thing that sets it apart is that it spans the row. Emphasis is
   carried by the pill and by the CTA panel inside it, never by giving the card
   its own colour — three cards in one group tinted three ways stops reading as
   a group.

   The radius is lg for the same reason. xl is reserved for the full-width
   panels that bridge or close a section (.finale-card);
   a card in a content grid takes lg however wide it happens to be.

   The hover is the same as .sector-card's too. The lead is not one link, but
   both of its targets lead somewhere, so the lift still keeps its promise —
   and a group where two cards lift and the third doesn't reads as broken. */
.sector-lead {
  margin-top: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: color-mix(in srgb, var(--c-petrol-blue) 25%, transparent);
  transition:
    transform var(--transition-card),
    border-color var(--transition-card),
    box-shadow var(--transition-card);
}

.sector-lead:hover {
  transform: translateY(-0.25rem);
  border-color: var(--accent-strong);
  box-shadow: var(--shadow);
}

/* Same padding as .sector-card__body, so the text in all three cards starts on
   the same inset and the banner is no taller than its content needs. */
.sector-lead__body {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-md);
  padding: var(--space-md);
}

/* The pill names the sector outright ("Unser Schwerpunkt: Logistik"). The
   banner has no .eyebrow of its own, so this is the only place the sector is
   labelled — it has to carry the name, not just the status. */
.sector-lead__flag {
  display: inline-flex;
  align-self: start;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: var(--space-sm);
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  background-color: color-mix(in srgb, var(--c-dark-orange) 22%, transparent);
  color: var(--c-light-orange);
  font-size: var(--fs-13);
  font-weight: 700;
  letter-spacing: var(--caps-10-13);
  text-transform: uppercase;
}

.sector-lead__flag::before {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--radius-round);
  background-color: var(--accent);
}

.sector-lead h3 {
  max-width: 28ch;
  margin-bottom: var(--space-xs);
  font-size: 1.6rem;
}

.sector-lead__text {
  margin-bottom: var(--space-sm);
  color: var(--text-muted);
}

/* The calculator gets an enclosed surface. Not decoration: it is the second
   destination inside the same banner, and without its own boundary it competes
   with the sector link instead of standing beside it.

   Border and background are taken from .finale-card--accent, the contact card
   that closes the homepage, because the two do the same job — this is the one
   place in the section that asks for an action, and the site already has a
   look for that. The radius is not taken from it: .finale-card is a
   section-closing panel at xl, this one is nested inside a card and so takes
   sm, like the button it contains. Two radii in the whole group, lg for the
   cards and sm for everything sitting inside one.

   If the accent look changes on .finale-card--accent, change it here too —
   they are two copies of one decision, and only these comments tie them
   together. */
.sector-lead__cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid color-mix(in srgb, var(--accent-strong) 40%, transparent);
  border-radius: var(--radius-sm);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent-strong) 25%, transparent),
    color-mix(in srgb, var(--bg) 85%, transparent)
  );
}

.sector-lead__cta-text {
  color: var(--text-muted);
  font-size: var(--fs-15);
}

/* The panel stretches to the banner's height, so auto margin drops the button
   onto its bottom edge instead of leaving it floating under the sentence. */
.sector-lead__cta .button {
  align-self: start;
  margin-top: auto;
}

.sector-lead__link {
  align-self: start;
  color: var(--accent);
  font-size: var(--fs-14);
  font-weight: 700;
}

/* Two cards instead of three: .sector-cards already supplies the grid, the gap
   and the top margin, so only the column count changes here. This sits after
   the 60rem query above and matches its specificity, so source order lets the
   pair keep two columns through that step — which is what we want, since two
   columns only get too narrow at 40rem. */
.sector-cards--pair {
  grid-template-columns: repeat(2, 1fr);
}

/* The banner gives up its second column one step earlier than the card pair
   does. Its right column is an action panel, not a card: it has to hold a
   button at a fixed label width, so it cannot keep narrowing the way a card of
   running text can. */
@media (max-width: 60rem) {
  .sector-lead__body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 40rem) {
  .sector-cards--pair {
    grid-template-columns: 1fr;
  }
}

/* Reference list */
/* The list owns the columns and every row takes them over as a subgrid, so
   the badge column is as wide as the widest badge in the whole list and the
   titles all start on the same line. With per-row columns each row sized the
   badge column to its own badge, and the text jumped from row to row.

   No hover and no arrow: the rows do not link anywhere yet, and a hover
   would promise a click that does nothing. When each reference gets a page,
   make the row a link and bring the arrow back from the archive stylesheet
   (git show 953e5e5:_archive/archive.css). */
.reference-list {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-md);
  row-gap: var(--space-sm);
  margin-top: var(--space-md);
}

.reference-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  row-gap: var(--space-sm);
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: color-mix(in srgb, var(--c-petrol-blue) 20%, transparent);
  transition: background-color var(--transition-card), border-color var(--transition-card);
}

.reference-row h3 {
  margin-bottom: 0.2rem;
}

.reference-row__badge {
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  background-color: color-mix(in srgb, var(--c-dark-orange) 20%, transparent);
  color: var(--c-light-orange);
  font-size: var(--fs-13);
  font-weight: 700;
  white-space: nowrap;
  justify-self: start;
}

.reference-row__detail {
  color: var(--text-muted);
  font-size: var(--fs-14);
}

@media (max-width: 40rem) {
  .reference-list {
    grid-template-columns: 1fr;
  }
}

/* Team / contact finale */
/* No own vertical margin — the grid always sits inside a .section, which
   already supplies the block padding. */
.finale-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.finale-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, color-mix(in srgb, var(--c-petrol-blue) 50%, transparent), color-mix(in srgb, var(--bg) 80%, transparent));
}

.finale-card--accent {
  border-color: color-mix(in srgb, var(--accent-strong) 40%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-strong) 25%, transparent), color-mix(in srgb, var(--bg) 85%, transparent));
}

.finale-card h2 {
  margin-top: 0.5rem;
  margin-bottom: var(--space-sm);
}

.finale-card__text {
  color: var(--text-muted);
}

.finale-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.finale-card > .button {
  align-self: flex-start;
}

@media (max-width: 60rem) {
  .finale-grid {
    grid-template-columns: 1fr;
  }
}

/* Funding partners */
.funding-banner {
  position: relative;
  padding-block: var(--space-lg) var(--space-xl);
  border-top: 1px solid var(--border);
}

.funding-banner__intro {
  margin-bottom: var(--space-md);
  text-align: center;
}

.funding-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
}

.funding-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  flex: 0 0 calc((100% - 2 * var(--space-md)) / 3);
  background-color: var(--icon-tile);
  transition:
    transform var(--transition-card),
    border-color var(--transition-card),
    box-shadow var(--transition-card);
}

.funding-card:hover {
  transform: translateY(-0.25rem);
  border-color: var(--accent-strong);
  box-shadow: var(--shadow);
}

/* Height takes back what the slimmer card padding gave up, so the card
   stays the same size and only the logo grows. */
.funding-card img {
  max-width: 100%;
  height: 5.5rem;
  width: auto;
  object-fit: contain;
}

/* For wide wordmarks that would otherwise look heavier than their neighbours. */
.funding-card--inset img {
  padding: var(--space-sm);
}

/* Logos, not text: this row skips the 60rem step every other card grid
   takes and stays three across until 40rem. See the breakpoint comment in
   the token block at the top of this file. */
@media (max-width: 40rem) {
  .funding-card {
    flex-basis: 100%;
  }
}

/* News posts ---------------------------------------------------------------
   Handgeschriebene Beiträge aus einem Baukasten von Blöcken. Ein Beitrag hat
   drei Zonen: Kopf (wer, wann), Körper (beliebige Blöcke) und Fuß (Themen,
   optional der Verweis aufs LinkedIn-Original). Nur der Körper variiert.

   Zwei Layouts sind im Einsatz: .post-grid mit drei kompakten Karten auf der
   Startseite, und auf /blog/ derselbe Raster unter einem .post--lead über die
   volle Sektionsbreite. */
.post {
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
}

.post__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Das Porträt ist der Grund, warum die Karte nicht wie ein Feed-Klon wirkt:
   der Beitrag kommt von einer Person, nicht von einer Marke. */
.post__avatar {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-round);
  object-fit: cover;
}

.post__byline {
  min-width: 0;
}

.post__author {
  font-weight: 600;
  font-size: var(--fs-15);
}

.post__role {
  color: var(--text-muted);
  font-size: var(--fs-12);
}

.post__date {
  margin-left: auto;
  flex: none;
  color: var(--text-muted);
  font-size: var(--fs-12);
  letter-spacing: var(--caps-10-13);
}

.post__body {
  margin-top: var(--space-sm);
  min-width: 0;
}

/* Blöcke stapeln sich mit gleichem Abstand, egal in welcher Reihenfolge sie
   gesetzt werden. Ein neuer Blocktyp braucht deshalb keine eigene Regel. */
.post__body > * + * {
  margin-top: var(--space-sm);
}

.post__foot {
  margin-top: auto;
  padding-top: var(--space-md);
}

/* --- Die Blöcke --- */
.post-text {
  color: var(--text-muted);
}

.post-text strong {
  color: var(--text);
  font-weight: 600;
}

.post-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  border-block: 1px solid var(--border);
}

.post-stat__value {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.post-stat__label {
  margin-top: 0.3rem;
  color: var(--text-muted);
  font-size: var(--fs-12);
  line-height: 1.4;
}

.post-figure img {
  width: 100%;
  max-height: 16rem;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.post-figure figcaption {
  margin-top: 0.4rem;
  color: var(--text-muted);
  font-size: var(--fs-12);
}

/* --- Fuß --- */
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.post__source {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--space-sm);
  color: var(--text-muted);
  font-size: var(--fs-13);
}

/* --- Kompakte Karte: gleiche Karte, weniger Luft, für das Raster --- */
.post--compact {
  padding: 1.4rem;
}

.contact-partner .post__head {
  gap: 1.25rem;
}

.contact-partner .post__avatar {
  width: 5.5rem;
  height: 5.5rem;
}

.contact-partner .post__author {
  font-size: 1.25rem;
}

.contact-partner .post__role {
  font-size: var(--fs-16);
}

.post--compact .post__avatar {
  width: 2.1rem;
  height: 2.1rem;
}

.post--compact .post-text {
  font-size: var(--fs-14);
}

.post--compact .post__date {
  font-size: var(--fs-12);
}

/* --- Anklickbare Beitragskarte -------------------------------------------
   Hub, Schatten und dunkelorangener Rand — dasselbe Hover wie .card-link.
   Bis 2026-10 war der Rand hier ein maskierter Lockup-Verlaufsring; der
   Verlauf liegt als --gradient-lockup bereit, falls er zurückkommt.

   Auf /blog/ bleibt die Karte ein nacktes .post ohne diesen Wrapper, solange
   es keine Einzelseiten je Beitrag gibt. Und solange der Wrapper ein <a> ist,
   darf in der Karte kein weiterer Link stehen — also kein .post__source
   darin, und auch keine Link-Vorschau, falls die aus dem Archiv zurückkommt.
   Der Rahmen geht *um* die ganze Karte, nicht in sie hinein. */
.post-link {
  display: block;
  border-radius: var(--radius-lg);
  transition: transform var(--transition-card), box-shadow var(--transition-card);
}

.post-link .post {
  height: 100%;
  transition: border-color var(--transition-card);
}

.post-link:hover {
  transform: translateY(-0.25rem);
  box-shadow: var(--shadow);
}

.post-link:hover .post {
  border-color: var(--accent-strong);
}

/* --- Raster mit drei Beiträgen (Startseite und /blog/) --- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
  align-items: start;
}

/* --- Aufmacher über die volle Sektionsbreite (/blog/) -------------------
   Die Karte nimmt die ganze Breite, teilt sich innen aber in Bild und Text,
   damit die Textspalte lesbar schmal bleibt statt über 72rem zu laufen.
   Unter 60rem bleibt die Karte der Flex-Column von .post und stapelt Bild
   über Text. Ein Aufmacher ohne Bild bekommt kein .post--lead, sondern ein
   schlichtes .post. */
.post--lead {
  gap: var(--space-md);
}

.post--lead .post__media {
  margin: 0;
  min-width: 0;
}

.post--lead .post__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

@media (min-width: 60rem) {
  .post--lead {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
  }

  /* Im Aufmacher darf das Bild die Höhe der Textspalte mitgehen, statt bei
     16rem abzuschneiden wie im Fließtext-Block. */
  .post--lead .post__media img {
    height: 100%;
    min-height: 16rem;
    max-height: none;
  }
}

@media (max-width: 60rem) {
  .post-grid {
    grid-template-columns: 1fr;
  }
}