/* =====================================================
   Foto-Film durch die Wohnung (ersetzt die Kamerafahrt)
   Gepinnte Bühne, acht Szenen. Jede Szene hat einen kurzen Clip,
   dessen Abspielposition am Scrollen hängt (assets/js/fotofilm.js).
   Ohne JS und bei reduzierter Bewegung stehen die Fotos untereinander.
   Klassen alle mit ff- Präfix, damit nichts anderes berührt wird.
   ===================================================== */
@font-face { font-family: 'Allura'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/allura-v23-latin-regular.woff2) format('woff2'); }

/* Volle Fensterbreite ausbrechen (Body: overflow-x:hidden fängt Überstand) */
.ff { --ff-pad: clamp(20px, 5vw, 80px); position: relative; width: 100vw; margin: 5rem 0 0 calc(50% - 50vw); }
/* Kopfzeile ruhig, solange die Strecke läuft (mit Tastatur sofort wieder da) */
.ed-header { transition: padding 0.4s ease, background 0.4s ease, opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.ed-header.ff-quiet { opacity: 0; pointer-events: none; }
.ed-header.ff-quiet:focus-within { opacity: 1; pointer-events: auto; }

    /* ============ Foto-Rundgang ============ */
    /* Grundzustand (ohne JS, bei reduzierter Bewegung): Fotos untereinander, nichts bewegt sich */
    .ff-stage { position: relative; }
    .ff-hud { display: none; }
    .ff-scene { position: relative; padding: 0 var(--ff-pad) clamp(56px, 9vw, 110px); }
    .ff-frame { position: relative; overflow: hidden; width: 100%; max-width: 1280px; margin: 0 auto; aspect-ratio: 3 / 2; background: #d9d3c6; }
    .ff-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); opacity: 0; transition: opacity .5s ease; pointer-events: none; }
    .ff-frame video.is-ready { opacity: 1; }
    .ff-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); transform-origin: var(--origin, 50% 50%); }
    .ff-cap { max-width: 1280px; margin: 1.1rem auto 0; display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; row-gap: .5rem; align-items: baseline; }
    .ff-cap__title { grid-column: 1 / -1; font-family: var(--ed-serif); font-style: italic; font-weight: 400; font-size: clamp(26px, 3vw, 44px); line-height: 1.1; }
    .ff-cta { grid-column: 1 / -1; justify-self: start; margin-top: .9rem; color: var(--ed-fg); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding-bottom: 5px; border-bottom: 1px solid currentColor; }
    .ff-cta:focus-visible { outline: 2px solid var(--ed-accent); outline-offset: 6px; }

    /* ---- Live: gepinnte Bühne, Szenen liegen übereinander ---- */
    .ff.is-live .ff-stage { height: 100vh; height: 100svh; overflow: hidden; background: var(--ed-bg); }
    .ff.is-live .ff-scene { position: absolute; inset: 0; padding: 0; background: var(--ed-bg); }
    .ff.is-live .ff-scene:not(:first-of-type) { z-index: 1; }
    .ff.is-live .ff-frame { position: absolute; max-width: none; margin: 0; aspect-ratio: auto; }
    .ff.is-live .ff-cap { display: contents; }
    .ff.is-live .ff-cap__title, .ff.is-live .ff-cap__text, .ff.is-live .ff-cta { position: absolute; z-index: 2; margin: 0; }
    .ff.is-live .ff-cap__title { max-width: none; white-space: nowrap; }
    .ff.is-live .ff-scene.is-working .ff-frame img { will-change: transform; }

    /* Überschrift wie bei der Referenz: Schreibschrift über Großbuchstaben, überlappt die Bildecke */
    .ff-cap__title { display: block; font-family: var(--ed-sans); font-style: normal; font-weight: 400; line-height: 1; }
    .ff-script { display: block; font-family: 'Allura', 'Cormorant Garamond', serif; font-size: clamp(54px, 8.2vw, 138px); line-height: .9; color: #8a8174; margin-bottom: -.12em; }
    .ff-caps { display: block; font-size: clamp(34px, 5.6vw, 94px); letter-spacing: .04em; text-transform: uppercase; color: #3a352f; padding-left: .55em; }
    .ff-cap__text { font-size: 13px; line-height: 1.55; color: var(--ed-muted); max-width: 22ch; }

    /* Vollbild: Schrift hell unten links */
    .ff.is-live .ff-scene--full .ff-frame { inset: 0; }
    .ff.is-live .ff-scene--full .ff-frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(5,4,11,.6), rgba(5,4,11,0) 50%); }
    .ff.is-live .ff-scene--full .ff-cap__title { left: var(--ff-pad); bottom: calc(clamp(30px, 7vh, 80px) + 3.2rem); }
    .ff.is-live .ff-scene--full .ff-cap__text { left: var(--ff-pad); bottom: clamp(30px, 7vh, 80px); }
    .ff-scene--full .ff-script, .ff-scene--full .ff-caps, .ff-scene--full .ff-cap__text { color: var(--ed-fg-light); }

    /* Zentriert, wächst beim Scrollen */
    .ff.is-live .ff-scene--center .ff-frame { inset: 0; }
    .ff.is-live .ff-scene--center .ff-cap__title { left: 50%; top: 3svh; transform: translateX(-50%); text-align: center; }
    .ff.is-live .ff-scene--center .ff-caps { padding-left: 0; }
    .ff.is-live .ff-scene--center .ff-cap__text { display: none; }

    /* Bild rechts der Mitte, Titel links über der Ecke, Text unten rechts */
    .ff.is-live .ff-scene--right .ff-frame { left: 24vw; width: 52vw; top: 15svh; height: 66svh; }
    .ff.is-live .ff-scene--right .ff-cap__title { left: 9vw; top: 22svh; }
    .ff.is-live .ff-scene--right .ff-cap__text { left: calc(76vw + 3vw); bottom: 19svh; }

    /* Gespiegelt: Bild links der Mitte, Titel rechts, Text unten links */
    .ff.is-live .ff-scene--left .ff-frame { left: 24vw; width: 52vw; top: 15svh; height: 66svh; }
    .ff.is-live .ff-scene--left .ff-cap__title { right: 9vw; top: 20svh; text-align: right; }
    .ff.is-live .ff-scene--left .ff-caps { padding-left: 0; padding-right: .3em; }
    .ff.is-live .ff-scene--left .ff-cap__text { left: 5vw; bottom: 19svh; }

    /* Schlussbild */
    .ff.is-live .ff-scene--center2 .ff-frame { top: 8svh; height: 58svh; left: 22vw; width: 56vw; }
    .ff.is-live .ff-scene--center2 .ff-cap__title { left: 13vw; top: 50svh; }
    .ff.is-live .ff-scene--center2 .ff-cap__text { left: 50%; transform: translateX(-50%); bottom: 14svh; text-align: center; max-width: 34ch; }
    .ff.is-live .ff-scene--center2 .ff-cta { left: 50%; transform: translateX(-50%); bottom: 7svh; white-space: nowrap; }

    /* Zähler: Differenz-Modus bleibt auf hellem und dunklem Foto lesbar */
    .ff.is-live .ff-hud {
      display: flex; position: absolute; z-index: 5; right: var(--ff-pad); bottom: clamp(30px, 7vh, 80px);
      align-items: center; gap: 1rem; color: #fff; mix-blend-mode: difference; font-size: 12px; letter-spacing: .22em; pointer-events: none;
    }
    .ff-hud__line { position: relative; width: clamp(70px, 9vw, 140px); height: 1px; background: rgba(255,255,255,.35); overflow: hidden; }
    .ff-hud__fill { position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }

    /* Handy und Tablet hochkant: eigene Bildbühnen, Motiv wird auf Hochformat geführt */
    @media (max-width: 899px) {
      .ff-frame img, .ff-frame video { object-position: var(--mfx, 50%) var(--fy, 50%); }
      .ff.is-live .ff-hud { top: 18px; bottom: auto; }
      .ff-script { font-size: clamp(48px, 15vw, 84px); }
      .ff-caps { font-size: clamp(28px, 8.4vw, 52px); }
      .ff.is-live .ff-scene--center .ff-cap__title { top: 4svh; }
      .ff.is-live .ff-scene--right .ff-frame, .ff.is-live .ff-scene--left .ff-frame, .ff.is-live .ff-scene--center2 .ff-frame { left: var(--ff-pad); right: var(--ff-pad); width: auto; top: 22svh; height: 52svh; }
      .ff.is-live .ff-scene--right .ff-cap__title, .ff.is-live .ff-scene--left .ff-cap__title, .ff.is-live .ff-scene--center2 .ff-cap__title { left: var(--ff-pad); right: auto; top: 9svh; text-align: left; }
      .ff.is-live .ff-scene--left .ff-caps { padding-right: 0; padding-left: .55em; }
      .ff.is-live .ff-scene--right .ff-cap__text, .ff.is-live .ff-scene--left .ff-cap__text { left: var(--ff-pad); right: var(--ff-pad); bottom: 7svh; max-width: none; }
      .ff.is-live .ff-scene--center2 .ff-cap__text { bottom: 14svh; }
      .ff.is-live .ff-scene--full .ff-cap__title { bottom: calc(clamp(30px, 7vh, 80px) + 2.6rem); }
    }