/* Startseite · referenzen-buehne (Owner: wdf-section-builder, Auftrag P7-home-30) — 1:1 aus wdf/directions/B/hero.html (Stand P4-B15), nur Tokens.
   Aus base.css kommen: .kapitel-kopf, .eyebrow, .lead, .zaehler, .blaettern/.btn--icon, .werkstueck(-screens/-text/-nr/-nutzen/-links),
   .tags, .link-projekt, .link-mono, .link-mehr, .stimme, .inhaber, .por, details.voll. Hier nur Raster der Bühne und das Pin-Layout.
   Statische Fassung (ohne .film, Reduced Motion, ohne JS) = Wischreihe mit Einrasten; alle Lichtkanten an.
   Zwei Breiten stehen als Token-Verweis mit Prototyp-Wert als Rückfall, bis tokens.css sie führt (Anfrage P7-home-30):
   --size-plate (560px, Werkstück mobil/Tablet), --size-plate-lg (1180px, Werkstück ab 1024 px). */

/* ---------- Abschnitt + Kopf (Kapitelkopf links, Zähler mit Blätter-Buttons) ---------- */
.ref { position: relative; padding: var(--space-section) 0; }
.ref-kopf { display: grid; gap: var(--space-24); margin-bottom: var(--space-48); }
/* Blätter-Buttons brauchen JS (js/sections/030-referenzen-buehne.js); ohne JS bleibt die Wischreihe */
:root:not(.js) .ref .blaettern { display: none; }

/* ---------- Spur: Wischreihe mit Einrasten, beginnt an der Inhaltskante und läuft rechts aus dem Bild ---------- */
.spur-rahmen {
  margin-left: var(--rand); padding-bottom: var(--space-12);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.spur-rahmen::-webkit-scrollbar { display: none; }
.spur { display: flex; align-items: flex-start; gap: var(--space-24); width: max-content; padding-right: var(--rand); }
.platte { flex: none; width: min(84vw, var(--size-plate, 560px)); scroll-snap-align: start; }

/* ---------- Fuß: „Alle Projekte ansehen“ ---------- */
.ref-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-24); margin-top: var(--space-32); }

/* ---------- Fortschritt unter der Spur (Punkte + Wisch-Hinweis); ab 1024 px aus (dort Pin bzw. Zähler oben) ---------- */
.ref-fortschritt { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); margin-top: var(--space-16); }
.ref-punkte { display: flex; gap: var(--space-8); }
.ref-punkte i { position: relative; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-round); background: var(--color-line-strong); }
.ref-punkte i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--color-accent); box-shadow: var(--glow-target); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.ref-punkte i.an::after { opacity: 1; }
:root:not(.js) .ref-punkte { display: none; }
.ref-wischen { font-size: var(--font-size-mono-sm); letter-spacing: var(--tracking-mono-ui); text-transform: uppercase; color: var(--color-text-tertiary); }

/* ---------- unter 1024 px (Hauptgerät 390): Werkstück als Karte, Projekt wird zum Bild (P9, K-PRJ-06 / K-VIS-04 / K-PRJ-04) ----------
   Karte fast bildschirmbreit, Screens auf der Projektfarbe (--pf, wie Referenzen-Seite), Browser steigt aus der Unterkante,
   Telefon 32 % überlappend, Porträt bei Projekten mit Inhaber oben rechts auf der Platte. Alle Karten gleich hoch, Links unten. */
@media (max-width: 1023.98px) {
  .spur { align-items: flex-start; gap: var(--space-16); }   /* Lauf 5 (K-PRJ-06): Karten nicht mehr auf die längste gestreckt, keine leeren Kartenflächen */
  .platte { display: flex; width: min(calc(100vw - 2 * var(--rand) - var(--space-16)), var(--size-plate, 560px)); }
  .platte .werkstueck {
    display: flex; flex-direction: column; gap: 0; width: 100%; overflow: hidden;
    border-radius: var(--radius-xl); background: var(--gradient-card-module); box-shadow: var(--shadow-card-module);
  }
  .platte .werkstueck-screens {
    container-type: inline-size; aspect-ratio: 10 / 7; padding: 0; overflow: hidden; isolation: isolate;
    background:
      radial-gradient(80% 70% at 16% 0%, color-mix(in srgb, var(--color-white) 20%, transparent), transparent 70%),
      linear-gradient(180deg, color-mix(in oklab, var(--pf) 94%, var(--color-white)) 0%, var(--pf) 45%, color-mix(in oklab, var(--pf) 74%, var(--color-bg)) 100%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-white) 38%, transparent);
  }
  .platte .werkstueck-screens::after { display: none; }
  .platte .werkstueck-screens .sc-d { position: absolute; left: 7cqi; top: 9cqi; width: 100cqi; border-radius: var(--radius-md) 0 0 0; }
  .platte .werkstueck-screens .sc-m { right: 6cqi; top: 24cqi; bottom: auto; width: 32cqi; border-radius: var(--radius-lg); }
  .platte .sc-por {
    position: absolute; z-index: var(--z-raised); left: 4cqi; bottom: 4cqi; width: var(--size-avatar-lg); height: var(--size-avatar-lg);
    border-radius: var(--radius-round); object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(.96); box-shadow: var(--ring-portrait);
  }
  /* Porträt steht auf der Platte; im Etikett bleibt der Name */
  .platte .werkstueck-text .por { display: none; }
  .platte .werkstueck-text { display: flex; flex-direction: column; flex: 1; gap: var(--space-12); padding: var(--space-20) var(--space-20) var(--space-12); }
  .platte .werkstueck-nr { right: var(--space-16); top: var(--space-8); }
  .platte .werkstueck-links { order: 1; margin-top: auto; padding-top: var(--space-4); }
  .platte .stimme blockquote p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .platte .stimme:has(details[open]) blockquote { display: none; }
  .ref-fuss { margin-top: var(--space-24); }
}

/* ---------- ab 1024 px: Zähler rechts neben dem Kopf, Werkstück mit Textspalte (Raster in base.css) ---------- */
@media (min-width: 1024px) {
  .ref-kopf { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .platte { width: min(var(--size-plate-lg, 1180px), 80vw); }
  .ref-fortschritt { display: none; }
  .sc-por { display: none; }
}
/* Inhaltsbreite erreicht: Spur startet an der Kante des .wrap */
@media (min-width: 1600px) {
  .spur-rahmen { margin-left: calc((100vw - var(--container-max)) / 2 + var(--rand)); }
}

/* ---------- Pin (P8): motion.js setzt html.pin-an, solange die Bühne gepinnt fährt (nur ab 1024 × 640 px, nie bei Reduced Motion).
   Abschnitt = Bildschirmhöhe, Spur fährt per transform waagrecht, Screen-Breite aus der freien Höhe (16 : 10 + Telefon-Überstand ≈ 1,674),
   aktives Werkstück im Licht, die anderen mit .werkstueck--inaktiv gedimmt. ---------- */
@media (min-width: 1024px) and (min-height: 640px) {
  .pin-an .ref { display: flex; flex-direction: column; height: 100svh; padding: calc(var(--kopf-h) + var(--space-32)) 0 var(--space-48); }
  .pin-an .ref-kopf { width: 100%; margin-bottom: var(--space-24); }
  .pin-an .ref-kopf .lead, .pin-an .ref .blaettern, .pin-an .ref-fuss { display: none; }
  .pin-an .spur-rahmen { flex: 1; min-height: 0; padding: 0; overflow: hidden; scroll-snap-type: none; container-type: size; }
  .pin-an .spur { height: 100%; align-items: stretch; gap: var(--space-64); }
  .pin-an .platte { width: auto; height: 100%; }
  .pin-an .platte .werkstueck { height: 100%; grid-template-columns: auto var(--size-side-label); align-items: center; }
  .pin-an .platte .werkstueck-screens { width: min(56vw, calc(100cqh * 1.674)); align-self: center; }
  .pin-an .platte .werkstueck-screens, .pin-an .platte .werkstueck-text { transition: opacity var(--dur-fade) var(--ease-out); }
  .pin-an .werkstueck--inaktiv .werkstueck-screens { opacity: .32; }
  .pin-an .werkstueck--inaktiv .werkstueck-text { opacity: .22; }
}