/*SCROLL-BAR Styling */

::-webkit-scrollbar-thumb {
    max-height: 30%;
    background: var(--yellow-highlight);
}

/* GENERAL Styling */

.wrapper-imprint {
    position: absolute;
    min-height: 100vh;
    min-height: 100svh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--subtle-beige);
    background-image:
    repeating-linear-gradient(to top, transparent, transparent 50px, var(--lila-highlight) 50px, var(--lila-highlight) 52px),
    repeating-linear-gradient(-90deg ,var(--subtle-beige), var(--subtle-beige) 50px, var(--lila-highlight) 50px, var(--lila-highlight) 52px);
}

.imprint {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-block: 4.5em;
    padding-inline: 2em;
    background-color: var(--peach-highlight);
}

.close {
    display: inline-block;
    position: absolute;
    top: 1em;
    right: 1em;
    width: 2em;
    height: 2em;
    cursor: pointer;

    border: none;
    background: none;
}

.close .cross, .cross:after {
    content: '';
    display: block;
    height: 0.4em;
    width: 100%;
    background-color: var(--lila-highlight);
    border-radius: 0.4em;
}

.cross {
    rotate: 45deg;
}

.cross:after {
    rotate: -90deg;
}

h1 {
    font-size: 1.8em;
    font-weight: 800;
    padding-bottom: 1em;
    color: var(--yellow-highlight);
}

h2 {
    font-size: 1.4em;
    font-weight: 800;
    line-height: 1.4em;
    padding-bottom: 0.8em;
    color: var(--lila-highlight);
}

body.high-contrast h1,
body.high-contrast h2 {
    color: black;
}

h3 {
    font-weight: 800;
    line-height: 1.2em;
    padding-bottom: 1em;
}

p {
    padding-bottom: 1.4em;
}

.nan {
    font-style: normal;
    padding-bottom: 0em;
}

.nan-label {
    font-style: normal;
    display: inline-block;
    font-size: 1.2em;
    font-weight: 800;
    line-height: 1.2em;
}

address {
    padding-bottom: 1.4em;
}

.addressContent {
    font-style: normal;
    padding-bottom: 0em;
}

.emailWrapper {
    display: flex;
    width: 100%;
    font-style: normal;    
}

.envelope {
    width: 1.5rem;
    margin-right: 0.5rem;
}

.emailLink {
    position: relative;
}

.emailLink::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background-color: currentColor;
    transition: width 0.4s ease;
}

.emailLink:hover::after {
    width: 100%;
}

.contributer {
    padding-bottom: 0.2em;
}

.contributerName {
    padding-bottom: 0;
}

section {
    padding-top: 1em;
}

/* RESPONSIVE-Design */

/* small phones --- LANDSCAPE*/

@media only screen and (orientation: landscape) {
    .imprint {
        padding-block: 4em;
        padding-inline: 3em;
    }

    .close {
        top: 1.3em;
        right: 1.3em;
        width: 2.2em;
        height: 2.2em;
    }
}

/* for mobile devices */

@media only screen and (orientation: portrait) and (min-width: 370px) {  
    .imprint {
        padding-inline: 2.5em;
    }

    .close {
        margin-top: 2.5em;
        margin-right: 1.8em;
        width: 2.5em;
        height: 2.5em;
    }
}

@media only screen and (orientation: landscape) and (min-height: 370px) {
    .imprint {
        padding-inline: 4em;
    }

    .close {
        top: 1.3em;
        right: 1.3em;
        width: 2.2em;
        height: 2.2em;
    }
}

/* for Tablets etc. */

@media only screen and (orientation: portrait) and (min-width: 768px) {
    .wrapper-imprint {
        padding-inline: 4em; 
        padding-block: 2em;
    }

    .imprint {
        min-height: auto;
        padding-block: 4em;
        border-radius: 2em;
    }

    h2 {
        padding-bottom: 0.8em;
    }
}

@media only screen and (orientation: landscape) and (min-width: 1000px ) {      
    .wrapper-imprint {
        padding-block: 3em;
    }

    .imprint {
        min-height: auto;
        padding-block: 2em;
        width: 70%;
        max-width: 1000px;
        border-radius: 2em;
    }

    .close {
        top: 1.6em;
        right: 1.6em;
        width: 2.4em;
        height: 2.4em;
    }

    .close .cross, .cross:after {
        height: 0.5em;
        width: 100%;
        border-radius: 0.5em;
    }

    .nan-label {
        font-size: 1.4em;
    }

    h1 {
        font-size: 1.9em;
        padding-bottom: 1em;
    }

    h2 {
        font-size: 1.5em;
        padding-bottom: 0.8em;
    }

    h3 {
        font-size: 1.3em;
        padding-bottom: 0.6em;
    }

    p,
    .emailWrapper {
        font-size: 1.1em;
    }

    section {
        padding-top: 1em;
    }
}

/* for Desktop */   

@media only screen and (orientation: landscape) and (min-height: 1000px)  {              
    .wrapper-imprint {
        padding-block: 4em;
    }

    .imprint {
        width: 60%;
        max-width: 1000px;
        min-height: auto;
        padding-block: 3em;
        border-radius: 2em;
    }

    .close {
        top: 2em;
        right: 2em;
        width: 2.1em;
        height: 2.1em;
    }
}      

/* ---End of RESPONSIVE-Design--- */