/* Projektseite (Vorlage für alle 8 Projekte) · loesung (Owner: wdf-section-builder, Auftrag B-projekt-vorlage).
   1:1 aus wdf/entwuerfe/projekt-vorlage/entwurf.css (r1), jede Regel im Abschnitt, in dessen Markup ihre Klassen vorkommen, Reihenfolge wie im Entwurf.
   Nur Tokens; freie Werte (Prozent-/svh-Maße der Bühne) wie im Entwurf. */

.pv-strecke { position: relative; margin-top: var(--space-48); }
.pv-stationen { display: grid; gap: var(--space-48); }
.pv-station { display: grid; gap: var(--space-20); scroll-margin-top: calc(var(--kopf-h) + var(--space-24)); }
.pv-station-bild {
  position: relative; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 4 / 5;
  background: var(--color-surface-2); box-shadow: var(--shadow-screen);
  border: var(--space-8) solid color-mix(in oklab, var(--pf) 82%, var(--color-bg)); }
.pv-station-bild .pv-auf { position: absolute; left: 0; top: 0; width: 100%; }
.pv-auf img { display: block; width: 100%; height: auto; }
.pv-auf-d { display: none; transform: translateY(calc(-1 * var(--d))); }
.pv-auf-m { transform: translateY(calc(-1 * var(--m))); }
.pv-station-text { display: grid; gap: var(--space-10); align-content: start; }
.pv-station-nr { color: var(--color-text-tertiary); }
.pv-station-nr b { color: var(--color-accent-soft); font-weight: inherit; }
.pv-station-h { font: var(--font-weight-display) var(--font-size-station) / var(--leading-station) var(--font-display); letter-spacing: var(--tracking-station); text-wrap: balance; }
.pv-station-text > p:not([class]) { color: var(--color-text-secondary); max-width: 46ch; text-wrap: pretty; }
.pv-wo { display: flex; gap: var(--space-8); align-items: flex-start; font-size: var(--font-size-small); line-height: var(--leading-compact); color: var(--color-text); max-width: 46ch; }
.pv-wo svg { flex: none; width: var(--size-icon-sm); height: var(--size-icon-sm); color: var(--color-accent); margin-top: var(--space-1); }
.pv-buehne { display: none; }
@media (min-width: 560px) {
  .pv-station-bild { aspect-ratio: 16 / 10; }
  .pv-auf-d { display: block; }
  .pv-auf-m { display: none; }
}
@media (min-width: 768px) {
  .pv-stationen { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-32); row-gap: var(--space-64); }
}
@media (min-width: 1024px) {
  :root.film .pv-strecke { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--space-48); }
  :root.film .pv-stationen { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  :root.film .pv-station { min-height: 62svh; align-content: center; padding: var(--space-32) 0; }
  :root.film .pv-station:first-child { min-height: 48svh; align-content: start; padding-top: var(--space-48); }
  :root.film .pv-station:last-child { min-height: 70svh; }
  :root.film .pv-station-bild { display: none; }
  :root.film .pv-station-text { transition: opacity var(--dur-fade) var(--ease-out); opacity: .38; }
  :root.film .pv-station.an .pv-station-text { opacity: 1; }
  :root.film .pv-buehne {
    display: block; position: sticky; top: calc(var(--kopf-h) + var(--space-24)); align-self: start;
    height: calc(100svh - var(--kopf-h) - 2 * var(--space-24)); }
  .pv-buehne-flaeche {
    height: 100%; margin: 0; border-radius: var(--radius-xl); box-shadow: var(--shadow-card-module);
    display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--space-24); padding: var(--space-24) var(--space-40) 0; }
  .pv-marke {
    position: relative; z-index: var(--z-label); justify-self: start; display: inline-flex; gap: var(--space-12); align-items: center;
    padding: var(--space-8) var(--space-14); border-radius: var(--radius-pill);
    background: rgba(var(--color-bg-rgb), .82); color: var(--color-text); box-shadow: var(--ring-hairline); }
  .pv-marke-nr { color: var(--color-accent-soft); }
  .pv-geraete { position: relative; min-height: 0; height: 100%; padding-right: 9%; margin-bottom: -1px; }
  .pv-browser { aspect-ratio: auto; height: 100%; border-radius: var(--radius-device) var(--radius-device) 0 0; }
  .pv-fahrt-d { position: absolute; left: 0; top: 0; width: 100%; will-change: transform; }
  .pv-browser .vp .pv-fahrt-d img { display: block; width: 100%; height: auto; object-fit: initial; }
  .pv-tel {
    position: absolute; right: 0; top: 10%; width: 25%; aspect-ratio: 420 / 909; overflow: hidden;
    border-radius: var(--radius-lg); background: var(--color-surface-2); box-shadow: var(--shadow-screen-phone); }
  .pv-tel img { position: absolute; left: 0; top: 0; width: 100%; height: auto; will-change: transform; }
}
@media (min-width: 1280px) {
  .pv-stationen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Lichtrahmen je Station: auf Kundenwunsch entfernt (2026-11-11, stört das Design). */
.pv-buehne .chrome .url { position: relative; }

/* ---------- Rest-Fix 2: Bühne klebt, bis der Text von Station 06 die Bildschirmmitte verlassen hat ----------
   Nachlauf unter der Stationsliste (nur Film ab 1024 px): Die Bühne endet unten bei 100svh − 24 px; ohne Nachlauf löste sie sich,
   solange 06 noch mittig stand (kritik-r1: Marke rutschte unter die Kopfzeile). */
@media (min-width: 1024px) {
  :root.film .pv-stationen { padding-bottom: 40svh; }
}

/* ---------- r1 Zoom-Variante für kurze Kunden-Sites (Kritik projektseiten P1) ----------
   .pv-strecke--zoom: Die Aufnahme ist breiter als das Fenster (--zoom, Standard 170 %), je Station zusätzlich --dx (waagrechte Lage in Prozent
   der Aufnahmebreite, höchstens 100 − 100/zoom ≈ 41 %). So zeigt jede Station einen eigenen Ausschnitt, auch wenn die Seite kurz ist.
   Statische Ausschnitte (ohne Film / unter 1024 px ab 560 px) und die Bühne (Film ab 1024 px, Lage per projekt.js) nutzen dieselben Werte.
   Seiten ohne den Modifier bleiben unverändert. */
.pv-strecke--zoom { --zoom: 170%; }
.pv-strecke--zoom .pv-auf-d { width: var(--zoom); transform: translate(calc(-1 * var(--dx, 0%)), calc(-1 * var(--d))); }
@media (min-width: 1024px) {
  :root.film .pv-strecke--zoom .pv-fahrt-d { width: var(--zoom); }
}