/* #region ----------------------------------- vorteile ----------------------------------------- */

#vorteile-tabs {
    position: relative;
    margin-top: var(--distance-min);
    padding-bottom: calc(var(--distance-min) + 10px);
    background: var(--light-background) linear-gradient(to bottom, #ffffff, #ffffff 85px, rgba(255, 255, 255, 0) 85px);
}

#vorteile-tabs::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: -20px;
    background: url('../img/stripes/deko-2.webp') center no-repeat;
    width: 477px;
    height: 448px;
}

#vorteile-tabs>.row {
    z-index: 2;
    row-gap: var(--distance-min);
}

@media (min-width: 1200px) {
    #vorteile-tabs>.row {
        max-width: 1350px;
    }
}

#vorteile-tabs .tab::before {
    content: "";
    display: block;
    width: 170px;
    height: 170px;
    box-shadow: var(--shadow);
    background: var(--secondary-color) url('../img/icons/gruppe.webp') center no-repeat;
    border-radius: 50%;
    margin: 0 auto 35px auto;
    border: 10px solid #ffffff;
    box-sizing: border-box;
}

#vorteile-tabs .tab-2::before {
    background-image: url('../img/icons/profil.webp?v=1');
}

#vorteile-tabs .tab-3::before {
    background-image: url('../img/icons/zahnrad.webp');
}

#vorteile-tabs .tab-4::before {
    background-image: url('../img/icons/schild.webp');
}

/* #endregion -------------------------------- vorteile ----------------------------------------- */

/* #region ---------------------------------- funktionen ---------------------------------------- */

#funktionen {
    padding: var(--distance-large) 0;
    background: url('../img/welle.webp') center bottom 389px / 100% auto no-repeat, linear-gradient(to top, var(--light-background), var(--light-background) 390px, rgba(255, 255, 255, 0) 390px);
}

#funktionen>.row+.row {
    margin-top: var(--distance-small);
    row-gap: var(--distance-min);
}

#funktionen .tab .small-heading {
    margin-bottom: 6px;
}

#funktionen .tab {
    position: relative;
    padding-left: 120px;
}

@media (min-width: 992px) {
    #funktionen .tab {
        padding-left: 115px;
        position: relative;
    }

    #funktionen .tab:is(.tab-1, .tab-2, .tab-3) {
        padding-left: unset;
        padding-right: 115px;
    }

    #funktionen .tab {
        max-width: 420px;
    }

    #funktionen .tabs-right .tab {
        margin-left: auto;
    }

    #funktionen .tabs-left>.tab:nth-child(1) {
        right: -40px;
    }

    #funktionen .tabs-left>.tab:nth-child(3) {
        right: -60px;
    }

    #funktionen .tabs-right>.tab:nth-child(1) {
        left: -40px;
    }

    #funktionen .tabs-right>.tab:nth-child(3) {
        left: -60px;
    }
}

@media (min-width: 1200px) {
    #funktionen .tab {
        padding-left: 130px;
    }

    #funktionen .tab:is(.tab-1, .tab-2, .tab-3) {
        padding-right: 130px;
    }
}

#funktionen .tab+.tab {
    margin-top: var(--distance-small);
}

@media (min-width: 992px) {
    #funktionen .tab::before {
        content: "";
        background: url('../img/droplet.svg') center / cover no-repeat;
        width: 120px;
        height: 100px;
        position: absolute;
        top: calc(50% - 50px);
        left: 0;
    }
}

#funktionen .tab::after {
    content: "contrast";
    font-size: 55px;
    display: block;
    background: #ffd42a;
    color: #1a1a1a;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    top: calc(50% - 50px);
    left: 0;
    font-family: "Material Icons";
    font-weight: 400;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    speak: never;
    overflow: hidden;
    display: grid;
    place-items: center;
}

@media (min-width: 992px) {
    #funktionen .tab::after {
        width: 100px;
        height: 100px;
    }

    #funktionen .tabs-left .tab::before {
        left: unset;
        right: -20px;
        transform-origin: 50px 50px;
    }

    #funktionen .tabs-left .tab-1::before {
        transform: rotate(20deg);
    }

    #funktionen .tabs-left .tab-3::before {
        transform: rotate(-20deg);
    }

    #funktionen .tabs-left .tab::after {
        left: unset;
        right: 0;
    }

    #funktionen .tabs-right .tab::before {
        transform: scaleX(-1);
        left: -20px;
    }

    #funktionen .tabs-right .tab-4::before {
        transform: scaleX(-1) rotate(20deg);
    }

    #funktionen .tabs-right .tab-6::before {
        transform: scaleX(-1) rotate(-20deg);
    }
}

#funktionen .tab-2::after {
    content: "format_size";
}

#funktionen .tab-3::after {
    content: "brush";
}

#funktionen .tab-4::after {
    content: "ear_sound";
}

#funktionen .tab-5::after {
    content: "hide_image";
}

#funktionen .tab-6::after {
    content: "accessibility_new";
}

#funktionen .computer-mockup {
    z-index: 1;
    position: relative;
    display: block;
    width: 100%;
    background: url('../img/bild-pc-bildschirm.webp') center / contain no-repeat;
    max-width: 300px;
    padding: 8px 10px 90px 10px;
    margin: 0 auto;
}

@media (min-width: 1200px) {
    #funktionen .computer-mockup {
        max-width: 445px;
        padding: 18px 13px 140px 13px;
    }
}

#funktionen .computer-mockup img {
    width: 100%;
    border-radius: 2px;
}

@media (min-width: 992px) {
    #funktionen .button-style {
        margin-top: 20px;
    }
}

/* #endregion ------------------------------- funktionen ---------------------------------------- */

/* #region ----------------------------------- versionen ---------------------------------------- */

#versionen {
    position: relative;
    padding: var(--distance-large) 0;
    background: var(--light-background) url('../img/stripes/deko-3.webp') top right no-repeat;
}

#versionen>.row {
    z-index: 2;
}

#versionen-tabs {
    background: #fdf9e9;
    border-radius: 50px;
    border: 5px dashed var(--main-color);
    margin-bottom: clamp(60px, 7vw, 130px);
}

@media (min-width: 992px) {
    #versionen-tabs {
        padding: var(--distance-small) 35px 0 35px;
    }
}

#versionen-tabs .tab {
    border-radius: 20px;
    padding: 30px 40px 50px 40px;
    height: calc(100% + calc(var(--distance-min) + 10px));
}

@media (max-width: 991px) {
    #versionen-tabs :is(.tab-2, .tab-3) {
        padding-top: 0;
    }
}

@media (min-width: 992px) {
    #versionen-tabs .tab {
        background: #fdf9ed;
        box-shadow: var(--shadow);
        margin-bottom: calc((var(--distance-min) + 10px) * -1);
    }
}

#versionen-tabs .tab :is(h1, h2, h3, h4, h5, h6, b, strong) {
    font-size: 1.5625rem;
}

#versionen-tabs .tab :is(h1, h2, h3, h4, h5, h6) {
    background: var(--secondary-color);
    width: calc(100% + 30px);
    margin: 90px -15px 40px -15px;
    border-radius: 60px 20px 20px 60px;
    position: relative;
    padding: 17px 30px;
}

@media (min-width: 576px) {
    #versionen-tabs .tab :is(h1, h2, h3, h4, h5, h6) {
        padding-left: 120px;
        margin-top: 0;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    #versionen-tabs .tab :is(h1, h2, h3, h4, h5, h6) {
        padding-left: 60px;
    }
}

#versionen-tabs .tab :is(h1, h2, h3, h4, h5, h6)::before {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    box-shadow: var(--shadow);
    background: var(--secondary-color) url('../img/icons/chatbot.webp') center no-repeat;
    border-radius: 50%;
    border: 5px solid #ffffff;
    box-sizing: border-box;
    position: absolute;
    left: calc(50% - 50px);
    top: -90px;
}

@media (min-width: 576px) {
    #versionen-tabs .tab :is(h1, h2, h3, h4, h5, h6)::before {
        left: 0;
        top: calc(50% - 50px);
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    #versionen-tabs .tab :is(h1, h2, h3, h4, h5, h6)::before {
        left: -50px;
    }
}

#versionen-tabs .tab-2 :is(h1, h2, h3, h4, h5, h6)::before {
    background-image: url('../img/icons/chatbot-mit-stern.webp');
}

#versionen-tabs .tab-3 :is(h1, h2, h3, h4, h5, h6)::before {
    background-image: url('../img/icons/lautsprecher.webp');
}

/* #endregion -------------------------------- versionen ---------------------------------------- */

/* #region ----------------------------------- referenzen --------------------------------------- */

@media (min-width: 1200px) {
    #referenzen .row {
        max-width: 1200px;
    }
}

#referenzen {
    padding-top: var(--distance-large);
    position: relative;
    background: var(--light-background) linear-gradient(to top, #ffffff, #ffffff 30px, rgba(255, 255, 255, 0) 30px);
}

#referenzen::after {
    content: "";
    display: block;
    background: #f9f9f9;
    position: absolute;
    left: 0;
    top: 15px;
    bottom: 30px;
    width: 100%;
    max-width: 1660px;
    margin-right: 15px;
    border-radius: 0 300px 300px 0;
}

#referenzen>.row {
    z-index: 2;
}

#referenzen>.row+.row {
    margin-top: var(--distance-min);
}

#referenzen img {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
    border: 2px solid var(--main-color);
}

#referenzen-tabs .row {
    row-gap: var(--distance-min);
}

#referenzen-tabs .template-page>.row>.col-xs-12>div {
    box-shadow: var(--shadow);
}

#referenzen-tabs .template-page>.row>.col-xs-12>div:nth-child(2) {
    position: relative;
    z-index: 2;
    background: #ffffff;
    padding: 20px;
    border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
}

/* #endregion -------------------------------- referenzen --------------------------------------- */

/* #region -------------------------------------- demo ------------------------------------------ */

#demo {
    padding: var(--distance-large) 0 var(--distance-small) 0;
    background:
        url('../img/stripes/deko-4.webp') top 250px center no-repeat,
        url('../img/bubbles/footer-1.svg') top 250px center no-repeat;
}

@media (min-width: 992px) {
    #demo {
        background:
            url('../img/bild-bildschirme-und-frau-im-rollstuhl.webp') bottom -1px right calc(50% + 400px) no-repeat,
            url('../img/stripes/deko-4.webp') top 250px center no-repeat,
            url('../img/bubbles/footer-1.svg') top 250px center no-repeat;
    }
}

#demo-form .big-content .formgen {
    column-count: auto;
    column-gap: 0;
    margin-top: 0 !important;
}

#demo-form form {
    padding: 15px 30px 30px 30px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: var(--shadow);
}

#demo-form .formgen_top :is(label, legend),
#demo-form legend.formgen_top {
    font-size: inherit;
    opacity: 1;
}

#demo-form .formgen>p:first-child {
    position: absolute;
    left: -200vw;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

#demo-form p.formgen_small {
    font-size: 1rem;
}

#demo-form form .formgen>.formgen_row:not([id*="captcha"], .phone-wrapper, fieldset) {
    margin-top: -10px !important;
    margin-bottom: 0 !important;
}

#demo-form form .phone-wrapper {
    margin-top: 10px;
    margin-bottom: 0 !important;
}

#demo-form form textarea {
    height: 130px !important;
    margin-bottom: 15px !important;
}

#demo-form form fieldset {
    margin-top: 15px !important;
}

#demo-form form .formgen>.formgen_row+fieldset .subfield {
    padding: 0;
}

#demo-form form .formgen>.formgen_row+fieldset .subfield label {
    margin-left: 15px;
    font-size: 1rem;
    font-weight: var(--weight-bold);
    bottom: -1px;
    padding: 0;
}

#demo-form input[type="submit"] {
    margin-right: auto;
    display: block;
    margin-top: 30px;
}

#demo-form :is(.vorwahl_div, .telefon_div) {
    margin-top: -15px;
}

#demo-form .formgen_top :is(label, .formgen_fieldset_label),
#demo-form :is(.vorwahl_div, .telefon_div) label>span {
    background: #ffffff;
    padding: 2px 6px;
    margin-left: 20px;
    position: relative;
    z-index: 1;
    bottom: -15px;
    border-radius: 4px;
    display: inline-block;
}

#demo-form :is(input:is([type="text"], [type="tel"], [type="email"], [type="number"]), select, textarea) {
    padding: 14px 15px 6px 15px;
    border-radius: 8px;
    border: 2px solid #b2b2b2 !important;
    width: 100% !important;
    margin: 0;
}

#demo-form .vorwahl_div {
    width: clamp(110px, 10vw, 130px) !important;
    flex-shrink: 0;
}

#demo-form .phone-wrapper .formgen_bottom {
    width: 100% !important;
}

#demo-form h2.legacy_h6 {
    margin: 0;
    font-size: inherit;
}

#demo-form .law-addition {
    margin-top: 20px;
}

#demo-form .formgen_row .subfield {
    border: none;
}

/* #endregion ----------------------------------- demo ------------------------------------------ */