/* styles.css */

/* ===== BASISKONFIGURATION ===== */
body {
    margin: 0;
    padding: 0;
    line-height: 1.3;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
/*    background: url(fotos/pool.jpg) center/cover no-repeat; */
    overflow-x: hidden;
    overflow-y: auto; /* Erlaube vertikales Scrollen */
}

div {
    width: 95%;
}

/* ===== VIDEO-CONTAINER (Hauptcontainer) ===== */
.video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    position: relative; /* Kann beibehalten werden, falls andere Elemente relativ positioniert werden */
    margin-top: 13vh;
    max-height: 90vh;
  /*  overflow: auto; */
}

/* ===== VIDEO-WRAPPER (Video + Beschreibung) ===== */
.video-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 12px;
    overflow: inherit;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    max-width: 990px;
    width: 90vw;
    flex-shrink: 0;
    padding-bottom: 20px;
}

/* ===== VIDEO-ELEMENT ===== */
#videoPlayer {
width: 100%;
max-width: 900px;
height: auto;
max-height: 60vh;
display: block;
border-radius: 15px;
border: 5px solid green;
}

/* ===== NAVIGATIONSPFEILE und DROPDOWN (Gruppieren für feste Positionierung) ===== */
.controls-container {
    position: fixed; /* Positioniere diesen Container fest im Viewport */
   /* top: 20px; Abstand vom oberen Rand des Viewports */
    left: 0; /* Beginne am linken Rand */
    width: 100%; /* Volle Breite, um Elemente zu zentrieren */
    display: flex; /* Flex-Layout für die Elemente darin */
    justify-content: center; /* Horizontale Zentrierung der Elemente */
    align-items: center; /* Vertikale Zentrierung der Elemente */
    gap: 20px; /* Abstand zwischen den Elementen (Pfeile und Dropdown) */
    z-index: 100; /* Stelle sicher, dass die Steuerelemente ganz oben liegen */
    padding: 0 10px; /* Optional: Etwas horizontaler Abstand vom Viewport-Rand */
    box-sizing: border-box; /* Stelle sicher, dass Padding zur Breite gehört */
}


/* Passe die bestehenden Styles für die Pfeile an */
.nav-arrow {
    font-size: 2em;
    background: rgba(255,255,255,0.3);
    border: none;
    border-radius: 50%;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    /* Absolute/relative Positionierung hier entfernen, da sie im fixed Container sind */
    position: static; /* Setze die Position auf static */
    top: auto;
    transform: none; /* Entferne die Transformation */
    z-index: auto;
}

#prev {
/* left: -50px; */ /* Entferne die Positionierung relativ zum video-container */
/* right: auto; */
}

#next {
/* right: -50px; */ /* Entferne die Positionierung relativ zum video-container */
/* left: auto; */
}


.nav-arrow:hover {
    background: rgba(255,255,255,0.7);
    transform: scale(1.1); /* Nur Skalierung beim Hover */
}

/* Passe die bestehenden Styles für das Dropdown an */
#videoSelect {
/* margin: 15px auto !important; */ /* Entferne den Margin, da es jetzt im Flex-Container ist */
min-width: 550px;
padding: 10px 20px;
border: 2px solid #c5a267;
border-radius: 20px;
background: rgba(238, 229, 157, 0.9);
font-size: 20px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
/* Breite wird jetzt durch den Flex-Container gesteuert, max-width beibehalten */
width: auto; /* Oder behalte eine feste Breite, falls gewünscht */
max-width: 250px;
}

/* ===== VIDEOBESCHREIBUNG ===== */
#videoDescription {
    margin: 15px 0 0 0;
    padding: 10px 15px;
    background: rgba(238, 229, 157, 0.9);
    color: darkgreen;
    border-radius: 8px;
    text-align: center;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    max-height: 110px;
    overflow-y: auto;
}

ul {
    text-align: left;
}
#scrollIndicator {
    position: absolute;
    bottom: 2px;
    left: 50%;
    font-family: monospace;
    font-size: 1.2em;
    display: none;
}

/* ===== MOBILE HOCHFORMAT (360x760px) ===== */
@media (max-width: 480px) and (orientation: portrait) {
    /* Body Padding anpassen */
    body {
        padding-top: 0px; /* Weniger Padding für kleinere Bildschirme */
    }

    /* Steuerelemente anpassen */
    .controls-container {
        top: 10px; /* Weniger Abstand oben */
        gap: 10px; /* Geringerer Abstand zwischen Elementen */
        padding: 0 5px; /* Weniger horizontaler Abstand */
    }

    /* Navigationspfeile */
    .nav-arrow {
        font-size: 1.3em;
        padding: 6px;
        /* position: absolute; */ /* Entfernt */
        /* top: 50%; */ /* Entfernt */
        transform: none; /* Entfernt */
        /* left: 5px; */ /* Entfernt */
        /* right: 5px; */ /* Entfernt */
        background: rgba(255,255,255,0.8);
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        z-index: auto; /* Z-Index zurücksetzen */
    }

    .nav-arrow:hover {
        transform: scale(1.1); /* Nur Skalierung beim Hover */
    }

    /* Auswahlmenü */
    #videoSelect {
    /* position: relative; */ /* Entfernt */
    /* top: unset; */ /* Entfernt */
    /* left: unset; */ /* Entfernt */
    width: auto; /* Oder eine feste Breite */
    min-width: 250px; /* Maximale Breite reduzieren */
    max-width: 250px; /* Maximale Breite reduzieren */
    margin: 0 !important; /* Margin entfernen */
    font-size: 16px; /* Schriftgröße anpassen */
    border: 1px solid #a67c52;
    }

    .video-container {
        margin-top: 15vh;
        overflow-y: auto;    /* vertical scrollbar */
        overflow-x: hidden;  /* prevent horizontal scrollbar */

    }

    /* Video-Wrapper anpassen */
    .video-wrapper {
        width: 95vw;
        max-width: unset;
        margin-top: 0px;
    }

    /* Video-Anpassungen */
    #videoPlayer {
        width: 100%;
        max-height: 50vh;
        margin-top: 0px;
        border-width: 3px;
    }

    /* Beschreibung */
    #videoDescription {
        margin-top: 10px;
        font-size: 0.8em;
        padding: 8px 12px;
        width: 100%;
        max-width: 100%;
        max-height: 380px; /* oder eine andere feste Höhe nach Wunsch */
    }
    #introText, #hinweis {
        padding: 0px;
        max-width: 65vh;
    }
    h2 {
        margin-top: 0px;
    }

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

/* ===== MOBILE QUERFORMAT ===== */
@media (max-width: 768px) and (orientation: landscape) {
    /* Body Padding anpassen */
    body {
        padding-top: 60px; /* Weniger Padding für Querformat */
    }

    /* Steuerelemente anpassen */
    .controls-container {
        top: 10px; /* Weniger Abstand oben */
        gap: 15px; /* Abstand anpassen */
        padding: 0 10px;
    }

    .video-container {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        margin-top: 25px; /* Kein Margin hier */
        min-height: unset;
    }

    /* Pfeile verkleinern */
    .nav-arrow {
        font-size: 1.8em;
        padding: 8px;
        position: static;
        transform: none;
        flex-shrink: 0;
        left: auto;
        right: auto;
        top: auto;
        z-index: auto;
    }

    .nav-arrow:hover {
        transform: scale(1.1);
    }

    /* Video-Wrapper anpassen */
    .video-wrapper {
        flex-direction: column;
        align-items: center;
        width: 60vw;
        max-width: 600px;
        margin: 0 10px;
        padding-bottom: 0px;
    }

    /* Videoanpassungen */
    #videoPlayer {
    width: 100%;
    max-height: 60vh;
    margin: 0;
    }

    /* Videobeschreibung links */
    #videoDescription {
    max-width: 100%;
    text-align: left;
    margin: 10px 0 0 0;
    width: 100%;
    box-sizing: border-box;
    }

    /* Auswahlmenü rechts */
    #videoSelect {
    order: unset;
    width: auto; /* Oder eine feste Breite */
    max-width: 200px;
    margin: 0 !important; /* Margin entfernen */
    padding: 8px 15px;
    font-size: 14px;
    }
    #introText, #hinweis {
        padding: 0px 10px;
    }
    h2 {
        margin-top: 0px;
    }

}

.hidden {
    display: none !important;
}

/* Weitere Styles für den Intro-Text, falls gewünscht */
#introText, #hinweis {
padding: 10px;
text-align: center;
max-height: 53vh; /* z.B. 25% der Viewport-Höhe, anpassen nach Bedarf */
overflow-y: auto; /* Vertikales Scrollen aktivieren bei Überschreitung */
}

/* ===== KONTAKTFORMULAR ===== */
#contactFormContainer {
padding: 10px 50px;
text-align: left;
max-height: 53vh;
overflow-y: auto;
border-radius: 8px;
margin: 15px 0 0 0;
box-sizing: border-box;
width: 100%;
max-width: 100%;
}

#contactFormContainer h2 {
margin-top: 0;
}

#contactFormContainer label {
display: block;
margin: 10px 0;
}

.name label, .mail label, .button {
    text-align: right;
}
.form_text {
    text-align: center;
}

.form-input, .form-textarea {
    padding: 8px;
    margin: 5px 0;
    background: rgba(255,255,255,0.9);
    border: 2px solid #c5a267;
    border-radius: 8px;
    box-sizing: border-box;
}

.form-input {
    width: 50%;
}

.form-textarea {
    width: 100%;
    resize: vertical;
    min-height: 120px;
}

.form-submit {
    padding: 10px 20px;
    border: 2px solid #c5a267;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    margin-top: 10px;
}

.form-submit:hover {
    background: rgba(238, 229, 157, 1);
}

.honeypot {
    display: none !important;
}

/* Mobile */
@media (max-width: 480px) {
    #contactFormContainer {
    padding: 0px;
    max-width: 65vh;
    }
    #contactFormContainer h2 {
    margin-top: 0px;
    }
}

@media (max-width: 768px) {
    #contactFormContainer {
    padding: 0px 10px;
    }
    #contactFormContainer h2 {
    margin-top: 0px;
    }
    .form-mail, .form-textarea {
        width: 100%;
    }
    .form_mail label {
        text-align: left;
    }
}