/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */


/*! normalize.css v3.0.0 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}


/* ==========================================================================
   JUNO
   ========================================================================== */

@font-face {
    font-family: 'Premiera';
    src: url('webfonts/Premiera-Book.eot');
    src: url('webfonts/Premiera-Book.eot?#iefix') format('embedded-opentype'),
         url('webfonts/Premiera-Book.woff') format('woff'),
         url('webfonts/Premiera-Book.svg#Premiera-Book') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Premiera';
    src: url('webfonts/Premiera-Italic.eot');
    src: url('webfonts/Premiera-Italic.eot?#iefix') format('embedded-opentype'),
         url('webfonts/Premiera-Italic.woff') format('woff'),
         url('webfonts/Premiera-Italic.svg#Premiera-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Premiera';
    src: url('webfonts/Premiera-Bold.eot');
    src: url('webfonts/Premiera-Bold.eot?#iefix') format('embedded-opentype'),
         url('webfonts/Premiera-Bold.woff') format('woff'),
         url('webfonts/Premiera-Bold.svg#Premiera-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}



::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}
::selection {
    background: #b3d4fc;
    text-shadow: none;
}


*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }


img { display: block; }
li { list-style: none; }
a{ text-decoration: none; }
h1, h2, h3, h4, h5{font-weight: normal;margin: 0}
p{ margin: 0; }
ul{ padding:0; }



html {
    color: #575759;
    background: #575759;
    font-size: 16px;
    line-height: 1.4;
    font-family: 'Premiera', serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h2{
    font-size: 1.5em;
}
.h3{
    font-size: 0.875em;
    color: #a41551;
}
h4, .h4{
    font-size: 1.25em;
    color: #a41551;
}

a{
    color: #575759;
    text-decoration: none;
}   
a:hover{
    color: #a41551;
    text-decoration: none;
}

section p, section ul{
    font-family: 'Interstate', sans-serif;
    font-weight: normal;
}




/* Mobile */

.outer-wrapper{
    position: relative;
    overflow: hidden;
    width: 100%;    
}

.inner-wrapper{    
    background: #fff;
    width:100%;
    margin: 0 auto;
    padding:25px 20px;
    position: relative;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: -webkit-transform 300ms ease;
    -moz-transition: -moz-transform 300ms ease;
    -o-transition: -o-transform 300ms ease;
    transition: transform 300ms ease;
}   

.nav-open{
    -webkit-transform:translateX(-200px);
    -moz-transform:translateX(-200px);
    -ms-transform:translateX(-200px);
    -o-transform:translateX(-200px);
    transform:translateX(-200px);
}
    
    header{
        
    }

        .logo{            
            margin: 0 0 25px 0;
            width:140px;
            height:80px;
        }

        .claim{
            display: block;
            font-style: italic;
            font-size: 0.8125em;
            line-height: 1.1;
            margin-bottom: 50px;
        }    

        .nav-btn {
            -webkit-transition: opacity 200ms ease;
            -moz-transition: opacity 200ms ease;
            -o-transition: opacity 200ms ease;
            transition: opacity 200ms ease;
            display: block;
            opacity: 0.3;
            width:44px;
            height:44px;
            padding:14px 0 0 13px;
            position: absolute;
            top:20px;
            right:20px;
        }
            .nav-btn span{
                display: block;
                width: 18px;
                height: 15px;
                background: url(../img/navicon.svg) center center no-repeat;
            }
            .no-svg .nav-btn span {                
                background-image: url(../img/navicon.png);
            }


        nav{
            position: absolute;
            top: 0;
            width:100%;
            -webkit-transform:translateX(100%);
            -moz-transform:translateX(100%);
            -ms-transform:translateX(100%);
            -o-transform:translateX(100%);
            transform:translateX(100%);
            padding:60px 0 0 10px;
        }   

            nav li{
                margin-bottom:5px;
            }

            nav a{
                color: #fff;
                opacity: 0.8;
                font-size: 1.25em;
            }   

            nav a:hover, nav a:focus{
                color:#fff;
                opacity: 1;
            }

            .dfo-link{
                margin-top: 30px;
                width: 130%;
            }

            .dfo-link a{
                display: table;
                color: #7ea2ba;
            }

            .dfo-link a:hover,
            .dfo-link a:focus{
                color: #ffffff;
            }

            .dfo-link svg{
                fill: none;
                stroke: currentColor;
                stroke-width: 0.8;
                width: 12px;
                height: 12px;
                margin-left: 6px;
                margin-bottom: -2px;
            }

            .dfo-link--nav{
                display: none;
            }

            .dfo-link--head{
                background: #002940;
                margin-top: 0;
                padding: 11px 30px 10px 20px;
                width: auto;
            }
            .dfo-link--head a{
                margin-left: auto;
            }

            @media only all and (min-width: 720px) {
                .dfo-link--head{
                    display: none;
                }
                .dfo-link a:hover,
                .dfo-link a:focus{
                    color: #002940;
                }

                .dfo-link--nav{
                    display: block;
                }
            }


            .close-btn {
                -webkit-transition: opacity 200ms ease;
                -moz-transition: opacity 200ms ease;
                -o-transition: opacity 200ms ease;
                transition: opacity 200ms ease;
                display: block;
                opacity: 0.7;
                width:44px;
                height:44px;
                padding:13px 0 0 13px;
                position: absolute;
                top:20px;
                left:120px;
            }
                .close-btn span{
                    display: block;
                    width: 18px;
                    height: 18px;
                    background: url(../img/close.svg) center center no-repeat;
                }
                .no-svg .close-btn span {                
                    background-image: url(../img/close.png);
                }
               

        .nav-btn:hover, .nav-btn:focus, .nav-btn.active, .close-btn:hover, .close-btn:focus {
            opacity: 1;
        }        

        .nav-btn, .close-btn{
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }




    
    .content{
        max-width: 540px;
    }   

        .h3{
            margin-bottom:40px;
        }

        section{
            margin-bottom:80px;
        }

        h2{
            margin-bottom: 30px;
        }

            h2:after{
                content:'';
                width:50px;
                height: 7px;
                background: #575759;
                display: block;
                margin-top:2px;
            }

        section ul{
            padding-left:13px;
        }    

        section li{
            position: relative;
            margin-bottom:15px;
        }

        section li:before {
            content: "• ";
            color: #a41551;
            position: absolute;
            left:-12px;
        }

        #versprechen .h3{
            margin: 0;
            padding-top:20px;
        }

        /* Über uns */

        #ueber-uns .h4{
            margin-top: 70px;
            margin-bottom: 12px;
        }
        #ueber-uns .h4:first-of-type{
            margin-top: 50px;
            margin-bottom: 35px;
        }
        #ueber-uns .text-link{
            margin-top: 22px;
            display: table;
            color: #7ea2ba;
        }

        #ueber-uns .text-link:hover,
        #ueber-uns .text-link:focus{
            color: #002940;
        }

        .members a{
            display: inline-block;
            vertical-align: middle;
        }

        .members a:first-child{
            width: 33%;
            opacity: 0.69;
            padding-top: 13px;
        }
        .members a:last-child{
            width: 30%;
            opacity: 0.57;
            margin-left: 50px;
        }

        .members a img{
            display: block;
            width: 100%;
            height: auto;
            margin-bottom: 0;
        }


        /* Personen */

        .person{
            padding-top:5px;
            margin-bottom: 40px;
        }

        .person:nth-child(4){   
            padding-top:30px;         
        }

            .person img{
                margin: 0 40px 10px 0;
                float:left;
            }

            .person .info{
                float: left;                
            }

            .person h4{
                line-height: 1;
                margin-bottom: 5px;
            }

            .person .title{
                margin-bottom: 20px;
            }

            
        .vita-btn{
            display: block;
            font-style: italic;
            margin-top:15px;
        } 
            .vita-btn.active{
                color: #a41551;
            } 

        .vita{
            display: none;
            margin-bottom: 40px
        } 



        /* Werte */



        h4:nth-child(2){
            margin-top:0;
        }


        /* Kontakt */

        .title{
            display: block;
            font-style: italic;
            line-height: 1.0;
            margin-bottom: 25px;
        }

        .letter{
            padding-right: 10px;
            display: inline-block;
            width:25px;
        }

        small{
            display: block;
            line-height: 1.3;
            font-size:inherit;
            color: #b1b2b3;
            margin:25px 0 0 0;
        }


        /* Partner */

        img{
            margin-bottom:25px;
        }


    #partner img{
        margin-bottom: 15px 0 20px;
    }

    .press{
        padding: 0;
        margin-bottom: 1rem;
    }

    .press li{
        margin-bottom: 1.75rem;
    }

    .press li::before{
        content: '';
        display: none;
    }

    .press h4{
        color: inherit;
        font-family: 'Premiera', serif;
        font-style: italic;
        font-size: 1.18752rem;
        margin-bottom: 5px;
    }

    .press a{
        text-decoration: underline;
        text-decoration-color: #a7a7a9;
    }

    .press a:hover{
        text-decoration-color: currentColor;
    }


    #jobs h4{
        margin: 20px 0;
    }

    #jobs ul{
        margin: 12px 0 30px;
    }

    #jobs li{
        margin-bottom: 6px;
    }

    #jobs strong{
        font-family: 'Interstate', sans-serif;
        font-weight: normal;
    }


    footer{
        font-size:0.8125em;
        color: #b1b2b3;
        margin:130px 0 0 0;
        position: relative;
        padding-bottom: 20px;
    }

        footer a{
            color: #b1b2b3;
        }


        .imprint-btn, .privacy-btn{
            display: block;
            float: left;
            margin-right: 20px;
        }
            .imprint-btn.active, .privacy-btn.active{color:#a41551;}


        @media only all and (min-width: 480px) {
            footer .left{
                float: left;
            }

            .imprint-btn, .privacy-btn{
                float: right;
                margin-left: 20px;
                margin-right: 0;
            }
        }

        

        .imprint, .privacy{
            margin-top:40px;
            padding-bottom:40px;
            display: none;
        }

        .imprint strong, .privacy strong{
            line-height: 2;

        }

        .imprint .letter, .privacy .letter{
            padding-right: 0px;
            width:15px;
        }

        .imprint li, .privacy li{
            padding-left: 10px;
        }

        .imprint li:before, .privacy li:before{
            content: '- ';
            display: inline-block;
            width: 10px;
            margin-left: -10px;
        }

        footer .clearfix > *{
            margin-top: 30px;
        }










@media only all and (min-width: 384px) {
    .h3{
        font-size:1.125em;
    }

    .members a:first-child{
        width: 26%;
        opacity: 0.69;
    }
    .members a:last-child{
        width: 23%;
        opacity: 0.57;
        margin-left: 70px;
    }
}






@media only all and (min-width: 720px) {

    html{
        background: #fff;
    }

    
    .inner-wrapper{
        width:720px;
        background: transparent;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }

        header{
            width:140px;
            position:fixed;
            height: 100%;
            padding-left: 2px;
        }   



            .nav-btn, .close-btn{
                display: none;
            }

            nav{
                position: static;
                width:auto;
                -webkit-transform:none;
                -moz-transform:none;
                -ms-transform:none;
                -o-transform:none;
                transform:none;
                padding: 30px 0 0 0;
            }   

                nav a{
                    color: #a0a1a3;
                    opacity: 1;
                    -webkit-transition: color 200ms ease;
                    -moz-transition: color 200ms ease;
                    -o-transition: color 200ms ease;
                    transition: color 200ms ease;
                    font-size: inherit;
                }
                nav a:hover, nav a:focus{
                    color: #a41551;
                }

             

            .line{
                width:30px;
                height:3px;
                background:#a41551;
                position: absolute;
                bottom:55px;
            }


        .content{
            margin-left:240px;
        }    

            .h3{
                padding-top:62px;  
                margin-bottom:140px;              
            }

            section{
                margin-bottom: 100px;
            }

}

@media only screen and (min-width: 1024px) {
    
    .inner-wrapper{
        width:960px;
    }

        .content{
            margin-left:340px;
        }

}


.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}


.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}



@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
}



/* ==========================================================================
   Print styles.
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }



    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; 
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }

    /* Custom */
    
    header{display: block;position: static;}
    nav, .line{display: none;}
    .claim{margin-bottom: 40px}
    .content{margin: 0;}
    .content h3{margin-bottom: 40px;padding-top:0px;}

    h2{ margin-bottom: 5px;}

    h2:after{display: none;}

    section{margin-bottom: 50px}

    section ul{ margin-top:5px;}
    section li{ margin-bottom:5px;}

    .vita-btn{display: none;}
    .vita{display: block;}

    /*#kontakt{margin-bottom: 100px}*/
    footer{margin-top:25px;}
    .imprint-btn{display: none;}
    .privacy-btn{display: none;}
}