/* ============================================================
   AUDIENCES — candidates (sections lab, group AU)
   Every part lives under .aud-*. Tokens only; every other value is a
   knob declared on its component. Entry points plus proof, never a gate.
   ============================================================ */

/* ---- shared: the section head ----
   <div class="aud-head"> <div> .eyebrow · h2 </div> .lead </div> */
.aud-head {
  display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  gap: var(--sp-5) var(--sp-8); align-items: end; margin-bottom: var(--sp-8);
}
.aud-head h2 { max-width: 21ch; text-wrap: balance; }
.aud-head > .lead { justify-self: end; max-width: 42ch; text-wrap: pretty; }

/* ============================================================
   AU01 · sector rows, the photo answers
   <div class="wrap aud-rows__grid">
     <div class="aud-rows__head"> .eyebrow · h2 · .lead </div>
     <ul class="aud-rows__list">
       <li><a class="aud-rows__row [is-on]"> span.aud-rows__n · span.aud-rows__t
         · span.aud-rows__p · span.aud-rows__ref · .arrow </a></li> × 4
     </ul>
     <div class="photo photo--people parallax aud-rows__frame" aria-hidden="true"> img.is-on · img · img · img </div>
   </div>
   The frame stacks one photo per row; .is-on (row under the pointer or
   focus, the first by default) fades its photo in. The frame is
   decoration beside real links, so its images are alt="". */
.aud-rows__grid {
  --rows-title: calc(var(--fs-h2) * .62);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--sp-8);
}
.aud-rows__head { grid-column: 1; grid-row: 1; margin-bottom: var(--sp-7); }
.aud-rows__head h2 { max-width: 16ch; text-wrap: balance; }
.aud-rows__head .lead { margin-top: var(--sp-4); max-width: 44ch; text-wrap: pretty; }
.aud-rows__list { grid-column: 1; grid-row: 2; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--hairline); }
.aud-rows__frame { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
.aud-rows__frame img { opacity: 0; transition: opacity .7s var(--ease-out); }
.aud-rows__frame img.is-on { opacity: 1; }
.aud-rows__row {
  display: grid; grid-template-columns: 3.4em minmax(0, 1fr) auto; column-gap: var(--sp-4);
  padding: var(--sp-5) 0; border-top: 1px solid var(--hairline); color: var(--fg); text-decoration: none;
}
.aud-rows__n {
  grid-row: 1 / span 3; padding-top: .95em;
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  color: var(--fg-dim); font-variant-numeric: tabular-nums; transition: color .3s var(--ease-out);
}
.aud-rows__t {
  grid-column: 2; font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--rows-title); line-height: 1.1; letter-spacing: var(--ls-head, var(--ls-display));
  transition: transform .5s var(--ease-out), opacity .3s var(--ease-out);
}
.aud-rows__p { grid-column: 2; margin-top: var(--sp-2); color: var(--fg-muted); max-width: 46ch; }
.aud-rows__ref { grid-column: 2; margin-top: var(--sp-1); font-size: var(--fs-small); color: var(--fg-dim); }
.aud-rows__row > .arrow { grid-column: 3; grid-row: 1; align-self: center; font-size: calc(var(--rows-title) * .6); }
.aud-rows__row.is-on .aud-rows__n { color: var(--fg); }
.aud-rows__row:focus-visible .aud-rows__t { transform: translateX(var(--sp-2)); }
.aud-rows__row:focus-visible .arrow::before { transform: translateX(170%); }
.aud-rows__row:focus-visible .arrow::after { transform: none; }
@media (hover: hover) {
  .aud-rows__list:hover .aud-rows__row:not(:hover) .aud-rows__t { opacity: .3; }
  .aud-rows__row:hover .aud-rows__t { transform: translateX(var(--sp-2)); }
  .aud-rows__row:hover .arrow::before { transform: translateX(170%); }
  .aud-rows__row:hover .arrow::after { transform: none; }
}

/* ============================================================
   AU02 · situation selector
   <div class="wrap aud-sit__grid">
     <div class="aud-sit__head"> .eyebrow · h2 · .lead </div>
     <div class="aud-sit__list" role="tablist" aria-orientation="vertical">
       <button class="aud-sit__opt" role="tab" aria-selected aria-controls> span.aud-sit__mark · span </button> × 4
     </div>
     <div class="aud-sit__panels">
       <div class="aud-sit__panel" role="tabpanel"> p.aud-sit__kicker · h3.aud-sit__title
         · ol.aud-sit__steps · p.aud-sit__first · .aud-sit__actions (.btn--ghost · .link) </div> × 4
     </div>
   </div>
   Options are large sentences with a ring; the chosen ring fills with the
   brand (the section's one small state). JS adds .is-armed: the panels
   then share one grid cell (the tallest sets the height) and only
   [data-on="true"] shows. Without JS they are listed. */
.aud-sit__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sp-7) var(--sp-8); align-items: start; }
.aud-sit__head { grid-column: 1; grid-row: 1; }
.aud-sit__head h2 { max-width: 14ch; text-wrap: balance; }
.aud-sit__head .lead { margin-top: var(--sp-4); max-width: 40ch; text-wrap: pretty; }
.aud-sit__list { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; border-bottom: 1px solid var(--hairline); }
.aud-sit__opt {
  --sit-opt: calc(var(--fs-h3) * 1.15);
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--sp-3); align-items: center;
  width: 100%; margin: 0; padding: var(--sp-4) 0; border: 0; border-top: 1px solid var(--hairline); background: none;
  font: inherit; font-family: var(--font-head); font-stretch: var(--head-stretch, normal); font-weight: 600;
  font-size: var(--sit-opt); line-height: 1.3; letter-spacing: var(--ls-head, normal);
  color: var(--fg-muted); text-align: left; cursor: pointer; transition: color .3s var(--ease-out);
}
.aud-sit__mark {
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--fg) 35%, transparent); transition: border-color .3s var(--ease-out);
}
.aud-sit__mark::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand);
  transform: scale(0); transition: transform .45s var(--ease-out);
}
.aud-sit__opt[aria-selected="true"] { color: var(--fg); }
.aud-sit__opt[aria-selected="true"] .aud-sit__mark { border-color: var(--brand); }
.aud-sit__opt[aria-selected="true"] .aud-sit__mark::after { transform: none; }
@media (hover: hover) {
  .aud-sit__opt:hover { color: var(--fg); }
  .aud-sit__opt:not([aria-selected="true"]):hover .aud-sit__mark { border-color: var(--fg); }
}
.aud-sit__panels { grid-column: 2; grid-row: 1 / span 2; align-self: end; display: grid; gap: var(--sp-4); }
.aud-sit__panel {
  padding: var(--sp-7); background: var(--bg-2); border: 1px solid var(--hairline); border-radius: var(--radius-card);
  transition: opacity .35s var(--ease-out), transform .5s var(--ease-out), visibility 0s;
}
.aud-sit.is-armed .aud-sit__panel { grid-area: 1 / 1; }
.aud-sit.is-armed .aud-sit__panel:not([data-on="true"]) {
  visibility: hidden; opacity: 0; transform: translateY(var(--sp-1));
  transition: opacity .2s var(--ease-out), transform .5s var(--ease-out), visibility 0s .2s;
}
.aud-sit__kicker {
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--fg-dim);
}
.aud-sit__title {
  margin-top: var(--sp-3); max-width: 22ch;
  font-size: calc(var(--fs-h2) * .55); line-height: 1.15; letter-spacing: var(--ls-head, var(--ls-display)); text-wrap: balance;
}
.aud-sit__steps { list-style: none; margin: var(--sp-6) 0 0; padding: 0; }
.aud-sit__steps li {
  display: grid; grid-template-columns: 2.4em minmax(0, 1fr); column-gap: var(--sp-2);
  padding: var(--sp-3) 0; border-top: 1px solid var(--hairline);
}
.aud-sit__n { grid-row: 1 / span 2; font-family: var(--font-head); font-weight: 700; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.aud-sit__steps b { color: var(--fg); font-weight: 600; }
.aud-sit__steps li > span:last-child { grid-column: 2; font-size: var(--fs-small); color: var(--fg-muted); }
.aud-sit__first { margin-top: var(--sp-5); font-size: var(--fs-small); max-width: 46ch; }
.aud-sit__actions { margin-top: var(--sp-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }

/* ============================================================
   AU03 · three roles, three questions
   <ul class="aud-roles__cols" data-reveal-group>
     <li class="aud-roles__col reveal"> p.aud-roles__role · h3.aud-roles__q (span.aud-roles__qm „ …“)
       · p.aud-roles__a · p.aud-roles__proof (.ico · span) · a.link </li> × 3
   </ul>
   Three columns divided by hairlines; each is a subgrid over five shared
   rows, so questions, answers, proof lines and links align across the
   roles. The opening quote hangs outside the text edge. */
.aud-roles__cols {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto);
}
.aud-roles__col {
  grid-row: span 5; display: grid; grid-template-rows: subgrid; row-gap: 0;
  padding: var(--sp-5) var(--sp-6) 0; border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline);
}
.aud-roles__col:first-child { padding-left: 0; border-left: 0; }
.aud-roles__col:last-child { padding-right: 0; }
.aud-roles__role {
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--fg-dim);
}
.aud-roles__q {
  margin-top: var(--sp-5); max-width: 20ch;
  font-size: calc(var(--fs-h2) * .5); font-weight: 600; line-height: 1.2;
  letter-spacing: var(--ls-head, var(--ls-display)); text-wrap: balance;
}
.aud-roles__qm { margin-left: -.42em; }
.aud-roles__a { margin-top: var(--sp-4); text-wrap: pretty; }
.aud-roles__proof { margin-top: var(--sp-5); display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-small); color: var(--fg-muted); }
.aud-roles__proof .ico { width: 18px; height: 18px; margin-top: 1px; color: var(--fg-dim); }
.aud-roles__col .link { margin-top: var(--sp-5); justify-self: start; align-self: start; }

/* ============================================================
   AU04 · the sentence builder
   <p class="aud-say__line"> Ich bin
     <span class="aud-say__pick"><label class="aud-say__sr">…</label><select>…</select></span> × 3 …
   </p>
   <div class="aud-say__out" aria-live="polite">
     .aud-say__svc (p.aud-say__kicker · p.aud-say__name) · .aud-say__why (p · p.aud-say__sector)
     · .aud-say__actions (.btn--accent · .link)
   </div>
   The blanks are native selects set in the sentence's own type, sized to
   their answer (field-sizing), underlined, with the house arrow turned
   down as the chevron. Every answer is in the markup ([data-say][data-i]);
   on change JS shows the chosen one of each and the step fades up
   (.is-swap). */
.aud-say__out [hidden] { display: none; }   /* beats .link and the p rules */
.aud-say { --say-size: calc(var(--fs-h2) * .64); }
.aud-say__head { margin-bottom: var(--sp-7); }
.aud-say__head h2 { max-width: 20ch; text-wrap: balance; }
.aud-say__line {
  max-width: none; font-family: var(--font-head); font-stretch: var(--head-stretch, normal); font-weight: 600;
  font-size: var(--say-size); line-height: 1.6; letter-spacing: var(--ls-head, normal); color: var(--fg-muted);
  text-wrap: pretty;
}
.aud-say__pick { position: relative; display: inline-block; white-space: nowrap; }
.aud-say__pick select {
  appearance: none; -webkit-appearance: none; field-sizing: content;
  max-width: 100%; margin: 0; padding: 0 1.05em 0 0;
  font: inherit; line-height: 1.3; letter-spacing: inherit; color: var(--fg);
  background: transparent; border: 0; border-bottom: 2px solid color-mix(in srgb, var(--fg) 30%, transparent); border-radius: 0;
  cursor: pointer; transition: border-color .3s var(--ease-out);
}
.aud-say__pick::after {
  content: ""; position: absolute; right: .05em; top: 50%; width: .5em; height: .5em; margin-top: -.25em;
  background: var(--fg-dim); pointer-events: none; transform: rotate(90deg);
  -webkit-mask: var(--arrow-icon) center / contain no-repeat; mask: var(--arrow-icon) center / contain no-repeat;
}
.aud-say__pick select:focus-visible { border-bottom-color: var(--fg); }
.aud-say__pick option { background: var(--bg-2); color: var(--fg); }
@media (hover: hover) { .aud-say__pick select:hover { border-bottom-color: var(--fg); } }
/* A blank is a control: 44px to tap on a touch screen (qa.mjs, 2026-09-11). */
@media (max-width: 900px) { .aud-say__pick select { min-height: 44px; } }
.aud-say__sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; }
.aud-say__out {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: var(--sp-6); align-items: start;
  margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--hairline);
}
.aud-say__out.is-swap { animation: aud-say-in .35s var(--ease-out); }
@keyframes aud-say-in { from { opacity: .15; transform: translateY(6px); } }
.aud-say__kicker {
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--fg-dim);
}
.aud-say__name {
  margin-top: var(--sp-2); max-width: 16ch; 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) * .5); line-height: 1.15; letter-spacing: var(--ls-head, var(--ls-display)); text-wrap: balance;
}
.aud-say__why > p { text-wrap: pretty; }
.aud-say__sector { margin-top: var(--sp-3); font-size: var(--fs-small); }
.aud-say__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }

/* ============================================================
   AU05 · sector window
   <section class="aud-win">
     <div class="wrap aud-head">…</div>
     <div class="aud-win__stage">
       <div class="aud-win__bg" aria-hidden="true"> img.is-on · img · img · img </div>
       <ol class="aud-win__list">
         <li class="aud-win__item"> .photo.photo--band.parallax.aud-win__band
           <div class="wrap aud-win__copy"> p.aud-win__n · h3.aud-win__t · .aud-win__body (p · p · a.link) </div>
         </li> × 4
       </ol>
     </div>
   </section>
   Unpinned (no JS, reduced motion, ≤900px): four full-width bands, each
   followed by its text. JS adds .is-window above 900px: the bands hide,
   the stage's images stick for the section's length (CSS sticky over
   native scroll) behind a solid scrim side, and the item nearest the
   middle of the screen (.is-on) picks the photo. */
.aud-win {
  --win-scrim: 94%;          /* the text side of the window, over the photo */
  --win-rest: .3;            /* opacity of the sectors not in view */
}
.aud-win__bg { display: none; }
.aud-win__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-8); }
.aud-win__band { border: 0; border-radius: 0; max-height: 70vh; }
.aud-win__copy {
  display: grid; grid-template-columns: 5em minmax(0, 4fr) minmax(0, 6fr); gap: var(--sp-2) var(--sp-6);
  align-items: baseline; padding-top: var(--sp-5);
}
.aud-win__n { font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.aud-win__t { font-size: calc(var(--fs-h2) * .72); line-height: 1.1; letter-spacing: var(--ls-head, var(--ls-display)); }
.aud-win__p { color: var(--fg); font-size: var(--fs-lead); max-width: 44ch; text-wrap: pretty; }
.aud-win__ref { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--fg-dim); max-width: 52ch; }
.aud-win__body .link { margin-top: var(--sp-4); }
.aud-win.is-window { padding-bottom: 0; }
.aud-win.is-window .aud-head { margin-bottom: var(--sp-8); }
.aud-win.is-window .aud-win__bg { display: block; position: sticky; top: 0; height: 100vh; overflow: clip; }
.aud-win__bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter);
  opacity: 0; transition: opacity .9s var(--ease-out);
}
.aud-win__bg img.is-on { opacity: 1; }
.aud-win__bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--bg) var(--win-scrim), transparent) 0%,
    color-mix(in srgb, var(--bg) 86%, transparent) 38%,
    color-mix(in srgb, var(--bg) 25%, transparent) 64%, transparent 84%);
}
.aud-win.is-window .aud-win__list { position: relative; margin-top: -100vh; gap: 0; }
.aud-win.is-window .aud-win__item { min-height: 100vh; display: flex; align-items: center; }
.aud-win.is-window .aud-win__band { display: none; }
.aud-win.is-window .aud-win__copy { display: block; padding-top: 0; transition: opacity .6s var(--ease-out); }
.aud-win.is-window .aud-win__copy > * { max-width: 30rem; }
.aud-win.is-window .aud-win__t { margin-top: var(--sp-3); font-size: calc(var(--fs-h2) * .9); }
.aud-win.is-window .aud-win__body { margin-top: var(--sp-5); }
.aud-win.is-window .aud-win__item:not(.is-on) .aud-win__copy { opacity: var(--win-rest); }

/* ============================================================
   AU06 · sector tabs, one case each
   <div class="aud-tabs__bar" role="tablist">
     <button class="aud-tabs__tab" role="tab" aria-selected aria-controls>…</button> × 4
     <span class="aud-tabs__ind" aria-hidden="true"></span>
   </div>
   <div class="aud-tabs__panels">
     <div class="aud-tabs__panel" role="tabpanel"> .photo.parallax
       · .aud-tabs__body ( p.aud-tabs__k · h3.aud-tabs__q · .aud-tabs__case (p.aud-tabs__fig · div) · a.link ) </div> × 4
   </div>
   The bar is plain text tabs over a hairline; JS measures the chosen tab
   and slides the one brand underline to it (.has-ind), as the house nav
   does. Without JS the chosen tab keeps a static underline and every
   panel is listed; once armed they share one cell. */
.aud-tabs { --tabs-fig: calc(var(--fs-display) * 1.05); }
.aud-tabs__bar { position: relative; display: flex; flex-wrap: wrap; gap: 0 var(--sp-6); margin-bottom: var(--sp-7); border-bottom: 1px solid var(--hairline); }
.aud-tabs__tab {
  position: relative; margin: 0; padding: var(--sp-3) 0 var(--sp-4); border: 0; background: none; cursor: pointer;
  font: inherit; font-family: var(--font-head); font-stretch: var(--head-stretch, normal); font-weight: 600;
  font-size: calc(var(--fs-h3) * 1.05); letter-spacing: var(--ls-head, normal); color: var(--fg-muted);
  transition: color .3s var(--ease-out);
}
.aud-tabs__tab[aria-selected="true"] { color: var(--fg); }
.aud-tabs__tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brand); }
.aud-tabs.has-ind .aud-tabs__tab::after { content: none; }
@media (hover: hover) { .aud-tabs__tab:hover { color: var(--fg); } }
.aud-tabs__ind {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: var(--ind-w, 0px);
  background: var(--brand); transform: translateX(var(--ind-x, 0px)); pointer-events: none;
  transition: transform .5s var(--ease-out), width .5s var(--ease-out);
}
.aud-tabs:not(.has-ind) .aud-tabs__ind { display: none; }
.aud-tabs__panels { display: grid; gap: var(--sp-8); }
.aud-tabs__panel {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--sp-8); align-items: center;
  transition: opacity .35s var(--ease-out), transform .5s var(--ease-out), visibility 0s;
}
.aud-tabs__panel:focus-visible { outline-offset: var(--sp-2); }
.aud-tabs.is-armed .aud-tabs__panel { grid-area: 1 / 1; }
.aud-tabs.is-armed .aud-tabs__panel:not([data-on="true"]) {
  visibility: hidden; opacity: 0; transform: translateY(var(--sp-1));
  transition: opacity .2s var(--ease-out), transform .5s var(--ease-out), visibility 0s .2s;
}
.aud-tabs__k {
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--fg-dim);
}
.aud-tabs__q {
  margin-top: var(--sp-3); max-width: 22ch;
  font-size: calc(var(--fs-h2) * .52); line-height: 1.18; letter-spacing: var(--ls-head, var(--ls-display)); text-wrap: balance;
}
.aud-tabs__case {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-5); align-items: center;
  margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--hairline);
}
.aud-tabs__fig {
  max-width: none; white-space: nowrap;
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--tabs-fig); line-height: 1; letter-spacing: var(--ls-head, var(--ls-display));
  color: var(--head-1, var(--fg)); font-variant-numeric: tabular-nums;
}
.aud-tabs__measure { color: var(--fg); font-weight: 600; max-width: 26ch; }
.aud-tabs__co { margin-top: var(--sp-1); font-size: var(--fs-small); max-width: 40ch; }
.aud-tabs__body .link { margin-top: var(--sp-6); }

/* ============================================================
   AU07 · honest fit filter
   <div class="aud-fit__cols" data-reveal-group>
     <div class="aud-fit__col aud-fit__col--yes reveal"> h3.aud-fit__label · ul.aud-fit__list (li: span.aud-fit__m · span) </div>
     <div class="aud-fit__col aud-fit__col--no reveal"> … </div>
   </div>
   <div class="aud-fit__foot"> p · a.link </div>
   Two sentences the reader finishes: the "yes" column set large in the
   heading face, the "no" column quieter in body text beside it. */
.aud-fit__cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-top: 1px solid var(--hairline); }
.aud-fit__col { padding-top: var(--sp-6); }
.aud-fit__col--yes { padding-right: var(--sp-8); }
.aud-fit__col--no { padding-left: var(--sp-7); border-left: 1px solid var(--hairline); }
.aud-fit__label { font-size: var(--fs-h3); line-height: 1.3; }
.aud-fit__col--no .aud-fit__label { color: var(--fg-muted); }
.aud-fit__list { list-style: none; margin: var(--sp-5) 0 0; padding: 0; }
.aud-fit__list li { display: grid; grid-template-columns: 1.4em minmax(0, 1fr); gap: var(--sp-2); padding: var(--sp-4) 0; border-top: 1px solid var(--hairline); }
.aud-fit__col--yes .aud-fit__list li {
  font-family: var(--font-head); font-stretch: var(--head-stretch, normal); font-weight: 500;
  font-size: calc(var(--fs-h3) * 1.15); line-height: 1.35; letter-spacing: -.01em; color: var(--fg); text-wrap: pretty;
}
.aud-fit__col--no .aud-fit__list li { color: var(--fg-muted); text-wrap: pretty; }
.aud-fit__m { font-family: var(--font-label, inherit); font-weight: 400; color: var(--fg-dim); }
.aud-fit__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--hairline);
}
.aud-fit__foot p { max-width: 56ch; }

/* ============================================================
   reduced motion: every state still changes; nothing moves
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .aud-rows__frame img, .aud-rows__t, .aud-rows__n, .aud-sit__opt, .aud-sit__mark, .aud-sit__mark::after,
  .aud-sit__panel, .aud-sit.is-armed .aud-sit__panel:not([data-on="true"]), .aud-tabs__ind, .aud-tabs__panel,
  .aud-tabs.is-armed .aud-tabs__panel:not([data-on="true"]), .aud-win__bg img, .aud-win.is-window .aud-win__copy,
  .aud-say__pick select { transition: none; }
  .aud-rows__row:hover .aud-rows__t, .aud-rows__row:focus-visible .aud-rows__t,
  .aud-sit.is-armed .aud-sit__panel:not([data-on="true"]), .aud-tabs.is-armed .aud-tabs__panel:not([data-on="true"]) { transform: none; }
  .aud-say__out.is-swap { animation: none; }
}

/* ============================================================
   ≤900px — tablets
   ============================================================ */
@media (max-width: 900px) {
  .aud-head { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--sp-7); }
  .aud-head > .lead { justify-self: start; }

  /* AU01: the rows alone; no photo per row (that would be thumbnail rows) */
  .aud-rows__grid { grid-template-columns: minmax(0, 1fr); }
  .aud-rows__frame { display: none; }

  /* AU02: head, choices, then the route */
  .aud-sit__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-6); }
  .aud-sit__head, .aud-sit__list, .aud-sit__panels { grid-column: 1; grid-row: auto; }
  .aud-sit__panel { padding: var(--sp-6); }

  /* AU03: one role per row */
  .aud-roles__cols { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .aud-roles__col, .aud-roles__col:first-child, .aud-roles__col:last-child {
    grid-row: auto; display: flex; flex-direction: column; align-items: flex-start;
    padding: var(--sp-5) 0 var(--sp-7); border-left: 0;
  }
  .aud-roles__q { max-width: 26ch; }

  /* AU04 */
  .aud-say { --say-size: calc(var(--fs-h2) * .8); }
  .aud-say__out { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .aud-say__actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }

  /* AU05: bands (the window never arms here) */
  .aud-win__list { gap: var(--sp-7); }
  .aud-win__copy { grid-template-columns: 3.2em minmax(0, 1fr); }
  .aud-win__body { grid-column: 2; }

  /* AU06: tabs as a 2 × 2 grid with static underlines; the panel stacks */
  .aud-tabs__bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--sp-4); border-bottom: 0; }
  .aud-tabs__tab { text-align: left; border-bottom: 1px solid var(--hairline); }
  .aud-tabs.has-ind .aud-tabs__tab[aria-selected="true"]::after { content: ""; }
  .aud-tabs__ind { display: none; }
  .aud-tabs__panel { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }

  /* AU07 */
  .aud-fit__cols { grid-template-columns: minmax(0, 1fr); }
  .aud-fit__col--yes { padding-right: 0; }
  .aud-fit__col--no { padding-left: 0; border-left: 0; margin-top: var(--sp-6); }
}

/* ============================================================
   ≤640px — phones
   ============================================================ */
@media (max-width: 640px) {
  .aud-head h2 { max-width: none; }

  /* AU01 */
  .aud-rows__grid { --rows-title: calc(var(--fs-h2) * .8); }
  .aud-rows__row { grid-template-columns: 2.4em minmax(0, 1fr) auto; column-gap: var(--sp-2); padding: var(--sp-4) 0; }
  .aud-rows__n { padding-top: .7em; }

  /* AU02 */
  .aud-sit__opt { --sit-opt: calc(var(--fs-h3) * .95); padding: var(--sp-3) 0; }
  .aud-sit__panel { padding: var(--sp-5); }
  .aud-sit__title { font-size: calc(var(--fs-h2) * .75); }
  .aud-sit__actions { flex-direction: column; align-items: flex-start; }

  /* AU03 */
  .aud-roles__q { font-size: calc(var(--fs-h2) * .75); }

  /* AU04 */
  .aud-say__line { line-height: 1.7; }
  /* A long German option must not push the pick past the screen. */
  .aud-say__pick { max-width: 100%; vertical-align: bottom; }
  .aud-say__out { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .aud-say__name { font-size: calc(var(--fs-h2) * .8); }
  .aud-say__actions { flex-direction: column; align-items: flex-start; }

  /* AU05 */
  .aud-win__copy { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .aud-win__body { grid-column: 1; margin-top: var(--sp-2); }
  .aud-win__t { font-size: calc(var(--fs-h2) * .9); }

  /* AU06 */
  .aud-tabs__tab { font-size: var(--fs-body); padding: var(--sp-3) 0; }
  .aud-tabs__q { font-size: calc(var(--fs-h2) * .75); }
  .aud-tabs { --tabs-fig: calc(var(--fs-display) * 1.2); }

  /* AU07 */
  .aud-fit__col--yes .aud-fit__list li { font-size: var(--fs-lead); }
}