/* ablauf v6 — Buehnenform "Protokoll", HOCHMODERN: kompakte Ordinale an
   einer statischen Goldspur, Step-Fotos als gerahmte Kacheln, helle
   Entscheidungs-Zaesur. Keine Monumental-Ziffern, keine Scroll-Scrubs. */
@layer page, pageresponsive;

@layer page {
  .ab-hero { padding-top: clamp(40px, 5vw, 80px); overflow-x: clip; }
  .ab-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
  /* v10: rechte Hero-Spalte traegt Index-Spur UND Foto-Karte */
  .ab-hero__side { display: grid; gap: clamp(18px, 2.4vw, 32px); justify-items: end; min-width: 0; }
  .ab-hero__fig { width: min(100%, 460px); }
  .ab-hero__fig .passe__pic { aspect-ratio: 16 / 9; }
  .ab-hero__fig .passe__pic img { height: 100%; object-fit: cover; }
  .ab-hero__inner { max-width: 920px; min-width: 0; }
  .ab-hero__title { margin-top: var(--sp-4); font-size: var(--fs-cinem); }
  .ab-hero__lead { margin-top: var(--sp-4); }
  .ab-hero__cta { margin-top: var(--sp-5); }
  /* Schritt-Titel-Index an der Ordinal-Spur (v8 Konsens P5): Ziffer +
     Titel je Zeile, sauber im Satzspiegel - KEIN Glyph-Clipping mehr */
  .ab-hero__spur { display: grid; justify-self: end; width: max-content; max-width: 100%; gap: 0; border-left: 1px solid var(--line-gold); padding-left: clamp(16px, 2vw, 32px); }
  .ab-hero__spur-row { display: flex; align-items: baseline; gap: 14px; padding-block: 9px; border-bottom: 1px solid var(--line); min-width: 0; }
  .ab-hero__spur-row:last-child { border-bottom: 0; }
  .ab-hero__spur-n { font-family: var(--ff-display); font-weight: var(--wght-numeral); font-variant-numeric: tabular-nums; font-size: clamp(22px, 2vw, 30px); line-height: 1; color: var(--gold-deep); flex: none; }
  .ab-hero__spur-t { font-size: var(--fs-cap); font-weight: 650; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-3); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

  /* Protokoll-Leiste: Ordinal-Spalte und Goldspur teilen EINE Variable */
  .ab-rail { --ab-col: clamp(72px, 8vw, 110px); padding-top: clamp(24px, 3vw, 56px); padding-bottom: var(--section-y-tight); overflow-x: clip; }
  .ab-railwrap { position: relative; }
  /* Statische Goldspur entlang der Ordinal-Kante */
  .ab-spur { position: absolute; top: 0; bottom: 0; left: calc(var(--gutter) + var(--ab-col)); width: 2px; background: var(--line-gold); }
  .ab-steps { border-top: 1px solid var(--line-strong); }
  .ab-step { display: grid; grid-template-columns: var(--ab-col) minmax(0, 1fr) auto; gap: clamp(20px, 3.5vw, 56px); padding-block: clamp(28px, 4vw, 56px); border-bottom: 1px solid var(--line); position: relative; }
  .ab-step__n { grid-column: 1; grid-row: 1; font-family: var(--ff-display); font-weight: var(--wght-numeral); font-variant-numeric: tabular-nums; font-size: clamp(28px, 2.8vw, 40px); line-height: 1; color: var(--gold-deep); padding-right: clamp(16px, 2.5vw, 36px); text-align: right; }
  /* Marginalie als kleiner Kicker in der rechten Bahn */
  .ab-step__marg { grid-column: 3; grid-row: 1; align-self: start; margin-top: 8px; font-size: var(--fs-cap); font-weight: 650; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-3); text-align: right; white-space: nowrap; border-top: 1px solid var(--line-gold); padding-top: 10px; }
  .ab-step__body { grid-column: 2; grid-row: 1; min-width: 0; padding-top: 2px; }
  .ab-step__title { font-size: var(--fs-h2); }
  .ab-step__text { margin-top: var(--sp-3); color: var(--ink-2); max-width: 64ch; }

  /* Schritt 01: dieselbe Passepartout-Karte wie die Stills (EIN Rezept,
     v7 P8), als Karte bis zur ECHTEN Viewport-Kante durchgezogen -
     rechte Rundung und rechter Rand laufen aus dem Bild (ab-rail clippt) */
  .ab-step__stage { grid-column: 2 / -1; grid-row: 2; margin-top: var(--sp-3); margin-right: calc(-1 * var(--gutter) - max(0px, (100vw - var(--maxw)) / 2)); min-width: 0; }
  .ab-step__stage .passe__frame { border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: 0; }
  .ab-step__stage .passe__pic { border-top-right-radius: 0; border-bottom-right-radius: 0; aspect-ratio: 21 / 9; }
  /* v12: Das Band laeuft rechts aus dem Viewport - bei 50% schnitt es
     mitten durch das Wort HAIGER. 34% legt den Schnitt hinter das Wort. */
  .ab-step__stage .passe__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 34% 52%; }
  .ab-step__stage-cap { margin-right: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); }

  /* Step-Fotos 02/03: kompakte Kacheln brechen die Textspur (O3) */
  .ab-step__photo { margin-top: var(--sp-5); max-width: 520px; }
  .ab-step__photo .passe__pic { aspect-ratio: 4 / 3; }
  .ab-step__photo .passe__pic img { width: 100%; height: 100%; object-fit: cover; }

  .ab-pledge { padding-block: clamp(36px, 4.5vw, 72px); }
  .ab-pledge__lead { font-weight: var(--wght-head); font-size: var(--fs-h3); letter-spacing: var(--ls-head); margin-bottom: var(--sp-4); }

  /* Champagne-Zaesur: reine Typografie, Hinweis als Hairline */
  .ab-decide__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 96px); align-items: end; }
  .ab-decide__h { font-size: var(--fs-h2); }
  .ab-decide__hl { color: var(--gold-ink); }
  .ab-decide .lead { margin-top: var(--sp-4); }
  .ab-decide__fine { font-size: var(--fs-sm); color: var(--ink-2); border-top: 1px solid var(--line-gold); padding-top: var(--sp-3); }
  .ab-decide__cta { margin-top: var(--sp-4); }
}

@layer pageresponsive {
  @media (max-width: 1100px) {
    /* Zwischenbreite: die Titel wuerden knapp - der Index faellt auf die
       reine Ordinal-Spur zurueck, nichts wird angeschnitten */
    .ab-hero__spur-t { display: none; }
  }
  @media (max-width: 900px) {
    .ab-decide__grid { grid-template-columns: 1fr; align-items: start; }
    .ab-hero__grid { grid-template-columns: 1fr; }
    /* Mobil ist der Hero einspaltig - der Titel-Index waere eine Dublette
       der direkt folgenden Schritt-Liste und faellt */
    .ab-hero__spur { display: none; }
    .ab-hero__side { justify-items: stretch; margin-top: var(--sp-5); }
    .ab-hero__fig { width: 100%; }
    .ab-step { grid-template-columns: var(--ab-col) minmax(0, 1fr); }
    .ab-step__marg { display: none; }
  }
  @media (max-width: 640px) {
    .ab-spur { left: var(--gutter); width: 2px; }
    .ab-step { grid-template-columns: 1fr; gap: var(--sp-3); border-left: 1px solid var(--line-gold); padding-left: var(--sp-3); }
    .ab-step__n { grid-column: auto; grid-row: auto; text-align: left; padding: 0; font-size: clamp(28px, 8vw, 36px); }
    .ab-step__body { grid-column: auto; grid-row: auto; }
    .ab-step__stage { grid-column: auto; grid-row: auto; margin-top: var(--sp-4); margin-right: calc(-1 * var(--gutter)); }
    .ab-step__stage .passe__pic { aspect-ratio: 4 / 3; }
    .ab-step__stage-cap { margin-right: var(--gutter); }
  }
  @media (max-width: 480px) {
    .ab-hero__title { text-wrap: balance; }
    .ab-hero__title .nbr { white-space: nowrap; }
  }
}