/*========================================================
        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: 'Roboto', 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: "Sue Ellen Francisco", 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: "Sue Ellen Francisco", 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: "Sue Ellen Francisco", 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
========================================================*/



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;

background-color: #000;
    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 .fliesstext {
    position: absolute;
    /*margin-top: 2rem; /* oder NULL*/ 
    /*entfernt, da bei iphone quer sonst h1 abgeschnitten*/

    padding: 0;


    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 #oben.fliesstext {
    position: absolute;
    width: 100%;
    height: 50%;
    top: 0;
    left: 0;
    z-index: 123;
        /*background-color: #f0f;*/
    /*margin-top: 2rem; /* oder NULL*/ 
    /*entfernt, da bei iphone quer sonst h1 abgeschnitten*/
border-bottom: 8px solid #000;
box-sizing: border-box;
    /*width: 100%;*/
}
.held #unten.fliesstext {
    position: absolute;
    width: 100%;
    height: calc(50% - 48px);
    top: 50%;
    left: 0;
    z-index: 12;
        /*background-color: #ff0;*/
    /*margin-top: 2rem; /* oder NULL*/ 
    /*entfernt, da bei iphone quer sonst h1 abgeschnitten*/


    /*width: 100%;*/
}
.held .fliesstext img {
    position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

width: 70%;
height: auto;
max-width: 960px;
/*max-height: 50%;*/

}



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

.zeile {
    position: relative;
    height: 100%;
    mmmmmmmmmax-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*/
}



/* 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-height: 450px)  and (max-height: 750px)  and (min-width: 1024px)  { /*881 1000*/
    .held .fliesstext img {


/*    width: 50%;
    height: auto;*/
    max-width: 660px;
    /*max-height: 50%;*/

    }


}
@media only screen and (min-height: 0px)  and (max-height: 550px)  and (min-width: 1024px)  { /*881 1000*/
    .held .fliesstext img {

/*
    width: 50%;
    height: auto;*/
    max-width: 360px;
    /*max-height: 50%;*/

    }


}
      

@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 */