.nala-wrapper {
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px;
}

/* 1. Block – Intro */
.nala-intro {
    display: flex;
    gap: 5px; /* Abstand zwischen den beiden Boxen */
    margin-bottom: 30px;
}

.nala-intro .intro-left,
.nala-intro .intro-right {
    flex: 1;
    border: 1px solid var(--blue);   /* dünner Rahmen */
    padding: 15px;            /* Innenabstand */
    border-radius: 8px;       /* optional, wirkt hochwertiger */
    background: #fff;         /* optional, falls Hintergrund leicht grau ist */
}


.carousel-slideshow {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* oder 4/3, je nach deinen Bildern */
    overflow: hidden;
    border-radius: 12px;
}

.carousel-slideshow .slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.carousel-slideshow .slide.active {
    opacity: 1;
}

.carousel-slideshow img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/*  grid */

/* Container: Bilder nebeneinander, Umbruch, zentriert */
.nala-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* <-- sorgt für Zentrierung */
    gap: 5px; /* 5px Abstand zwischen allen Bildern */
}

/* Einzelnes Bild-Element */
.grid-item {
    position: relative;
    display: inline-block;
}

/* Bild selbst */
.nala-grid img {
    height: 134px;   /* fixe Höhe */
    width: auto;     /* Breite automatisch */
    display: block;
    border-radius: 6px;
}

/* Datum mittig unten auf dem Bild */
.grid-date {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    background: #979797;
    color: #f0eeee;
    padding: 3px 6px;
    font-size: 0.7rem;
    border-radius: 4px;
    pointer-events: none;
}

button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}