/* Größen bitte unten bei den Media Queries anpassen! */

:root {
    --bar-width: 700px;
    --bar-height: 170px;
    --bar-pos-1: 0;
    --bar-pos-2: 194px;
    --bar-pos-3: 388px;
    --bar-pos-4: 582px;
    --gaps: 24px;
}



/* * {
    margin: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    width: 100vw;
} */

.placeholder {
    height: 100vh;
}

.start-animation-1 .square-wrapper {
    animation-name: cube-x-movement;
}

.start-animation-1 .title-wrapper {
    animation-name: title-fade;
}

.start-animation-1 .square-item {
    animation-name: cube-y-movement;
}

.start-animation-1 .square {
    animation-name: cube-scaling;
}

.start-animation-1 .square {
    animation-name: cube-scaling;
}

.start-animation-1 #bar-1, .start-animation-1 #bar-2, .start-animation-1 #bar-3, .start-animation-1 #bar-4 {
    animation-name: bar-slide;
}

.start-animation-1 #bar-1 p, .start-animation-1 #bar-2 p, .start-animation-1 #bar-3 p, .start-animation-1 #bar-4 p {
    animation-name: text-fade;
}


.animation-view * {
    margin: 0;
    box-sizing: border-box;
}
.animation-view p {
    margin: 0;
}


.animation-view {
    display: inline-block;
    margin: auto;
    font-family: Futura, Jost, 'Josefin Sans', Arial, Helvetica, sans-serif;
}

.animation-wrapper {
    width: 1120px;
    height: 800px;
    margin: auto;
}

.animation-container {
    display: flex;
    gap: var(--gaps);
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.bar-wrapper {
    position: relative;
    overflow: hidden;
}

.square-wrapper {
    position: relative;
    animation-duration: 500ms;
    animation-delay: 6s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}

.title-wrapper {
    display: flex;
    position: relative;
    justify-content: center;
    flex-direction: column;
    opacity: 0;
    position: relative;


    animation-duration: 500ms;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    animation-delay: 6400ms;
}

.bar-wrapper {
    display: flex;
    gap: var(--gaps);
    align-items: flex-start;
    flex-direction: column;
}

.bar-item {
    width: var(--bar-width);
    height: var(--bar-height);
    padding: calc(var(--gaps) + (var(--gaps) / 2));
    background-color: rgb(75, 92, 105);
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: relative;
}

.bar-item .title, .bar-item .subtitle {
    color: #fff;
}

.square-item {
    display: flex;
    align-items: center;
    gap: var(--gaps);
    position: relative;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    top: calc(var(--bar-pos-4) + var(--bar-pos-2) + var(--gaps));
}

.square {
    width: var(--bar-height);
    height: var(--bar-height);
    background-color: rgb(224, 0, 63);
    outline: var(--gaps) solid #fff;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-delay: -25ms;
}

.title {
    font-size: 48px;
    line-height: 50px;
    font-weight: 400;
    text-transform: uppercase;
}

.subtitle {
    font-size: 24px;
    line-height: 28px;
    font-weight: 400;
}

#bar-1, #bar-2, #bar-3, #bar-4 {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}

#bar-1 p, #bar-2 p, #bar-3 p, #bar-4 p {
    animation-duration: 500ms;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    opacity: 0;
    position: relative;
}

#bar-1 {
    animation-delay: 4700ms;
    visibility: hidden;
}

#bar-2 {
    animation-delay: 3500ms;
    visibility: hidden;
}

#bar-3 {
    animation-delay: 2200ms;
    visibility: hidden;
}

#bar-4 {
    animation-delay: 900ms;
    visibility: hidden;
}

/*  */

#bar-1 p {
    animation-delay: 5300ms;
}

#bar-2 p {
    animation-delay: 4100ms;
}

#bar-3 p {
    animation-delay: 2800ms;
}

#bar-4 p {
    animation-delay: 1500ms;
}

@keyframes bar-slide {
    0% {
        visibility: visible;
        left: 100%;
    }

    100% {
        visibility: visible;
        left: 0;
    }
}

@keyframes text-fade {
    0% {
        opacity: 0;
        right: 20%;
    }

    10% {
        opacity: 0;
        right: 15%;
    }

    100% {
        opacity: 1;
        right: 0;
    }
}

@keyframes title-fade {
    0% {
        opacity: 0;
        right: var(--gaps);
    }

    10% {
        opacity: 0;
        right: calc(var(--gaps) - (var(--gaps) * 1/4));
    }

    100% {
        opacity: 1;
        right: 0;
    }
}

@keyframes cube-x-movement {
    0% {
        right: 0;
    }

    100% {
        right: calc(var(--bar-height) + var(--gaps));
    }
}

@keyframes cube-y-movement {
    0% {
        top: calc(var(--bar-pos-4) + var(--bar-pos-2) + var(--gaps))
    }

    10% {
        top: calc(var(--bar-pos-4) + var(--bar-pos-2) + var(--gaps))
    }

    20% {
        top: var(--bar-pos-4)
    }

    36.5% {
        top: var(--bar-pos-4)
    }

    46.5% {
        top: var(--bar-pos-3)
    }

    63% {
        top: var(--bar-pos-3)
    }

    73% {
        top: var(--bar-pos-2)
    }

    86.5% {
        top: var(--bar-pos-2)
    }

    96.5% {
        top: var(--bar-pos-1)
    }

    100% {
        top: var(--bar-pos-1)
    }
}

@keyframes cube-scaling {
    0% {
        transform: scale(1);
    }

    10% {
        transform: scale(1);
    }

    18% {
        transform: scale(1);

    }

    20% {
        transform: scale(.9);
    }

    22% {
        transform: scale(1);

    }

    44.5% {
        transform: scale(1);

    }

    46.5% {
        transform: scale(.9);
    }

    48.5% {
        transform: scale(1);

    }

    71% {
        transform: scale(1);

    }

    73% {
        transform: scale(.9);
    }

    75% {
        transform: scale(1);

    }

    94.5% {
        transform: scale(1);

    }

    96.5% {
        transform: scale(.9);
    }

    98.5% {
        transform: scale(1);

    }

}


/* Bitte hier die Größen anpassen! */

/* Für Bildschirme */
@media screen and (min-width: 771px) {

    :root {
        --bar-width: 420px;     /* Breite der Balken */
        --bar-height: 100px;    /* Höhe der Balken und Größe des Quadrats */
        --bar-pos-1: 0;         /* Position vom ersten Balken (Wichtig damit das Quadrat weiß wohin es während der Animation muss) */
        --bar-pos-2: 112px;     /* Position vom zweiten Balken (Wichtig damit das Quadrat weiß wohin es während der Animation muss) */
        --bar-pos-3:224px;     /* Position vom dritten Balken (Wichtig damit das Quadrat weiß wohin es während der Animation muss) */
        --bar-pos-4: 336px;     /* Position vom vierten Balken (Wichtig damit das Quadrat weiß wohin es während der Animation muss) */
        --gaps: 12px;           /* Abstand zwischen den Flächen */
    }

    .animation-wrapper {
        width: 750px;          /* Gesamtbreite der Animation (Achtung: Größen der Balken etc. müssen ebenfalls angepasst werden!)*/
        height: 450px;          /* Gesamthöhe der Animation (Achtung: Größen der Balken etc. müssen ebenfalls angepasst werden!) */

    }

    .title {
        font-size: 28px;        /* Größe der Überschriften */
        line-height: 29px;      /* Zeilenhöhe der Überschriften */

    }

    .subtitle {
        font-size: 14px;        /* Größe der Unterüberschriften */
        line-height: 15px;      /* Zeilenhöhe der Unterüberschriften */

    }
    
}

/* Für Tablets */
 @media screen and (max-width: 770px) {
    :root {
        --bar-width: calc(700px / 2);
        --bar-height: calc(170px / 2);
        --bar-pos-1: 0;
        --bar-pos-2: calc(194px / 2);
        --bar-pos-3: calc(388px / 2);
        --bar-pos-4: calc(582px / 2);
        --gaps: calc(24px / 2);
    }

    .animation-wrapper {
        width: calc(1120px / 2);
        height: calc(800px / 2);

    }

    .title {
        font-size: calc(48px / 2);
        line-height: calc(50px / 2);

    }

    .subtitle {
        font-size: calc(24px / 2);
        line-height: calc(28px / 2);
    }
} 

/* Für Smartphones */
@media screen and (max-width: 500px) {
    :root {
        --bar-width: calc(700px / 3);
        --bar-height: calc(170px / 3);
        --bar-pos-1: 0;
        --bar-pos-2: calc(194px / 3);
        --bar-pos-3: calc(388px / 3);
        --bar-pos-4: calc(582px / 3);
        --gaps: calc(24px / 3);
    }

    .animation-wrapper {
        width: calc(1120px / 3);
        height: calc(800px / 3);

    }

    .title {
        font-size: calc(48px / 3);
        line-height: calc(50px / 3);

    }

    .subtitle {
        font-size: calc(24px / 3);
        line-height: calc(28px / 3);
    }
}

/* Für kleine Smartphones */
@media screen and (max-width: 342px) {
    :root {
        --bar-width: calc(700px / 4);
        --bar-height: calc(170px / 4);
        --bar-pos-1: 0;
        --bar-pos-2: calc(194px / 4);
        --bar-pos-3: calc(388px / 4);
        --bar-pos-4: calc(582px / 4);
        --gaps: calc(24px / 4);
    }

    .animation-wrapper {
        width: calc(1120px / 4);
        height: calc(800px / 4);

    }

    .title {
        font-size: calc(48px / 4);
        line-height: calc(50px / 4);

    }

    .subtitle {
        font-size: calc(24px / 4);
        line-height: calc(28px / 4);
    }
}