/*
Navbar/Logo
*/

header {
    padding-top: var(--iw-space-medium);
}

header img {
    width: 170px;
    height: auto;
    transition: ease 400ms width;
}

@media (min-width: 768px) {
    header img {
        width: 220px;
    }
}

@media (min-width: 1200px) {
    header {
        padding-top: var(--iw-space-large);
    }
    header img {
        width: 270px;
    }
}



/*
Background & Spacer
*/

#background img {
    width: 100%;
    height: auto;
    min-height: 450px;
    object-fit: cover;
    object-position: center;
}

#spacer {
    height: var(--iw-space-medium);
}

@media (min-width: 768px) {
    #background {
        position: absolute;
    }
    #spacer {
        height: 50vw;
    }
}

@media (min-width: 768px) {
    #spacer {
        height: 55vw;
    }
}



/*
Header
*/

#header-1 p,
#header-2 p,
#header-3 p {
    text-align: center;
}
@media (min-width: 768px) {
    #header-1 p,
    #header-2 p,
    #header-3 p {
        text-align: left;
    }
}



/*
Linien
*/

.line-y.l {
    border-left: 5px dashed var(--tertiary);
}
.line-y.r {
    border-right: 5px dashed var(--tertiary);
}

.line-x {
    border-bottom: 5px dashed var(--tertiary);
}

#line-1 {
    margin-bottom:var(--iw-space-extra-small);
}

#line-1 .line-y.r {
    margin-left: auto;
    margin-right: calc(50% - 2.5px);
    height: calc(var(--iw-font-size-base) * 6);
}

#line-1 .line-x {
    width: 140px;
    margin-left: auto;
    margin-right: calc(var(--iw-font-size-base) * 6);
}

@media (min-width: 768px) {
    #line-1 {
        margin-bottom: calc((var(--iw-font-size-base) * 2) * -1);
    }
    #line-1 .line-y.r {
        margin-right: calc(var(--iw-font-size-base) * 6);
        height: calc(var(--iw-font-size-base) * 9);
    }
}

@media (min-width: 992px) {
    #line-1 .line-x {
        width: 320px;
    }
}

@media (min-width: 1200px) {
    #line-1 .line-x {
        width: 440px;
    }
}

@media (min-width: 1400px) {
    #line-1 .line-y.r {
        margin-right: calc(var(--iw-font-size-base) * 16);
    }
    #line-1 .line-x {
        width: 220px;
        margin-right: calc(var(--iw-font-size-base) * 16);
    }
}

#line-2 .line-y.l {
    margin-left: calc(var(--iw-font-size-base) * 9);
    margin-right: auto;
    height: calc(var(--iw-font-size-base) * 5);
}

#line-2 .line-x {
    margin-left: calc(var(--iw-font-size-base) * 9);
    margin-right: calc(var(--iw-font-size-base) * 12);
}

#line-2 .line-y.r {
    margin-left: auto;
    margin-right: calc(50% - 2.5px);
    height: calc(var(--iw-font-size-base) * 6);
}
@media (min-width: 768px) {
    #line-2 .line-y.r {
        margin-right: calc(var(--iw-font-size-base) * 12);
        height: calc(var(--iw-font-size-base) * 3);
    }
}

#line-3 .line-y.r {
    height: calc(var(--iw-font-size-base) * 6);
    margin-right: calc(50% - 2.5px);
    margin-left: auto;
}

@media (min-width: 768px) {
    #line-3 .line-y.r {
        height: calc(var(--iw-font-size-base) * 12);
        margin-right: calc(var(--iw-font-size-base) * 12);
    }
}



/*
Kontakt
*/

#contact .item-frame .item {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--iw-space-extra-small);
}

#contact .item-frame .item svg {
    height: auto;
    width: 15px;
}

#contact .item-frame .item.location svg {
    height: 15px;
    width: auto;
}

#contact .item-frame .item a {
    text-decoration: unset;
}

#contact .item-frame .item a:hover {
    text-decoration: underline;
}