/* ===== BASISKONFIGURATION ===== */
body {
    margin: 0;                     /* Body-Rand entfernen */
    padding: 0;                     /* Body-Padding entfernen (kein Scrollen) */
    min-height: 100vh;              /* Volle Viewport-Höhe */
    display: flex;                  /* Flex-Layout aktivieren */
    flex-direction: column;         /* Vertikale Ausrichtung */
    align-items: center;            /* Horizontal zentrieren */
    justify-content: center;        /* Vertikal zentrieren */
    background: url(tempel.jpg) center/cover no-repeat;
    font-family: Arial, sans-serif;
    overflow-x: hidden;             /* Horizontal-Scrollen verhindern */
}

/* ===== VIDEO-CONTAINER (Hauptcontainer) ===== */
.video-container {
    display: flex;                  /* Flex-Layout für Pfeile + Video */
    align-items: center;            /* Vertikal zentrieren */
    gap: 15px;                      /* Abstand zwischen Pfeilen und Video */
    position: relative;             /* Für absolute Positionierung */
    margin-top: 10vh;              /* Container 10% von oben verschieben */
}

/* ===== VIDEO-WRAPPER (Video + Beschreibung) ===== */
.video-wrapper {
    display: flex;                  /* Flex-Layout */
    flex-direction: column;         /* Vertikale Anordnung */
    align-items: center;            /* Horizontal zentrieren */
    border-radius: 12px;            /* Abgerundete Ecken */
    overflow: hidden;               /* Videorundung sichtbar machen */
    box-shadow: 0 0 5px rgba(0,0,0,0.3); /* Schatteneffekt */
}

/* ===== VIDEO-ELEMENT ===== */
#videoPlayer {
    width: 80vw;                    /* 80% der Viewport-Breite */
    max-width: 900px;               /* Maximale Desktop-Größe */
    height: auto;                   /* Automatische Höhe */
    max-height: 70vh;               /* Maximale Höhe */
    display: block;                 /* Blockverhalten */
    border-radius: 15px;            /* Abgerundete Ecken */
}

/* ===== NAVIGATIONSPFEILE ===== */
.nav-arrow {
    font-size: 2.5em;               /* Grundgröße */
    background: rgba(255,255,255,0.3); /* Transparenter Hintergrund */
    border: none;                   /* Rahmen entfernen */
    border-radius: 50%;             /* Kreisform */
    padding: 12px;                  /* Innenabstand */
    cursor: pointer;                /* Pointer-Cursor */
    transition: all 0.2s ease;      /* Glatte Übergänge */
    flex-shrink: 0;                 /* Größe fixieren */
}

.nav-arrow:hover {
    background: rgba(255,255,255,0.7); /* Hover-Effekt */
    transform: scale(1.1);          /* Leichte Vergrößerung */
}

/* ===== DROPDOWN-MENÜ ===== */
#videoSelect {
    margin: 15px auto !important; /* Verschiebt Menü nach unten */
    min-width: 250px;
    padding: 10px 20px;
    border: 2px solid #c5a267;
    border-radius: 20px;
    background: #f4e5c7;
    font-size: 16px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: Sichtbarkeit verbessern */
}

/* ===== VIDEOBESCHREIBUNG ===== */
#videoDescription {
margin: 15px 0 0 0;             /* Abstand oben */
padding: 10px 15px;             /* Innenabstand */
background: rgba(0,0,0,0.8);    /* Halbtransparenter Hintergrund */
color: white;                   /* Schriftfarbe */
border-radius: 8px;             /* Abgerundete Ecken */
text-align: center;             /* Textzentrierung */
max-width: 80%;                 /* Maximale Breite */
}

/* ===== MOBILE HOCHFORMAT (360x760px) ===== */
@media (max-width: 480px) and (orientation: portrait) {
    /* Container-Anpassungen */

    /* Navigationspfeile */
    .nav-arrow {
        font-size: 1.3em;              /* 48% kleinere Größe */
        padding: 6px;                  /* Kompakteres Padding */
        position: absolute;            /* Absolute Positionierung */
        top: 28px;                        /* Am oberen Rand des Containers */
        margin: 0;                     /* Margin zurücksetzen */
        background: rgba(255,255,255,0.8); /* Deckender Hintergrund */
        box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Sichtbarkeit verbessern */
        z-index: 30;                   /* Über allen Elementen */
    }

    #prev {
    left: 5px;                    /* 5px vom linken Rand */
    right: auto;
    }

    #next {
    right: 5px;                   /* 5px vom rechten Rand */
    left: auto;
    }

    /* Auswahlmenü */
    #videoSelect {
        position: relative;
        top: 8px;                       /* Gleiche Höhe wie Pfeile */
        left: 0%;                    /* Horizontal zentrieren */
        width: 250px;                 /* Feste Breite */
        min-width: unset;             /* Mindestbreite aufheben */
        margin: 0;                    /* Margin zurücksetzen */
        font-size: 19px;              /* Kleinere Schrift */
        border: 1px solid #a67c52;    /* Dünnerer Rahmen */
    }

    /* Video-Anpassungen */
    #videoPlayer {
    width: 95vw;                  /* Fast volle Breite */
    max-height: 50vh;             /* Höhe reduzieren */
    margin-top: 15px;             /* Abstand zur Steuerung */
    }

    /* Beschreibung */
    #videoDescription {
    margin-top: 10px;             /* Geringerer Abstand */
    font-size: 0.8em;             /* Kleinere Schrift */
    padding: 8px 12px;            /* Kompakteres Padding */
    }

    /* Sicherheitsabstand zum unteren Bildschirmrand */
    body {
        padding-bottom: 0px;         /* Scrollen verhindern */
    }
}

/* ===== MOBILE QUERFORMAT ===== */
@media (max-width: 768px) and (orientation: landscape) {
    .video-container {
        flex-direction: row;          /* Horizontale Anordnung */
        align-items: center;          /* Vertikal zentrieren */
        gap: 10px;                    /* Geringerer Abstand */
        margin-top: 5vh;              /* Weniger oberer Abstand */
    }

    /* Pfeile verkleinern */
    .nav-arrow {
        font-size: 1.8em;             /* 28% kleinere Größe */
        padding: 8px;                 /* Kompakteres Padding */
        position: static;             /* Natürliche Position */
        transform: none;              /* Transformation entfernen */
        flex-shrink: 0;               /* Größe fixieren */
    }

    /* Videoanpassungen */
    #videoPlayer {
        width: 55vw;                  /* Schmalere Videobreite */
        max-height: 60vh;             /* Höhe anpassen */
        margin: 0 10px;               /* Horizontaler Abstand */
    }

    /* Videobeschreibung links */
    #videoDescription {
        max-width: 100%;              /* Volle Breite nutzen */
        text-align: left;             /* Linksbündiger Text */
        margin: 10px 0 0 0;           /* Abstand anpassen */
    }

    /* Auswahlmenü rechts */
    #videoSelect {
    order: 2;                     /* Unter der Beschreibung */
    width: 100%;                  /* Volle Breite */
    max-width: 200px;             /* Maximale Breite */
    margin: 10px 0 0 auto;        /* Rechtsbündig mit Abstand */
    padding: 8px 15px;            /* Kompakteres Padding */
    font-size: 14px;              /* Kleinere Schrift */
    }
}