:root {
    --gap: 24px;
    --radius: 18px;
    --height: 520px;

    --duration: 650ms;
    --ease: cubic-bezier(.22, .61, .36, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}



.demo-shell {
    width: min(1500px, 100%);
    margin: 0 auto;
    padding: 32px;
}
.jg-badge,.jg-title,.jg-link{
    color: var(--weiss)!important;
}

.demo-note {
    margin: 0 0 20px;

    color: #cbd5e1;
    font-size: 14px;
    line-height: 1.5;
}

/* ==========================================================
   SLIDER
   ========================================================== */

.jg-slider {
	position: relative;
	overflow: hidden;
	padding: 40px 64px 60px;
	background: var(--bg);
	margin-top: 70px;
}

.jg-slider__headline {
    margin: 0 0 28px;

    font-size: clamp(28px, 3vw, 44px);
    font-weight: 800;
    line-height: 1.1;
}

.jg-slider__viewport {
    position: relative;

    height: var(--height);
    overflow: hidden;

    touch-action: pan-y;
    user-select: none;
}

.jg-slider__stage {
    position: relative;

    width: 100%;
    height: 100%;
}

/* ==========================================================
   SLIDE BASE
   ========================================================== */

.jg-slider__slide {
    position: absolute;
    top: 0;
    left: calc(100% + var(--gap));

    width: calc(25% - (var(--gap) * .75));
    height: 100%;

    opacity: 0;
    pointer-events: none;

    transform: translateX(40px) scale(.96);

    transition:
        left var(--duration) var(--ease),
        width var(--duration) var(--ease),
        opacity 300ms ease,
        transform var(--duration) var(--ease);

    will-change:
        left,
        width,
        transform,
        opacity;
}

/*
 * Wird kurzfristig durch JavaScript gesetzt,
 * damit die Eintrittsposition ohne Animation vorbereitet wird.
 */
.jg-slider__slide.is-no-transition {
    transition: none !important;
}

/* ==========================================================
   VISIBLE POSITIONS
   ========================================================== */

/*
 * 50 %
 */
.jg-slider__slide.is-active {
    left: 0;

    width: calc(50% - (var(--gap) / 2));

    opacity: 1;
    transform: translateX(0) scale(1);

    z-index: 3;
}

/*
 * Erste kleine Karte: 25 %
 */
.jg-slider__slide.is-next-1 {
    left: calc(50% + (var(--gap) / 2));

    width: calc(25% - (var(--gap) * .75));

    opacity: 1;
    transform: translateX(0) scale(1);

    z-index: 2;
}

/*
 * Zweite kleine Karte: 25 %
 */
.jg-slider__slide.is-next-2 {
    left: calc(75% + (var(--gap) / 4));

    width: calc(25% - (var(--gap) * .25));

    opacity: 1;
    transform: translateX(0) scale(1);

    z-index: 1;
}

/* ==========================================================
   OUTSIDE POSITIONS
   ========================================================== */

/*
 * Vorheriger Slide liegt außerhalb links.
 */
.jg-slider__slide.is-prev {
    left: calc(-50% - var(--gap));

    width: calc(50% - (var(--gap) / 2));

    opacity: 0;
    transform: translateX(-40px) scale(.96);

    z-index: 0;
}

/*
 * Alle übrigen Slides liegen außerhalb rechts.
 */
.jg-slider__slide.is-out {
    left: calc(100% + var(--gap));

    width: calc(25% - (var(--gap) * .75));

    opacity: 0;
    transform: translateX(40px) scale(.96);

    z-index: 0;
}

/* ==========================================================
   ENTERING POSITIONS
   ========================================================== */

/*
 * Klick auf Next:
 * Der neue dritte Slide startet rechts außerhalb.
 */
.jg-slider__slide.is-entering-right {
    left: calc(100% + var(--gap));

    width: calc(25% - (var(--gap) * .75));

    opacity: 0;
    transform: translateX(40px) scale(.96);

    pointer-events: none;
    z-index: 0;
}

/*
 * Klick auf Previous:
 * Der neue aktive Slide startet links außerhalb.
 */
.jg-slider__slide.is-entering-left {
    left: calc(-50% - var(--gap));

    width: calc(50% - (var(--gap) / 2));

    opacity: 0;
    transform: translateX(-40px) scale(.96);

    pointer-events: none;
    z-index: 0;
}

/* ==========================================================
   POINTER EVENTS
   ========================================================== */

/*
 * Die Slide-Container selbst blockieren die Pfeile nicht.
 */
.jg-slider__slide {
    pointer-events: none;
}

/*
 * Nur sichtbare Karten sind klickbar.
 */
.jg-slider__slide.is-active .jg-card,
.jg-slider__slide.is-next-1 .jg-card,
.jg-slider__slide.is-next-2 .jg-card {
    pointer-events: auto;
}

/* ==========================================================
   CARD
   ========================================================== */

.jg-card {
    position: relative;

    display: block;
    width: 100%;
    height: 100%;

    overflow: hidden;
    border-radius: var(--radius);

    background: #23304a;
    color: var(--weiss);
    text-decoration: none;

    pointer-events: none;

    transform: translateY(0);

    transition:
        transform 250ms ease;
}

.jg-card:hover {
    transform: translateY(-4px);
}

.jg-card__inner {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;
    border-radius: inherit;
}

/* ==========================================================
   IMAGE
   ========================================================== */

.jg-card__image {
    position: absolute;
    inset: 0;
    z-index: 0;

    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform 900ms ease;
}

.jg-card__inner picture {
    position: absolute;
    inset: 0;
    z-index: 0;

    display: block;
    width: 100%;
    height: 100%;
}

.jg-card__inner picture img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.jg-card:hover .jg-card__image,
.jg-card:hover picture img {
    transform: scale(1.03);
}

.jg-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            to top,
            rgba(10, 18, 35, .92) 0%,
            rgba(10, 18, 35, .25) 55%,
            rgba(10, 18, 35, .06) 100%
        );

    pointer-events: none;
}

/* ==========================================================
   BADGE
   ========================================================== */

.jg-badge {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 2;

    padding: 8px 18px;
    border-radius: 999px;

    background: var(--badge, var(--badge-green));

    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
}

.jg-badge.news {
    background: var(--badge-green);
}

.jg-badge.galerie {
    background: var(--violet-base);
}

.jg-badge.website {
    background: var(--orange-base);
}

/* ==========================================================
   CONTENT
   ========================================================== */

.jg-content {
    position: absolute;
    inset: 0;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 26px;

    transition:
        padding var(--duration) var(--ease);
}

.jg-slider__slide.is-active .jg-content {
    padding: 36px 42px 32px;
}

.jg-kicker {
    margin: 0 0 10px;

    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: .08em;
    text-transform: uppercase;

    opacity: .9;
}

.jg-title {
    max-width: 18ch;
    margin: 0 0 18px;

    font-size: clamp(24px, 2.2vw, 34px);
    font-weight: 800;
    line-height: 1.04;
    text-wrap: balance;

    transition:
        font-size var(--duration) var(--ease),
        max-width var(--duration) var(--ease),
        margin-bottom var(--duration) var(--ease),
        color 200ms ease;
}

.jg-slider__slide.is-active .jg-title {
    max-width: 16ch;
    margin-bottom: 24px;

    font-size: clamp(38px, 4.2vw, 60px);
}

.jg-card:hover .jg-title {
    color: var(--orange-base)!important;
}

.jg-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
}

.jg-link svg {
    flex: 0 0 auto;

    transition:
        transform 220ms ease;
}

.jg-card:hover .jg-link svg {
    transform: translateX(6px);
}

/* ==========================================================
   ARROWS
   ========================================================== */

.jg-slider__arrows {
    position: absolute;
    inset: 0;
    z-index: 20;

    pointer-events: none;
}

.jg-slider__arrow {
    position: absolute;
    top: 50%;
    z-index: 21;

    width: 52px;
    height: 52px;

    border: 0;
    border-radius: 50%;

    background: var(--weiss);
    color: #0a1223;

    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);

    cursor: pointer;
    pointer-events: auto;

    transform: translateY(-50%);

    transition:
        background-color 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}

.jg-slider__arrow:hover {
    background: var(--orange-base);
    color: var(--weiss);

    transform:
        translateY(-50%)
        scale(1.05);
}

.jg-slider__arrow--prev {
    left: 20px;
}

.jg-slider__arrow--next {
    right: 20px;
}

/* ==========================================================
   PAGINATION
   ========================================================== */

.js-jg-pagination,
.jg-slider__pagination {
    display: flex;
    justify-content: center;
    gap: 8px;

    margin-top: 20px;
}

.jg-slider__pagination-button {
    width: 24px;
    height: 6px;
    padding: 0;

    border: 0;
    border-radius: 999px;

    background: rgba(255, 255, 255, .28);

    cursor: pointer;

    transition:
        width 220ms ease,
        background-color 220ms ease;
}

.jg-slider__pagination-button.is-active {
    width: 42px;

    background: var(--weiss);
}

/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1100px) {
    :root {
        --height: 470px;
        --gap: 18px;
    }

    .jg-slider {
        padding-inline: 32px;
    }

    .jg-slider__slide.is-active {
        left: 0;

        width: calc(60% - (var(--gap) / 2));
    }

    .jg-slider__slide.is-next-1 {
        left: calc(60% + (var(--gap) / 2));

        width: calc(40% - (var(--gap) / 2));
    }

    .jg-slider__slide.is-next-2 {
        left: calc(100% + var(--gap));

        width: 40%;

        opacity: 0;
        pointer-events: none;

        transform: translateX(40px) scale(.96);
    }

    .jg-slider__slide.is-entering-right,
    .jg-slider__slide.is-out {
        left: calc(100% + var(--gap));
    }

    .jg-slider__slide.is-prev,
    .jg-slider__slide.is-entering-left {
        left: calc(-60% - var(--gap));

        width: calc(60% - (var(--gap) / 2));
    }
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {
    :root {
        --height: 440px;
        --gap: 0px;
    }

    .demo-shell {
        padding: 0;
    }

    .demo-note {
        padding: 16px;
    }

    .jg-slider {
        padding: 30px 16px 46px;
    }

    .jg-slider__slide {
        width: 100%;
    }

    .jg-slider__slide.is-active {
        left: 0;

        width: 100%;

        opacity: 1;
        transform: translateX(0) scale(1);
    }

    .jg-slider__slide.is-next-1,
    .jg-slider__slide.is-next-2,
    .jg-slider__slide.is-out,
    .jg-slider__slide.is-entering-right {
        left: 100%;

        width: 100%;

        opacity: 0;
        transform: translateX(40px) scale(.96);
    }

    .jg-slider__slide.is-prev,
    .jg-slider__slide.is-entering-left {
        left: -100%;

        width: 100%;

        opacity: 0;
        transform: translateX(-40px) scale(.96);
    }

    .jg-slider__slide.is-active .jg-content,
    .jg-content {
        padding: 24px;
    }

    .jg-slider__slide.is-active .jg-title,
    .jg-title {
        max-width: 100%;
        margin-bottom: 20px;

        font-size: clamp(30px, 9vw, 44px);
    }

    .jg-slider__arrow {
        width: 44px;
        height: 44px;
    }

    .jg-slider__arrow--prev {
        left: 6px;
    }

    .jg-slider__arrow--next {
        right: 6px;
    }
}

/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    .jg-slider__slide,
    .jg-card,
    .jg-card__image,
    .jg-card__inner picture img,
    .jg-title,
    .jg-content,
    .jg-link svg {
        transition-duration: 1ms !important;
    }
}