.jfp-new-cards,
.jfp-new-dates,
.jfp-new-cards *,
.jfp-new-dates * { box-sizing: border-box; }

:root .wp-site-blocks .jfp-new-cards,
:root .wp-site-blocks .jfp-new-dates,
.jfp-new-cards,
.jfp-new-dates {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-inline: calc(50% - 50vw) !important;
    color: var(--jfp-new-ink);
    font-family: var(--jfp-new-font-body);
}

.jfp-new-cards {
    padding: var(--jfp-new-section-y) var(--jfp-new-gutter);
    background: var(--jfp-new-paper);
}

.jfp-new-cards--all {
    padding-block: calc(var(--jfp-new-section-y) + 12px);
    background: var(--jfp-new-gradient-current);
}
.jfp-new-cards--home {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--jfp-new-on-dark);
    background:
        radial-gradient(90% 120% at 8% 0%, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, 0) 62%),
        radial-gradient(58% 95% at 96% 100%, rgba(219, 197, 143, .14) 0%, rgba(219, 197, 143, 0) 72%),
        var(--jfp-new-gradient-dark);
}
.jfp-new-cards--home::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .34;
    background-image:
        linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
}
.jfp-new-cards__inner,
.jfp-new-dates__inner { width: min(100%, var(--jfp-new-content)); margin-inline: auto; }

.jfp-new-cards h2,
.jfp-new-dates h2 {
    margin: 0;
    color: var(--jfp-new-ink);
    font: 650 var(--jfp-new-size-h2)/1.1 var(--jfp-new-font-heading);
    letter-spacing: -.035em;
    text-align: center;
}
.jfp-new-cards--home h2 {
    color: var(--jfp-new-on-dark);
    font-size: var(--jf-schriftgroesse-abschnitt-ruhig, clamp(1.7rem, 2.8vw, 2.55rem));
    font-weight: 600;
}
.jfp-new-cards__head { margin: 0 auto clamp(1.85rem, 2.7vw, 2.6rem); text-align: center; }
.jfp-new-cards__head > p { max-width: 500px; margin: .75rem auto 0; color: var(--jfp-new-ink-soft); font-size: clamp(1rem, .95rem + .2vw, 1.12rem); line-height: 1.4; }
.jfp-new-cards--home .jfp-new-cards__head > p { color: rgb(255 255 255 / 84%); }
.jfp-new-dates h2 { margin-bottom: clamp(1.4rem, 2.5vw, 2.2rem); }

.jfp-new-cards__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--jfp-new-gap); }
.jfp-new-card { min-width: 0; overflow: hidden; background: var(--jfp-new-paper); border: 1px solid var(--jfp-new-line); border-radius: var(--jfp-new-radius); box-shadow: var(--jfp-new-shadow); transition: transform .22s ease, box-shadow .22s ease; }
.jfp-new-card:hover,
.jfp-new-card:focus-within { transform: translateY(-4px); box-shadow: var(--jfp-new-shadow-strong); }
.jfp-new-card > a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.jfp-new-card > a:focus-visible { outline: 3px solid var(--jfp-new-gold); outline-offset: -3px; }
.jfp-new-card__image {
    display: grid;
    aspect-ratio: 1.54;
    overflow: hidden;
    place-items: center;
    background:
        radial-gradient(circle at 85% 10%, rgb(219 197 143 / 18%), transparent 10rem),
        var(--jfp-new-blue-light);
}
.jfp-new-card__image img { display: block; width: 100%; height: 100%; object-fit: contain !important; object-position: center; }
/* Nur diese beiden Motive füllen die bestehende Kartenfläche. */
.jfp-new-card[data-card-image="fill"] .jfp-new-card__image img { object-fit: cover !important; }
.jfp-new-card__body { flex: 1; padding: 1rem 1.1rem 1.15rem; border-top: 3px solid var(--jfp-new-gold); }
.jfp-new-card h3 { margin: 0; color: var(--jfp-new-ink); font: 650 var(--jfp-new-size-h3)/1.18 var(--jfp-new-font-heading); letter-spacing: -.025em; }
.jfp-new-card p { margin: .55rem 0 0; color: var(--jfp-new-ink-soft); font-size: var(--jfp-new-size-small); line-height: 1.48; }
.jfp-new-cards__action { margin: 2rem 0 0; text-align: center; }
.jfp-new-cards__action a { display: inline-flex; align-items: center; gap: .7rem; min-height: 46px; padding: .7rem 1.35rem; border-radius: 999px; color: var(--jfp-new-on-dark); background: var(--jfp-new-blue-deep); font-weight: 650; text-decoration: none; }
.jfp-new-cards__action a:hover { color: var(--jfp-new-ink); background: var(--jfp-new-gold-light); }
.jfp-new-cards--home .jfp-new-cards__action a {
    color: var(--jfp-new-ink);
    background: var(--jf-hintergrund-2-knopf, #dcecf1);
}
.jfp-new-cards--home .jfp-new-cards__action a:hover { background: #f4f9fa; }

.jfp-new-dates { padding: var(--jfp-new-section-y) var(--jfp-new-gutter); background: var(--jfp-new-gradient-current); }
.jfp-new-dates__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--jfp-new-gap); }
.jfp-new-dates article { padding: 1.25rem; background: var(--jfp-new-surface-soft); border: 1px solid var(--jfp-new-line); border-radius: var(--jfp-new-radius-small); }
.jfp-new-dates__date { margin: 0 0 .6rem; color: var(--jfp-new-blue-deep); font-size: var(--jfp-new-size-meta); font-weight: 700; }
.jfp-new-dates h3 { margin: 0; font-size: var(--jfp-new-size-h3); }
.jfp-new-dates h3 a { color: inherit; text-decoration: none; }
.jfp-new-dates article > div { margin-top: .6rem; color: var(--jfp-new-ink-soft); font-size: var(--jfp-new-size-small); }

@media (max-width: 1180px) {
    .jfp-new-cards__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .jfp-new-cards--home .jfp-new-card:nth-child(n+4) { display: none; }
}
@media (max-width: 760px) {
    .jfp-new-cards__grid,
    .jfp-new-dates__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jfp-new-cards--home .jfp-new-card:nth-child(n+3) { display: none; }
}
@media (max-width: 520px) {
    .jfp-new-cards__grid,
    .jfp-new-dates__grid { grid-template-columns: 1fr; }
    .jfp-new-cards--home .jfp-new-card:nth-child(n+2) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .jfp-new-card { transition-duration: .01ms; }
}