/* Unterseite Video Agentur (Mockup-Umsetzung). Baut auf filmproduktion.css und werbefilm-seite.css auf */
.va-hero{position:relative;display:grid;background:#000;overflow:hidden;padding-top:var(--kopf)}
.va-hero__bild{position:relative;aspect-ratio:4/3}
.va-hero__bild img{width:100%;height:100%;object-fit:cover}
.va-hero__bild p{position:absolute;right:1rem;bottom:.8rem;margin:0;font-size:.75rem;font-style:italic;text-shadow:0 0 4px #000,0 1px 6px #000}
.va-hero__text{position:relative;padding:1.6rem 0 2.2rem}
.va-hero .fp-kicker{color:#fff;font-weight:600;margin-bottom:1.1rem}
.va-hero .fp-kicker span{color:var(--fp-rot-text)}
.va-hero .fp-kicker span::after{content:""}
.va-hero h1{font-size:clamp(2.2rem,8.5vw,3.6rem);font-weight:700;line-height:1.04;letter-spacing:-.03em;margin:0 0 1.2rem}
.va-hero__lead{font-size:1rem;font-weight:400;max-width:30rem;margin:0 0 1.5rem}
.va-hero__zeile{font-size:.9rem;font-weight:500;margin:0}
.va-textlink{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;text-decoration:none;border-bottom:2px solid #fff;min-height:44px;padding-top:.2rem}
.va-textlink svg{width:.9em;height:.9em;fill:currentColor}
.va-textlink:hover{border-color:var(--fp-rot)}
@media (min-width:860px){
  .va-hero{grid-template-columns:1fr 1fr;min-height:clamp(520px,42vw,640px)}
  .va-hero__bild{grid-column:2;grid-row:1;aspect-ratio:auto;min-height:100%}
  .va-hero__text{grid-column:1;grid-row:1;align-self:center;width:auto;margin:0;padding:3rem 2rem 3rem max(1.25rem,calc((100vw - var(--fp-w))/2));max-width:calc(var(--fp-w)/2 + 6rem)}
  .va-hero__text::before,.va-hero__text::after{content:"";position:absolute;width:24px;height:24px;border:3px solid var(--fp-rot)}
  .va-hero__text::before{left:max(1.25rem,calc((100vw - var(--fp-w))/2));top:.8rem;border-right:0;border-bottom:0}
  .va-hero__text::after{right:1rem;bottom:.8rem;border-left:0;border-top:0}
  .va-hero h1{font-size:clamp(2.2rem,3.8vw,3.4rem)}
}
.va-ziel h2,.va-formate h2,.va-plan h2,.va-ablauf h2,.va-kanaele h2{font-size:clamp(2.1rem,4.8vw,3.6rem);font-weight:700;line-height:1.03;letter-spacing:-.03em;margin:0 0 1.2rem}
.va-ziel,.va-plan,.va-kanaele{background:var(--fp-beige);color:#0c0c0c;padding:clamp(2.2rem,5vw,3.6rem) 0}
.va-formate,.va-ablauf{background:var(--fp-schwarz);padding:clamp(2.2rem,5vw,3.6rem) 0}
/* 01 */
.va-ziel__raster{display:grid;gap:1.6rem}
.va-ziel h2{margin-bottom:1rem}
.va-ziel__sub{font-weight:400;margin:0}
.va-ziel ol{list-style:none;margin:0;padding:0}
.va-ziel li{display:flex;gap:1.2rem;padding:.9rem 0;border-top:1px solid #0c0c0c}
.va-ziel li:last-child{border-bottom:1px solid #0c0c0c}
.va-ziel li>span{font-weight:700;font-size:1.05rem;padding-top:.15rem}
.va-ziel h3{font-size:1.4rem;font-weight:700;letter-spacing:-.02em;margin:0 0 .15rem}
.va-ziel li p{margin:0;font-weight:400;font-size:.95rem}
@media (min-width:860px){.va-ziel__raster{grid-template-columns:1.2fr 1fr;gap:4rem;align-items:center}}
/* 02 */
.va-formate h2{max-width:16ch;margin-bottom:1.8rem}
.va-formate__liste{list-style:none;margin:0;padding:0;display:grid;gap:0}
.va-formate__liste li{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0;border-top:1px solid #666}
.va-formate__liste li:last-child{border-bottom:1px solid #666}
.va-formate__liste h3{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin:0 0 .2rem}
.va-formate__liste p{margin:0;font-weight:300;font-size:.95rem}
.va-pfeil{flex:none;width:1.6rem;height:1.6rem;fill:var(--fp-rot-text)}
.va-formate__knopf{margin:1.6rem 0 0}
@media (min-width:860px){
  .va-formate__liste{grid-template-columns:1fr 1fr;column-gap:0}
  .va-formate__liste li{padding-right:1.5rem}
  .va-formate__liste li:nth-child(even){border-left:1px solid #666;padding-left:1.8rem;padding-right:0}
  .va-formate__liste li:nth-last-child(2){border-bottom:1px solid #666}
}
/* 03 */
.va-plan__raster{display:grid;gap:1.6rem;align-items:center}
.va-plan figure{margin:0}
.va-plan img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.va-plan figcaption{margin-top:.5rem;font-size:.8rem;font-style:italic}
.va-plan h2{font-size:clamp(2rem,3.8vw,3rem);margin:1rem 0 1rem}
.va-plan p{font-weight:400;max-width:34rem}
.va-plan ul{list-style:none;margin:1rem 0;padding:0}
.va-plan li{padding:.6rem 0 .5rem;border-bottom:1px solid #0c0c0c;font-weight:700}
.va-plan li:first-child{border-top:1px solid #0c0c0c}
.va-plan li::before{content:"/";color:var(--fp-rot-hell);margin-right:1rem}
.va-link-dunkel{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;text-decoration:none;border-bottom:2px solid #0c0c0c;min-height:44px;color:#0c0c0c}
.va-link-dunkel svg{width:.9em;height:.9em;fill:currentColor}
.va-link-dunkel:hover{color:var(--fp-rot-hell);border-color:var(--fp-rot-hell)}
.va-plan :focus-visible{outline-color:var(--fp-rot-hell)}
@media (min-width:860px){.va-plan__raster{grid-template-columns:1fr 1fr;gap:3rem}}
/* 04 */
.va-ablauf h2{max-width:18ch}
.va-schritte{list-style:none;margin:0;padding:0;display:grid}
.va-schritte li{padding:1.1rem 0;border-top:1px solid #666}
.va-schritte h3{font-size:1.3rem;font-weight:700;margin:0 0 .4rem;letter-spacing:-.02em}
.va-schritte h3 span{margin-right:.7rem}
.va-schritte p{margin:0;font-weight:300;max-width:20ch}
.va-ablauf__notiz{margin:1.2rem 0 0;padding-top:1rem;border-top:1px solid #666;font-size:.85rem;font-weight:300}
@media (min-width:860px){.va-schritte{grid-template-columns:repeat(4,1fr)}.va-schritte li{border-top:0;border-left:1px solid #666;padding:.2rem 1.5rem}.va-schritte li:first-child{border-left:0;padding-left:0}}
/* Kanäle */
.va-kanaele__raster{display:grid;gap:1.4rem;align-items:center}
.va-kanaele h2{font-size:clamp(1.9rem,3.6vw,2.9rem);margin-bottom:.8rem}
.va-kanaele p{font-weight:400;font-size:.9rem;margin:0;max-width:26rem}
.va-kanaele ul{list-style:none;margin:0;padding:0}
.va-kanaele li{padding:.7rem 0 .6rem;border-top:1px solid #0c0c0c;font-weight:700}
.va-kanaele li:last-child{border-bottom:1px solid #0c0c0c}
@media (min-width:860px){.va-kanaele__raster{grid-template-columns:1.2fr 1fr;gap:4rem}}
/* Schluss */
.va-schluss h2{max-width:20ch}
.va-schluss__notiz{margin:1.2rem 0 0;font-size:.85rem}