/*
    
## ## ## ## ##  ##              ## ## ## ## ##  ## ## ## ## ##  ## ## ## ## ##  ##          ##  ## ## ## ## ##  ## ## ## ## ##
##              ##              ##          ##  ##          ##  ##          ##  ## ##       ##  ##                    ##
##              ##              ##          ##  ##          ##  ##          ##  ##  ##      ##  ##                    ##
##    ## ## ##  ##              ##          ##  ## ## ## ##     ##          ##  ##    ##    ##  ## ## ## ## ##        ##
##          ##  ##              ##          ##  ##          ##  ##          ##  ##      ##  ##  ##                    ##
##          ##  ##              ##          ##  ##          ##  ##          ##  ##        ##    ##                    ##
## ## ## ## ##  ## ## ## ## ##  ## ## ## ## ##  ## ## ## ## ##  ## ## ## ## ##  ##          ##  ## ## ## ## ##        ##

/* COLOR 1 - BACKGROUND, BUTTON TEXT, ICON COLOR */
body,
.bottommenu nav,
.bottommenu,
.dropdown,
button,
.button button:hover,
.teaser i,
#teaserbox .box {
    background: var(--color-1);    
}
#bottomfooter a:hover,
footer a:hover,
#bottomfooter a.copyright,
.copyright,
h1,
#about .right p,
.dropdown .menuitem a,
.menuitem .fa-brands,
.first .menuitem a,
.text h3,
span,
.text p,
#popup h3,
button:hover,
#popup .inner,
.topfooter p,
.topfooter h3,
.menuitem:hover .fa-brands,
#popup .inner p,
#bottomfooter a {
    color: var(--color-1);
}
#accept,
#decline {
    background: var(--color-1);
}

/* COLOR 2 - ELEMENT BACKGROUND (TOPFOOTER, LINKBLOCK, TOPMENU) */
input,
#teaserbox,
textarea {
    background: var(--color-2);
}
#popup .inner a {
    color: var(--color-2);
}

/* COLOR 3 - ACCENTS (BUTTON- / ICON BACKGROUND, COOKIE POPUP, BOTTOMFOOTER) */
.teaser,
.topmenu,
#about,
.bottommenu .menuitem a:hover::after,
.dropdown .menuitem:hover,
button:hover,
#popup .inner {
    background: var(--color-3);
}
#bottomfooter p,
.climet,
a,
button,
.cta h4,
.teaser i,
#accept,
#decline,
#burgermenu,
.menuitem:hover i,
.button button:hover,
.menuitem a:hover:not(.first .menuitem a):not(.dropdown .menuitem a) {
    color: var(--color-3);
}

button,
input:focus,
textarea:focus {
    outline: 2px solid var(--color-3);
}

/* COLOR 4 - TEXT COLOR */
h2,
h3,
h4,
.menuitem a,
li i,
p {
    color: var(--color-4);
}
#popup .inner {
    box-shadow: 0 0 5rem -1rem var(--color-4);
}
.dropdown {
    background: var(--color-4);
}

/* COLOR 5 */
.neutral,
.footeritem .fa-linkedin-in,
.footeritem .fa-instagram,
.footeritem .fa-square-youtube{
    color: var(--color-5);
}

/* EXTRA COLORS */
#bottomfooter a,
.topfooter a {
    color: #5ebd8e;
}
footer {
    background: rgb(0,124,62);
    background: linear-gradient(180deg, rgba(0,124,62,1) 0%, rgba(21,21,21,1) 100%); 
}

/* LINKS */
.menuitem a:hover {
    text-decoration: none;
}
#popup .inner a {
    text-decoration: underline;
}

/* TRANSITIONS */
nav,
button,
.dropdown,
.bottommenu nav,
#burgermenu {
    transition: all linear .2s;
}

/* FONTS */
@font-face {
    font-family: "Text";
    src: url(../font/Lato/Lato-Regular.ttf);
}
@font-face {
    font-family: "Title";
    src: url(../font/Lato/Lato-Bold.ttf);
}
* {
    font-family: "Text";
    line-height: normal;
}
h1,
h2,
h3,
h4 {
    font-family: "Title";
}

/* COLORS */
:root {
    --color-1: #FFFFFF;
    --color-2: #ebeaea;
    --color-3: #04793d; 
    --color-4: #151515;
    --color-5: #91c6ac;
}