/* Unterseite van Roje (Mockup-Umsetzung). Farben aus dem Mockup */
:root{--vr-rot:#d82625;--vr-rot-text:#ff5a56;--vr-beige:#f5f3ed;--vr-schwarz:#0c0c0c;--vr-linie:#d9d6cd}
body{background:var(--vr-schwarz)}
.vr-kicker{font-size:.9rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--vr-rot-text);margin:0}
.vr-kicker--linie::after{content:"";display:block;width:52px;height:2px;background:currentColor;margin-top:.7rem}
.vr-kicker--dunkel{color:#b3151a}
/* Hero: Standbild des Films, Text links, Logo rechts */
.vr-hero.yt{position:relative;display:grid;align-content:start;min-height:clamp(520px,44vw,640px);padding:calc(var(--kopf) + 1.5rem) 0 clamp(2rem,4vw,3.2rem);row-gap:2rem;background:#000;overflow:hidden;aspect-ratio:auto}
.vr-hero__bild{position:absolute;inset:0}
.vr-hero__bild img{position:absolute;right:-3%;top:0;width:auto;height:118%;max-width:none}
.vr-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000 0,rgba(0,0,0,.85) 18%,rgba(0,0,0,.35) 36%,rgba(0,0,0,0) 46%);pointer-events:none}
.vr-hero>*:not(.vr-hero__bild){position:relative;z-index:1}
.vr-hero__text{width:min(100% - 2.5rem,1240px)}
.vr-krumen ol{display:flex;flex-wrap:wrap;list-style:none;margin:0 0 .4rem;padding:0;font-size:.9rem;font-weight:500}
.vr-krumen li{display:flex;align-items:center;line-height:1.5}
.vr-krumen li+li::before{content:"/";margin:0 .6rem}
.vr-krumen a{text-decoration:none;padding:.5rem 0;display:inline-block}
.vr-krumen a:hover{text-decoration:underline}
.vr-krumen [aria-current]{font-weight:700}
.vr-krumen::after{content:"";display:block;width:18px;height:2px;background:#fff;margin-top:.4rem}
.vr-hero h1{font-size:clamp(2.6rem,6.2vw,5rem);font-weight:700;line-height:1.05;letter-spacing:-.015em;margin:1.4rem 0 0}
.vr-hero__start{display:inline-flex;align-items:center;gap:1.1rem;width:min(100% - 2.5rem,1240px);text-decoration:none;font-weight:600;font-size:1.1rem}
.vr-knopf{flex:none;width:clamp(56px,6vw,70px);aspect-ratio:1;border:3px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .25s,color .25s,border-color .25s}
.vr-knopf svg{width:46%;height:46%;fill:currentColor;margin-left:8%}
.vr-hero__start:hover .vr-knopf,.vr-hero__start:focus-visible .vr-knopf{background:var(--vr-rot);border-color:var(--vr-rot)}
.vr-hero.laeuft::after{display:none}
.vr-hero.laeuft .vr-hero__text,.vr-hero.laeuft .vr-hero__bild{display:none}
.vr-hero.laeuft iframe{inset:0;z-index:2}
@media (max-width:859px){
  .vr-hero.yt{min-height:0;padding-top:calc(var(--kopf) + 56vw);padding-bottom:2rem;background:#000}
  .vr-hero__bild{inset:var(--kopf) 0 auto 0;height:56vw}
  .vr-hero__bild img{position:static;width:100%;height:100%;object-fit:cover}
  .vr-hero::after{background:linear-gradient(180deg,rgba(0,0,0,0) calc(var(--kopf) + 30vw),#000 calc(var(--kopf) + 56vw))}
  .vr-hero__text{margin-top:-8vw}
  .vr-hero h1{margin-top:1rem}
}
/* Eckdaten */
.vr-daten{background:var(--vr-schwarz)}
.vr-daten dl{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem 0;margin:0 auto;padding:2rem 0}
.vr-daten dl>div{padding:0 1.2rem;border-left:1px solid #555}
.vr-daten dl>div:nth-child(odd){border-left:0;padding-left:0}
.vr-daten dt{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#cfcfcf;margin-bottom:.4rem}
.vr-daten dd{margin:0;font-size:clamp(1.15rem,2vw,1.5rem);font-weight:700}
@media (min-width:860px){.vr-daten dl{grid-template-columns:repeat(4,1fr)}.vr-daten dl>div:nth-child(odd){border-left:1px solid #555;padding-left:1.6rem}.vr-daten dl>div:first-child{border-left:0;padding-left:0}}
/* 01 Das Projekt */
.vr-projekt{background:var(--vr-beige);color:#0c0c0c;padding:clamp(2.5rem,6vw,5rem) 0}
.vr-projekt__raster{display:grid;gap:2rem}
.vr-projekt .vr-kicker{color:#b3151a}
@media (min-width:860px){.vr-projekt__raster{grid-template-columns:minmax(180px,30%) 1fr;gap:3rem}}
.vr-projekt h2,.vr-making h2{font-size:clamp(2.2rem,5.4vw,4.2rem);font-weight:700;line-height:1.06;letter-spacing:-.015em;margin:0 0 1.4rem;max-width:12ch}
.vr-projekt__text{font-size:clamp(1.05rem,1.7vw,1.25rem);font-weight:400;max-width:34ch;margin:0 0 1.6rem}
.vr-links{display:flex;flex-wrap:wrap;gap:.6rem 2.2rem;margin:0 0 1.6rem}
.vr-link{display:inline-flex;align-items:center;gap:.5rem;color:#b3151a;font-weight:700;font-size:1.1rem;text-decoration:none;border-bottom:3px solid var(--vr-rot);padding:.5rem 0 .2rem;min-height:44px}
.vr-link svg{width:.9em;height:.9em;fill:currentColor;transition:transform .3s}
.vr-link:hover svg{transform:translateX(3px)}
.vr-link:hover{color:#0c0c0c}
.vr-credits{font-size:.9rem;font-weight:500;margin:0}
.vr-projekt :focus-visible,.vr-making :focus-visible{outline-color:#b3151a}
/* 02 Ablauf */
.vr-ablauf{background:#131311;padding:clamp(2.5rem,6vw,5rem) 0 0}
.vr-ablauf__kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;margin-bottom:2rem}
.vr-ablauf__rand{flex:1;max-width:30rem;margin:0;padding-top:.4rem;border-top:1px solid #fff;text-align:right;font-size:.95rem;font-weight:600;align-self:flex-start}
.vr-ablauf__kopf .vr-kicker{flex:none}
.vr-ablauf h2{font-size:clamp(2.2rem,5.4vw,4.2rem);font-weight:700;line-height:1.06;letter-spacing:-.015em;max-width:15ch;margin:0 0 2.2rem}
.vr-schritte{list-style:none;margin:0;padding:0;display:grid;gap:2rem}
.vr-schritte li{border-left:1px solid #555;padding-left:1.5rem}
.vr-schritte li:first-child{border-left:0;padding-left:0}
.vr-schritte__nr{display:block;font-size:clamp(2.2rem,4vw,3.2rem);font-weight:700;line-height:1;color:var(--vr-rot-text)}
.vr-schritte h3{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:700;margin:.3rem 0 .6rem}
.vr-schritte p{margin:0;font-size:1.05rem;font-weight:300;max-width:24ch}
@media (max-width:859px){.vr-schritte li,.vr-schritte li:first-child{border-left:0;padding-left:0;border-top:1px solid #555;padding-top:1.4rem}.vr-schritte li:first-child{border-top:0}.vr-ablauf__rand{display:none}}
@media (min-width:860px){.vr-schritte{grid-template-columns:repeat(3,1fr)}}
.vr-band{margin-top:clamp(2.5rem,5vw,3.5rem);padding-bottom:clamp(2.5rem,5vw,3.5rem)}
.vr-band img{display:block;width:100%;height:auto;aspect-ratio:1271/219;object-fit:cover}
/* Making-of */
.vr-making{background:#f7f4f0;color:#0c0c0c;padding:clamp(2.5rem,6vw,5rem) 0 clamp(3rem,7vw,5.5rem)}
.vr-making h2{margin-top:1.4rem;max-width:14ch}
.vr-fotos{list-style:none;margin:2.2rem 0 0;padding:0;column-count:2;column-gap:.9rem}
.vr-fotos li{break-inside:avoid;margin:0 0 .9rem}
.vr-fotos img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.05);transition:filter .4s}
.vr-fotos li:hover img{filter:none}
@media (min-width:860px){.vr-fotos{column-count:3;column-gap:1.4rem}.vr-fotos li{margin-bottom:1.4rem}}
/* Schlussaufruf */
.vr-schluss{background:var(--vr-rot);color:#fff;padding:clamp(3rem,7vw,5.5rem) 0;--vr-sch-text:#fff}
.vr-schluss h2{font-size:clamp(2.2rem,5.4vw,4.2rem);font-weight:700;line-height:1.06;letter-spacing:-.015em;max-width:18ch;margin:0 0 1.2rem}
.vr-schluss p{font-size:clamp(1.05rem,1.8vw,1.25rem);font-weight:400;max-width:62ch;margin:0 0 2rem}
.vr-cta{display:inline-flex;align-items:center;gap:1rem;background:#fff;color:#0c0c0c;text-decoration:none;font-weight:700;font-size:1.1rem;padding:1.05rem 1.9rem;min-height:56px;transition:background .25s,color .25s}
.vr-cta svg{width:1.1em;height:1.1em;fill:currentColor;transition:transform .3s}
.vr-cta:hover,.vr-cta:focus-visible{background:#0c0c0c;color:#fff}
.vr-cta:hover svg{transform:translateX(4px)}
.vr-schluss :focus-visible{outline-color:#fff}
/* Einwilligung/Film: gleiche Regeln wie auf der Startseite */
.yt{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt.laeuft .yt__start{display:none}
/* Making-of: Hochformate auf gleiche Spaltenhöhe zuschneiden */
.vr-fotos li:nth-child(1) img,.vr-fotos li:nth-child(3) img{aspect-ratio:4/5;object-fit:cover}
.vr-fotos li:nth-child(5) img,.vr-fotos li:nth-child(6) img{aspect-ratio:1;object-fit:cover}