style.css

:root {
    --animation_time: 0s; /* * Wird durch JS gesetzt */
    --neuland_blue: #0b83ff;
    --progressbar_background: #ccc;

    /* * Zusammen anpassen! Ausporbieren was passt ... */
    --slideshowimage_maxheight: 750px;
    --slideshowimage_offset: 4px; /* Nur relevant, wenn in js "const frame = true;" */
    --slideshowimage_screenshort_borderradius: 20px;
}


body {
    margin: 0px;
    padding: 0px;
    font-family: Arial, sans-serif;
    text-align: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    align-items: center;
}

main {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

main > section {
    width: 35vw;
    min-width: 500px;
}

.slideshow_container {
    width: 80%;
    margin: 0 auto;
    max-width: 800px;
    padding-top: 50px;
}

.slideshow {
    position: relative;
    margin-bottom: 20px;
}

#slideshowimage_div > img {
    max-height: var(--slideshowimage_maxheight);
}
#frame_img {
    max-height: calc(var(--slideshowimage_maxheight) + 2* var(--slideshowimage_offset)) !important;
    top: calc(var(--slideshowimage_offset) * -1);
}
#slideshowimage {
    border-radius: var(--slideshowimage_screenshort_borderradius);
}


#imagetext {
    font-size: 40px;
    margin-top: 10px;
    font-weight: bold;
}

#progressbar_container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.progressbar, .progressbar > div, .progressbar > div > div {
    width: 25px;
    height: 7px;
    border-radius: 5px;
    /* transition: background-color 0.5s ease; */
}

.progressbar {
    margin: 0px 5px 0px 5px;
    position: relative;
}
.progressbar > div {
    background-color: var(--progressbar_background);
    position: absolute;
}

.progressbar > div > div {
    position: absolute;
}

.progressbar_current > div > div {
    background-color: var(--neuland_blue) !important;
    animation: fillAnimation var(--animation_time) linear forwards;
}

@keyframes fillAnimation {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

#app_info_imgs > div, #app_info_badge > div {
    margin: 0px 30px 0px 30px;
}

#app_info_imgs > div > img {
    width: 200px;
    height: 200px;
}

#app_info_imgs > div:nth-child(1) > img {
    border-radius: 50px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19);
}