/* ============================================================
   LOGOS, PARTNERS & SYSTEMS — candidates (sections lab, group LG)
   Namespace .logo-*. The kit's .logo-slot is styled only inside a
   .logo-* root. Tokens only; every other value is a knob declared on
   its component, with its default.
   ============================================================ */

/* ---- LG01 · systems map, lit by the system you pick ----
   <section class="logo-map"><div class="wrap">
     <div class="logo-map__head"><div> eyebrow · h2 </div><p class="lead">…</p></div>
     <div class="logo-map__body">
       <div class="logo-map__stage" role="group">
         <svg class="logo-map__svg logo-map__svg--d" viewBox="0 0 100 100" preserveAspectRatio="none">
           <path d="M13 24 C26 24 28 44 37 44" data-for="shopify xentral haufe"/> …</svg>
         <svg class="logo-map__svg logo-map__svg--m" …>(phone portrait paths)</svg>
         <span class="logo-map__hub"></span>
         <span class="logo-map__col logo-map__col--shop">Shop-Systeme</span> …
         <button class="logo-map__node" data-sys="xentral" aria-pressed="true"
                 style="--x:50;--y:41;--mx:50;--my:44">Xentral</button> …
       </div>
       <div class="logo-map__panel">
         <div class="logo-map__details" aria-live="polite">
           <div class="logo-map__detail" data-sys="xentral" data-on="true"> kind · name · do · dl </div> …
         </div>
         <a class="link">… <span class="arrow"></span></a>
       </div>
     </div></div></section>
   Nodes, hub and lines share one percent space, so the SVG can stretch
   (non-scaling strokes) and still meet every node. JS adds .is-live:
   unrelated lines go dashed and faint, the panel shows one system. */
.logo-map {
  --logo-map-ratio: 16 / 10;
  --logo-map-node: var(--fs-h3);
  --logo-map-line: color-mix(in srgb, var(--fg) 42%, transparent);
  --logo-map-faint: color-mix(in srgb, var(--fg) 16%, transparent);
  --logo-map-hub: 37% 27% 26% 46%;   /* left top width height, desktop */
}
.logo-map__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--sp-8); align-items: end; }
.logo-map__head h2 { text-wrap: balance; }
.logo-map__head .lead { text-wrap: pretty; }
.logo-map__body {
  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--sp-8); align-items: center; margin-top: var(--sp-8);
}
.logo-map__stage { position: relative; aspect-ratio: var(--logo-map-ratio); }
.logo-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.logo-map__svg--m { display: none; }
.logo-map__svg path {
  fill: none; stroke: var(--logo-map-line); stroke-width: 1.25; vector-effect: non-scaling-stroke;
  transition: stroke .4s var(--ease-out), stroke-width .4s var(--ease-out);
}
.logo-map.is-live .logo-map__svg path { stroke: var(--logo-map-faint); stroke-dasharray: 3 5; }
.logo-map.is-live .logo-map__svg path.is-on { stroke: var(--fg); stroke-width: 1.6; stroke-dasharray: none; }
.logo-map__hub {
  position: absolute; left: 37%; top: 27%; width: 26%; height: 46%;
  border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--bg-2);
}
.logo-map__col {
  position: absolute; top: 0; translate: -50% 0; white-space: nowrap;
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-dim);
}
.logo-map__col--shop { left: 13%; }
.logo-map__col--erp { left: 50%; top: calc(27% + var(--sp-3)); }
.logo-map__col--out { left: 87%; }
/* A node is a wordmark on the page ground: its fill covers the line's end. */
.logo-map__node {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); translate: -50% -50%;
  padding: .3em .55em; border: 0; border-radius: var(--radius-btn); background: var(--bg); cursor: pointer;
  font-family: var(--font-head); font-weight: 600; font-stretch: var(--head-stretch, normal);
  font-size: var(--logo-map-node); line-height: 1.2; letter-spacing: var(--ls-head, normal);
  color: var(--fg-muted); white-space: nowrap;
  text-decoration: underline 2px transparent; text-underline-offset: .3em;
  transition: color .3s var(--ease-out), text-decoration-color .3s var(--ease-out);
}
.logo-map__node[data-sys="xentral"], .logo-map__node[data-sys="haufe"] { background: var(--bg-2); }
.logo-map__node[aria-pressed="true"] { color: var(--fg); text-decoration-color: var(--fg); }
.logo-map.is-live .logo-map__node:not([aria-pressed="true"]):not(.is-rel) { color: var(--fg-dim); }
.logo-map.is-live .logo-map__node.is-rel { color: var(--fg); }
@media (hover: hover) {
  .logo-map__node:hover { color: var(--fg); text-decoration-color: color-mix(in srgb, var(--fg) 35%, transparent); }
  .logo-map__node[aria-pressed="true"]:hover { text-decoration-color: var(--fg); }
}
.logo-map__details { display: grid; gap: var(--sp-5); }
.logo-map__detail { border-top: 1px solid var(--hairline); padding-top: var(--sp-4); }
.logo-map.is-live .logo-map__detail {
  grid-area: 1 / 1; opacity: 0; visibility: hidden; translate: 0 var(--sp-1);
  transition: opacity .3s var(--ease-out), translate .5s var(--ease-out), visibility 0s .3s;
}
.logo-map.is-live .logo-map__detail[data-on] {
  opacity: 1; visibility: visible; translate: none;
  transition: opacity .35s var(--ease-out) .1s, translate .6s var(--ease-out) .1s;
}
.logo-map__kind { font-size: var(--fs-small); color: var(--fg-dim); }
.logo-map__name {
  margin-top: 2px; font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: calc(var(--fs-h2) * .6); line-height: 1.1; letter-spacing: var(--ls-head, normal); color: var(--fg);
}
.logo-map__do { margin-top: var(--sp-4); text-wrap: pretty; }
.logo-map__flow { margin: var(--sp-5) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--hairline); }
.logo-map__flow dt { font-size: var(--fs-small); color: var(--fg-dim); }
.logo-map__flow dd { margin: 2px 0 0; color: var(--fg); text-wrap: pretty; }
.logo-map__more { margin-top: var(--sp-6); }

/* ---- LG02 · logo → result grid ----
   <section class="logo-stories"><div class="wrap">
     <div class="logo-stories__head"><div> eyebrow · h2 </div><p class="logo-stories__hint">…</p></div>
     <ul class="logo-stories__grid" data-reveal-group>
       <li class="reveal"><a class="logo-stories__cell" href="…">
         <span class="logo-slot">Mark</span>
         <span class="logo-stories__sector">Großhandel</span>
         <span class="logo-stories__result">
           <span class="logo-stories__fig">−92 %</span><span class="logo-stories__k">…</span>
           <span class="logo-stories__go">Zur Case Study <span class="arrow"></span></span>
         </span></a></li>
       <li class="reveal"><div class="logo-stories__cell"><span class="logo-slot">Mark</span></div></li> …
     </ul></div></section>
   Touch and phones show mark, sector and result at rest; a fine pointer
   above 900px turns the mark into its result on hover or focus. */
.logo-stories { --logo-cell-h: 248px; --logo-fig: calc(var(--fs-h2) * .9); }
.logo-stories__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--sp-4) var(--sp-8); }
.logo-stories__hint { font-size: var(--fs-small); color: var(--fg-dim); }
.logo-stories__grid {
  list-style: none; margin: var(--sp-8) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--hairline);
}
.logo-stories__grid > li { border-bottom: 1px solid var(--hairline); }
.logo-stories__grid > li:not(:nth-child(4n)) { border-right: 1px solid var(--hairline); }
.logo-stories__cell {
  position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%;
  min-height: var(--logo-cell-h); padding: var(--sp-5); color: var(--fg); text-decoration: none;
  transition: opacity .4s var(--ease-out);
}
/* A cell without a case keeps the same two rows, so every mark sits level. */
div.logo-stories__cell { grid-template-rows: minmax(0, 1fr) 1.45em; justify-items: center; }
.logo-stories__cell:focus-visible { outline-offset: -4px; }
.logo-stories .logo-slot {
  width: 100%; max-width: 172px; height: 56px; justify-self: center; align-self: center;
  padding-inline: var(--sp-2); text-align: center; font-size: var(--fs-small); letter-spacing: normal; text-transform: none;
  transition: opacity .4s var(--ease-out), translate .6s var(--ease-out), border-color .25s, color .25s;
}
.logo-stories__sector { font-size: var(--fs-small); color: var(--fg-dim); transition: opacity .3s var(--ease-out); }
.logo-stories__result { display: grid; justify-items: start; gap: 4px; margin-top: var(--sp-3); }
.logo-stories__fig {
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--logo-fig); line-height: 1; letter-spacing: var(--ls-head, normal);
  color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.logo-stories__k { font-size: var(--fs-small); line-height: 1.45; color: var(--fg-muted); max-width: 24ch; text-wrap: pretty; }
.logo-stories__go { display: inline-flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-2); font-size: var(--fs-small); font-weight: 600; color: var(--fg); }
.logo-stories__cell:focus-visible .arrow::before { transform: translateX(170%); }
.logo-stories__cell:focus-visible .arrow::after { transform: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  .logo-stories__result {
    position: absolute; left: var(--sp-5); right: var(--sp-5); bottom: var(--sp-5); margin: 0;
    opacity: 0; translate: 0 var(--sp-2);
    transition: opacity .35s var(--ease-out), translate .6s var(--ease-out);
  }
  .logo-stories__cell:hover .logo-stories__result, .logo-stories__cell:focus-visible .logo-stories__result { opacity: 1; translate: none; }
  .logo-stories__cell:hover .logo-slot, .logo-stories__cell:focus-visible .logo-slot { opacity: 0; translate: 0 calc(var(--sp-3) * -1); }
  .logo-stories__cell:hover .logo-stories__sector, .logo-stories__cell:focus-visible .logo-stories__sector { opacity: 0; }
  .logo-stories__grid:hover > li:not(:hover) .logo-stories__cell { opacity: .38; }
  .logo-stories__cell:hover .arrow::before { transform: translateX(170%); }
  .logo-stories__cell:hover .arrow::after { transform: none; }
}
@media (hover: none) { .logo-stories__hint { display: none; } }

/* ---- LG03 · client names as prose, one of them speaks ----
   <section class="logo-names"><div class="wrap">
     <div class="logo-names__intro"> eyebrow · h2 · <p class="logo-names__note"> · .link </div>
     <div class="logo-names__body">
       <p class="logo-names__list reveal">Name<span class="logo-names__sep"> / </span><a>Name</a><sup class="logo-names__ref">1</sup> …</p>
       <figure class="logo-names__quote reveal"><span class="logo-names__qn">1</span>
         <blockquote><p>„…“</p></blockquote><figcaption><b>Name</b> <span>Rolle, Firma</span></figcaption></figure>
       <p class="logo-names__list reveal">… the rest of the names</p>
     </div></div></section>
   One weight for every name; linked names take the kit's L01 underline.
   The footnote numeral ties the quote to the name that said it. */
.logo-names { --logo-names-size: calc(var(--fs-h2) * .54); --logo-quote-inset: 14%; }
.logo-names .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--sp-8); align-items: start; }
.logo-names__intro h2 { text-wrap: balance; }
.logo-names__note { margin-top: var(--sp-6); max-width: 32ch; font-size: var(--fs-small); color: var(--fg-dim); }
.logo-names__intro .link { margin-top: var(--sp-3); }
.logo-names__list {
  max-width: none; font-family: var(--font-head); font-weight: 500; font-stretch: var(--head-stretch, normal);
  font-size: var(--logo-names-size); line-height: 1.42; letter-spacing: -.012em; color: var(--fg);
  text-wrap: pretty; hanging-punctuation: first;
}
.logo-names__n { white-space: nowrap; }
.logo-names__sep { color: var(--fg-dim); font-weight: 400; }
.logo-names__ref, .logo-names__qn { font-family: var(--font-body); font-weight: 700; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.logo-names__ref { margin-left: .12em; font-size: .42em; line-height: 0; vertical-align: 1.1em; }
.logo-names__quote {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3) var(--sp-4);
  margin: var(--sp-7) 0 var(--sp-7) var(--logo-quote-inset); padding-block: var(--sp-5);
  border-block: 1px solid var(--hairline);
}
.logo-names__qn { grid-row: 1 / span 2; padding-top: .35em; font-size: var(--fs-small); }
.logo-names__quote blockquote { margin: 0; }
.logo-names__quote blockquote p {
  max-width: 46ch; font-family: var(--font-head); font-weight: 500; font-stretch: 100%;
  font-size: calc(var(--fs-lead) * 1.25); line-height: 1.42; letter-spacing: -.01em; color: var(--fg); text-wrap: pretty;
}
.logo-names__quote figcaption { font-size: var(--fs-small); }
.logo-names__quote figcaption b { font-weight: 600; color: var(--fg); }
.logo-names__quote figcaption span { color: var(--fg-dim); }

/* ---- LG04 · credentials on one time axis ----
   <section class="logo-creds" style="--now:70.83"><div class="wrap">
     <div class="logo-creds__head"> … </div>
     <div class="logo-creds__table">
       <div class="logo-creds__cols"><span>Nachweis</span><span>Bedeutung</span>
         <span class="logo-creds__axis"><b style="--a:12.5">2022</b> …</span></div>
       <ul class="logo-creds__list" data-reveal-group>
         <li class="logo-creds__row reveal">
           <span class="logo-slot logo-creds__seal">Siegel</span>
           <div class="logo-creds__name"><small>Zertifikat</small><b>ISO/IEC 27001</b><span>TÜV Rheinland</span></div>
           <div class="logo-creds__means"><p>…</p><a class="link">…</a></div>
           <div class="logo-creds__track"><span class="logo-creds__sr">Gültig: 04/2025–04/2028</span>
             <span aria-hidden="true"><i class="logo-creds__span" style="--a:53.1;--b:90.6"></i>
               <span class="logo-creds__d" style="--a:53.1">04/2025</span> …</span></div>
         </li> …
       </ul>
       <div class="logo-creds__foot"><span class="logo-creds__axis"><em class="logo-creds__today">Heute · 09/2026</em></span></div>
     </div></div></section>
   Positions are percent of the axis (2021–2029), written from the dates.
   The today line is drawn in every track, so the rows join it into one. */
.logo-creds {
  --logo-seal: 56px;
  --logo-bar: 6px;
  --logo-cols: var(--logo-seal) minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.45fr);
}
.logo-creds__head { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: var(--sp-8); align-items: end; }
.logo-creds__head h2 { text-wrap: balance; }
.logo-creds__table { margin-top: var(--sp-8); }
.logo-creds__cols, .logo-creds__row, .logo-creds__foot { display: grid; grid-template-columns: var(--logo-cols); gap: var(--sp-6); }
.logo-creds__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);
}
.logo-creds__cols > :first-child { grid-column: 1 / span 2; }
.logo-creds__axis { position: relative; min-height: 1.5em; }
.logo-creds__axis b { position: absolute; top: 0; left: calc(var(--a) * 1%); translate: -50% 0; font-weight: 400; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.logo-creds__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.logo-creds__row { align-items: start; padding-block: var(--sp-5); border-bottom: 1px solid var(--hairline); }
.logo-creds .logo-creds__seal { width: var(--logo-seal); height: var(--logo-seal); }
.logo-creds__name { display: grid; gap: 2px; }
.logo-creds__name small { font-size: var(--fs-small); color: var(--fg-dim); }
.logo-creds__name b {
  font-family: var(--font-head); font-weight: 600; font-stretch: var(--head-stretch, normal);
  font-size: var(--fs-h3); line-height: 1.3; color: var(--fg); text-wrap: balance;
}
.logo-creds__name span { font-size: var(--fs-small); color: var(--fg-muted); }
.logo-creds__means p { text-wrap: pretty; }
.logo-creds__means .link { margin-top: var(--sp-2); font-size: var(--fs-small); }
.logo-creds__track { position: relative; align-self: stretch; min-height: 96px; margin-block: calc(var(--sp-5) * -1); }
.logo-creds__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--hairline); }
.logo-creds__track::after,
.logo-creds__foot .logo-creds__axis::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--now) * 1%); width: 1px; background: var(--fg);
}
.logo-creds__span {
  position: absolute; top: 50%; left: calc(var(--a) * 1%); width: calc((var(--b) - var(--a)) * 1%);
  height: var(--logo-bar); translate: 0 -50%; border-radius: var(--logo-bar); background: var(--fg-muted);
}
.logo-creds__span--open::after {
  content: ""; position: absolute; left: 100%; top: 50%; width: var(--sp-7); height: 0;
  border-top: 2px dashed var(--fg-muted); translate: 0 -50%;
}
.logo-creds__dot {
  position: absolute; top: 50%; left: calc(var(--a) * 1%); width: calc(var(--logo-bar) * 2); height: calc(var(--logo-bar) * 2);
  translate: -50% -50%; border-radius: 50%; background: var(--fg-muted);
}
/* Dates sit on the page ground, so the today line passes behind them. */
.logo-creds__d {
  position: absolute; z-index: 1; top: calc(50% + var(--sp-2)); left: calc(var(--a) * 1%);
  padding-inline: 4px; margin-inline: -4px; background: var(--bg);
  font-size: var(--fs-small); color: var(--fg-dim); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.logo-creds__d--end { translate: -100% 0; }
.logo-creds__nowlbl { display: none; }
.logo-creds__sr { position: absolute; width: 1px; height: 1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; }
.logo-creds__foot .logo-creds__axis { grid-column: 4; min-height: calc(var(--sp-6) + 1em); }
.logo-creds__foot .logo-creds__axis::before { bottom: auto; height: var(--sp-3); }
.logo-creds__today {
  position: absolute; top: var(--sp-4); left: calc(var(--now) * 1%); translate: -50% 0;
  font-style: normal; font-size: var(--fs-small); font-weight: 600; color: var(--fg); white-space: nowrap;
}
.logo-creds__src { margin-top: var(--sp-5); font-size: var(--fs-small); color: var(--fg-dim); max-width: none; }

/* ---- LG05 · clients by sector ----
   <section class="logo-sectors"><div class="wrap">
     <div class="logo-sectors__head"> eyebrow · h2 </div>
     <div class="logo-sectors__tabs" role="tablist">
       <button class="logo-sectors__tab" role="tab" aria-selected="true" aria-controls="LG05-panel-0">Großhandel<small>23</small></button> …
     </div>
     <div class="logo-sectors__panels">
       <div class="logo-sectors__panel" role="tabpanel" id="LG05-panel-0">
         <div class="logo-sectors__about"><p class="logo-sectors__title">…</p><p class="logo-sectors__need">…</p>
           <a class="logo-sectors__case"><span class="logo-sectors__fig">−92 %</span><span class="logo-sectors__k">…</span><span class="link">… <span class="arrow"></span></span></a></div>
         <ul class="logo-sectors__marks"><li style="--k:0"><span class="logo-slot">…</span></li> …</ul>
       </div> …
     </div></div></section>
   Without JS the tabs stay hidden and every sector is listed with its title.
   The selected tab's underline is the section's one small accent state. */
.logo-sectors { --logo-sector-fig: calc(var(--fs-display) * 1.1); --logo-mark-h: 148px; }
.logo-sectors__head h2 { max-width: 16ch; text-wrap: balance; }
.logo-sectors__tabs {
  display: flex; gap: var(--sp-7); margin-top: var(--sp-7);
  border-bottom: 1px solid var(--hairline); overflow-x: auto; scrollbar-width: none;
}
.logo-sectors:not(.is-tabbed) .logo-sectors__tabs { display: none; }
.logo-sectors__tab {
  position: relative; display: inline-flex; align-items: baseline; gap: var(--sp-1); flex: none;
  padding: var(--sp-3) 0 var(--sp-4); border: 0; background: none; cursor: pointer;
  font-family: var(--font-head); font-weight: 600; font-stretch: var(--head-stretch, normal);
  font-size: var(--fs-h3); letter-spacing: var(--ls-head, normal); color: var(--fg-muted);
  transition: color .3s var(--ease-out);
}
.logo-sectors__tab small { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-small); letter-spacing: 0; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.logo-sectors__tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brand);
  scale: 0 1; transform-origin: left; transition: scale .5s var(--ease-out);
}
.logo-sectors__tab[aria-selected="true"] { color: var(--fg); }
.logo-sectors__tab[aria-selected="true"]::after { scale: 1 1; }
.logo-sectors__tab:focus-visible { outline-offset: -2px; }
@media (hover: hover) { .logo-sectors__tab:hover { color: var(--fg); } }
.logo-sectors__panels { display: grid; gap: var(--sp-9); margin-top: var(--sp-7); }
.logo-sectors__panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); align-items: start; }
.logo-sectors__panel[hidden] { display: none; }
.logo-sectors.is-tabbed .logo-sectors__panel { grid-area: 1 / 1; }
.logo-sectors.is-tabbed .logo-sectors__title { display: none; }
.logo-sectors__title {
  margin-bottom: var(--sp-4); font-family: var(--font-head); font-weight: 600; font-stretch: var(--head-stretch, normal);
  font-size: var(--fs-h3); color: var(--fg);
}
.logo-sectors__title small { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-small); color: var(--fg-dim); }
.logo-sectors__need { font-size: var(--fs-lead); max-width: 34ch; text-wrap: pretty; }
.logo-sectors__case {
  display: grid; justify-items: start; gap: var(--sp-1); margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid var(--hairline); color: var(--fg); text-decoration: none;
}
.logo-sectors__fig {
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--logo-sector-fig); line-height: 1; letter-spacing: var(--ls-head, normal); font-variant-numeric: tabular-nums;
}
.logo-sectors__k { font-size: var(--fs-small); color: var(--fg-muted); }
.logo-sectors__case .link { margin-top: var(--sp-3); }
.logo-sectors__case:focus-visible .arrow::before { transform: translateX(170%); }
.logo-sectors__case:focus-visible .arrow::after { transform: none; }
@media (hover: hover) {
  .logo-sectors__case:hover .arrow::before { transform: translateX(170%); }
  .logo-sectors__case:hover .arrow::after { transform: none; }
}
.logo-sectors__marks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--hairline); }
.logo-sectors__marks li { display: grid; place-items: center; min-height: var(--logo-mark-h); padding: var(--sp-5); border-bottom: 1px solid var(--hairline); }
.logo-sectors__marks li:nth-child(odd) { border-right: 1px solid var(--hairline); }
.logo-sectors .logo-slot {
  width: 100%; max-width: 208px; height: 56px; padding-inline: var(--sp-2);
  text-align: center; font-size: var(--fs-small); letter-spacing: normal; text-transform: none;
}
.logo-sectors__panel.is-shown { animation: logo-sectors-in .45s var(--ease-out); }
.logo-sectors__panel.is-shown .logo-sectors__marks li { animation: logo-sectors-rise .7s var(--ease-out) backwards; animation-delay: calc(var(--k) * 70ms); }
@keyframes logo-sectors-in { from { opacity: 0; } }
@keyframes logo-sectors-rise { from { opacity: 0; transform: translateY(var(--sp-2)); } }

/* ---- LG06 · claim band, paged in place ----
   <section class="logo-pager"><div class="wrap"> eyebrow · h2 (the claim)
     <div class="logo-pager__band">
       <ul class="logo-pager__page" data-page="0" data-on="true"><li style="--i:0"><span class="logo-slot">…</span></li> ×6</ul> …
     </div>
     <div class="logo-pager__foot"><p class="logo-pager__count" aria-live="polite"><b>1–6</b> von 18 …</p>
       <button class="logo-pager__next" hidden>Nächste sechs <svg class="ico">…</svg></button> <a class="link">…</a></div>
   </div></section>
   Without JS every page shows (a grid of 18). JS stacks the pages in one
   cell and crossfades slot by slot when the visitor asks for the next six. */
.logo-pager { --logo-pager-h: 104px; --logo-pager-step: 60ms; }
.logo-pager h2 { max-width: 20ch; text-wrap: balance; }
.logo-pager__band { display: grid; gap: var(--sp-4); margin-top: var(--sp-8); }
.logo-pager__page { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-4); }
.logo-pager.is-paged .logo-pager__page { grid-area: 1 / 1; }
.logo-pager.is-paged .logo-pager__page li {
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease-out) calc(var(--i) * var(--logo-pager-step)), visibility 0s calc(var(--i) * var(--logo-pager-step) + .45s);
}
.logo-pager.is-paged .logo-pager__page[data-on] li {
  opacity: 1; visibility: visible;
  transition: opacity .5s var(--ease-out) calc(var(--i) * var(--logo-pager-step) + .18s), visibility 0s calc(var(--i) * var(--logo-pager-step));
}
.logo-pager .logo-slot {
  width: 100%; height: var(--logo-pager-h); padding-inline: var(--sp-3);
  text-align: center; font-size: var(--fs-small); letter-spacing: normal; text-transform: none;
}
.logo-pager__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-5); }
.logo-pager__count { margin-right: auto; font-size: var(--fs-small); color: var(--fg-dim); }
.logo-pager__count b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.logo-pager__next {
  display: inline-flex; align-items: center; gap: var(--sp-1); padding: 4px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--fg); transition: scale .12s ease;
}
.logo-pager__next:active { scale: .97; }
.logo-pager__next[hidden] { display: none; }
.logo-pager__next .ico { width: 18px; height: 18px; rotate: -90deg; transition: translate .5s var(--ease-out); }
@media (hover: hover) { .logo-pager__next:hover .ico { translate: 3px 0; } }

/* ---- LG07 · the stack as one typeset line ----
   <section class="logo-stack"><div class="wrap"> eyebrow
     <ul class="logo-stack__line" data-reveal-group>
       <li class="logo-stack__group reveal"><span class="logo-stack__k">ERP</span>
         <span class="logo-stack__names"><span>Xentral</span><span>Haufe X360</span></span></li> …
     </ul></div></section>
   A narrow band: section padding drops to --sp-8, like the kit's logo band. */
.logo-stack { --logo-stack-name: calc(var(--fs-h3) * 1.12); padding-block: var(--sp-8); }
.logo-stack .eyebrow { max-width: none; }
.logo-stack__line { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; border-top: 1px solid var(--hairline); }
.logo-stack__group { flex: 1 1 auto; padding: var(--sp-4) var(--sp-6) 0; }
.logo-stack__group:first-child { padding-left: 0; }
.logo-stack__group + .logo-stack__group { border-left: 1px solid var(--hairline); }
.logo-stack__k {
  display: block; font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-dim);
}
.logo-stack__names { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); margin-top: var(--sp-3); }
.logo-stack__names span {
  font-family: var(--font-head); font-weight: 600; font-stretch: var(--head-stretch, normal);
  font-size: var(--logo-stack-name); line-height: 1.25; letter-spacing: var(--ls-head, normal); color: var(--fg); white-space: nowrap;
}

/* ---- the candidates on smaller screens ---- */
@media (max-width: 900px) {
  .logo-map__head, .logo-creds__head, .logo-names .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .logo-map__body { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .logo-stories__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logo-stories__grid > li:not(:nth-child(4n)) { border-right: 0; }
  .logo-stories__grid > li:nth-child(odd) { border-right: 1px solid var(--hairline); }
  .logo-names { --logo-quote-inset: 0; }
  .logo-names__intro .link { display: none; }
  .logo-creds__cols, .logo-creds__foot { display: none; }
  .logo-creds__row { grid-template-columns: var(--logo-seal) minmax(0, 1fr); gap: var(--sp-3) var(--sp-5); }
  .logo-creds__means, .logo-creds__track { grid-column: 2; }
  .logo-creds__track { margin: 0; min-height: 64px; }
  .logo-creds__nowlbl {
    display: block; position: absolute; top: 0; left: calc(var(--now) * 1%); padding-left: 6px;
    font-style: normal; font-size: var(--fs-small); font-weight: 600; color: var(--fg);
  }
  .logo-sectors__panel { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .logo-pager__page { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .logo-map { --logo-map-ratio: 3 / 4; --logo-map-node: var(--fs-small); }
  .logo-map__svg--d { display: none; }
  .logo-map__svg--m { display: block; }
  .logo-map__hub { left: 22%; top: 34%; width: 56%; height: 32%; }
  .logo-map__node { left: calc(var(--mx) * 1%); top: calc(var(--my) * 1%); }
  .logo-map__col--shop, .logo-map__col--out { display: none; }
  .logo-map__col--erp { top: calc(34% + var(--sp-2)); }
  .logo-stories { --logo-cell-h: 208px; --logo-fig: calc(var(--fs-h3) * 1.45); }
  .logo-stories__cell { padding: var(--sp-4) var(--sp-3); }
  .logo-stories .logo-slot { height: 48px; }
  .logo-names { --logo-names-size: calc(var(--fs-h2) * .68); }
  .logo-names__quote blockquote p { font-size: var(--fs-lead); }
  .logo-creds { --logo-seal: 44px; }
  .logo-creds__row { grid-template-columns: minmax(0, 1fr); }
  .logo-creds .logo-creds__seal { display: none; }
  .logo-creds__means, .logo-creds__track { grid-column: 1; }
  .logo-sectors__tabs { gap: var(--sp-5); }
  .logo-sectors__tab { font-size: var(--fs-body); }
  .logo-sectors { --logo-mark-h: 108px; --logo-sector-fig: var(--fs-display); }
  .logo-sectors__marks li { padding: var(--sp-3); }
  .logo-pager__page { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .logo-pager { --logo-pager-h: 80px; }
  .logo-pager__band { gap: var(--sp-3); }
  .logo-stack__line { flex-direction: column; }
  .logo-stack__group, .logo-stack__group:first-child {
    display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--sp-3);
    padding: var(--sp-3) 0; border-left: 0;
  }
  .logo-stack__group + .logo-stack__group { border-left: 0; border-top: 1px solid var(--hairline); }
  .logo-stack__names { margin-top: 0; gap: 0 var(--sp-4); }
  .logo-stack__k { padding-top: .5em; }
  .logo-stack { --logo-stack-name: var(--fs-h3); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-map__svg path, .logo-map__node, .logo-map.is-live .logo-map__detail, .logo-map.is-live .logo-map__detail[data-on],
  .logo-stories__cell, .logo-stories .logo-slot, .logo-stories__sector, .logo-stories__result,
  .logo-sectors__tab::after, .logo-pager__next .ico,
  .logo-pager.is-paged .logo-pager__page li, .logo-pager.is-paged .logo-pager__page[data-on] li { transition: none; }
  .logo-sectors__panel.is-shown, .logo-sectors__panel.is-shown .logo-sectors__marks li { animation: none; }
}


/* ---- 2026-09-11 · BDG page view ---- */
/* LG08–LG10 · BDG's systems, channels and partners. Text wordmarks only;
   a real mark, once permitted, is img[data-logo="partner"] at 28 px
   (references/rules.json, LOGO-04). No root paints a background. */
:where(.logo-stream, .logo-bus, .logo-check) .eyebrow { margin-bottom: var(--sp-4); }

/* ---- LG08 · Every channel, one order stream ----
   <section class="logo-stream"><div class="wrap">
     <div class="logo-stream__head"><div> eyebrow · h2 </div><p class="lead">…</p></div>
     <div class="logo-stream__stage">
       <div class="logo-stream__draw">
         <svg class="logo-stream__svg logo-stream__svg--d" viewBox="0 0 1000 540">
           path.logo-stream__line × n · path.logo-stream__trunk · path.logo-stream__pulse[pathLength=100] × n · circle.logo-stream__port × n</svg>
         <svg class="logo-stream__svg logo-stream__svg--m" viewBox="0 0 360 520">(the same, running down)</svg>
         <ul class="logo-stream__names"><li class="logo-stream__name" style="--y:5.56;--my:4.62">Shopify</li> …</ul>
         <span class="logo-stream__group" style="--y:5.56">Shops</span> …
       </div>
       <div class="logo-stream__erp"> k · sys · one · back </div>
     </div>
     <a class="link">…</a>
   </div></section>
   The stage keeps its viewBox's ratio, so labels placed in percent meet
   their lines. JS adds .is-armed, then .is-flowing once in view. */
.logo-stream {
  --stream-line: color-mix(in srgb, var(--fg) 32%, transparent);
  --stream-name: var(--fs-h3);
  --stream-node: 24%;
}
.logo-stream__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--sp-6) var(--sp-8); align-items: end; }
.logo-stream__head h2 { max-width: 15ch; text-wrap: balance; }
.logo-stream__head .lead { text-wrap: pretty; }
.logo-stream__stage { position: relative; margin-top: var(--sp-8); }
.logo-stream__draw { position: relative; aspect-ratio: 1000 / 540; }
.logo-stream__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.logo-stream__svg--m { display: none; }
.logo-stream__line { fill: none; stroke: var(--stream-line); stroke-width: 1.25; }
.logo-stream__trunk { fill: none; stroke: var(--fg); stroke-width: 3.5; stroke-linecap: round; }
.logo-stream__port { fill: var(--fg); }
.logo-stream__pulse {
  fill: none; stroke: var(--fg); stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 5 100; stroke-dashoffset: 5; opacity: 0;
}
.logo-stream.is-flowing .logo-stream__pulse { animation: logo-stream-run 1.5s var(--ease-out) calc(var(--i, 0) * 70ms) both; }
.logo-stream.is-flowing .logo-stream__pulse--trunk { animation-duration: .8s; animation-delay: 1.35s; }
@keyframes logo-stream-run {
  0% { stroke-dashoffset: 5; opacity: 1; }
  85% { opacity: 1; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}
.logo-stream__names { list-style: none; margin: 0; padding: 0; }
.logo-stream__name {
  position: absolute; right: 71.6%; top: calc(var(--y) * 1%); translate: 0 -50%;
  font-family: var(--font-head); font-stretch: var(--head-stretch, normal); font-weight: 600;
  font-size: var(--stream-name); line-height: 1.2; letter-spacing: var(--ls-head, normal);
  color: var(--fg); white-space: nowrap;
}
.logo-stream__group {
  position: absolute; left: 0; top: calc(var(--y) * 1%); translate: 0 -50%;
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--fg-dim);
}
.logo-stream__erp {
  position: absolute; left: 76%; top: 50%; translate: 0 -50%; width: var(--stream-node);
  display: grid; gap: var(--sp-2); padding: var(--sp-5);
  border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--bg-2);
}
.logo-stream__k { font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-dim); }
.logo-stream__sys {
  font-family: var(--font-head); font-stretch: var(--head-stretch, normal); font-weight: 700;
  font-size: var(--fs-h3); line-height: 1.25; letter-spacing: var(--ls-head, normal); color: var(--fg); text-wrap: balance;
}
.logo-stream__one { margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--hairline); font-weight: 600; line-height: 1.45; color: var(--fg); }
.logo-stream__back { font-size: var(--fs-small); line-height: 1.5; color: var(--fg-muted); }
.logo-stream__more { margin-top: var(--sp-6); }

@media (max-width: 900px) {
  .logo-stream { --stream-name: var(--fs-body); --stream-node: 24%; }
  .logo-stream__head { grid-template-columns: minmax(0, 1fr); }
  .logo-stream__erp { padding: var(--sp-3); }
  .logo-stream__sys { font-size: var(--fs-body); }
  .logo-stream__one { font-size: var(--fs-small); }
  .logo-stream__back { display: none; }
}
@media (max-width: 640px) {
  .logo-stream__draw { aspect-ratio: 360 / 520; }
  .logo-stream__svg--d, .logo-stream__group { display: none; }
  .logo-stream__svg--m { display: block; }
  .logo-stream__name { right: 55.2%; top: calc(var(--my) * 1%); }
  .logo-stream__erp { position: static; translate: none; width: auto; padding: var(--sp-4) var(--sp-5); }
  .logo-stream__sys { font-size: var(--fs-h3); }
  .logo-stream__back { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-stream.is-flowing .logo-stream__pulse { animation: none; opacity: 0; }
}

/* ---- LG09 · Six systems on one line, a socket for yours ----
   <section class="logo-bus"><div class="wrap">
     <div class="logo-bus__head"> eyebrow · h2 </div>
     <div class="logo-bus__band">
       <ul class="logo-bus__list"><li class="logo-bus__item"><span class="logo-bus__k">ERP</span><span class="logo-bus__mark">Xentral</span></li> × 6
         <li class="logo-bus__item logo-bus__item--open">…Anderes System</li></ul>
       <p class="logo-bus__line"><span>ein System</span></p>
     </div>
     <div class="logo-bus__foot"><p>…</p><p class="logo-bus__other"><span>…</span><a class="link">…</a></p></div>
   </div></section>
   Each mark drops a tick onto the band's one line; the open socket's is dashed.
   From 900px down the line turns vertical and the marks hang off it. */
.logo-bus {
  --bus-drop: var(--sp-6);
  --bus-mark: var(--fs-h3);
  --bus-tick: color-mix(in srgb, var(--fg) 40%, transparent);
}
.logo-bus__head h2 { max-width: 17ch; text-wrap: balance; }
.logo-bus__band { margin-top: var(--sp-8); }
.logo-bus__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-4);
}
.logo-bus__item { position: relative; display: grid; gap: var(--sp-1); align-content: end; padding-bottom: var(--bus-drop); }
.logo-bus__item::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 1px; height: calc(var(--bus-drop) - var(--sp-2));
  background: var(--bus-tick);
}
.logo-bus__k { font-size: var(--fs-small); color: var(--fg-dim); }
.logo-bus__mark {
  font-family: var(--font-head); font-stretch: var(--head-stretch, normal); font-weight: 700;
  font-size: var(--bus-mark); line-height: 1.2; letter-spacing: var(--ls-head, normal); color: var(--fg);
}
.logo-bus__item--open .logo-bus__mark { font-weight: 600; color: var(--fg-muted); }
.logo-bus__item--open::after { background: none; border-left: 1px dashed var(--fg-dim); }
.logo-bus__line { display: flex; align-items: center; gap: var(--sp-3); max-width: none; margin: 0; }
.logo-bus__line::before { content: ""; flex: 1; height: 1px; background: var(--fg); }
.logo-bus__line span { font-size: var(--fs-small); color: var(--fg-dim); white-space: nowrap; }
.logo-bus__foot {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sp-5) var(--sp-8);
  margin-top: var(--sp-6); align-items: start;
}
.logo-bus__foot p { font-size: var(--fs-small); line-height: 1.55; color: var(--fg-muted); }
.logo-bus__other { display: grid; gap: var(--sp-2); justify-items: end; text-align: right; max-width: none; }
.logo-bus__other span { max-width: 52ch; }

@media (max-width: 900px) {
  .logo-bus__list { grid-template-columns: minmax(0, 1fr); gap: 0; margin-left: 3px; border-left: 1px solid var(--fg); }
  .logo-bus__item {
    grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--sp-3);
    padding: var(--sp-3) 0 var(--sp-3) var(--bus-drop); border-bottom: 1px solid var(--hairline);
  }
  .logo-bus__item::after { left: 0; bottom: auto; top: 50%; width: calc(var(--bus-drop) - var(--sp-2)); height: 1px; }
  .logo-bus__item--open::after { border-left: 0; border-top: 1px dashed var(--fg-dim); }
  .logo-bus__k { grid-column: 2; grid-row: 1; }
  .logo-bus__line { margin-top: var(--sp-2); }
  .logo-bus__line::before { display: none; }
  .logo-bus__foot { grid-template-columns: minmax(0, 1fr); }
  .logo-bus__other { justify-items: start; text-align: left; }
}

/* ---- LG10 · Tick your stack ----
   <section class="logo-check"><div class="wrap logo-check__grid">
     <div class="logo-check__lead"> eyebrow · h2 ·
       <div class="logo-check__out" aria-live="polite"><p class="logo-check__fig"><b data-n>14</b><span data-of></span></p>
         <p class="logo-check__say">…</p><ul class="logo-check__svc">…</ul></div> · .link </div>
     <div class="logo-check__groups"><fieldset class="pills logo-check__group" data-s="erp"><legend>ERP</legend> .pill × n</fieldset> …</div>
   </div></section>
   The pills are the kit's FG02, unchanged. */
.logo-check { --check-fig: calc(var(--fs-display) * 1.5); }
.logo-check__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8) var(--sp-9); align-items: start; }
.logo-check h2 { max-width: 12ch; text-wrap: balance; }
.logo-check__out { display: grid; gap: var(--sp-3); margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--fg); }
.logo-check__fig {
  display: flex; align-items: baseline; gap: var(--sp-2); max-width: none;
  font-family: var(--font-head); font-stretch: var(--head-stretch, normal); font-weight: 700;
  line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums;
}
.logo-check__fig b { font-size: var(--check-fig); letter-spacing: var(--ls-head, normal); }
.logo-check__fig span { font-size: var(--fs-h3); font-weight: 600; color: var(--fg-dim); }
.logo-check__say { font-size: var(--fs-lead); line-height: 1.5; color: var(--fg); max-width: 36ch; text-wrap: pretty; }
.logo-check__svc { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.logo-check__svc:empty { display: none; }
.logo-check__svc li { position: relative; padding-left: var(--sp-4); font-size: var(--fs-small); line-height: 1.5; color: var(--fg-muted); }
.logo-check__svc li::before { content: ""; position: absolute; left: 0; top: .75em; width: 8px; height: 1px; background: var(--fg-dim); }
.logo-check__lead > .link { margin-top: var(--sp-5); }
.logo-check__groups { border-top: 1px solid var(--hairline); }
.logo-check__group { padding-block: var(--sp-5); border-bottom: 1px solid var(--hairline); }
.logo-check__group legend { margin-bottom: var(--sp-3); }

@media (max-width: 900px) {
  .logo-check__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .logo-check h2 { max-width: 16ch; }
  .logo-check__groups { order: 1; }
  .logo-check__lead { display: contents; }
  .logo-check__lead > :not(.logo-check__out, .link) { order: 0; }
  .logo-check__out, .logo-check__lead > .link { order: 2; }
}
@media (max-width: 640px) {
  .logo-check { --check-fig: calc(var(--fs-display) * 1.3); }
  .logo-check__out { margin-top: 0; }
}