/* ============================================================
   SECTIONS LAB · Blog & resources (BL) — .post-*
   Tokens only; anything else is a knob declared on its component.
   ============================================================ */

/* A title that underlines on hover: the line is a background, so it can
   draw in from the left and wrap with the text. */
:is(.post-lead__title, .post-essay__t) span {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .6s var(--ease-out);
}
/* Row arrows: quiet at rest, cycling on hover and focus (as .link's). */
:is(.post-line, .post-index__row, .post-shelf__item, .post-lib__item a, .post-essay) .arrow { opacity: .4; transition: opacity .3s; }
:is(.post-line, .post-index__row, .post-shelf__item, .post-lib__item a, .post-essay):focus-visible .arrow { opacity: 1; }
:is(.post-line, .post-index__row, .post-shelf__item, .post-lib__item a, .post-essay):focus-visible .arrow::before { transform: translateX(170%); }
:is(.post-line, .post-index__row, .post-shelf__item, .post-lib__item a, .post-essay):focus-visible .arrow::after { transform: none; }
@media (hover: hover) {
  :is(.post-line, .post-index__row, .post-shelf__item, .post-lib__item a, .post-essay):hover .arrow { opacity: 1; }
  :is(.post-line, .post-index__row, .post-shelf__item, .post-lib__item a, .post-essay):hover .arrow::before { transform: translateX(170%); }
  :is(.post-line, .post-index__row, .post-shelf__item, .post-lib__item a, .post-essay):hover .arrow::after { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.post-lead__title, .post-essay__t) span { transition: none; }
}

/* ---------- BL01 · Lead article and four lines ----------
   <section class="post-lead"><div class="wrap">
     <div class="post-lead__head"><div>eyebrow · h2</div> .link</div>
     <div class="post-lead__grid">
       <a class="post-lead__main">.photo.parallax · .post-lead__meta · h3.post-lead__title>span · .post-lead__sum</a>
       <ol class="post-lead__list"><li><a class="post-line"><span class="post-line__meta"><time>…</time> · Kat.</span><span class="post-line__t">…</span><span class="arrow"></span></a></li> ×4</ol>
   </div></div></section> */
.post-lead { --post-lead-title: calc(var(--fs-h2) * .62); }
.post-lead__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--sp-4) var(--sp-7); }
.post-lead__head h2 { max-width: 16ch; text-wrap: balance; }
.post-lead__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-8); margin-top: var(--sp-8); align-items: start; }
.post-lead__main { display: block; color: var(--fg); text-decoration: none; }
.post-lead__main .photo img { transition: scale 1s var(--ease-out); }
.post-lead__meta {
  margin-top: var(--sp-5); font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-dim);
}
.post-lead__title {
  margin-top: var(--sp-3); max-width: 24ch; font-size: var(--post-lead-title); line-height: 1.15;
  letter-spacing: var(--ls-head, -.02em); text-wrap: balance;
}
.post-lead__sum { margin-top: var(--sp-4); max-width: 52ch; text-wrap: pretty; }
.post-lead__main:focus-visible .post-lead__title span { background-size: 100% 1px; }
@media (hover: hover) {
  .post-lead__main:hover .photo img { scale: 1.04; }
  .post-lead__main:hover .post-lead__title span { background-size: 100% 1px; }
}
.post-lead__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.post-line {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-5); align-items: center;
  padding: var(--sp-5) 0; border-bottom: 1px solid var(--hairline); color: var(--fg); text-decoration: none;
}
.post-line__meta { font-size: var(--fs-small); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.post-line__t {
  grid-column: 1; font-family: var(--font-head); font-weight: 600; font-stretch: var(--head-stretch, normal);
  font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -.01em; text-wrap: pretty;
  transition: translate .5s var(--ease-out);
}
.post-line .arrow { grid-column: 2; grid-row: 1 / span 2; }
@media (hover: hover) { .post-line:hover .post-line__t { translate: var(--sp-1) 0; } }
.post-line:focus-visible .post-line__t { translate: var(--sp-1) 0; }
@media (max-width: 900px) {
  .post-lead__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); margin-top: var(--sp-7); }
  .post-lead { --post-lead-title: calc(var(--fs-h2) * .8); }
}
@media (max-width: 640px) {
  .post-lead__head .link { order: 3; }
  .post-lead__grid { margin-top: var(--sp-6); }
  .post-lead { --post-lead-title: var(--fs-h3); }
  .post-line__t { font-size: var(--fs-lead); }
}
@media (prefers-reduced-motion: reduce) {
  .post-lead__main .photo img, .post-line__t { transition: none; }
  .post-lead__main:hover .photo img { scale: 1; }
  .post-line:hover .post-line__t, .post-line:focus-visible .post-line__t { translate: none; }
}

/* ---------- BL02 · Text index, the hovered row shows its photo ----------
   <section class="post-index"><div class="wrap">
     <div class="post-index__head">eyebrow · h2</div>
     <div class="post-index__grid">
       <ol class="post-index__list" data-reveal-group><li class="reveal"><a class="post-index__row" data-i>
         <span class="post-index__date"><time/></span><span class="post-index__body"><span class="post-index__t"/><span class="post-index__s"/></span>
         <span class="post-index__cat"/><span class="arrow"/></a></li> …</ol>
       <div class="post-index__aside" aria-hidden="true"><div class="photo post-index__stack"><img class="is-on"> …</div></div>
     </div> .link
   </div></section> */
.post-index { --post-index-t: calc(var(--fs-h2) * .46); --post-index-top: var(--sp-8); }
.post-index__head h2 { max-width: 16ch; text-wrap: balance; }
.post-index__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--sp-8); margin-top: var(--sp-8); align-items: start; }
.post-index__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.post-index__row {
  display: grid; grid-template-columns: 7em minmax(0, 1fr) 8.5em 1em; gap: var(--sp-5); align-items: baseline;
  padding: var(--sp-5) 0 var(--sp-6); border-bottom: 1px solid var(--hairline); color: var(--fg); text-decoration: none;
}
.post-index__date, .post-index__cat { font-size: var(--fs-small); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.post-index__cat { text-align: right; }
.post-index__t {
  display: block; font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--post-index-t); line-height: 1.18; letter-spacing: var(--ls-head, -.02em); text-wrap: balance;
  transition: color .3s;
}
.post-index__s { display: block; margin-top: var(--sp-2); max-width: 58ch; font-size: var(--fs-small); line-height: 1.55; color: var(--fg-muted); text-wrap: pretty; }
.post-index__list.is-hovering .post-index__row:not(.is-cur) .post-index__t { color: var(--fg-dim); }
.post-index__aside { position: sticky; top: var(--post-index-top); }
.post-index__stack img { opacity: 0; transition: opacity .5s var(--ease-out); }
.post-index__stack img.is-on { opacity: 1; }
.post-index__all { margin-top: var(--sp-6); }
@media (max-width: 1100px) {
  .post-index__row { grid-template-columns: 6em minmax(0, 1fr) 1em; }
  .post-index__cat { display: none; }
}
@media (max-width: 900px) {
  .post-index__grid { grid-template-columns: minmax(0, 1fr); margin-top: var(--sp-7); }
  .post-index__aside { display: none; }
  .post-index__row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-4); }
  .post-index__date { grid-column: 1; }
  .post-index__body { grid-column: 1; }
  .post-index__row .arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .post-index { --post-index-t: calc(var(--fs-h2) * .72); }
}
@media (max-width: 640px) {
  .post-index { --post-index-t: var(--fs-lead); }
  .post-index__grid { margin-top: var(--sp-6); }
  .post-index__row { padding: var(--sp-4) 0; }
}
@media (prefers-reduced-motion: reduce) { .post-index__stack img, .post-index__t { transition: none; } }

/* ---------- BL03 · Three essays on a stepped line ----------
   <section class="post-essays"><div class="wrap">
     <div class="post-essays__head">eyebrow · h2</div>
     <ol class="post-essays__row"><li><a class="post-essay">.photo--people.parallax · .post-essay__go · .post-essay__meta · h3.post-essay__t>span</a></li> ×3</ol>
     .link
   </div></section> */
.post-essays { --post-step: var(--sp-9); --post-essay-t: calc(var(--fs-h2) * .44); }
.post-essays__head h2 { max-width: 16ch; text-wrap: balance; }
.post-essays__row { list-style: none; margin: var(--sp-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); align-items: start; }
.post-essays__row > li:nth-child(2) { padding-top: var(--post-step); }
.post-essays__row > li:nth-child(3) { padding-top: calc(var(--post-step) / 3); }
.post-essay { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--sp-4); color: var(--fg); text-decoration: none; }
.post-essay .photo { grid-column: 1 / -1; }
.post-essay .photo img { transition: scale 1s var(--ease-out); }
.post-essay__meta {
  grid-column: 1; margin-top: var(--sp-5); font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-dim);
}
.post-essay__t {
  grid-column: 1; margin-top: var(--sp-2); font-size: var(--post-essay-t); line-height: 1.18;
  letter-spacing: var(--ls-head, -.02em); text-wrap: balance;
}
.post-essay__go {
  grid-column: 2; grid-row: 2 / span 2; align-self: end;
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--fg); color: var(--bg); font-size: var(--fs-body);
  opacity: 0; transform: scale(.6); transition: opacity .3s, transform .5s var(--ease-out);
}
.post-essay .post-essay__go .arrow { opacity: 1; }
.post-essay:focus-visible .post-essay__go { opacity: 1; transform: none; }
.post-essay:focus-visible .post-essay__t span { background-size: 100% 1px; }
@media (hover: hover) {
  .post-essay:hover .photo img { scale: 1.04; }
  .post-essay:hover .post-essay__go { opacity: 1; transform: none; }
  .post-essay:hover .post-essay__t span { background-size: 100% 1px; }
}
@media (hover: none) { .post-essay__go { opacity: 1; transform: none; } }
.post-essays__all { margin-top: var(--sp-7); }
/* Tablets and phones: a native swipe row, edge to edge, snapping per essay. */
@media (max-width: 900px) {
  .post-essays__row {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 58%; gap: var(--sp-4);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    margin-top: var(--sp-7);
  }
  .post-essays__row > li { scroll-snap-align: start; }
  .post-essays__row > li:nth-child(n) { padding-top: 0; }
  .post-essays { --post-essay-t: var(--fs-h3); }
}
@media (max-width: 640px) {
  .post-essays__row { grid-auto-columns: 80%; margin-top: var(--sp-6); }
}
@media (prefers-reduced-motion: reduce) {
  .post-essay .photo img, .post-essay__go { transition: none; }
  .post-essay:hover .photo img { scale: 1; }
}

/* ---------- BL04 · Events, led by the date ----------
   <section class="post-events"><div class="wrap">
     <div class="post-events__head">eyebrow · h2</div>
     <ol class="post-events__list" data-reveal-group>
       <li class="post-event reveal"><time class="post-event__date"><b>24</b><span>Sep. 2026<br>Do.</span></time>
         <div class="post-event__body"><p class="post-event__kind">Webinar</p><h3 class="post-event__t">…</h3></div>
         <dl class="post-event__facts">Wo · Wann · Plätze</dl> .link.post-event__go</li> …
     </ol>
     <p class="post-events__missed">… .link</p>
   </div></section> */
.post-events { --post-day: calc(var(--fs-display) * 1.15); }
.post-events__head h2 { max-width: 16ch; text-wrap: balance; }
.post-events__list { list-style: none; margin: var(--sp-8) 0 0; padding: 0; border-top: 1px solid var(--hairline); }
.post-event {
  display: grid; grid-template-columns: minmax(10rem, 1.1fr) minmax(0, 3fr) minmax(0, 1.7fr) auto;
  gap: var(--sp-6); align-items: start; padding: var(--sp-6) 0; border-bottom: 1px solid var(--hairline);
}
.post-event__date { display: flex; align-items: flex-start; gap: var(--sp-3); color: var(--fg); }
.post-event__date b {
  font-family: var(--font-accent, var(--font-head)); font-weight: var(--fw-accent, 400);
  font-size: var(--post-day); line-height: .82; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.post-event__date span { padding-top: 2px; font-size: var(--fs-small); line-height: 1.4; color: var(--fg-muted); white-space: nowrap; }
.post-event__kind {
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--fg-dim);
}
.post-event__t { margin-top: var(--sp-2); max-width: 30ch; font-size: calc(var(--fs-h3) * 1.15); line-height: 1.25; text-wrap: balance; }
.post-event__facts { margin: 0; display: grid; gap: 4px; padding-top: 2px; }
.post-event__facts div { display: flex; gap: var(--sp-2); font-size: var(--fs-small); line-height: 1.45; }
.post-event__facts dt { flex: 0 0 4.2em; color: var(--fg-dim); }
.post-event__facts dd { margin: 0; color: var(--fg-muted); }
.post-event__go { align-self: center; white-space: nowrap; }
.post-events__missed { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); margin-top: var(--sp-6); max-width: none; }
@media (max-width: 1100px) {
  .post-event { grid-template-columns: minmax(9rem, auto) minmax(0, 1fr) auto; }
  .post-event__facts { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); }
  .post-event__go { grid-column: 3; grid-row: 1; align-self: start; }
}
@media (max-width: 900px) {
  .post-events { --post-day: calc(var(--fs-display) * 1.2); }
  .post-event { grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-4) var(--sp-5); }
  .post-event__date { grid-row: 1 / span 3; flex-direction: column; gap: var(--sp-1); }
  .post-event__body, .post-event__facts, .post-event__go { grid-column: 2; grid-row: auto; }
  .post-event__go { justify-self: start; }
}
@media (max-width: 640px) {
  .post-events { --post-day: var(--fs-display); }
  .post-events__list { margin-top: var(--sp-6); }
  .post-event { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-5) 0; }
  .post-event__date { grid-row: auto; flex-direction: row; align-items: flex-end; gap: var(--sp-3); }
  .post-event__body, .post-event__facts, .post-event__go { grid-column: 1; }
  .post-event__facts { display: grid; }
}

/* ---------- BL05 · News log, facts only ----------
   <section class="post-log"><div class="wrap post-log__grid">
     <div class="post-log__head">eyebrow · h2 · p</div>
     <ol class="post-log__list" data-reveal-group>
       <li class="post-log__year reveal">2026</li>
       <li class="post-log__item reveal"><time>02.09.</time><p>Fakt. <a class="link">…</a></p></li> …
   </div></section> */
.post-log__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--sp-9); align-items: start; }
.post-log__head h2 { max-width: 12ch; text-wrap: balance; }
.post-log__head p { margin-top: var(--sp-4); max-width: 30ch; }
.post-log__list { list-style: none; margin: 0; padding: 0; }
.post-log__year {
  padding: var(--sp-6) 0 var(--sp-2); 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-dim); font-variant-numeric: tabular-nums;
}
.post-log__year:first-child { padding-top: 0; }
.post-log__item { display: grid; grid-template-columns: 5em minmax(0, 1fr); gap: var(--sp-5); align-items: baseline; padding: var(--sp-4) 0; border-top: 1px solid var(--hairline); }
.post-log__item time { font-size: var(--fs-small); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.post-log__item p { max-width: 58ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--fg); text-wrap: pretty; }
.post-log__item .link { display: inline-flex; margin-left: var(--sp-1); padding-block: 0; font-size: var(--fs-small); white-space: nowrap; }
@media (max-width: 900px) {
  .post-log__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
}
@media (max-width: 640px) {
  .post-log__item { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
  .post-log__item p { font-size: var(--fs-body); }
}

/* ---------- BL06 · Topic shelves ----------
   <section class="post-shelves"><div class="wrap">
     <div class="post-shelves__head">eyebrow · h2</div>
     <div class="post-shelves__list" data-reveal-group>
       <div class="post-shelf reveal"><div class="post-shelf__topic"><h3>Thema</h3> .link</div>
         <ul class="post-shelf__items"><li><a class="post-shelf__item"><span class="post-shelf__m"/><span class="post-shelf__t"/><span class="arrow"/></a></li> ×3</ul></div> …
   </div></section> */
.post-shelves__head h2 { max-width: 16ch; text-wrap: balance; }
.post-shelves__list { margin-top: var(--sp-8); border-bottom: 1px solid var(--hairline); }
.post-shelf { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-7); padding: var(--sp-6) 0 var(--sp-7); border-top: 1px solid var(--hairline); }
.post-shelf__topic h3 { font-size: calc(var(--fs-h2) * .5); line-height: 1.15; letter-spacing: var(--ls-head, -.02em); text-wrap: balance; }
.post-shelf__topic .link { margin-top: var(--sp-3); }
.post-shelf__items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.post-shelf__items li { padding-inline: var(--sp-5); border-left: 1px solid var(--hairline); }
.post-shelf__items li:first-child { padding-left: 0; border-left: 0; }
.post-shelf__item { display: grid; gap: var(--sp-2); height: 100%; align-content: start; color: var(--fg); text-decoration: none; padding-top: 6px; }
.post-shelf__m { font-size: var(--fs-small); color: var(--fg-dim); }
.post-shelf__t {
  font-size: var(--fs-lead); font-weight: 600; line-height: 1.35; text-wrap: pretty;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .2em; text-decoration-thickness: 1px;
  transition: text-decoration-color .3s;
}
.post-shelf__item .arrow { margin-top: var(--sp-1); }
.post-shelf__item:focus-visible .post-shelf__t { text-decoration-color: currentColor; }
@media (hover: hover) { .post-shelf__item:hover .post-shelf__t { text-decoration-color: currentColor; } }
@media (max-width: 900px) {
  .post-shelf { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .post-shelf__topic { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sp-2) var(--sp-5); }
  .post-shelf__topic .link { margin-top: 0; }
  .post-shelf__items { grid-template-columns: minmax(0, 1fr); }
  .post-shelf__items li, .post-shelf__items li:first-child { padding: var(--sp-3) 0; border-left: 0; border-top: 1px solid var(--hairline); }
  .post-shelf__item { grid-template-columns: minmax(0, 1fr) auto; padding-top: 0; }
  .post-shelf__m, .post-shelf__t { grid-column: 1; }
  .post-shelf__item .arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-top: 0; }
}
@media (max-width: 640px) {
  .post-shelves__list { margin-top: var(--sp-6); }
  .post-shelf__topic h3 { font-size: var(--fs-h3); }
  .post-shelf__t { font-size: var(--fs-body); }
}
@media (prefers-reduced-motion: reduce) { .post-shelf__t { transition: none; } }

/* ---------- BL07 · Media library, a verb for every format ----------
   <section class="post-lib"><div class="wrap">
     <div class="post-lib__head">eyebrow · h2</div>
     <div class="post-lib__filters" hidden><div class="post-lib__group" role="group"><span class="post-lib__label">Thema</span><button aria-pressed>…</button> …</div> ×2</div>
     <p class="post-lib__count" aria-live="polite"></p>
     <ul class="post-lib__list"><li class="post-lib__item" data-type data-topic><a><span class="post-lib__type"/><span class="post-lib__t"/><span class="post-lib__meta"/><span class="post-lib__verb">Lesen<span class="arrow"/></span></a></li> …</ul>
     <p class="post-lib__empty" hidden>… <button class="post-lib__reset"/></p>
   </div></section> */
.post-lib__head h2 { max-width: 16ch; text-wrap: balance; }
.post-lib__filters { display: grid; gap: var(--sp-1); margin-top: var(--sp-8); }
.post-lib__filters[hidden] { display: none; }
.post-lib__group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-5); }
.post-lib__label {
  flex: 0 0 5.5em; font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-dim);
}
.post-lib__group button {
  appearance: none; background: none; border: 0; margin: 0; cursor: pointer;
  display: inline-flex; align-items: baseline; gap: 5px; padding: var(--sp-2) 0;
  font: 600 var(--fs-body) / 1.4 var(--font-body); color: var(--fg-muted);
  box-shadow: inset 0 -2px 0 transparent; transition: color .3s, box-shadow .3s var(--ease-out);
}
.post-lib__group button span { font-weight: 400; font-size: var(--fs-small); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.post-lib__group button[aria-pressed="true"] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--brand); }
@media (hover: hover) { .post-lib__group button:hover { color: var(--fg); } }
.post-lib__count { margin-top: var(--sp-6); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--hairline); max-width: none; font-size: var(--fs-small); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.post-lib__list { list-style: none; margin: 0; padding: 0; }
.post-lib__item[hidden] { display: none; }
.post-lib__item a {
  display: grid; grid-template-columns: 8.5em minmax(0, 1fr) 12em 10em; gap: var(--sp-5); align-items: baseline;
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--hairline); color: var(--fg); text-decoration: none;
}
.post-lib__type { font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-dim); }
.post-lib__t {
  font-size: var(--fs-lead); font-weight: 600; line-height: 1.35; text-wrap: pretty;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .2em; text-decoration-thickness: 1px;
  transition: text-decoration-color .3s;
}
.post-lib__meta { font-size: var(--fs-small); color: var(--fg-dim); }
.post-lib__verb { display: inline-flex; align-items: center; gap: var(--sp-1); justify-self: end; font-weight: 600; white-space: nowrap; }
.post-lib__item a:focus-visible .post-lib__t { text-decoration-color: currentColor; }
@media (hover: hover) { .post-lib__item a:hover .post-lib__t { text-decoration-color: currentColor; } }
.post-lib__list.is-swapping { animation: post-swap .4s var(--ease-out); }
@keyframes post-swap { from { opacity: .25; } to { opacity: 1; } }
.post-lib__empty { margin-top: var(--sp-6); font-size: var(--fs-lead); }
.post-lib__reset {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--fg);
  text-decoration: underline; text-underline-offset: .22em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
@media (max-width: 900px) {
  .post-lib__item a { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-4); }
  .post-lib__type, .post-lib__t, .post-lib__meta { grid-column: 1; }
  .post-lib__verb { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}
@media (max-width: 640px) {
  .post-lib__filters { margin-top: var(--sp-6); }
  .post-lib__group { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; gap: 0 var(--sp-4); }
  .post-lib__group > * { flex: none; }
  .post-lib__label { flex-basis: 4.5em; }
  .post-lib__t { font-size: var(--fs-body); }
  .post-lib__verb { font-size: var(--fs-small); }
}
@media (prefers-reduced-motion: reduce) {
  .post-lib__list.is-swapping { animation: none; }
  .post-lib__group button, .post-lib__t { transition: none; }
}

/* ---- 2026-09-11 · BDG page view ---- */

/* Shared by BL08–BL10: row arrows quiet at rest, cycling on hover and focus;
   the search's field sits at the house control height so the ghost submit
   lines up with it (the field itself is FI01, unchanged otherwise). */
:is(.post-tally__row, .post-map__node, .post-seek__topic, .post-seek__post) .arrow { opacity: .45; transition: opacity .3s; }
:is(.post-tally__row, .post-map__node, .post-seek__topic, .post-seek__post):focus-visible .arrow { opacity: 1; }
:is(.post-tally__row, .post-map__node, .post-seek__topic, .post-seek__post):focus-visible .arrow::before { transform: translateX(170%); }
:is(.post-tally__row, .post-map__node, .post-seek__topic, .post-seek__post):focus-visible .arrow::after { transform: none; }
@media (hover: hover) {
  :is(.post-tally__row, .post-map__node, .post-seek__topic, .post-seek__post):hover .arrow { opacity: 1; }
  :is(.post-tally__row, .post-map__node, .post-seek__topic, .post-seek__post):hover .arrow::before { transform: translateX(170%); }
  :is(.post-tally__row, .post-map__node, .post-seek__topic, .post-seek__post):hover .arrow::after { transform: none; }
}
:is(.post-tally__search, .post-map__search, .post-seek__search) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2); align-items: end; }
:is(.post-tally__search, .post-map__search, .post-seek__search) .field input { min-height: var(--btn-h); }
:is(.post-tally__search, .post-map__search, .post-seek__search) .btn .ico { width: var(--icon-inline); height: var(--icon-inline); }
@media (max-width: 640px) {
  :is(.post-tally__search, .post-map__search, .post-seek__search) { grid-template-columns: minmax(0, 1fr); }
  :is(.post-tally__search, .post-map__search, .post-seek__search) .btn { width: 100%; }
}

/* ---------- BL08 · Topic index, every article a tick ----------
   <section class="post-tally"><div class="wrap">
     <div class="post-tally__head"><div>eyebrow · h1</div><div class="post-tally__side">.lead · form.post-tally__search (.field + .btn--ghost)</div></div>
     <div class="post-tally__table">
       <div class="post-tally__cols"><span>6 Themenfelder</span><span aria-hidden>Beiträge</span></div>
       <ol class="post-tally__list"><li><a class="post-tally__row">
         <span class="post-tally__name"><h3/><span class="post-tally__line"/></span>
         <span class="post-tally__ticks" aria-hidden><i></i> ×n</span>
         <span class="post-tally__n"><b>12</b> <span>Beiträge</span></span> .arrow</a></li> …
         (still being built: div.post-tally__row--soon, three dashed ticks, "im Aufbau")
       <div class="post-tally__sum"><p>Aus Projekten …</p><p class="post-tally__n"><b>29</b> <span>Beiträge online</span></p></div>
   One grid for header, rows and total, so the count column adds up. */
.post-tally {
  --tally-cols: minmax(0, 6fr) minmax(0, 3fr) minmax(9rem, 1.3fr) 1.5rem;
  --tally-tick: 6px;
  --tally-h: 26px;
  --tally-gap: 5px;
  --tally-fig: calc(var(--fs-h2) * .6);
}
.post-tally__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-9); }
.post-tally__head h1 { max-width: 13ch; text-wrap: balance; }
.post-tally__side .lead { text-wrap: pretty; }
.post-tally__search { margin-top: var(--sp-6); }
.post-tally__cols, .post-tally__row, .post-tally__sum { display: grid; grid-template-columns: var(--tally-cols); gap: var(--sp-5); align-items: center; }
.post-tally__cols {
  padding-bottom: var(--sp-3);
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--fg-dim);
}
.post-tally__cols span:last-child { grid-column: 3; }
.post-tally__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.post-tally__row { padding-block: var(--sp-5); border-bottom: 1px solid var(--hairline); color: var(--fg); text-decoration: none; }
.post-tally__name h3 { font-size: calc(var(--fs-h2) * .42); line-height: 1.2; text-wrap: balance; transition: translate .5s var(--ease-out); }
.post-tally__line { display: block; margin-top: var(--sp-1); max-width: 54ch; font-size: var(--fs-small); line-height: 1.5; color: var(--fg-muted); text-wrap: pretty; }
.post-tally__ticks { display: flex; gap: var(--tally-gap); }
.post-tally__ticks i { flex: none; width: var(--tally-tick); height: var(--tally-h); border-radius: 1px; background: var(--fg-muted); transition: background-color .3s; }
.post-tally__n { display: flex; align-items: baseline; gap: var(--sp-1); max-width: none; font-size: var(--fs-small); color: var(--fg-muted); }
.post-tally__n b {
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--tally-fig); line-height: 1; letter-spacing: var(--ls-head, var(--ls-display));
  color: var(--fg); font-variant-numeric: tabular-nums;
}
.post-tally__row .arrow { justify-self: end; }
.post-tally__row--soon .post-tally__name h3 { color: var(--fg-muted); }
.post-tally__row--soon .post-tally__ticks i { background: none; border: 1px dashed var(--fg-dim); }
.post-tally__row--soon .post-tally__n { color: var(--fg-muted); }
.post-tally__sum { margin-top: -1px; padding-top: var(--sp-4); border-top: 1px solid var(--fg); }
.post-tally__sum > p:first-child { grid-column: 1 / 3; font-size: var(--fs-small); color: var(--fg-muted); }
.post-tally__sum .post-tally__n { grid-column: 3; }
.post-tally__row:focus-visible .post-tally__ticks i { background: var(--brand); }
@media (hover: hover) {
  a.post-tally__row:hover .post-tally__ticks i { background: var(--brand); }
  a.post-tally__row:hover .post-tally__name h3 { translate: var(--sp-1) 0; }
}
@media (max-width: 900px) {
  .post-tally__head { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--sp-8); }
  .post-tally__cols, .post-tally__sum { grid-template-columns: minmax(0, 1fr) auto; }
  .post-tally__cols span:last-child, .post-tally__sum .post-tally__n { grid-column: 2; }
  .post-tally__sum > p:first-child { grid-column: 1; }
  .post-tally__row { grid-template-columns: minmax(0, 1fr) auto 1.5rem; gap: var(--sp-3) var(--sp-4); }
  .post-tally__name { grid-column: 1 / -1; }
  .post-tally__ticks { grid-column: 1; }
}
@media (max-width: 640px) {
  .post-tally { --tally-h: 20px; --tally-tick: 5px; --tally-gap: 4px; --tally-fig: calc(var(--fs-h2) * .75); }
  .post-tally__name h3 { font-size: var(--fs-h3); }
  .post-tally__sum { grid-template-columns: minmax(0, 1fr); }
  .post-tally__sum .post-tally__n { grid-column: 1; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .post-tally__name h3, .post-tally__ticks i { transition: none; }
  a.post-tally__row:hover .post-tally__name h3 { translate: none; }
}

/* ---------- BL09 · The topics are the system map ----------
   <section class="post-map"><div class="wrap post-map__grid">
     <div class="post-map__intro">eyebrow · h1 · .lead · form.post-map__search · ul.post-map__facts</div>
     <nav class="post-map__sys">                       the boundary = Betrieb & Support
       a.post-map__ops (t + c · line)                  its label, top left
       div.post-map__node--ai.post-map__node--soon     dashed, wired down to ERP
       a.post-map__node--shop · a.post-map__node--erp.post-map__node--core · a.post-map__node--fin
         (span.post-map__c · .post-map__k · .post-map__t · .post-map__line · .arrow)
       span.post-map__bus                              the line joining them = Schnittstellen & EDI
       a.post-map__edi (t + c · line)                  its label, under the bus
   Grid areas and borders only, so it reflows on phones. */
.post-map {
  --map-line: color-mix(in srgb, var(--fg) 30%, transparent);
  --map-gap: var(--sp-6);
  --map-fig: calc(var(--fs-display) * .8);
  --map-leg: 18px;
}
.post-map__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); align-items: center; }
.post-map__intro h1 { max-width: 12ch; text-wrap: balance; }
.post-map__intro .lead { margin-top: var(--sp-5); text-wrap: pretty; }
.post-map__search { margin-top: var(--sp-6); }
.post-map__facts {
  list-style: none; margin: var(--sp-6) 0 0; padding: var(--sp-4) 0 0; border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-size: var(--fs-small); color: var(--fg-muted);
}
.post-map__facts b { color: var(--fg); font-weight: 700; font-variant-numeric: tabular-nums; }
.post-map__sys {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-areas: "ops soon ." "shop erp fin" "bus bus bus" ". edi .";
  gap: var(--map-gap) var(--sp-4); padding: var(--sp-5);
  border: 1px solid var(--map-line); border-radius: var(--radius-card); transition: border-color .3s;
}
.post-map__ops { grid-area: ops; align-self: start; }
.post-map__node--ai { grid-area: soon; }
.post-map__node--shop { grid-area: shop; }
.post-map__node--erp { grid-area: erp; }
.post-map__node--fin { grid-area: fin; }
.post-map__edi { grid-area: edi; justify-self: center; margin-top: calc(var(--map-gap) * -1 + var(--sp-2)); text-align: center; }
:is(.post-map__ops, .post-map__edi) { display: grid; gap: 2px; color: var(--fg); text-decoration: none; }
:is(.post-map__ops, .post-map__edi) .post-map__t { font-weight: 600; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .22em; transition: text-decoration-color .3s; }
:is(.post-map__ops, .post-map__edi) .post-map__c { margin-left: var(--sp-1); font-family: var(--font-body); font-stretch: normal; font-size: inherit; line-height: inherit; letter-spacing: 0; font-weight: 400; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
:is(.post-map__ops, .post-map__edi) .post-map__line { max-width: 30ch; }
.post-map__node {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: var(--sp-4);
  border: 1px solid var(--map-line); border-radius: var(--radius-card); color: var(--fg); text-decoration: none;
  transition: border-color .3s;
}
.post-map__node--core { border-color: color-mix(in srgb, var(--fg) 70%, transparent); }
.post-map__c {
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--map-fig); line-height: 1; letter-spacing: var(--ls-head, var(--ls-display));
  color: var(--fg); font-variant-numeric: tabular-nums;
}
.post-map__k { order: 1; margin-top: 4px; font-size: var(--fs-small); color: var(--fg-dim); }
.post-map__node .post-map__t { order: 2; margin-top: var(--sp-4); font-size: var(--fs-lead); font-weight: 600; line-height: 1.25; text-wrap: balance; }
.post-map__line { order: 3; margin-top: var(--sp-1); font-size: var(--fs-small); line-height: 1.5; color: var(--fg-muted); text-wrap: pretty; }
.post-map__node .arrow { position: absolute; top: var(--sp-4); right: var(--sp-4); }
.post-map__node--soon { border-style: dashed; }
.post-map__node--soon .post-map__c { display: none; }
.post-map__node--soon .post-map__k { margin-top: 0; }
.post-map__node--soon .post-map__c, .post-map__node--soon .post-map__t { color: var(--fg-muted); }
.post-map__node--soon::after {
  content: ""; position: absolute; top: 100%; left: 50%; height: var(--map-gap);
  border-left: 1px dashed var(--map-line);
}
.post-map__bus {
  grid-area: bus; position: relative; height: calc(var(--map-gap) + var(--map-leg));
  margin: calc(var(--map-gap) * -1) 15% 0; border: 1px solid var(--map-line); border-top: 0; transition: border-color .3s;
}
.post-map__bus::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px solid var(--map-line); transition: border-color .3s; }
.post-map__node:focus-visible { border-color: var(--fg); }
.post-map__sys:has(.post-map__edi:focus-visible) .post-map__bus,
.post-map__sys:has(.post-map__edi:focus-visible) .post-map__bus::before { border-color: var(--brand); }
@media (hover: hover) {
  a.post-map__node:hover { border-color: var(--fg); }
  .post-map__sys:has(.post-map__edi:hover) .post-map__bus,
  .post-map__sys:has(.post-map__edi:hover) .post-map__bus::before { border-color: var(--brand); }
  .post-map__sys:has(.post-map__ops:hover) { border-color: var(--brand); }
  :is(.post-map__ops, .post-map__edi):hover .post-map__t { text-decoration-color: currentColor; }
}
@media (max-width: 1100px) {
  .post-map__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .post-map__intro h1 { max-width: 16ch; }
}
@media (max-width: 640px) {
  .post-map { --map-fig: calc(var(--fs-display) * .75); --map-gap: var(--sp-5); }
  .post-map__sys {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "ops ops" "soon soon" "erp erp" "shop fin" "bus bus" "edi edi";
    gap: var(--map-gap) var(--sp-3); padding: var(--sp-4);
  }
  .post-map__bus { margin-inline: 25%; }
  .post-map__bus::before { display: none; }
  .post-map__node { padding: var(--sp-3); }
  .post-map__node .arrow { top: var(--sp-3); right: var(--sp-3); }
}
@media (prefers-reduced-motion: reduce) {
  .post-map__sys, .post-map__node, .post-map__bus, .post-map__bus::before, :is(.post-map__ops, .post-map__edi) .post-map__t { transition: none; }
}

/* ---------- BL10 · Search first, the topics answer ----------
   <section class="post-seek"><div class="wrap">
     <div class="post-seek__top">
       <div class="post-seek__main">eyebrow · h1 · form.post-seek__search</div>
       <div class="post-seek__side">.lead · dl.post-seek__facts (2) · p.post-seek__from</div>
     <div class="post-seek__res">
       p.post-seek__status[aria-live]
       ul.post-seek__topics > li[data-find] > a.post-seek__topic (t · line · n · .arrow) ×6   largest first
       ol.post-seek__posts[hidden] > li[data-find] > a.post-seek__post (meta · pt · .arrow) ×8
       p.post-seek__none[hidden] (+ .link)
   Rows are hidden, never reordered; .is-swapping fades the results once. */
.post-seek { --seek-fig: calc(var(--fs-display) * .9); }
.post-seek__top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--sp-6) var(--sp-9); align-items: end; }
.post-seek__main h1 { max-width: 14ch; text-wrap: balance; }
.post-seek__search { margin-top: var(--sp-7); max-width: 44rem; }
.post-seek__side .lead { text-wrap: pretty; }
.post-seek__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: var(--sp-6) 0 0; border-top: 1px solid var(--hairline); }
.post-seek__facts > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding-top: var(--sp-4); }
.post-seek__facts > div + div { padding-left: var(--sp-5); border-left: 1px solid var(--hairline); }
.post-seek__facts dt { margin-top: var(--sp-1); font-size: var(--fs-small); color: var(--fg-muted); }
.post-seek__facts dd {
  margin: 0; font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--seek-fig); line-height: 1; letter-spacing: var(--ls-head, var(--ls-display)); color: var(--fg); font-variant-numeric: tabular-nums;
}
.post-seek__from { margin-top: var(--sp-4); font-size: var(--fs-small); }
.post-seek__res { margin-top: var(--sp-9); }
.post-seek__status { max-width: none; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--hairline); font-size: var(--fs-small); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.post-seek__topics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sp-6); }
.post-seek__topics > li { border-bottom: 1px solid var(--hairline); }
.post-seek__topics > li[hidden], .post-seek__posts > li[hidden], .post-seek__posts[hidden], .post-seek__none[hidden] { display: none; }
.post-seek__topic { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-4); height: 100%; padding-block: var(--sp-5); color: var(--fg); text-decoration: none; }
.post-seek__t { font-size: var(--fs-lead); font-weight: 600; line-height: 1.3; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .2em; transition: text-decoration-color .3s; }
.post-seek__line { grid-column: 1; font-size: var(--fs-small); line-height: 1.5; color: var(--fg-muted); text-wrap: pretty; }
.post-seek__n { grid-column: 1; margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--fg-dim); }
.post-seek__n b { margin-right: 4px; font-family: var(--font-head); font-size: var(--fs-h3); color: var(--fg); font-variant-numeric: tabular-nums; }
.post-seek__topic .arrow { grid-column: 2; grid-row: 1; margin-top: 4px; }
.post-seek__topic--soon .post-seek__t { color: var(--fg-muted); }
.post-seek__posts { list-style: none; margin: var(--sp-6) 0 0; padding: 0; border-top: 1px solid var(--hairline); }
.post-seek__post { display: grid; grid-template-columns: minmax(0, 1fr) 1.5rem; gap: var(--sp-1) var(--sp-5); align-items: center; padding-block: var(--sp-4); border-bottom: 1px solid var(--hairline); color: var(--fg); text-decoration: none; }
.post-seek__meta { grid-column: 1; font-size: var(--fs-small); color: var(--fg-dim); }
.post-seek__pt { grid-column: 1; font-size: var(--fs-lead); font-weight: 600; line-height: 1.35; text-wrap: pretty; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .2em; transition: text-decoration-color .3s; }
.post-seek__post .arrow { grid-column: 2; grid-row: 1 / span 2; }
.post-seek__none { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-5); max-width: none; font-size: var(--fs-lead); color: var(--fg); }
:is(.post-seek__topic, .post-seek__post):focus-visible :is(.post-seek__t, .post-seek__pt) { text-decoration-color: currentColor; }
@media (hover: hover) { :is(.post-seek__topic, .post-seek__post):hover :is(.post-seek__t, .post-seek__pt) { text-decoration-color: currentColor; } }
.post-seek__res.is-swapping { animation: post-seek-in .3s var(--ease-out); }
@keyframes post-seek-in { from { opacity: .35; } to { opacity: 1; } }
@media (max-width: 900px) {
  .post-seek__top { grid-template-columns: minmax(0, 1fr); }
  .post-seek__topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-seek__res { margin-top: var(--sp-8); }
}
@media (max-width: 640px) {
  .post-seek__topics { grid-template-columns: minmax(0, 1fr); }
  .post-seek__search { margin-top: var(--sp-6); }
  .post-seek__topic { padding-block: var(--sp-4); }
}
@media (prefers-reduced-motion: reduce) {
  .post-seek__res.is-swapping { animation: none; }
  .post-seek__t, .post-seek__pt { transition: none; }
}