/* ============================================================
   Slider — emh/slider Content Block
   Ported from production anpassungen.css (.slick-slide rules)
   ============================================================ */

/* Outer section: positioning context for arrows/dots, NO overflow clip */
[data-slider="true"] {
    position: relative;
}

/* Overflow clip wrapper created by slider-init.js around .slider-track */
.slider-overflow {
    overflow: hidden;
}

/* Track: flex row */
.slider-track {
    display: flex;
    /* transition / animation set by slider-init.js */
}

/* Marquee: continuous scroll — translateX(0) → translateX(-50%) loops seamlessly
   because track width = 2 × real slides (clone set appended) */
@keyframes slider-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ---- Slide item — mirrors production .slick-slide ---- */
.slider-item {
    flex: 0 0 100%;
    max-width: 100%;
    /* width per breakpoint set by slider-init.js */
    box-sizing: border-box;
    background-color: transparent;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: .5rem;
    margin: 0 .5rem;
    /* Stretch inner card to fill full height (all slides in track are equalized) */
    display: flex;
    flex-direction: column;
}

/* Make ce-card wrapper fill the full slider-item height */
.slider-item > .ce-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Images in image-only slides */
.slider-item > .img-fluid {
    display: block;
    width: 100%;
    height: auto;
}

/* ---- Card inside slider — mirrors production #textblock1 .card ---- */
[data-slider="true"] .card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 400px;
    word-wrap: break-word;
    background-color: transparent;
    background-clip: border-box;
    border: 0;
    border-radius: .5rem;
}

/* Card image */
[data-slider="true"] .card-image-wrap {
    overflow: hidden;
}

[data-slider="true"] .card-image {
    display: block;
    width: 100%;
    height: auto;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
}

/* Card title */
[data-slider="true"] .card-title {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 1.33rem;
    font-weight: 800;
    color: #141414;
    margin-bottom: .5rem;
}

/* Card body links */
[data-slider="true"] .card-body a {
    font-size: 1.33rem;
    font-weight: 800;
}

/* ---- Card color variants — specificity matches [data-slider] .card rule (0,0,2,0) ---- */
[data-slider="true"] .card-lila  { background-color: #B498FF; }
[data-slider="true"] .card-gruen { background-color: #5ABEB6; margin-bottom: 0; }
[data-slider="true"] .card-gelb  { background-color: #E2D200; }
[data-slider="true"] .card-rot   { background-color: #FF7C8A; }

/* ---- Prev / Next arrows — purple circle, white arrow ---- */
.slider-prev,
.slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background-color: #B498FF;
    border-radius: 50%;
    border: 0;
    outline: 0;
    cursor: pointer;
}

.slider-prev { left: -25px; }
.slider-next { right: -25px; }

/* Arrow icon via ::before — white character centered in purple circle */
.slider-prev::before,
.slider-next::before {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    opacity: .75;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slider-prev::before { content: '\2039'; } /* ‹ */
.slider-next::before { content: '\203A'; } /* › */

.slider-prev:hover::before,
.slider-next:hover::before {
    opacity: 1;
}

/* ---- Dots — mirror production slick-dots ---- */
.slider-dots {
    display: block;
    width: 100%;
    margin: -20px 0 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.slider-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}

.slider-dot {
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    background: transparent;
    border: 0;
    outline: 0;
    cursor: pointer;
    font-size: 0;
    line-height: 0;
    color: transparent;
}

/* CSS circle — replaces slick icon font (slick uses •  at 6px) */
.slider-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5px;
    height: 5px;
    background-color: #141414;
    border-radius: 50%;
    opacity: .25;
}

.slider-dot.active::before {
    opacity: .75;
}

.slider-dot:hover::before,
.slider-dot:focus::before {
    opacity: 1;
}

/* ---- Responsive: smartphone (< 576px) ---- */
@media screen and (max-width: 575px) {
    /* Reduce min-height: card is ~330px wide on iPhone 14, less content fits */
    [data-slider="true"] .card {
        min-height: 200px;
    }

    /* Tighter margins so card uses more available width */
    .slider-item {
        margin: 0 5px;
    }

    /* Dots: smaller gap under track on mobile */
    .slider-dots {
        margin-top: -10px;
    }
}

/* ---- Responsive: larger arrows on widescreen only ---- */
@media screen and (min-width: 1024px) {
    .slider-prev,
    .slider-next {
        width: 30px;
        height: 30px;
    }
    .slider-prev::before,
    .slider-next::before {
        font-size: 28px;
    }
}