/* Grundlegende Resets */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden; /* Verhindert vertikales Scrollen auf dem Body */
    font-family: Arial, sans-serif;
    background-color: #000;
    color: #fff;
}

/* Header-Styling */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    padding: 15px 20px;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.jahrzahl {
    font-size: 2.5em; /* Große Jahreszahl */
    margin: 0;
    white-space: nowrap; /* Verhindert Umbruch */
}

.termin-navigation ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

.termin-navigation a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease, border 0.3s ease, padding 0.3s ease; /* Übergänge für alle Eigenschaften */
    white-space: nowrap; /* Verhindert Umbruch der Termine */
}

.termin-navigation a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Stil für den aktiven (aktuellen/kommenden) Navigationspunkt */
.termin-navigation a.active {
    background-color: rgba(0, 191, 255, 0.2); /* Sehr helles Blau mit Transparenz */
    border: 2px solid deepskyblue; /* Kräftige blaue Umrandung */
    padding: 3px 8px; /* Polsterung anpassen, um Platz für den Rahmen zu schaffen */
}

/* Optional: Anpassung für den Hover-Effekt, wenn es auch der aktive Link ist */
.termin-navigation a.active:hover {
    background-color: rgba(0, 191, 255, 0.3); /* Etwas dunkler beim Hover */
}


/* Haupt-Container für Filme */
.film-container {
    display: flex; /* Legt die Filmseiten nebeneinander */
    height: 100%;
    overflow-x: scroll; /* Ermöglicht horizontales Scrollen */
    scroll-snap-type: x mandatory; /* Für sanftes Einrasten an Filmseiten */
    -webkit-overflow-scrolling: touch; /* Besseres Scrollen auf iOS */
}

/* Einzelne Filmseite */
.film-seite {
    flex: 0 0 100vw; /* Jede Seite nimmt 100% der Viewport-Breite ein */
    width: 100vw;
    height: 100%;
    scroll-snap-align: start; /* Richtet Seiten am Startpunkt aus */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-top: 80px; /* Platz für den Header */
    /* Auf mobilen Geräten oder bei geringer Höhe kann padding-top angepasst werden */
}

.film-inhalt {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Wichtig für bildfüllendes Poster */
}

.film-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Stellt sicher, dass das Bild den Container füllt, ohne verzerrt zu werden */
    z-index: 1;
    filter: brightness(0.4); /* Macht das Poster dunkler, damit der Text besser lesbar ist */
}

.film-details {
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, 0.7); /* Semi-transparenter Hintergrund für Text */
    padding: 30px;
    border-radius: 10px;
    max-width: 800px;
    text-align: center;
    margin: 20px; /* Abstand zu den Rändern auf kleineren Bildschirmen */
    box-shadow: 0 0 15px rgba(0,0,0,0.7);
}

.film-details h2 {
    font-size: 3em;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

.film-details h3 {
    font-size: 1.5em;
    margin-bottom: 20px;
    color: #bbb;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

.film-details p {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 30px;
}

.film-trailer {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Seitenverhältnis für YouTube/Vimeo */
    height: 0;
    overflow: hidden;
    margin-top: 20px;
    background-color: #000; /* Hintergrund für den Trailer-Container */
}

.film-trailer iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Responsives Design */
@media (max-width: 768px) {
    header {
        flex-direction: column;
        padding: 10px;
        height: auto; /* Anpassung der Höhe für kleinere Bildschirme */
        align-items: center;
    }

    .jahrzahl {
        font-size: 2em;
        margin-bottom: 10px;
    }

    .termin-navigation ul {
        flex-wrap: wrap; /* Navigation bricht auf mehrere Zeilen um */
        justify-content: center;
        gap: 10px;
        padding-bottom: 5px; /* Abstand nach unten zur Anpassung */
    }
    
    .film-seite {
        padding-top: 120px; /* Mehr Platz für den Header bei kleineren Bildschirmen */
    }

    .film-details {
        padding: 20px;
        max-width: 90%;
        margin: 10px;
    }

    .film-details h2 {
        font-size: 2em;
    }

    .film-details h3 {
        font-size: 1.2em;
    }

    .film-details p {
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .jahrzahl {
        font-size: 1.8em;
    }

    .termin-navigation a {
        font-size: 0.9em;
        padding: 3px 8px;
    }

    .film-details h2 {
        font-size: 1.8em;
    }

    .film-details h3 {
        font-size: 1em;
    }

    .film-details p {
        font-size: 0.9em;
    }
}