.elementor-59 .elementor-element.elementor-element-023f5db{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overflow:hidden;--margin-top:-10vh;--margin-bottom:-10vh;--margin-left:0;--margin-right:0;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-59 .elementor-element.elementor-element-023f5db.e-con{--flex-grow:1;--flex-shrink:1;}.elementor-59 .elementor-element.elementor-element-7effdc9{--display:flex;--min-height:80vh;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-59 .elementor-element.elementor-element-d39be15{--display:flex;--min-height:60vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-59 .elementor-element.elementor-element-d39be15.e-con{--flex-grow:1;--flex-shrink:0;}.elementor-59 .elementor-element.elementor-element-4e4821e img{height:50vh;}.elementor-59 .elementor-element.elementor-element-540b302 .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Neue Haas Grotesk, Arial, Helvetica, sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );}.elementor-59 .elementor-element.elementor-element-06e4831{--display:flex;--min-height:60vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-59 .elementor-element.elementor-element-06e4831.e-con{--flex-grow:1;--flex-shrink:0;}.elementor-59 .elementor-element.elementor-element-e02b4be img{height:50vh;}.elementor-59 .elementor-element.elementor-element-1acd91f .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Neue Haas Grotesk, Arial, Helvetica, sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );}.elementor-59 .elementor-element.elementor-element-bfb6237{--display:flex;--min-height:60vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-59 .elementor-element.elementor-element-bfb6237.e-con{--flex-grow:1;--flex-shrink:0;}.elementor-59 .elementor-element.elementor-element-dd128cc img{height:50vh;}.elementor-59 .elementor-element.elementor-element-bde441b .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Neue Haas Grotesk, Arial, Helvetica, sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );}.elementor-59 .elementor-element.elementor-element-ad95b44{--display:flex;--min-height:60vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-59 .elementor-element.elementor-element-ad95b44.e-con{--flex-grow:1;--flex-shrink:0;}.elementor-59 .elementor-element.elementor-element-a98f41d img{height:50vh;}.elementor-59 .elementor-element.elementor-element-01b4ea0 .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Neue Haas Grotesk, Arial, Helvetica, sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );}.elementor-59 .elementor-element.elementor-element-9ecf6e5{--display:flex;--min-height:60vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-59 .elementor-element.elementor-element-9ecf6e5.e-con{--flex-grow:1;--flex-shrink:0;}.elementor-59 .elementor-element.elementor-element-8db1019 img{height:50vh;}.elementor-59 .elementor-element.elementor-element-688150f .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Neue Haas Grotesk, Arial, Helvetica, sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );}@media(min-width:768px){.elementor-59 .elementor-element.elementor-element-023f5db{--content-width:1400px;}.elementor-59 .elementor-element.elementor-element-7effdc9{--width:auto;}.elementor-59 .elementor-element.elementor-element-d39be15{--width:26vw;}.elementor-59 .elementor-element.elementor-element-06e4831{--width:26vw;}.elementor-59 .elementor-element.elementor-element-bfb6237{--width:26vw;}.elementor-59 .elementor-element.elementor-element-ad95b44{--width:26vw;}.elementor-59 .elementor-element.elementor-element-9ecf6e5{--width:26vw;}}@media(max-width:1024px){.elementor-59 .elementor-element.elementor-element-540b302 .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-59 .elementor-element.elementor-element-1acd91f .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-59 .elementor-element.elementor-element-bde441b .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-59 .elementor-element.elementor-element-01b4ea0 .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-59 .elementor-element.elementor-element-688150f .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}}@media(max-width:767px){.elementor-59 .elementor-element.elementor-element-540b302 .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-59 .elementor-element.elementor-element-1acd91f .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-59 .elementor-element.elementor-element-bde441b .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-59 .elementor-element.elementor-element-01b4ea0 .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-59 .elementor-element.elementor-element-688150f .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}}/* Start custom CSS for container, class: .elementor-element-7effdc9 */.scroll-content{
    transition: none;
    overscroll-behavior: none;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-023f5db */.scroll-container{
    transition: none;
    overscroll-behavior: none;
}/* End custom CSS */
/* Start custom CSS */<style>
  .collage-container{
    position:relative;
    height:75vh; width:100%;
    overflow:hidden; user-select:none;
  }
  .collage-item{
    position:absolute;
    background-size:cover;
    background-position:center;
    transition:transform 240ms ease;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    cursor: grab;
  }
  .collage-item:active {
    cursor: grabbing;
  }
  .collage-item:hover{ transform:scale(1.04); z-index:5; }
  .collage-item a{ display:block; width:100%; height:100%; }
</style>

<div class="collage-container" id="collage">
  <div class="collage-item" style="background:#F7CAC9;"></div>
  <div class="collage-item" style="background:#88B04B;"></div>
  <div class="collage-item" style="background:#FF6F61;"></div>
  <div class="collage-item" style="background:#0A4C78;"></div>
</div>

<script>
(function(){
  const container = document.getElementById('collage');
  const items = Array.from(container.querySelectorAll('.collage-item'));
  const hrefs = ['#','#','#','#']; // Test-Links

  const RATIOS = [3/2, 4/3, 1, 16/9, 2/3, 9/16];

  const padX=80, padY=40;
  const jitter=20;
  const overlap=0.02;

  let t; const debounce=fn=>{clearTimeout(t); t=setTimeout(fn,150);};

  function layout(){
    const W=container.clientWidth, H=container.clientHeight;

    // Größenverteilung angepasst
    const sizeConfigs = [
      {minW:320, maxW:360}, // groß
      {minW:240, maxW:320}, // mittel kleiner
      {minW:240, maxW:320}, // mittel kleiner
      {minW:150, maxW:250}  // klein
    ];

    // Mittige Zonen
    const marginX = W * 0.15;
    const marginY = H * 0.15;
    const centerW = W - marginX * 2;
    const centerH = H - marginY * 2;

    const quads=[
      {lx:marginX, rx:marginX + centerW/2, ty:marginY, by:marginY + centerH/2},
      {lx:marginX + centerW/2, rx:W - marginX, ty:marginY, by:marginY + centerH/2},
      {lx:marginX, rx:marginX + centerW/2, ty:marginY + centerH/2, by:H - marginY},
      {lx:marginX + centerW/2, rx:W - marginX, ty:marginY + centerH/2, by:H - marginY},
    ];

    items.forEach((el,i)=>{
      const {minW, maxW} = sizeConfigs[i % sizeConfigs.length];
      let w=Math.round(rand(minW,maxW));
      const ratio=RATIOS[Math.floor(Math.random()*RATIOS.length)];
      let h=Math.round(w/ratio);

      const q=quads[i % quads.length];
      let left = clamp(rand(q.lx, q.rx - w) + rand(-w*overlap, w*overlap), marginX, W - w - marginX);
      let top  = clamp(rand(q.ty, q.by - h) + rand(-h*overlap, h*overlap), marginY, H - h - marginY);

      left = clamp(left + rand(-jitter,jitter), marginX, W - w - marginX);
      top  = clamp(top  + rand(-jitter,jitter), marginY, H - h - marginY);

      el.style.width=w+'px';
      el.style.height=h+'px';
      el.style.left=left+'px';
      el.style.top=top+'px';
      el.style.transform='none';

      if(!el.firstElementChild) el.appendChild(document.createElement('a'));
      el.firstElementChild.setAttribute('href', hrefs[i] || '#');
    });

    items.slice().sort((a,b)=>(a.offsetWidth*a.offsetHeight)-(b.offsetWidth*b.offsetHeight))
         .forEach((el,z)=>el.style.zIndex=1+z);

    enableDrag();
  }

  function rand(min,max){ return Math.random()*(max-min)+min; }
  function clamp(v,min,max){ return Math.min(Math.max(v,min),max); }

  function enableDrag(){
    let maxZ = 1000;
    items.forEach(el=>{
      let offsetX, offsetY, isDragging = false;

      el.addEventListener('mousedown', startDrag);
      el.addEventListener('touchstart', startDrag, {passive:false});

      function startDrag(e){
        e.preventDefault();
        isDragging = true;
        el.style.zIndex = ++maxZ;
        const rect = el.getBoundingClientRect();

        if(e.touches){
          offsetX = e.touches[0].clientX - rect.left;
          offsetY = e.touches[0].clientY - rect.top;
        } else {
          offsetX = e.clientX - rect.left;
          offsetY = e.clientY - rect.top;
        }

        document.addEventListener('mousemove', onDrag);
        document.addEventListener('mouseup', endDrag);
        document.addEventListener('touchmove', onDrag, {passive:false});
        document.addEventListener('touchend', endDrag);
      }

      function onDrag(e){
        if(!isDragging) return;
        let clientX, clientY;
        if(e.touches){
          clientX = e.touches[0].clientX;
          clientY = e.touches[0].clientY;
        } else {
          clientX = e.clientX;
          clientY = e.clientY;
        }
        el.style.left = (clientX - offsetX - container.getBoundingClientRect().left) + 'px';
        el.style.top = (clientY - offsetY - container.getBoundingClientRect().top) + 'px';
      }

      function endDrag(){
        isDragging = false;
        document.removeEventListener('mousemove', onDrag);
        document.removeEventListener('mouseup', endDrag);
        document.removeEventListener('touchmove', onDrag);
        document.removeEventListener('touchend', endDrag);
      }
    });
  }

  layout();
  window.addEventListener('resize', ()=>debounce(layout));
})();
</script>/* End custom CSS */