h2{
    margin-top: 2em;
}

img.doodle{
    position: absolute;
    z-index: 8;
    pointer-events: none;
}

img.Frederik_Briefing{
    position: relative;
    margin: var(--padding-inline);
    margin-right: clamp(var(--padding-inline), 5vw, 120px);
    width: clamp(200px, 24vw, 300px);
    float: right;
}

div.skizzen{
    anchor-name: --skizzen;
}
img.TimSkizzen{
    position-anchor: --skizzen;
    bottom: calc(anchor( bottom) - min(4vw, 50px));
    right: calc(anchor( center) - clamp(90px, 15vw, 188px));
    width: clamp(130px, 24vw, 300px);
}

img.LizOutlineAnchor{
    anchor-name: --LizOutlineAnchor;
}
img.LizOutline{
    position-anchor: --LizOutlineAnchor;
    bottom: calc( anchor(bottom) - min(4vw, 50px));
    right:  calc( anchor(center) - clamp(140px, 38vw, 470px) );
    width: clamp(14px, 24vw, 300px);
    
    transition: animation 1s;
    animation: erscheinen ease;
    animation-timeline: view(); 
    animation-range: entry 0% cover 30%; 
}
.colorareas{
    grid-template-columns: 1fr 1fr;
}
img.FinalVersion{
    anchor-name: --FinalVersion;
    margin-bottom: clamp(5px, 4vw, 50px);
    grid-column: span 2;
}
img.TimFinalVersion{
    position-anchor: --FinalVersion;
    top: calc(anchor(top) - min(7vw, 100px));
    left: calc(anchor(left) + clamp(0px, 4vw, 50px));
    width: clamp(90px, 24vw, 300px);
}
img.FrediFinalVersion{
    position-anchor: --FinalVersion;
    bottom: calc(anchor( bottom) - min(5vw, 63px));
    left:   calc(anchor(left));
    width: clamp(140px, 24vw, 300px);
}
img.LizFinalVersion{
    position-anchor: --FinalVersion;
    bottom: calc(anchor( bottom) - min(7vw, 88px));
    right: calc(anchor( center) - clamp(140px, 47vw, 590px));
    width: clamp(140px, 24vw, 300px);
}

@keyframes erscheinen {
  0%,50% { rotate: 10deg; }
  25% { rotate: -10deg; }
  75% { rotate: -5deg; }
  100% { rotate: 0deg; }
}