/* --------------------------------------------- header ----------------------------------------- */

@media (min-width: 992px) {
    header {
        background: url('../../img/circle.svg') left 80px bottom 110px / 280px auto no-repeat, url('../../img/circle.svg') right -190px top -220px / 580px auto no-repeat;
    }
}

header>.row:first-child::after {
    --background-image: url("../../img/header/pflegedienste.webp");

    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 44%, rgb(255, 255, 255) 66%), var(--background-image) left center / cover no-repeat !important;
}

header.header-878979>.row:first-child::after {
    --background-image: url('../../img/header/kinder-jugendhilfe.webp');
}

header.header-878980>.row:first-child::after {
    --background-image: url('../../img/header/eingliederungshilfe.webp');
}

header.header-878981>.row:first-child::after {
    --background-image: url('../../img/header/wohlfahrtsverbaende.webp');
}

@media (min-width: 576px) {
    header>.row:first-child::after {
        top: -50px;
        height: 250px;
    }
}

@media (min-width: 992px) {
    header>.row:first-child::after {
        border-radius: 5px;
        right: 45px;
    }
}

@media (min-width: 992px) {
    header {
        padding: var(--distance-small) 0;
    }

    header>.row:first-child::after {
        border-top-left-radius: 200px;
        top: 0;
        bottom: 0;
        height: unset;
        right: unset;
        width: 58vw;
        max-width: 850px;
        left: 15px;
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, 1) 66%), url('../../img/header/teamsitzung.webp?v=1') center left / cover no-repeat;
    }
}

@media (min-width: 1400px) {
    header>.row:first-child::after {
        left: -50px;
    }
}

@media (min-width: 1600px) {
    header>.row:first-child::after {
        left: -100px;
    }
}

header>.row {
    row-gap: 20px;
    padding: var(--distance-small) 0;
}

@media (max-width: 991px) {
    header>.row {
        padding-top: 230px;
    }
}

@media (min-width: 1400px) {
    header .button-style {
        margin-right: -50px;
        width: auto;
    }
}

@media (min-width: 1600px) {
    header .button-style {
        margin-right: -100px;
    }
}

/* -------------------------------------------- content ----------------------------------------- */

#software-1,
#software-2,
#software-3,
#faq {
    padding: var(--distance-small) 0;
}

#software-2>.row {
    row-gap: 30px;
}

#software-2 .no-button a:not(.has-image):not(.slick-arrow) {
    padding: 0;
    background: none;
    text-transform: unset;
    box-shadow: unset;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    color: var(--main-color);
}

#software-2 .no-button a:not(.has-image):not(.slick-arrow):is(:hover, :focus) {
    text-decoration: underline;
}

#software-2 .no-button a:not(.has-image):not(.slick-arrow)::after {
    content: unset;
}

#software-2 .no-button a:not(.has-image):not(.slick-arrow)::before {
    content: "";
    position: static;
    transform: none;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 4px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23d10000'%3E%3Cpath d='M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z'/%3E%3C/svg%3E") center / contain no-repeat;
    vertical-align: middle;
}

#software-1>.row {
    row-gap: 30px;
}

#software-1 .tab {
    overflow: hidden;
    padding-top: 220px;
}

#software-1 .tab .template-page :is(.row, .row>div) {
    position: static;
}

#software-1 img {
    display: block;
    width: 100%;
    height: 195px;
    position: absolute;
    object-fit: cover;
    top: 0;
    right: 0;
    left: 0;
}

#software-2 .tab h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    text-transform: uppercase;
}

#software-2 .tab .cke-icon-wrapper,
#software-2 .tab .momikom {
    border-radius: 2px;
    box-shadow: var(--shadow);
    padding: 4px;
    font-size: 26px;
    line-height: 0;
    overflow: hidden;
    max-width: 34px;
    flex-shrink: 0;
}

#software-2 .tab .cke-icon-wrapper {
    background: #ba0a83;
    color: #fff;
}

#software-2 .tab .momikom {
    width: 34px;
    height: 34px;
    background: #ffffff url('../../img/momikom.webp') center / contain no-repeat;
}

#software-2 :is(.tab-879012, .tab-879407, .tab-879486) .cke-icon-wrapper {
    background: #0279ac;
}

#software-2 :is(.tab-879486, .tab-879487) .cke-icon-wrapper:nth-child(2) {
    background: #674172;
}

#software-2 .tab-879487 .cke-icon-wrapper:nth-child(1) {
    background: #aC232a;
}

#software-3>.row {
    row-gap: 40px;
}

#software-3 .tab::before {
    content: "";
    position: absolute;
    top: -21px;
    left: calc(50% - 21px);
    display: inline-block;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    box-shadow: 1px 3px 2px rgba(0, 0, 0, 0.16);
    background: var(--main-color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M7.135,1.491a1,1,0,0,1,1.73,0l6.264,10.8a1,1,0,0,1-.865,1.5H1.736a1,1,0,0,1-.865-1.5Z' transform='translate(0 16) rotate(-90)' fill='%23fff'/%3E%3C/svg%3E%0A") center / 18px auto no-repeat;
    background-position: center !important;
    position: absolute;
    transform: rotate(-90deg);
}

/* #region faq ---------------------------------------------------- */

#faq {
    background-image: url('../../img/circle.svg'), url('../../img/circle.svg'), url('../../img/circle.svg'), url('../../img/circle.svg');
    background-position: right calc(50% + 750px) top 360px, right calc(50% + 850px) top 600px, left calc(50% + 900px) top 340px, left calc(50% + 800px) top 700px;
    background-size: 140px auto, 80px auto, 320px auto, 120px auto;
    background-repeat: no-repeat;
}

#faq .banner {
    overflow: hidden;
    position: relative;
    transform: rotate3d(0, 1, 0, 8deg) translateX(-8px);
}

#faq .banner img {
    border-radius: 22px;
    margin-bottom: 30px;
}

@media (min-width: 992px) {
    #faq .banner {
        position: relative;
        left: 20px;
    }
}

#faq-button {
    margin: 20px auto;
    display: block;
}

#faq .col-img {
    perspective: 500px;
    position: relative;
}

#faq .banner {
    overflow: hidden;
    position: relative;
    transform: rotate3d(0, 1, 0, 8deg) translateX(-8px);
}

@media (max-width: 991px) {
    #faq .col-img .banner {
        max-width: 200px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* #endregion faq ------------------------------------------------- */

footer {
    margin-top: 30px;
}