html {
    --blue: #3c9bfa;
    --green: #2dcd73;
    --gray: #194b5a;
}


@font-face {
    font-family: "TTNormsPro";
    font-weight: 450;
    src: url("../fonts/TTNormsPro.woff2") format("woff2"),
        url("../fonts/TTNormsPro.woff") format("woff");
}

@font-face {
    font-family: "TTNormsPro";
    font-weight: 500;
    src: url("../fonts/TTNormsProMedium.woff2") format("woff2"),
        url("../fonts/TTNormsProMedium.woff") format("woff");
}

@font-face {
    font-family: "TTNormsPro";
    font-weight: 700;
    src: url("../fonts/TTNormsProBold.woff2") format("woff2"),
        url("../fonts/TTNormsProBold.woff") format("woff");
}

/* poppins-regular - latin */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 450;
    src: url("../fonts/poppins-v20-latin-regular.eot");
    /* IE9 Compat Modes */
    src: local(""),
        url("../fonts/poppins-v20-latin-regular.eot?#iefix") format("embedded-opentype"),
        url("../fonts/poppins-v20-latin-regular.woff2") format("woff2"),
        url("../fonts/poppins-v20-latin-regular.woff") format("woff"),
        url("../fonts/poppins-v20-latin-regular.ttf") format("truetype");
}

/* poppins-500 - latin */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    src: url("../fonts/poppins-v20-latin-500.eot");
    /* IE9 Compat Modes */
    src: local(""),
        url("../fonts/poppins-v20-latin-500.eot?#iefix") format("embedded-opentype"),
        url("../fonts/poppins-v20-latin-500.woff2") format("woff2"),
        url("../fonts/poppins-v20-latin-500.woff") format("woff"),
        url("../fonts/poppins-v20-latin-500.ttf") format("truetype");
}

/* poppins-600 - latin */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/poppins-v20-latin-600.eot");
    /* IE9 Compat Modes */
    src: local(""),
        url("../fonts/poppins-v20-latin-600.eot?#iefix") format("embedded-opentype"),
        url("../fonts/poppins-v20-latin-600.woff2") format("woff2"),
        url("../fonts/poppins-v20-latin-600.woff") format("woff"),
        url("../fonts/poppins-v20-latin-600.ttf") format("truetype");
}

html, body, td, th, tr, table, ul, ol, li, p, div, h1, h2, h3, h4, h5, h6 {
    margin: 0; padding: 0; position: relative;
}
html, body {
    font-size: 16px;
}

#wrapper {
    max-width: 760px;
    width: 100%;
    margin: auto;
    border: solid 1px var( --gray );
}

body {
    font-family: "TTNormsPro","Calibri","Poppins","Arial","Sans-Serif";
    font-weight: 450;
    color: var( --gray );
    background-color: #fff;
}

h1 {
    color: #fff;
    font-size: 2.75rem;
    line-height: 2.9rem;
}
h1 small {
    display: block;
    font-size: 1.5rem;
    line-height: 1.7rem;
    margin-top:5px;
}
h2 {
    font-size: 1.5rem;
    color: var( --green );
    padding: 10px 0;
}
p, li {
    font-size: 1.125rem;
    line-height: 1.625rem;
}
li:before {
    content: ' ';
    width: 0.35rem;
    height: 0.35rem;
    background-color: var( --green );
    position: absolute;
    left: -13px;
    top: 0.55rem;
}
p {
    margin-bottom: 1.5rem;
}
ul, ol {
    padding-left: 15px;
    list-style: none;
    margin-bottom: 1.5rem;
}

ul ul, ol ol {
    margin-bottom: 0;
}

header {
    /* min-height: 200px; */
}
header > div {
    background: linear-gradient(288.97deg,var( --green ) 25.58%,var( --blue ) 100%);
    min-height: 50px;
    padding: 70px 6.57895% 40px 6.57895%;
    margin-top: 130px;
}
header p {
    margin-bottom: 1rem;
    color: #fff;
}
#imgHeader {
    width: 100%;
}

#bildmarke {
    position: absolute;
    top: -104px;
    height: 150px;
    left: 25px;
}
#wortmarke {
    position: absolute;
    top: -110px;
    height: 110px;
    right: 25px;
    color: var( --gray );
}
main {
    padding: 43px 6.57895% 20px 6.57895%;
}
footer {
    padding: 10px 6.57895% 20px 6.57895%;
}
main a {
    color: var( --blue );
    font-weight: bold;
    text-decoration: none;
    border-bottom: solid 1px transparent;
    transition: border-bottom-color 0.2s ease-in;
    -moz-transition: border-bottom-color 0.2s ease-in;
    -o-transition: border-bottom-color 0.2s ease-in;
    -webkit-transition: border-bottom-color 0.2s ease-in;
}
main a:hover {
    text-decoration: none;
    border-bottom-color: var( --blue );
}
#button {
    display: inline-block;
    margin-top: 20px;
    background-color: var( --gray );
    color: #fff;
    padding: 0.875rem 2.5rem 0.775rem;
    border-radius: 2rem;
    transition: all .35s ease-in-out;
}
#button:hover {
    background-color: var( --blue );
}

@media screen and ( max-width: 500px ) {
    h1 {
        font-size: 2.5rem;
        line-height: 2.7rem;
    }
    h1 small {
        font-size: 1.35rem;
    }
    main {
        padding-top: 33px;
    }
}
@media screen and ( max-width: 479px ) {
    #wortmarke {
        left: 107px;
        z-index: 100;
        top: -103px;
        height: 100px;
    }
}

@media screen and ( max-width: 400px ) {
    header > div {
        margin-top: 100px;
    }
    #bildmarke {
        top: -87px;
        height: 125px;
        left: 0px;
    }
    #wortmarke {
        top: -87px;
        height: 85px;
        left: 70px;
    }
    h1 {
        font-size: 2rem;
        line-height: 2.2rem;
    }
    h1 small {
        font-size: 1.25rem;
    }
    h2 {
        font-size: 1.25rem;
    }
    main {
        padding-top: 23px;
    }
}

.noWrap {
    white-space: pre;
    word-break: keep-all;
  }

  .noWrap {
    white-space: pre;
    word-break: keep-all;
  }