/* Projektseite unter /film/… – nutzt die Tokens aus portfolio.css. */
.ffp-single{--ffp-single-max:1120px;padding:clamp(28px,5vw,64px) 0}
.ffp-single-inner{box-sizing:border-box;width:100%;max-width:var(--ffp-single-max);margin:0 auto;padding:0 clamp(16px,4vw,32px)}
.ffp-single-head{display:grid;gap:10px;margin:0 0 clamp(22px,3vw,34px)}
.ffp-single-head small{color:var(--ffp-accent-2,#57d4ef);font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.ffp-single-head h2{margin:0;font-family:var(--ffp-font-heading,inherit);font-size:clamp(26px,4vw,46px);font-weight:650;line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
.ffp-single-facts{display:flex;flex-wrap:wrap;gap:7px 10px;margin:4px 0 0;padding:0;list-style:none}
.ffp-single-facts li{padding:4px 10px;border:1px solid rgba(255,255,255,.16);border-radius:999px;color:#b9c3d1;font-size:11px;line-height:1.4}
.ffp-single-stage{position:relative;overflow:hidden;border-radius:clamp(10px,1.4vw,16px);background:#0a1120}
.ffp-single-stage.ffp-ratio-16x9{aspect-ratio:16/9}
.ffp-single-stage.ffp-ratio-9x16{aspect-ratio:9/16;max-width:420px;margin-inline:auto}
.ffp-single-stage.ffp-ratio-1x1{aspect-ratio:1/1;max-width:640px;margin-inline:auto}
.ffp-single-stage.ffp-ratio-4x5{aspect-ratio:4/5;max-width:520px;margin-inline:auto}
.ffp-single-stage.ffp-ratio-21x9{aspect-ratio:21/9}
.ffp-single-stage>iframe,.ffp-single-stage>video{display:block;width:100%;height:100%;border:0;object-fit:contain}
.ffp-single-stage>[data-ffp-main-native],.ffp-single-stage[data-ffp-main-stage]>iframe,.ffp-single-stage[data-ffp-main-stage]>.ffp-consent-gate{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box}
.ffp-single-stage[data-ffp-main-stage]>.ffp-consent-gate{overflow:auto;gap:8px}
@media(max-width:600px){.ffp-single-stage[data-ffp-main-stage]>.ffp-consent-gate{padding:12px}.ffp-single-stage[data-ffp-main-stage]>.ffp-consent-gate>span,.ffp-single-stage[data-ffp-main-stage]>.ffp-consent-gate>small{display:none}.ffp-single-stage[data-ffp-main-stage]>.ffp-consent-gate strong{font-size:16px}.ffp-single-stage[data-ffp-main-stage]>.ffp-consent-gate p{font-size:13px;margin:0}.ffp-single-stage[data-ffp-main-stage]>.ffp-consent-gate button{min-height:44px;padding:8px 12px;font-size:13px}}
.ffp-lite-play{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:#0a1120;cursor:pointer}
.ffp-lite-play img{display:block;width:100%;height:100%;object-fit:cover}
.ffp-lite-play-icon{position:absolute;top:50%;left:50%;display:grid;width:clamp(54px,7vw,74px);height:clamp(54px,7vw,74px);border:1px solid rgba(255,255,255,.34);border-radius:50%;background:rgba(8,15,27,.62);backdrop-filter:blur(9px);place-items:center;transform:translate(-50%,-50%);transition:transform .22s,background .22s}
.ffp-lite-play:hover .ffp-lite-play-icon,.ffp-lite-play:focus-visible .ffp-lite-play-icon{background:rgba(8,15,27,.86);transform:translate(-50%,-50%) scale(1.07)}
.ffp-lite-play-icon i{display:block;width:0;height:0;margin-left:4px;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:15px solid #fff}
.ffp-single .ffp-project-detail{margin-top:clamp(28px,4vw,48px)}
.ffp-single-cta{margin:clamp(34px,5vw,56px) 0 0;text-align:center}
.ffp-gallery .ffp-single-cta-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:fit-content;max-width:100%;box-sizing:border-box;min-height:44px;padding:14px 20px;border:0;border-radius:10px;background:var(--ffp-cta,#d7195f)!important;color:#fff!important;font-size:16px;font-weight:600;line-height:1.2;text-transform:none;letter-spacing:normal;text-decoration:none;overflow-wrap:anywhere;box-shadow:none}
.ffp-gallery .ffp-single-cta-button:hover{background:color-mix(in srgb,var(--ffp-cta,#d7195f) 84%,#000)!important}
.ffp-gallery .ffp-single-cta-button:focus-visible{outline:2px solid #fff;outline-offset:4px}
.ffp-single-back{margin:clamp(30px,4vw,52px) 0 0}
.ffp-single-back a{color:var(--ffp-accent-2,#57d4ef);font-size:12px;font-weight:600;text-decoration:none}
.ffp-single-back a:hover{text-decoration:underline}

/* Video-Kundenstimme – steht zusaetzlich zum Zitat, nicht an dessen Stelle. */
.ffp-testimonial-video{margin:14px 0 0;overflow:hidden;border-radius:12px;background:#0a1120}
.ffp-testimonial-video.ffp-ratio-16x9{aspect-ratio:16/9}
.ffp-testimonial-video.ffp-ratio-9x16{aspect-ratio:9/16;max-width:300px}
.ffp-testimonial-video.ffp-ratio-1x1{aspect-ratio:1/1;max-width:420px}
.ffp-testimonial-video>iframe,.ffp-testimonial-video>video{display:block;width:100%;height:100%;border:0}
.ffp-testimonial-video-note{margin:7px 0 0;color:#8494aa;font-size:10px;line-height:1.45}
.ffp-testimonial-video-note a{color:inherit}
@media (max-width:720px){
  .ffp-single{padding:20px 0 34px}
  .ffp-single-head h2{font-size:26px}
}

/* Die Projektseite ist eine Seite, kein schwebendes Kärtchen: Der Galerie-Rahmen
   (Rundung und seitliche Polsterung) gilt nur für das Raster-Widget, nicht hier.
   Den seitlichen Abstand setzt .ffp-single-inner selbst. */
.ffp-gallery.ffp-single{
  border-radius:0!important;
  padding-left:0!important;
  padding-right:0!important;
  border-left:0!important;
  border-right:0!important;
}

/* Die Seite selbst hat einen weißen Hintergrund; sichtbar wird das überall dort,
   wo die dunkle Fläche der Projektseite nicht hinreicht. Deshalb zieht sie ihre
   Farbe über die volle Breite, ohne den Seitenrahmen anzufassen. */
.ffp-gallery.ffp-single{
  box-shadow:0 0 0 100vmax var(--ffp-bg,#050a13);
  clip-path:inset(0 -100vmax);
}

/* Der Seitenhintergrund ist weiß und der Seitentitel des Themes steht in Weiß
   darauf – beides zusammen ergab die weiße Fläche über dem Film. */
body.ffp-single-project{background:#050a13}
body.ffp-single-project .page-header{padding:clamp(18px,4vw,34px) clamp(16px,4vw,32px) 0}
body.ffp-single-project .page-header .entry-title,
body.ffp-single-project .page-header h1{
  max-width:1120px;margin-inline:auto;color:#fff;
  font-size:clamp(22px,3.2vw,34px);line-height:1.12;
  hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere;
}

/* Sperrtafel des Einwilligungswerkzeugs: dunkel statt weiß, und der Rahmen
   des Werkzeugs bekommt zumindest einen ruhigen Untergrund. */
.ffp-single-stage.is-consent-required{background:#050a13}
.ffp-single-stage .ffp-consent-gate,
.ffp-testimonial-video .ffp-consent-gate{min-height:0;height:100%;padding:clamp(18px,4vw,38px)}
.ffp-single-stage>iframe[src*="content-blocked"],
.ffp-testimonial-video>iframe[src*="content-blocked"]{background:#050a13}
