@media (max-width: 1240px) {
    :root {
        --width: 90vw;
        --content-width: 90vw;
        --padding: 3rem;
        --content-padding: 6rem;
    }
}


@media (max-width: 1080px) {
    :root {
        --factor: 0.5;
    }
}

@media (max-width: 769px) {
    :root {
        --factor: 0.55;
        --h2: calc(4.5rem * var(--factor));
        --h1: calc(5.5rem * var(--factor));
        --box: var(--fontsize);
        --footer: var(--fontsize);
        --padding: 2rem;
        --content-padding: 2rem;
    }
}

@media (min-width: 1921px) {
    :root {
        --factor: 0.76;
    }
}

:root {
    --scrollbar: 2rem;
}

::-webkit-scrollbar {
    width: 2rem;
}

::-webkit-scrollbar-track {
    background: #3c727645;
}

::-webkit-scrollbar-thumb {
    background: var(--green);
}

strong {
    color: var(--green);
    font-weight: var(--bold, 600);
}

section {
    position: relative;
}

section .scroll_top {
    position: absolute;
    left: 100%;
    bottom: 0;
    height: 1em;
    width: 2em;
    transform: translateX(var(--gap));
    background-color: var(--gray);
    clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
    transition: all .3s ease;
}

section .scroll_top:hover {
    transform: translateX(var(--gap)) translateY(-0.25em);
}

@media (max-width:1240px) {
    section .scroll_top {
        transform: none;
        top: 100%;
        right: 0;
        left: auto;
    }

    section .scroll_top:hover {
        transform: translateY(-0.25em);
    }

    section {
        margin-bottom: 1em;
    }
}


li::marker {
    content: '♦';
    color: var(--green);
}

main ul,
.content ul {
    padding-left: .5em;
}

main li,
.content li {
    padding-left: .5em;
}

.box {
    background-color: var(--gray);
    /* border: .3rem solid var(--green); */
    padding-bottom: 4em;
    position: relative;
    gap: 2em;
}

.box:before {
    content: '';
    display: block;
    position: absolute;
    pointer-events: none;
    background-image: url(../img/box.png);
    width: 186.5%;
    aspect-ratio: 3;
    background-size: contain;
    background-repeat: no-repeat;
    left: 25.25%;
    bottom: 0%;
    transform: translate(-50%, 28%);
    pointer-events: none;
}

.box:after {
    content: '';
    position: absolute;
    background-image: linear-gradient(90deg, transparent 0%, var(--green) 5%, var(--green) 33.35%, transparent 33.35%, transparent 66.66%, var(--green) 66.66%, var(--green) 95%, transparent 100%);
    width: calc(186.5% * 3);
    aspect-ratio: calc(3 * 3);
    left: 25.25%;
    bottom: 0%;
    transform: translate(-50%, 28%) rotate(-0.6deg);
    background-size: 100% .3rem;
    background-position: center 89.5%;
    background-repeat: no-repeat;
    transform-origin: center bottom;
    pointer-events: none;
}

.box h2 {
    background-color: var(--green);
    color: var(--white);
    font-size: calc(var(--footer) * 1.25);
    text-transform: none;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    font-family: inherit;
    font-weight: var(--bold, 600);
}

.box.content>*,
.box>* {
    padding-left: 2vw;
    padding-right: 2vw;
}

main .box.content ul {
    column-count: 2;
    gap: 33%;
    list-style: square;
    column-width: 10rem;
    margin: 1em 0;
}

@media (max-width:768px) {
    main .box.content ul {
        column-count: 1;
    }

    .box {
        margin-right: calc(0px - var(--content-padding));
        margin-bottom: 14vw;
    }

    .box.content>*,
    .box>* {
        padding-left: 2rem;
        padding-right: calc(2rem + var(--content-padding));
    }

    .box.content>ul,
    .box>ul {
        padding-left: calc(2rem + 1em);
    }

    .box:before {
        width: 250%;
        left: 34%;
    }

    .box:after {
        content: none;
        width: calc(250% * 3);
        left: 34%;
    }
}

main .box.content li {
    padding-left: .5em;
    margin-left: -0.5em;
}

.img_wrapper {
    width: 30rem;
    align-self: stretch;
    position: relative;
    display: flex;
    z-index: -1;
    justify-content: flex-start;
    align-self: flex-end;
}

.img_wrapper span {
    position: relative;
}

.img_wrapper img {
    width: auto;
    max-width: calc(var(--content-width) + 7.5vw);
    pointer-events: none;
    height: calc(100% + 10rem);
    margin-top: -5rem;
    margin-bottom: -5rem;

    margin-left: -7.5vw;
}

@media (max-width: 1080px) {
    .img_wrapper {
        width: 100%;
    }

    .img_wrapper img {
        width: 100vw;
        max-width: 100vw;
        margin: 0;
        height: auto;
        margin-left: calc(0px - var(--content-padding));
        margin-right: calc(0px - var(--content-padding));
    }

    section > .img_wrapper {
        order: 0;
    }

    section > * {
        order: 1;
    }
}

@media (min-width: 1081px) {
    #erkennen .img_wrapper span:before {
        content: '';
        width: calc(var(--content-padding) * 2);
        height: .16vw;
        background-color: var(--green);
        position: absolute;
        display: block;
        border-radius: 1rem;
        left: 99.9%;
        bottom: -12.3%;
    }


    #veraendern .img_wrapper img {
        margin-left: 0;
        margin-right: -5vw;
        max-width: none;
        display: block;
    }

    #veraendern .img_wrapper {
        justify-content: flex-end;
        align-self: stretch;
    }

    #veraendern .img_wrapper span:before,
    #veraendern .img_wrapper span:after {
        content: '';
        width: calc(var(--content-padding) * 2);
        height: .16vw;
        background-color: var(--green);
        position: absolute;
        display: block;
        border-radius: 1rem;
    }

    #veraendern .img_wrapper span:before {
        left: calc(100% + 5vw);
        top: 20.5%;
    }

    #veraendern .img_wrapper span:after {
        right: 100%;
        bottom: -5rem;
    }

    #entwickeln {
        display: grid;
        grid-template-columns: auto 1fr;
    }

    #entwickeln .content {
        grid-row-end: span 2;
        width: 100%;
    }

    #entwickeln .content> :last-child:before {
        content: '';
        display: block;
        width: 100%;
        aspect-ratio: 2;
        clip-path: polygon(0% 100%, 100% 0%, 100% 100%);
        shape-outside: polygon(0% 100%, 100% 0%, 100% 100%);
        float: right;
        margin-top: 7.5rem;
        pointer-events: none;
    }


    #entwickeln .img_wrapper span:before,
    #entwickeln .img_wrapper span:after {
        content: '';
        width: calc(var(--content-padding) * 2);
        height: .16vw;
        background-color: var(--green);
        position: absolute;
        display: block;
        border-radius: 1rem;
    }

    #entwickeln .img_wrapper span:before {
        left: 99.8%;
        top: -1.9%;
        transform-origin: left top;
        transform: rotate(-30deg)
    }

    #entwickeln .img_wrapper span:after {
        right: calc(100% + 7.5vw);
        bottom: -1.75%;
        transform-origin: right top;
        transform: rotate(10deg)
    }



    #my_team .img_wrapper {
        width: 100%;
        flex-grow: 1;
        margin-top: -7.5rem;
    }

    #my_team .img_wrapper img {
        width: 100%;
        margin: 0;
        height: auto;
        max-width: 100%;
    }

    #my_team .img_wrapper span {
        display: block;
        width: 100%;
    }

    #my_team .img_wrapper span:before,
    #my_team .img_wrapper span:after {
        content: '';
        width: calc(var(--content-padding) * 2);
        height: .3vw;
        background-color: var(--green);
        position: absolute;
        display: block;
        border-radius: 1rem;
        bottom: 5.1%;
    }

    #my_team .img_wrapper span:before {
        right: 98%;
    }

    #my_team .img_wrapper span:after {
        left: 98%;
    }
}

@media (max-width: 768px) {

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        width: 100%;
        hyphens: auto;
    }
}