/* -----------------------------------------------------------

NORMALISIERUNG DER ELEMENTE

----------------------------------------------------------- */


body{
    margin: 0;
    background: #f9f9f9;
    color: #333;
    line-height: 1.5;
    font-size: 16px; /* root-em Ausgangswert */
}



/* Abstände allesamt auf Null setzen */

p, ul, li{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
h1, h2, h3, h4, h5, h6{
    line-height: 1.1;
    margin: 0 0 0.4em 0;
    padding: 0;
}


/* Standard-Verhalten der Links nullen */

a, a:hover, a:active{
    text-decoration: none;
}
a:focus{
    outline: none;
}
input[type=mail],
input[type=text]{
    border-radius: 0;
    padding: 0.35em 0;
    text-indent: 0.85em;
    border: 1px solid #999;
}
button{
    border: 1px solid #999;
    background: #cecece;
    color: #333;
    border-radius: 0;
    padding: 0.28em 0;
}
button:focus,
button:active,
button:hover,
button::-moz-focus-inner{outline: none;border: 0;}

figure{width: 100%;height: auto;margin: 0;padding: 0;}
figure img, picture, picture img{display: block;width: 100%;height: auto;}


/* Farbhelfer */
.red        {background: #b33;}
.green      {background: #3f3;}
.blue       {background: #33f;}
.violet     {background: #7e32b3;}
.orange     {background: #f7910d;}
.lightgrey  {background: #eee;}
.medgrey    {background: #bbb;}
.grey       {background: #999;}



/* -----------------------------------------------------------

                    CASE: Full Width

----------------------------------------------------------- */


.full-width .wrapper,
.full-width .row{
    width: 100%;
}


.full-width .container{
    max-width: 1140px;
    margin: auto;
}

.full-width .wide .container{width: 100%;max-width: 100%}
.wide .container > div:first-of-type{padding-left: 0;}
.wide .container > div:last-of-type{padding-right: 0;}



/* -----------------------------------------------------------

                    CASE: Tile Width

----------------------------------------------------------- */


.tile .wrapper{
    max-width: 1140px;
    margin: auto;
    box-shadow: 0 0 3px #000;
}

.tile .row{
    width: 100%;
}






.container:before,
.container:after{
    display: table;
    content: " ";
}
.container:after{
    clear: both;
}

/* Sorge für das Floating der Cols */
.container > div,
.container > aside{
    float: left;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    padding: 0 1em;
	min-height: 1px;
}


/* Aussenabstände für verschachtelte .container angleichen  */
.container .container{margin: 0 -1em;}







/* alles, was größer als 1280 ist, gilt als Desktop-Größe */
.desk-c0{display:none}
.desk-c1{width:8.33333%}
.desk-c2{width:16.66666%}
.desk-c3{width:25%}
.desk-c4{width:33.33333%}
.desk-c5{width:41.66666%}
.desk-c6{width:50%}
.desk-c7{width:58.33333%}
.desk-c8{width:66.66666%}
.desk-c9{width:75%}
.desk-c10{width:83.33333%}
.desk-c11{width:91.66666%}
.desk-c12{width:100%}

.desk-off-c1{margin-left:8.33333%}
.desk-off-c2{margin-left:16.66666%}
.desk-off-c3{margin-left:25%}
.desk-off-c4{margin-left:33.33333%}
.desk-off-c5{margin-left:41.66666%}
.desk-off-c6{margin-left:50%}







/* Breakpoint für Tablets im Landscape */
@media only screen and (max-width: 1280px){
    
.tabL-c0{display:none}
.tabL-c1{width:8.33333%}
.tabL-c2{width:16.66666%}
.tabL-c3{width:25%}
.tabL-c4{width:33.33333%}
.tabL-c5{width:41.66666%}
.tabL-c6{width:50%}
.tabL-c7{width:58.33333%}
.tabL-c8{width:66.66666%}
.tabL-c9{width:75%}
.tabL-c10{width:83.33333%}
.tabL-c11{width:91.66666%}
.tabL-c12{width:100%}

.tabL-off-c1{margin-left:8.33333%}
.tabL-off-c2{margin-left:16.66666%}
.tabL-off-c3{margin-left:25%}
.tabL-off-c4{margin-left:33.33333%}
.tabL-off-c5{margin-left:41.66666%}
.tabL-off-c6{margin-left:50%}
    
}











/* Breakpoint für Tablets im Portrait */
@media only screen and (max-width: 853px){
    
.tabP-c0{display:none}
.tabP-c1{width:8.33333%}
.tabP-c2{width:16.66666%}
.tabP-c3{width:25%}
.tabP-c4{width:33.33333%}
.tabP-c5{width:41.66666%}
.tabP-c6{width:50%}
.tabP-c7{width:58.33333%}
.tabP-c8{width:66.66666%}
.tabP-c9{width:75%}
.tabP-c10{width:83.33333%}
.tabP-c11{width:91.66666%}
.tabP-c12{width:100%}

.tabP-off-c0{margin-left:0}
.tabP-off-c1{margin-left:8.33333%}
.tabP-off-c2{margin-left:16.66666%}
.tabP-off-c3{margin-left:25%}
.tabP-off-c4{margin-left:33.33333%}
.tabP-off-c5{margin-left:41.66666%}
.tabP-off-c6{margin-left:50%}
    
}






/* Breakpoint für kleine Tablets im Portrait und Smartphones im Landscape */
@media only screen and (max-width: 620px){
    
.smL-c0{display:none}
.smL-c1{width:8.33333%}
.smL-c2{width:16.66666%}
.smL-c3{width:25%}
.smL-c4{width:33.33333%}
.smL-c5{width:41.66666%}
.smL-c6{width:50%}
.smL-c7{width:58.33333%}
.smL-c8{width:66.66666%}
.smL-c9{width:75%}
.smL-c10{width:83.33333%}
.smL-c11{width:91.66666%}
.smL-c12{width:100%}

.smL-off-c0{margin-left:0}
.smL-off-c1{margin-left:8.33333%}
.smL-off-c2{margin-left:16.66666%}
.smL-off-c3{margin-left:25%}
.smL-off-c4{margin-left:33.33333%}
.smL-off-c5{margin-left:41.66666%}
.smL-off-c6{margin-left:50%}
    
}








/* Breakpoint für Smartphones im Portrait - iPhone 6+ als aktuelle Referenz */
@media only screen and (max-width: 480px){
    
.smP-c0{display:none}
.smP-c1{width:8.33333%}
.smP-c2{width:16.66666%}
.smP-c3{width:25%}
.smP-c4{width:33.33333%}
.smP-c5{width:41.66666%}
.smP-c6{width:50%}
.smP-c7{width:58.33333%}
.smP-c8{width:66.66666%}
.smP-c9{width:75%}
.smP-c10{width:83.33333%}
.smP-c11{width:91.66666%}
.smP-c12{width:100%}

.smP-off-c0{margin-left:0}
.smP-off-c1{margin-left:8.33333%}
.smP-off-c2{margin-left:16.66666%}
.smP-off-c3{margin-left:25%}
.smP-off-c4{margin-left:33.33333%}
.smP-off-c5{margin-left:41.66666%}
.smP-off-c6{margin-left:50%}
    
}



.mobile-nav{display: none;}
@media screen and (max-width: 620px){
    .wrapper{padding-top: 72px;}
    
    .row.mobile-nav{display: table;padding-top: 0;padding-bottom: 0;}
    .tile .off-canvas,
    .full-width .off-canvas{
        position: fixed;
        top: 70px;
        left: -88%;
        width: 85%;
        height: calc(100vh - 70px);  
        display: block;
        z-index: 820;
        -webkit-transition: 0.4s ease-out;
        -moz-transition: 0.4s ease-out;
        transition: 0.4s ease-out;
        background: #fff;
    }
  /*  .off-canvas-in .wrapper{
        position: fixed;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }*/
    .off-canvas-in .off-canvas{
        left: 0;
    }
    .off-canvas .container{
        height: 100%;
        overflow-y: scroll; 
    }
    .off-canvas .container > div{
        padding: 0;
    }
    .off-canvas li{
        display: block;
        width: 100%;
    }
    .off-canvas a{
        text-align: left;
    }

    /* HAMBURGER Knopf */
    .off-canvas-trigger{
        float: right;
        position: relative;
        width: 50px;
        height: 44px;
        border: 0;
        background: transparent;
    }
    .hamburger-wrapper {
        width: 32px;
        height: 32px;
        border: 0px solid #BBB;
        border-radius: 3px;
        top: 15px;
        left: 18px;
        position: absolute;
    }
    .hamburger {
        width: 20px;
        height: 2px;
        background: #333;
        border-width: 4px 0px;
        border-style: solid none;
        border-color: #fff;
        position: absolute;
        top: 11px;
        left: 6px;
        transition: all 0.3s ease 0s;
    }
    .hamburger::before {
        width: 20px;
        height: 2px;
        color: #333;
        content: ".";
        overflow: hidden;
        position: absolute;
        top: -5px;
        left: 0px;
        display: block;
        background: #333;
        transition: all 0.3s ease 0s;
    }
    .hamburger::after {
        width: 20px;
        height: 2px;
        color: #333;
        content: ".";
        overflow: hidden;
        position: absolute;
        bottom: -5px;
        left: 0px;
        display: block;
        background: #333;
        transition: all 0.3s ease 0s;
    }
    .hamburger-label {
        display: none;
    }
    .clicked .hamburger {
        background: transparent;
        border-color: transparent;
    }
    .clicked .hamburger::before {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
        margin-top: 5px;
    }
    .clicked .hamburger::after {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        transform: rotate(-45deg);
        bottom: 0;
    }
}