html, body {
    height: 100%;
    font: 0.75em/1.5em Gill Sans MT,Calibri,sans-serif;
    color: #444;
}

a {
    color: #444;
    text-decoration: none;
    font-size: 1.125em;
}

.clearfix {
    clear: both;
}

.clearfix:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
}

li {
    list-style: none;
}

.wrapper {
    background: url("../img/farbfaecher.jpg") no-repeat;
    background-size: cover;
}

.header {
    min-height: 18em;
    background: rgba(255,255,255,0.9);
}

.box-header {
    margin: 0 auto;
    max-width: 96em;
    position: relative;
}

.logo a {
    direction: ltr;
    display: block;
    text-indent: -999em;
}

.logo img {
    display: block;
    width: 30em;
    position: absolute;
    right: 0;
    top: 5em;
}

.content {
    max-width: 96em;
    margin: 5.75em auto 5.5em;
}

.box-content {
    background: rgba(60, 72, 95, 0.8);
    max-width: 46em;
    color: #fff;
    padding: 3em 3em 2.75em;
}

.box-content h1 {
    font-size: 3em;
    line-height: 1.25em;
    font-weight: 400;
    margin: 0;
}

.box-content li {
    font-size: 1.875em;
    font-weight: 700;
    line-height: 1.625em;
    position: relative;
}

.box-content li span {
    display: block;
    font-size: 0.875em;
    font-weight: 400;
    line-height: 1.25em;
}

.box-content li i {
    left: -1.25em;
    position: absolute;
    top: 0.25em;
}

.box-info {
    max-width: none;
    color: #fff;
    padding: 3em 3em 2.75em;
}

.box-info h1 {
    font-size: 2.5em;
}

.box-info p {
    font-size: 1.375em;
}

.footer {
    background: rgba(255,255,255,0.9);
}

.box-footer {
    position: relative;
    max-width: 96em;
    margin: 0 auto;
    padding: 2.5em 0 6em;
}

.qrcode {
    position: relative;
    background: url("../img/qrcode.svg") no-repeat scroll 0 0 / contain;
    width: 15em;
    height: 15em;
    margin-right: 2.5em;
    float: left;
}

.qrcode span {
    bottom: -1.75em;
    font-size: 1.125em;
    position: absolute;
}

.contact {
    float: left;
    font-size: 1.5em;
    line-height: 1.375em;
}

.info-text {
    color: #3c485f;
    float: right;
    font-size: 2.125em;
    line-height: 1.25em;
    margin: 0 0 1em 3em;
    width: 100%;
}

.info-text span {
    float: right;
    max-width: 20em;
    position: relative;
}

.info-text i {
    bottom: 0.125em;
    display: inline-block;
    left: -1.25em;
    position: absolute;
}

.footer-link {
    position: absolute;
    bottom: 4em;
    right: 0;
}

@media (max-width: 359px) {

    .wrapper {
        background: url("../img/farbfaecher_small.jpg") no-repeat;
    }

    .qrcode {
        display: none;
    }

    .info-text {
        font-size: 1.5em;
        width: auto;
    }

    .wrapper {
        background: none;
    }

    .content {
        margin: 5.75em auto 0;
    }
}

@media (min-width: 360px) and (max-width: 1152px) {

    .wrapper {
        background: url("../img/farbfaecher_small.jpg") no-repeat;
    }

    .qrcode {
        display: none;
    }

    .info-text {
        float: left;
        font-size: 1.5em;
        width: auto;
    }

    .info-text span {
        float: left;
        max-width: none;
    }
}

@media (min-width: 680px) {

    .info-text {
        width: 21em;
        float: right;
    }

    .qrcode {
        display: block;
    }
}

@media (max-width: 1152px) {

    .logo img {
        right: 1em;
    }

    .info-text {
        font-size: 1.5em;
    }

    .box-footer {
        padding: 2.5em 1em 6em;
    }

    .footer-link {
        right: 1em;
    }
}