html, body {top: 0; left: 0px; margin: 0px; padding: 0px; height: 100%;}
a:link, a:visited {text-decoration: none;}
li {list-style-type: none;}

p {font-family: Museo Sans, sans-serif; font-weight: 500; font-size: 18px; color: var(--clr-text);}
h1 {font-family: Museo Sans, sans-serif; font-weight: 900; font-size: 50px; margin: 0; text-transform: uppercase; color: #353535;}
a {font-family: Museo Sans, sans-serif; font-weight: 700; font-size: 16px; color: var(--clr-text);}

:root {
	--clr-wi-primary: #e4df08;
    --clr-si-primary: #EC194C;
    --clr-wi-secondary: #17636C;
	--clr-text: #000000;
    --clr-btn: #fff;
}


@font-face {
    font-family:'Museo Sans';
    font-weight: 700;
    src:
        url("fonts/e2d37f34-6bca-473c-b64d-93811f4dc046.woff2") format("woff2"),
        url("fonts/eadbb595-a394-48fc-834f-8bf5da15cddf.woff") format("woff");
}

@font-face {
    font-family:'Museo Sans';
    font-weight: 900;
    src:
        url("fonts/5891c7e8-1020-4d34-86f4-0812e282f7a2.woff2") format("woff2"),
        url("fonts/03587ace-3fc8-46cb-84d2-b83e3b161ac4.woff") format("woff");
}

@font-face {
    font-family:'Museo Sans';
    font-weight: 500;
	src:
        url("fonts/d9896899-f08c-4750-a874-a9e10d83c2cb.woff2") format("woff2"),
        url("fonts/d42dd843-62b0-4623-8855-d5882512c3c9.woff") format("woff");
	
}

@font-face {
    font-family:'Museo Slab';
    font-weight: 500;
	src:
        url("fonts/16bb87bf-d138-429b-bc78-dae6c4f109fb.woff2") format("woff2"),
        url("fonts/3cf54835-9705-474e-9afa-46f2d59589e7.woff") format("woff");
	
}

.bodyWi {
    background-color: var(--clr-wi-primary);
}

.bodySi {
    background-color: var(--clr-si-primary);
}

.app {
    min-width: 100%;
    min-height: 100%;
    background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='75' height='75' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0,0%,100%,1)'/><path d='M11 6a5 5 0 01-5 5 5 5 0 01-5-5 5 5 0 015-5 5 5 0 015 5' transform='translate(10,0)' stroke-width='1' stroke='none' fill='hsla(0, 0%, 0%, 0.03)'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.header {
    margin: 0px auto 35px auto;
    position: relative;
    z-index: 1;
    background-color: var(--clr-si-primary);
}

.headerWi {
    margin: 0px auto 75px auto;
    position: relative;
    z-index: 1;
}

.headertitel {
    color: var(--clr-btn);
} 

.headertitelWi{
    color: #353535;
}

.headercontent {
    position: relative;
    padding: 5% 25px 5% 25px;
    z-index: 4;
    text-align: center;
}

.headercontentWi {
    position: relative;
    padding: 5% 25px 0 25px;
    z-index: 4;
    text-align: center;
}

.headerbgWi {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 0;
}

.headercolor {
    background-color: var(--clr-si-primary);
    height: 100px;
}

.headercolorWi {
    background-color: var(--clr-wi-primary);
    height: 100px;
}


.headerimg {
    max-width: 150px;
    margin-bottom: 10px;
} 

.headerimgWi {
    max-width: 120px;
    margin-bottom: 5px;
}

.linkarea {
    position: relative;
    padding: 5% 25px 5% 25px;
}

.socialarea {
    position: relative;
    padding: 3% 25px 4% 25px;
}

.btnScontainer {
    max-width: 400px;
    margin: 0 auto 0px auto;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0px 15px;
}

.btncontainer {
    max-width: 400px;
    margin: 0 auto 0px auto;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 15px 0;
}

.btn {
    padding: 25px 30px;

    margin: 0px;
    text-align: center;
    color: var(--clr-btn);
    text-transform: uppercase;
    letter-spacing: 2px;
    overflow: hidden;
    transition: all .4s ease-in-out;
}

.light {
    color: #353535;
}

.btn:hover{
    transform: scale(1.1);
}

.btn::before {
    content: '\276F';
    font-size: 12px;
    padding-right: 4px;
    position: relative;
    bottom: 1.5px;
}

.btnS {
    padding: 5px 5px;
    aspect-ratio: 1/1;
    background-color: var(--clr-si-primary);
    margin: 0px;
    text-align: center;
    overflow: hidden;
    transition: all .3s ease-in-out;
}

.btnS:hover{
    transform: scale(1.15);
    background-color: #CA193F;
}


.color-1 {background-color: #071F44;}

.color-1:hover {background-color: #00122A;}

.color-2 {background-color: #17636C;}

.color-2:hover {background-color: #1D555C;}

.color-3 {background-color: #4C92A8;}

.color-3:hover {background-color: #356574;}

.color-4 {background-color: #8CAA16;}

.color-4:hover {background-color: #708712;}

.color-5 {background-color: #F2DB27;}

.color-5:hover {background-color: #F2C827;}

.wi-color-1 {background-color: #ff4e89;}

.wi-color-1:hover {
    background-color: #5A1E5D;}

.wi-color-2 {background-color: #00D9FF;}

.wi-color-2:hover {background-color: #009FBB;}

.wi-color-3 {background-color: #006A7B;} 

.wi-color-3:hover {background-color: #2F4858;}

.explainatorium {
    background-image: url(img/e.png);
    background-size: 60px;
    background-repeat: no-repeat;
    background-position: center right;
}

.btnsi {
    background-image: url(img/schmetterling-small.png);
    background-size: 90px;
    background-repeat: no-repeat;
    background-position: center right;
}

.btnwi {
    background-image: url(img/hirn.png);
    background-size: 90px;
    background-repeat: no-repeat;
    background-position: center right;
    background-color: var(--clr-wi-primary);
}

.btnwi:hover {background-color: #C7C20E;}

.overlay {
    position: fixed;
    bottom: 3%;
    right: 3%;
    float: right;
    z-index: 50;
    width: 50px;
    height: 50px;
    background-color: #fff;
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.2);
    border-radius: 100%;
    padding: 15px 10px 0px 8px;
    text-align: center;
    transition: all .2s ease-in-out;
}

.overlay img {
    max-width: 35px;
}

.overlay:hover {
    transform: scale(1.1);
}