/* Atelier: leichte Magazinoptik mit weichen Formen und klaren Farbakzenten. */
.jfp-new-activity--v4 {
    overflow: hidden;
    background:
        radial-gradient(circle at -5% 16%, rgb(91 129 143 / 13%), transparent 22rem),
        radial-gradient(circle at 103% 38%, rgb(200 149 50 / 12%), transparent 25rem),
        var(--jfp-new-paper);
}

.jfp-new-activity--v4 .jfp-new-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(330px, .82fr) minmax(0, 1.18fr);
    width: min(calc(100% - (2 * var(--jfp-new-gutter))), 1500px);
    min-height: 540px;
    margin: clamp(1rem, 2.5vw, 2.3rem) auto 0;
    overflow: hidden;
    color: var(--jfp-new-on-dark);
    background: linear-gradient(138deg, #173f4c 0%, #2f6270 54%, #5b818f 100%);
    border: 1px solid rgb(255 255 255 / 25%);
    border-radius: clamp(26px, 3vw, 44px);
    box-shadow: 0 30px 75px rgb(9 36 48 / 20%);
}
.jfp-new-activity--v4 .jfp-new-hero::before,
.jfp-new-activity--v4 .jfp-new-hero::after {
    position: absolute;
    z-index: 0;
    content: "";
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 50%;
    pointer-events: none;
}
.jfp-new-activity--v4 .jfp-new-hero::before { top: -9rem; left: -8rem; width: 22rem; height: 22rem; }
.jfp-new-activity--v4 .jfp-new-hero::after { bottom: -5rem; left: 31%; width: 11rem; height: 11rem; }
.jfp-new-activity--v4 .jfp-new-hero__copy {
    position: relative;
    z-index: 1;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    padding: clamp(2rem, 4vw, 4.5rem);
}
.jfp-new-activity--v4 .jfp-new-hero__copy::before {
    display: block;
    width: clamp(3.5rem, 8vw, 7rem);
    height: 5px;
    margin-bottom: clamp(1.4rem, 2.5vw, 2.2rem);
    content: "";
    background: linear-gradient(90deg, #f6cc62, #fff0b8 58%, rgb(255 255 255 / 15%));
    border-radius: 999px;
}
.jfp-new-activity--v4 .jfp-new-hero h1 { max-width: 9ch; text-wrap: balance; }
.jfp-new-activity--v4 .jfp-new-hero__lead { color: rgb(255 255 255 / 91%); }
.jfp-new-activity--v4 .jfp-new-hero__image {
    position: relative;
    z-index: 1;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    height: min(520px, calc(100% - 2.5rem));
    min-height: 430px;
    margin: 1.25rem 1.25rem 1.25rem 0;
    padding: clamp(.8rem, 1.5vw, 1.35rem);
    background:
        radial-gradient(circle at 88% 12%, rgb(246 204 98 / 26%), transparent 12rem),
        linear-gradient(145deg, rgb(255 255 255 / 14%), rgb(255 255 255 / 7%));
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: clamp(20px, 2.3vw, 34px);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%);
}
.jfp-new-activity--v4 .jfp-new-hero__image img {
    border-radius: 12px;
    box-shadow: 0 18px 48px rgb(5 26 34 / 24%);
}

.jfp-new-activity--v4 .jfp-new-intro {
    grid-template-columns: minmax(0, 1.38fr) minmax(290px, .62fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
    width: min(calc(100% - (2 * var(--jfp-new-gutter))), 1320px);
    margin: clamp(1.5rem, 3.2vw, 3.4rem) auto;
    padding: clamp(1.8rem, 3.8vw, 3.8rem);
    background: rgb(255 255 255 / 82%);
    border: 1px solid rgb(49 88 102 / 12%);
    border-radius: clamp(24px, 3vw, 38px);
    box-shadow: 0 20px 55px rgb(15 52 63 / 8%);
    backdrop-filter: blur(12px);
}
.jfp-new-activity--v4 .jfp-new-intro__content {
    position: relative;
    max-width: 800px;
    padding-left: clamp(1.4rem, 2.7vw, 2.6rem);
}
.jfp-new-activity--v4 .jfp-new-intro__content::before {
    position: absolute;
    inset: .2rem auto .2rem 0;
    width: 5px;
    content: "";
    background: linear-gradient(180deg, #f2c552 0%, #5b98a5 48%, #204f5d 100%);
    border-radius: 999px;
    box-shadow: 0 0 0 5px rgb(91 129 143 / 7%);
}
.jfp-new-activity--v4 .jfp-new-intro__invite {
    display: flex;
    min-height: 190px;
    margin: 0;
    padding: clamp(1.8rem, 3vw, 2.7rem);
    flex-direction: column;
    justify-content: center;
    color: var(--jfp-new-on-dark);
    background:
        radial-gradient(circle at 88% 4%, rgb(255 255 255 / 18%), transparent 8rem),
        linear-gradient(135deg, #274f5d 0%, #4d7d89 58%, #6b9ba5 100%);
    border: 1px solid rgb(255 255 255 / 48%);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgb(23 61 73 / 18%), inset 0 1px 0 rgb(255 255 255 / 24%);
}
.jfp-new-activity--v4 .jfp-new-intro__invite .jfp-new-eyebrow { color: #ffe187; }
.jfp-new-activity--v4 .jfp-new-intro__invite p:last-child { margin-top: 0; color: rgb(255 255 255 / 94%); }

.jfp-new-activity--v4 .jfp-new-offers {
    position: relative;
    background:
        radial-gradient(circle at 8% 8%, rgb(255 255 255 / 75%), transparent 20rem),
        linear-gradient(145deg, #edf7f9 0%, #dfeef1 54%, #f4eedc 130%);
}
.jfp-new-activity--v4 .jfp-new-offers__grid { gap: clamp(1rem, 2vw, 1.7rem); }
.jfp-new-activity--v4 .jfp-new-offer {
    background: rgb(255 255 255 / 91%);
    border: 1px solid rgb(49 88 102 / 16%);
    border-radius: clamp(20px, 2.2vw, 32px);
    box-shadow: 0 20px 50px rgb(15 52 63 / 11%);
}
.jfp-new-activity--v4 .jfp-new-offer--featured.has-media {
    grid-template-columns: minmax(360px, 1.08fr) minmax(0, .92fr);
    overflow: hidden;
    border-top: 4px solid #d4a33f;
}
.jfp-new-activity--v4 .jfp-new-offer__gallery {
    margin: 0;
    background:
        radial-gradient(circle at 12% 12%, rgb(255 255 255 / 88%), transparent 14rem),
        linear-gradient(145deg, #eaf4f7, #d9e9ed 72%, #f2ead6);
}
.jfp-new-activity--v4 .jfp-new-offer__body { align-self: center; padding: clamp(1.5rem, 3vw, 3rem); }
.jfp-new-activity--v4 .jfp-new-offer__date {
    color: #173d49;
    background: linear-gradient(100deg, #f6dfa5, #fff0c9);
    box-shadow: 0 5px 16px rgb(200 149 50 / 15%);
}
.jfp-new-activity--v4 .jfp-new-offers--past {
    background:
        radial-gradient(circle at 92% 8%, rgb(219 197 143 / 20%), transparent 23rem),
        linear-gradient(145deg, #fbf7ed 0%, #f1ead9 54%, #eaf2f2 125%);
}
.jfp-new-activity--v4 .jfp-new-offers--past .jfp-new-offer {
    background: rgb(255 253 247 / 78%);
    border: 0;
    border-radius: 8px 28px 28px 8px;
    box-shadow: 0 12px 34px rgb(86 69 35 / 7%);
}
.jfp-new-activity--v4 .jfp-new-offers--past .jfp-new-offer:nth-child(even) {
    background: rgb(241 247 248 / 84%);
    border-radius: 28px 8px 8px 28px;
}
.jfp-new-activity--v4 .jfp-new-offers--past .jfp-new-offer--featured.has-media {
    grid-template-columns: minmax(260px, .76fr) minmax(0, 1.24fr);
    border-top: 0;
}
.jfp-new-activity--v4 .jfp-new-offers--past .jfp-new-offer__gallery {
    margin: clamp(.6rem, 1.4vw, 1.1rem);
    background:
        radial-gradient(circle at 12% 8%, rgb(255 255 255 / 82%), transparent 12rem),
        linear-gradient(145deg, #e8f1f2, #f2ecdc);
}
.jfp-new-activity--v4 .jfp-new-offers--past .jfp-new-offer__date {
    color: #765c25;
    background: transparent;
    border: 1px solid rgb(179 143 66 / 38%);
    box-shadow: none;
}

@media (max-width: 900px) {
    .jfp-new-activity--v4 .jfp-new-hero { grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); }
    .jfp-new-activity--v4 .jfp-new-hero__copy { padding: clamp(1.7rem, 3.5vw, 2.8rem); }
    .jfp-new-activity--v4 .jfp-new-intro { grid-template-columns: 1fr; }
    .jfp-new-activity--v4 .jfp-new-intro__invite { width: min(100%, 620px); min-height: 0; justify-self: center; border-radius: 16px; }
    .jfp-new-activity--v4 .jfp-new-offer--featured.has-media,
    .jfp-new-activity--v4 .jfp-new-offers--past .jfp-new-offer--featured.has-media { grid-template-columns: 1fr; }
    .jfp-new-activity--v4 .jfp-new-offer__gallery { margin-inline: auto; }
}

@media (max-width: 700px) {
    .jfp-new-activity--v4 .jfp-new-hero {
        grid-template-columns: 1fr;
        width: calc(100% - 1.25rem);
        min-height: 0;
        border-radius: 26px;
    }
    .jfp-new-activity--v4 .jfp-new-hero__image {
        grid-column: 1;
        grid-row: 1;
        width: auto;
        height: clamp(260px, 80vw, 390px);
        min-height: 0;
        margin: .65rem .65rem 0;
    }
    .jfp-new-activity--v4 .jfp-new-hero__copy { grid-column: 1; grid-row: 2; }
    .jfp-new-activity--v4 .jfp-new-hero h1 { max-width: 12ch; }
    .jfp-new-activity--v4 .jfp-new-intro {
        width: calc(100% - 1.25rem);
        margin-block: 1.25rem;
        padding: 1.35rem;
        border-radius: 24px;
    }
    .jfp-new-activity--v4 .jfp-new-intro__content { padding-left: 1.2rem; }
    .jfp-new-activity--v4 .jfp-new-intro__invite { padding: 1.6rem; border-radius: 16px; }
}