@font-face {
    font-family: "IBM Plex light";
    src: url("../../fonts/IBM_Plex_Sans/IBMPlexSans-Light.ttf") format('truetype');
    font-style: normal;

}

@font-face {
    font-family: "IBM Plex Bold";
    src: url("../../fonts/IBM_Plex_Sans/IBMPlexSans-Bold.ttf") format('truetype');
    font-style: normal;
}

@font-face {
    font-family: "IBM Plex";
    src: url("../../fonts/IBM_Plex_Sans/IBMPlexSans-Regular.ttf") format('truetype');
    font-style: normal;
}

@font-face {
    font-family: "IBM Plex SemiBold";
    src: url("../../fonts/IBM_Plex_Sans/IBMPlexSans-SemiBold.ttf") format('truetype');
    font-style: normal;
}

@font-face {
    font-family: "Bebas Neue";
    src: url("../../fonts/Bebas_Neue/BebasNeue-Regular.ttf") format('truetype');
    font-style: normal;
}

:root {
    --afterDist: 30px;
    --mobile: 0;
    --swiper-pagination-color: black;
    --swiper-pagination-bullet-inactive-color: #000;
    --swiper-pagination-bullet-inactive-opacity: 0.2;
    --swiper-pagination-bullet-size: 10px;
    --swiper-pagination-bullet-horizontal-gap: 6px;
}

#blackstripe {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 1vw;
    height: 100vh;
    background-color: black;
    z-index: 2;
}

#lower {
    display: none;
    position: relative;
}

#order {
    grid-column: 2 / span 5;
    display: none;
    flex-direction: column;
    /* justify-content: space-between; */
    align-items: start;
    margin: 96px 0;
    width: 100%;
}

#higher-order {
    display: grid;
    width: 99vw;
    margin-left: 1vw;
    justify-content: end;
    height: 100%;
    grid-template-columns: 0.25fr 1fr 0.25fr 1fr 0.25fr 1fr 0.25fr;
}

#headline {
    /* margin-left: 7.25vw; */
    color: #413836;
    scroll-margin: 48px;
    font-size: clamp(2rem, 3.02vw, 4rem);
    text-align: left;
    color: #413836;
    font-weight: 300;
    font-family: "Bebas Neue";
    white-space: nowrap;
}

#order-text {
    font-size: clamp(.67rem, .88vw, 2.25rem);
    /* margin-right: 6.25vw; */
}

#dates {
    display: none;
    position: fixed;
    /* display: flex; */
    flex-direction: column;
    /* align-items: baseline; */
    justify-content: space-around;
    top: 10vh;
    bottom: 5vh;
    /* width: 30px; */
    left: 1vw;
    height: 85vh;
    /* font-size: 1rem; */
    font-size: clamp(.75rem, 1.25vw, 1.5rem);
    z-index: 2;
    font-family: "IBM Plex Bold";

}

#dates p {
    position: relative;
    color: black;
    writing-mode: vertical-lr;
    cursor: pointer;
    padding: 0px;

}

p {
    font-family: "IBM Plex";
}

#dates p[data-active="true"]::after {
    content: '';
    position: absolute;
    left: -0.25vw;
    bottom: 0;
    background: #e6e5e1;
    width: 20%;
    height: 100%;
}

h4 {
    font-family: "IBM Plex SemiBold";
}

#timeline {
    padding-bottom: 48px;
}

#topicsGrid {
    position: absolute;
    display: grid;
    width: 99vw;
    margin-left: 1vw;
    justify-content: end;
    height: 100%;
    grid-template-columns: 0.25fr 1fr 0.25fr 1fr 0.25fr 1fr 0.25fr;
    z-index: 5;
    pointer-events: none;
}

#topicsGrid-mobile {
    display: none;
}

#topics {
    /*  position: sticky;
    top: 0; */
    grid-column: 6;
    width: 100%;
    justify-self: end;
    font-size: clamp(0.75rem, 2vw, 3rem);
    font-size: clamp(0.5rem, 1.9vw, 2.5rem) !important;
}

.stick {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    position: sticky;
    top: 0;
    background: none;
    /* height: 4vw; */
    height: fit-content;
    pointer-events: all;
    font-size: clamp(.75rem, 2vw, 2rem);
}

#aktive {
    display: none;
    /*display: grid;*/
    grid-template-columns: 0.5fr 2fr;
    justify-items: space-between;
    align-items: center;
    width: 100%;
    height: 3vw;
    padding: 0 1vw;
    color: #e6e5e1;
    font-size: 1rem;
    text-transform: uppercase;
    text-align: right;
    font-size: clamp(0.5rem, 1vw, 2rem);
    cursor: pointer;
}

#aktive img {
    transform: rotate(-90deg);
    width: clamp(1rem, 40%, 3rem);
    height: auto;
}

#politischeEreignisse {
    position: relative;
    cursor: pointer;
    filter: opacity(1);
    color: #e6e5e1;
    background: #2e4259;
    width: 100%;
    justify-content: center;
    font-family: "IBM Plex light";
    text-transform: uppercase;
    text-align: center;
    padding: 1.33vh;
    font-size: clamp(0.5rem, 1.25vw, 2rem);
    /* 1.25rem; */
}

#werkgenese {
    position: relative;
    cursor: pointer;
    filter: opacity(1);
    color: #e6e5e1;
    background: #6c3223;
    width: 100%;
    justify-content: center;
    font-family: "IBM Plex light";
    text-transform: uppercase;
    text-align: center;
    padding: 1.33vh;
    font-size: clamp(0.5rem, 1.25vw, 2rem);
    /* 1.25rem; */
}

#werkprovenienz {
    position: relative;
    cursor: pointer;
    filter: opacity(1);
    color: #e6e5e1;
    background: #3d5743;
    width: 100%;
    justify-content: center;
    font-family: "IBM Plex light";
    text-transform: uppercase;
    text-align: center;
    padding: 1.33vh;
    font-size: clamp(0.5rem, 1.25vw, 2rem);
    /* 1.25rem; */
}

#ankaufMannheim {
    position: relative;
    color: #e6e5e1;
    background: #5f4721;
    width: 100%;
    justify-content: center;
    font-family: "IBM Plex light";
    text-transform: uppercase;
    /* left: -40px; */
    cursor: pointer;
    filter: opacity(1);
    text-align: center;
    padding: 1.33vh;
    font-size: clamp(0.5rem, 1.25vw, 2rem);
    /* 1.25rem; */
}

#flex2 {
    font-family: "IBM Plex light";
}

/****************************************************************/

.gridcontainer {
    display: grid;
    width: 99vw;
    margin-left: 1vw;
    grid-template-columns: 0.25fr 1fr 0.25fr 1fr 0.25fr 1fr 0.25fr;
    grid-template-rows: minmax(min-content, max-content) repeat(15, minmax(0px, auto));
    margin-bottom: 48px;
}

span:nth-of-type(2n + 1) {
    grid-template-areas:
        ". a . b1 . c1 ."
        ". a . b2 . c2 ."
        ". a . b3 . c3 ."
        ". a . b4 . c4 ."
        ". a . b5 . c5 ."
        ". a . b6 . c6 ."
        ". a . b7 . c7 ."
        ". a . b8 . c8 ."
        ". a . b9 . c9 ."
        ". a . b10 . c10 ."
        ". a . b11 . c11 ."
        ". a . b12 . c12 ."
        ". a . b13 . c13 ."
        ". a . b14 . c14 ."
        ". a . b15 . c15 ."
        ". a . b16 . c16 .";
}


span:nth-of-type(2n + 1) .grid-item-a {
    grid-area: 1 / 2 / 15 / 2;
}

span:nth-of-type(2n) {
    grid-template-areas:
        ". c1 . b1 . a ."
        ". c2 . b2 . a ."
        ". c3 . b3 . a ."
        ". c4 . b4 . a ."
        ". c5 . b5 . a ."
        ". c6 . b6 . a ."
        ". c7 . b7 . a ."
        ". c8 . b8 . a ."
        ". c9 . b9 . a ."
        ". c10 . b10 . a ."
        ". c11 . b11 . a ."
        ". c12 . b12 . a ."
        ". c13 . b13 . a ."
        ". c14 . b14 . a ."
        ". c15 . b15 . a ."
        ". c16 . b16 . a .";
}

span:nth-of-type(2n) .blue-text,
span:nth-of-type(2n) .red-text,
span:nth-of-type(2n) .green-text,
span:nth-of-type(2n) .yellow-text {
    /*.date{*/
    /* text-align: right; */

    place-self: end;
}

span:nth-of-type(2n) .grid-item-a {
    grid-area: 1 / 6 / 14 / 6;
    /*row-start column-start row-end column-end*/
}

span:nth-of-type(2n + 1) .grid-item-a-test {
    /* Trick! */
    grid-area: 9 / 2 / 13 / 2;
    /*row-start column-start row-end column-end*/
}

span:nth-of-type(2n) .grid-item-a-test {
    /* Trick! */
    grid-area: 9 / 6 / 13 / 6;
    /*row-start column-start row-end column-end*/
}

span:nth-of-type(2n + 1) .grid-item-a-test2 {
    /* Trick! */
    grid-area: 1 / 2 / 3 / 2;
    /*row-start column-start row-end column-end*/
}

span:nth-of-type(2n) .grid-item-a-test2 {
    /* Trick! */
    grid-area: 1 / 6 / 3 / 6;
    /*row-start column-start row-end column-end*/
}

span:nth-of-type(2n) .grid-item-a-1868 {
    grid-area: 3 / 6 / 7 / 6;
    /*row-start column-start row-end column-end*/
}

span:nth-of-type(2n + 1) .grid-item-a-1868 {
    grid-area: 3 / 2 / 7 / 2;
    /*row-start column-start row-end column-end*/
}

.headline,
.headline-red,
.headline-green,
.headline-yellow {
    position: relative;
    font-family: "Bebas Neue";
    font-size: clamp(2vw, 3.02vw, 4vw);
    /* margin-bottom: 48px; */
    color: #201813 !important;
    line-height: 1.75vw;
    display: inline-block;
    white-space: nowrap;
}

.date {
    font-family: "Bebas Neue";
    line-height: clamp(.75rem, 2.75vw, 4rem);

}


span:nth-of-type(2n) .date {
    position: sticky;
    top: 0;
    color: #e6e5e1;
    padding: 60px clamp(24px, 4.5vw, 56px);
    font-size: clamp(.75rem, 3.5vw, 4rem);
    z-index: 2;
    text-align: right;
    word-spacing: 9999999px;
}

span:nth-of-type(2n + 1) .date {
    position: sticky;
    top: 0;
    color: #e6e5e1;
    padding: 60px clamp(24px, 4.5vw, 56px);
    font-size: clamp(.75rem, 3.5vw, 4rem);
    z-index: 2;
    word-spacing: 9999999px;
}

.small-date {
    padding-bottom: 24px;
}

.small-text {
    position: relative;
    color: #797158;
    padding-top: 24px;
}

.blue-text:has(h4)>.small-text::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0;
    width: clamp(60px, 7vw, 100px);
    height: 4px;
    background: #2e4259;
    padding-top: 24px;
    clip-path: polygon(0 0, 100% 0%, 100% 12%, 0 12%);
}
.blue-text:not(:has(h4))>.small-text {
    padding-top: 54px;
} 
.blue-text:not(:has(h4))>.headline::after {
    content: "";
    position: absolute;
    bottom: -32px;
    left: 0;
    width: clamp(60px, 7vw, 100px);
    height: 3px;
    background: #2e4259;
} 

.red-text:has(h4)>.small-text::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0;
    width: clamp(60px, 7vw, 100px);
    height: 4px;
    background: #6c3223;
    padding-top: 24px;
    clip-path: polygon(0 0, 100% 0%, 100% 10%, 0 10%);
}
.red-text:not(:has(h4))>.small-text {
    padding-top: 50px;
} 
.red-text:not(:has(h4))>.headline-red::after {
    content: "";
    position: absolute;
    bottom: -28px;
    left: 0;
    width: clamp(60px, 7vw, 100px);
    height: 2px;
    background: #6c3223;
} 

.green-text:has(h4)>.small-text::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0;
    width: clamp(60px, 7vw, 100px);
    height: 4px;
    background: #3d5743;
    padding-top: 24px;
    clip-path: polygon(0 0, 100% 0%, 100% 10%, 0 10%);
}
.green-text:not(:has(h4))>.small-text {
    padding-top: 50px;
} 
.green-text:not(:has(h4))>.headline-green::after {
    content: "";
    position: absolute;
    bottom: -28px;
    left: 0;
    width: clamp(60px, 7vw, 100px);
    height: 2px;
    background: #3d5743;
} 

.yellow-text:has(h4)>.small-text::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0;
    width: clamp(60px, 7vw, 100px);
    height: 4px;
    background: #5f4721;
    padding-top: 24px;
    clip-path: polygon(0 0, 100% 0%, 100% 10%, 0 10%);
}

.yellow-text:not(:has(h4))>.small-text {
    padding-top: 50px;
} 
.yellow-text:not(:has(h4))>.headline-yellow::after {
    content: "";
    position: absolute;
    bottom: -28px;
    left: 0;
    width: clamp(60px, 7vw, 100px);
    height: 2px;
    background: #5f4721;
} 

/* span:nth-of-type(2n) .headline::after,
span:nth-of-type(2n) .headline-red::after,
span:nth-of-type(2n) .headline-green::after,
span:nth-of-type(2n) .headline-yellow::after {
    content: "";
    position: absolute;
    bottom: -26px;
    left: 0;
    width: clamp(60px, 7vw, 100px);
    height: 4px;
}

span:nth-of-type(2n + 1) .headline::after,
span:nth-of-type(2n + 1) .headline-red::after,
span:nth-of-type(2n + 1) .headline-green::after,
span:nth-of-type(2n + 1) .headline-yellow::after {
    content: "";
    position: absolute;
    bottom: -26px;
    left: 0;
    width: clamp(60px, 7vw, 100px);
    height: 4px;
} */

.blue-container,
.red-container,
.green-container,
.yellow-container {
    display: grid;
}

.blue-block,
.red-block,
.green-block,
.yellow-block {
    width: 100%;
}

.blue-block {
    background: #2e4259;
}

.red-block {
    background: #6c3223;
}

.green-block {
    background: #3d5743;
}

.yellow-block {
    background: #5f4721;
}

.blue-text,
.red-text,
.green-text,
.yellow-text {
    padding-bottom: 48px;
    width: 100%;
    /* font-size: clamp(.75rem, 1.5vw, 2rem); */
    font-size: clamp(0.75rem, 1.25vw, 1.5rem);
    place-self: end;
}

.blue-text h4,
.red-text h4,
.green-text h4,
.yellow-text h4 {
    font-size: clamp(.75rem, 1.5vw, 2rem);
    /* font-size: clamp(0.75rem, 1.25vw, 1.5rem); */
    text-align: left;
    color: #201813;
    font-family: "Bebas Neue";
}

.blue-text {
    color: #2e4259;
}

.red-text {
    color: #6c3223;
}

.green-text {
    color: #3d5743;
}

.yellow-text {
    color: #5f4721;
}

.headline::after,
.headline-left::after {
    background-color: #2e4259;
}

.headline-red::after,
.headline-left-red::after {
    background-color: #6c3223;
}

.headline-green::after,
.headline-left-green::after {
    background-color: #3d5743;
}

.headline-yellow::after,
.headline-left-yellow::after {
    background-color: #5f4721;
}

.image {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 48px;
    object-fit: cover;
}

.image p {
    font-size: clamp(.75rem, .75vw, 1rem);
    padding: clamp(.25rem, .25vw, .5rem);
}

#bildtext {
    opacity: 0;
    position: fixed;
    bottom: 3vh;
    left: 50%;
    transform: translate(-50%, 0%);
    /* width: fit-content; */
    text-align: center;
    font-family: "IBM Plex light";
    color: white;
    font-size: 0.9vw;
    z-index: 9999;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.5);
    padding: clamp(.25rem, .25vw, .5rem);
    border-radius: 5px;
}

.bu2 {
    display: none;
    white-space: pre-line;
}

.gridcontainer img {
    /* margin-bottom: 48px; */
    max-width: 100%;
    /*  max-height: 38.2vh; */
}

.img-round img {
    border-radius: 60%;
    /* max-height: 38.2vh; */
    width: 100%;
    overflow: hidden;
}

.cropped-img {
    width: 25vw;
    max-height: clamp(336px, 61.8vh, 768px);
    /* object-fit: cover; */
    transition: object-fit 0.3s ease-in-out;
}

.cover {
    object-fit: cover;
}

.contain {
    object-fit: contain;
}

.fill {
    object-fit: fill;
}

.top {
    object-position: 50% 10%;
}

.grid-item-b1 {
    grid-area: b1;
}

.grid-item-b2 {
    grid-area: b2;
}

.grid-item-b3 {
    grid-area: b3;
}

.grid-item-b4 {
    grid-area: b4;
}

.grid-item-b5 {
    grid-area: b5;
}

.grid-item-b6 {
    grid-area: b6;
}

.grid-item-b7 {
    grid-area: b7;
}

.grid-item-b8 {
    grid-area: b8;
}

.grid-item-b9 {
    grid-area: b9;
}

.grid-item-b10 {
    grid-area: b10;
}

.grid-item-b11 {
    grid-area: b11;
}

.grid-item-b12 {
    grid-area: b12;
}

.grid-item-b13 {
    grid-area: b13;
}

.grid-item-b14 {
    grid-area: b14;
}

.grid-item-b15 {
    grid-area: b15;
}

.grid-item-b16 {
    grid-area: b16;
}

.grid-item-c1 {
    grid-area: c1;
}

.grid-item-c2 {
    grid-area: c2;
}

.grid-item-c3 {
    grid-area: c3;
}

.grid-item-c4 {
    grid-area: c4;
}

.grid-item-c5 {
    grid-area: c5;
}

.grid-item-c6 {
    grid-area: c6;
}

.grid-item-c7 {
    grid-area: c7;
}

.grid-item-c8 {
    grid-area: c8;
}

.grid-item-c9 {
    grid-area: c9;
}

.grid-item-c10 {
    grid-area: c10;
}

.grid-item-c11 {
    grid-area: c11;
}

.grid-item-c12 {
    grid-area: c12;
}

.grid-item-c13 {
    grid-area: c13;
}

.grid-item-c14 {
    grid-area: c14;
}

.grid-item-c15 {
    grid-area: c15;
}

.grid-item-c16 {
    grid-area: c16;
}

.extra-margin-red,
.extra-margin-yellow {
    /* Changed via JS */
    margin-top: 96px; /* 48px; HIER */
}

.gridcontainer-mobile {
    display: none;
}

.remove4mobile {
    display: grid;
}


.add4mobile {
    display: none;
}

#arrow-next {
    transform-origin: center;
    transform: scale(-1, 1);
    cursor: pointer;
    align-self: center;
}

#arrow-prev {
    /* transform-origin: center; */
    /* transform: scale(-1,1); */
    cursor: pointer;
}

#aktive2 {
    display: none;
}

.swiper {
    width: calc(25vw*0.99);
    height: auto;
    margin-bottom: -24px;
}

.swiper-slide {
    /* width: 100%;
    height: 100%; */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 24px;
}

.swiper-slide img {
    display: block;
    width: 100%;
}

.swiper-slide p {
    text-align: center;
}

.mySwiper-pic .swiper-wrapper {
    padding-bottom: 24px;
}

.swiper-pagination {
    display: flex !important;
    justify-content: flex-end;
}

.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: 8px !important;
}

.mobile-swipe {
    display: none;
}

#parallel-time {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    opacity: 0;
    display: flex;
    flex-direction: column-reverse;
    pointer-events: none;
}

.indicator-text {
    color: black;
    writing-mode: vertical-rl;
    margin: 12px 0px 12px 0px;
    transform: rotate(180deg);
    font-size: clamp(.75rem, 1.5vw, 1.5rem);
    font-family: "IBM Plex";
}

#indicator-blocks {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#blue-time {
    background: #2e4259;
    width: clamp(.75rem, 2vw, 1.5rem);
    height: 24px;
    opacity: 0.5;
}

#red-time {
    background: #6c3223;
    width: clamp(.75rem, 2vw, 1.5rem);
    height: 24px;
    opacity: 0.5;
}

#green-time {
    background: #3d5743;
    width: clamp(.75rem, 2vw, 1.5rem);
    height: 24px;
    opacity: 0.5;
}

#yellow-time {
    background: #5f4721;
    width: clamp(.75rem, 2vw, 1.5rem);
    height: 24px;
    opacity: 0.5;
}

@media (max-width: 1000px) and (orientation: landscape),
(max-width: 768px) {
    /*screen and*/

    :root {
        --afterDist: 30px;
        --mobile: 1;
    }

    #topicsGrid-mobile {
        position: fixed;
        display: none;
        top: 0;
        right: 0;
        bottom: 0;
        width: 5vw;
        background: black;
        color: white;
        opacity: 0;
        z-index: 5;
        cursor: pointer;
        padding: 1vw;
    }

    #topicsGrid-mobile-modal {
        display: none;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 4;
        background: black;
        opacity: 0.7;
    }

    #arrow-mobile {
        position: absolute;
        top: 10px;
        left: calc(2.5vw - 20px);
        transform: rotateY(0deg);
    }

    #aktive2 {
        /*  grid-row: 1;
        grid-column: 1; */
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        align-items: start;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        font-size: 2.5vw;

    }

    #cats-mobile {
        display: none;
        position: absolute;
        right: 50%;
        top: 50%;
        transform: translate(50%, -50%);
        flex-direction: column;
        gap: 10vh;
        text-align: right;
        white-space: nowrap;
        width: 25vw;
    }

    #headline {
        /* margin: 48px 1em; */
        font-size: clamp(3vw, 4.02vw, 5vw);
        text-align: left;
        margin-left: 9.5vw;
    }

    #politischeEreignisse2 {
        position: relative;
        cursor: pointer;
        filter: opacity(1);
        color: #e6e5e1;
        background: #2e4259;
        width: 100%;
        justify-content: center;
        font-family: "Bebas Neue";
        text-align: center;
        transform: scale(1.5);
        padding: .25rem;
    }

    #ankaufMannheim2 {
        position: relative;
        cursor: pointer;
        filter: opacity(1);
        color: #e6e5e1;
        background: #5f4721;
        width: 100%;
        justify-content: center;
        font-family: "Bebas Neue";
        text-align: center;
        transform: scale(1.5);
        padding: .25rem;
    }

    #werkprovenienz2 {
        position: relative;
        cursor: pointer;
        filter: opacity(1);
        color: #e6e5e1;
        background: #3d5743;
        width: 100%;
        justify-content: center;
        font-family: "Bebas Neue";
        text-align: center;
        transform: scale(1.5);
        padding: .25rem;
    }

    #werkgenese2 {
        position: relative;
        cursor: pointer;
        filter: opacity(1);
        color: #e6e5e1;
        background: #6c3223;
        width: 100%;
        justify-content: center;
        font-family: "Bebas Neue";
        text-align: center;
        transform: scale(1.5);
        padding: .25rem;
    }

    .small-date {
        padding-bottom: 0;
    }

    .small-text {
        padding-top: .5rem!important;
    }

    .small-text::after {
        display: none;
    }

    .headline::after,
    .headline-red::after,
    .headline-green::after,
    .headline-yellow::after {
        display: none;
    }


    .blue-text h4,
    .red-text h4,
    .green-text h4,
    .yellow-text h4 {
        font-size: clamp(1rem, 2.1vw, 2rem);
        /* font-size: clamp(0.75rem, 1.25vw, 1.5rem); */
        text-align: left;
        color: #201813;
        font-family: "Bebas Neue";
        line-height: 1rem;
    }

    .image p{
        text-align: center;
    }

    /* #politischeEreignisse2::after {
        position: absolute;
        content: "";
        top: -10%;
        left: calc(100% + 1vw);
        height: 120%;
        width: 10px;
        background: #2e4259;
        cursor: pointer;
    } */


    /* #werkgenese2::after {
        position: absolute;
        content: "";
        top: -10%;
        left: calc(100% + 1vw);
        height: 120%;
        width: 10px;
        background: #6c3223;
    } */


    /* #werkprovenienz2::after {
        position: absolute;
        content: "";
        top: -10%;
        left: calc(100% + 1vw);
        height: 120%;
        width: 10px;
        background: #3d5743;
    } */

    /* #ankaufMannheim2::after {
        position: absolute;
        content: "";
        top: -10%;
        left: calc(100% + 1vw);
        height: 120%;
        width: 10px;
        background: #5f4721;
    } */


    .gridcontainer {
        display: grid;
        width: 95vw;
        grid-template-columns: 0.25fr 1fr 0.1fr 1fr 0.25fr;
        grid-template-rows: repeat(13, minmax(0px, auto));
        /* margin-bottom: 12px; */
        place-items: center;
        align-items: end;
        justify-items: center;
        margin-left: 0;
        margin-bottom: 0px;
    }

    .gridcontainer-mobile {
        display: grid;
        width: 95vw !important;
        grid-template-columns: 0.25fr 1fr 0.1fr 1fr 0.25fr;
        grid-template-rows: repeat(13, minmax(0px, auto));
        /* margin-bottom: 12px; */
        place-items: center;
        align-items: end;
        justify-items: center;
        margin-bottom: 0px;
        grid-template-areas:
            ". a e . d"
            ". b1 . c1 ."
            ". b2 . c2 ."
            ". b3 . c3 ."
            ". b4 . c4 ."
            ". b5 . c5 ."
            ". b6 . c6 ."
            ". b7 . c7 ."
            ". b8 . c8 ."
            ". b9 . c9 ."
            ". b10 . c10 ."
            ". b11 . c11 ."
            ". b12 . c12 ."
            ". b13 . c13 .";
    }

    .mobile-swipe {
        display: flex;
        /*z-index: 7 !important;*/
    }

    .gridcontainer-mobile-swipe {
        display: grid;
        grid-template-columns: 0.15fr 0.1fr 1fr 0.1fr 1fr 0.25fr;
        grid-template-rows: repeat(13, minmax(0px, auto));
        width: 95vw !important;
        margin-bottom: 12px;
        place-items: center;
        align-items: center;
        justify-items: center;
        grid-template-areas:
            ". f a e . d"
            ". . b1 . c1 ."
            ". . b2 . c2 ."
            ". . b3 . c3 ."
            ". . b4 . c4 ."
            ". . b5 . c5 ."
            ". . b6 . c6 ."
            ". . b7 . c7 ."
            ". . b8 . c8 ."
            ". . b9 . c9 ."
            ". . b10 . c10 ."
            ". . b11 . c11 ."
            ". . b12 . c12 ."
            ". . b13 . c13 .";

    }

    .gridcontainer-mobile .grid-item-a,
    .gridcontainer-mobile-swipe .grid-item-a {
        grid-area: a;
    }

    .gridcontainer-mobile .date,
    .gridcontainer-mobile-swipe .date {
        padding: 12px;
        text-align: center;
        word-spacing: 1vw;
        position: sticky;
        top: 0;
        color: #e6e5e1;
        font-size: clamp(.75rem, 4vw, 4rem);
        z-index: 2;
        word-spacing: 5px;
    }

    span:nth-of-type(2n + 1) {
        grid-template-areas:
            ". a . . d"
            ". b1 . c1 ."
            ". b2 . c2 ."
            ". b3 . c3 ."
            ". b4 . c4 ."
            ". b5 . c5 ."
            ". b6 . c6 ."
            ". b7 . c7 ."
            ". b8 . c8 ."
            ". b9 . c9 ."
            ". b10 . c10 ."
            ". b11 . c11 ."
            ". b12 . c12 ."
            ". b13 . c13 .";
    }

    span:nth-of-type(2n) {
        grid-template-areas:
            ". a . . d"
            ". b1 . c1 ."
            ". b2 . c2 ."
            ". b3 . c3 ."
            ". b4 . c4 ."
            ". b5 . c5 ."
            ". b6 . c6 ."
            ". b7 . c7 ."
            ". b8 . c8 ."
            ". b9 . c9 ."
            ". b10 . c10 ."
            ". b11 . c11 ."
            ". b12 . c12 ."
            ". b13 . c13 .";
    }


    .grid-item-d {
        grid-area: d;
        padding: 12px;
        font-size: clamp(.75rem, 4vw, 4rem);
    }

    .grid-item-e {
        grid-area: e;
    }

    .grid-item-f {
        grid-area: f;
    }

    span:nth-of-type(2n + 1) .grid-item-a {
        grid-area: a;
    }

    span:nth-of-type(2n) .grid-item-a {
        grid-area: a;
        /*row-start column-start row-end column-end*/
    }

    span:nth-of-type(2n) .date,
    span:nth-of-type(2n + 1) .date {
        padding: 12px;
        text-align: center;
        word-spacing: 1vw;
    }

    span:nth-of-type(2n + 1) .blue-text,
    span:nth-of-type(2n + 1) .red-text,
    span:nth-of-type(2n + 1) .green-text,
    span:nth-of-type(2n + 1) .yellow-text,
    span:nth-of-type(2n) .blue-text,
    span:nth-of-type(2n) .red-text,
    span:nth-of-type(2n) .green-text,
    span:nth-of-type(2n) .yellow-text {
        text-align: left;
        place-self: end;
    }

    span:nth-of-type(2n) .blue-text,
    span:nth-of-type(2n) .red-text,
    span:nth-of-type(2n) .green-text,
    span:nth-of-type(2n) .yellow-text {
        text-align: left;
        place-self: end;
    }

    .image {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        /* margin: 24px 0px; */
        margin-bottom: 24px;
        width: 36.33vw;
        /* max-height: 61.8vh; */
    }

    .cropped-img {
        max-width: 36vw;
        /* max-height: 50vh; */
        margin-top: 24px;

        /* max-height: clamp(96px, 61.8vh, 360px); */
    }

    .cropped-img2 {
        max-width: 36vw;
        margin-top: 24px;
        /* max-height: clamp(96px, 61.8vh, 360px); */
    }

    .zoom-swipe{
        margin-top: 24px;
    }

    .cover {
        object-fit: cover;
    }

    .contain {
        object-fit: contain;
    }

    .fill {
        object-fit: fill;
    }

    .top {
        object-position: 50% 10%;
    }

    .gridcontainer img {
        /* margin-top: 24px; */
        /* object-fit: cover;
        width: 100%;
        max-height: 100%; */
    }

    .img-round img {
        border-radius: 60%;
        max-height: 38.2vh;
        width: auto;
    }


    .headline,
    .headline-red,
    .headline-green,
    .headline-yellow {
        position: relative;
        /* margin-bottom: 24px; */
    }

    span:nth-of-type(2n + 1) .headline::after,
    span:nth-of-type(2n + 1) .headline-red::after,
    span:nth-of-type(2n + 1) .headline-green::after,
    span:nth-of-type(2n + 1) .headline-yellow::after,
    span:nth-of-type(2n) .headline::after,
    span:nth-of-type(2n) .headline-red::after,
    span:nth-of-type(2n) .headline-green::after,
    span:nth-of-type(2n) .headline-yellow::after,
    .headline::after,
    .headline-red::after,
    .headline-green::after,
    .headline-yellow::after {
        /* content: "";
        position: absolute;
        bottom: -22px;
        left: 0;
        width: clamp(60px, 7vw, 100px);
        height: 4px; */
    }

    .blue-text,
    .red-text,
    .green-text,
    .yellow-text {
        padding: 24px 0px;
        width: 100%;
        font-size: clamp(1rem, 1.75vw, 2rem);
        place-self: end;
    }

    #blackstripe {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 95vw;
        height: 2vw;
        background-color: black;
        /*  #413836; */
        opacity: 0;
        z-index: 3;
    }

    #blackstripe::after {
        /* DEVMODE display: none; */
        content: '';
        position: fixed;
        top: 2vw;
        left: 0;
        right: 0;
        width: 95vw;
        height: calc(clamp(.75rem, 2vw, 1.5rem) + 4px);
        background-color: #e6e5e1;
        z-index: 2;
        filter: drop-shadow(1px 2px 0.1rem rgba(100, 100, 111, 0.33));
    }

    #dates {
        position: fixed;
        /* display: flex; */
        display: none;
        flex-direction: row;
        align-items: baseline;
        justify-content: space-around;
        top: 2vw;
        width: 90vw;
        left: 2.5vw;
        right: 2.5vw;
        height: clamp(.75rem, 1.5vh, 1.5rem);
        /* font-size: 1rem; */
        font-size: clamp(.75rem, 2vw, 1.5rem);
        z-index: 3;
    }

    #dates p {
        position: relative;
        color: black;
        writing-mode: horizontal-tb;
        cursor: pointer;
    }

    #dates p[data-active="true"]::after {
        content: '';
        position: absolute;
        top: -0.5vw;
        left: 0;
        background: #e6e5e1;
        width: 100%;
        height: 25%;

    }

    .remove4mobile {
        display: none;
    }

    .add4mobile {
        display: grid;
    }

    .grid-item-a-test {
        display: none;
    }

    .swiper {
        width: 100%;
        height: 100%;
    }

    .swiper-wrapper {
        align-items: flex-end
    }

    .swiper-slide {
        margin-right: 5vw;
    }

    .mySwiper-pic .swiper-slide {
        margin-right: 0vw;
        padding-bottom: 0px;
    }

    .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #parallel-time {
        position: fixed;
        top: 50%;
        left: 0;
        transform: translate(0, -50%);
        opacity: 0;
        flex-direction: column-reverse;
    }

    .indicator-text {
        color: black;
        writing-mode: vertical-rl;
        margin: 6px 0px 6px -2px;
        /* transform: rotate(0deg); */
        font-size: clamp(.75rem, 1.5vw, 1.75rem);
        /* font-size: 0.5rem; */
        z-index: 9;
    }

    #indicator-blocks {
        align-items: flex-start;
    }

    #blue-time,
    #red-time,
    #green-time,
    #yellow-time {
        width: clamp(.75rem, 1.5vw, 1.75rem);
        height: clamp(.75rem, 1.5vw, 1.75rem);
    }

    #bildtext {
        font-size: 1.75vw;
    }

    #order {
        display: none;
        margin: 24px 0;
    }

    #higher-order {
        display: grid;
        width: 95vw;
        margin-left: 0;
        justify-content: start;
        height: 100%;
        grid-template-columns: 0.25fr 1fr 0.1fr 1fr 0.25fr;
    }

    #headline {
        margin-left: 0;
        color: #413836;
        scroll-margin: 48px;
        font-size: clamp(2rem, 3.02vw, 4rem);
        text-align: left;
        color: #413836;
        font-weight: 300;
        font-family: "Bebas Neue";
    }

    #order-text {
        font-size: clamp(.45rem, .75vw, 1rem);
        margin-right: 0;
    }
}