/* ============================================================
   MD Content Slider — Basis-Stylesheet
   Alle Styles haengen an .mod-contentslider__* und koennen im
   Backend-Feld "Eigenes CSS" pro Instanz ueberschrieben werden.

   Aufbau der Folien:
   Alle Folien liegen in DERSELBEN Rasterzelle des Viewports.
   Dadurch sind sie deckungsgleich, der Container ist genau so
   hoch wie die hoechste Folie, und es kann keine Folie unter
   einer anderen durchscheinen.

   Unterschied zum Jahreszeiten-Slider:
   Jede Folie enthaelt genau EINE Kachel. Die Kachel nimmt die
   volle Breite ein; nur die Textspalte ist auf eine bequeme
   Lesebreite begrenzt.
   ============================================================ */

.mod-contentslider {
    position: relative;
    overflow: hidden;
    border-radius: 12px;

    /* Kein eigener heller Hintergrund: Waehrend der Animation darf
       links oder rechts kein heller Streifen aufblitzen. Als
       Grundton dient die Folienfarbe ohne Bild. */
    background: #d9d2c4;
}

/* Viewport: Raster mit einer einzigen Zelle ------------------- */
.mod-contentslider__viewport {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    width: 100%;
    isolation: isolate;
}

/* Folie ------------------------------------------------------- */
.mod-contentslider__slide {
    /* Alle Folien in derselben Zelle uebereinander */
    grid-area: 1 / 1;

    position: relative;
    min-height: 480px;
    padding: 44px 52px 72px;
    box-sizing: border-box;
    background-color: #d9d2c4;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Ausgangszustand: unsichtbar, aber im Raster vorhanden */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1;

    transform: translate3d(0, 0, 0);
    transition-property: opacity, transform, filter;
    transition-duration: 800ms;
    transition-timing-function: ease;
}

.mod-contentslider__slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}

/* Uebergangsdauer kommt aus dem Modul (data-duration) --------- */
.mod-contentslider[data-duration] .mod-contentslider__slide {
    transition-duration: inherit;
}

/* ---- Ausgehende Folie: sofort weg, nicht langsam ausblenden - */
.mod-contentslider__slide.anim-out-left,
.mod-contentslider__slide.anim-out-right,
.mod-contentslider__slide.anim-out-up,
.mod-contentslider__slide.anim-out-down,
.mod-contentslider__slide.anim-zoom-out,
.mod-contentslider__slide.anim-flip,
.mod-contentslider__slide.anim-blur {
    visibility: hidden;
    opacity: 0;
    z-index: 0;
    transition-duration: 0ms;
    transform: none;
}

/* ---- Eingehende Folie: Animation --------------------------- */
.mod-contentslider__slide.anim-in-left   { animation: modCsInLeft  var(--mod-cs-dur, 800ms) ease both; }
.mod-contentslider__slide.anim-in-right  { animation: modCsInRight var(--mod-cs-dur, 800ms) ease both; }
.mod-contentslider__slide.anim-in-up     { animation: modCsInUp    var(--mod-cs-dur, 800ms) ease both; }
.mod-contentslider__slide.anim-in-down   { animation: modCsInDown  var(--mod-cs-dur, 800ms) ease both; }
.mod-contentslider__slide.anim-zoom-in   { animation: modCsZoomIn  var(--mod-cs-dur, 800ms) cubic-bezier(.2,.7,.3,1) both; }
.mod-contentslider__slide.anim-blur      { animation: modCsBlurIn  var(--mod-cs-dur, 800ms) ease both; }

@keyframes modCsInLeft  { from { opacity: 0; transform: translate3d(-8%, 0, 0) scale(0.99); } to { opacity: 1; transform: none; } }
@keyframes modCsInRight { from { opacity: 0; transform: translate3d( 8%, 0, 0) scale(0.99); } to { opacity: 1; transform: none; } }
@keyframes modCsInUp    { from { opacity: 0; transform: translate3d(0, -8%, 0) scale(0.99); } to { opacity: 1; transform: none; } }
@keyframes modCsInDown  { from { opacity: 0; transform: translate3d(0,  8%, 0) scale(0.99); } to { opacity: 1; transform: none; } }
@keyframes modCsZoomIn  { from { opacity: 0; transform: scale(0.94); }                    to { opacity: 1; transform: none; } }
@keyframes modCsBlurIn  { from { opacity: 0; filter: blur(14px); transform: scale(1.02); } to { opacity: 1; filter: blur(0); transform: none; } }

/* Wenn Animationen ausgeschaltet sind ------------------------ */
.mod-contentslider[data-animation="none"] .mod-contentslider__slide {
    transition-property: none;
    animation: none;
}
.mod-contentslider[data-animation="none"] .mod-contentslider__slide.is-active {
    opacity: 1;
    visibility: visible;
}

/* Abdunkelnder Schleier fuer Lesbarkeit ---------------------- */
.mod-contentslider__overlay {
    position: absolute;
    inset: 0;
    background: rgba(28, 24, 18, 0.30);
    pointer-events: none;
}

.mod-contentslider__inhalt {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin: 0 auto;
}

/* Folien-Ueberschrift ---------------------------------------- */
.mod-contentslider__titel {
    margin: 0 0 24px;
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55),
                 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* Einzelne Kachel ueber die volle Breite --------------------- */
.mod-contentslider__karte {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 9px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.38);
    box-shadow: 0 2px 16px rgba(40, 33, 24, 0.12);
    -webkit-backdrop-filter: blur(6px) saturate(115%);
    backdrop-filter: blur(6px) saturate(115%);
    box-sizing: border-box;
}

/* Innere Flaeche: sekundaere Farbe, deckend ------------------ */
.mod-contentslider__karte-inhalt {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 22px 26px 22px 32px;
    border-radius: 6px;
    background: #faf7ef;
    overflow: hidden;
}

/* Blauer Balken links ---------------------------------------- */
.mod-contentslider__karte-inhalt::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: #0f6fa8;
}

/* Karten-Typografie ------------------------------------------ */
.mod-contentslider__slot {
    display: block;
    margin-bottom: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #0f6fa8;
}

.mod-contentslider__karte-titel {
    margin: 0 0 10px;
    font-size: clamp(1.25rem, 1.8vw, 1.6rem);
    font-weight: 700;
    line-height: 1.25;
    color: #3a352c;
}

/* Textspalte: volle Kachel, aber bequeme Lesebreite ---------- */
.mod-contentslider__karte-text {
    margin: 0 0 18px;
    max-width: 68ch;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: #7a7264;
}

.mod-contentslider__karte-text p { margin: 0 0 12px; }
.mod-contentslider__karte-text ul,
.mod-contentslider__karte-text ol { margin: 0 0 12px; padding-left: 20px; }
.mod-contentslider__karte-text li { margin: 2px 0; }

.mod-contentslider__karte-text a {
    color: #0f6fa8;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mod-contentslider__karte-link {
    margin-top: auto;
    align-self: flex-start;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #0f6fa8;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mod-contentslider__karte-link:hover,
.mod-contentslider__karte-link:focus-visible {
    text-decoration-thickness: 2px;
}

/* Pfeile ------------------------------------------------------ */
.mod-contentslider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    background: rgba(20, 18, 14, 0.35);
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease;
}

.mod-contentslider__arrow:hover { background: rgba(20, 18, 14, 0.6); }
.mod-contentslider__arrow--prev { left: 14px; }
.mod-contentslider__arrow--next { right: 14px; }

/* Punkte ------------------------------------------------------ */
.mod-contentslider__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    z-index: 5;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.mod-contentslider__dot {
    width: 11px;
    height: 11px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}

.mod-contentslider__dot.is-active {
    background: #ffffff;
    transform: scale(1.15);
}

/* Fokus sichtbar ---------------------------------------------- */
.mod-contentslider__arrow:focus-visible,
.mod-contentslider__dot:focus-visible,
.mod-contentslider__karte-link:focus-visible,
.mod-contentslider__karte-text a:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

.mod-contentslider:focus-visible {
    outline: 3px solid #0f6fa8;
    outline-offset: -3px;
}

/* Hilfsklassen ------------------------------------------------ */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.mod-contentslider__leer {
    padding: 16px;
    color: #7a7264;
}

/* Responsive -------------------------------------------------- */
@media (max-width: 640px) {
    .mod-contentslider__slide {
        padding: 28px 20px 68px;
        min-height: 0;
    }
    .mod-contentslider__inhalt { max-width: none; }
    .mod-contentslider__karte-inhalt { padding: 18px 16px 18px 22px; }
    .mod-contentslider__titel { margin-bottom: 16px; }
    .mod-contentslider__arrow { display: none; }
    .mod-contentslider__karte-text { max-width: none; }
}

/* Weniger Bewegung gewuenscht --------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .mod-contentslider__slide {
        transition-duration: 0ms !important;
        animation: none !important;
    }
    .mod-contentslider__arrow,
    .mod-contentslider__dot { transition: none; }
}