/* [XR] NOE | HUMAN NATURE — 1:1-Nachbau von xrnoe.art für medienwerkstatt006.at
   Maße aus dem Original (Desktop-Raster 980 px, Viewport 1400 px) */
:root{
  --x-white:#fff;
  --x-grey:#bfbbbb;
  --x-orange:#ff4902;
  --x-rust:#aa3101;
  --x-magenta:#ff00ff;
  --x-green:#5c806d;
  --x-lime:#78a508;
  --x-heavy:"Figtree","Avenir Next","Avenir",system-ui,sans-serif;
  --x-light:"Figtree","Avenir Next","Avenir",system-ui,sans-serif;
  --top:var(--mw4-height,0px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.xr-noe{margin:0;background:#000;color:#fff;font-family:var(--x-light);font-weight:300;font-size:18px;line-height:1.4;overflow-x:hidden}
.xr-noe a{color:inherit}
.xr-noe img{max-width:100%;display:block}
.xr-noe h1,.xr-noe h2,.xr-noe h3,.xr-noe h4,.xr-noe h5,.xr-noe h6{font-family:var(--x-heavy);font-weight:800;margin:0}
.xr-noe .wrap{width:min(980px,100% - 32px);margin:0 auto;position:relative}
.xr-noe section{position:relative;scroll-margin-top:var(--top)}
.sec-title{font:800 40px/56px var(--x-heavy);letter-spacing:6px;text-align:center;color:#fff;text-transform:uppercase}

/* ---------- fixierte Elemente ---------- */
.xr-logo{position:fixed;top:calc(var(--top) + 40px);left:60px;z-index:60;width:152px}
.xr-logo img{width:152px;height:31px;object-fit:contain}
.xr-dots{position:fixed;right:76px;top:calc(var(--top) + 40px);z-index:60;display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.xr-dots a{display:block;width:10px;height:10px;border:1.5px solid #fff;border-radius:50%;position:relative;transition:background .25s}
.xr-dots a.on,.xr-dots a:hover{background:#fff}
.xr-dots a span{position:absolute;right:20px;top:50%;transform:translateY(-50%);font:800 11px/1 var(--x-heavy);letter-spacing:1.6px;white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none}
.xr-dots a:hover span,.xr-dots a:focus span{opacity:1}
.xr-social{position:fixed;right:60px;top:calc(var(--top) + 290px);z-index:60;display:flex;flex-direction:column;gap:12px}
.xr-social img{width:25px;height:25px}

/* ---------- HERO ---------- */
.hero{--ow:min(1090px,96vw);height:calc(var(--ow) * .9163 + 81px);background:var(--x-rust);overflow:hidden}
.hero .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero .umriss{position:absolute;left:50%;top:1px;width:var(--ow);transform:translateX(-50%);pointer-events:none}
.hero .hero-title{position:absolute;left:50%;top:calc(var(--ow) * .2202);width:calc(var(--ow) * .5505);transform:translateX(-50%)}
.hero .places{position:absolute;left:50%;top:calc(var(--ow) * .5083);transform:translateX(-50%);width:min(600px,90vw);margin:0;font:300 16px/20.8px var(--x-light);text-align:center;color:#fff}

/* ---------- ABOUT ---------- */
.about{padding:86px 0 0}
.about h1{font:800 40px/56px var(--x-heavy);letter-spacing:4px;text-align:center;margin-bottom:13px}
.about .lead{width:min(568px,100%);margin:0 auto;font:300 18px/25.2px var(--x-light);color:var(--x-grey);text-align:center}
.about .lead p{margin:0 0 25px}
.stats{position:relative;height:250px;margin-top:40px}
.stats .s{position:absolute;top:0;text-align:center}
.stats .s1{left:66px;width:202px}
.stats .s2{left:567px;width:339px}
.stats b{display:block;font:800 80px/96px var(--x-heavy);color:#fff}
.stats span{display:block;margin-top:20px;font:300 18px/25.2px var(--x-light);color:var(--x-grey)}
.stats .s2 span{width:202px;margin-left:auto;margin-right:auto}
.stat-bilder{width:min(460px,100%);margin:0 auto}
.stat-bilder img{width:100%;aspect-ratio:1/1;object-fit:cover}

/* ---------- NEWS ---------- */
#news{padding:63px 0 40px}
#news .sec-title{margin-bottom:82px}
.news-grid{display:grid;grid-template-columns:486px 486px;justify-content:space-between;row-gap:0}
.news-item{text-align:center;min-height:313px;padding:0 20px}
.news-item.hot{grid-column:1/-1;min-height:239px}
.news-item h2{font:800 34px/41px var(--x-heavy);color:var(--x-orange)}
.news-item.hot h2{color:var(--x-magenta)}
.news-item p{font:300 14px/20px var(--x-light);color:#fff;margin:2px 0 23px}
.btn-info{display:inline-block;width:122px;height:35px;line-height:35px;background:var(--x-orange);color:#fff!important;text-decoration:none;font:800 18px/35px var(--x-heavy);text-align:center;transition:background .3s,color .3s}
.btn-info:hover{background:#fff;color:var(--x-orange)!important}

/* ---------- TRAILER ---------- */
.trailer{background:#000}
.yt{position:relative;width:100%;height:585px;background:#000 center/cover no-repeat;cursor:pointer;display:grid;place-items:center;overflow:hidden}
.yt::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.4);transition:background .3s}
.yt:hover::before{background:rgba(0,0,0,.25)}
.yt .yt-in{position:relative;text-align:center;padding:16px}
.yt h3{font:800 47px/56px var(--x-heavy);color:#fff}
.yt .yt-play{display:inline-flex;align-items:center;gap:10px;margin-top:20px;font:300 15px var(--x-light);text-decoration:underline;color:#fff}
.yt .yt-play i{width:32px;height:32px;border:2px solid #fff;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;padding-left:2px}
.yt small{display:block;margin-top:10px;font:300 12px var(--x-light);color:var(--x-grey)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- LOCATIONS ---------- */
#locations{padding:14px 0 0}
#locations .dotline{width:0;height:150px;margin:18px auto 0;border-left:2px dotted #c9d64a}
.locs{position:relative;width:982px;height:1333px;margin:-34px auto 0}
.loc{position:absolute;display:block;text-decoration:none}
.loc img{width:100%;height:100%;object-fit:cover;transition:filter .4s}
.loc:hover img{filter:brightness(1.15)}
.loc-t{position:absolute;z-index:5;font:800 21px/29.4px var(--x-heavy);letter-spacing:2.1px;color:var(--x-orange);text-decoration:none;pointer-events:auto}
.loc-n{position:absolute;z-index:5;font:800 60px/71px var(--x-heavy);color:#fff;text-align:right;text-decoration:none}
.karte{width:min(980px,100%);margin:0 auto}
.karte img{width:100%;height:auto}

/* ---------- PROZESS (Video-Hintergrund, fixiert) ---------- */
.prozess-sec{min-height:755px;padding:68px 0 70px;clip-path:inset(0);background:#000}
.prozess-sec .bgv{position:fixed;inset:0;width:100%;height:100vh;object-fit:cover;z-index:0}
.prozess-sec .bgv-shade{position:absolute;inset:0;background:rgba(0,0,0,.35);z-index:1}
.prozess-sec .wrap{z-index:2}
.prozess{display:grid;grid-template-columns:repeat(3,252px);justify-content:space-between;width:830px;margin:62px auto 0;text-align:center}
.prozess .frame{width:124px;height:129px;margin:0 auto 0}
.prozess h6{font:800 21px/25px var(--x-heavy);letter-spacing:2.1px;color:#fff;margin:12px 0 35px;min-height:75px}
.prozess p{font:300 16px/22px var(--x-light);color:var(--x-grey);margin:0 auto;width:234px}

/* ---------- TEAM ---------- */
#team{padding:70px 0 80px}
.team{display:grid;grid-template-columns:repeat(3,252px);justify-content:space-between;row-gap:44px;width:817px;margin:55px auto 0;text-align:center}
.team h6{font:800 21px/25px var(--x-heavy);letter-spacing:2.1px;color:var(--x-green);margin-bottom:13px}
.team h6 a{text-decoration:none}
.team p{font:300 16px/23px var(--x-light);color:#fff;margin:0 auto;width:196px}
.team p a{color:#fff}

/* ---------- IDEE ---------- */
.idee{background:var(--x-green);padding:89px 0 70px;overflow:hidden}
.idee .deko-l{position:absolute;left:-219px;top:0;width:467px;height:600px}
.idee .deko-r{position:absolute;right:-219px;bottom:0;width:467px;height:600px}
.idee .txt{position:relative;width:min(727px,100% - 32px);margin:38px auto 0}
.idee p{font:300 18px/25.2px var(--x-light);text-align:justify;hyphens:auto;margin:0 0 25px;color:#fff}
.idee a{color:#fff}

/* ---------- INFO ---------- */
.info{padding:60px 0 40px;text-align:center}
.info h6{font:800 21px/25px var(--x-heavy);letter-spacing:2.1px;margin-bottom:46px;color:#fff}
.funder{display:flex;justify-content:center;align-items:flex-start;gap:46px 46px;flex-wrap:wrap;margin-bottom:96px}
.funder .f1 img{width:233px;height:63px}
.funder .f2 img{width:309px;height:62px}
.funder .f3 img{width:128px;height:128px}
.info .mail{color:#fff;text-decoration:none;font:300 18px/25px var(--x-light)}
.info .copy{font:300 16px var(--x-light);margin-top:78px}
.archiv-note{text-align:center;font:300 13px var(--x-light);color:var(--x-grey);padding:0 16px 30px}
.archiv-note a{color:#fff}

/* ---------- Unterseiten ---------- */
.sub{position:relative;padding:0 0 60px;overflow:hidden}
.sub .head{position:relative;padding-top:0;min-height:367px}
.sub h1{font:800 60px/84px var(--x-heavy);color:var(--x-lime);padding-right:160px}
.sub .home{position:absolute;right:0;top:22px;font:300 16px/40px var(--x-light);letter-spacing:1.6px;color:var(--x-orange);text-decoration:underline}
.sub .meta{width:min(772px,100%);font:700 16px/22.5px var(--x-heavy)}
.sub .meta p{margin:0 0 22px}
.sub .meta .k{color:var(--x-green)}
.sub .meta a{color:var(--x-green)}
.sub .meta .w{color:#fff}
.sub .gal{display:flex;flex-direction:column;align-items:center;gap:24px;margin-top:28px}
.sub .gal>div{width:min(600px,100%)}
.sub .gal img{width:100%;height:auto}
.sub .side{position:absolute;left:calc(50% + 490px);top:593px;width:480px;pointer-events:none}
.sub .subnav{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:70px;padding-top:24px;border-top:1px solid rgba(255,255,255,.18);font:800 12px var(--x-heavy);letter-spacing:1.2px}
.sub .subnav a{text-decoration:none;color:var(--x-grey)}
.sub .subnav a:hover{color:var(--x-orange)}
.sub-top{height:99px}

/* mw006 Rücknavigation */
nav.xr-rueck{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 26px;padding:26px 16px;border-top:1px solid rgba(255,255,255,.14);font:800 13px var(--x-heavy);letter-spacing:1.3px}
nav.xr-rueck a{color:#fff;text-decoration:none}
nav.xr-rueck a:hover{color:var(--x-orange)}

/* ---------- Einblend-Animationen wie im Original ---------- */
.js [data-a]{will-change:opacity,transform,clip-path}
.js [data-a=fade]{opacity:0;transition:opacity 1.2s ease}
.js [data-a=reveal]{opacity:0;clip-path:inset(0 100% 0 0);transition:clip-path 1.2s cubic-bezier(.25,.46,.45,.94),opacity .01s}
.js [data-a=reveal2]{opacity:0;clip-path:inset(0 100% 0 0);transition:clip-path 2s cubic-bezier(.25,.46,.45,.94),opacity .01s}
.js [data-a=down]{opacity:0;transform:translateY(-60px);transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.25,.46,.45,.94)}
.js [data-a=up]{opacity:0;transform:translateY(60px);transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.25,.46,.45,.94)}
.js [data-a=down].d4,.js [data-a=up].d4{transition-delay:.4s}
.js [data-a].in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){.js [data-a]{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}}

/* ---------- Tablet / Mobil ---------- */
@media (max-width:1060px){
  .locs{width:100%;height:auto;margin:30px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
  .loc,.loc-t,.loc-n{position:relative!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important}
  .loc-card{position:relative}
  .loc-card .loc img{aspect-ratio:327/500}
  .loc-card .loc-t{position:absolute!important;left:18px!important;top:12px!important;right:12px!important;font-size:17px;line-height:23px}
  .loc-card .loc-n{position:absolute!important;right:14px!important;bottom:6px!important;left:auto!important;top:auto!important;font-size:48px}
  .news-grid{grid-template-columns:1fr 1fr;column-gap:24px}
  .prozess,.team{width:100%;grid-template-columns:repeat(3,1fr);column-gap:20px}
  .prozess p,.team p{width:auto}
  .stats .s1{left:4%}.stats .s2{left:auto;right:4%}
  .sub .side{display:none}
}
@media (max-width:820px){
  .xr-logo{left:16px;top:calc(var(--top) + 14px);width:110px}
  .xr-logo img{width:110px;height:auto}
  .xr-dots,.xr-social{display:none}
  .sec-title{font-size:30px;line-height:40px;letter-spacing:4px}
  .hero .places{font-size:12px;line-height:16px}
  .about h1{font-size:26px;line-height:36px;letter-spacing:2px}
  .stats{height:auto;display:grid;gap:44px;margin:50px 0 40px}
  .stats .s{position:static;width:auto!important}
  .stats b{font-size:64px;line-height:76px}
  .stats .s2 span{width:auto}
  .news-grid{grid-template-columns:1fr;row-gap:46px}
  .news-item,.news-item.hot{min-height:0;padding:0}
  .news-item h2{font-size:26px;line-height:32px}
  .yt{height:auto;aspect-ratio:16/9}
  .yt h3{font-size:24px;line-height:30px}
  .locs{grid-template-columns:1fr 1fr}
  .prozess-sec .bgv{position:absolute;height:100%}
  .prozess,.team{grid-template-columns:1fr;row-gap:44px}
  .prozess h6{min-height:0;margin-bottom:16px}
  .idee .deko-l,.idee .deko-r{display:none}
  .idee p{text-align:left;font-size:16px;line-height:23px}
  .funder{gap:26px}
  .funder .f2 img{width:240px;height:auto}
  .funder .f1 img{width:200px;height:auto}
  .sub h1{font-size:34px;line-height:42px;padding-right:0}
  .sub .home{position:static;display:inline-block;margin:0 0 12px}
  .sub .head{min-height:0}
}
@media (max-width:480px){
  .locs{grid-template-columns:1fr}
}

/* Unterseiten: Video + Galerie-Raster */
.sub .subvid{width:min(600px,100%);margin:28px auto 0}
.sub .subvid .yt{height:auto;aspect-ratio:16/9}
.sub .subvid .yt h3{font-size:24px;line-height:30px;padding:0 20px}
.sub .vcap{margin:8px 0 0;text-align:right;font:300 13px var(--x-light)}
.sub .vcap a{color:var(--x-grey)}
.sub .gal.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:980px;margin-left:auto;margin-right:auto}
.sub .gal.grid>div{width:auto}
.sub .gal.grid img{aspect-ratio:1/1;object-fit:cover;height:100%}
@media (max-width:820px){.sub .gal.grid{grid-template-columns:repeat(2,1fr)}}