/* ============================================================
   Jahreszeiten-Slider — Basis-Stylesheet
   Alle Styles haengen an .mod-jahreszeiten__* 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.
   ============================================================ */

.mod-jahreszeiten {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: #f0e9de;
}

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

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

    position: relative;
    min-height: 480px;
    padding: 44px 52px 64px;
    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-jahreszeiten__slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}

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

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

/* ---- Eingehende Folie: Animation --------------------------- */
.mod-jahreszeiten__slide.anim-in-left   { animation: modJzInLeft  var(--mod-jz-dur, 800ms) ease both; }
.mod-jahreszeiten__slide.anim-in-right  { animation: modJzInRight var(--mod-jz-dur, 800ms) ease both; }
.mod-jahreszeiten__slide.anim-in-up     { animation: modJzInUp    var(--mod-jz-dur, 800ms) ease both; }
.mod-jahreszeiten__slide.anim-in-down   { animation: modJzInDown  var(--mod-jz-dur, 800ms) ease both; }
.mod-jahreszeiten__slide.anim-zoom-in   { animation: modJzZoomIn  var(--mod-jz-dur, 800ms) cubic-bezier(.2,.7,.3,1) both; }
.mod-jahreszeiten__slide.anim-blur      { animation: modJzBlurIn  var(--mod-jz-dur, 800ms) ease both; }

@keyframes modJzInLeft  { from { opacity: 0; transform: translate3d(-14%, 0, 0) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes modJzInRight { from { opacity: 0; transform: translate3d( 14%, 0, 0) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes modJzInUp    { from { opacity: 0; transform: translate3d(0, -14%, 0) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes modJzInDown  { from { opacity: 0; transform: translate3d(0,  14%, 0) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes modJzZoomIn  { from { opacity: 0; transform: scale(0.86); }                    to { opacity: 1; transform: none; } }
@keyframes modJzBlurIn  { from { opacity: 0; filter: blur(16px); transform: scale(1.06); } to { opacity: 1; filter: blur(0); transform: none; } }

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

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

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

/* Slide-Ueberschrift ----------------------------------------- */
.mod-jahreszeiten__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);
}

/* Karten-Grid: vier Spalten ---------------------------------- */
.mod-jahreszeiten__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

/* Aeussere Karte: halbtransparente Huelle -------------------- */
.mod-jahreszeiten__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-jahreszeiten__karte-inhalt {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 16px 14px 16px 20px;
    border-radius: 6px;
    background: #faf7ef;
    overflow: hidden;
}

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

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

.mod-jahreszeiten__karte-titel {
    margin: 0 0 8px;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    color: #3a352c;
}

.mod-jahreszeiten__karte-text {
    margin: 0 0 16px;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #7a7264;
}

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

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

/* Pfeile ------------------------------------------------------ */
.mod-jahreszeiten__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-jahreszeiten__arrow:hover { background: rgba(20, 18, 14, 0.6); }
.mod-jahreszeiten__arrow--prev { left: 14px; }
.mod-jahreszeiten__arrow--next { right: 14px; }

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

.mod-jahreszeiten__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-jahreszeiten__dot.is-active {
    background: #ffffff;
    transform: scale(1.15);
}

/* Fokus sichtbar ---------------------------------------------- */
.mod-jahreszeiten__arrow:focus-visible,
.mod-jahreszeiten__dot:focus-visible,
.mod-jahreszeiten__karte-link:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

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

/* Import-Protokoll (nur wenn eingeschaltet) ------------------- */
.mod-jahreszeiten__log {
    margin: 0 0 14px;
    padding: 14px 18px;
    border: 1px solid #d5e0c4;
    border-radius: 8px;
    background: #eef3e6;
    color: #405e2a;
    font-size: 0.875rem;
}
.mod-jahreszeiten__log strong { display: block; margin-bottom: 6px; }
.mod-jahreszeiten__log ul { margin: 0; padding-left: 18px; }
.mod-jahreszeiten__log li { margin: 2px 0; }

/* 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-jahreszeiten__leer {
    padding: 16px;
    color: #7a7264;
}

/* Responsive -------------------------------------------------- */
@media (max-width: 1100px) {
    .mod-jahreszeiten__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .mod-jahreszeiten__slide {
        padding: 30px 20px 60px;
        min-height: 0;
    }
    .mod-jahreszeiten__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .mod-jahreszeiten__arrow { display: none; }
}

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