@import "/files/assets/reset.css";
@import "/files/assets/fonts.css";

:root{
    --color-main: #00819b;
    --color-background: rgba(240, 250, 252, 0.2);
    --color-foreground: rgb(247, 248, 250);
    --color-grey: #727272;
    --color-border: rgba(0, 129, 155, 0.25);

    --extrasmall: 0.5rem;
    --small: 1rem;
    --medium: 2rem;
    --large: 6rem;
}

::selection{
    color: white;
    background: var(--color-main);
}

html{
    font-size: 17px;
    font-family: 'Merriweather Sans';
    color: var(--color-grey);
    background: white;
}

body{
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

p{
    font-weight: 300;
}

h1, h2, h3, h4, h5, h6{
    color: var(--color-main);
    font-family: 'Merriweather Sans';
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.125rem;
    margin: 0;
    margin-bottom: var(--medium);
    overflow-wrap: break-word;
    hyphens: auto;
}

h2{
    font-size: 1.25rem;
}

a:link, a:active, a:visited{
    font-weight: 400;
    color: var(--color-main);
    text-decoration-color: var(--color-border);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.125rem;
}
a:hover{
    text-decoration-color: var(--color-main);
}

a:focus-visible{
    outline-offset: 2px;
    outline: 2px solid var(--color-main);
    text-decoration: none;
}

a[target='_blank']::after{
    display: block;
    height: var(--small);
    width: var(--small);
    opacity: .5;
    content: '';
    background-image: url('/files/assets/external.svg');
    background-size: 100%;
}

.content-hyperlink, .content-download{
    & a{
        display: inline-flex;
        gap: 0.5rem;
    }
    & a::before{
        display: block;
        height: calc(1.5 * var(--small));
        width: calc(1.5 * var(--small));
        flex: 0 0 calc(1.5 * var(--small));
        opacity: .5;
        content: '';
        background-size: 100%;
    }
}
.content-hyperlink{
    & a::before{
        background-image: url('/files/assets/arrow_right.svg');
    }
}
.content-download{
    & a::before{
        background-image: url('/files/assets/download.svg');
    }
}

a[target='_blank']{
    display: inline-flex;
    gap: 0.125rem;
    align-items: center;
}

.inside{
    width: 90vw;
    max-width: 1280px;
    margin: 0 auto;
}

#container:has(aside){
    & > .inside{
        display: flex;
        flex-direction: column-reverse;
    }
    @media screen and (min-width: 930px) {
        & > .inside{
            display: grid;
            grid-template-columns: 2.5fr 1fr;        
        }

        & main{
            border-right: 1px solid var(--color-border);
        }
    }
    & aside{
        height: 100%;
        & > .mod_article{
            @media screen and (min-width: 930px) {
                position: sticky;
                top: calc(1.75 * var(--medium));
                padding: var(--medium)
            }
        }
    }
}

header{
    position: sticky;
    top: 0;
    background: white;
    color: var(--color-main);
    border-bottom: 1px solid var(--color-border);
    z-index: 1000;
    & p{
        margin: 0;
        font-size: 1.5rem;
    }
    & a:link{
        font-weight: 400;
        text-decoration: none;
        letter-spacing: .15rem;
    }
    & span{
        opacity: 0.35;
    }
}

footer{
    padding: var(--medium) var(--small);
    border-top: 1px solid var(--color-border);
    font-size: 0.875rem;
    & .inside{
        display: flex;
        gap: var(--small);
        justify-content: center;
    }
}

footer, header{
    text-align: center;
    & .inside{
        box-sizing: border-box;
        border: none;
        padding: var(--extrasmall) var(--medium);
    }
}

div[class^="content-"]:not(:last-child){
    margin-bottom: var(--medium)
}

.content-text{
    & strong{
        font-weight: 500;
    }
}

.mod_article{
    padding: var(--large) var(--medium);
    @media screen and (min-width: 630px){
        padding: var(--large);
    }
    &.center{
        text-align: center;
        & .rte{
            margin: 0 auto;
            @media screen and (min-width: 630px){
                max-width: 75%;
            }
        }
    }
    &.white{
        background: white;
    }
}
.mod_article:not(:last-child){
    border-bottom: 1px solid var(--color-border);
}

.inside{
    border-right: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
}

.mod_article.imprint{
    background: white;
    & .content-element-group{
        font-size: 0.875rem;
        @media screen and (min-width: 900px) {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--medium);
        }
    }
    & strong{
        color: var(--color-main);
    }
}

.module-onepage-navigation{
    font-size: 0.875rem;
    & ul{
        list-style-type: decimal;
        padding: 0 var(--small);
        margin: 0;
    }
    & li::marker{
        color: var(--color-main);
        font-weight: 300;
    }
    & li:not(:last-of-type){
        margin-bottom: var(--extrasmall);
    }
    h2{
        font-size: 0.875rem;
    }
}

/* Form */
.formbody{
    display: flex;
    flex-direction: column;
    gap: var(--small);
    & label{
        font-weight: 300;
        font-size: 0.875rem;
        cursor: pointer;
        color: var(--color-main)
    }
    & > fieldset{
        @media screen and (min-width: 630px) {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--medium);
        }
    }
}
.mandatory{
    & .invisible{
        display: none;
    }
    & span.mandatory{
        opacity: .5;
    }
}
.widget-explanation{
    font-size: 0.875rem;
    display: inline-flex;
    gap: var(--small);
    align-items: center;
    & p{
        margin: 0;
    }
    & strong{
        color: var(--color-main);
    }
}
.widget-explanation::before{
    display: block;
    height: calc(1.5 * var(--small));
    width: calc(1.5 * var(--small));
    opacity: .35;
    content: '';
    background-image: url('/files/assets/notice.svg');
    background-size: calc(1.5 * var(--small));
    flex: 0 0 calc(1.5 * var(--small))
}

button{
    background-color: var(--color-main);
    color: white;
    padding: var(--extrasmall) var(--small);
    border: none;
    display: block;
    font-family: 'Merriweather Sans';
    cursor: pointer;
}

input[type="text"], input[type="email"], textarea{
    all: unset;
    padding: var(--extrasmall) var(--small);
    width: 100%;
    display: block;
    border: 1px solid var(--color-border);
    font-weight: 500;
    box-sizing: border-box;
    background: var(--color-background)
}
input:focus-visible, textarea:focus-visible, button:focus-visible{
    outline: 2px solid var(--color-main);
    outline-offset: 2px;
}

input[type="checkbox"]{
    all: unset;
    width: var(--small);
    height: var(--small);
    display: block;
    border: 2px solid var(--color-border);
    flex: 0 0 var(--small);
    background: var(--color-background);
}
input[type="checkbox"]:checked{
    background: var(--color-main);
}

.checkbox_container{
    padding: var(--extrasmall);
    & > span{
        display: flex;
        gap: var(--extrasmall);
    }
    label{
        color: var(--color-grey);
        line-height: 1.5;
    }
}

fieldset{
    background: none;
    padding: 0;
    border: none;
}

.altcha{
    border: none;
    background: var(--color-foreground);
    padding: var(--extrasmall);
    & .altcha-main, .altcha-footer{
        font-size: 0.5rem;
        padding: 0;
    }
    & .altcha-main{
        gap: var(--extrasmall);
    }
}