* {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: 'Muli-light', Helvetica, Arial, sans-serif;
    font-size: 100%;
}

html,
body {
    height: 100%;
}

body {
    background: #efefef;
}

p.trennung {

    /* hyphens */
    -moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

.wrapper_pet {
    max-width: 964px;
    width: 100%;
    position: relative;
    min-height: 100%;
    margin: 0 auto;
    background: #fff;
}

.wrapper_pet_2 {
    max-width: 964px;
    width: 100%;
    position: relative;
    min-height: 100%;
    margin: 0 auto;
    background-image: url("../pics/back_pet_2.jpg"), url("../pics/strandpattern.jpg");
    background-position: center top, left top;
    background-repeat: no-repeat, repeat; 
}

header.headerindex {
    background-color: #fff;
}

h1,
h2,
h3,
h4 {
    font-weight: normal;
}

h1 {
    font-family: 'Muli-Regular', Helvetica, Arial, sans-serif;
    font-size: calc(2.8em + (1.4vw + 1.4em) / 2);
    line-height: calc(1.1em + .5vw);
    letter-spacing: 0.04em;
    padding: 2% 0 2% 0;
    float: right;
}

h2 {
    font-family: 'Muli-Light', Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 2.1em;
    float: right;
}

h3 {
    font-family: 'Muli-Light', Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 1.6em;
}

.h3_744 {
    display: none;
}

h1.headline_1 {
    font-family: 'Muli-Regular', Helvetica, Arial, sans-serif;
    font-size: calc(2.4em + (1.4vw + 1.4em) / 2);
    line-height: calc(1.1em + .5vw);
    letter-spacing: 0.04em;
    color: #ccffff;
    padding-bottom: 2%;
    float: right;
}

h2.headline_2 {
    font-family: 'Muli-Light', Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 1.9em;
    color: #fff;
    float: right;
}

p {
    font-family: 'Muli-Light', Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: calc(0.6em + (0.8vw + 0.6em) / 2);
    line-height: calc(1.1em + .5vw);
    line-height: 1.3;
    padding: 0 0 1em 0;
}

.weiss {
    color: #fff;
}

.schwarz {
    color: #000;
}

hgroup {
    max-width: 964px;
    width: 94%;
    text-align: right;
    padding: 2% 5.187% 0 0;
}

.content {
    max-width: 960px;
    width: 93.75;
    position: absolute;
    bottom: 6%;
    right: 0;
    text-align: right;
    padding: 2% 2% 2% 0;
}

nav {
    position: absolute;
    top:6.4%;
    left:6%;
    width: 240px;
}


a {
    font-family: 'Muli-Bold', Helvetica, Arial, sans-serif;
    font-size: 1.2em;
    letter-spacing: 0.0em;
    color: #de9e0c;
    text-decoration: none;
    padding: 2%;
}

a:hover {
    color: #35d328;
}


.inhalt {
    max-width: 964px;
    width: 100%;
    padding: 4% 0 0 0;
}

.linkespalte {
    max-width: 400px;
    width: 41.49377593%;
    float: left;
    padding: 7% 0 0 5.187%;
}

.rechtespalte {
    width: 40.14522822%;
    float: right;
    padding: 0 6% 0 0;
}

.petsbild {
    max-width: 387px;
    width: 100%;
}

    .flasche-im-meer {
        max-width: 1024px;
        width: 100%;
        padding-top: 10%;
    }


@media only screen and (max-width : 860px) {

    .rechtespalte {
        width: 387px;
        float: right;
        padding: 0 6% 0 0;
    }

    .linkespalte {
        width: 387px;
        float: right;
        padding: 7% 6% 0 0;
        clear: both;
    }

    p.weiss {
        color: #000;
    }
}

@media only screen and (max-width : 768px) {
    .wrapper_pet {
          background: #fff;
    }
    
    .nav_loesung {
            width: 140px;
    }

    hgroup {
        max-width: 964px;
        width: 90%;
        text-align: left;
        padding: 0% 0 0 6%;
    }

    .hgroup_loesung {
        max-width: 400px;
        text-align: right;
        padding: 3% 6% 0 0;
        float:right;
    }

    .content {
        max-width: 640px;
        width: 90%;
        position: absolute;
        bottom: 6%;
        right: 0;
        text-align: left;
        padding: 2% 2% 0 6%;
    }

    h1 {
        font-family: 'Muli-Regular', Helvetica, Arial, sans-serif;
        font-size: 8vw;
        line-height: calc(1.1em + .5vw);
        letter-spacing: 0.04em;
        padding-bottom: 0;
    }

    h2 {
        font-family: 'Muli-Light', Helvetica, Arial, sans-serif;
        font-weight: 300;
        font-size: 1.9em;
        padding-bottom: 3%;
    }

    h3 {
        font-family: 'Muli-Light', Helvetica, Arial, sans-serif;
        font-size: 3vmax;
    }

    h3_744 {
        display: block;
    }

    .flasche-im-meer {
        max-width: 768px;
        width: 100%;
        padding-top: 2.2%;
    }

}


@media only screen and (max-width : 440px) {

    /* Alles  */

    p.weiss {
        color: #000;
    }

    a {
        font-family: 'Muli-Bold', Helvetica, Arial, sans-serif;
        font-size: 1.0em;
        letter-spacing: 0.0em;
        color: #de9e0c;
        text-decoration: none;
        padding: 2%;
    }

nav {
    position: absolute;
    top:4%;
    left:6%;
    width: auto;
}
    /* Index-Seite  */


    .conten {
        max-width: 640px;
        width: 90%;
        position: absolute;
        bottom: 2%;
        left: 0;
        text-align: left;
        padding: 2% 0 0 6%;
    }
    
        hgroup {
        max-width: 964px;
        width: 90%;
        text-align: left;
        padding: 20% 0 0 6%;
    }

    h1 {
        font-family: 'Muli-Regular', Helvetica, Arial, sans-serif;
        font-size: 2.7em;
        line-height: 1;
        letter-spacing: 0.04em;
        padding-bottom: 2%;
        float: left;
    }

    h2 {
        font-family: 'Muli-Light', Helvetica, Arial, sans-serif;
        font-weight: 300;
        font-size: 1.5em;
        float: left;
    }



    /* Seite Alternative  */

    .inhalt {
        max-width: 387px;
        width: 100%;
        margin: 0 auto;
        padding: 4% 0 0 0;
    }

    .rechtespalte {
        width: 100%;
        float: none;
        padding: 0 0 0 0;
    }

    .linkespalte {
        width: 90%;
        float: none;
        padding: 7% 5% 0 5%;
    }

    h1.headline_1 {
        padding-top: 10px;
    }
    
    h2.headline_2 {
    font-family: 'Muli-Light', Helvetica, Arial, sans-serif;
    font-size: 1.5em;
    line-height: 1.3;
}

   .flasche-im-meer {
       margin-top: 10%;
    }
}


@media only screen and (max-width : 340px) {
    
        h1 {
        font-family: 'Muli-Regular', Helvetica, Arial, sans-serif;
        font-size: 2.3em;
        line-height: 1;
        letter-spacing: 0.04em;
        padding-bottom: 2%;
        float: left;
    }
    
        h2 {
        font-family: 'Muli-Light', Helvetica, Arial, sans-serif;
        font-weight: 300;
        font-size: 1.3em;
        float: left;
    }
    
        .hgroup_loesung {
        max-width: 400px;
        text-align: right;
        padding: 12% 6% 0 0;
        float:right;
    }
    
    h2.headline_ {
    font-family: 'Muli-Light', Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 1.9em;
    color: #fff;
    float: right;
}
    
    
    
    
}