/* Hasching Slideshow 1.0.12 | 23.10.2026 */
.haschingSlideshow {
    --hasching-slideshow-height: var(--hasching-slideshow-height-desktop, 440px);
    --hasching-slideshow-radius: var(--wcfBorderRadiusContainer, 10px);
    --hasching-slideshow-transition: 450ms;
    --hasching-slideshow-gap: clamp(10px, 1.25vw, 18px);
    position: relative;
    width: 100%;
    color: var(--wcfContentText, currentColor);
}

/* Slider 1.0.10: transform-based track for deterministic visible transitions. */
.haschingSlideshow__viewport {
    position: relative;
    overflow: hidden;
    height: var(--hasching-slideshow-height);
    min-height: var(--hasching-slideshow-height);
    border-radius: var(--hasching-slideshow-radius);
    background: var(--wcfContentContainerBackground, transparent);
    isolation: isolate;
}

.haschingSlideshow__track {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: visible;
    touch-action: pan-y;
    transform: translate3d(0, 0, 0);
    transition-property: transform;
    transition-duration: var(--hasching-slider-duration, 600ms);
    transition-timing-function: cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}


/* WAAPI overlay effects: fade and modern lift. */
.haschingSlideshow--engine-fade .haschingSlideshow__track,
.haschingSlideshow--engine-lift .haschingSlideshow__track {
    position: relative;
    display: block;
    transform: none !important;
    transition: none !important;
}

.haschingSlideshow--engine-fade .haschingSlideshow__slide,
.haschingSlideshow--engine-lift .haschingSlideshow__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
}

.haschingSlideshow--engine-fade .haschingSlideshow__slide.is-active,
.haschingSlideshow--engine-lift .haschingSlideshow__slide.is-active {
    opacity: 1;
    z-index: 2;
}

.haschingSlideshow--engine-fade .haschingSlideshow__media,
.haschingSlideshow--engine-lift .haschingSlideshow__media {
    transform: none !important;
}

.haschingSlideshow__track--instant {
    transition-duration: 0ms !important;
}

.haschingSlideshow__slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

.haschingSlideshow__slide.is-active {
    z-index: 2;
}

.haschingSlideshow__media {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
}

.haschingSlideshow__media > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none;
    backface-visibility: hidden;
}

.haschingSlideshow__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: clamp(18px, 3vw, 42px);
    background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .36) 42%, rgba(0, 0, 0, .05) 70%, transparent 100%);
}

.haschingSlideshow--text-bottomCenter .haschingSlideshow__overlay {
    justify-content: center;
    text-align: center;
}

.haschingSlideshow--text-center .haschingSlideshow__overlay {
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(to top, rgba(0, 0, 0, .54), rgba(0, 0, 0, .22));
}

.haschingSlideshow__content {
    max-width: 780px;
    color: #fff;
    opacity: 1;
    transform: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .72);
}

.haschingSlideshow--glass .haschingSlideshow__content {
    padding: clamp(12px, 1.7vw, 22px);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: calc(var(--hasching-slideshow-radius) * .8);
    background: rgba(10, 15, 18, .58);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .14);
}

.haschingSlideshow__title {
    margin: 0;
    font-size: clamp(1.2rem, 2vw, 2rem);
    font-weight: 650;
    line-height: 1.14;
    color: #fff;
}

.haschingSlideshow__text {
    margin: .5rem 0 0;
    max-width: 65ch;
    font-size: clamp(.92rem, 1.12vw, 1.04rem);
    line-height: 1.45;
    white-space: pre-line;
}

.haschingSlideshow__button {
    display: inline-flex;
    margin-top: .85rem;
}

.haschingSlideshow__arrow {
    position: absolute;
    top: 50%;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    transform: translate3d(0, -50%, 0);
    background: rgba(8, 12, 14, .56);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
    transition: background-color 180ms ease, transform 180ms ease;
}

.haschingSlideshow__arrow:hover,
.haschingSlideshow__arrow:focus-visible {
    background: rgba(8, 12, 14, .76);
    transform: translate3d(0, -50%, 0) scale(1.04);
}

.haschingSlideshow__arrow--previous { left: 14px; }
.haschingSlideshow__arrow--next { right: 14px; }

.haschingSlideshow__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 38px;
    margin-top: 8px;
    color: var(--wcfContentText, currentColor);
}

.haschingSlideshow__dots {
    display: flex;
    align-items: center;
    gap: 7px;
}

.haschingSlideshow__dot,
.haschingSlideshow__pause {
    border: 0;
    cursor: pointer;
    color: var(--wcfContentText, currentColor);
}

.haschingSlideshow__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--wcfContentText, currentColor) 30%, transparent);
    transition: transform 180ms ease, background-color 180ms ease;
}

.haschingSlideshow__dot.is-active {
    transform: scale(1.25);
    background: var(--wcfButtonPrimaryBackground, var(--wcfContentLink, currentColor));
}

.haschingSlideshow__pause {
    display: grid;
    place-items: center;
    min-width: 30px;
    min-height: 30px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
}

.haschingSlideshow__pause:hover,
.haschingSlideshow__pause:focus-visible {
    background: color-mix(in srgb, var(--wcfContentText, currentColor) 9%, transparent);
}

.haschingSlideshow[data-single-slide='true'] .haschingSlideshow__arrow,
.haschingSlideshow[data-single-slide='true'] .haschingSlideshow__controls {
    display: none;
}

/* Bento and Collage share the same image card primitives. */
.haschingGallery {
    width: 100%;
    min-height: var(--hasching-slideshow-height);
}

.haschingGallery__item {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--hasching-slideshow-radius);
    background: var(--wcfContentContainerBackground, transparent);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
    isolation: isolate;
}

.haschingGallery__media,
.haschingGallery__media > img {
    display: block;
    width: 100%;
    height: 100%;
}

.haschingGallery__media {
    position: relative;
    color: inherit;
    text-decoration: none;
}

.haschingGallery__media > img {
    object-fit: cover;
    transform: scale(1);
    transition: transform 420ms cubic-bezier(.2,.7,.2,1), filter 420ms ease;
}

.haschingSlideshow--hover .haschingGallery__item:hover .haschingGallery__media > img,
.haschingSlideshow--hover .haschingGallery__item:focus-within .haschingGallery__media > img {
    transform: scale(1.045);
}

.haschingGallery__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: clamp(12px, 1.6vw, 22px);
    background: linear-gradient(to top, rgba(0, 0, 0, .76), rgba(0, 0, 0, .18) 55%, transparent 78%);
}

.haschingSlideshow--text-bottomCenter .haschingGallery__overlay {
    justify-content: center;
    text-align: center;
}

.haschingSlideshow--text-center .haschingGallery__overlay {
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(0, 0, 0, .28);
}

.haschingGallery__content {
    max-width: 42rem;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}

.haschingSlideshow--glass .haschingGallery__content {
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: calc(var(--hasching-slideshow-radius) * .7);
    background: rgba(10, 15, 18, .4);
}

.haschingGallery__title {
    margin: 0;
    color: #fff;
    font-size: clamp(1rem, 1.4vw, 1.35rem);
    line-height: 1.2;
    font-weight: 650;
}

.haschingGallery__text {
    margin: .35rem 0 0;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: .92rem;
    line-height: 1.35;
}

.haschingGallery__button {
    display: inline-flex;
    margin-top: .65rem;
}

/* Bento: one dominant story plus up to four compact teasers. */
.haschingGallery--bento {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, calc((var(--hasching-slideshow-height) - var(--hasching-slideshow-gap)) / 2)));
    grid-auto-flow: dense;
    gap: var(--hasching-slideshow-gap);
}

.haschingGallery--bento .haschingGallery__item:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

/* Collage: editorial, overlapping photo prints. */
.haschingGallery--collage {
    position: relative;
    overflow: hidden;
    height: var(--hasching-slideshow-height);
    border-radius: var(--hasching-slideshow-radius);
    background:
        radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--wcfButtonPrimaryBackground, var(--wcfContentLink, currentColor)) 12%, transparent), transparent 38%),
        var(--wcfContentContainerBackground, transparent);
}

.haschingGallery--collage .haschingGallery__item {
    position: absolute;
    height: auto;
    aspect-ratio: 4 / 3;
    border: 1px solid color-mix(in srgb, var(--wcfContentText, currentColor) 14%, transparent);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .19);
    transition: transform 360ms cubic-bezier(.2,.7,.2,1), box-shadow 360ms ease, z-index 0s;
}

.haschingGallery--collage .haschingGallery__item:nth-child(1) { left: 4%; top: 10%; width: 29%; transform: rotate(-2.5deg); z-index: 2; }
.haschingGallery--collage .haschingGallery__item:nth-child(2) { left: 34%; top: 7%; width: 34%; transform: rotate(2deg); z-index: 4; }
.haschingGallery--collage .haschingGallery__item:nth-child(3) { right: 6%; top: 9%; width: 21%; transform: rotate(-4deg); z-index: 3; }
.haschingGallery--collage .haschingGallery__item:nth-child(4) { right: 4%; bottom: 5%; width: 27%; transform: rotate(5deg); z-index: 5; }
.haschingGallery--collage .haschingGallery__item:nth-child(5) { left: 10%; bottom: 3%; width: 18%; transform: rotate(-6deg); z-index: 3; }
.haschingGallery--collage .haschingGallery__item:nth-child(n+6) { display: none; }

.haschingSlideshow--hover .haschingGallery--collage .haschingGallery__item:hover,
.haschingSlideshow--hover .haschingGallery--collage .haschingGallery__item:focus-within {
    transform: rotate(0deg) scale(1.035);
    box-shadow: 0 24px 55px rgba(0, 0, 0, .26);
    z-index: 10;
}

@media (max-width: 900px) {
    .haschingSlideshow {
        --hasching-slideshow-height: var(--hasching-slideshow-height-mobile, 300px);
    }

    .haschingSlideshow__overlay {
        padding: 18px;
    }

    .haschingSlideshow__text {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .haschingSlideshow__arrow {
        width: 38px;
        height: 38px;
    }

    .haschingGallery--bento,
    .haschingGallery--collage {
        display: flex;
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        height: auto;
        min-height: 0;
        gap: 12px;
        padding: 2px 2px 10px;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        background: transparent;
    }

    .haschingGallery--bento .haschingGallery__item,
    .haschingGallery--bento .haschingGallery__item:first-child,
    .haschingGallery--collage .haschingGallery__item,
    .haschingGallery--collage .haschingGallery__item:nth-child(n) {
        display: block;
        position: relative;
        inset: auto;
        flex: 0 0 min(84vw, 540px);
        width: auto;
        height: var(--hasching-slideshow-height);
        aspect-ratio: auto;
        transform: none;
        scroll-snap-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .haschingSlideshow[data-respect-reduced-motion='true'] .haschingSlideshow__slide,
    .haschingSlideshow[data-respect-reduced-motion='true'] .haschingSlideshow__media > img,
    .haschingSlideshow[data-respect-reduced-motion='true'] .haschingSlideshow__content,
    .haschingSlideshow[data-respect-reduced-motion='true'] .haschingSlideshow__dot,
    .haschingSlideshow[data-respect-reduced-motion='true'] .haschingGallery__item,
    .haschingSlideshow[data-respect-reduced-motion='true'] .haschingGallery__media > img {
        transition: none !important;
    }

    .haschingSlideshow[data-respect-reduced-motion='true'] .haschingSlideshow__slide.is-active .haschingSlideshow__media > img,
    .haschingSlideshow[data-respect-reduced-motion='true'].haschingSlideshow--hover .haschingGallery__item:hover .haschingGallery__media > img {
        transform: none;
    }
}
