/* Startseite Plus – Hero-Slider */
.sp-hero { position: relative; overflow: hidden; background: #111; }
.sp-hero .carousel-inner { background: #111; }

/* Medien */
.sp-hero__media { display: block; position: relative; width: 100%; overflow: hidden; }
.sp-hero__media picture { display: block; width: 100%; }
.sp-hero__media img { display: block; width: 100%; height: auto; }

.sp-hero--aspect-4-1  .sp-hero__media { aspect-ratio: 4 / 1; }
.sp-hero--aspect-3-1  .sp-hero__media { aspect-ratio: 3 / 1; }
.sp-hero--aspect-21-9 .sp-hero__media { aspect-ratio: 21 / 9; }
.sp-hero--aspect-2-1  .sp-hero__media { aspect-ratio: 2 / 1; }
.sp-hero--aspect-16-9 .sp-hero__media { aspect-ratio: 16 / 9; }
.sp-hero--aspect-4-3  .sp-hero__media { aspect-ratio: 4 / 3; }
.sp-hero:not(.sp-hero--aspect-natural) .sp-hero__media picture,
.sp-hero:not(.sp-hero--aspect-natural) .sp-hero__media img { height: 100%; }
.sp-hero:not(.sp-hero--aspect-natural) .sp-hero__media img { object-fit: cover; }

.sp-hero__img--focus-top    { object-position: center top; }
.sp-hero__img--focus-bottom { object-position: center bottom; }
.sp-hero__img--focus-left   { object-position: left center; }
.sp-hero__img--focus-right  { object-position: right center; }

@media (max-width: 767.98px) {
    .sp-hero--m-aspect-2-1  .sp-hero__media { aspect-ratio: 2 / 1; }
    .sp-hero--m-aspect-16-9 .sp-hero__media { aspect-ratio: 16 / 9; }
    .sp-hero--m-aspect-3-2  .sp-hero__media { aspect-ratio: 3 / 2; }
    .sp-hero--m-aspect-4-3  .sp-hero__media { aspect-ratio: 4 / 3; }
    .sp-hero--m-aspect-1-1  .sp-hero__media { aspect-ratio: 1 / 1; }
    .sp-hero:not(.sp-hero--m-aspect-same) .sp-hero__media picture,
    .sp-hero:not(.sp-hero--m-aspect-same) .sp-hero__media img { height: 100%; }
    .sp-hero:not(.sp-hero--m-aspect-same) .sp-hero__media img { object-fit: cover; }
}

/* Ken Burns: langsamer Zoom während der Standzeit */
.sp-hero--kenburns .carousel-item.active .sp-hero__media img {
    animation: sp-kenburns calc(var(--sp-interval, 6000ms) + 800ms) ease-out both;
}
@keyframes sp-kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
    .sp-hero--kenburns .carousel-item.active .sp-hero__media img { animation: none; }
}

/* Overlays */
.sp-hero__overlay { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.sp-hero--overlay-soft            .sp-hero__overlay { background: rgba(0, 0, 0, .25); }
.sp-hero--overlay-strong          .sp-hero__overlay { background: rgba(0, 0, 0, .45); }
.sp-hero--overlay-gradient-bottom .sp-hero__overlay { background: linear-gradient(to top, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .2) 55%, rgba(0, 0, 0, 0) 100%); }
.sp-hero--overlay-gradient-left   .sp-hero__overlay { background: linear-gradient(to right, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, 0) 80%); }

/* Caption */
.sp-hero__caption {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4% 8%;
    text-align: center;
    pointer-events: none;
}
.sp-hero__caption-inner {
    max-width: 44rem;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
    pointer-events: auto;
}
.sp-hero--cap-left          .sp-hero__caption { justify-content: flex-start; text-align: left; }
.sp-hero--cap-right         .sp-hero__caption { justify-content: flex-end; text-align: right; }
.sp-hero--cap-bottom-left   .sp-hero__caption { align-items: flex-end; justify-content: flex-start; text-align: left; padding-bottom: 6%; }
.sp-hero--cap-bottom-center .sp-hero__caption { align-items: flex-end; padding-bottom: 6%; }

.sp-hero--capstyle-box .sp-hero__caption-inner {
    padding: 1.25rem 1.75rem;
    border-radius: .6rem;
    background: rgba(15, 15, 15, .55);
    text-shadow: none;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.sp-hero--capstyle-light .sp-hero__caption-inner {
    padding: 1.25rem 1.75rem;
    border-radius: .6rem;
    background: rgba(255, 255, 255, .88);
    color: #222;
    text-shadow: none;
}
.sp-hero--capstyle-light .sp-hero__title { color: #222; }

.sp-hero__kicker { margin-bottom: .35rem; }
.sp-hero__title {
    margin: 0 0 .5rem;
    color: inherit;
    font-size: clamp(1.35rem, 3vw, 2.3rem);
    font-weight: 700;
    line-height: 1.12;
}
.sp-hero--size-sm .sp-hero__title { font-size: clamp(1.1rem, 2.2vw, 1.6rem); }
.sp-hero--size-lg .sp-hero__title { font-size: clamp(1.6rem, 4vw, 3.1rem); }
.sp-hero--size-xl .sp-hero__title { font-size: clamp(1.9rem, 5vw, 4rem); }
.sp-hero__text { margin: 0 0 1rem; font-size: clamp(.9rem, 1.4vw, 1.15rem); opacity: .95; }
.sp-hero__btn { margin-top: .25rem; }

/* Navigation */
.sp-hero .sp-hero__dots { z-index: 3; margin-bottom: .9rem; }
.sp-hero .sp-hero__dots li {
    box-sizing: content-box;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    opacity: 1;
    transition: background-color .2s, transform .2s;
}
.sp-hero .sp-hero__dots li.active { background: var(--sp-accent, var(--primary, #FFA54F)); transform: scale(1.2); }

.sp-hero .carousel-control-prev,
.sp-hero .carousel-control-next { z-index: 3; width: 9%; opacity: .85; }
.sp-hero .carousel-control-prev-icon,
.sp-hero .carousel-control-next-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .35);
    background-size: 45%;
    transition: background-color .2s;
}
.sp-hero .carousel-control-prev:hover .carousel-control-prev-icon,
.sp-hero .carousel-control-next:hover .carousel-control-next-icon { background-color: var(--sp-accent, var(--primary, #FFA54F)); }

@media (max-width: 767.98px) {
    .sp-hero__caption { padding: 5% 11% 13%; }
    .sp-hero--cap-bottom-left .sp-hero__caption,
    .sp-hero--cap-bottom-center .sp-hero__caption { padding-bottom: 14%; }
    .sp-hero__caption-inner { text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
    .sp-hero--capstyle-box .sp-hero__caption-inner,
    .sp-hero--capstyle-light .sp-hero__caption-inner { padding: .8rem 1rem; }
    .sp-hero__text {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: .75rem;
    }
    .sp-hero .sp-btn { padding: .5rem 1.2rem; font-size: .85rem; }
    .sp-hero .carousel-control-prev-icon,
    .sp-hero .carousel-control-next-icon { width: 2rem; height: 2rem; }
    .sp-hero .sp-hero__dots { margin-bottom: .5rem; }
}