.frame-space-after-small{padding-bottom: 3rem;}
.frame-space-after-large{padding-bottom: 6rem;}
.frame-space-before-small{padding-top: 3rem;}
.frame-space-before-large{padding-top: 6rem;}
.bg-grey{background-color: #f0f0f0;}

section.cta .cta__image .image {
    height: 100%;
}

section.cta .cta__image .image img {
    height: 100%;
}

@media (max-width: 767px) {
    .cta__overlay {
        background-color: unset;
    }
}

.image__placeholder {
    display: none;
}

.flip-card .image__element {
    z-index: 0;
}

.text-image-block__media, .text-image-block__content {
    margin-top: 74px;
}

.hero--parallax.hero--full-height .hero__wrapper {
    min-height: calc(100vh - 18.125rem);
}

.hero--parallax.hero--narrow-height .hero__wrapper {
    min-height: calc(80vh - 18.125rem);
}

.hero--has-headline.hero--full-height .hero__wrapper {
    min-height: calc(100vh - 18.125rem);
}

.hero--has-headline.hero--narrow-height .hero__wrapper {
    min-height: calc(80vh - 18.125rem);
}

.hero--full-height .hero__wrapper {
    min-height: calc(100vh - 18.125rem);
}

.hero--narrow-height .hero__wrapper {
    min-height: calc(80vh - 18.125rem);
}


/* Stil für das Login-Popup */
#loginModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white; /* dunkler Hintergrund */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Oberste Ebene */
}

#loginForm {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

#loginForm input {
    margin: 10px 0;
    padding: 10px;
    width: 100%;
}

#loginForm button {
    padding: 10px;
    width: 100%;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}


/* Allgemeines Styling für den Form-Editor */
.button:hover {
    color: black !important;
}

.form-editor {
    padding: 0 .5em !important;
}

.form-group {
    margin-bottom: 15px !important;
    text-align: left !important;
}

div .input .form-control {
    width: 100% !important;
    max-width: 450px !important;
    height: 50px !important;
    padding-left: 15px !important;
    box-sizing: border-box; /* Damit das Padding nicht zur Gesamtbreite hinzukommt */
}

/* Optional: Anpassung für sehr kleine Bildschirme (z.B. unter 400px) */
@media (max-width: 400px) {
    div .input .form-control {
        width: 100% !important;
        max-width: 100% !important; /* Volle Breite für sehr kleine Bildschirme */
    }
}

/* Navigation Bar */
.form-navigation {
    margin-top: 20px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.form-navigation .btn-toolbar {
    display: inline-flex !important;
    justify-content: space-between !important;
    width: 100% !important;
}


/* Fokus auf Eingabefelder */
.form-control-wrap input[type="text"]:focus,
.form-control-wrap input[type="email"]:focus,
.form-control-wrap input[type="tel"]:focus {
    border-color: #007bff !important;
    outline: none !important;
}

/* Fehlermeldung */
.t3-form-validation-errors {
    color: #c83c3c !important;
    font-size: 12px !important;
    margin-top: -15px !important;
    margin-bottom: 20px !important;
}

/* Eingabefelder */
.form-control-wrap input[type="text"],
.form-control-wrap input[type="email"],
.form-control-wrap input[type="tel"] {
    width: 100% !important;
    padding: 10px !important;
    font-size: 16px !important;
    border-radius: 5px !important;
    border: 1px solid #ddd !important;
    margin-bottom: 20px !important;
}

/* Label für das Formular */
label {
    font-size: 14px !important;
    color: #333 !important;
    font-weight: 500 !important;
    display: block !important;
    margin-bottom: 5px !important;
}

/* Checkbox Styling */
input[type="checkbox"] {
    margin-right: 10px !important;
}

label[for="checkbox"] {
    display: inline-block !important;
    font-size: 14px !important;
    color: #333 !important;
}

/* Nachricht unter dem Formular */
.form-hint {
    font-size: 12px !important;
    color: #666 !important;
    margin-bottom: 20px !important;
}

.form-hint a {
    color: #007bff !important;
    text-decoration: underline !important;
}

.form-label {
    display: none !important;
}

.frame-type-form_formframework form {
}

.frame-layout-100 {
    background-color: #f5f5f5 !important;
}

.frame-type-form_formframework {
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    padding: 20px !important;
}

.frame-type-form_formframework header h2 {
    font-size: 28px !important;
    text-align: left;
    padding-left: 5px !important;
}

.form-check-label {
    font-size: 16px !important;
}

.custom-checkbox-text {
    font-size: 16px !important;
    padding-left: 5px !important;
    text-align: left;
}

.form-group .input {
    margin-left: 5px !important;
    font-size: 14px !important;
}

.outer-container {
    width: 100%; /* Volle Breite des Viewports */
    background-color: #f0f0f0;
    text-align: center; /* Zentriert den Text horizontal */
    display: flex;
    justify-content: center; /* Zentriert den Inhalt horizontal */
    align-items: center; /* Zentriert den Inhalt vertikal */
    height: 100%;
}

.outer-container p {
    font-size: 1.5rem; /* Optional: Textgröße anpassen */
}

/*Content Slider padding*/
.content-slider, .content-slider--sm, .content-slider--md, .content-slider--xl{
    padding: unset;
}
@media(min-width: 768px)and (max-width:1023px) {
    .content-slider, .content-slider--sm, .content-slider--md, .content-slider--xl {
        padding: unset;
    }
}
@media(max-width: 767px) {
    .content-slider, .content-slider--sm, .content-slider--md, .content-slider--xl {
        padding: unset;
    }
}
.frame-space-after-small {
    padding-bottom: 3rem;
}
.frame-space-after-large {
    padding-bottom: 6rem;
}
.frame-space-before-small {
    padding-top: 3rem;
}
.frame-space-before-large {
    padding-top: 6rem;
}

.text-image-block.video .multiple-videos-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}

.text-image-block.video .multiple-videos-wrapper iframe {
    flex: 1 1 calc(33.333% - 20px);
    aspect-ratio: 16 / 9;
    border: none;
    width: 100%;
}

@media screen and (max-width: 1023px) {
    .text-image-block.video .multiple-videos-wrapper {
        row-gap: 40px;
    }
    .text-image-block.video .multiple-videos-wrapper iframe {
        flex: 1 1 calc(50% - 20px);
        max-width: calc(50% - 20px);
    }
}

@media  screen and (max-width: 767px) {
    .text-image-block.video .multiple-videos-wrapper {
        row-gap: 20px;
    }    
    
    .text-image-block.video .multiple-videos-wrapper iframe {
        flex: 1 1 100%;
        max-width: 100%;
    }
}  

.video > iframe {
    border-width: 0;
}