body {
    margin: 0;
    overflow: hidden;
}

.moodboard {
    position: relative;
    width: 100vw;
    height: 100vh;
}

.moodboard input {
    display: none;
}

.card {
    position: absolute;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.card img {
    width: 350px;
    height: auto;
    display: block;
}

.card:hover {
    transform: scale(1.02);
}

/* Positionen */

.card1 {
    top: 80px;
    left: 120px;
    filter: blur(4px);
}

.card1:hover {
    filter: blur(0px);
    transform: scale(1.02);
}


.card2 {
    top: 150px;
    left: 450px;
filter: blur(4px);
}

.card2:hover {
    filter: blur(0px);
    transform: scale(1.02);
}

.card3 {
    top: 70px;
    left: 850px;
filter:blur(4px);
}

.card3:hover {
    filter: blur(0px);
    transform: scale(1.02);
}

.card4 {
    top: 360px;
    left: 180px;

}

.card5 {
    top: 430px;
    left: 620px;

}

.card6 {
    top: 280px;
    left: 980px;

}

/* Bild nach vorne holen */

#img1:checked + .card1,
#img2:checked + .card2,
#img3:checked + .card3,
#img4:checked + .card4,
#img5:checked + .card5,
#img6:checked + .card6 {
    z-index: 100;
}