/*
 * Description: Theme von Alexander Elskamp für Systemhaus Hein
 * Author: Alexander Elskamp
 * Author URI: https://elskamp.work
 */

:root {
    --primary: #38b6ff;
    --primaryWashedOut: rgba(56, 182, 255, 0.95);
    --defaultBackground: #fff;
    --text: #333;
}

/* cyrillic-ext */
@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(/font/va9B4kDNxMZdWfMOD5VnPKreSxf6TF0.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(/font/va9B4kDNxMZdWfMOD5VnPKreQhf6TF0.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(/font/va9B4kDNxMZdWfMOD5VnPKreShf6TF0.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(/font/va9B4kDNxMZdWfMOD5VnPKreRRf6TF0.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}

/* vietnamese */
@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(/font/va9B4kDNxMZdWfMOD5VnPKreSRf6TF0.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(/font/va9B4kDNxMZdWfMOD5VnPKreSBf6TF0.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(/font/va9B4kDNxMZdWfMOD5VnPKreRhf6.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html, body {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: 'Fira Sans', sans-serif;
}

.mitte {
    text-align: center;
}

body {
    position: relative;
    background: url("images/background.jpg") repeat-y;
    background-size: 200%;
    color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

.order1 {
    order: 1;
}

.order2 {
    order: 2;
}

nav {
    position: fixed;
    top: 0;
    width: 100%;
    height: 4.5rem;
    background: var(--defaultBackground);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

.logo {
    margin: 0;
    height: 100%;
}

.logo-mobile {
    position: absolute;
    top: 0;
    margin-left: 4rem;
    height: 100%;
    width: calc(100% - 4rem);
    text-align: center;
}

.logo-desktop {
    display: none;
}

.logo img {
    margin-top: 0.75rem;
    height: 3rem;
}

.hamburger {
    display: block;
    position: relative;
    overflow: hidden;
    margin: 0.75rem 0 0 1rem;
    padding: 0;
    height: 3rem;
    width: 3rem;
    z-index: 500;
    text-indent: 0;
    appearance: none;
    border: 2px solid var(--primary);
    cursor: pointer;
    transition: background 0.3s;
    background: var(--defaultBackground);
}

.h-ena {
    outline: none;
}

nav ul.menu {
    position: absolute;
    margin: 0;
    padding: 0;
    height: auto;
    top: 4.5rem;
    z-index: 999;
    display: none;
    list-style: none;
    background: var(--primaryWashedOut);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
    width: 100%;
    text-align: center;
}

ul.children {
    margin: 0;
    padding: 1rem 0 3rem 0;
}

nav ul li {
    margin: 0.5rem 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    min-width: 7.5rem;
    cursor: pointer;
}

nav li.page_item_has_children > a {
    pointer-events: none;
}

nav ul a {
    color: #fff;
    font-size: 1.25rem;
    text-decoration: none;
}

nav ul ul a {
    font-size: 1rem;
}

nav ul li:hover ul {
    display: block;
}

nav ul ul {
    display: none;
    list-style: none;
    background: transparent;
    width: 100%;
    text-align: center;
    padding: 1rem 0 3rem 0;
}

nav ul ul li {
    margin: 1rem 0 0;
}

.close {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 4.5rem;
    z-index: 501;
    background-color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    display: none;
}

nav ul.m-ena, .h-ena, .close-ena {
    display: block;
}

.hamburger span {
    display: block;
    position: absolute;
    top: 45%;
    left: 25%;
    right: 25%;
    height: 10%;
    background: var(--primary);
    transition: background 0s 0.3s;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

.hamburger span::before, .hamburger span::after {
    position: absolute;
    display: block;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary);
    content: "";
    transition-duration: 0.3s, 0.3s;
    transition-delay: 0.3s, 0s;
}

.hamburger span::before {
    top: -210%;
    transition-property: top, transform;
}

.hamburger span::after {
    bottom: -210%;
    transition-property: bottom, transform;
}

.h-ena span {
    background: none;
}

.h-ena span::before {
    top: 0;
    transform: rotate(45deg);
}

.h-ena span::after {
    bottom: 0;
    transform: rotate(-45deg);
}

.h-ena span::before, .h-ena span::after {
    transition-delay: 0s, 0.3s;
}

#platzhalter {
    height: 4.5rem;
}

#opener {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 70vh;
    margin-top: 4.5rem;
    background: url("images/Opener.jpeg") no-repeat 50%;
    background-size: cover;
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
    text-align: center;
}

@keyframes logo {
    from {
        width: 0;
    }
    to {
        width: 80%;
    }
}

#opener div:first-child {
    overflow: hidden;
    padding: 1rem;
    width: 80%;
    /*width: 0;
    animation-name: logo;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-duration: 1s;*/
    background: linear-gradient(to right, var(--primary) 0.2rem, transparent 0.2rem) 0 0 no-repeat, linear-gradient(to bottom, var(--primary) 0.2rem, transparent 0.2rem) 0 0 no-repeat, linear-gradient(to left, var(--primary) 0.2rem, transparent 0.2rem) 100% 100% no-repeat, linear-gradient(to top, var(--primary) 0.2rem, transparent 0.2rem) 100% 100% no-repeat;
    background-size: 2rem 2rem;
}

section {
    margin-top: 4rem;
    scroll-margin: 5.5rem;
}

section > h2 {
    padding: 0.5rem 1.5rem;
}

section > h2 {
    display: inline-block;
    background: var(--primaryWashedOut);
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}

article {
    display: flex;
    flex-flow: column;
    margin: 3rem .5rem 0.5rem;
    padding: 0 1rem 1rem;
    clear: both;
    line-height: 1.5rem;
}

#leistungen article:not(:first-of-type) {
    margin-top: 6rem;
}

article h3, h2 {
    margin-bottom: 0.75rem;
}

#leistungen article h2 {
    text-align: center;
}

article.cornerLeft {
    background: linear-gradient(to right, var(--primary) 0.35rem, transparent 0.35rem) 0 100% no-repeat, linear-gradient(to top, var(--primary) 0.35rem, transparent 0.35rem) 0 100% no-repeat;
    background-size: 6rem 4rem;
}

article.cornerRight {
    background: linear-gradient(to left, var(--primary) 0.35rem, transparent 0.35rem) 100% 100% no-repeat, linear-gradient(to top, var(--primary) 0.35rem, transparent 0.35rem) 100% 100% no-repeat;
    background-size: 6rem 4rem;
}

#ueberUns article img {
    width: 100%;
}

#leistungen article img, #leistungen article h2 {
    display: flex;
    justify-self: center;
    align-items: center;
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 2.5rem;
    width: 6rem;
}

#leistungen article h2 {
    grid-row: 2;
    width: auto;
}

#leistungen article {
    scroll-margin: 5.5rem;
    display: grid;
    grid-column-gap: 1rem;
    grid-template-columns: auto;
}

#leistungen article div {
    grid-column-start: 1;
    grid-row: 3;
}

article.kontakt {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-flow: wrap;
    margin-top: 0;
}

.kontakt div {
    margin-top: 3rem;
    margin-right: 1rem;
    min-width: 11rem;
}

.clear {
    position: relative;
    visibility: hidden;
    clear: both;
}

.footerclear {
    height: 6rem;
}

footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.25rem;
    margin-top: 2.5rem;
    padding: 0.5rem;
    background: var(--defaultBackground);
    box-shadow: 0 -10px 15px rgba(0, 0, 0, 0.2);
}

.copy {
    float: left;
}

.impr {
    float: right;
}

.impr:nth-child(3) {
    margin-right: 0.5rem;
}

.impr a {
    color: var(--text);
    text-decoration: none;
}


@media screen and (min-width: 768px) {
    nav ul.menu {
        width: 30%;
    }

    @keyframes logo {
        from {
            width: 0;
        }
        to {
            width: 60%;
        }
    }

    #opener div:first-child {
        width: 60%;
    }

    #ueberUns article img {
        width: 50%;
    }

    #leistungen article h2 {
        text-align: left;
    }

    section > h2 {
        padding: 0.5rem 3.5rem;
    }

    article, #leistungen article {
        margin: 3rem 2.5rem 0.5rem;
        padding: 0 2rem 2rem;
    }
}


@media screen and (min-width: 992px) {
    body {
        background-size: 150%;
    }

    nav ul.menu {
        display: flex;
        justify-content: space-between;
        top: 0;
        margin: 0 6rem;
        padding: 0;
        height: 4.5rem;
        width: calc(100% - 12rem);
        box-shadow: none;
        background: none;
    }

    nav ul li {
        display: inline-block;
        margin: 0;
        height: 4.5rem;
    }

    nav ul li:hover {
        background: var(--primary);
    }

    nav ul a {
        color: var(--text);
        line-height: 4.5rem;
    }

    nav ul ul {
        position: absolute;
        padding: 0;
        max-width: 12.5rem;
        background: var(--primaryWashedOut);
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
        text-align: left;
    }

    ul.children {
        margin: 1.35rem 0 0 0;
        padding: 0;
    }

    nav ul ul li {
        width: 100%;
        margin: 0;
        height: 3rem;
    }

    nav ul ul li a {
        padding-left: 1rem;
        line-height: 3rem;
    }

    nav ul ul li:hover a {
        color: #fff;
        font-weight: bold;
    }

    .hamburger {
        display: none;
    }

    .logo {
        width: auto;
    }

    .logo-mobile {
        display: none;
    }

    .logo-desktop {
        display: block;
    }

    @keyframes logo {
        from {
            width: 0;
        }
        to {
            width: 45%;
        }
    }

    #opener div:first-child {
        width: 45%;
    }

    section > h2 {
        padding: 0.5rem 1.5rem 0.5rem 6rem;
    }

    article {
        display: block;
    }

    article, #leistungen article {
        margin: 3rem 4rem 0.5rem;
    }

    #ueberUns p:last-child {
        margin-bottom: 0;
    }

    #ueberUns article img {
        width: 25%;
    }

    #ueberUns article img.floatLeft {
        float: left;
        padding: 0 1rem 0 0;
    }

    #ueberUns article img.floatRight {
        float: right;
        padding: 0 0 0 1rem;
    }

    article.kontakt {
        max-width: 40%;
    }
}


@media screen and (min-width: 1450px) {
    nav ul.menu {
        margin: 0 20rem;
        width: calc(100% - 40rem);
    }

    @keyframes logo {
        from {
            width: 0;
        }
        to {
            width: 30%;
        }
    }

    #opener div:first-child {
        width: 30%;
    }

    section > h2 {
        padding: 0.5rem 1.5rem 0.5rem 20rem;
    }

    article, #leistungen article {
        margin: 3rem 18rem 0.5rem;
    }

    #ueberUns article img {
        width: 30%;
    }

    article.kontakt {
        max-width: 30%;
    }
}