html {
    overflow-x: hidden;
    height: 100%;
    --borders: var(--primary);
    --borders-offset: 4px;
    --font: black;
    --background: antiquewhite
}

* {
    box-sizing: border-box
}

body {
    --body-margin-min: 0;
    --body-margin-max: 300px;
    --body-margin-set: 5vw;
    --body-margin: clamp(var( --body-margin-min), var(--body-margin-set), var(--body-margin-max));
    display: grid;
    align-content: start;
    justify-items: center;
    align-items: start;
    justify-content: normal;
    grid-auto-rows: auto;
    grid-auto-flow: row;
    grid-template-columns: var(--body-margin) repeat(5,minmax(auto,1fr)) var(--body-margin);
    overflow-x: hidden;
    /*! height: 137%; */
    margin: 0 0;
    min-height: 100vh;
    background-color: hsla(0,0%,0%,.3);
    background-attachment: scroll;
    background-blend-mode: darken;
    background-repeat: repeat-y;
    background-size: cover
}

[role=banner] {
    width: 80%;
    margin: auto;
    margin-top: 1rem;
    height: clamp(100px,10svh,250px);
    outline: thin solid var(--borders);
    outline-offset: 4px;
    height: clamp(150px,25svh,250px);
    grid-row: 1/span 1;
    margin-top: 1rem
}

[role=navigation] {
    padding: 2rem 0 0 0;
    margin-top: calc(2rem - var(--borders-offset));
    position: sticky;
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    justify-self: right;
    width: 80%;
    margin: auto
}

aside {
    grid-column: 1/3;
    grid-row: 3/span 1;
    display: flex;
    margin: 0 30px
}

footer {
    grid-area: footer;
    width: 80vw;
    margin: auto;
    border-top: thin solid #000
}

main {
    grid-column: 1/-1;
    grid-row: 3/span 1
}

aside {
    grid-column: 1/3;
    grid-row: 3/span 1
}

@media (min-width: 640px) {
    body {
        --body-margin-min:50px;
        --body-margin-max: 300px;
        --body-margin-set: 5vw;
        --body-margin: clamp(var(--body-margin-min), var(--body-margin-set), var(--body-margin-max))
    }

    [role=banner] {
        width: 100%;
        grid-column: 2/-2;
        grid-row: 1/span 1
    }

    [role=navigation] {
        padding: 2rem 2rem;
        margin-top: calc(2rem - var(--borders-offset));
        position: relative;
        grid-column: 6;
        grid-row: 1;
        align-self: center
    }
}

@media (min-width: 1024px) {
    body {
        --body-margin-min:50px;
        --body-margin-max: 300px;
        --body-margin-set: 5vw;
        --body-margin: clamp(var( --body-margin-min), var(--body-margin-set), var(--body-margin-max));
        -moz-column-gap: 0px;
        column-gap: 1rem;
        row-gap: 0;
        justify-items: center;
        justify-content: normal;
        grid-auto-rows: auto;
        grid-auto-flow: row;
        grid-template-columns: var(--body-margin) repeat(5,minmax(auto,1fr)) var(--body-margin)
    }

    [role=banner] {
        height: clamp(100px,30svh,250px);
        grid-column: 2/7;
        grid-row: 1/span 1;
        margin-top: 1rem
    }

    [role=navigation] {
        position: static;
        grid-column: 2/3;
        grid-row: 2/span 1;
        border-bottom: none;
        z-index: 0
    }

    main {
        grid-column: 3/-2;
        grid-row: 2/span 1;
        margin-left: 5vw
    }

    aside {
        grid-column: 1/3;
        grid-row: 3/span 1
    }

    #line-1 {
        display: block;
        width: 100%;
        border-bottom: 1px solid var(--borders);
        grid-row: 3;
        grid-column: 1/6
    }

    #line-2 {
        display: block;
        height: 100%;
        width: 0;
        border-right: 1px solid var(--borders);
        grid-row: 2;
        grid-column: 2/2;
        z-index: 2;
        justify-self: end
    }

    #line-3 {
        display: block;
        width: 100%;
        border-bottom: 1px solid var(--borders);
        grid-row: 2;
        grid-column: 6/8;
        z-index: 2;
        justify-self: end
    }

    #line-4 {
        display: none;
        height: 100%;
        min-height: 100vh;
        width: 1px;
        border-right: 1px solid var(--borders);
        grid-row: 2/2;
        grid-column: 6;
        z-index: 24;
        justify-self: end
    }

    #area-2 {
        height: 100vh;
        outline: 1px solid black;
        grid-row: 2/3;
        grid-column: 2/span 5;
        justify-self: end;
        width: 100%;
        background-color: #fff7eb;
        z-index: -1
    }

    #area-3 {
        display: none;
        height: 100%;
        grid-column: 1/1;
        justify-self: end;
        width: 100%;
        background-color: red;
        z-index: -2
    }
}

@media (min-width: 1280px) {
    body {
        --body-margin-min:50px;
        --body-margin-max: 300px;
        --body-margin-set: 15vw;
        --body-margin: clamp(var( --body-margin-min), var(--body-margin-set), var(--body-margin-max))
    }

    #area-1 {
        display: block;
        min-width: 147px;
        width: 40%;
        max-width: 175px;
        aspect-ratio: 1;
        grid-row: 1/2;
        grid-column: 1/span 2;
        clip-path: ellipse(75% 80% at 14.58% 15.5%);
        z-index: -1;
        place-self: start start
    }

    #area-1::after {
        content: 'Härer Gerüst-bau';
        font-size: min(3vw, 1.5rem);
        width: 50%;
        display: block;
        word-wrap: normal;
        font-weight: 500;
        /*! border-left: 2px solid black; */
        /*! border-top: 2px solid black; */
        line-height: 1.1;
        text-transform: uppercase;
        color: #000;
        padding: .5rem;
        margin: 1rem;
        outline: thin solid var(--borders);
        outline-offset: var(--borders-offset);
        background-color: var(--background);
        border: thin solid var(--complementary)
    }
}

body[data-background]::before {
    content: "";
    position: absolute;
    /*! top: 0; */
    /*! left: 0; */
    width: 100%;
    height: 100%;
    background-color: #05ff5a00;
    z-index: -999;
    background-blend-mode: lighten;
    filter: grayscale(0%) brightness(100%);
    background-origin: border-box;
    opacity: .2
}

main {
    --min-gap: 70px;
    --data-gap: 6%;
    --gap: max(var( --data-gap), var(--min-gap));
    --available-width: calc(100% - var( --gap));
    padding: 2rem 2rem;
    width: 80%;
    margin: auto;
    margin-top: 2rem;
    margin-bottom: 3rem;
    z-index: 0;
    backdrop-filter: brightness(0.5);
    background-color: var(--background);
    outline: thin solid var(--borders);
    outline-offset: 4px;
    color: #000;
    border: 1px solid var(--complementary);
}

.underline {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 1px
}

.align-left {
    text-align: left
}

.align-right {
    text-align: right
}

.align-justify {
    text-align: justify
}

.align-center {
    text-align: center
}

main :is(h1,h2,h3,h4,h5) {
    width: 100%
}

main h1:first-of-type {
    margin-top: 0;
    padding-top: 0
}

main h1 {
    position: relative;
    width: fit-content;
    text-wrap: pretty;
    word-break: auto-phrase;
    hyphens: auto;
    line-height: normal;
    font-weight: 600;
    margin-bottom: 2rem;
    line-height: 1.1
}

h1::before {
    content: '';
    display: block;
    position: absolute;
    top: 100%;
    right: -1px;
    border-bottom: 1px solid var(--borders);
    width: calc(100% + 100vw)
}

main p:first-of-type {
    margin-top: 0
}

main p {
    margin-top: 0;
    margin-bottom: 1rem;
    text-align: left;
    width: 100%;
    line-height: 1.7
}

main ul {
    margin-top: 0;
    margin-bottom: clamp(2rem,5%,5rem)
}

main:has(un-img-lightbox[data-state="open"]) {
    ul.leistungen {
        /*display: none;*/
    }
}

main li {
    margin-bottom: .5rem;
    line-height: 1.3
}

main a {
    text-decoration-color: var(--primary);
    color: var(--font)
}

main a:hover {
    color: var(--primary)
}

.flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap);
    align-items: var(--align-items,start);
    width: 100%;
    justify-content: center
}

.flex-item {
    width: 100%;
    min-width: var(--min-width,175px);
    margin-bottom: 1rem
}

@media(min-width: 640px) {
    main {
        width:80%
    }

    main h1 {
        font-size: 2rem;
        text-decoration-thickness: 10px
    }

    .flex {
        justify-content: var(--justify-content,space-between)
    }

    .flex-item {
        width: calc(var(--width) - var(--gap))
    }
}

@media (min-width: 1024px) {
    main {
        width:100%
    }

    h1::before {
        content: '';
        display: block;
        position: absolute;
        top: 100%;
        right: -1px;
        border-bottom: 1px solid var(--borders);
        width: calc(100% + 51px)
    }
}

@media (min-width: 1280px) {
    h1::before {
        content:'';
        display: block;
        position: absolute;
        top: 100%;
        right: -1px;
        border-bottom: 1px solid var(--borders);
        width: calc(100% + 51px)
    }

    main h1 {
        font-size: 2.6rem;
        margin-bottom: 3rem;
        text-decoration-thickness: 12px;
        line-height: 1.3
    }
}