/* Unterseite Filmproduktion (Mockup-Umsetzung). Farben aus dem Mockup */
:root{--fp-rot:#d82625;--fp-rot-text:#ff5a56;--fp-rot-hell:#b3151a;--fp-beige:#f2f0ea;--fp-schwarz:#0c0c0c;--fp-w:1240px}
body{background:var(--fp-schwarz)}
.fp-kicker{font-size:.9rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fp-rot-text);margin:0 0 1rem}
.fp-kicker--dunkel{color:var(--fp-rot-hell)}
main .wrap{width:min(100% - 2.5rem,var(--fp-w))}
.fp-film h2,.fp-projekte h2,.fp-ablauf h2,.fp-einsatz h2,.fp-faq h2,.fp-schluss h2{font-size:clamp(2.3rem,5.6vw,4.4rem);font-weight:700;line-height:1;letter-spacing:-.03em;margin:0 0 clamp(1.8rem,4vw,3rem)}
/* Hero */
.fp-hero{position:relative;display:grid;align-content:start;min-height:clamp(560px,50vw,720px);padding:calc(var(--kopf) + 1.5rem) 0 0;background:#000;overflow:hidden}
.fp-hero__bild{position:absolute;inset:var(--kopf) 0 0 0}
.fp-hero__bild img{width:100%;height:100%;object-fit:cover;object-position:right top}
.fp-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000 0,rgba(0,0,0,.88) 24%,rgba(0,0,0,.4) 42%,rgba(0,0,0,0) 55%);pointer-events:none}
.fp-hero>*:not(.fp-hero__bild){position:relative;z-index:1}
.fp-hero__text{padding-bottom:2.5rem}
.fp-hero__text>*{max-width:34rem}
.fp-hero .fp-kicker{color:#fff;font-weight:600;margin-bottom:1.4rem}
.fp-hero .fp-kicker span{color:var(--fp-rot-text)}
.fp-hero h1{font-size:clamp(2.5rem,5.2vw,4.6rem);font-weight:700;line-height:1.02;letter-spacing:-.03em;margin:0 0 1.6rem;max-width:11ch}
.fp-hero__lead{font-size:clamp(1rem,1.3vw,1.15rem);font-weight:400;max-width:28rem;margin:0 0 1.8rem}
.fp-hero__links{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;margin:0 0 1.8rem}
.fp-knopf-rot,.fp-knopf-rand{display:inline-flex;align-items:center;gap:.9rem;min-height:52px;padding:.9rem 1.6rem;font-weight:600;font-size:1rem;text-decoration:none;transition:background .25s,color .25s}
.fp-knopf-rot{background:var(--fp-rot);color:#fff}
.fp-knopf-rot:hover,.fp-knopf-rot:focus-visible{background:#fff;color:var(--fp-schwarz)}
.fp-knopf-rand{border:2px solid var(--fp-rot-text);color:var(--fp-rot-text);font-weight:700}
.fp-knopf-rand:hover,.fp-knopf-rand:focus-visible{background:var(--fp-rot);border-color:var(--fp-rot);color:#fff}
.fp-knopf-rot svg,.fp-knopf-rand svg,.fp-cta svg{width:.95em;height:.95em;fill:currentColor;transition:transform .3s}
.fp-knopf-rot:hover svg,.fp-knopf-rand:hover svg,.fp-cta:hover svg{transform:translateX(4px)}
.fp-runter{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;text-decoration:none;min-height:44px}
.fp-runter svg{width:1em;height:1em;fill:currentColor}
.fp-runter:hover{text-decoration:underline}
.fp-hero__zeile{font-size:.85rem;font-weight:500;margin:0}
.fp-hero__formate{list-style:none;margin:0 auto;padding:1rem 0 1.1rem;border-top:1px solid rgba(255,255,255,.7);display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.6rem;text-transform:uppercase;letter-spacing:.25em;font-size:.82rem;font-weight:600;background:#000}
.fp-hero__formate li+li::before{content:"/";color:var(--fp-rot-text);margin-right:1rem;letter-spacing:0}
.fp-hero__formate{position:relative;z-index:2}
@media (max-width:859px){
  .fp-hero{min-height:0;padding-top:calc(var(--kopf) + 62vw)}
  .fp-hero__bild{inset:var(--kopf) 0 auto 0;height:62vw}
  .fp-hero__bild img{object-position:72% top}
  .fp-hero::after{background:linear-gradient(180deg,rgba(0,0,0,0) calc(var(--kopf) + 38vw),#000 calc(var(--kopf) + 62vw))}
  .fp-hero__text{margin-top:-9vw}
  .fp-hero__formate{justify-content:flex-start;letter-spacing:.14em;font-size:.72rem;gap:.3rem .6rem}
  .fp-hero__formate li+li::before{margin-right:.6rem}
}
/* 01 Der passende Film */
.fp-film{background:var(--fp-beige);color:#0c0c0c;padding:clamp(2.5rem,6vw,5rem) 0}
.fp-film h2{max-width:14ch}
.fp-formate{list-style:none;margin:0;padding:0;display:grid;gap:0}
.fp-formate li{padding:1.5rem 0 1.6rem;border-top:1px solid #0c0c0c}
.fp-formate h3,.fp-einsatz h3{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:700;letter-spacing:-.02em;margin:0 0 .5rem}
.fp-formate p{margin:0;font-size:1.1rem;font-weight:400;max-width:26ch}
@media (min-width:700px){
  .fp-formate{grid-template-columns:1fr 1fr}
  .fp-formate li{padding:2rem 2rem 2.2rem 0}
  .fp-formate li:nth-child(even){padding-left:2rem;padding-right:0;border-left:1px solid #0c0c0c}
}
/* 02 Projekte */
.fp-projekte{background:var(--fp-schwarz);padding:clamp(2.5rem,6vw,5rem) 0 clamp(2rem,4vw,3rem)}
.fp-projekte h2{max-width:14ch}
.fp-kacheln{display:grid;gap:1rem}
.fp-kachel{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;color:#fff;text-decoration:none;background:#000}
.fp-kachel picture,.fp-kachel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fp-kachel img{transition:transform .6s}
.fp-kachel:hover img{transform:scale(1.04)}
.fp-kachel::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.7));pointer-events:none}
.fp-knopf{position:absolute;z-index:2;left:50%;top:50%;width:clamp(52px,6vw,66px);aspect-ratio:1;margin:calc(clamp(52px,6vw,66px)/-2) 0 0 calc(clamp(52px,6vw,66px)/-2);border:2px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .25s,border-color .25s}
.fp-knopf svg{width:44%;height:44%;fill:#fff;margin-left:8%}
.fp-kachel:hover .fp-knopf,.fp-kachel:focus-visible .fp-knopf{background:var(--fp-rot);border-color:var(--fp-rot)}
.fp-kachel__name{position:absolute;z-index:2;left:1.4rem;bottom:1.2rem;font-size:1.05rem;font-weight:500}
.fp-kachel__name b{font-weight:700}
.fp-kachel__name b::after{content:" /";color:var(--fp-rot-text)}
.fp-alle{margin:1.6rem 0 0;display:flex;justify-content:flex-end}
@media (min-width:700px){
  .fp-kacheln{grid-template-columns:1fr 1fr;gap:1rem}
  .fp-kachel{aspect-ratio:4/3}
  .fp-kachel--links{clip-path:polygon(0 0,100% 0,97% 100%,0 100%)}
  .fp-kachel--rechts{clip-path:polygon(3% 0,100% 0,100% 100%,0 100%)}
}
/* 03 Ablauf */
.fp-ablauf{background:var(--fp-beige);color:#0c0c0c;padding:clamp(2.5rem,6vw,5rem) 0}
.fp-ablauf h2{max-width:20ch}
.fp-schritte{list-style:none;margin:0;padding:0;display:grid;gap:0}
.fp-schritte li{padding:1.4rem 0;border-top:1px solid #0c0c0c}
.fp-nr{display:block;font-size:clamp(1.5rem,2.4vw,2rem);font-weight:700;line-height:1;color:var(--fp-rot-hell);margin-bottom:.5rem}
.fp-schritte h3{font-size:clamp(1.4rem,2.2vw,1.8rem);font-weight:700;letter-spacing:-.02em;margin:0 0 .6rem}
.fp-schritte p{margin:0;font-size:1.05rem;font-weight:400;max-width:20ch}
@media (min-width:860px){
  .fp-schritte{grid-template-columns:repeat(4,1fr)}
  .fp-schritte li{border-top:0;border-left:1px solid #0c0c0c;padding:.2rem 1.6rem .4rem}
  .fp-schritte li:first-child{border-left:0;padding-left:0}
}
/* Einsatz */
.fp-einsatz{background:#131311;padding:clamp(2.5rem,6vw,5rem) 0}
.fp-einsatz__raster{display:grid;gap:2rem}
.fp-einsatz h2{max-width:9ch;margin-bottom:0}
.fp-einsatz ul{list-style:none;margin:0;padding:0}
.fp-einsatz li{padding:1.2rem 0;border-bottom:1px solid #666}
.fp-einsatz li:first-child{border-top:1px solid #666}
.fp-einsatz h3{font-size:1.25rem;margin-bottom:.3rem}
.fp-einsatz p{margin:0;font-size:1rem;font-weight:300;max-width:36ch}
@media (min-width:860px){.fp-einsatz__raster{grid-template-columns:1fr 1fr;gap:4rem;align-items:center}.fp-einsatz__raster>div{border-right:1px solid #666;padding-right:2rem}}
/* FAQ */
.fp-faq{background:var(--fp-beige);color:#0c0c0c;padding:clamp(2.5rem,6vw,5rem) 0}
.fp-faq h2{font-size:clamp(2rem,4.4vw,3.4rem);margin-bottom:1.6rem}
.fp-faq .faq{max-width:none;margin:0}
.fp-faq .faq details{border-bottom:1px solid #555}
.fp-faq .faq details:first-of-type{border-top:1px solid #555}
.fp-faq .faq summary{font-weight:600;font-size:1.05rem;padding:1.1rem .3rem}
.fp-faq .faq .faq__text{font-weight:400}
.fp-faq :focus-visible{outline-color:var(--fp-rot-hell)}
/* Schluss */
.fp-schluss{background:var(--fp-rot);color:#fff;padding:clamp(2.5rem,6vw,4.5rem) 0}
.fp-schluss h2{font-size:clamp(2.2rem,5vw,4rem);max-width:22ch;margin-bottom:1rem}
.fp-schluss p{font-size:1.15rem;font-weight:400;margin:0 0 1.8rem}
.fp-schluss__zeile{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2rem}
.fp-cta{display:inline-flex;align-items:center;gap:1rem;background:#fff;color:#0c0c0c;text-decoration:none;font-weight:600;font-size:1.05rem;padding:1rem 1.8rem;min-height:56px;transition:background .25s,color .25s}
.fp-cta:hover,.fp-cta:focus-visible{background:#0c0c0c;color:#fff}
.fp-schluss__tel{font-size:1.05rem;font-weight:400}
.fp-schluss__tel a{font-weight:700;text-decoration:none;display:inline-block;padding:.6rem 0}
.fp-schluss__tel a:hover{text-decoration:underline}
@media (min-width:700px){.fp-schluss__tel{border-left:1px solid rgba(255,255,255,.7);padding-left:2rem}}
.fp-schluss :focus-visible{outline-color:#fff}
/* Städte */
.fp-staedte{background:#0c0c0c;padding:1.2rem 0;font-size:.85rem}
.fp-staedte .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem 1.2rem}
.fp-staedte p{margin:0;font-weight:700}
.fp-staedte ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 1.1rem}
.fp-staedte a{display:inline-block;padding:.7rem 0;text-decoration:none;font-weight:400}
.fp-staedte a:hover{text-decoration:underline}
.fp-einsatz .fp-kicker{font-weight:700;max-width:none;font-size:.9rem;color:var(--fp-rot-text);margin-bottom:1rem}