@charset "UTF-8";

.video {
    height: 40%;
    width: 60%;
    background-color: grey;
    color: #000000;
}

.btn-custom {
    background-color: #FEEA11;
    color: black;
    border-radius: 8px; /* Abgerundete Ecken */
    border: none; /* Keine Standard-Border */
    padding: 0.5rem 1rem; /* Mittelgroße Größe */
    font-size: 1rem; /* Schriftgröße */
    font-weight: 500; /* Mittlere Schriftstärke */
    transition: background-color 0.3s ease; /* Weicher Hover-Effekt */
    }

.btn-custom:hover {
        background-color: #e6d40f;
    }

.bg-blau {
    background-color: #141E3C;
    color:#FEEA11;
}

.bg-blau:hover {
    background-color: #1E2846;
    color:#FEEA11;
    }

.bg-blau-trans {
    border:1px solid #1E2846;
    color: #1E2846;
}


.block-grau {
    background-color:#f4f4f4;
    border-radius:8px;
    padding:20px;
}


.form-control insert {
    max-width:300px;
}


.form-label {
    text-decoration:none;
    font-size:0.9em;
    margin-bottom:2rem;
    color:#1E2846;
}


/* Container für das Video mit dynamischem Seitenverhältnis */
.video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* Standard-Seitenverhältnis für Querformat: 16:9 */
}

/* Das <iframe> passt sich an den Container an */
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Mobil: Seitenverhältnis für Hochformat (9:16) */
@media screen and (max-width: 768px) {
    .video-container {
        padding-bottom: 177.78%; /* Hochformat: 9:16 */
    }
}