/* ============================================================
   SECTIONS LAB · Projects & case studies (PJ) — namespace .work-*
   Tokens only; anything else is a knob declared on the candidate's
   root with its default. Kit classes are styled only inside a .work-*
   root. Hover is gated, focus always shows, motion has a reduce rule.
   ============================================================ */


/* ------------------------------------------------------------
   PJ01 · Result-led case teaser
   <section class="work-lead"><div class="wrap work-lead__grid">
     <header class="work-lead__head"><p class="eyebrow">…</p><h2 …>the result</h2></header>
     <div class="photo parallax work-lead__photo"><img …></div>
     <div class="work-lead__side" data-reveal-group>
       <div class="work-lead__pair reveal">
         <p class="work-lead__was"><span class="work-lead__k">Jan 2025</span><span class="work-lead__n">38</span><span class="work-lead__u">Std.</span></p>
         <span class="arrow work-lead__to" aria-hidden="true"></span>
         <p class="work-lead__now">… <span class="work-lead__n"><span class="odometer">3</span></span> …</p>
       </div>
       <blockquote class="work-lead__quote reveal">…</blockquote>
       <div class="work-lead__foot reveal"><a class="link">…</a><p class="work-lead__src">Stand …</p></div>
     </div></div></section>
   ------------------------------------------------------------ */
.work-lead {
  --lead-was: calc(var(--fs-display) * 1.05);   /* the baseline figure */
  --lead-now: calc(var(--fs-display) * 1.9);    /* the result figure   */
}
.work-lead__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--sp-5); row-gap: var(--sp-8);
}
.work-lead__head { grid-column: 1 / span 9; }
.work-lead__head .eyebrow { max-width: none; }
.work-lead__head h2 { max-width: 23ch; text-wrap: balance; }
.work-lead__photo { grid-column: 1 / span 7; }
.work-lead__side {
  grid-column: 9 / span 4;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-6);
}
/* The pair: dates on one line, figures on one baseline, units on one line. */
.work-lead__pair {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr);
  column-gap: var(--sp-4); row-gap: var(--sp-2); align-items: baseline;
  padding-top: var(--sp-4); border-top: 1px solid var(--hairline);
}
.work-lead__was, .work-lead__now { display: contents; }
.work-lead__was > :nth-child(1) { grid-area: 1 / 1; }
.work-lead__was > :nth-child(2) { grid-area: 2 / 1; }
.work-lead__was > :nth-child(3) { grid-area: 3 / 1; }
.work-lead__now > :nth-child(1) { grid-area: 1 / 3; }
.work-lead__now > :nth-child(2) { grid-area: 2 / 3; }
.work-lead__now > :nth-child(3) { grid-area: 3 / 3; }
.work-lead__k {
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-dim);
}
.work-lead__n {
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  letter-spacing: var(--ls-head, var(--ls-display)); line-height: 1; font-variant-numeric: tabular-nums;
}
.work-lead__was .work-lead__n { font-size: var(--lead-was); color: var(--fg-dim); }
.work-lead__now .work-lead__n { font-size: var(--lead-now); color: var(--fg); }
.work-lead__u { font-size: var(--fs-small); color: var(--fg-muted); }
.work-lead .work-lead__to { grid-area: 2 / 2; align-self: center; font-size: var(--fs-h3); color: var(--fg-dim); }
.work-lead__quote { margin: 0; }
.work-lead__quote p {
  font-family: var(--font-head); font-weight: 500; font-stretch: 100%;
  font-size: var(--fs-h3); line-height: 1.4; color: var(--fg);
  text-wrap: pretty; hanging-punctuation: first;
}
.work-lead__quote footer { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--fg-dim); }
.work-lead__quote footer b { color: var(--fg); font-weight: 600; }
.work-lead__src { margin-top: var(--sp-3); font-size: var(--fs-eyebrow); color: var(--fg-dim); }

@media (max-width: 900px) {
  /* One column: twelve columns' eleven gaps alone (352px) are wider than a
     375px phone's content box (qa.mjs, 2026-09-11). */
  .work-lead__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-7); }
  .work-lead__head, .work-lead__photo, .work-lead__side { grid-column: 1 / -1; }
  .work-lead__side { justify-content: flex-start; }
  .work-lead__pair { max-width: 28rem; }
}
@media (max-width: 640px) {
  .work-lead { --lead-was: var(--fs-display); --lead-now: calc(var(--fs-display) * 1.7); }
  .work-lead__grid { row-gap: var(--sp-6); }
  .work-lead__quote p { font-size: var(--fs-lead); }
}


/* ------------------------------------------------------------
   PJ02 · Case index with pinned preview
   <section class="work-idx"><div class="wrap">
     <div class="work-idx__head">…h2… <a class="link">…</a></div>
     <div class="work-idx__body">
       <ol class="work-idx__list" data-reveal-group>
         <li class="reveal"><a class="work-idx__row" href="…">
           <span class="work-idx__y"><b>2025</b>Branche</span>
           <span class="work-idx__main"><span class="work-idx__co">Client</span><span class="work-idx__k">What was built</span></span>
           <span class="work-idx__fig"><b>−92 %</b><span>meaning</span></span>
           <span class="arrow" aria-hidden="true"></span></a></li> …
       </ol>
       <div class="work-idx__preview" aria-hidden="true">
         <div class="photo photo--people work-idx__frame">
           <div class="parallax work-idx__layer is-on"><img alt=""></div> … one per row
         </div></div></div></div></section>
   ------------------------------------------------------------ */
.work-idx {
  --idx-co: calc(var(--fs-h2) * .5);     /* client name */
  --idx-fig: calc(var(--fs-h2) * .5);    /* result figure */
  --idx-dim: .32;                        /* the other rows while one is pointed at */
  --idx-fade: .7s;                       /* the crossfade */
}
.work-idx__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-5) var(--sp-7); }
.work-idx__head h2 { max-width: 24ch; text-wrap: balance; }
.work-idx__body {
  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--sp-8); align-items: start; margin-top: var(--sp-8);
}
.work-idx__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--hairline); }
.work-idx__row {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) minmax(8rem, 11rem) 1em;
  column-gap: var(--sp-5); align-items: center;
  padding-block: var(--sp-5); border-top: 1px solid var(--hairline);
  color: var(--fg); text-decoration: none;
  transition: opacity .3s var(--ease-out);
}
.work-idx__y { align-self: start; padding-top: .35em; font-size: var(--fs-small); line-height: 1.35; color: var(--fg-dim); }
.work-idx__y b { display: block; color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.work-idx__co {
  display: block; font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--idx-co); line-height: 1.1; letter-spacing: var(--ls-head, var(--ls-display));
  transition: transform .5s var(--ease-out);
}
.work-idx__k { display: block; margin-top: var(--sp-1); max-width: 44ch; font-size: var(--fs-small); line-height: 1.45; color: var(--fg-muted); text-wrap: pretty; }
.work-idx__fig { text-align: right; }
.work-idx__fig b {
  display: block; font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--idx-fig); line-height: 1.05; letter-spacing: var(--ls-head, var(--ls-display)); font-variant-numeric: tabular-nums;
}
.work-idx__fig span { display: block; margin-top: var(--sp-1); font-size: var(--fs-small); line-height: 1.35; color: var(--fg-muted); hyphens: auto; }
.work-idx__row .arrow { color: var(--fg-dim); transition: color .3s; }
.work-idx__row:focus-visible .work-idx__co { transform: translateX(var(--sp-2)); }
.work-idx__row:focus-visible .arrow { color: var(--fg); }
.work-idx__row:focus-visible .arrow::before { transform: translateX(170%); }
.work-idx__row:focus-visible .arrow::after { transform: none; }
.work-idx__list:has(.work-idx__row:focus-visible) .work-idx__row:not(:focus-visible) { opacity: var(--idx-dim); }
@media (hover: hover) {
  .work-idx__list:hover .work-idx__row { opacity: var(--idx-dim); }
  .work-idx__list:hover .work-idx__row:hover { opacity: 1; }
  .work-idx__row:hover .work-idx__co { transform: translateX(var(--sp-2)); }
  .work-idx__row:hover .arrow { color: var(--fg); }
  .work-idx__row:hover .arrow::before { transform: translateX(170%); }
  .work-idx__row:hover .arrow::after { transform: none; }
}
.work-idx__preview { position: sticky; top: calc(var(--header-h) + var(--sp-5)); }
.work-idx__layer.parallax { position: absolute; inset: 0; opacity: 0; transition: opacity var(--idx-fade) var(--ease-out); }
.work-idx__layer.is-on { opacity: 1; }
.work-idx__src { margin-top: var(--sp-5); font-size: var(--fs-eyebrow); color: var(--fg-dim); }

@media (max-width: 900px) {
  .work-idx__body { grid-template-columns: minmax(0, 1fr); margin-top: var(--sp-7); }
  .work-idx__preview { display: none; }
  .work-idx__row { grid-template-columns: 6rem minmax(0, 1fr) auto 1em; column-gap: var(--sp-4); }
}
@media (max-width: 640px) {
  .work-idx { --idx-co: var(--fs-h3); --idx-fig: var(--fs-h3); }
  .work-idx__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "y go" "main main" "fig fig";
    row-gap: var(--sp-2); padding-block: var(--sp-4);
  }
  .work-idx__y { grid-area: y; padding-top: 0; }
  .work-idx__y b { display: inline; margin-right: var(--sp-2); }
  .work-idx__main { grid-area: main; }
  .work-idx__fig { grid-area: fig; display: flex; align-items: baseline; gap: var(--sp-2); text-align: left; }
  .work-idx__fig span { margin-top: 0; }
  .work-idx__row .arrow { grid-area: go; }
}
@media (prefers-reduced-motion: reduce) {
  .work-idx__layer.parallax, .work-idx__row, .work-idx__co { transition: none; }
  .work-idx__row:focus-visible .work-idx__co { transform: none; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) {
  .work-idx__row:hover .work-idx__co { transform: none; }
}


/* ------------------------------------------------------------
   PJ03 · Before / after flow
   <section class="work-flow"><div class="wrap work-flow__grid">
     <div class="work-flow__copy">…h2… <div class="work-flow__result">figure + meaning</div>
       <dl class="work-flow__acts">…</dl> <a class="link">…</a></div>
     <div class="work-flow__panel">
       <div class="work-flow__top"><p class="work-flow__sku">…</p>
         <div class="work-flow__switch" role="group" hidden><button aria-pressed>Vorher</button>…</div></div>
       <div class="work-flow__map" id="PJ03-map" data-state="after|before">
         <ul class="work-flow__nodes"><li class="work-flow__node">system · qty (b/a) · note (b/a)</li> ×3</ul>
         <svg class="work-flow__wires" viewBox="0 0 600 80" preserveAspectRatio="none">3 paths</svg>
         <div class="work-flow__hub"><span class="work-flow__is-b">…</span><span class="work-flow__is-a">…</span></div>
       </div>
       <p class="work-flow__status" aria-live="polite">…</p></div></div></section>
   .work-flow__is-b shows in the "before" state, .work-flow__is-a in "after".
   ------------------------------------------------------------ */
.work-flow {
  --flow-big: calc(var(--fs-display) * 2);   /* the result figure */
  --flow-qty: calc(var(--fs-h2) * .62);      /* a stock figure in the map */
  --flow-swap: .8s;                          /* a figure rolling to its new value */
  --flow-wire: 1.25;                         /* wire stroke, px */
}
.work-flow__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--sp-8); align-items: center; }
.work-flow__copy h2 { max-width: 15ch; text-wrap: balance; }
.work-flow__result {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-5); align-items: center;
  margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--hairline);
}
.work-flow__big {
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--flow-big); line-height: .9; letter-spacing: var(--ls-head, var(--ls-display));
  color: var(--fg); font-variant-numeric: tabular-nums;
}
.work-flow__k { max-width: 30ch; color: var(--fg); text-wrap: pretty; }
.work-flow__acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); margin: var(--sp-6) 0 0; }
.work-flow__acts dt {
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-dim);
}
.work-flow__acts dd { margin: var(--sp-2) 0 0; font-size: var(--fs-small); line-height: 1.55; color: var(--fg-muted); text-wrap: pretty; hyphens: auto; }
.work-flow__copy > .link { margin-top: var(--sp-6); }

.work-flow__panel { padding: var(--sp-6); background: var(--bg-2); border: 1px solid var(--hairline); border-radius: var(--radius-card); }
.work-flow__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-5); }
.work-flow__sku { font-size: var(--fs-small); color: var(--fg-muted); }
.work-flow__switch { display: flex; gap: var(--sp-4); }
.work-flow__switch[hidden] { display: none; }
.work-flow__switch button {
  appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
  padding: var(--sp-1) 0; font: inherit; font-size: var(--fs-small); font-weight: 600;
  color: var(--fg-dim); cursor: pointer;
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out), scale .12s ease;
}
.work-flow__switch button:active { scale: .97; }
.work-flow__switch button[aria-pressed="true"] { color: var(--fg); border-bottom-color: var(--brand); }
@media (hover: hover) { .work-flow__switch button:hover { color: var(--fg); } }
/* 44px to tap on a touch screen (qa.mjs, 2026-09-11). */
@media (max-width: 900px) { .work-flow__switch button { min-height: 44px; } }

.work-flow__map { margin-top: var(--sp-6); }
.work-flow__nodes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.work-flow__node {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  margin-inline: var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--hairline); text-align: center;
}
.work-flow__sys { font-size: var(--fs-small); font-weight: 600; color: var(--fg-muted); }
.work-flow__qty {
  display: inline-flex; align-items: baseline; gap: .25em;
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--flow-qty); line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums;
}
.work-flow__qty small { font-family: var(--font-body); font-weight: 400; font-stretch: 100%; font-size: var(--fs-small); color: var(--fg-dim); }
/* A figure and its twin share one cell; the one that isn't current rolls
   out of the clipped cell and hides from assistive tech once it has. */
.work-flow__num { display: inline-grid; overflow: clip; padding-block: .06em; }
.work-flow__num > span, .work-flow__note > span, .work-flow__hub > span {
  grid-area: 1 / 1;
  transition: transform var(--flow-swap) var(--ease-out), opacity .45s var(--ease-out) .1s, visibility 0s;
}
.work-flow__note { display: inline-grid; justify-items: center; font-size: var(--fs-small); color: var(--fg-dim); }
.work-flow__note > span { display: inline-flex; align-items: center; gap: .35em; white-space: nowrap; }
.work-flow__note .ico { width: 1.15em; height: 1.15em; }
.work-flow__map[data-state="after"] .work-flow__is-b,
.work-flow__map[data-state="before"] .work-flow__is-a {
  opacity: 0; visibility: hidden;
  transition: transform var(--flow-swap) var(--ease-out), opacity .3s var(--ease-out), visibility 0s linear var(--flow-swap);
}
.work-flow__map[data-state="after"] .work-flow__num .work-flow__is-b { transform: translateY(-70%); }
.work-flow__map[data-state="before"] .work-flow__num .work-flow__is-a { transform: translateY(70%); }

.work-flow__wires { display: block; width: 100%; height: var(--sp-8); overflow: visible; }
.work-flow__wires path {
  fill: none; stroke: var(--fg-dim); stroke-width: var(--flow-wire);
  transition: opacity .5s var(--ease-out);
}
.work-flow__map[data-state="before"] .work-flow__wires path { stroke-dasharray: 3 6; opacity: .75; }

.work-flow__hub {
  display: grid; justify-items: center; width: fit-content; max-width: 100%; margin-inline: auto;
  padding: var(--sp-3) var(--sp-5); background: var(--bg); text-align: center;
  border: 1px solid var(--fg-dim); border-radius: var(--radius-btn);
}
.work-flow__map[data-state="before"] .work-flow__hub { border-style: dashed; }
.work-flow__hub > span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.work-flow__hub b {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--fs-h3); line-height: 1.2; color: var(--fg);
}
.work-flow__hub small { font-size: var(--fs-small); color: var(--fg-muted); }
.work-flow__status { margin: var(--sp-5) auto 0; max-width: none; text-align: center; font-size: var(--fs-small); color: var(--fg-dim); }

@media (max-width: 900px) {
  .work-flow__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .work-flow__copy h2 { max-width: 16ch; }
}
@media (max-width: 640px) {
  .work-flow { --flow-big: calc(var(--fs-display) * 1.8); --flow-qty: var(--fs-h3); }
  .work-flow__acts { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .work-flow__panel { padding: var(--sp-5) var(--sp-4); }
  .work-flow__node { margin-inline: var(--sp-1); }
  .work-flow__note { font-size: var(--fs-eyebrow); }
  /* The icon and its word may wrap: at 360 a node is 71px (qa.mjs, 2026-09-11). */
  .work-flow__note > span { white-space: normal; flex-wrap: wrap; justify-content: center; }
  .work-flow__hub { padding: var(--sp-2) var(--sp-4); }
  .work-flow__hub small { font-size: var(--fs-eyebrow); }
}
@media (prefers-reduced-motion: reduce) {
  .work-flow__num > span, .work-flow__note > span, .work-flow__hub > span,
  .work-flow__map[data-state] .work-flow__is-a, .work-flow__map[data-state] .work-flow__is-b,
  .work-flow__wires path, .work-flow__switch button { transition: none; }
  .work-flow__map[data-state] .work-flow__num > span { transform: none; }
}


/* ------------------------------------------------------------
   PJ04 · Flagship case, facts cut into the photo
   <section class="work-flag">
     <div class="wrap work-flag__head"><div>…h2…</div><div class="work-flag__aside"><p>…</p><a class="link">…</a></div></div>
     <div class="photo photo--band parallax work-flag__band"><img …></div>   (outside .wrap: full-bleed)
     <div class="work-flag__plate"><dl class="work-flag__facts" data-reveal-group>
       <div class="reveal"><dt>Kunde</dt><dd>…</dd></div> ×5
       <div class="work-flag__result reveal"><dt>Ergebnis</dt><dd><b>9</b><span>…</span></dd></div>
     </dl></div></section>
   The plate is solid page ground, so no text ever sits on the photo.
   ------------------------------------------------------------ */
.work-flag {
  --flag-lift: var(--sp-9);                    /* how far the plate cuts into the photo */
  --flag-fig: calc(var(--fs-display) * 1.5);   /* the result figure */
}
.work-flag__head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-6) var(--sp-8); align-items: end; margin-bottom: var(--sp-8);
}
.work-flag__head h2 { max-width: 16ch; text-wrap: balance; }
.work-flag__aside p { text-wrap: pretty; }
.work-flag__aside .link { margin-top: var(--sp-5); }
.work-flag__band.photo { border: 0; border-radius: 0; }
.work-flag__plate {
  position: relative; margin: calc(var(--flag-lift) * -1) 0 0 var(--gutter);
  padding: var(--sp-6) var(--gutter) 0 var(--sp-6);
  background: var(--bg); border-radius: var(--radius-card) 0 0 0;
}
.work-flag__facts {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.8fr);
  gap: var(--sp-5); margin: 0;
}
.work-flag__facts > div { padding-top: var(--sp-3); border-top: 1px solid var(--hairline); }
.work-flag__facts dt {
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-dim);
}
.work-flag__facts dd { margin: var(--sp-2) 0 0; line-height: 1.45; color: var(--fg); hyphens: auto; }
.work-flag__facts > .work-flag__result { border-top-color: var(--fg); }
.work-flag__result dd { display: flex; align-items: flex-end; gap: var(--sp-4); }
.work-flag__result b {
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--flag-fig); line-height: .82; letter-spacing: var(--ls-head, var(--ls-display)); font-variant-numeric: tabular-nums;
}
.work-flag__result span { max-width: 18ch; font-size: var(--fs-small); line-height: 1.4; color: var(--fg-muted); }

@media (max-width: 900px) {
  .work-flag__head { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--sp-7); }
  .work-flag__plate { margin: 0; padding: var(--sp-6) var(--gutter) 0; border-radius: 0; }
  .work-flag__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--sp-5); }
  .work-flag__facts > .work-flag__result { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .work-flag { --flag-fig: calc(var(--fs-display) * 1.4); }
  .work-flag__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
}


/* ------------------------------------------------------------
   PJ05 · Metric-led case cards, every third wide
   <section class="work-cards"><div class="wrap">
     <div class="work-cards__head">…h2… <a class="link">…</a></div>
     <div class="work-cards__grid" data-reveal-group>
       <a class="card work-cards__card reveal" href="…">
         <div class="work-cards__body"><p class="work-cards__fig"><b>11</b><span>…</span></p>
           <h3 class="card__title">…</h3><p class="card__meta">…</p></div>
         <div class="card__media"><img alt=""></div>
         <span class="card__go" aria-hidden="true"><span class="arrow"></span></span></a>
       <a class="card work-cards__card work-cards__card--wide reveal">media first, then the body</a>
     </div></div></section>
   Every third card spans the row: 2 · 1 · 2 · 1. The wide card's
   .work-cards__screen is a schematic; on a site it is the real screenshot.
   ------------------------------------------------------------ */
.work-cards {
  --cards-fig: calc(var(--fs-display) * 1.05);        /* a two-up card's figure */
  --cards-fig-wide: calc(var(--fs-display) * 1.5);    /* the wide card's figure  */
  --cards-ui: var(--fs-eyebrow);                      /* type inside the schematic */
}
.work-cards__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-5) var(--sp-7); }
.work-cards__head h2 { max-width: 16ch; text-wrap: balance; }
.work-cards__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); margin-top: var(--sp-8); }
.work-cards__body { flex: 1; display: flex; flex-direction: column; padding: var(--sp-5) var(--sp-5) var(--sp-6); }
.work-cards__fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-4); max-width: none; padding-right: calc(36px + var(--sp-4)); }
.work-cards__fig b {
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--cards-fig); line-height: 1; letter-spacing: var(--ls-head, var(--ls-display));
  color: var(--fg); font-variant-numeric: tabular-nums;
}
.work-cards__fig span { max-width: 26ch; font-size: var(--fs-small); line-height: 1.4; color: var(--fg-muted); }
.work-cards__card .card__title { margin: var(--sp-5) 0 0; padding-right: 0; max-width: 30ch; }
.work-cards__card .card__meta { margin: auto 0 0; padding-top: var(--sp-4); }
.work-cards__card .card__go { top: var(--sp-5); right: var(--sp-5); bottom: auto; }
.work-cards__card--wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.work-cards__card--wide .work-cards__body { padding: var(--sp-7) var(--sp-6); }
.work-cards__card--wide .work-cards__fig b { font-size: var(--cards-fig-wide); }

/* The schematic: an incoming mail and the quote drafted from it. */
.work-cards__screen { display: block; }
.work-cards__win {
  position: absolute; padding: var(--sp-3) var(--sp-4);
  background: var(--bg-3); border: 1px solid var(--hairline); border-radius: var(--img-radius-sm);
  font-size: var(--cards-ui); line-height: 1.45; color: var(--fg-muted);
}
.work-cards__win p { max-width: none; }
.work-cards__mail { left: 7%; top: 11%; width: 50%; }
.work-cards__draft { right: 7%; bottom: 11%; width: 48%; }
.work-cards__bar { display: flex; justify-content: space-between; gap: var(--sp-2); color: var(--fg-dim); }
.work-cards__bar b { color: var(--fg); font-weight: 600; }
.work-cards__subj { margin-top: var(--sp-1); color: var(--fg); font-weight: 600; }
.work-cards__skel { display: block; height: 6px; margin-top: var(--sp-2); border-radius: 3px; background: var(--hairline); }
.work-cards__skel--s { width: 62%; }
.work-cards__chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px var(--sp-1); border: 1px solid var(--hairline); border-radius: var(--img-radius-sm); }
.work-cards__chip .ico { width: 1.1em; height: 1.1em; }
.work-cards__line { display: flex; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-1); padding-top: var(--sp-1); border-top: 1px solid var(--hairline); font-variant-numeric: tabular-nums; }
.work-cards__line--sum { color: var(--fg); font-weight: 600; }

@media (max-width: 900px) {
  .work-cards__grid { margin-top: var(--sp-7); }
  .work-cards__card--wide { grid-template-columns: minmax(0, 1fr); }
  .work-cards__card--wide .work-cards__body { padding: var(--sp-5) var(--sp-5) var(--sp-6); }
}
@media (max-width: 640px) {
  .work-cards { --cards-fig: var(--fs-display); --cards-fig-wide: var(--fs-display); }
  .work-cards__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .work-cards__mail { left: 5%; top: 8%; width: 62%; }
  .work-cards__draft { right: 5%; bottom: 8%; width: 60%; }
  .work-cards__skel, .work-cards__skel--s, .work-cards__line:not(.work-cards__line--sum) { display: none; }
}


/* ------------------------------------------------------------
   PJ06 · Case facts sheet (Steckbrief)
   <section class="work-sheet"><div class="wrap work-sheet__grid">
     <div class="work-sheet__intro">…h2 (the result)… <p>…</p> <a class="link">…</a></div>
     <div class="work-sheet__sheet"><p class="eyebrow">Steckbrief</p>
       <dl class="work-sheet__list" data-reveal-group>
         <div class="reveal"><dt>Kunde</dt><dd>…</dd></div> ×6 (Systeme as .work-sheet__sys wordmarks)
         <div class="work-sheet__result reveal"><dt>Ergebnis</dt><dd><p class="work-sheet__fig"><b>11</b><span>…</span></p> …</dd></div>
       </dl><p class="work-sheet__src">Stand …</p></div></div></section>
   ------------------------------------------------------------ */
.work-sheet {
  --sheet-label: 9.5rem;                        /* the label column */
  --sheet-fig: calc(var(--fs-display) * 1.2);   /* the result figures */
}
.work-sheet__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); align-items: start; }
.work-sheet__intro h2 { max-width: 14ch; text-wrap: balance; }
.work-sheet__intro > p:not(.eyebrow) { margin-top: var(--sp-5); text-wrap: pretty; }
.work-sheet__intro > .link { margin-top: var(--sp-6); }
.work-sheet__list { margin: 0; border-top: 1px solid var(--fg); }
.work-sheet__list > div {
  display: grid; grid-template-columns: var(--sheet-label) minmax(0, 1fr); gap: var(--sp-4);
  padding-block: var(--sp-4); border-bottom: 1px solid var(--hairline);
}
.work-sheet__list dt {
  padding-top: .35em; font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-dim);
}
.work-sheet__list dd { margin: 0; font-size: var(--fs-lead); line-height: 1.45; color: var(--fg); }
.work-sheet__sys {
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  letter-spacing: var(--ls-head, var(--ls-display));
}
.work-sheet__sys + .work-sheet__sys { margin-left: var(--sp-5); }
.work-sheet__list > .work-sheet__result { padding-block: var(--sp-5); border-bottom-color: var(--fg); }
.work-sheet__result dd { display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-7); }
.work-sheet__fig b {
  display: block; font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--sheet-fig); line-height: 1; letter-spacing: var(--ls-head, var(--ls-display)); font-variant-numeric: tabular-nums;
}
.work-sheet__fig span { display: block; max-width: 22ch; margin-top: var(--sp-2); font-size: var(--fs-small); line-height: 1.4; color: var(--fg-muted); }
.work-sheet__src { margin-top: var(--sp-4); font-size: var(--fs-eyebrow); color: var(--fg-dim); }

@media (max-width: 900px) {
  .work-sheet__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .work-sheet__intro h2 { max-width: 16ch; }
}
@media (max-width: 640px) {
  .work-sheet { --sheet-fig: var(--fs-display); }
  .work-sheet__list > div { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); padding-block: var(--sp-3); }
  .work-sheet__list dt { padding-top: 0; }
  .work-sheet__list dd { font-size: var(--fs-body); }
  .work-sheet__result dd { gap: var(--sp-5); }
}


/* ------------------------------------------------------------
   PJ07 · Pinned case track on a year ruler
   <section class="work-track"><div class="work-track__stage"><div class="wrap work-track__grid">
     <div class="work-track__head">…h2… <p class="work-track__count" aria-hidden="true"><b>01</b><span>/ 06</span></p> <a class="link">…</a></div>
     <div class="work-track__view"><ol class="work-track__rail">
       <li class="work-track__item is-year"><p class="work-track__year">2024</p>
         <a class="work-track__card" href="…"><div class="photo photo--teaser work-track__media"><img alt=""></div>
           <p class="work-track__fig"><b>11</b><span>…</span></p><h3 class="work-track__co">Client<span class="arrow"></span></h3>
           <p class="work-track__meta">…</p></a></li> … 4–8
     </ol></div></div></div></section>
   A native swipe row without JS, under reduced motion and at ≤900px.
   Wider, JS adds .is-pinned and sets the height (rail overflow + 100vh).
   ------------------------------------------------------------ */
.work-track {
  --track-card: clamp(280px, 30vw, 500px);   /* card width */
  --track-drift: 8%;                          /* sideways overscan of each photo: its travel */
  position: relative; padding-block: 0;
}
.work-track__stage { padding-block: var(--section-pad); }
.work-track__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-7); align-items: center; }
.work-track__head h2 { max-width: 13ch; text-wrap: balance; }
.work-track__count {
  display: flex; align-items: baseline; gap: var(--sp-1); margin-top: var(--sp-6);
  font-size: var(--fs-small); color: var(--fg-dim); font-variant-numeric: tabular-nums;
}
.work-track__count b {
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--fs-h3); color: var(--fg);
}
.work-track:not(.is-pinned) .work-track__count { display: none; }
.work-track__head > .link { margin-top: var(--sp-5); }
.work-track__view {
  margin-right: calc(var(--gutter) * -1);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.work-track__view::-webkit-scrollbar { display: none; }
.work-track__rail { position: relative; display: flex; width: max-content; margin: 0; padding: 0 var(--gutter) 0 0; list-style: none; }
.work-track__item { flex: none; width: var(--track-card); padding-right: var(--sp-5); border-top: 1px solid var(--hairline); scroll-snap-align: start; }
.work-track__item:last-child { width: calc(var(--track-card) - var(--sp-5)); padding-right: 0; }
.work-track__year {
  position: relative; min-height: var(--sp-6); padding: var(--sp-2) 0 0 var(--sp-2);
  font-size: var(--fs-small); font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums;
}
.work-track__item.is-year .work-track__year::before {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: var(--sp-3); background: var(--fg);
}
.work-track__card { display: block; color: var(--fg); text-decoration: none; }
.work-track__fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-3); margin-top: var(--sp-4); max-width: none; }
.work-track__fig b {
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: calc(var(--fs-h2) * .62); line-height: 1.05; letter-spacing: var(--ls-head, var(--ls-display));
  color: var(--fg); font-variant-numeric: tabular-nums;
}
.work-track__fig span { font-size: var(--fs-small); color: var(--fg-muted); }
.work-track__co { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); font-size: var(--fs-h3); }
.work-track__co .arrow { font-size: var(--fs-body); color: var(--fg-dim); transition: color .3s; }
.work-track__meta { margin-top: var(--sp-1); font-size: var(--fs-small); color: var(--fg-dim); }
.work-track__card:focus-visible .arrow { color: var(--fg); }
.work-track__card:focus-visible .arrow::before { transform: translateX(170%); }
.work-track__card:focus-visible .arrow::after { transform: none; }
@media (hover: hover) {
  .work-track__card:hover .arrow { color: var(--fg); }
  .work-track__card:hover .arrow::before { transform: translateX(170%); }
  .work-track__card:hover .arrow::after { transform: none; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 901px) {
  .work-track.is-pinned .work-track__stage {
    position: sticky; top: 0; height: 100vh; overflow: clip;
    display: flex; align-items: center; padding-block: var(--sp-7);
  }
  .work-track.is-pinned .work-track__grid { width: 100%; }
  .work-track.is-pinned .work-track__view { overflow: clip; scroll-snap-type: none; }
  .work-track.is-pinned .work-track__rail { transform: translate3d(var(--track-x, 0px), 0, 0); will-change: transform; }
  .work-track.is-pinned .work-track__media img {
    left: 50%; right: auto; width: calc(100% + var(--track-drift) * 2); max-width: none;
    transform: translate3d(calc(-50% + var(--px, 0px)), 0, 0); will-change: transform;
  }
}

@media (max-width: 900px) {
  .work-track { --track-card: 46vw; }
  .work-track__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .work-track__head h2 { max-width: 16ch; }
  .work-track__view { margin-inline: calc(var(--gutter) * -1); scroll-padding-inline: var(--gutter); }
  .work-track__rail { padding-inline: var(--gutter); }
}
@media (max-width: 640px) {
  .work-track { --track-card: 80vw; }
  .work-track__fig b { font-size: var(--fs-h3); }
}
@media (prefers-reduced-motion: reduce) {
  .work-track__co .arrow { transition: none; }
}


/* ------------------------------------------------------------
   PJ08 · Filtered project ledger with counts
   <section class="work-all"><div class="wrap">…h2…
     <div class="work-all__bar">
       <div class="work-all__filters" role="group" hidden><button aria-pressed="true">Alle<span class="work-all__n">9</span></button>…</div>
       <p class="work-all__status" aria-live="polite">9 Projekte</p></div>
     <div class="work-all__cols" aria-hidden="true">Jahr · Kunde · Branche · Leistungen · Ergebnis</div>
     <ul class="work-all__list" id="PJ08-list">
       <li class="work-all__row" data-s="erp edi"><span class="work-all__y">2025</span>
         <span class="work-all__main"><a class="work-all__co" href="…">Client</a><span class="work-all__t">…</span></span>
         <span class="work-all__tags"><span class="work-all__sec">…</span><span class="work-all__svc">…</span></span>
         <span class="work-all__fig"><b>…</b><span>…</span></span><span class="arrow"></span></li> …
     </ul></div></section>
   The client link stretches over its row, so the whole row is one link.
   ------------------------------------------------------------ */
.work-all {
  --all-cols: 4.5rem minmax(0, 1.7fr) minmax(0, .75fr) minmax(0, .75fr) minmax(0, 1fr) 1em;
  --all-co: calc(var(--fs-h3) * 1.15);    /* client name */
  --all-fig: calc(var(--fs-h3) * 1.15);   /* result figure */
  --all-fade: .22s;
}
.work-all h2 { max-width: 16ch; text-wrap: balance; }
.work-all__bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-8); }
.work-all__filters { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.work-all__filters[hidden] { display: none; }
.work-all__filters button {
  appearance: none; display: inline-flex; align-items: baseline; gap: 5px;
  padding: var(--sp-1) 0; background: none; border: 0; border-bottom: 2px solid transparent;
  font: inherit; font-weight: 600; color: var(--fg-muted); cursor: pointer;
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out), scale .12s ease;
}
.work-all__filters button:active { scale: .97; }
.work-all__filters button[aria-pressed="true"] { color: var(--fg); border-bottom-color: var(--brand); }
@media (hover: hover) { .work-all__filters button:hover { color: var(--fg); } }
.work-all__n { position: relative; top: -.45em; font-size: var(--fs-eyebrow); font-weight: 400; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.work-all__status { font-size: var(--fs-small); color: var(--fg-dim); }
.work-all__cols {
  display: grid; grid-template-columns: var(--all-cols); column-gap: var(--sp-4);
  margin-top: var(--sp-5); padding-block: var(--sp-3); border-top: 1px solid var(--fg);
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-dim);
}
.work-all__cols > :last-child { text-align: right; }
.work-all__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--hairline); transition: opacity var(--all-fade) var(--ease-out); }
.work-all__list.is-switching { opacity: 0; }
.work-all__row {
  position: relative; display: grid; grid-template-columns: var(--all-cols);
  column-gap: var(--sp-4); align-items: baseline; padding-block: var(--sp-4); border-top: 1px solid var(--hairline);
}
.work-all__row[hidden] { display: none; }
.work-all__y { font-size: var(--fs-small); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.work-all__co {
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--all-co); line-height: 1.2; letter-spacing: var(--ls-head, var(--ls-display));
  color: var(--fg); text-decoration: none;
  text-decoration-thickness: 1px; text-underline-offset: .2em;
}
.work-all__co::after { content: ""; position: absolute; inset: 0; }
.work-all__co:focus-visible { outline-color: transparent; }
.work-all__row:has(.work-all__co:focus-visible) { outline: 2px solid var(--fg); outline-offset: 2px; }
.work-all__t { display: block; margin-top: 2px; max-width: 46ch; font-size: var(--fs-small); line-height: 1.45; color: var(--fg-muted); }
.work-all__tags { display: contents; }
.work-all__sec, .work-all__svc { font-size: var(--fs-small); color: var(--fg-muted); }
.work-all__fig { text-align: right; }
.work-all__fig b {
  display: block; font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--all-fig); line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--fg);
}
.work-all__fig span { display: block; font-size: var(--fs-small); line-height: 1.35; color: var(--fg-muted); }
.work-all__row .arrow { align-self: center; color: var(--fg-dim); transition: color .3s; }
.work-all__row:has(.work-all__co:focus-visible) .arrow::before { transform: translateX(170%); }
.work-all__row:has(.work-all__co:focus-visible) .arrow::after { transform: none; }
@media (hover: hover) {
  .work-all__row:hover .work-all__co { text-decoration-line: underline; }
  .work-all__row:hover .arrow { color: var(--fg); }
  .work-all__row:hover .arrow::before { transform: translateX(170%); }
  .work-all__row:hover .arrow::after { transform: none; }
}

@media (max-width: 900px) {
  .work-all__cols { display: none; }
  .work-all__list { border-top: 1px solid var(--fg); margin-top: var(--sp-4); }
  .work-all__row {
    grid-template-columns: 3.5rem minmax(0, 1fr) auto 1em;
    grid-template-areas: "y main fig go" "y tags fig go";
    row-gap: var(--sp-1);
  }
  .work-all__y { grid-area: y; }
  .work-all__main { grid-area: main; }
  .work-all__tags { grid-area: tags; display: block; }
  .work-all__sec::after { content: " · "; }
  .work-all__fig { grid-area: fig; }
  .work-all__row .arrow { grid-area: go; }
}
@media (max-width: 640px) {
  .work-all { --all-co: var(--fs-h3); --all-fig: var(--fs-lead); }
  .work-all__bar { margin-top: var(--sp-7); }
  .work-all__filters { gap: var(--sp-1) var(--sp-4); }
  .work-all__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "y go" "main main" "tags tags" "fig fig";
  }
  .work-all__fig { display: flex; align-items: baseline; gap: var(--sp-2); margin-top: var(--sp-1); text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .work-all__list, .work-all__row .arrow, .work-all__filters button { transition: none; }
}


/* ---- 2026-09-11 · BDG page view ---- */
/* PJ09–PJ11 · the Referenzen index: 22 real clients, three service filters,
   one case page. No per-client figures. No root paints a background. */
:where(.work-first, .work-matrix, .work-register) [hidden] { display: none; }
:where(.work-first, .work-matrix, .work-register) .eyebrow { margin-bottom: var(--sp-4); }
:is(.work-first, .work-matrix, .work-register) .work-first__head,
:is(.work-first, .work-matrix, .work-register) .work-matrix__head,
:is(.work-first, .work-matrix, .work-register) .work-register__head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--sp-6) var(--sp-8); align-items: end;
}
:is(.work-first__head, .work-matrix__head, .work-register__head) h2 { max-width: 16ch; text-wrap: balance; }
:is(.work-first__intro, .work-matrix__intro, .work-register__intro) { text-wrap: pretty; }

/* ---- PJ09 · One story leads, twenty-one follow ----
   <section class="work-first"><div class="wrap">
     <div class="work-first__head"><div> eyebrow · h2 </div><p class="work-first__intro">…</p></div>
     <div class="work-first__bar"><div class="work-first__filters" role="group" hidden><button aria-pressed="true" data-f="all">Alle</button> …</div>
       <p class="work-first__status" aria-live="polite">22 Kunden</p></div>
     <article class="work-first__story" data-s="eri"> .photo.parallax ·
       <div class="work-first__case"> label · h3.work-first__co · line · .work-first__ba (before · after list) · .link </div></article>
     <ul class="work-first__list" id="PJ09-list"><li class="work-first__item" data-s="ri"><b class="work-first__n">…</b><span class="work-first__l">…</span><span class="work-first__t">…</span></li> × 21</ul>
     <p class="work-first__empty" hidden>In dieser Kategorie …</p>
   </div></section> */
.work-first { --first-co: calc(var(--fs-h3) * 1.5); --first-fade: .22s; }
.work-first__bar {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-8); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--fg);
}
.work-first__filters { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); }
.work-first__filters button {
  appearance: none; padding: var(--sp-1) 0; background: none; border: 0; border-bottom: 2px solid transparent;
  font: inherit; font-weight: 600; color: var(--fg-muted); cursor: pointer;
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.work-first__filters button[aria-pressed="true"] { color: var(--fg); border-bottom-color: var(--brand); }
@media (hover: hover) { .work-first__filters button:hover { color: var(--fg); } }
.work-first__status { font-size: var(--fs-small); color: var(--fg-dim); }
.work-first__story {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--sp-6) var(--sp-8); align-items: center;
  padding-block: var(--sp-7); border-bottom: 1px solid var(--hairline);
}
.work-first__case { display: grid; gap: var(--sp-3); justify-items: start; }
.work-first__label { font-size: var(--fs-small); color: var(--fg-dim); }
.work-first__co { font-size: var(--first-co); line-height: 1.15; letter-spacing: var(--ls-head, normal); text-wrap: balance; }
.work-first__line { color: var(--fg-muted); max-width: 46ch; text-wrap: pretty; }
.work-first__ba { display: grid; gap: var(--sp-4); width: 100%; margin-block: var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--hairline); }
.work-first__before, .work-first__after { font-size: var(--fs-small); line-height: 1.55; color: var(--fg-muted); max-width: 52ch; }
.work-first__ba b {
  display: block; margin-bottom: var(--sp-1); font-family: var(--font-label, inherit); font-weight: 400;
  font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-dim);
}
.work-first__after ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.work-first__after li { display: flex; gap: var(--sp-2); color: var(--fg); }
.work-first__after svg {
  width: var(--icon-inline); height: var(--icon-inline); flex: none; margin-top: 1px;
  fill: none; stroke: var(--fg); stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round;
}
.work-first__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sp-7);
  transition: opacity var(--first-fade) var(--ease-out);
}
.work-first__list.is-switching { opacity: 0; }
.work-first__item { display: grid; gap: 2px; align-content: start; padding-block: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--hairline); }
.work-first__n {
  font-family: var(--font-head); font-stretch: var(--head-stretch, normal); font-weight: 700;
  font-size: var(--fs-lead); line-height: 1.3; letter-spacing: var(--ls-head, normal); color: var(--fg);
}
.work-first__l { font-size: var(--fs-small); line-height: 1.5; color: var(--fg-muted); text-wrap: pretty; }
.work-first__t { margin-top: var(--sp-1); font-size: var(--fs-small); color: var(--fg-dim); }
.work-first__empty { padding-block: var(--sp-6); font-size: var(--fs-lead); color: var(--fg); }

@media (max-width: 900px) {
  .work-first__head { grid-template-columns: minmax(0, 1fr); }
  .work-first__story { grid-template-columns: minmax(0, 1fr); }
  .work-first__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-5); }
}
@media (max-width: 640px) {
  .work-first { --first-co: var(--fs-h3); }
  .work-first__list { grid-template-columns: minmax(0, 1fr); }
  .work-first__bar { margin-top: var(--sp-7); }
  .work-first__filters { gap: 0 var(--sp-4); }
  .work-first__status { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .work-first__list, .work-first__filters button { transition: none; } }

/* ---- PJ10 · The service matrix ----
   <section class="work-matrix"><div class="wrap">
     <div class="work-matrix__head"> eyebrow · h2 | p </div>
     <table class="work-matrix__table" data-f="all"><caption class="work-matrix__cap">…</caption>
       <thead><tr><th class="work-matrix__hc"><button aria-pressed="true" data-f="all">Alle Kunden</button></th>
         <th class="work-matrix__hs"><button aria-pressed="false" data-f="r"><span class="work-matrix__long">ERP Einrichtung & Beratung</span><span class="work-matrix__short">ERP</span></button></th> × 3</tr></thead>
       <tbody id="PJ10-body"><tr data-s="ri"><th scope="row"><span class="work-matrix__co">…</span><span class="work-matrix__l">…</span></th>
         <td data-on="true"><span class="work-matrix__dot"></span><span class="work-matrix__sr">ja</span></td> × 3</tr> × 22</tbody>
       <tfoot><tr><th>Kunden je Leistung</th><td>19</td><td>7</td><td>21</td></tr></tfoot></table>
     <p class="work-matrix__empty" hidden>…</p><p class="work-matrix__status" aria-live="polite">22 Kunden</p>
   </div></section>
   A filled mark where the service was delivered, a quiet ring where not.
   The chosen column is tinted; its head takes the accent underline. */
.work-matrix {
  --mx-col: 10rem;
  --mx-dot: 12px;
  --mx-tint: color-mix(in srgb, var(--fg) 5%, transparent);
  --mx-fade: .22s;
}
.work-matrix__table { width: 100%; margin-top: var(--sp-8); border-collapse: collapse; }
.work-matrix__cap { caption-side: top; padding-bottom: var(--sp-4); text-align: left; font-size: var(--fs-small); color: var(--fg-dim); }
.work-matrix__table thead th { padding: 0 0 var(--sp-2); border-bottom: 1px solid var(--fg); text-align: left; vertical-align: bottom; font-weight: inherit; }
.work-matrix__table .work-matrix__hs { width: var(--mx-col); text-align: center; }
.work-matrix__table thead button {
  appearance: none; display: inline-block; padding: var(--sp-1) 0; background: none; border: 0; border-bottom: 2px solid transparent;
  font: inherit; font-size: var(--fs-small); font-weight: 600; line-height: 1.35; color: var(--fg-muted); text-align: inherit;
  cursor: pointer; transition: color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.work-matrix__table thead button:disabled { cursor: default; }
.work-matrix.is-live .work-matrix__table thead button[aria-pressed="true"] { color: var(--fg); border-bottom-color: var(--brand); }
@media (hover: hover) { .work-matrix.is-live .work-matrix__table thead button:hover { color: var(--fg); } }
.work-matrix__short { display: none; }
.work-matrix__table tbody { transition: opacity var(--mx-fade) var(--ease-out); }
.work-matrix__table tbody.is-switching { opacity: 0; }
.work-matrix__table tbody tr { border-bottom: 1px solid var(--hairline); }
.work-matrix__table tbody th { padding: var(--sp-3) var(--sp-5) var(--sp-3) 0; text-align: left; font-weight: inherit; }
.work-matrix__co { margin-right: var(--sp-3); font-weight: 600; color: var(--fg); }
.work-matrix__l { font-size: var(--fs-small); color: var(--fg-muted); }
.work-matrix__case { margin-left: var(--sp-3); padding-block: 0; font-size: var(--fs-small); }
.work-matrix__table td { padding: var(--sp-3) 0; text-align: center; vertical-align: middle; }
.work-matrix__dot {
  display: inline-block; width: var(--mx-dot); height: var(--mx-dot); vertical-align: middle;
  border: 1px solid var(--field-edge); border-radius: 50%;
}
.work-matrix__table td[data-on="true"] .work-matrix__dot { background: var(--fg); border-color: var(--fg); }
.work-matrix__sr { position: absolute; width: 1px; height: 1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; }
.work-matrix__table tfoot :is(th, td) { padding: var(--sp-3) 0; border-top: 1px solid var(--fg); }
.work-matrix__table tfoot th { text-align: left; font-weight: inherit; font-size: var(--fs-small); color: var(--fg-dim); }
.work-matrix__table tfoot td {
  text-align: center; font-family: var(--font-head); font-stretch: var(--head-stretch, normal); font-weight: 700;
  font-size: var(--fs-h3); color: var(--fg); font-variant-numeric: tabular-nums;
}
.work-matrix__table[data-f="r"] :is(td, th):nth-child(2),
.work-matrix__table[data-f="e"] :is(td, th):nth-child(3),
.work-matrix__table[data-f="i"] :is(td, th):nth-child(4) { background: var(--mx-tint); }
@media (hover: hover) { .work-matrix__table tbody tr:hover { background: var(--mx-tint); } }
.work-matrix__status { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--fg-dim); }
.work-matrix__empty { padding-block: var(--sp-5); font-size: var(--fs-lead); color: var(--fg); }

@media (max-width: 900px) {
  .work-matrix { --mx-col: 6.5rem; }
  .work-matrix__head { grid-template-columns: minmax(0, 1fr); }
  .work-matrix__co, .work-matrix__l { display: block; }
  .work-matrix__case { margin-left: 0; }
}
@media (max-width: 640px) {
  .work-matrix { --mx-col: 3.4rem; --mx-dot: 11px; }
  .work-matrix__long { display: none; }
  .work-matrix__short { display: inline; }
  .work-matrix__table tbody th { padding-right: var(--sp-3); }
  .work-matrix__table tfoot th { font-size: var(--fs-eyebrow); }
  .work-matrix__table tfoot td { font-size: var(--fs-lead); }
}
@media (prefers-reduced-motion: reduce) { .work-matrix__table tbody, .work-matrix__table thead button { transition: none; } }

/* ---- PJ11 · The register, searchable ----
   <section class="work-register"><div class="wrap">
     <div class="work-register__head"> eyebrow · h2 | p </div>
     <div class="work-register__tools" hidden> .field.work-register__search (label + input[type=search]) · fieldset.pills.work-register__filters (radio) </div>
     <p class="work-register__status" aria-live="polite">22 Kunden</p>
     <div class="work-register__cols" id="PJ11-list">
       <div class="work-register__letter"><p class="work-register__l">B</p><ul><li class="work-register__item" data-s="eri" data-k="…">
         b.work-register__n (a for the case) · span.work-register__line · span.work-register__t</li> …</ul></div> …
     </div>
     <div class="work-register__empty" hidden><p data-empty>…</p><button class="btn btn--ghost" data-reset>…</button></div>
   </div></section> */
.work-register { --reg-letter: calc(var(--fs-h3) * 1.6); --reg-cols: 3; --reg-fade: .22s; }
.work-register__tools {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--sp-5) var(--sp-8); align-items: end;
  margin-top: var(--sp-8);
}
.work-register__status { margin-top: var(--sp-6); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--fg); font-size: var(--fs-small); color: var(--fg-dim); }
.work-register__cols { columns: var(--reg-cols); column-gap: var(--sp-8); margin-top: var(--sp-6); transition: opacity var(--reg-fade) var(--ease-out); }
.work-register__cols.is-switching { opacity: 0; }
.work-register__letter { break-inside: avoid; padding-bottom: var(--sp-6); }
.work-register__l {
  margin-bottom: var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--hairline);
  font-family: var(--font-head); font-stretch: var(--head-stretch, normal); font-weight: 700;
  font-size: var(--reg-letter); line-height: 1; letter-spacing: var(--ls-head, normal); color: var(--fg-dim);
}
.work-register__letter ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.work-register__item { display: grid; gap: 2px; }
.work-register__n {
  justify-self: start; font-family: var(--font-head); font-stretch: var(--head-stretch, normal); font-weight: 700;
  font-size: var(--fs-lead); line-height: 1.3; letter-spacing: var(--ls-head, normal); color: var(--fg);
}
a.work-register__n { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-3); text-decoration: none; }
.work-register__case {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-family: var(--font-body); font-stretch: normal; font-size: var(--fs-small); font-weight: 600; letter-spacing: 0; color: var(--fg-muted);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
a.work-register__n .arrow { color: var(--fg-dim); }
a.work-register__n:focus-visible .arrow::before { transform: translateX(170%); }
a.work-register__n:focus-visible .arrow::after { transform: none; }
@media (hover: hover) {
  a.work-register__n:hover .work-register__case { color: var(--fg); text-decoration-color: var(--brand); }
  a.work-register__n:hover .arrow::before { transform: translateX(170%); }
  a.work-register__n:hover .arrow::after { transform: none; }
}
.work-register__line { font-size: var(--fs-small); line-height: 1.5; color: var(--fg-muted); text-wrap: pretty; }
.work-register__t { font-size: var(--fs-small); color: var(--fg-dim); }
.work-register__empty { display: grid; gap: var(--sp-4); justify-items: start; padding-block: var(--sp-6); }
.work-register__empty p { font-size: var(--fs-lead); color: var(--fg); }

@media (max-width: 900px) {
  .work-register { --reg-cols: 2; }
  .work-register__head, .work-register__tools { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .work-register { --reg-cols: 1; --reg-letter: var(--fs-h3); }
  .work-register__letter { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--sp-3); }
  .work-register__l { margin: 0; padding: 0; border: 0; padding-top: 2px; }
}
@media (prefers-reduced-motion: reduce) { .work-register__cols { transition: none; } }