.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);
}

/* 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;
}

/*Deaktivierung Flip in Tile Flip Card*/
.page-77 .flip-card:not(.flip-card--no-content):hover .flip-card__body {
    transform: none;
}

@media screen and (max-width: 768px) {
    .text-image-block.video iframe {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9; /* Passt das Seitenverhältnis an */
    }
}

/* Video 3-Spaltig */
.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;
}


  .modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    backdrop-filter: blur(5px);
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .modal-content {
    position: relative;
    background: #fff;
    padding: 3rem;
    border-radius: 10px;
    width: 80%;
    max-width: 800px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    text-align: left;
  }

    .modal-content p strong {
      font: var(--font-size-md) var(--font-primary); /* oder eigene Größe */
      font-weight: bold;
      display: block; /* optional für Abstand */
      margin-bottom: 0.5rem;
    }

    .modal-content p:not(:has(strong)) {
      font: var(--font-size-2xs) var(--font-primary);
    }

  .modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
  }

  .modal-text-scroll {
      overflow-y: auto;
      max-height: 60vh; /* oder ein anderer Wert je nach Design */
      padding-right: 1rem;
      margin-bottom: 1rem;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
    }


@media (max-width: 768px) {
  .modal-content {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    padding: 3rem 2rem 2rem 2rem;
    width: 90%;
  }

  .modal-text-scroll {
    overflow-y: auto;
    max-height: 300px;
    padding-right: 1rem;
    margin-bottom: 1rem;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }

  .modal-content label,
  .modal-content button {
    flex-shrink: 0;
  }
}

body.no-scroll {
  overflow: hidden;
}



/*COOKIEBOT STYLING*/

@media screen and (min-width: 1280px) {
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton, #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton:not(:last-of-type) {
        border-radius: 50px;
        font: var(--font-primary);
        /*background-image: url(/fileadmin/images/Icons/ads-tec-arrow_white.svg);
        background-repeat: no-repeat;
        background-position: 80%;
        background-size: auto;*/
    }
}

@media screen and (min-width: 601px) {
    #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton, #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton:not(:first-of-type),
    #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtons .CybotCookiebotDialogBodyButton:not(:last-of-type),
    #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtons .CybotCookiebotDialogBodyButton:not(:first-of-type) {
        border-radius: 50px;
        font: var(--font-primary);
    }
}

#CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-change,
#CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-withdraw {
    border-radius: 50px;
    font-family: var(--font-primary);
    font-weight: 400;
}

#CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-change:hover,
#CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-withdraw:hover,
#CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton:hover,
#CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton:not(:first-of-type):hover,
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtons .CybotCookiebotDialogBodyButton:not(:last-of-type):hover,
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtons .CybotCookiebotDialogBodyButton:not(:first-of-type):hover {
    background: #fff;
    color: #000;
    border-color: #32b176;
}

#CybotCookiebotDialog .CybotExternalLinkArrow {
    height: 20px;
    width: auto;
}