/* ============================================================
   SECTIONS LAB · Sub-services & explainers (IF) — .feat-*
   Tokens only; anything else is a knob declared on its root.
   ============================================================ */

/* ------------------------------------------------------------
   IF01 · The order travels through the systems
   <section class="feat-route" style="--route-i:4">
     <div class="wrap">
       <div class="feat-route__head">.eyebrow h2 .lead</div>
       <div class="feat-route__body">
         <ol class="feat-route__steps">
           <li class="feat-route__step" data-status="Eingegangen">
             <p class="feat-route__meta"><span>01</span>Shop · 08:02</p> <h3>…</h3> <p>…</p>
             <div class="feat-route__mini"><ol class="feat-route__strip">…</ol><p>…</p></div>
           </li> … 4–6 steps
         </ol>
         <div class="feat-route__stage"><div class="feat-route__pin">
           <div class="feat-route__ticket">thead · cust · items · sum · log</div>
           <div class="feat-route__line"><ol class="feat-route__stations">…</ol><span class="feat-route__mark"></span></div>
         </div></div>
       </div>
     </div>
   </section>
   Without .is-armed (no JS, reduced motion) the ticket shows the whole
   run. JS writes --route-i and data-on / data-state only.
   ------------------------------------------------------------ */
.feat-route {
  --route-step-h: 74vh;                       /* scroll per step while pinned */
  --route-h3: calc(var(--fs-h2) * .46);
  --route-ticket-w: 560px;
  --route-mark: var(--brand);                  /* the one small brand state  */
}
.feat-route__head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 0 var(--sp-8); align-items: end;
}
.feat-route__head .eyebrow { grid-column: 1 / -1; }
.feat-route__head h2 { text-wrap: balance; }
.feat-route__head .lead { text-wrap: pretty; }

.feat-route__body {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--sp-9); margin-top: var(--sp-8);
}
.feat-route__steps { list-style: none; margin: 0; padding: 0; }
.feat-route__step { padding-block: var(--sp-6); border-top: 1px solid var(--hairline); }
.feat-route__meta {
  display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-3);
  font-size: var(--fs-small); color: var(--fg-dim); font-variant-numeric: tabular-nums;
}
.feat-route__meta span { color: var(--fg); font-weight: 600; }
.feat-route__step h3 {
  max-width: 20ch; font-size: var(--route-h3); line-height: 1.18;
  letter-spacing: var(--ls-head, -.02em); text-wrap: balance;
}
.feat-route__step > p:not(.feat-route__meta) { margin-top: var(--sp-3); max-width: 44ch; text-wrap: pretty; }

/* the stage: a schematic order ticket (not a screenshot) and its route */
.feat-route__stage { position: relative; min-width: 0; }
.feat-route__pin { display: grid; gap: var(--sp-6); align-content: start; justify-items: start; }
.feat-route__ticket {
  width: min(100%, var(--route-ticket-w));
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  background: var(--bg-3); border: 1px solid var(--hairline); border-radius: var(--radius-card);
  font-size: var(--fs-small); line-height: 1.5; font-variant-numeric: tabular-nums;
}
.feat-route__ticket p { max-width: none; }
.feat-route__thead {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4);
  padding-bottom: var(--sp-4); border-bottom: 1px solid var(--hairline);
}
.feat-route__k {
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-dim);
}
.feat-route__no {
  margin-top: 2px; color: var(--fg);
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--fs-h3); letter-spacing: -.01em;
}
.feat-route__status { display: grid; justify-items: end; gap: 6px; }
.feat-route__status b {
  padding: 3px 12px; border: 1px solid color-mix(in srgb, var(--fg) 32%, transparent);
  border-radius: var(--radius-btn); color: var(--fg); font-weight: 600;
}
.feat-route__cust { margin-top: var(--sp-3); color: var(--fg-muted); }
.feat-route__items { list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.feat-route__items li {
  display: grid; grid-template-columns: 4em minmax(0, 1fr) auto; gap: var(--sp-3);
  padding-block: 5px; color: var(--fg-muted);
}
.feat-route__items li > :last-child { color: var(--fg); text-align: right; }
.feat-route__sum {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--hairline);
  color: var(--fg); font-weight: 600;
}
.feat-route__log {
  list-style: none; margin: var(--sp-4) 0 0; padding: var(--sp-3) 0 0;
  border-top: 1px solid var(--hairline); display: grid; gap: var(--sp-1);
}
.feat-route__log li {
  display: grid; grid-template-columns: 3.4em 5.2em minmax(0, 1fr); gap: var(--sp-2);
  color: var(--fg-muted); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.feat-route__log time { color: var(--fg-dim); }
.feat-route__log b { color: var(--fg); font-weight: 600; }

.feat-route__line { position: relative; width: min(100%, var(--route-ticket-w)); }
.feat-route__stations {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
}
.feat-route__stations li {
  position: relative; display: grid; justify-items: center; gap: 2px;
  padding-top: var(--sp-3); text-align: center; font-size: var(--fs-small); line-height: 1.3;
}
.feat-route__stations li::before {
  content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px;
  border: 1px solid var(--fg-dim); border-radius: 50%; background: var(--bg);
  transition: background-color .4s;
}
.feat-route__stations li[data-state="done"]::before { background: var(--fg-dim); }
.feat-route__stations b { color: var(--fg); font-weight: 600; transition: color .4s; }
.feat-route__stations li[data-state="next"] b { color: var(--fg-dim); }
.feat-route__stations span { color: var(--fg-dim); font-size: var(--fs-eyebrow); }
.feat-route__mark {
  position: absolute; top: -5px; left: 0; width: 20%; height: 9px; pointer-events: none;
  transform: translateX(calc(var(--route-i, 4) * 100%));
  transition: transform .9s var(--ease-out);
}
.feat-route__mark::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 9px; height: 9px; margin-left: -4.5px;
  background: var(--route-mark);
}

/* phones: each step carries its own route strip instead of the stage */
.feat-route__mini { display: none; margin-top: var(--sp-5); }
.feat-route__strip {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
}
.feat-route__strip li { position: relative; padding-top: var(--sp-2); font-size: var(--fs-eyebrow); }
.feat-route__strip li::before {
  content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px;
  border: 1px solid var(--fg-dim); border-radius: 50%; background: var(--bg);
}
.feat-route__strip li[data-state="done"]::before { background: var(--fg-dim); }
.feat-route__strip li[data-state="now"]::before { border-radius: 0; border-color: var(--route-mark); background: var(--route-mark); }
.feat-route__strip b { display: block; color: var(--fg-dim); font-weight: 600; }
.feat-route__strip li[data-state="now"] b { color: var(--fg); }
.feat-route__strip span { display: none; }
.feat-route__mini > p { margin-top: var(--sp-3); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.feat-route__mini time { color: var(--fg-dim); margin-right: var(--sp-1); }

/* pinned, desktop only */
@media (min-width: 901px) {
  .feat-route.is-armed .feat-route__body { margin-top: 0; }
  .feat-route.is-armed .feat-route__pin { position: sticky; top: 0; height: 100vh; align-content: center; }
  .feat-route.is-armed .feat-route__step {
    display: grid; align-content: center; min-height: var(--route-step-h);
    padding-block: var(--sp-5); border-top: 0;
    transition: opacity .5s var(--ease-out);
  }
  .feat-route.is-armed .feat-route__step[data-on="false"] { opacity: .3; }
  .feat-route.is-armed .feat-route__log li[data-on="false"] { opacity: 0; transform: translateY(6px); }
}
@media (max-width: 900px) {
  .feat-route__head { grid-template-columns: minmax(0, 1fr); }
  .feat-route__head .lead { margin-top: var(--sp-4); }
  .feat-route__body { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: var(--sp-7); }
  .feat-route__stage { display: none; }
  .feat-route__mini { display: block; }
  .feat-route__step:last-child { border-bottom: 1px solid var(--hairline); }
}
@media (max-width: 640px) {
  .feat-route { --route-h3: calc(var(--fs-h3) * 1.1); }
  .feat-route__step { padding-block: var(--sp-5) var(--sp-6); }
}
@media (prefers-reduced-motion: reduce) {
  .feat-route__mark, .feat-route__log li, .feat-route__step, .feat-route__stations b { transition: none; }
}

/* ------------------------------------------------------------
   IF02 · System map that explains itself
   <section class="feat-map" data-sel="erp">
     <div class="wrap">
       <div class="feat-map__head">…</div>
       <div class="feat-map__body">
         <div class="feat-map__diagram">
           <svg class="feat-map__svg" viewBox="0 0 100 100" preserveAspectRatio="none"><line class="feat-map__line" data-to="shop" …/> …</svg>
           <span class="feat-map__flow" data-to="shop" style="--x:…;--y:…">Bestellungen ⇄ Bestände</span> …
           <div class="feat-map__nodes" role="tablist">
             <button class="feat-map__node" role="tab" aria-selected aria-controls data-node="shop" style="--x:15%;--y:17%"><b>Shop</b><span>…</span></button> … ≤5
           </div>
         </div>
         <div class="feat-map__panels"><div class="feat-map__panel" role="tabpanel" data-on="true">…</div> …</div>
       </div>
     </div>
   </section>
   Star topology: one hub, up to four spokes. Without JS every panel
   is listed; armed, they stack in one cell and crossfade.
   ------------------------------------------------------------ */
.feat-map {
  --map-ratio: 16 / 11;
  --map-line: var(--hairline);
  --map-line-on: color-mix(in srgb, var(--fg) 55%, transparent);
  --map-mark: var(--brand);
  background: var(--bg-2);
}
.feat-map__head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-4) var(--sp-8); align-items: end;
}
.feat-map__head h2 { text-wrap: balance; }
.feat-map__head .lead { text-wrap: pretty; }
.feat-map__body {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-8); align-items: center; margin-top: var(--sp-8);
}
.feat-map__diagram { position: relative; aspect-ratio: var(--map-ratio); }
.feat-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.feat-map__line {
  stroke: var(--map-line); stroke-width: 1.5; vector-effect: non-scaling-stroke;
  transition: stroke .35s var(--ease-out);
}
.feat-map__flow {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  padding: 2px var(--sp-1); background: var(--bg-2);
  color: var(--fg-dim); font-size: var(--fs-small); white-space: nowrap;
  transition: color .35s;
}
.feat-map[data-sel="erp"] .feat-map__line,
.feat-map[data-sel="shop"] .feat-map__line[data-to="shop"],
.feat-map[data-sel="edi"] .feat-map__line[data-to="edi"],
.feat-map[data-sel="wms"] .feat-map__line[data-to="wms"],
.feat-map[data-sel="fibu"] .feat-map__line[data-to="fibu"] { stroke: var(--map-line-on); }
.feat-map[data-sel="erp"] .feat-map__flow,
.feat-map[data-sel="shop"] .feat-map__flow[data-to="shop"],
.feat-map[data-sel="edi"] .feat-map__flow[data-to="edi"],
.feat-map[data-sel="wms"] .feat-map__flow[data-to="wms"],
.feat-map[data-sel="fibu"] .feat-map__flow[data-to="fibu"] { color: var(--fg); }

.feat-map__nodes { position: absolute; inset: 0; }
.feat-map__node {
  position: absolute; left: var(--x); top: var(--y); translate: -50% -50%;
  display: grid; justify-items: start; gap: 2px; width: 12.5em;
  padding: var(--sp-3) var(--sp-6) var(--sp-3) var(--sp-4);
  background: var(--bg-3); color: var(--fg);
  border: 1px solid var(--hairline); border-radius: var(--radius-card);
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color .3s var(--ease-out);
}
.feat-map__node b {
  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; letter-spacing: -.01em;
}
.feat-map__node span { color: var(--fg-dim); font-size: var(--fs-small); line-height: 1.35; }
.feat-map__node--hub { width: 14em; padding: var(--sp-4) var(--sp-7) var(--sp-4) var(--sp-5); }
.feat-map__node--hub b { font-size: calc(var(--fs-h3) * 1.35); }
.feat-map__node[aria-selected="true"] { border-color: var(--fg); }
.feat-map__node[aria-selected="true"]::after {
  content: ""; position: absolute; top: var(--sp-3); right: var(--sp-3);
  width: 8px; height: 8px; background: var(--map-mark);
}
@media (hover: hover) {
  .feat-map__node:hover { border-color: color-mix(in srgb, var(--fg) 45%, transparent); }
  .feat-map__node[aria-selected="true"]:hover { border-color: var(--fg); }
}

.feat-map__panels { display: grid; }
.feat-map__panel { padding-top: var(--sp-5); border-top: 1px solid var(--hairline); }
.feat-map__panel + .feat-map__panel { margin-top: var(--sp-6); }
.feat-map__panel .eyebrow { margin-bottom: var(--sp-2); }
.feat-map__panel h3 { font-size: calc(var(--fs-h2) * .62); line-height: 1.1; letter-spacing: var(--ls-head, -.02em); }
.feat-map__panel > p:not(.eyebrow) { margin-top: var(--sp-4); text-wrap: pretty; }
.feat-map__dl { margin: var(--sp-6) 0 0; }
.feat-map__dl div {
  display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: var(--sp-4);
  padding-block: var(--sp-3); border-top: 1px solid var(--hairline);
}
.feat-map__dl dt { padding-top: 1px; color: var(--fg-dim); font-size: var(--fs-small); }
.feat-map__dl dd { margin: 0; color: var(--fg); }
.feat-map.is-armed .feat-map__panel {
  grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease-out), visibility 0s linear .35s;
}
.feat-map.is-armed .feat-map__panel[data-on="true"] {
  opacity: 1; visibility: visible;
  transition: opacity .45s var(--ease-out) .08s, visibility 0s;
}

@media (max-width: 900px) {
  .feat-map__head, .feat-map__body { grid-template-columns: minmax(0, 1fr); }
  .feat-map__body { gap: var(--sp-7); margin-top: var(--sp-7); }
}
@media (max-width: 640px) {
  .feat-map__diagram { aspect-ratio: auto; }
  .feat-map__svg, .feat-map__flow { display: none; }
  .feat-map__nodes {
    position: relative; inset: auto; display: grid; gap: var(--sp-2);
    padding-left: var(--sp-5);
  }
  .feat-map__nodes::before {
    content: ""; position: absolute; left: 0; top: var(--sp-6); bottom: var(--sp-6);
    width: 1px; background: var(--map-line-on);
  }
  .feat-map__node {
    position: relative; left: auto; top: auto; translate: none; width: 100%; min-width: 0;
    grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-6) var(--sp-3) var(--sp-4);
  }
  .feat-map__node::before {
    content: ""; position: absolute; top: 50%; left: calc(var(--sp-5) * -1 - 1px);
    width: var(--sp-5); height: 1px; background: var(--map-line-on);
  }
  .feat-map__node--hub { order: 0; margin-block: var(--sp-2); }
  .feat-map__node--hub b { font-size: calc(var(--fs-h3) * 1.2); }
  .feat-map__dl div { grid-template-columns: 7em minmax(0, 1fr); gap: var(--sp-3); }
}
@media (prefers-reduced-motion: reduce) {
  .feat-map__line, .feat-map__flow, .feat-map__node { transition: none; }
  .feat-map.is-armed .feat-map__panel, .feat-map.is-armed .feat-map__panel[data-on="true"] { transition: none; }
}

/* ------------------------------------------------------------
   IF03 · Scope sheet with priced add-ons
   <section class="feat-scope" data-w0="4" data-w1="6" data-p="9800">
     <div class="wrap feat-scope__grid">
       <div class="feat-scope__side">
         .eyebrow h2 .lead
         <dl class="feat-scope__sum"><div><dt>Dauer</dt><dd data-scope="w">…</dd></div>
           <div><dt>Festpreis</dt><dd class="feat-scope__price"><small>ab</small> <span data-scope="p">…</span></dd></div></dl>
         <p class="feat-scope__note">…</p> <a class="btn btn--ghost">…<span class="arrow"></span></a>
       </div>
       <div class="feat-scope__main">
         <div class="feat-scope__group"><h3><span>A</span>…</h3>
           <ul class="feat-scope__list"><li><svg class="ico">check</svg><span>…</span></li> …</ul></div> ×3
         <div class="feat-scope__group feat-scope__group--extra"><h3><span>+</span>Optional</h3><div>
           <ul class="feat-scope__adds"><li><button class="feat-scope__add" aria-pressed="false" data-w="2" data-p="3400">
             <span class="feat-scope__box"></span><span class="feat-scope__add-t"><b>…</b><span>…</span></span>
             <span class="feat-scope__add-v">…</span></button></li> …</ul>
           <p class="feat-scope__total" aria-live="polite">…</p></div></div>
       </div>
     </div>
   </section>
   ------------------------------------------------------------ */
.feat-scope {
  --scope-figure: calc(var(--fs-display) * .92);
  --scope-tick: var(--brand);                  /* the ticked add-on: the one small brand state */
}
.feat-scope__grid {
  display: grid; grid-template-columns: minmax(0, 6.5fr) minmax(0, 6.5fr);
  gap: var(--sp-8); align-items: start;
}
.feat-scope__side { position: sticky; top: var(--sp-8); }
.feat-scope__side h2 { text-wrap: balance; }
.feat-scope__side .lead { margin-top: var(--sp-5); text-wrap: pretty; }
.feat-scope__sum {
  display: grid; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: max-content;
  gap: var(--sp-1) var(--sp-7); margin: var(--sp-7) 0 0; padding-top: var(--sp-4);
  border-top: 1px solid var(--hairline);
}
.feat-scope__sum div { display: contents; }
.feat-scope__sum dt { font-size: var(--fs-small); color: var(--fg-dim); }
.feat-scope__sum dd {
  margin: 0; align-self: end; color: var(--fg);
  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.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.feat-scope__sum .feat-scope__price { font-size: var(--scope-figure); letter-spacing: var(--ls-head, -.02em); }
.feat-scope__price small { font-family: var(--font-body); font-size: var(--fs-lead); font-weight: 600; font-stretch: 100%; color: var(--fg-muted); letter-spacing: 0; }
.feat-scope__note { margin-top: var(--sp-4); max-width: 40ch; font-size: var(--fs-small); color: var(--fg-dim); }
.feat-scope__side .btn { margin-top: var(--sp-6); }

.feat-scope__group {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-5);
  padding-block: var(--sp-6); border-top: 1px solid var(--hairline);
}
.feat-scope__group:first-child { padding-top: var(--sp-5); }
.feat-scope__group h3 { display: flex; align-items: baseline; gap: var(--sp-3); font-size: var(--fs-h3); line-height: 1.3; text-wrap: balance; }
.feat-scope__group h3 span { min-width: 1.2em; font-size: var(--fs-small); font-weight: 600; color: var(--fg-dim); }
.feat-scope__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.feat-scope__list li { display: grid; grid-template-columns: var(--icon-inline) minmax(0, 1fr); gap: var(--sp-3); color: var(--fg); text-wrap: pretty; }
.feat-scope__list .ico { margin-top: 3px; color: var(--fg-dim); }

.feat-scope__adds { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.feat-scope__add {
  width: 100%; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: var(--sp-3);
  align-items: start; padding: var(--sp-3) var(--sp-4);
  background: transparent; color: var(--fg); font: inherit; text-align: left; cursor: pointer;
  border: 1px solid var(--hairline); border-radius: var(--radius-card);
  transition: border-color .3s var(--ease-out), scale .12s ease;
}
.feat-scope__add:active { scale: .99; }
.feat-scope__box {
  display: grid; place-items: center; width: 18px; height: 18px; margin-top: 3px;
  border: 1px solid var(--field-edge); background: color-mix(in srgb, var(--bg) 60%, transparent);
  transition: border-color .3s;
}
.feat-scope__add[aria-pressed="true"] { border-color: color-mix(in srgb, var(--fg) 45%, transparent); }
.feat-scope__add[aria-pressed="true"] .feat-scope__box { border-color: var(--scope-tick); background: color-mix(in srgb, var(--scope-tick) 12%, transparent); }
.feat-scope__add[aria-pressed="true"] .feat-scope__box::after { content: ""; width: 8px; height: 8px; background: var(--scope-tick); }
.feat-scope__add-t b { display: block; font-weight: 600; }
.feat-scope__add-t span { display: block; margin-top: 2px; font-size: var(--fs-small); color: var(--fg-dim); }
.feat-scope__add-v { padding-top: 2px; font-size: var(--fs-small); color: var(--fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (hover: hover) {
  .feat-scope__add:hover { border-color: color-mix(in srgb, var(--fg) 35%, transparent); }
}
.feat-scope__total { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.feat-scope__total b { color: var(--fg); font-weight: 600; }

@media (max-width: 900px) {
  .feat-scope__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .feat-scope__side { position: static; }
  .feat-scope__group { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
}
@media (max-width: 640px) {
  .feat-scope__sum { column-gap: var(--sp-6); }
  .feat-scope__add { grid-template-columns: 18px minmax(0, 1fr); }
  .feat-scope__add-v { grid-column: 2; padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .feat-scope__add, .feat-scope__box { transition: none; }
}

/* ------------------------------------------------------------
   IF04 · Data sheet beside one photo
   <section class="feat-sheet">
     <div class="wrap">
       <div class="feat-sheet__head"><div>.eyebrow h2</div> .lead</div>
       <div class="feat-sheet__body">
         <div class="feat-sheet__media"><div class="photo photo--people parallax">…</div></div>
         <div class="feat-sheet__specs">
           <p class="feat-sheet__stamp"><span>Stand …</span><span>4 Gruppen · 14 Angaben</span></p>
           <div class="feat-sheet__group"><h3><span>A</span>Anbindung</h3>
             <dl><div><dt>Systeme</dt><dd>…</dd></div> …</dl></div> … ≤5 groups
           <a class="link">Datenblatt als PDF<span class="arrow"></span></a>
         </div>
       </div>
     </div>
   </section>
   The photo is sticky beside the sheet; on phones it takes the inline
   ratio (3:2) so a portrait doesn't fill more than a screen.
   ------------------------------------------------------------ */
.feat-sheet { --sheet-dt: 11em; }
.feat-sheet__head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-4) var(--sp-8); align-items: end;
}
.feat-sheet__head h2 { text-wrap: balance; }
.feat-sheet__head .lead { text-wrap: pretty; }
.feat-sheet__body {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-9); align-items: start; margin-top: var(--sp-8);
}
.feat-sheet__media { position: sticky; top: var(--sp-8); }
.feat-sheet__stamp {
  display: flex; justify-content: space-between; gap: var(--sp-4); max-width: none;
  font-size: var(--fs-small); color: var(--fg-dim); font-variant-numeric: tabular-nums;
}
.feat-sheet__group { padding-top: var(--sp-6); }
.feat-sheet__group h3 {
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding-bottom: var(--sp-3); border-bottom: 1px solid color-mix(in srgb, var(--fg) 40%, transparent);
  font-size: var(--fs-h3);
}
.feat-sheet__group h3 span { min-width: 1.2em; font-size: var(--fs-small); font-weight: 600; color: var(--fg-dim); }
.feat-sheet__group dl { margin: 0; }
.feat-sheet__group dl > div {
  display: grid; grid-template-columns: var(--sheet-dt) minmax(0, 1fr); gap: var(--sp-4);
  padding-block: var(--sp-3); border-bottom: 1px solid var(--hairline);
}
.feat-sheet__group dt { color: var(--fg-dim); }
.feat-sheet__group dd { margin: 0; color: var(--fg); text-wrap: pretty; }
.feat-sheet__specs > .link { margin-top: var(--sp-6); }

@media (max-width: 900px) {
  .feat-sheet__head, .feat-sheet__body { grid-template-columns: minmax(0, 1fr); }
  .feat-sheet__body { gap: var(--sp-7); margin-top: var(--sp-7); }
  .feat-sheet__media { position: static; }
  .feat-sheet__media .photo { aspect-ratio: var(--ratio-inline, 3 / 2); }
}
@media (max-width: 640px) {
  .feat-sheet { --sheet-dt: 8.5em; }
  .feat-sheet__group dl > div { gap: var(--sp-3); }
  .feat-sheet__stamp { flex-direction: column; gap: 2px; }
}

/* ---- 2026-09-11 · BDG page view ---- */
/* IF05–IF07: the spectrum "Nicht jeder Prozess braucht KI".
   Sub-namespaces .feat-stair, .feat-task, .feat-road — none collide
   with IF01–IF04 (.feat-route, .feat-map, .feat-scope, .feat-sheet). */

/* ------------------------------------------------------------
   IF05 · Half the ladder has no AI
   <section class="feat-stair">
     <div class="wrap">
       <div class="feat-stair__head"><div>.eyebrow h2</div> .lead</div>
       <div class="feat-stair__body">
         <ol class="feat-stair__rungs" data-reveal-group>
           <li class="feat-stair__rung reveal" style="--i:0;--j:0" [data-ai] [data-later]>
             <p class="feat-stair__g">Ohne KI</p>   (rungs 1 and 4 only)
             <p class="feat-stair__n">01</p> <h3>…</h3> <p class="feat-stair__p">…</p> <p class="feat-stair__who">…</p>
           </li> ×6
         </ol>
         <div class="feat-stair__axis"><span>Ohne KI</span><span>Mit KI</span><span class="feat-stair__dir">…</span></div>
       </div>
       <div class="feat-stair__foot"><p>…</p><a class="link">…</a></div>
     </div>
   </section>
   Each rung is a bar: its top is the tread, its left edge the riser, so
   six rungs of rising min-height draw the staircase. Heights rank, they
   don't measure.
   ------------------------------------------------------------ */
.feat-stair {
  --stair-step: var(--sp-5);
  --stair-base: 19em;
  --stair-edge: color-mix(in srgb, var(--fg) 45%, transparent);
}
.feat-stair__head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-4) var(--sp-8); align-items: end;
}
.feat-stair__head h2 { text-wrap: balance; }
.feat-stair__head .lead { text-wrap: pretty; }
.feat-stair__body { margin-top: var(--sp-8); }
.feat-stair__rungs {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end;
}
.feat-stair__rung {
  position: relative; display: flex; flex-direction: column;
  min-height: calc(var(--stair-base) + var(--i) * var(--stair-step));
  padding: var(--sp-3) var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--stair-edge); border-left: 1px solid var(--hairline);
}
.feat-stair__rung[data-later] { border-top-style: dashed; border-left-style: dashed; }
.feat-stair__n { font-size: var(--fs-small); font-weight: 600; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.feat-stair__n span { margin-left: var(--sp-1); font-weight: 400; }
.feat-stair__rung h3 { margin-top: var(--sp-2); font-size: var(--fs-h3); line-height: 1.25; text-wrap: balance; }
.feat-stair__p { margin-top: var(--sp-3); font-size: var(--fs-small); line-height: 1.5; text-wrap: pretty; }
.feat-stair__who { margin-top: auto; padding-top: var(--sp-4); font-size: var(--fs-small); font-weight: 600; color: var(--fg); }
.feat-stair__g { position: absolute; width: 1px; height: 1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; }
.feat-stair__axis {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-top: 1px solid var(--stair-edge);
  font-size: var(--fs-small); font-weight: 600; color: var(--fg-muted);
}
.feat-stair__axis > span { grid-row: 1; padding: var(--sp-2) var(--sp-3) 0; }
.feat-stair__axis > span:nth-child(2) { grid-column: 2; border-left: 1px solid var(--stair-edge); }
.feat-stair__dir {
  grid-column: 2; justify-self: end; display: inline-flex; align-items: center; gap: var(--sp-1);
  font-weight: 400; color: var(--fg-dim);
}
.feat-stair__dir .ico { width: 1em; height: 1em; }
.feat-stair__foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: var(--sp-3) var(--sp-7); margin-top: var(--sp-7);
}
.feat-stair__foot b { color: var(--fg); font-weight: 600; }

@media (max-width: 900px) {
  .feat-stair__head { grid-template-columns: minmax(0, 1fr); }
  .feat-stair__rungs { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--sp-8); }
  .feat-stair__rung { min-height: calc(var(--stair-base) * .8 + var(--j) * var(--stair-step)); }
  .feat-stair__g {
    position: absolute; top: calc(var(--sp-5) * -1 - 1px); left: 0; width: auto; height: auto; clip-path: none; overflow: visible;
    font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase; color: var(--fg-dim);
  }
  .feat-stair__axis { display: none; }
}
@media (max-width: 640px) {
  .feat-stair__body { margin-top: var(--sp-7); }
  .feat-stair__rungs { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .feat-stair__rung {
    min-height: 0; margin-left: calc(var(--i) * var(--sp-2));
    padding: var(--sp-4) 0 var(--sp-4) var(--sp-4);
  }
  .feat-stair__rung:nth-child(4) { margin-top: var(--sp-7); }
  .feat-stair__g { top: calc(var(--sp-5) * -1 - 4px); left: 0; }
  .feat-stair__who { padding-top: var(--sp-3); }
}

/* ------------------------------------------------------------
   IF06 · One task, six ways
   <section class="feat-task">
     <div class="wrap">
       <div class="feat-task__head"><div>.eyebrow h2</div> .lead</div>
       <div class="feat-task__stops" role="tablist" hidden>
         <button class="feat-task__stop" role="tab" id="IF06-t-0" aria-controls="IF06-p-0" aria-selected [data-ai] [data-later]>
           <span class="feat-task__sn">01 <em>Ohne KI</em></span><span class="feat-task__sl">…</span><span class="feat-task__rec">…</span></button> ×6
       </div>
       <div class="feat-task__body">
         <div class="feat-task__case"><p class="feat-task__k">…</p><p class="feat-task__q">…</p><p class="feat-task__qs">…</p></div>
         <div class="feat-task__panels"><div class="feat-task__panel" role="tabpanel" data-on>
           <p class="feat-task__pn">…</p><h3>…</h3><dl class="feat-task__lanes"><div><dt>Das System</dt><dd>…</dd></div>…</dl>
           <p class="feat-task__fit" [data-rec]>…</p></div> ×6</div>
       </div>
       <div class="feat-task__foot"><p>…</p><a class="link">…</a></div>
     </div>
   </section>
   ------------------------------------------------------------ */
.feat-task { --task-mark: var(--brand); }          /* the chosen stop: the one small brand state */
.feat-task__head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-4) var(--sp-8); align-items: end;
}
.feat-task__head h2 { text-wrap: balance; }
.feat-task__head .lead { text-wrap: pretty; }
.feat-task__stops {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-2);
  margin-top: var(--sp-8);
}
.feat-task__stops[hidden] { display: none; }
.feat-task__stop {
  position: relative; display: grid; align-content: start; gap: 4px; min-height: 44px;
  padding: var(--sp-3) var(--sp-1) 0 0;
  background: none; border: 0; border-top: 2px solid var(--hairline);
  color: var(--fg-muted); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .3s var(--ease-out), color .3s var(--ease-out);
}
.feat-task__stop[data-later] { border-top-style: dashed; }
.feat-task__stop:nth-child(4) { margin-left: var(--sp-4); }
.feat-task__stop[aria-selected="true"] { border-top-color: var(--fg); color: var(--fg); }
.feat-task__stop[aria-selected="true"]::before {
  content: ""; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; background: var(--task-mark);
}
.feat-task__stop:focus-visible { outline-offset: 4px; }
.feat-task__sn { font-size: var(--fs-small); font-weight: 600; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.feat-task__sn em { margin-left: var(--sp-1); font-style: normal; font-weight: 400; }
.feat-task__sl { font-weight: 600; line-height: 1.3; text-wrap: balance; }
.feat-task__rec { font-size: var(--fs-small); color: var(--fg-dim); }
@media (hover: hover) {
  .feat-task__stop[aria-selected="false"]:hover { color: var(--fg); border-top-color: color-mix(in srgb, var(--fg) 40%, transparent); }
}
.feat-task__body {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--sp-6) var(--sp-8); align-items: start; margin-top: var(--sp-7);
}
.feat-task__case { padding-top: var(--sp-4); border-top: 1px solid color-mix(in srgb, var(--fg) 45%, transparent); }
.feat-task__k {
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--fg-dim);
}
.feat-task__q {
  margin-top: var(--sp-3); color: var(--fg);
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: calc(var(--fs-h2) * .66); line-height: 1.12; letter-spacing: var(--ls-head, -.02em); text-wrap: balance;
}
.feat-task__qs { margin-top: var(--sp-3); max-width: 34ch; text-wrap: pretty; }
.feat-task__panels { display: grid; gap: var(--sp-7); }
.feat-task__panel { padding-top: var(--sp-4); border-top: 1px solid var(--hairline); }
.feat-task__pn { font-size: var(--fs-small); font-weight: 600; color: var(--fg-dim); }
.feat-task__panel h3 { margin-top: var(--sp-1); font-size: calc(var(--fs-h2) * .56); line-height: 1.12; letter-spacing: var(--ls-head, -.02em); text-wrap: balance; }
.feat-task__lanes { margin: var(--sp-5) 0 0; }
.feat-task__lanes div {
  display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: var(--sp-4);
  padding-block: var(--sp-4); border-top: 1px solid var(--hairline);
}
.feat-task__lanes dt { padding-top: 3px; font-size: var(--fs-small); font-weight: 600; color: var(--fg-dim); }
.feat-task__lanes dd { margin: 0; max-width: 46ch; font-size: var(--fs-lead); line-height: 1.45; color: var(--fg); text-wrap: pretty; }
.feat-task__fit { padding-top: var(--sp-4); border-top: 1px solid var(--hairline); text-wrap: pretty; }
.feat-task__fit[data-rec] { color: var(--fg); font-weight: 600; }
.feat-task.is-armed .feat-task__panels { gap: 0; }
.feat-task.is-armed .feat-task__panel {
  grid-area: 1 / 1; opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease-out), visibility 0s linear .3s;
}
.feat-task.is-armed .feat-task__panel[data-on="true"] {
  opacity: 1; visibility: visible;
  transition: opacity .45s var(--ease-out) .06s, visibility 0s;
}
.feat-task__foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: var(--sp-3) var(--sp-7); margin-top: var(--sp-8);
}
@media (max-width: 900px) {
  .feat-task__head, .feat-task__body { grid-template-columns: minmax(0, 1fr); }
  .feat-task__stops { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--sp-5); }
  .feat-task__stop:nth-child(4) { margin-left: 0; }
}
@media (max-width: 640px) {
  .feat-task__stops { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: var(--sp-7); }
  .feat-task__sn em, .feat-task__rec { display: none; }
  .feat-task__sl { position: absolute; width: 1px; height: 1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; }
  .feat-task__lanes div { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
  .feat-task__lanes dd { font-size: var(--fs-body); }
}
@media (prefers-reduced-motion: reduce) {
  .feat-task__stop, .feat-task.is-armed .feat-task__panel, .feat-task.is-armed .feat-task__panel[data-on="true"] { transition: none; }
}

/* ------------------------------------------------------------
   IF07 · The ladder, sorted into a roadmap
   <section class="feat-road">
     <div class="wrap">
       <div class="feat-road__head"><div>.eyebrow h2</div> .lead</div>
       <div class="feat-road__board">
         <div class="feat-road__cols" aria-hidden="true"><span class="feat-road__c0">Ablauf</span>
           <span class="feat-road__rungs"><span><b>01</b>Workflow</span> ×6</span><span>Aufwand · Wirkung</span></div>
         <div class="feat-road__group"><h3 class="feat-road__gh"><span>1</span>Jetzt <small>…</small></h3>
           <ol class="feat-road__list" data-reveal-group>
             <li class="feat-road__item reveal"><p class="feat-road__name">…</p>
               <p class="feat-road__rung"><span>02</span> Integration / EDI</p>
               <span class="feat-road__track"><i></i><i data-on></i>… ×6</span>
               <p class="feat-road__ei">…</p></li> …</ol></div> ×3
       </div>
       <div class="feat-road__foot"><p class="feat-road__sum"><b>4 von 8</b> …</p><a class="link">…</a></div>
     </div>
   </section>
   The rung is stated in text in every row (shown on phones, visually
   hidden where the column heads carry it); the track is its picture.
   ------------------------------------------------------------ */
.feat-road {
  --road-cols: minmax(0, 3.4fr) minmax(0, 6fr) minmax(0, 2fr);
  --road-mark: var(--fg);
  --road-edge: color-mix(in srgb, var(--fg) 45%, transparent);
}
.feat-road__head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-4) var(--sp-8); align-items: end;
}
.feat-road__head h2 { text-wrap: balance; }
.feat-road__head .lead { text-wrap: pretty; }
.feat-road__board { margin-top: var(--sp-8); }
.feat-road__cols {
  display: grid; grid-template-columns: var(--road-cols); gap: var(--sp-5); align-items: end;
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--road-edge);
  font-size: var(--fs-small); line-height: 1.3; color: var(--fg-dim);
}
.feat-road__rungs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.feat-road__rungs span { padding-inline: var(--sp-1); text-align: center; text-wrap: balance; }
.feat-road__rungs span:nth-child(4) { box-shadow: inset 1px 0 0 var(--hairline); }
.feat-road__rungs b { display: block; font-weight: 600; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.feat-road__group { margin-top: var(--sp-6); }
.feat-road__gh { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); padding-bottom: var(--sp-2); font-size: var(--fs-h3); }
.feat-road__gh span { min-width: 1.4em; font-size: var(--fs-small); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.feat-road__gh small { font-family: var(--font-body); font-stretch: 100%; font-size: var(--fs-small); font-weight: 400; color: var(--fg-muted); }
.feat-road__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.feat-road__item {
  display: grid; grid-template-columns: var(--road-cols); gap: var(--sp-2) var(--sp-5); align-items: center;
  padding-block: var(--sp-3); border-bottom: 1px solid var(--hairline);
}
.feat-road__name { color: var(--fg); text-wrap: pretty; }
.feat-road__rung { position: absolute; width: 1px; height: 1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; }
.feat-road__track { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); height: 28px; }
.feat-road__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--hairline); }
.feat-road__track i { position: relative; display: grid; place-items: center; }
.feat-road__track i[data-edge] { box-shadow: inset 1px 0 0 var(--hairline); }
.feat-road__track i[data-on]::before { content: ""; width: 12px; height: 12px; background: var(--road-mark); }
.feat-road__track i[data-on][data-later]::before { background: var(--bg); border: 1.5px dashed var(--road-mark); }
.feat-road__ei { font-size: var(--fs-small); color: var(--fg-muted); }
.feat-road__foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: var(--sp-3) var(--sp-7); margin-top: var(--sp-7);
}
.feat-road__sum { font-size: var(--fs-lead); }
.feat-road__sum b { color: var(--fg); font-weight: 700; }
@media (max-width: 900px) {
  .feat-road__head { grid-template-columns: minmax(0, 1fr); }
  .feat-road__cols { display: none; }
  .feat-road__item { grid-template-columns: minmax(0, 1fr); padding-block: var(--sp-4); }
  .feat-road__rung {
    position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal;
    font-size: var(--fs-small); color: var(--fg-muted);
  }
  .feat-road__rung span { color: var(--fg-dim); font-weight: 600; font-variant-numeric: tabular-nums; }
  .feat-road__track { max-width: 22em; height: 20px; }
}