/* Event-Kachel */
/* events.css */
.tile-aktuell, .tile-highlight {
    background: rgba(255, 255, 255, 0.4);
    /* Neuer Box-Shadow */
    box-shadow:
            0 4px 6px rgba(0, 0, 0, 0.1),
            0 8px 20px rgba(0, 0, 0, 0.15);

    border-radius: 10px;

    width: 45%;

    min-height: 50vh;
    height: 70vh;
    max-height: 80vh;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    text-align: center;

    flex-grow: 1;
}

/* Wrapper für das Bild */
.event-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 88%; /* Bild hat weniger Platz, damit Navigation sichtbar bleibt */
}

/* Bild */
.event-image {
    border-radius: 5px;
    width: auto;
    height: 100%;
    object-fit: contain;
    max-width: 100%; /* Passt sich maximal der Breite des Containers an */

}

/* Container für Navigation (Buttons + Dots) */
/* Container für Navigation (Buttons + Dots) */
.event-nav-container {
    display: flex;
    align-items: center;
    justify-content: center; /* Hält alles in der Mitte */
    width: 100%;
    height: 7%;
    position: relative;
    gap: 20px;
}

/* Wrapper für die Button-Gruppe */
.event-nav-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px; /* Abstand zwischen Download, Pfeilen und Dots */
    margin-left: -60px; /* Schiebt die gesamte Gruppe leicht nach links */
}

/* Navigationsbuttons */
.event-nav {
    background: rgb(6, 139, 66);
    color: #ffffff;
    border: none;
    cursor: pointer;
    font-size: 18px; /* Größere Pfeile */
    border-radius: 50%;
    transition: background 0.3s;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.event-nav:hover {
    background: rgb(3, 56, 28);
}

/* Dots-Container */
.event-dots {
    display: flex;
    justify-content: center;
    gap: 12px; /* Abstand zwischen den Punkten */
}

/* Dots */
.dot {
    background: rgba(160, 155, 155, 0.8);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s;
    cursor: pointer;
}

.dot.active {
    background-color: #008f5a;
    width: 12px;
    height: 12px;
}

.event-download {
    width: 45px;  /* Größe anpassen */
    height: 45px;
    cursor: pointer;
    transition: opacity 0.3s;
    justify-content: center;
    /* Umfärben von Schwarz zu Grün */
    filter: invert(38%) sepia(73%) saturate(386%) hue-rotate(122deg) brightness(90%) contrast(95%);
    transform: translateY(5px);
}

.event-download:hover {
    opacity: 0.7;
}

.event-download-container {
    position: relative;
    display: inline-block;
}

/* Tooltip-Text */
.event-download-container::after {
    content: "Flyer herunterladen"; /* Hier den Tooltip-Text anpassen */
    position: absolute;
    bottom: 120%; /* Position über dem Button */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(6, 139, 66, 0.9); /* Grüner Hintergrund */
    color: white;
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 5px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}

/* Zeigt den Tooltip beim Hover */
.event-download-container:hover::after {
    opacity: 1;
    transform: translateX(-120%) translateY(100%);
}


/* Responsive Anpassungen für kleinere Bildschirme */
@media screen and (max-width: 1300px) {
    .tile-aktuell {
        width: 100%; /* Volle Breite nutzen */
        max-width: 100%; /* Sicherstellen, dass nichts begrenzt */
        margin: 0; /* Falls es außen Platz gibt, diesen entfernen */
    }
}



/* Responsive Anpassungen für kleinere Bildschirme */
@media screen and (max-width: 700px) {
    /* Bild */
    .event-image {
        max-width: 100%; /* Passt sich maximal der Breite des Containers an */
        width: auto; /* Erhält das Seitenverhältnis */
        display: block; /* Verhindert unerwünschte Zusatzeffekte */
    }

    /* Wrapper für die Button-Gruppe */
    .event-nav-group {
        gap: 10px; /* Abstand zwischen Download, Pfeilen und Dots */
        margin-left: -40px; /* Schiebt die gesamte Gruppe leicht nach links */

    }

    /* Navigationsbuttons */
    .event-nav {
        font-size: 16px; /* Größere Pfeile */
        width: 30px;
        height: 30px;
    }

    .event-download {
        width: 30px;  /* Größe anpassen */
        height: 30px;
    }

    /* Dots-Container */
    .event-dots {
        gap: 5px; /* Abstand zwischen den Punkten */
    }
}