/********** MAIN ***********/

.divider-main-top {
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 1;
}

.divider-main-top svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 25px;
}

.divider-main-top .shape-fill {
    fill: var(--color-brown);
}

.divider-main-bottom {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.divider-main-bottom svg {
    position: relative;
    display: block;
    width: calc(219% + 1.3px);
    height: 50px;
    transform: rotateY(180deg);
}

.divider-main-bottom .shape-fill {
    fill: var(--color-brown);
}

@media (min-width: 64rem) {
    .divider-main-bottom svg {
        position: relative;
        display: block;
        width: calc(219% + 1.3px);
        height: 113px;
        transform: rotateY(180deg);
    }

}

/********** HERO ***********/

.divider-hero-bottom {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.divider-hero-bottom svg {
    position: relative;
    display: block;
    width: calc(219% + 1.3px);
    height: 113px;
    transform: rotateY(180deg);
}

.divider-hero-bottom .shape-fill {
    fill: var(--color-background);
}

/********** LEISTUNGEN ***********/

.divider-leistungen-bottom {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.divider-leistungen-bottom svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 39px;
    transform: rotateY(180deg);
}

.divider-leistungen-bottom .shape-fill {
    fill: var(--color-background);
}

.divider-leistungen-top {
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.divider-leistungen-top svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 59px;
    transform: rotateY(180deg);
}

.divider-leistungen-top .shape-fill {
    fill: var(--color-background);
}

/********** kontakt ***********/

.divider-kontakt-bottom {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.divider-kontakt-bottom svg {
    position: relative;
    display: block;
    width: calc(219% + 1.3px);
    height: 80px;
}

.divider-kontakt-bottom .shape-fill {
    fill: var(--color-background);
}