.popover .popover-header {
    font-weight: bold;
}

.noUi-value {
    margin-top: 7px;
}

blockquote {
    border-left: 5px solid #036666;
    padding: 10px;
    padding-bottom: 2px;
}

.color-bg {
    padding-top: 100px;
    margin-bottom: -100px;
    /* background: radial-gradient(100% 300.28% at 100% 0%, #0C6868 0%, #0C6868 32.94%, #0C6868 49.9%, #0C6868 50.2%, #DAA622 100%); */
    background-image: linear-gradient(90deg, #036666 30%, #4f9494);
}

@media (min-width: 576px) and (max-width: 768px) {
    .color-bg {
        padding-top: 200px;
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    .color-bg {
        padding-top: 200px;
    }
}

@media (min-width: 993px) and (max-width: 1200px) {
    .color-bg {
        padding-top: 200px;
    }
}

@media (min-width: 1201px) and (max-width: 1400px) {
    .color-bg {
        padding-top: 200px;
    }
}

@media (min-width: 1401px) {
    .color-bg {
        padding-top: 200px;
    }
}

.field {
    scroll-margin-top: 100px;
}

.input-group {
    flex-wrap: nowrap;
}

.tooltip-inner {
    max-width: 370px !important;
}

.ck-editor__editable_inline {
    min-height: 50px;
}

placeholder {
    font-weight: bold;
    color: #DAA622;
}

.noUi-target .noUi-handle {
    background-color: var(--bs-secondary);
}

.noUi-target.noUi-sm {
    margin-bottom: 60px;
}

.noUi-value.noUi-value-horizontal:last-child {
    -webkit-transform: translate(-75%, 50%);
    transform: translate(-75%, 50%);
}

.form-check-input:checked {
    background-color: #DAA622;
}

.bg-white-hover:hover {
    background-color: #FFFFFF;
}

.header-image {
    padding-top: 0px;
}

@media (min-width: 576px) and (max-width: 768px) {
    .header-image {}
}

@media (min-width: 769px) and (max-width: 992px) {
    .header-image {}
}

@media (min-width: 993px) and (max-width: 1200px) {
    .header-image {}
}

@media (min-width: 1201px) and (max-width: 1400px) {
    .header-image {
        padding-top: 90px;
    }
}

@media (min-width: 1401px) {
    .header-image {
        padding-top: 90px;
    }
}

.unternehmenswegweiser-background {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 30%, rgba(255, 255, 255, 0.3)), linear-gradient(175deg, #036666 75%, #DAA622 75.2%);
}

.unternehmenswegweiser-background-alternate {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 30%, rgba(255, 255, 255, 0.3)), linear-gradient(177deg, #DAA622 35%, #036666 35.2%);
}

.unternehmenswegweiser-background-primary {
    background-color: #DAA622;
}

.unternehmenswegweiser-text-primary {
    color: #DAA622;
}

.unternehmenswegweiser-background-secondary {
    background-color: #036666;
}

.unternehmenswegweiser-text-secondary {
    color: #036666;
}

.unternehmenswegweiser-background-primary_important {
    background-color: #DAA622 !important;
}

.unternehmenswegweiser-text-primary_important {
    color: #DAA622 !important;
}

.unternehmenswegweiser-background-secondary_important {
    background-color: #036666 !important;
}

.unternehmenswegweiser-text-secondary_important {
    color: #036666 !important;
}

.unternehmenswegweiser-background-secondary_hover:hover {
    background-color: #036666;
}

.unternehmenswegweiser-border-primary {
    border: 1px solid #DAA622 !important;
}

.unternehmenswegweiser-border-secondary {
    border: 1px solid #036666 !important;
}

.price-button-left {
    border-top-left-radius: 2rem;
    border-bottom-left-radius: 2rem;
    border-color: #DAA622 !important;
    border-width: 2px !important;
}

.price-button-right {
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem;
    border-color: #DAA622 !important;
    border-width: 2px !important;
}

.price-button.active {
    background-color: #DAA622;
    font-weight: bold;
    color: white
}

.border-ddd {
    border: #ddd 1px solid;
}

@media (max-width: 1200px) {
    :root {
        --bs-app-header-height: 60px;
    }
}

.overlapping {
    /* gradient from transparent (top) to white (bottom) */
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0) 100%);
    height: 300px;
    margin-top: -300px;
    position: absolute;
}

.index-header-container {
    margin: auto -20px;
}

.index-header {
    min-height: calc(66vh - var(--bs-app-header-height));
}

@media (min-width: 576px) and (max-width: 768px) {
    .index-header {
        height: calc(100vh - var(--bs-app-header-height));
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    .index-header {
        height: calc(100vh - var(--bs-app-header-height));
    }
}

@media (min-width: 993px) and (max-width: 1200px) {
    .index-header {
        min-height: calc(100vh - var(--bs-app-header-height));
    }
}

@media (min-width: 1201px) and (max-width: 1400px) {
    .index-header {
        height: calc(100vh - var(--bs-app-header-height));
    }
}

@media (min-width: 1401px) {
    .index-header {
        height: calc(100vh - var(--bs-app-header-height));
    }
}

.grid-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    row-gap: 2.5rem;
}

.grid-features>div {
    padding: 1rem;
    border-left: solid 0.3rem #036666;
    margin-left: 2rem;
}

@media (min-width: 576px) and (max-width: 768px) {
    .grid-features {
        grid-template-columns: 1fr;
        grid-auto-rows: 1fr;
    }

    .grid-features>div {
        margin-left: 4rem;
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    .grid-features {
        grid-template-columns: 1fr;
        grid-auto-rows: 1fr;
    }

    .grid-features>div {
        margin-left: 4rem;
    }
}

@media (min-width: 993px) and (max-width: 1200px) {
    .grid-features {
        grid-template-columns: 1fr;
        grid-auto-rows: 1fr;
    }

    .grid-features>div {
        margin-left: 4rem;
    }
}

@media (min-width: 1201px) and (max-width: 1400px) {
    .grid-features {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 1fr;
    }

    .grid-features>div {
        margin-left: 4rem;
    }
}

@media (min-width: 1401px) {
    .grid-features {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 1fr;
    }

    .grid-features>div {
        margin-left: 4rem;
    }
}

.grid-phases {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    gap: 3.5rem;
}

@media (min-width: 576px) and (max-width: 768px) {
    .grid-phases {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    .grid-phases {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 993px) and (max-width: 1200px) {
    .grid-phases {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1201px) and (max-width: 1400px) {
    .grid-phases {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1401px) {
    .grid-phases {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-phases-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.grid-phases>div>div {
    margin: 0rem 2rem;
    padding: 1rem;
    padding-left: 2rem;
    border-left: solid 0.3rem #036666;
}

.grid-phases>div>i {
    padding-top: 1rem;
    font-size: 4rem;
    min-width: 4rem;
    text-align: center;
}

.grid-phases>div {
    display: flex;
    flex-direction: row;
}