/*
    NOTICE
    Diese Datei funktioniert prinzipiell.
    Nur die kleinen Seitenbreiten unter 720px der Startseite
    ergeben im Internet Explorer nicht das Gewünschte.
    Deshalb versuche ich in der nächsten Version,
    dasselbe so unzusetzen, dass IE es versteht.
*/
/*==========  webfonts  =====================================================*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
@import url(http://fonts.googleapis.com/css?family=Montserrat:400);
/*==========  reset  ========================================================*/
html, body, div, span, article, section,
h1, h2, h3, p, pre, a, code, img, ul, li,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
}
/*==========  colors  =======================================================*/
header #bg,
nav li {
    background-color:   #e6edf5;
}
/*----------  menu  ---------------------------------------------------------*/
nav a {
    color:              #000000;
}
nav a:hover {
    text-decoration:    none;
}
nav li:hover,
nav li:last-child:hover {
    background-color:   #c9daff;
}
nav li:last-child {
    background-color:   transparent;
}
nav li.active {
    background-color:   #4877dc;
    font-weight:        bold;
}
nav li.active a {
    color:              #ffffff;
}
/*----------  links  --------------------------------------------------------*/
a,
a:hover {
    color:              #0000c8;
}
/*==========  fonts  ========================================================*/
body {
    font-family:        'Open Sans', sans-serif;
}
h1,
h2,
h3 {
    font-family:        'Montserrat', sans-serif;
    font-weight:        normal;
}
header .title {
    font-family:        'Montserrat', sans-serif;
}
/*==========  page layout  ==================================================*/
body {
    box-sizing:         border-box;
    margin-left:        1.6em;
    margin-top:         1em;
    color:              #000000;
    line-height:        1.5em;
    font-size:          14px;
    margin:             1em 1.6em;
    padding-left:       calc(18% - 15.5em);
}
header {
    position:           relative;
    overflow:           hidden;
}
#logodiv {
    float:              left;
    height:             7.5em;
    width:              12em;
    display:            table;
    vertical-align:     middle;
    border-right:       2px solid #e0e0e0;
    border-bottom:      2px solid #e0e0e0;
}
#logodiv p {
    display:            table-cell;
    vertical-align:     middle;
}
#logo {
    display:            block;
    margin: auto;
}
#text {
    position:           absolute;
    left:               12em;
    width:              55em;
    margin-left:        1.4em;
}
header #bg {
    height:             7.5em;
    width:              52.3em;
    margin-left:        12em;
    border-bottom:      2px solid #e0e0e0;
    position:           absolute;
    z-index:            -1;
}
header .title {
    margin:             .4em 0 .3em 0;
    font-size:          2.1em;
    line-height:        1.5;
}
#text li {
    display:            inline;
    font-size:          1.3em;
    margin-right:       1em;
}
#text li:last-child {
    margin-right:       0;
}
/*----------  faders  -------------------------------------------------------*/
#fade_hz {
    position:           absolute;
    margin-left:        52.3em;
    height:             7.5em;
    width:              18em;
    z-index:            -1;         /*  damit es ggf. unter dem Text liegt */
    border-bottom:      2px solid #e0e0e0;
}
#fade_hz img {
    width:              14.3em;
    height:             7.5em;
}
#fade_vk {
    height:             0;
}
#fade_vk img {
    height:             10.7em;
    width:              12em;
    position:           relative;
    top:                -3em;
    z-index:            -1;
}
/*----------  menu  ---------------------------------------------------------*/
nav {
    float:              left;
    width:              12em;
    height:             30em;
}
nav li {
    display:            block;
    text-decoration:    none;
    cursor:             pointer;
}
nav a,
nav span {
    display:            block;
    padding:            .7em;
}
nav span {
    font-size:          0.8em;
}
/*----------  cont  ---------------------------------------------------------*/
#cont {
    margin-left:        12em;
    width:              49em;
    min-height:         32em;
    border-left:        2px solid #e0e0e0;
    border-right:       2px solid #e0e0e0;
    padding:            2em 2em 0 2em;
    position:           relative;
}
#cont p,
#cont ul {
    margin-bottom:      .8em;
}
#cont.index p,
#cont ul {
    margin-bottom:      1.2em;
}
#cont ul {
    margin-left:        1.4em;
}
#cont p {

    text-align:         justify;
}
#cont ul {
    list-style-position: outside;
    list-style-type:    none;
}
#cont li:before {
    content:            "●";
    font-size:          0.9em;
    margin-right:       .7em;
    margin-left:        -1.4em;  /*  derselbe Wert wie für #cont ul {margin-left}  */
}
#cont .text {
    /* Das muss explizit gesetzt werden, um das Float der Bilderleiste auszuschalten,
       wenn der Text länger ist als die Bilder.  */
    width:              33em;
    min-height:         32em;
}
#cont .text.auto {
    width:              auto;
}
#cont .images {
    float:              right;
    width:              auto;
}
#cont .images img {
    display:            block;
    margin:             0 0 1em 0;
}
#cont .text,
#cont .images img:last-child {
    margin-bottom:      2em;   /*  derselbe Wert wie für #cont {padding}  */
}
#cont li {
    margin:             .2em 0;
}
#cont #pad {
    height:             4em;
    width:              51.5em;
    clear:              both;
    background-color:   #ffffff;
}
/*==========  elements  =====================================================*/
h1 {
    font-size:          1.7em;
    margin:             0 0 .8em 0;
}
h2 {
    font-size:          1.4em;
    margin-bottom:      .6em;
}
h3 {
    margin-bottom:      0.5em;
    font-size:          1.2em;
    text-align:         left;
}
table {
    border-spacing:     0;
}
table td {
    vertical-align:     top;
}
em {
    font-weight:        bold;
    font-style:         italic;
}
/*========== links ==========================================================*/
a {
    text-decoration:    none;
}
#cont a:before {
    content:            '→\2009';
}
/* für mailto deaktivieren. */
#cont.contact a:before {
    content:            '';
}
a:hover {
    text-decoration:    underline;
}
a.menu:link,
a.menu:visited,
a.menu:hover {
    font-weight:        normal;
    text-decoration:    none;
}
/*========== classes ========================================================*/
.clear {
    clear:              both;
}
.meldung {
    padding:            .3em;
    margin-bottom:      .3em;
}
.meldung p {
    margin:             .5em;
}
.p {
    margin:             0 0 .3em 0;
}
.devel {
    color:              #ff0000;
}
/*==========  pages  ========================================================*/
/*----------  index  --------------------------------------------------------*/
#cont.index .text {
    width:              auto;
    min-height:         35em;
}
#cont.index p.pre_ul {
    margin:             0;
}
#cont.index ul {
    margin:             0 0 0 1.4em;
}
#cont.index p.post_ul {
    margin-top:         0;
}
#cir {
    height:             30em;
    position:           absolute;
    left:               33em;
    left:               19.3em;
    z-index:            -1;
}
#cir p {
    display:            table-cell;
    vertical-align:     middle;
}
.imagecircle {
    display:            inline;
    vertical-align:     middle;
}

/*----------  pub  ----------------------------------------------------------*/
div.pub {
    margin-bottom:      1em;
    font-family:        'Open Sans';
}
.pub .authors {
    font-weight:        bold;
}
.pub .title {
    font-style:         italic;
}
.med {
    float:              left;
    width:              5em;
}
.person {
    float:              left;
    width:              20em;
}
/*----------  contact  ------------------------------------------------------*/
@media screen and (max-width: 1200px) {
    body {
        padding-left:       0;
    }
    header #bg {
        height:             7.5em;
        width:              auto;
        margin-left:        12em;
        border-bottom:      2px solid #e0e0e0;
        position:           relative;
        z-index:            -1;
    }
    #fade_hz {
        position:           relative;
        margin-left:        52.3em;
        margin-left:        52.4em;
        height:             7.5em;
        width:              18em;
        z-index:            -1;
        border-bottom:      2px solid #e0e0e0;
        width:              calc(100% - 52.3em);
        background-color:   #ffffff;
    }
    #fade_hz img {
        width:              14.3em;
        width:              85%;
        height:             7.5em;
    }
}

/* @media screen and (max-width: 1000px) { */
@media screen and (max-width: 960px) {
    body {
        margin:             1em 0 0 1.6em;
        padding-right:      0
    }
    header #bg {
        position:           absolute;
        width:              calc(53.3em - 3px);
        border-right:       2px solid #e0e0e0;
    }
    #fade_hz {
        display:            none;
    }
}

@media screen and (max-width: 940px) {
    body {
        font-size:          13px;
    }
    header #bg {
        width:              calc(53.3em - 2px);
    }
    .imagecircle {
        width:              32em;
    }
}

@media screen and (max-width: 875px) {
    body {
        margin:             5px 0 0;
    }
    header {
        background-color:   #e6edf5;
        border-bottom:      2px solid #e0e0e0;
    }
    #text, #logodiv {
        display:            table-cell;
        float:              none;
        position:           static;
        height:             auto;
    }
    #logodiv {
        background-color:   #ffffff;
        width:              20.5%;
        border-bottom:      none;
    }
    #logo {
        width:              87%;
    }
    #text {
        margin-left:        0;
        padding:            0 0 .5em .5em;
         background:        url("/images/fade-hz.png") repeat-y scroll right center #E6EDF5;
    }
    #text .title {
        font-size:          1.8em;
        line-height:        1.2;
    }
    #text ul li {
        font-size:          1.1em;
        float:              left;
    }
    #bg {
        display:            none;
    }
    nav {
        float:              none;
        width:              auto;
        height:             auto;
        border-bottom:      2px solid #e0e0e0;
        overflow:           hidden;
        padding-bottom:     2px;
        padding-left:       2px;
        margin:             2px 0;
    }
    nav li {
        display:            inline;
        float:              left;
        /*  NOTICE  Alternatives Layout  */
        width:              9em;
        width:              19.3%;
        width:              calc((100% - 22px) / 5);
        margin:             2px;
        background:         url("/images/fade-hz.png") repeat-y scroll left center #e6edf5;
    }
    nav li:hover,
    nav li:last-child:hover {
        background:         #c9daff;
    }
    nav li.active {
        background:         #4877dc;
    }
    nav li:nth-child(6) {
        clear:              left;
    }
    nav li a {
        padding:            .3em;
    }
    #fade_vk {
        display:            none;
    }
    #cont {
        clear:              left;
        width:              auto;
        margin:             0;
        padding:            2.4% 1.5% 1.5% 1.5%;
        border:             none;
    }
    nav li:last-child {
        background-color:   #e6edf5;
    }
    nav span {
        display:            none;
    }
    #cont .text {
        width:              auto;
    }
    #cont .images {
        margin-left:        2em;
    }
    #pad {
        display:            none;
    }
    #cont .text {
        min-height:         0;
    }
    #cont .text,
    #cont .images img:last-child {
        margin-bottom:      0;
    }
    #cir {
        display:            table;
        height:             33em;
        width:              33em;
        left:               20em;
    }
    #cir p {
        display:            table-cell;
        vertical-align:     middle;
    }
    .imagecircle {
        width:              100%;
    }
}

@media screen and (max-width: 720px) {
    #cont.index .text {
        position:           relative;
    }
    #text .title {
        font-size:          1.6em;
    }
    #text ul li {
        font-size:          1em;
    }
    #cir {
        width:              60%;
        left:               40%;
        top:                1em;
    }
}

@media screen and (max-width: 620px) {
    body {
        font-size:          12px;
    }
    nav li {
        margin:             1px;
        width:              calc((100% - 12px) / 5);
    }
    nav li:nth-child(6) {
        clear:              none;
    }
    #cont .images {
        margin-left:        4%;
    }
}

@media screen and (max-width: 560px) {
    nav li {
        width:              24.5%;
        width:              calc((100% - 10px) / 4);
    }
}

@media screen and (max-width: 470px) {
    header .title {
        font-size:          1.8em;
    }
    nav li {
        width:              32.6%;
        width:              calc((100% - 8px) / 3);
    }
    /*  Drei pro Zeile    */
    nav li:nth-child(4),
    nav li:nth-child(7),
    nav li:nth-child(10) {
        clear:              left;
    }
    #cont .images {
        width:              40%;
        margin-left:        5%;
    }
    #cont .images img {
        width:              100%;
    }
    #cir {
        width:              53%;
        left:               48%;
    }
}

@media screen and (max-width: 408px) {
    #cir {
        width:              46%;
        left:               54%;
    }
}

@media screen and (max-width: 360px) {
    nav li:nth-child(4),
    nav li:nth-child(7),
    nav li:nth-child(10) {
        clear:              none;
    }
}