/*========================================================
        Kirsten Vogel
        1. Allgemeine HTML-Elemente
========================================================*/

/*http://css-tricks.com/rems-ems/*/
/*
2DO

*/



html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
}
html {
    height: 100%;
    font-size: 16px;
    /* SPINNER */
        background-color: #fff;
        background-attachment: fixed;
        background-position: center center; 
        background-repeat: no-repeat;
        background-image: url('../pix/spinner.gif'); 
}

body {
    background-color: #fff;
    color: #000;
    font-family: 'Noto Sans', Arial, sans-serif;
    font-weight: 400; /* 400 */
    z-index: -32; /* damit body unter #heldIos liegt (sonst überdeckt bg-color von body #heldIos)*/
    height: 100%;
    line-height: 1.375;
    position: relative;
    /* bei position fixed ist schrift im safari dünner*/
    /*http://stackoverflow.com/questions/22204752/mac-safari-font-rendering-changes-thinner-when-any-element-on-the-page-gets-posi*/
    -webkit-font-smoothing: subpixel-antialiased;
}

h1, h2{
    margin: 0px;
    margin-bottom: .5em;
    font-family: 'Noto Sans', Arial, sans-serif;
    font-weight: 700;
    font-size: 4rem; /* 4rem */
    text-transform: uppercase;
      
}
#buecher h2 {
    font-size: 5rem; /* 4rem */
}
h1 .subline,
h2 .subline/*,
#buecher .buecherHolder h3 */ {
    display: block;
    font-family: 'Noto Sans', Arial, sans-serif;
    font-weight: 400;
    font-size: .6em;
    padding: 0;
    margin: 0;
    margin-top: -.2em;
}   
h1 { /* titel! */
    font-size: 5rem; /* 5rem;*/
    /*margin-top: -1.5rem;*/
}
#logo h1 a.topLink span, 
#logo h1 a.homeLink span{
   margin-left: -.2em;
} 
h3 {
    margin: 0px;
    /*margin-bottom: .5em;*/
    font-family: 'Noto Sans', Arial, sans-serif;
    font-weight: 700;
    font-size: 2.8rem; /* 4rem */
    text-transform: uppercase;
    margin: 0 20px;
    padding-left: 2rem;
    text-align: left;
    color: #fff;
    /*background-color: #339;*/ /*666*/
    background-image: url('../pix/h3BGR.png'); 
    background-size: 100% 100%;
 }  /* ca. 18px */ 
 #neuigkeiten h3 {
    margin: 0;
    margin-bottom: .5em;

 }  /* ca. 18px */ 
h4 { 
    font-size: 1.5rem;
    /*margin-bottom: .5em; */
    margin-bottom: .2em; 

    }  /* ca. 20px  120%*/ 
h4 .subline {
    display: block;
    font-size: .8rem;
    line-height: 1;
}
 
h5 { font-size: 1.05rem; }   /* ca. 16px */ 
h6 { font-size: 1.02rem; }  /* ca. 14px */

ol, ul {
    list-style: none outside none;
}

div {
    overflow: visible;
}

a:link { text-decoration: none;   color: #fff;}

a:visited { color: #fff;}

a:hover, a:focus {  text-decoration: none;}

a:active{   color: #fff;}

a { text-decoration: none; outline: none;}/* outline entfernt beim klicken den gepunkteten rahmen um den link*/

p, ul {
    font-size: 1.2rem; /*ex 1.4rem;  wegen zuwenig text vergrößert*/
    word-spacing: .1rem;
    margin: 0;
    text-align: left;
    margin-bottom: 1em;
}

ul ul {
    margin: 0;
    margin-left: 1em;
}

li {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
}
img {
	border: none;
}


.kursiv {
    font-style: italic;
}
 
.fett {
    font-weight: bold; 
}

.zentriert {
    text-align: center;
}
.unterstrichen {
    text-decoration: underline;
}
 
.schatten {
    -moz-box-shadow: 0 0 25px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 0 25px rgba(0,0,0,0.3);
    box-shadow: 0 0 25px rgba(0,0,0,0.3);
}

.rahmen {
    border: 10px solid #fff;
}



.floatLeft {
    float: left;
}

.floatRight {
    float: right;
}
/* micro clearfix
http://nicolasgallagher.com/micro-clearfix-hack/ */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.cf:after {
    clear: both;
}
/**  http://nicolasgallagher.com/micro-clearfix-hack/
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}



/*========================================================
        2. DIV-Bereiche
========================================================*/

header {
    z-index: 1;
    position: absolute;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: rgba(255, 255, 255, 0.5);
}

#logo {
    position: absolute;
    top: 0;
    left: 0;
}
#logo h1 {
    font-family: 'Noto Sans', Arial, sans-serif;
    margin-top: .5rem;
    margin-left: 2rem;
    font-size: 3rem;
    color: #330066;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: initial;
}
#logo h1 span {
    font-weight: 700;
}
#ios { /* display dot neben LOGO wenn ios*/
    display: none;
}


#navi { 
    position: relative;
    top: 0;
    left: 0;
    z-index: 100;
}

#navi ul {
    position: absolute;
    z-index: 101;
    top: 25px;
    right: 30px;
    margin: 0;
}

#navi li {
    float: left;
    font-family: 'Noto Sans', Arial, sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: .04em;
    list-style-type: none;
    margin: 0;
    margin-left: 3rem;
    text-transform: uppercase;
}

#navi li a:link {
    color: #330066; }

#navi li a:visited { }

#navi li a:hover { 
    border-bottom: 2px solid rgba(51, 0, 102, 1);
    padding-bottom: .3rem;
}

#navi li a:focus { }

#navi li a:active {   }

#navi li a {     
    padding: 0 .2rem;
    border-bottom: 2px solid rgba(51, 0, 102, 0);
    outline: none;/* outline entfernt beim klicken den gepunkteten rahmen um den link*/

    transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;  
    -webkit-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    }


footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;

    height: 4rem;
    background-color: #000;

    color: #fff;
    font-size: .8rem;
    font-weight: 300;
    margin: 0;
    padding: 0;
    
}
footer p {
    position: absolute;
    display: block;
    top: 50%;
    width: 100%;
    height: 2rem;

    margin: 0;
    margin-top: -.5rem;

    color: #fff;
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: .06rem;
    text-align: center;
    vertical-align: center;
}

footer span.floatLeft,
footer span.floatRight {
    margin: 0 2em;
}

footer p a:link {
    text-decoration: none;
}

footer p a:visited { }

footer p a:hover { 
    text-decoration: underline;
}

footer p a:focus { }

footer p a:active {   }

footer p a {     
    text-decoration: none;
}

.held {  
    width: 100%;
    height: 100%;/*psico*/
    /*min-height: 500px; /* damit bei kleinemr screen trotzdem h1 lesbar bleibt und nicht beschnitten wird*/ 
    /*entfernt, da bei iphone quer sonst h1 abgeschnitten*/
    color: #fff;
    position: relative;
    text-align: center;
}
.held h1,
.held h2  {  
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6),
                -1px -1px 4px rgba(0,0,0,0.6);
}

.held .buchtitel {
    display: none;
    position: absolute;
    right: 0;
    bottom: 0;

}
.held .buchtitel img {

    width: 250px;
    height: auto;
}

.held .fliesstext {
    position: absolute;
    top: 50%;
    left: 50%;
    /*margin-top: 2rem; /* oder NULL*/ 
    /*entfernt, da bei iphone quer sonst h1 abgeschnitten*/
    transform: translate(-50%, -50%);
    padding: 0;

    padding: 50px 40px;
    background-color: #fff;
    border-radius: 20px;

        -moz-box-shadow: 0 0 25px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 0 25px rgba(0,0,0,0.3);
    box-shadow: 0 0 25px rgba(0,0,0,0.3);

    width: 100%;
}
.held .fliesstext p {
    font-family: 'Noto Sans', Arial, sans-serif;
    font-weight: 300;
    font-size: 2.5rem;
    /*text-transform: uppercase;*/
    text-align: center;
    color: #000;
    margin-bottom: .3em;
    }
    .held .fliesstext p span {
font-style: italic;
font-weight: 500;
    }
.held .fliesstext .claim {
    font-family: 'Noto Sans', Arial, sans-serif;
    margin: 0;
    font-size: 4rem;
    color: #fff;
    font-weight: 400;
    line-height: 1.2em;
    letter-spacing: .04em;
    text-transform: initial;
     text-shadow: 1px 1px 8px rgba(0,0,0,0.6),
                -1px -1px 8px rgba(0,0,0,0.6);
}
.held .fliesstext .claim span {
    
    display: block; 
    text-align: right;
    font-family: 'Noto Sans', Arial, sans-serif;
    font-size: 2rem;
    line-height: 1em;
    padding-right: 1em;
    margin-top: -.5em;
}

.held .nachUnten {
    position: absolute;
    display: block;
    width: 100%;
    bottom: 10px;
    text-align: center;

}
.held .nachUnten img {
    width: 70px;
    height: auto;
}


#held1 {
    background: url(../pix/Auto-Gross.jpg);
    background-size: cover;
    background-position: 0% 100%; /* wenn nicht 50% dann in $(window).scroll(function()... entsprechenden wert einsetzen */
    background-attachment: fixed;
}

#heldIos {
    display: none;
    position: fixed;
    z-index: -16; /*damit liegt #heldIos ueber body und unter dem rest*/
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: url(../pix/held1.jpg);
    background-size: cover;
    background-position: 0% 100%; /* wenn nicht 50% dann in $(window).scroll(function()... entsprechenden wert einsetzen */
    /*background-attachment: fixed;*/
}

.inhalt {
    width: 100%;   
    position: relative;
    background: url(../pix/papier.jpg);     
    text-align: center;
}

.zeile {
    position: relative;
    height: 100%;
    max-width: 720px; /*ex 960 wegen wenig text verkleinert*/
    margin: 0px auto;
    /*padding: 0px 2em 50px;*/
    text-align: center;
}


.fliesstext {
    padding: 6rem 1.5rem; /*12rem 1.5rem;  6rem 1.5rem;  4rem 1.5rem;  *//* damit bei ios text nicht bis zum rand geht*/
}

#kontakt h2 {
  color: #330066;
}

#kontakt .fliesstext p {
  text-align: center;
  color: #330066;
}

#kontakt a:link { color: #330066;}

#kontakt a:visited { color: #330066;}

#kontakt a:hover { 
    color: #330066;
    border-bottom: 2px solid rgba(51, 0, 102, 1);
    padding-bottom: .3rem;
}
#kontakt a:focus { color: #330066;}

#kontakt a:active { color: #330066;}

#kontakt a {  
    color: #330066;
    padding: 0 .2rem;
    border-bottom: 2px solid rgba(51, 0, 102, 0);
    outline: none;/* outline entfernt beim klicken den gepunkteten rahmen um den link*/

    transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;  
    -webkit-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    }

#impressum h2, 
#datenschutz h2,
#impressum h3, 
#datenschutz h3,
#impressum h4, 
#datenschutz h4,
#impressum h5, 
#datenschutz h5 { 
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 700;
    color: #000;
    background-color: transparent;
    text-align: center;
    padding-left: 0;
}

#impressum h2, 
#datenschutz h2 {
    font-size: 2.3rem;
}

#impressum h3, 
#datenschutz h3 {
    font-size: 1.7rem;
}

#impressum h4, 
#datenschutz h4 {
    font-size: 1.5rem;
}

#impressum h5, 
#datenschutz h5 {
    font-size: 1.1rem;
    font-weight: 600;
}


#impressum ul li, 
#datenschutz ul li {
    list-style-type: disc;
    margin-left: 1em;
}

#impressum .fliesstext p {
    text-align: center;
}


#impressum a:link,
#datenschutz a:link { text-decoration: underline;   color: #000;}

#impressum a:visited,
#datenschutz a:visited { color: #000;}

#impressum a:hover, 
#impressum a:focus, 
#datenschutz a:hover, 
#datenschutz a:focus {  text-decoration: none;}

#impressum a:active,
#datenschutz a:active {   color: #000;}

#impressum a,
#datenschutz a { text-decoration: underline; outline: none;}/* outline entfernt beim klicken den gepunkteten rahmen um den link*/




/* background-position fixed in IE 10+ abschalten weil scroll bug */
/* http://www.impressivewebs.com/ie10-css-hacks/ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

.held {

    background-attachment: scroll !important; 

}

}

/*========================================================
        3. media query
========================================================*/

@media only screen and (min-width: 0px)  and (max-width: 1024px) { /*881 1000*/



}
    

@media only screen and (min-width: 0px)  and (max-width: 940px) { /*ex 800 */



/*    h1 {
        font-size: 4rem;
    }

    h2 {
        font-size: 3rem;
    }*/

    .held .nachUnten img {
        width: 80px;

    }


}
@media only screen and (min-width: 0px)  and (max-width: 720px) { /*881 1000*/
    
    .held .fliesstext .claim {
        padding: 0 1em;
    }
    .held .fliesstext .claim span {
        margin: 0;
    }

/*#buecher .buecherHolder { 
float: none;
    width: 100%;
    height: auto;
    margin-bottom: 4rem;
}
*/


}

@media only screen and (min-width: 0px)  and (max-width: 580px) { /*881 1000*/




    #navi ul {
        position: relative;
        top: 0;
        right: 0;
        text-align: center;
        width: 100%;
    }
    #navi ul li {
        float: none;
        display: inline;
        margin: 0 .2rem;
    }

    header {
        height: 110px;
        text-align: center;
    }
    #logo {
        position: relative;
    }
    #logo h1 {
        margin-left: 0;
        margin-top: .5rem;
        margin-bottom: .2rem;/* .5rem;*/
        font-size: 2.5rem;/*1.5*/
    }


/*    #navi ul {
        display: none;
    }

    .styled-select {
        display: block;
        left: 50%;
        top: 0;
        margin-left: -91px;
    }*/

    footer {
        height: auto;
    }

    .held .fliesstext .claim {
        font-size: 2rem;
        text-align: center;
   }
    .held .fliesstext .claim span {
        text-align: center;
        padding: 0;
    }
/*   #vogelDeko {
        position: absolute;
        top: -72px;
        right: -15px;
        width: 100px;
        height: auto;
    }*/

   #footer p {
        position: relative;
        top: 0;
        padding: 2rem 0;
   }
   #footer p span {
        float: none;
        display: block;
   }
   #footer p span.floatLeft {
    float: none;
        margin-bottom: .6rem;
   }
}

/* HEIGHT */

@media only screen and (min-height: 0px)  and (max-height: 400px) { /*881 1000*/

    .held .fliesstext {
        position: absolute;
        top: 40%;

    }
    .held .nachUnten img {
        width: 60px;

    }

}

/* PSICOs ND */