:root {
    --heroslider-bg-color: #f4f4f4;
    --heroslider-text-color: #ffffff;
    --heroslider-scrim: rgba(0, 0, 0, 0.4);
    --heroslider-btn-bg: #007bff;
    --heroslider-btn-color: #ffffff;
    --heroslider-btn-hover: #0056b3;
    --heroslider-focus-ring: 3px solid #ffaa00;
    --heroslider-transition-duration: 0.5s;
    --heroslider-transition-timing: ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --heroslider-transition-duration: 0s;
    }
}

.heroslider {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: var(--heroslider-bg-color);
    container-type: inline-size;
    container-name: heroslider;
}

.heroslider.layout-boxed {
    max-width: var(--heroslider-boxed-width, 100%);
    margin: 0 auto;
}

.heroslider-track-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.heroslider-track {
    display: flex;
    transition: transform var(--heroslider-transition-duration) var(--heroslider-transition-timing);
}

.heroslider.is-slider .heroslider-slide {
    flex: 0 0 100%;
    width: 100%;
    opacity: 0;
    transition: opacity var(--heroslider-transition-duration) var(--heroslider-transition-timing);
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.heroslider.is-slider .heroslider-slide.is-active {
    opacity: 1;
    visibility: visible;
    position: relative;
    z-index: 2;
}

.heroslider:not(.is-slider) .heroslider-slide {
    width: 100%;
}

.heroslider-figure {
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
}

.heroslider-picture {
    display: block;
    width: 100%;
}

.heroslider-image {
    display: block;
    width: 100%;
    height: auto;
    min-height: 300px; /* Verhindert, dass Panorama-Bilder auf Handys zu schmalen Streifen werden */
    object-fit: cover;
    object-position: center;
    max-height: var(--heroslider-image-max-height, 80vh);
}

.heroslider-figcaption {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 4px 8px;
    font-size: 0.75rem;
    border-radius: 4px;
    z-index: 10;
}

/* -------------------------------------------
   Mobile First Overlay (Stacked Below Image)
   ------------------------------------------- */
.heroslider-overlay {
    position: relative;
    width: 100%;
    height: auto;
    background: var(--heroslider-mobile-bg, #333333); /* Solid background on mobile */
    display: flex;
    padding: 2rem 2rem 4rem 2rem;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
}

.heroslider-overlay-container {
    width: 100%;
    max-width: var(--heroslider-boxed-width, 100%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.heroslider-content {
    position: relative;
    color: var(--heroslider-mobile-text, #ffffff);
    width: 100%;
    z-index: 2;
}

.heroslider-content.pos-left { text-align: left; margin-left: 0; margin-right: auto; }
.heroslider-content.pos-center { text-align: center; margin-left: auto; margin-right: auto; }
.heroslider-content.pos-bottom { text-align: center; margin-left: auto; margin-right: auto; }

/* Base styles for content elements */
.heroslider-headline {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: clamp(1.5rem, 5cqw, 3rem);
    color: inherit;
}

.heroslider-subheadline {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: clamp(1.2rem, 3cqw, 2rem);
    color: inherit;
}

.heroslider-body {
    margin-bottom: 1.5rem;
    font-size: clamp(1rem, 2cqw, 1.25rem);
}

.heroslider-btn {
    display: inline-block;
    background-color: var(--heroslider-btn-bg);
    color: var(--heroslider-btn-color);
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    position: static;
    z-index: 3;
}

.heroslider-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.heroslider-btn:hover {
    background-color: var(--heroslider-btn-hover);
    color: var(--heroslider-btn-color);
}

.heroslider-btn:focus-visible {
    outline: var(--heroslider-focus-ring);
    outline-offset: 2px;
}

/* Container Queries for larger sizes */
@container heroslider (min-width: 1090px) {
    .heroslider-overlay {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: var(--heroslider-scrim);
    }

    .heroslider-content {
        text-align: left;
        color: var(--heroslider-text-color);
        max-width: var(--slide-text-width, 100%);
    }

    .heroslider-content.pos-left { margin-left: 0; margin-right: auto; }
    .heroslider-content.pos-center { margin-left: auto; margin-right: auto; }
    .heroslider-content.pos-bottom { margin-top: auto; margin-left: auto; margin-right: auto; padding-bottom: 4rem; }
}

/* Controls */
.heroslider-arrow { display: none; }

@container heroslider (min-width: 1090px) {
    .heroslider-arrow {
        position: absolute; top: 50%; transform: translateY(-50%);
        background: var(--heroslider-arrow-bg, rgba(0, 0, 0, 0.5)); border: none; color: var(--heroslider-arrow-color, #fff);
        width: 3rem; height: 3rem; border-radius: 50%;
        cursor: pointer; display: flex; align-items: center; justify-content: center;
        z-index: 10; opacity: 0; transition: opacity 0.3s, background 0.3s;
    }
    .heroslider-arrow:hover, .heroslider-arrow:focus-visible { background: var(--heroslider-arrow-hover, rgba(0, 0, 0, 0.8)); }
    .heroslider:hover .heroslider-arrow, .heroslider-arrow:focus-visible { opacity: 1; }
    .arrow-prev { left: 1rem; }
    .arrow-next { right: 1rem; }
}

.heroslider-controls {
    position: absolute; bottom: 1rem; left: 0; right: 0;
    display: flex; justify-content: center; align-items: center; gap: 1rem;
    z-index: 10; pointer-events: none;
}
.heroslider-controls > * { pointer-events: auto; }

.heroslider-playpause {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--heroslider-arrow-bg, rgba(0, 0, 0, 0.5));
    border: none;
    color: var(--heroslider-arrow-color, #fff);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    z-index: 10;
    transition: background 0.3s;
}
.heroslider-playpause:hover, .heroslider-playpause:focus-visible { background: var(--heroslider-arrow-hover, rgba(0, 0, 0, 0.8)); }
.heroslider-playpause:focus-visible { outline: var(--heroslider-focus-ring); }
.heroslider-playpause[aria-pressed="true"] .hs-icon-pause { display: none; }
.heroslider-playpause[aria-pressed="true"] .hs-icon-play { display: block; }
.heroslider-playpause[aria-pressed="false"] .hs-icon-pause { display: block; }
.heroslider-playpause[aria-pressed="false"] .hs-icon-play { display: none; }

/* Progress Bar */
.heroslider-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--heroslider-progress-bg, rgba(255, 255, 255, 0.2));
    z-index: 10;
}
.heroslider-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--heroslider-progress-fill, #ffffff);
}
@keyframes hs-progress {
    from { width: 0%; }
    to { width: 100%; }
}
.heroslider.is-playing .heroslider-progress-bar {
    animation: hs-progress 5s linear forwards;
}

.heroslider-pagination { display: flex; gap: 0.5rem; }
.heroslider-dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--heroslider-progress-bg, rgba(255, 255, 255, 0.5));
    border: none; cursor: pointer; padding: 0; transition: background 0.3s;
}
.heroslider-dot:hover, .heroslider-dot:focus-visible { background: var(--heroslider-progress-fill, #fff); }
.heroslider-dot.is-active { background: var(--heroslider-progress-fill, #fff); }
.heroslider-dot:focus-visible { outline: var(--heroslider-focus-ring); outline-offset: 2px; }
.heroslider.is-slider { touch-action: pan-y; }
.heroslider:not(.is-initialized) .heroslider-controls,
.heroslider:not(.is-initialized) .heroslider-arrow { display: none; }



/* Animations */
.heroslider.is-slider .heroslider-slide {
    transition: opacity var(--heroslider-transition-duration) var(--heroslider-transition-timing),
                visibility var(--heroslider-transition-duration) var(--heroslider-transition-timing),
                transform var(--heroslider-transition-duration) var(--heroslider-transition-timing);
}
.heroslider[data-animation="fade"] .heroslider-slide { transform: none; }
.heroslider[data-animation="slide-left"] .heroslider-slide { transform: translateX(100px); }
.heroslider[data-animation="slide-left"] .heroslider-slide.is-active { transform: translateX(0); }
.heroslider[data-animation="slide-up"] .heroslider-slide { transform: translateY(50px); }
.heroslider[data-animation="slide-up"] .heroslider-slide.is-active { transform: translateY(0); }
.heroslider[data-animation="zoom-in"] .heroslider-slide { transform: scale(0.95); }
.heroslider[data-animation="zoom-in"] .heroslider-slide.is-active { transform: scale(1); }
.heroslider[data-animation="zoom-out"] .heroslider-slide { transform: scale(1.05); }
.heroslider[data-animation="zoom-out"] .heroslider-slide.is-active { transform: scale(1); }