.carousel {position: relative;}
.carousel ul {overflow: auto; display: flex; flex-wrap: nowrap; gap: 2px; scroll-snap-type: x mandatory; scroll-snap-points-y: repeat(100%); scroll-behavior: smooth; background: white; -ms-overflow-style: none; scrollbar-width: none; margin: 0; padding: 0;}
.carousel ul::-webkit-scrollbar {display: none; /* Hide scrollbar for Chrome, Safari and Opera */} 
.carousel ul li {position: relative; min-width: 100%; list-style: none; background: url() center center / cover no-repeat; scroll-snap-align: start;}
.carousel ul li > * {position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.carousel ul li > img {object-fit: cover;}
.carousel ul li > div {display: flex; justify-content: center; align-items: center; color: transparent; font-weight: normal; font-size: 8rem;font-family: "SchulbuchNord-Fett", sans-serif; -webkit-text-stroke: 2px white; padding: 2rem; line-height: 0.9;}
.carousel ol {position: absolute; bottom: 0; justify-content: flex-start; left: 50%; transform: translateX(-50%); z-index: 9; margin-bottom: -3.15rem; width: 100%; display: none; margin-left: -0.5rem;}
.carousel ol li {list-style: none; padding: 0.5rem; position: relative;}
.carousel ol li a::after {content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: transparent; cursor: pointer; z-index: 3;}
.carousel ol li a {display: block; height: 1rem; width: 1rem; border: 0.15rem solid #231f20; background: white;}
.carousel ol li.selected a {background: #231f20;}
.carousel .prev, .carousel .next {display: none; user-select:none; cursor: pointer; font-size: 0; color: transparent; position: absolute; left: 0; padding: 25px; top: 50%; transform: translateY(-50%); z-index: 9; line-height: 0; margin-left: -60px;}
.carousel .next {left: auto; right: 0; margin-left: 0; margin-right: -60px;}
.carousel .prev::after, .carousel .next::after {
    content: "";
    background: transparent;
    height: 30px; 
    width: 30px;
    position: absolute;
    left: 0;
    top: 50%;
    border: 3px solid #231f20;
    border-left: 0;
    border-top: 0;
}
.carousel .next::after {
    left: auto; right: 0; transform: translate(calc(-50% - 12px), -50%) rotate(-45deg);
}
.carousel .prev::after {
    transform: translate(calc(50% + 12px), -50%) rotate(135deg);
}