/* ============================================================
   SECTIONS LAB · Comparison (CM) — .cmp-*
   BDG page view, 2026-09-11. Tokens only; anything else is a knob
   declared on its root. No section paints its own background.
   ============================================================ */

/* ------------------------------------------------------------
   CM01 · Today, opposite its change
   <section class="cmp-ledger">
     <div class="wrap">
       <div class="cmp-ledger__head"><div>.eyebrow h2</div> .lead</div>
       <div class="cmp-ledger__table" data-reveal="none">
         <div class="cmp-ledger__cols" aria-hidden="true"><span></span><span>Heute</span><span></span><span>Mit …</span></div>
         <ol class="cmp-ledger__rows">
           <li class="cmp-ledger__row" style="--i:0">
             <p class="cmp-ledger__k"><span>01</span>Auswerten</p>
             <p class="cmp-ledger__a"><span class="cmp-ledger__tag">Heute</span>…</p>
             <span class="cmp-ledger__to"><svg class="ico">arrow</svg></span>
             <p class="cmp-ledger__b"><span class="cmp-ledger__tag">Mit KI</span>…</p>
           </li> … 4–6
         </ol>
         <p class="cmp-ledger__rule"><svg class="ico">shield</svg><span><b>Leitplanke</b> …</span></p>
       </div>
     </div>
   </section>
   The column labels are for the eye; each cell carries its own tag,
   visually hidden on desktop and shown on phones, where pairs stack.
   ------------------------------------------------------------ */
.cmp-ledger {
  --cmp-cols: minmax(0, 2.6fr) minmax(0, 4fr) 2.5em minmax(0, 5.4fr);
  --cmp-step: 110ms;
}
.cmp-ledger__head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-4) var(--sp-8); align-items: end;
}
.cmp-ledger__head h2 { text-wrap: balance; }
.cmp-ledger__head .lead { text-wrap: pretty; }
.cmp-ledger__table { margin-top: var(--sp-8); }
.cmp-ledger__cols {
  display: grid; grid-template-columns: var(--cmp-cols); gap: var(--sp-5);
  padding-bottom: var(--sp-3); border-bottom: 1px solid color-mix(in srgb, var(--fg) 45%, transparent);
  font-size: var(--fs-small); font-weight: 600; color: var(--fg-dim);
}
.cmp-ledger__cols span:last-child { color: var(--fg); }
.cmp-ledger__rows { list-style: none; margin: 0; padding: 0; }
.cmp-ledger__row {
  display: grid; grid-template-columns: var(--cmp-cols); gap: var(--sp-2) var(--sp-5); align-items: start;
  padding-block: var(--sp-5); border-bottom: 1px solid var(--hairline);
  transition: opacity .35s var(--ease-out);
}
.cmp-ledger__k { font-weight: 600; color: var(--fg); }
.cmp-ledger__k span { display: inline-block; min-width: 2.2em; font-size: var(--fs-small); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.cmp-ledger__a { color: var(--fg-muted); text-wrap: pretty; }
.cmp-ledger__to { padding-top: 3px; color: var(--fg-dim); }
.cmp-ledger__to .ico { width: var(--icon-inline); height: var(--icon-inline); }
.cmp-ledger__b { font-size: var(--fs-lead); line-height: 1.45; color: var(--fg); text-wrap: pretty; }
.cmp-ledger__tag { position: absolute; width: 1px; height: 1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; }
.cmp-ledger__rule {
  display: flex; gap: var(--sp-3); align-items: flex-start; max-width: none;
  margin-top: var(--sp-5); color: var(--fg-muted);
}
.cmp-ledger__rule .ico { flex: none; width: var(--icon-inline); height: var(--icon-inline); margin-top: 2px; color: var(--fg-dim); }
.cmp-ledger__rule b { color: var(--fg); font-weight: 600; margin-right: var(--sp-1); }

/* armed: row by row, today first, its change 150ms later */
.cmp-ledger.is-armed :is(.cmp-ledger__a, .cmp-ledger__to, .cmp-ledger__b, .cmp-ledger__k) { opacity: 0; }
.cmp-ledger.is-armed .cmp-ledger__b { transform: translateY(12px); }
.cmp-ledger.is-armed .is-in :is(.cmp-ledger__k, .cmp-ledger__a, .cmp-ledger__to) {
  opacity: 1; transition: opacity .7s var(--ease-out) calc(var(--i, 0) * var(--cmp-step));
}
.cmp-ledger.is-armed .is-in .cmp-ledger__b {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease-out) calc(var(--i, 0) * var(--cmp-step) + 150ms),
              transform .8s var(--ease-out) calc(var(--i, 0) * var(--cmp-step) + 150ms);
}
@media (hover: hover) and (pointer: fine) {
  .cmp-ledger__rows:hover .cmp-ledger__row:not(:hover) { opacity: .42; }
}
@media (max-width: 900px) {
  .cmp-ledger__head { grid-template-columns: minmax(0, 1fr); }
  .cmp-ledger__table { margin-top: var(--sp-7); }
  .cmp-ledger__cols, .cmp-ledger__to { display: none; }
  .cmp-ledger__row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); border-top: 0; }
  .cmp-ledger__rows { border-top: 1px solid color-mix(in srgb, var(--fg) 45%, transparent); }
  .cmp-ledger__tag {
    position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal;
    display: block; margin-bottom: 2px;
    font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase; color: var(--fg-dim);
  }
}
@media (max-width: 640px) {
  .cmp-ledger__b { font-size: var(--fs-body); }
  .cmp-ledger__k { font-size: var(--fs-lead); }
}
@media (prefers-reduced-motion: reduce) {
  .cmp-ledger__row { transition: none; }
  .cmp-ledger.is-armed :is(.cmp-ledger__a, .cmp-ledger__to, .cmp-ledger__b, .cmp-ledger__k) { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------
   CM02 · The same task, on two screens
   <section class="cmp-desk">
     <div class="wrap">
       <div class="cmp-desk__head"><div>.eyebrow h2</div> .lead</div>
       <div class="cmp-desk__tabs" role="tablist" hidden><button role="tab" id="CM02-t-0" aria-controls="CM02-p-0" aria-selected="true"><span>01</span>Auswerten</button> …</div>
       <div class="cmp-desk__panels">
         <div class="cmp-desk__panel" id="CM02-p-0" role="tabpanel" data-on="true">
           <h3 class="cmp-desk__ph">…</h3>
           <div class="cmp-desk__pair">
             <div class="cmp-desk__side cmp-desk__side--a"><p class="cmp-desk__label">Heute</p>
               <div class="cmp-desk__screen" aria-hidden="true"><p class="cmp-desk__bar">…</p><div class="cmp-desk__body">…</div><p class="cmp-desk__foot">…</p></div>
               <p class="cmp-desk__text">real sentence</p></div>
             <div class="cmp-desk__side cmp-desk__side--b">…</div>
           </div>
         </div> …
       </div>
       <p class="cmp-desk__rule">…</p>
     </div>
   </section>
   Screen primitives: __chips, __rows (li[data-s="ok|warn"]), __ask, __say,
   __draft, __acts. Without .is-armed every pair is listed under its topic.
   ------------------------------------------------------------ */
.cmp-desk {
  --desk-mark: var(--brand);                   /* the active tab: the one small brand state */
  --desk-warn: var(--err);                      /* a status dot inside a schematic screen */
  --desk-screen-h: 17.5em;
}
.cmp-desk__head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-4) var(--sp-8); align-items: end;
}
.cmp-desk__head h2 { text-wrap: balance; }
.cmp-desk__head .lead { text-wrap: pretty; }
.cmp-desk__tabs {
  display: flex; gap: var(--sp-6); margin-top: var(--sp-7);
  border-bottom: 1px solid var(--hairline); overflow-x: auto; scrollbar-width: none;
}
.cmp-desk__tabs button {
  position: relative; flex: none; min-height: 48px; padding: var(--sp-2) 0;
  background: none; border: 0; color: var(--fg-muted); font: inherit; font-weight: 600; cursor: pointer;
  transition: color .25s var(--ease-out);
}
.cmp-desk__tabs button span { margin-right: var(--sp-1); font-size: var(--fs-small); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.cmp-desk__tabs button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--desk-mark); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.cmp-desk__tabs button[aria-selected="true"] { color: var(--fg); }
.cmp-desk__tabs button[aria-selected="true"]::after { transform: none; }
.cmp-desk__tabs button:focus-visible { outline-offset: -2px; }
@media (hover: hover) { .cmp-desk__tabs button:hover { color: var(--fg); } }

.cmp-desk__panels { display: grid; gap: var(--sp-8); margin-top: var(--sp-7); }
.cmp-desk__ph { display: flex; gap: var(--sp-2); align-items: baseline; margin-bottom: var(--sp-4); }
.cmp-desk__ph span { font-size: var(--fs-small); color: var(--fg-dim); }
.cmp-desk.is-armed .cmp-desk__panels { gap: 0; margin-top: var(--sp-6); }
.cmp-desk.is-armed .cmp-desk__ph { display: none; }
.cmp-desk.is-armed .cmp-desk__panel {
  grid-area: 1 / 1; opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease-out), visibility 0s linear .3s;
}
.cmp-desk.is-armed .cmp-desk__panel[data-on="true"] {
  opacity: 1; visibility: visible;
  transition: opacity .45s var(--ease-out) .06s, visibility 0s;
}
.cmp-desk__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); }
.cmp-desk__label {
  margin-bottom: var(--sp-2);
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--fg-dim);
}
.cmp-desk__side--b .cmp-desk__label { color: var(--fg); }

/* the schematic screen (a stand-in for the client's real UI) */
.cmp-desk__screen {
  display: flex; flex-direction: column; min-height: var(--desk-screen-h);
  background: var(--bg-3); border: 1px solid var(--hairline); border-radius: var(--radius-card);
  font-size: var(--fs-small); line-height: 1.45; font-variant-numeric: tabular-nums;
}
.cmp-desk__screen p { max-width: none; }
.cmp-desk__bar { padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--hairline); color: var(--fg-dim); font-weight: 600; }
.cmp-desk__body { flex: 1; display: grid; gap: var(--sp-3); align-content: start; padding: var(--sp-4); }
.cmp-desk__foot { padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--hairline); color: var(--fg-dim); }
.cmp-desk__screen--b .cmp-desk__foot { color: var(--fg-muted); }
.cmp-desk__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cmp-desk__chips li { padding: 2px 10px; border: 1px solid var(--hairline); border-radius: var(--radius-btn); color: var(--fg-muted); }
.cmp-desk__rows { list-style: none; margin: 0; padding: 0; }
.cmp-desk__rows li {
  position: relative; display: flex; justify-content: space-between; gap: var(--sp-3);
  padding-block: 6px; border-bottom: 1px solid var(--hairline); color: var(--fg-muted);
}
.cmp-desk__rows li:last-child { border-bottom: 0; }
.cmp-desk__rows li > span:last-child { color: var(--fg-dim); text-align: right; }
.cmp-desk__screen--b .cmp-desk__rows li { color: var(--fg); }
.cmp-desk__screen--b .cmp-desk__rows li > span:last-child { color: var(--fg-muted); }
.cmp-desk__rows li[data-s] { padding-left: var(--sp-4); }
.cmp-desk__rows li[data-s]::before {
  content: ""; position: absolute; left: 0; top: calc(6px + .55em); width: 7px; height: 7px;
  border: 1px solid var(--fg-dim); border-radius: 50%;
}
.cmp-desk__rows li[data-s="ok"]::before { background: var(--fg-dim); }
.cmp-desk__rows li[data-s="warn"]::before { border-color: var(--desk-warn); background: var(--desk-warn); }
.cmp-desk__ask { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--field-edge); border-radius: var(--radius-btn); color: var(--fg); }
.cmp-desk__say { color: var(--fg); }
.cmp-desk__screen--a .cmp-desk__say { color: var(--fg-muted); }
.cmp-desk__draft { min-height: 4.4em; padding-left: var(--sp-3); border-left: 2px solid var(--hairline); color: var(--fg-muted); }
.cmp-desk__caret { display: inline-block; width: 1px; height: 1.2em; vertical-align: -.2em; background: var(--fg-dim); }
.cmp-desk__acts { display: flex; gap: var(--sp-2); }
.cmp-desk__acts span { padding: 4px 12px; border: 1px solid var(--hairline); border-radius: var(--radius-btn); color: var(--fg-muted); }
.cmp-desk__acts span[data-main] { border-color: var(--fg); color: var(--fg); font-weight: 600; }
.cmp-desk__text { margin-top: var(--sp-4); max-width: 44ch; color: var(--fg-muted); text-wrap: pretty; }
.cmp-desk__side--b .cmp-desk__text { font-size: var(--fs-lead); line-height: 1.45; color: var(--fg); }
.cmp-desk__rule {
  display: flex; gap: var(--sp-3); align-items: flex-start; max-width: none;
  margin-top: var(--sp-7); padding-top: var(--sp-4); border-top: 1px solid var(--hairline); color: var(--fg-muted);
}
.cmp-desk__rule .ico { flex: none; width: var(--icon-inline); height: var(--icon-inline); margin-top: 2px; color: var(--fg-dim); }
.cmp-desk__rule b { color: var(--fg); font-weight: 600; margin-right: var(--sp-1); }

@media (max-width: 900px) {
  .cmp-desk__head { grid-template-columns: minmax(0, 1fr); }
  .cmp-desk__tabs { gap: var(--sp-5); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
}
@media (max-width: 640px) {
  .cmp-desk { --desk-screen-h: 0; }
  .cmp-desk__pair { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .cmp-desk__side--b .cmp-desk__text { font-size: var(--fs-body); }
}
@media (prefers-reduced-motion: reduce) {
  .cmp-desk__tabs button, .cmp-desk__tabs button::after { transition: none; }
  .cmp-desk.is-armed .cmp-desk__panel, .cmp-desk.is-armed .cmp-desk__panel[data-on="true"] { transition: none; }
}

/* ------------------------------------------------------------
   CM03 · One switch rewrites the list
   <section class="cmp-flip" data-state="a|b">
     <div class="wrap cmp-flip__grid">
       <div class="cmp-flip__side">.eyebrow h2 .lead
         <div class="cmp-flip__ctl">
           <div class="cmp-flip__switch" role="group" hidden><button aria-pressed="true" data-state="a">Heute</button><button aria-pressed="false" data-state="b">Mit KI</button></div>
           <p class="cmp-flip__status" aria-live="polite">…</p></div></div>
       <div class="cmp-flip__main">
         <ol class="cmp-flip__list" data-reveal-group>
           <li class="cmp-flip__row reveal" style="--i:0"><p class="cmp-flip__k"><span>01</span>…</p>
             <div class="cmp-flip__cell"><p class="cmp-flip__t cmp-flip__t--a"><span class="cmp-flip__tag">Heute</span>…</p><p class="cmp-flip__t cmp-flip__t--b">…</p></div></li> …
         </ol>
         <p class="cmp-flip__rule">…</p>
       </div>
     </div>
   </section>
   Without .is-armed both sentences show, tagged. Armed, they share one
   cell and data-state on the root decides which one is in.
   ------------------------------------------------------------ */
.cmp-flip {
  --flip-t: calc(var(--fs-h3) * 1.08);
  --flip-step: 60ms;
}
.cmp-flip__grid {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--sp-7) var(--sp-8); align-items: start;
}
.cmp-flip__side { position: sticky; top: var(--sp-8); }
.cmp-flip__side h2 { text-wrap: balance; }
.cmp-flip__side .lead { margin-top: var(--sp-5); text-wrap: pretty; }
.cmp-flip__ctl { margin-top: var(--sp-6); }
.cmp-flip__switch {
  display: inline-flex; gap: 4px; padding: 4px;
  border: 1px solid color-mix(in srgb, var(--fg) 30%, transparent); border-radius: var(--radius-btn);
}
.cmp-flip__switch[hidden] { display: none; }
.cmp-flip__switch button {
  min-height: 44px; padding: 0 var(--sp-4);
  background: transparent; border: 0; border-radius: calc(var(--radius-btn) - 3px);
  color: var(--fg-muted); font: inherit; font-weight: 600; cursor: pointer;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), scale .12s ease;
}
.cmp-flip__switch button:active { scale: .98; }
.cmp-flip__switch button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
@media (hover: hover) { .cmp-flip__switch button[aria-pressed="false"]:hover { color: var(--fg); } }
.cmp-flip__status { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--fg-dim); }

.cmp-flip__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid color-mix(in srgb, var(--fg) 45%, transparent); }
.cmp-flip__row {
  display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 7fr); gap: var(--sp-2) var(--sp-5);
  padding-block: var(--sp-5); border-bottom: 1px solid var(--hairline);
}
.cmp-flip__k { padding-top: .35em; font-size: var(--fs-small); font-weight: 600; color: var(--fg-muted); }
.cmp-flip__k span { display: inline-block; min-width: 2.2em; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.cmp-flip__t {
  max-width: 40ch; font-family: var(--font-head); font-weight: 600; font-stretch: var(--head-stretch, normal);
  font-size: var(--flip-t); line-height: 1.3; letter-spacing: -.01em; color: var(--fg); text-wrap: pretty;
}
.cmp-flip__t--a { color: var(--fg-muted); }
.cmp-flip__t + .cmp-flip__t { margin-top: var(--sp-3); }
.cmp-flip__tag {
  display: block; margin-bottom: 2px;
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); font-weight: 400; letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--fg-dim);
}
.cmp-flip.is-armed .cmp-flip__cell { display: grid; overflow: clip; padding-block: .1em; }
.cmp-flip.is-armed .cmp-flip__t { grid-area: 1 / 1; margin: 0; }
.cmp-flip.is-armed .cmp-flip__tag { display: none; }
.cmp-flip.is-armed .cmp-flip__t {
  transition: opacity .45s var(--ease-out) calc(var(--i, 0) * var(--flip-step)),
              transform .65s var(--ease-out) calc(var(--i, 0) * var(--flip-step)),
              visibility 0s linear calc(.65s + var(--i, 0) * var(--flip-step));
}
.cmp-flip.is-armed[data-state="a"] .cmp-flip__t--b { opacity: 0; visibility: hidden; transform: translateY(.9em); }
.cmp-flip.is-armed[data-state="b"] .cmp-flip__t--a { opacity: 0; visibility: hidden; transform: translateY(-.9em); }
.cmp-flip.is-armed[data-state="a"] .cmp-flip__t--a,
.cmp-flip.is-armed[data-state="b"] .cmp-flip__t--b {
  visibility: visible;
  transition: opacity .55s var(--ease-out) calc(var(--i, 0) * var(--flip-step) + 80ms),
              transform .7s var(--ease-out) calc(var(--i, 0) * var(--flip-step) + 80ms), visibility 0s;
}
.cmp-flip.is-calm .cmp-flip__t { transition: none; }
.cmp-flip__rule {
  display: flex; gap: var(--sp-3); align-items: flex-start; max-width: none;
  margin-top: var(--sp-5); color: var(--fg-muted);
}
.cmp-flip__rule .ico { flex: none; width: var(--icon-inline); height: var(--icon-inline); margin-top: 2px; color: var(--fg-dim); }
.cmp-flip__rule b { color: var(--fg); font-weight: 600; margin-right: var(--sp-1); }

@media (max-width: 900px) {
  .cmp-flip__grid { grid-template-columns: minmax(0, 1fr); }
  .cmp-flip__side { position: static; }
}
@media (max-width: 640px) {
  .cmp-flip { --flip-t: var(--fs-lead); }
  .cmp-flip__row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); padding-block: var(--sp-4); }
  .cmp-flip__k { padding-top: 0; }
  .cmp-flip__switch { display: flex; }
  .cmp-flip__switch button { flex: 1; padding-inline: var(--sp-2); font-size: var(--fs-small); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .cmp-flip__switch button, .cmp-flip.is-armed .cmp-flip__t { transition: none; }
}