/* ============================================================
   HERO — candidates (sections lab, group HE)
   Every section is `.hero .hero--x`: the kit's .hero stays for the
   sticky CTA bar, and each modifier replaces the kit's split grid.
   Tokens only; each knob is a custom property on its component.
   ============================================================ */

/* ---- shared parts ---- */
.hero__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }
.hero__small { margin-top: var(--sp-4); font-size: var(--fs-small); line-height: 1.5; color: var(--fg-dim); max-width: 52ch; }

/* ---- HE01 · the system map ----
   <section class="hero hero--map"><div class="wrap">
     <div class="hero__map-copy"> eyebrow · h1 · .lead · .hero__acts · .hero__small </div>
     <div class="hero__map" role="group" aria-label="…">
       <svg class="hero__lines hero__lines--wide"><line data-seg="shop-erp" x1="14%" …/> …</svg>  (+ --narrow)
       <ol class="hero__nodes">
         <li class="hero__node hero__node--shop" data-node="shop">
           <span class="hero__node-role">Shop</span><span class="hero__node-sys">Shopify</span>
           <span class="hero__node-state"><span class="hero__node-done">…</span><span class="hero__node-wait">…</span></span>
         </li> … shop · edi · erp · wh · fin
       </ol>
       <div class="hero__token" aria-hidden="true"><span>…</span></div>
     </div>
     <p class="hero__map-foot">Schema – …</p>
   </div></section>
   Nodes (--l --t --w --h) and connectors share one % coordinate system,
   so the map scales without measuring. JS adds .is-armed (nodes wait,
   connectors dashed), lights them in turn and ends on .is-done, which
   is exactly the no-JS / reduced-motion state. */
.hero--map {
  --map-ratio: 6 / 5;
  --map-line: color-mix(in srgb, var(--fg) 20%, transparent);
  --map-line-on: color-mix(in srgb, var(--fg) 50%, transparent);
  --map-lit: color-mix(in srgb, var(--fg) 45%, transparent);
  --map-hub: color-mix(in srgb, var(--fg) 26%, transparent);
  padding-block: var(--sp-9) var(--sp-8);
}
.hero--map .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--sp-4) var(--sp-8); align-items: center; }
.hero__map-copy h1 { margin-bottom: var(--sp-5); text-wrap: balance; }
.hero__map-copy .lead { margin-bottom: var(--block-gap); max-width: 44ch; text-wrap: pretty; }
.hero__map { position: relative; aspect-ratio: var(--map-ratio); overflow: clip; overflow-clip-margin: var(--sp-2); }
.hero__map-foot { grid-column: 2; font-size: var(--fs-small); color: var(--fg-dim); max-width: 56ch; }
.hero__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero__lines line { stroke: var(--map-line-on); stroke-width: 1.25; vector-effect: non-scaling-stroke; transition: stroke .6s var(--ease-out); }
.hero--map.is-armed .hero__lines line:not(.is-lit) { stroke: var(--map-line); stroke-dasharray: 2 5; }
.hero__lines--narrow { display: none; }
.hero__nodes { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.hero__node {
  position: absolute; left: calc(var(--l) * 1%); top: calc(var(--t) * 1%);
  width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
  display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3);
  background: var(--bg-3); border: 1px solid var(--hairline); border-radius: var(--radius-card);
  transition: border-color .6s var(--ease-out);
}
.hero__node--shop { --l: 0;  --t: 0;  --w: 28; --h: 32; }
.hero__node--edi  { --l: 0;  --t: 68; --w: 28; --h: 32; }
.hero__node--erp  { --l: 36; --t: 34; --w: 28; --h: 32; border-color: var(--map-hub); }
.hero__node--wh   { --l: 72; --t: 0;  --w: 28; --h: 32; }
.hero__node--fin  { --l: 72; --t: 68; --w: 28; --h: 32; }
.hero__node-role { font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-dim); }
.hero__node-sys {
  font-family: var(--font-head); font-weight: 600; font-stretch: var(--head-stretch, normal);
  font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.01em; color: var(--fg);
}
.hero__node-state { display: grid; margin-top: auto; font-size: var(--fs-small); line-height: 1.4; color: var(--fg-muted); text-wrap: pretty; }
.hero__node-state > span { grid-area: 1 / 1; transition: opacity .45s var(--ease-out), visibility .45s; }
.hero__node-done .ico { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; color: var(--fg); }
.hero__node-wait { opacity: 0; visibility: hidden; color: var(--fg-dim); }
.hero--map.is-armed .hero__node:not(.is-lit) .hero__node-done { opacity: 0; visibility: hidden; }
.hero--map.is-armed .hero__node:not(.is-lit) .hero__node-wait { opacity: 1; visibility: visible; }
.hero--map.is-armed .hero__node.is-lit { border-color: var(--map-lit); }
.hero--map.is-done .hero__node.is-lit { border-color: var(--hairline); }
.hero--map.is-done .hero__node--erp.is-lit { border-color: var(--map-hub); }
.hero__token {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  transform: translate(calc(var(--tx, 0) * 1%), calc(var(--ty, 0) * 1%));
  opacity: 0; transition: opacity .25s;
}
.hero__token.is-on { opacity: 1; }
.hero__token > span {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px;
  border-radius: var(--radius-btn); background: var(--fg); color: var(--bg);
  font-size: var(--fs-small); font-weight: 600; line-height: 1.5; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hero__token .ico { width: 14px; height: 14px; }
@media (max-width: 900px) {
  .hero--map .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .hero__map-foot { grid-column: 1; margin-top: calc(var(--sp-5) * -1); }
}
@media (max-width: 640px) {
  .hero--map { --map-ratio: 2 / 3; padding-block: var(--sp-8) var(--sp-7); }
  .hero__lines--wide, .hero__node--edi { display: none; }
  .hero__lines--narrow { display: block; }
  .hero__node { --l: 0; --w: 100; --h: 19; padding: var(--sp-2) var(--sp-3); }
  .hero__node--shop { --t: 0; }
  .hero__node--erp  { --t: 27; }
  .hero__node--wh   { --t: 54; }
  .hero__node--fin  { --t: 81; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__node, .hero__node-state > span, .hero__lines line, .hero__token { transition: none; }
}

/* ---- HE02 · the first question ----
   <section class="hero hero--ask"><div class="wrap">
     <div class="hero__ask-head"> eyebrow · h1 </div>
     <p class="lead hero__ask-lead">…</p>
     <fieldset class="hero__ask-q"><legend>Welches System nutzen Sie heute?</legend>
       <label class="hero__opt"><input type="radio" name="HE02-system" value="xentral">
         <span class="hero__opt-t">Xentral</span><span class="hero__opt-k">ERP</span></label> ×4
     </fieldset>
     <div class="hero__ask-go">
       <p class="hero__ask-promise" aria-live="polite"><span data-for="">default</span><span data-for="xentral">…</span> …</p>
       <a class="btn btn--accent" href="#kontakt"><span class="hero__ask-label" data-for="">…</span> … <span class="arrow"></span></a>
       <p class="hero__small">…</p>
     </div>
   </div></section>
   The answer swaps the promise and the label in CSS (:has), so it works
   without JS; the selected radio is the section's one small accent state. */
.hero--ask { padding-block: var(--sp-9) var(--sp-8); }
.hero--ask .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-5); align-items: start; }
.hero__ask-head { grid-column: 1 / span 9; }
.hero__ask-head h1 { margin: 0; text-wrap: balance; }
.hero__ask-lead, .hero__ask-q, .hero__ask-go { padding-top: var(--sp-4); border-top: 1px solid var(--hairline); }
.hero--ask .hero__ask-lead { grid-column: 1 / span 4; margin: 0; padding-right: var(--sp-5); text-wrap: pretty; }
.hero__ask-q { grid-column: 5 / span 4; min-width: 0; margin: 0; padding-inline: 0; padding-bottom: 0; border-inline: 0; border-bottom: 0; }
.hero__ask-q legend {
  float: left; width: 100%; padding: 0; margin-bottom: var(--sp-3);
  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);
}
.hero__opt {
  clear: both; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--hairline); cursor: pointer;
}
.hero__opt input {
  appearance: none; display: grid; place-items: center; width: 18px; height: 18px; margin: 0;
  border: 1px solid var(--field-edge, var(--fg-dim)); border-radius: 50%; background: transparent;
  transition: border-color .3s;
}
.hero__opt input:checked { border-color: var(--brand); }
.hero__opt input:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.hero__opt input:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.hero__opt-t { font-size: var(--fs-lead); line-height: 1.6; color: var(--fg-muted); transition: color .3s; }
.hero__opt:has(input:checked) .hero__opt-t { color: var(--fg); font-weight: 600; }
.hero__opt-k { font-size: var(--fs-small); color: var(--fg-dim); }
@media (hover: hover) { .hero__opt:hover .hero__opt-t { color: var(--fg); } }
.hero__ask-go { grid-column: 9 / span 4; display: grid; justify-items: start; gap: var(--sp-5); }
.hero__ask-promise { max-width: 36ch; min-height: 6em; font-size: var(--fs-lead); line-height: 1.5; color: var(--fg); text-wrap: pretty; }
.hero__ask-promise > span, .hero__ask-label { display: none; }
.hero__ask-promise > [data-for=""], .hero__ask-label[data-for=""] { display: inline; }
.hero--ask:has(.hero__opt input:checked) .hero__ask-promise > [data-for=""],
.hero--ask:has(.hero__opt input:checked) .hero__ask-label[data-for=""] { display: none; }
.hero--ask:has([value="xentral"]:checked) .hero__ask-promise > [data-for="xentral"],
.hero--ask:has([value="xentral"]:checked) .hero__ask-label[data-for="xentral"],
.hero--ask:has([value="x360"]:checked) .hero__ask-promise > [data-for="x360"],
.hero--ask:has([value="x360"]:checked) .hero__ask-label[data-for="x360"],
.hero--ask:has([value="excel"]:checked) .hero__ask-promise > [data-for="excel"],
.hero--ask:has([value="excel"]:checked) .hero__ask-label[data-for="excel"],
.hero--ask:has([value="other"]:checked) .hero__ask-promise > [data-for="other"],
.hero--ask:has([value="other"]:checked) .hero__ask-label[data-for="other"] { display: inline; }
.hero__ask-go .hero__small { margin-top: calc(var(--sp-2) * -1); }
@media (max-width: 900px) {
  .hero--ask .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .hero__ask-head, .hero--ask .hero__ask-lead, .hero__ask-q, .hero__ask-go { grid-column: 1; }
  .hero--ask .hero__ask-lead { padding-right: 0; border-top: 0; padding-top: 0; }
  .hero__ask-promise { min-height: 0; }
}
@media (max-width: 640px) {
  .hero--ask { padding-block: var(--sp-8) var(--sp-7); }
  .hero__ask-go .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__opt input, .hero__opt-t { transition: none; }
}

/* ---- HE03 · service index with a stage ----
   <section class="hero hero--index"><div class="wrap">
     <div class="hero__index-copy"> eyebrow · h1 ·
       <ol class="hero__svc"><li class="is-active"><a href="…">
         <span class="hero__svc-n">01</span><span class="hero__svc-t">…</span>
         <span class="hero__svc-p"><span>promise</span></span></a></li> ×6</ol>
       <div class="hero__acts">.btn--accent</div></div>
     <div class="photo photo--people parallax hero__stage-stack">
       <img class="hero__stage-img is-on" … eager> <img class="hero__stage-img" … alt=""> ×5</div>
   </div></section>
   The active row (pointer or focus) opens its promise and shows its photo;
   the stack drifts as one frame. On phones the stage sits under the h1. */
.hero--index { --svc-open: .5s; padding-block: var(--sp-8); }
.hero--index .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-8); align-items: center; }
.hero__index-copy h1 { margin-bottom: var(--sp-6); text-wrap: balance; }
.hero__svc { list-style: none; margin: 0 0 var(--sp-6); padding: 0; border-top: 1px solid var(--hairline); }
.hero__svc li { border-bottom: 1px solid var(--hairline); }
.hero__svc a {
  display: grid; grid-template-columns: 3.25em minmax(0, 1fr); align-items: baseline; column-gap: var(--sp-3);
  padding: var(--sp-3) 0; color: var(--fg); text-decoration: none;
}
.hero__svc a:focus-visible { outline-offset: -2px; }
.hero__svc-n { font-size: var(--fs-small); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.hero__svc-t {
  font-family: var(--font-head); font-weight: 600; font-stretch: var(--head-stretch, normal);
  font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -.01em; transition: color .3s;
}
.hero__svc-p { grid-column: 2; display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--svc-open) var(--ease-out); }
.hero__svc-p > span { min-height: 0; overflow: clip; max-width: 52ch; color: var(--fg-muted); line-height: 1.55; }
.hero__svc .is-active .hero__svc-p { grid-template-rows: 1fr; }
.hero--index.is-armed .hero__svc li:not(.is-active) .hero__svc-t { color: var(--fg-muted); }
.hero__stage-img { opacity: 0; transition: opacity .6s var(--ease-out); }
.hero__stage-img.is-on { opacity: 1; }
@media (hover: hover) { .hero--index.is-armed .hero__svc a:hover .hero__svc-t { color: var(--fg); } }
@media (max-width: 900px) {
  .hero--index .wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero__index-copy { display: contents; }
  .hero--index .eyebrow { order: 1; }
  .hero--index h1 { order: 2; }
  .hero__stage-stack { order: 3; margin-bottom: var(--sp-6); }
  .hero--index .photo--people { aspect-ratio: var(--ratio-inline); }
  .hero__svc { order: 4; }
  .hero--index .hero__acts { order: 5; }
}
@media (max-width: 640px) {
  .hero--index { padding-block: var(--sp-8) var(--sp-7); }
  .hero__svc a { grid-template-columns: 2.5em minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__svc-p, .hero__svc-t, .hero__stage-img { transition: none; }
}

/* ---- HE04 · scene, detail, one figure ----
   <section class="hero hero--scene"><div class="hero__scene">
     <div class="hero__scene-copy"> eyebrow · h1 · .lead · .hero__acts ·
       <div class="hero__scene-fig"><p class="hero__fig"><span class="odometer">500</span><span class="hero__fig-plus">+</span></p><p>…</p></div></div>
     <div class="hero__scene-media">
       <div class="photo photo--people parallax hero__scene-main">…eager</div>
       <div class="photo hero__scene-detail">…</div></div>
   </div></section>
   Straight in the section (no .wrap): the scene bleeds off the right edge,
   the detail (still) overlaps its corner toward the copy. */
.hero--scene {
  --scene-fig: calc(var(--fs-display) * 1.5);
  --scene-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55);
  padding-block: var(--sp-8);
}
.hero__scene { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--sp-8); align-items: center; }
.hero__scene-copy { padding-left: var(--gutter); }
.hero__scene-copy h1 { margin-bottom: var(--sp-5); text-wrap: balance; }
.hero__scene-copy .lead { margin-bottom: var(--block-gap); text-wrap: pretty; }
.hero__scene-fig {
  display: grid; grid-template-columns: auto minmax(0, 26ch); align-items: end; gap: var(--sp-5);
  max-width: 36rem; margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--hairline);
}
.hero__fig {
  display: flex; max-width: none; margin: 0;
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--scene-fig); line-height: .9; letter-spacing: var(--ls-head, var(--ls-display));
  color: var(--head-1, var(--fg)); font-variant-numeric: tabular-nums;
}
.hero__fig-plus { color: var(--fg-dim); }
.hero__scene-figtext { font-size: var(--fs-small); line-height: 1.5; color: var(--fg-muted); text-wrap: pretty; }
.hero__scene-media { position: relative; }
.hero__scene-main { border-right: 0; border-radius: var(--img-radius) 0 0 var(--img-radius); }
.hero__scene-detail {
  position: absolute; left: -14%; bottom: 8%; width: 46%;
  border: 6px solid var(--bg); border-radius: calc(var(--img-radius) + 6px); box-shadow: var(--scene-shadow);
}
@media (max-width: 900px) {
  .hero__scene { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .hero__scene-copy { padding-right: var(--gutter); }
  .hero__scene-media { width: 82%; justify-self: end; }
  .hero__scene-detail { left: -18%; width: 50%; }
}
@media (max-width: 640px) {
  .hero--scene { --scene-fig: calc(var(--fs-display) * 1.4); padding-block: var(--sp-8) var(--sp-7); }
  .hero__scene-fig { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); margin-top: var(--sp-7); }
  .hero__scene-detail { border-width: 4px; border-radius: calc(var(--img-radius-sm) + 4px); }
}

/* ---- HE05 · statement, photograph at the fold ----
   <section class="hero hero--fold">
     <div class="wrap hero__fold">
       <div class="hero__fold-meta"><p class="eyebrow">…</p><p class="hero__fold-facts"><span>…</span> ×4</p></div>
       <h1 class="reveal" data-reveal="lines">…</h1>
       <div class="hero__fold-row"><div class="hero__acts">…</div><p class="lead">…</p></div>
     </div>
     <div class="photo photo--band parallax hero__fold-band">…eager</div>
   </section>
   The band sits outside .wrap: full bleed, square, and placed so its top
   third shows in the first screen — the photo is the scroll cue. */
.hero--fold { padding-block: var(--sp-9) 0; }
.hero__fold { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-5); }
.hero__fold-meta {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-5);
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--hairline);
}
.hero__fold-meta .eyebrow { margin: 0; }
.hero__fold-facts { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); max-width: none; font-size: var(--fs-small); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.hero--fold h1 { grid-column: 1 / span 10; margin: var(--sp-2) 0 0; text-wrap: balance; }
.hero__fold-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-5); align-items: end; }
.hero__fold-row .hero__acts { grid-column: 1 / span 5; }
.hero--fold .hero__fold-row .lead { grid-column: 7 / span 6; margin: 0; text-wrap: pretty; }
.hero__fold-band { margin-top: var(--sp-8); border: 0; border-radius: 0; max-height: 70vh; }
@media (max-width: 900px) {
  .hero--fold h1 { grid-column: 1 / -1; }
  .hero__fold-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .hero__fold-row .hero__acts, .hero--fold .hero__fold-row .lead { grid-column: 1; }
  .hero--fold .hero__fold-row .lead { order: -1; }
}
@media (max-width: 640px) {
  .hero--fold { padding-top: var(--sp-8); }
  .hero__fold { gap: var(--sp-5); }
  .hero__fold-facts > :first-child { display: none; }
  .hero__fold-band { margin-top: var(--sp-7); }
}

/* ---- HE06 · the system drum ----
   <section class="hero hero--drum">
     <div class="hero__drum-stage"><div class="wrap hero__drum">
       eyebrow · <h1 class="reveal" data-reveal="lines">Wir kennen … <span class="accent">Xentral.</span></h1>
       <div class="hero__drum-row">
         <div class="hero__drum-now"><p class="hero__drum-count"><b>01</b><span>/ 05</span></p><p class="hero__drum-note">…</p></div>
         <div class="hero__drum-go"><p>…</p><div class="hero__acts">…</div></div>
       </div>
     </div></div>
   </section>
   JS adds .is-pinned (the stage sticks for --drum-steps × --drum-step) and
   mounts drum faces into the accent phrase, which always takes its own line.
   Reduced motion: no pin, no faces; the note lists every name. */
.hero--drum { --drum-step: 45vh; position: relative; padding-block: 0; }
.hero--drum.is-pinned { height: calc(100vh + var(--drum-steps, 4) * var(--drum-step)); }
.hero__drum-stage { padding-block: var(--sp-9) var(--sp-8); }
.hero--drum.is-pinned .hero__drum-stage { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; padding-block: var(--sp-8); }
.hero__drum { width: 100%; }
.hero--drum h1 { max-width: 15em; margin: 0; text-wrap: balance; }
.hero--drum h1 .accent { display: block; }
.hero__drum-word { position: relative; height: 1.1em; perspective: 900px; }
.hero__drum-cyl {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: translateZ(calc(var(--drum-r, .75em) * -1)) rotateX(var(--drum-a, 0deg));
}
.hero__drum-cyl > span {
  position: absolute; left: 0; top: 0; height: 1.1em; line-height: 1.1; white-space: nowrap;
  backface-visibility: hidden; opacity: var(--o, 1);
  transform: rotateX(var(--face-a, 0deg)) translateZ(var(--drum-r, .75em));
}
.hero__drum-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8);
  margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--hairline);
}
.hero__drum-count { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-3); font-size: var(--fs-small); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.hero__drum-count b { font-family: var(--font-head); font-stretch: var(--head-stretch, normal); font-size: var(--fs-h3); font-weight: 600; color: var(--fg); }
.hero__drum-note { max-width: 36ch; min-height: 4.5em; font-size: var(--fs-lead); line-height: 1.5; color: var(--fg); text-wrap: pretty; }
.hero__drum-note b { display: block; margin-bottom: var(--sp-1); 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); }
.hero__drum-go p { margin-bottom: var(--sp-5); text-wrap: pretty; }
@media (max-width: 900px) {
  .hero__drum-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); margin-top: var(--sp-6); }
  .hero__drum-note { min-height: 0; }
}
@media (max-width: 640px) {
  .hero--drum { --drum-step: 32vh; }
  .hero__drum-go p { display: none; }
  .hero__drum-go .btn { width: 100%; }
}

/* ---- HE07 · the direct line ----
   <section class="hero hero--line"><div class="wrap">
     <div class="hero__line-copy"> eyebrow · h1 · .lead · .hero__acts </div>
     <div class="hero__desk" data-hours="1-5 09:00-17:00">
       <p class="hero__status" aria-live="polite">Mo–Fr 9:00–17:00</p>
       <a class="hero__phone" href="tel:…">+49 2171 7949089</a>
       <ol class="hero__week"><li data-day="1"><span class="hero__week-d">Mo</span>
         <span class="hero__week-bar"><i style="--from:.17;--to:.83"></i></span><span class="hero__week-h">9–17</span></li> ×7</ol>
       <div class="hero__who"><div class="photo photo--people hero__who-photo">…</div><p>…</p></div>
     </div>
   </div></section>
   JS marks today (data-today), the time (data-now + --now, 0–1 across
   7:00–19:00) and the status (data-open): a word and a mark, never colour alone. */
.hero--line {
  --line-open: #1f9d55;
  --line-num: calc(var(--fs-display) * .8);
  --line-track: color-mix(in srgb, var(--fg) 8%, transparent);
  --line-hours: color-mix(in srgb, var(--fg) 28%, transparent);
  padding-block: var(--sp-9) var(--sp-8);
}
.hero--line .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-9); align-items: center; }
.hero__line-copy h1 { margin-bottom: var(--sp-5); text-wrap: balance; }
.hero__line-copy .lead { margin-bottom: var(--block-gap); text-wrap: pretty; }
.hero__desk { padding-top: var(--sp-4); border-top: 1px solid var(--hairline); }
.hero__status { display: flex; align-items: center; gap: var(--sp-2); max-width: none; font-size: var(--fs-small); color: var(--fg-muted); }
.hero__desk[data-open] .hero__status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--fg-dim); }
.hero__desk[data-open="true"] .hero__status::before { background: var(--line-open); box-shadow: 0 0 0 4px color-mix(in srgb, var(--line-open) 20%, transparent); }
.hero__phone {
  display: inline-block; margin: var(--sp-2) 0 var(--sp-6);
  font-family: var(--font-head); font-weight: 600; font-stretch: var(--head-stretch, normal);
  font-size: var(--line-num); line-height: 1.1; letter-spacing: -.02em; white-space: nowrap;
  color: var(--fg); font-variant-numeric: tabular-nums;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em;
  text-decoration-color: color-mix(in srgb, var(--fg) 30%, transparent);
  transition: text-decoration-color .3s;
}
@media (hover: hover) { .hero__phone:hover { text-decoration-color: var(--brand); } }
.hero__week { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; max-width: 30rem; }
.hero__week li {
  display: grid; grid-template-columns: 2.25em minmax(0, 1fr) 6.5em; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-small); line-height: 1.5; color: var(--fg-dim); font-variant-numeric: tabular-nums;
}
.hero__week-h { text-align: right; }
.hero__week-bar { position: relative; height: 6px; border-radius: 3px; background: var(--line-track); }
.hero__week-bar i { position: absolute; top: 0; bottom: 0; left: calc(var(--from) * 100%); right: calc((1 - var(--to)) * 100%); border-radius: 3px; background: var(--line-hours); }
.hero__week li[data-today] { color: var(--fg); font-weight: 600; }
.hero__week li[data-today] .hero__week-bar i { background: var(--fg-muted); }
.hero__week li[data-now] .hero__week-bar::after {
  content: ""; position: absolute; top: -5px; bottom: -5px; left: calc(var(--now) * 100%);
  width: 2px; margin-left: -1px; border-radius: 1px; background: var(--fg);
}
.hero__who {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: var(--sp-4);
  max-width: 30rem; margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--hairline);
}
.hero__who-photo { border-radius: var(--img-radius-sm); }
.hero__who p { font-size: var(--fs-small); line-height: 1.5; color: var(--fg-muted); }
@media (max-width: 900px) {
  .hero--line .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
}
@media (max-width: 640px) {
  .hero--line { --line-num: calc(var(--fs-display) * .72); padding-block: var(--sp-8) var(--sp-7); }
  .hero--line .wrap { gap: var(--sp-7); }
  .hero__week li { grid-template-columns: 2em minmax(0, 1fr) 6.5em; gap: var(--sp-2); }
}
@media (prefers-reduced-motion: reduce) { .hero__phone { transition: none; } }

/* ---- HE08 · the dated invitation ----
   <section class="hero hero--date"><div class="wrap">
     <div class="hero__cal">
       <p class="hero__cal-day"><span class="hero__cal-num">22</span><span class="hero__cal-my">Oktober 2026<br>Donnerstag · 10–16 Uhr</span></p>
       <p class="hero__cal-left" data-date="2026-10-22">Leverkusen</p>
       <div class="photo hero__cal-photo">…</div></div>
     <div class="hero__date-copy"> eyebrow · h1 ·
       <ol class="hero__agenda"><li><time>10:00</time><span>…</span></li> ×3</ol>
       .hero__acts · .hero__small </div>
   </div></section>
   The date is the dominant figure; the evergreen claim steps down to the
   foot line. Swap back to the evergreen hero after the date. */
.hero--date { --date-num: calc(var(--fs-display) * 1.75); padding-block: var(--sp-9) var(--sp-8); }
.hero--date .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--sp-9); align-items: start; }
.hero__cal { padding-top: var(--sp-4); border-top: 1px solid var(--hairline); }
.hero__cal-day { display: flex; align-items: flex-end; gap: var(--sp-4); max-width: none; }
.hero__cal-num {
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--date-num); line-height: .78; letter-spacing: -.04em; color: var(--head-1, var(--fg)); font-variant-numeric: tabular-nums;
}
.hero__cal-my { padding-bottom: .15em; font-size: var(--fs-body); line-height: 1.45; color: var(--fg); }
.hero__cal-left { margin: var(--sp-4) 0 var(--sp-6); font-size: var(--fs-small); color: var(--fg-dim); }
.hero__date-copy h1 { margin-bottom: var(--sp-6); text-wrap: balance; }
.hero__agenda { list-style: none; max-width: 46rem; margin: 0 0 var(--sp-7); padding: 0; border-top: 1px solid var(--hairline); }
.hero__agenda li {
  display: grid; grid-template-columns: 4.5em minmax(0, 1fr); align-items: baseline; gap: var(--sp-4);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--hairline); color: var(--fg); text-wrap: pretty;
}
.hero__agenda time { font-size: var(--fs-small); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .hero--date .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .hero__cal-photo { max-width: 28rem; }
}
@media (max-width: 640px) {
  .hero--date { --date-num: calc(var(--fs-display) * 1.6); padding-block: var(--sp-8) var(--sp-7); }
  .hero__cal-left { margin-bottom: 0; }
  .hero__cal-photo { display: none; }
  .hero__date-copy .btn { width: 100%; }
}