/* public/css/style.css */

:root {
    --primary-color: #008080; /* Ein dunkleres, sattes Türkis/Teal für besseren Kontrast */
    --secondary-color: #f8f9fa; /* Hellgrau für den Hintergrund */
    --text-color: #343a40; /* Dunkles Grau für Text */
}

body {
    font-family: 'Arial', sans-serif;
    background-color: var(--secondary-color);
    color: var(--text-color);
}

.navbar {
    background-color: var(--primary-color) !important; /* Erzwingt eine Änderung der Hintergrundfarbe */
}

/* Navbar Links und Branding */
.navbar-brand,
.navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.85);
}

/* Navbar aktive und Hover-Zustände */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
    color: rgba(255, 255, 255, 1) !important; /* Sorgt dafür, dass aktive Links und Hover-Links komplett weiß sind */
}

.navbar-brand-centered {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Hover-Effekt für die Video-Cards */
.card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
footer {
    background-color: var(--primary-color);
    color: white;
    padding: 15px 0;
    position: relative;
    bottom: 0;
    width: 100%;
    text-align: center;
}
/* Button-Styling mit der Primary-Color */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #006666; /* Eine etwas dunklere Variante für den Hover-Effekt */
    border-color: #006666;
}

/* Styling für das unsichtbare Honeypot-Feld */
.wichtig-field {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    position: absolute;
    left: -9999px;
}
.modal-body {
            position: relative;
        }
        .modal-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
        }
        .modal-nav.prev {
            left: 10px;
        }
        .modal-nav.next {
            right: 10px;
        }