/* Webfonts einbinden */

@font-face
{
    font-family: 'open_sans';
    src: url('../fonts/opensans-light-webfont.eot');
    src: url('../fonts/opensans-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-light-webfont.woff2') format('woff2'),
         url('../fonts/opensans-light-webfont.woff') format('woff'),
         url('../fonts/opensans-light-webfont.ttf') format('truetype'),
         url('../fonts/opensans-light-webfont.svg#open_sans') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face
{
    font-family: 'open_sans';
    src: url('../fonts/opensans-regular-webfont.eot');
    src: url('../fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-regular-webfont.woff2') format('woff2'),
         url('../fonts/opensans-regular-webfont.woff') format('woff'),
         url('../fonts/opensans-regular-webfont.ttf') format('truetype'),
         url('../fonts/opensans-regular-webfont.svg#open_sans') format('svg');
    font-weight: normal;/* 400 */
    font-style: normal;
}

@font-face
{
    font-family: 'open_sans';
    src: url('../fonts/opensans-semibold-webfont.eot');
    src: url('../fonts/opensans-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-semibold-webfont.woff2') format('woff2'),
         url('../fonts/opensans-semibold-webfont.woff') format('woff'),
         url('../fonts/opensans-semibold-webfont.ttf') format('truetype'),
         url('../fonts/opensans-semibold-webfont.svg#open_sans') format('svg');
    font-weight: 600;
    font-style: normal;
}

@font-face
{
    font-family: 'open_sans';
    src: url('../fonts/opensans-bold-webfont.eot');
    src: url('../fonts/opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-bold-webfont.woff2') format('woff2'),
         url('../fonts/opensans-bold-webfont.woff') format('woff'),
         url('../fonts/opensans-bold-webfont.ttf') format('truetype'),
         url('../fonts/opensans-bold-webfont.svg#open_sans') format('svg');
    font-weight: bold;/* 700 */
    font-style: normal;
}

@font-face
{
    font-family: 'open_sans';
    src: url('../fonts/opensans-extrabold-webfont.eot');
    src: url('../fonts/opensans-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-extrabold-webfont.woff2') format('woff2'),
         url('../fonts/opensans-extrabold-webfont.woff') format('woff'),
         url('../fonts/opensans-extrabold-webfont.ttf') format('truetype'),
         url('../fonts/opensans-extrabold-webfont.svg#open_sans') format('svg');
    font-weight: 800;
    font-style: normal;
}




@font-face
{
    font-family: 'open_sans';
    src: url('../fonts/opensans-italic-webfont.eot');
    src: url('../fonts/opensans-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-italic-webfont.woff2') format('woff2'),
         url('../fonts/opensans-italic-webfont.woff') format('woff'),
         url('../fonts/opensans-italic-webfont.ttf') format('truetype'),
         url('../fonts/opensans-italic-webfont.svg#open_sans') format('svg');
    font-weight: normal;
    font-style: italic;
}



@font-face
{
    font-family: 'open_sans';
    src: url('../fonts/opensans-semibolditalic-webfont.eot');
    src: url('../fonts/opensans-semibolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-semibolditalic-webfont.woff2') format('woff2'),
         url('../fonts/opensans-semibolditalic-webfont.woff') format('woff'),
         url('../fonts/opensans-semibolditalic-webfont.ttf') format('truetype'),
         url('../fonts/opensans-semibolditalic-webfont.svg#open_sans') format('svg');
    font-weight: 600;
    font-style: italic;
}




@font-face
{
    font-family: 'open_sans';
    src: url('../fonts/opensans-bolditalic-webfont.eot');
    src: url('../fonts/opensans-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-bolditalic-webfont.woff2') format('woff2'),
         url('../fonts/opensans-bolditalic-webfont.woff') format('woff'),
         url('../fonts/opensans-bolditalic-webfont.ttf') format('truetype'),
         url('../fonts/opensans-bolditalic-webfont.svg#open_sans') format('svg');
    font-weight: bold;
    font-style: italic;
}














/* Blockelemente-Reset */
html,body,div,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dd,dt,table,fieldset,form,blockquote,address,
main,section,nav,header,article,footer
{margin:0;padding:0}


/* Farben
 *
 * grau aus Bild #d7dbe3
 * blau aus Logo #900;
*/


body
{
        font-family:open_sans,sans-serif;
        background:#fcfcfc;
        color:#020202;
}


#global01
{
        max-width:100em;
        position:relative;
                                margin:auto;
}

.assistive
{
        position:absolute;
        left:-500em;
        bottom:0;
}



/* Header mit Logografik, links  */

#kopf h1 {font-size:100%}

/* Grosse Fenster */
@media screen and (min-width:64em)
{
        #kopf h1,
        #kopf p a
        {
                position:absolute;
                top:80px;
                left:0;
                width:25%;
                background:#fefefe;

                display:block;
/*                 text-indent:-500em; */
        text-indent:100%;
        white-space: nowrap;
        overflow:hidden;
                height:32em;

                background:url(../img/wwmag.png) 75% 10px no-repeat;
                background-size:70% auto;
        }
        #kopf p a:hover
        {
                background:url(../img/wwmag-hover.png) 75% 10px no-repeat;
                background-size:70% auto;
        }


}


/* Mittlere Fenster */
@media screen and (max-width:64em)
{
        #kopf
        {
                position:absolute;
                top:0;
                left:0;
                z-index:5;
                                                                width:22em;
                                                                background:#fbeec4;
        }
        #kopf h1,
        #kopf p a
        {
                display:block;
                padding:6px 0 8px 1em;

        color:#900;
                font-weight:bold;
                text-decoration:none;
        }
        #kopf small /*  Parole unsichtbar */
        {
                position:absolute;
                left:-500em;
        }
        #kopf a:hover,
        #kopf a:active,
        #kopf a:focus
        {
                background:white;
                text-decoration:underline;
        }
}



/* Mobilgeraete */
@media screen and (max-width:50em)
{
        #kopf
        {
                width:100%;
                background:#fbeec4;
                z-index:3;
        }
        #kopf h1,
        #kopf p
        {
                                        padding-right:3em;
        }
}




/* Links */
a:link
{
        color:#900;
        text-decoration:underline;
}
a:visited
{
        color:#333;
        text-decoration:underline;
}

a:hover,
a:focus
{
        text-decoration:none;
}
a:active
{
        text-decoration:none;
        color:#66c;
}

main a img
{
        border:0;
}
main a[href$="png"] img,
main a[href$="jpg"] img,
main a[href$="gif"] img
{
        border:0;
        transition-property:scale opacity;
        transition-duration:500ms;
        cursor:zoom-in;
}

main a[href$="png"]:hover img,
main a[href$="png"]:focus img,
main a[href$="jpg"]:hover img,
main a[href$="jpg"]:focus img,
main a[href$="gif"]:hover img,
main a[href$="gif"]:focus img
{
        outline:1px dashed #900;
        transform:scale(1.1);
        opacity:.8;
}

main a[href^="http://"],
main a[href^="https://"]
{
        padding-left:0;
        padding-right:18px;
        background:url(../img/exit-kasten.svg) right center no-repeat;
}

main a[href^="http://webwriting-magazin.de/"],
main a[href^="https://webwriting-magazin.de/"],
main a[href^="http://www.webwriting-magazin.de/"],
main a[href^="https://www.webwriting-magazin.de/"]
{
        padding-left:0;
        padding-right:0;
        background:none;
}



/* Inhaltszone */

main
{
        background:#fefefe;
        margin:0 0 0 0;
        min-height:24em;
        padding:180px 3% 1em 25%; /*  25% = Platz für Header  */
        border-right:20em solid #fbeec4; /*  Hintergrund fuer Seitenspalte */
        float:left;
}



/* Mittlere Fenster */
@media screen and (max-width:64em)
{
        main
        {
                padding:4em 2em 1em 1em;/* Kein Raum mehr fuer Logo */
                border-right:20em solid #fbeec4; /*  Hintergrund fuer Seitenspalte */
        }
}

@media screen and (max-width:50em)
{
        main
        {
                padding:4em 1em 1em 1em;
                border-right:0 !important;
        }
}

body.page-template-blogroll01 main,
body.page-template-blogroll02 main,
body.page-template-blogroll03 main,
body.page-template-blogroll04 main
{
        border-right:none;
}




/* Fuer Archivseiten und Suche extra h1 */
main h1.archiv
{
        text-align:right;
        color:#999;
        font-weight:normal;
        font-size:150%;
        margin-top:0;
        margin-bottom:3em;
        text-decoration:underline;

}
main h1.archiv strong
{
        font-weight:600;
}
main h1.archiv q /*  Suchbegriff */
{
        quotes:"„" "“";
        font-style:italic;
}

article
{
        margin-bottom:4em;
}


article header p /* Meta-Angaben */
{
        font-size:86%;
        padding-top:12px;
        margin-bottom:0;
}
article header p a /*   Kommentarlink*/
{
        white-space:nowrap;
}

article.von1 header p /*  Claudias Artikel mit Konterfei - class="von[user id]"  */
{
        padding-left:84px;
        background:url(../img/claudia3.jpg) left top no-repeat;
}

article header h1,
article header h2
{
        color:black;
        font-weight:normal;
        font-size:200%;
        margin-top:0;
        margin-bottom:18px;
        max-width:20em;
}


article header h2 a:link,
article header h2 a:visited
{
        text-decoration:none;
        color:black;
}

article header h2 a:hover,
article header h2 a:focus,
article header h2 a:active
{
        text-decoration:underline;
}


article footer
{
        border-top:1px solid #fbeec4;
        padding-top:.5em;
        margin-top:.5em;
}

@media screen and (max-width:50em)
{
        article header h1,
        article header h2
        {
                font-size:140%;
        }


        article header p /* Meta-Angaben */
        {
                font-size:86%;
                padding-top:0;
                margin-bottom:0;
        }
        article.von2 header p /*  Claudias Artikel mit Konterfei - class="von[user id]"  */
        {
                padding-left:84px;
                background:url(../img/claudia3.jpg) left top no-repeat;
        }
}


/* Fliesstext etc */

main p,
main ul,
main ol
{
        line-height:1.8;
        max-width:42em;
        margin:1em 0 0 0;
        -moz-hyphens: auto;
        -o-hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
}

main li
{
        line-height:1.6;
        max-width:38em;
        margin:0em 0 .5em 1.2em;
}

main h2
{
        font-weight:normal;
        color:#2a2a2a;
        font-size:140%;
        margin:1em 0 1em 0;
        max-width:26em;
}
main h3
{
        font-weight:normal;
        font-size:120%;
        color:#2a2a2a;
        margin:1em 0 1em 0;
        max-width:26em;
}

main blockquote
{
        font-style:italic;
        line-height:1.8;
        margin-left:0;
        padding-left:1em;
        border-left:2px dotted #666;
        max-width:36em;
}

main strong
{
        font-weight:600;
}




/* Grafiken */

main p img.size-large
{
        width:100%;
        max-width:520px;
        height:auto;
}
main p img.size-medium
{
        width:100%;
        max-width:300px;
        height:auto;
}
main p img.size-full
{
        max-width:100%;
        height:auto;
}







.alignright
{
        clear:right;
        float:right;
        margin:0 0 1em 1em;
}

.alignleft
{
        clear:left;
        float:left;
        margin:0 1em 1em 0;
}

img.aligncenter
{
        display:block;
        clear:both;
        margin:auto;
        overflow:hidden;
}
figure.aligncenter
{
        clear:both;
        margin:auto;
        text-align:center;
        overflow:hidden;
}



/* Weiterlesen  */
.more-link
{
        clear:both;
        float:right;
        font-style:italic;
        position:relative;
        left:0;
        transition:left 500ms;
}

.more-link:hover
{
        left:1em;
}

.more-link small
{
        position:absolute; left:-500em;
}

/* Haendchen-Zeichen */
.edit-link a
{
        float:right;
        font-size:260%;
        text-decoration:none;
}


/* Shariff */

div.shariff
{
        margin: 1em 0 2em 0;
}


div.shariff li
{
        margin-left:0;
}

div.shariff a
{
        background-image:none;
}






/* Blaettern */

nav.pagination
{
        text-align:center;
        direction:rtl;
}

nav.pagination a.prev
{
        float:right;
        width:auto;
        height:auto;
        border:none;
        border-radius:0;
        text-decoration:underline;
}
nav.pagination a.next
{
        float:left;
        width:auto;
        height:auto;
        border:none;
        border-radius:0;
        text-decoration:underline;
}
nav.pagination .page-numbers
{
        text-decoration:none;
        direction:ltr;
        display:inline-block;
        width:1.4em;
        height:1.4em;
        padding:.4em;
        border:1px solid #ccc;
        border-radius:50%;
}
nav.pagination a:hover,
nav.pagination a:focus,
nav.pagination a:active
{
        border-color:#900;
}
nav.pagination .current
{
        font-weight:bold;
}






/* Kommentare */


#comments_template *
{
        hyphens:none;
        -moz-hyphens:none;
}
#comments_template h3
{
        font-weight:bold;
        text-transform:uppercase;
        color:#aaa;
        margin:3em 0 0 0;
}

#comments_template p
{
        margin:0;

}
#comments_template ol
{
        margin:2em 0 0 0;
        list-style:none;

}

#comments_template ol li
{
        margin:0 0 1em 0;
        padding:0 0 1em 0;
        border-bottom:1em solid #fbeec4;
}
#comments_template a.anker
{
        position:relative;
        bottom:4em;
}
#comments_template blockquote
{
        font-style:normal;
        border:none;
        padding:0;
}



#comments_template cite
{
        font-weight:600;
/*         color:#333; */
        color:#666;
        font-style:normal;
}

#comments_template cite.claudia
{
        padding-left:84px;
        padding-top:6px;
        background:url(../img/claudia3.jpg) left top no-repeat;
}


#comments_template .commentmetadata
{
        line-height:1.2;
        margin:0 0 1em 0;
}

#comments_template .commentmetadata span
{
        display:inline-block;
        margin:0 1em 0 0;
}

#comments_template .commentmetadata a
{
        text-decoration:none
}
#comments_template a img
{
        cursor:pointer;
}


#comments_template .comment_text li
{
        border:none;
        margin:0 0 .5em 2em;
        padding:0;
        list-style:circle;
}
#comments_template .comment_text p
{
        margin-bottom:.5em;
}
#comments_template .comment_text blockquote
{
        font-style:italic;
        padding-left:1.5em;
        border-left:2px dotted #666;
}

/* Formfeld */

#comments_template fieldset
{
        border:none;
        max-width:38em;
}
#comments_template fieldset .input_metadata
{
        display:table;
        width:100%;
}
#comments_template fieldset b
{
        color:red
}
#comments_template fieldset legend
{
        margin-bottom:1em;
}
#comments_template .input_metadata p
{
        display:table-row;
}


#comments_template .input_metadata label
{
        display:table-cell;
        padding-top:.5em;
        padding:2px 0 0 0;
        width:4em;
        cursor:pointer;
}

#comments_template .input_metadata span
{
        display:table-cell;
        padding-top:.5em;
}


#comments_template fieldset input,
#comments_template fieldset textarea
{
        width:98%;
        font:inherit;
        padding:1%;
        border:none;
        border-bottom:1px dashed #aaa;
}
#comments_template p#comment_textarea
{
        overflow:visible;
}
#comments_template fieldset textarea
{
        border:1px dashed #aaa;
        border-top:none;
}

#comments_template fieldset input:focus,
#comments_template fieldset textarea:focus
{

}
#comments_template fieldset input:invalid
{
        box-shadow:none;
        border:none;
        border-bottom:1px dashed red;
}
#comments_template fieldset textarea:invalid
{
        box-shadow:none;
}

#comments_template #submit
{
        width:8em;
        border:1px solid #aaa;
        background:#fbeec4;
        cursor:pointer;
}
#comments_template #submit:hover,
#comments_template #submit:focus
{
        border:1px outset #aaa;
        background:#fcfcfc;
        text-decoration:underline;
}

#comments_template #submit:active
{
        border:1px inset #aaa;
        background:#aaa;
        outline:none;
}


/* quicktags plugin */

#comments_template .quicktags-toolbar
{
        background:#fbeec4;
        border:1px dashed #aaa;
        border-bottom:none;
        width:98%;
        padding:1%;
        border-radius:0;
}

#comments_template .quicktags-toolbar input
{
        border-bottom:inherit;
}

#comments_template .quicktags-toolbar input[value="link"] {
        text-decoration: underline
}

#comments_template .quicktags-toolbar input[value="i"] {
        font-style: italic
}

#comments_template .quicktags-toolbar input[value="b"] {
        font-weight: bold
}



@media screen and (max-width:50em) /*  mobil Felder untereinander*/
{
        #comments_template .input_metadata span
        {
                display:block;
                padding:0;
                margin-bottom:1em;
        }
        #comments_template .input_metadata label
        {
                display:block;
                padding:0;
        }
}


/* Blogroll */


main.blogrolls ul,
main.blogrolls li
{
        max-width:none;
}

#blogroll
{
        margin-top:2em;
        -moz-hyphens:none;
        max-width:76em;
}

#blogroll li.widgets
{
        text-align:left;
        font-size:93%;
        list-style:none;
        width:12em;
        height:17em;
        padding:0;
        margin:0 1.8em 2em 0;
        float:left;
        line-height:1.1;
}





#blogroll h2
{
        margin:0 0 .5em 0;
                                padding-left:1em;
        font-size:100%;
        text-transform:uppercase;
        background:#ffc;
}

#blogroll a.rsswidget
{
        text-decoration:none;
        background:none;/*   kein exit-Zeichen hier */
        padding:0;
}
#blogroll a.rsswidget img
{
        float:right;
}

#blogroll a.rsswidget:hover,
#blogroll a.rsswidget:focus
{
        text-decoration:underline;
}
#blogroll li ul
{
        margin-left:0;
/*         list-style:circle inside; */
        list-style:url(../img/pfeil.svg);
}

#blogroll li li
{
        margin-left:1em;
        line-height:1.2;
        margin-bottom:.5em;
        position:relative;
}

#blogroll .rssSummary
{
        position:absolute;
        left:0;
        background:white;
        width:1px;
        height:1px;
        overflow:hidden;
        opacity:0;
        transition:opacity 1000ms;
}
#blogroll li li:hover .rssSummary,
#blogroll li li a:focus + .rssSummary
{
        top:-6em;
        left:6em;
        z-index:12;
        width:15em;
        height:auto;
        max-height:12em;
        line-height:1.25;
        padding:.5em;
        opacity:.9;
        overflow:hidden;
        background:infoBackground;
        color:infoText;
        text-overflow:ellipsis;
        border:1px solid #666;
        box-shadow:6px 6px 8px gray;
        border-top-right-radius:2em;
}

#blogroll li li:hover .rssSummary:after,
#blogroll li li a:focus + .rssSummary:after
{
        content:" … ";
        position:absolute;
        bottom:0;
        right:0;
        padding:1px;
        color:infoText;
        background:infoBackground;

}

#blogroll .textwidget
{
        clear:left;
}

@media screen and (max-width:50em)
{
        #blogroll li.widgets
        {
                width:auto;
                height:auto;
                margin:0 .5em 3em .5em;
                float:none;
                line-height:auto;
        }
}



/* Seitenspalte */

#sidebar
{
         float:left;
        margin-left:-20em;        /*   auf den grauen Rand schieben  */
        width:20em;
        padding-top:4em;
        background:#fbeec4;
}


@media screen and (max-width:104em)
{
        #sidebar
        {
                width:20em; /*  beide Zonen untereinander  */
        }

}

/* In der Seitenspalte */
#sbzone1
{
        width:20em;
        float:left;
}

#sbzone2
{
        width:20em;
         float:left;
}


body.page-template-blogroll01 #extralinks,
body.page-template-blogroll01 aside,
body.page-template-blogroll01 #sbzone2
{display:none}

body.page-template-blogroll02 #extralinks,
body.page-template-blogroll02 aside,
body.page-template-blogroll02 #sbzone2
{display:none}

body.page-template-blogroll03 #extralinks,
body.page-template-blogroll03 aside,
body.page-template-blogroll03 #sbzone2
{display:none}

body.page-template-blogroll04 #extralinks,
body.page-template-blogroll04 aside,
body.page-template-blogroll04 #sbzone2
{display:none}

body.page-template-blogroll01 #sidebar,
body.page-template-blogroll02 #sidebar,
body.page-template-blogroll03 #sidebar,
body.page-template-blogroll04 #sidebar  /* Reste weg */
{
        height:0;
        padding:0;
}

/* Linkdesign Seitenspalte und oben */

#sidebar li
{
        width:100%;
        padding:0;
/*         margin:0 0 1em 0; */
        margin:0 0 .5em 0;
        list-style:none;
/*         background:white; */
}

#sidebar a
{
        display:block;
        color:#900;
        text-decoration:none;
        padding:2px 2px 2px 36px;
        background-image:url(../img/pfeil.svg);
/*         background-position:14px center; */
        background-position:14px .5em;
        background-repeat:no-repeat;
        background-size:12px 12px;
        transition:background-position 500ms;
}

#sidebar a:hover,
#sidebar a:focus,
#sidebar a:active
{
        text-decoration:underline;
        background-color:white;
        background-position:22px center;
        background-image:url(../img/pfeil.svg);
}

/* aktueller Link */
#sidebar .current-menu-item a,
#sidebar .current-cat a
{
        cursor:default;
        text-decoration:none;
        background-color:inherit;
        background-position:14px center;
        background-image:url(../img/X.svg) !important;

}



#sidebar h2
{
        font-weight:600;
        font-size:100%;
                                text-transform:uppercase;
        color:#900;
                                background:white;

        margin:1.5em 0 .8em 0;
                                padding:0 12px 0 12px;
}


#sidebar #text-3 blockquote
{
        padding:1em;
        font-size:110%;
/*         background:white; */
}








/* Anzeigen-Widget */

#sidebar #text-7 a /*  Menue-Linkdarstellung aufheben */
{
        display:inline;
        background:none;
        padding:0;
}

#sidebar #text-7 p
{
        text-align:center;
}
#sidebar #text-7 a img
{
        border:0;
        padding:0;
                                max-width:100%;
}

#sidebar #text-7 a:hover img,
#sidebar #text-7 a:focus img
{
        outline:1px solid #900;
}




/* Letzte Kommentare */

#sidebar .widget_get_recent_comments li
{
        padding:4px 0 4px 0;
}
#sidebar .widget_get_recent_comments a
{
color:black;
        display:block;
        padding:0 12px 0 12px;
        background:none;
/*         quotes:"„" "“"; */
}
#sidebar .widget_get_recent_comments cite
{
        font-weight:600;
        font-style:normal;
                                color:#900;
}

#sidebar .widget_get_recent_comments .comment-author-link
{
        font-weight:600;
}
#sidebar .widget_get_recent_comments .comment-author-link a
{
        quotes:none;
}


#sidebar #socials  /* Extra-Div für die Social Buttons i.d.Sidebar */
{
         padding-left:2.1em;
         background:white;
         height:30px;

}

#sidebar #socials img /* Extra-Div für die Social Buttons i.d.Sidebar */
{
         padding:0px;
         margin:0px;

}

#sidebar #socials a /*  Menue-Linkdarstellung aufheben (Claudias Versuch mit Div im Widget) */
{
        display:inline;
        background:none;
        padding:2px;
}


#sidebar #socials a:hover,
#sidebar #socials a:focus,
#sidebar #socials a:active
{
        border-bottom:5px solid white;
       }

/* Mobil: alles nach unten */
@media screen and (max-width:50em)
{
        #sidebar, #sbzone1, #sbzone2
        {
                background:#fbeec4;
                margin:0;
                width:100%;
                clear:both;
                float:none;
        }

        #menutoggle
        {
                position:fixed;
                top:0;
                right:0;
                z-index:3;
                display:block;
/*                 text-indent:-500em; */
                                                                text-indent:100%;
        white-space: nowrap;
        overflow:hidden;
                width:3em;
                height:3em;
                overflow:hidden;
                background:rgba(252,238,196,.8) url(../img/burger.svg) center no-repeat;
                background-size:70%;
                border-bottom-left-radius:1em;
        }
}


/* Menue oben */

nav#infoseiten
{
        position:fixed;
        top:0;
        left:0;
        z-index:1;
        width:100%;
        background:#fbeec4;
}

div.menu-infoseiten-container
{
        max-width:100em;/*  wie main */
}

#infoseiten h2
{
        position:absolute;
        left:-500em;
}

#infoseiten ul
{
        padding:8px 0 8px 25%;
}

#infoseiten li
{
        display:inline;
        list-style:none;
}

/* etwas andere Werte fuer padding und background */
#infoseiten a
{
        padding:6px 12px 6px 26px;
        background-position:4px center;
        background-color:#fbeec4;
        display:inline;/*  hebt Blockdarstellung auf, da innerhalb Seitenspalte  */
}
#infoseiten a:hover,
#infoseiten a:focus,
#infoseiten a:active
{
        background-position:12px center;
}

/* Aktueller Link */
#infoseiten .current-menu-item a
{
        background-position:4px center !important;
        background-color:#fbeec4;
}


/* Menue oben fuer mittlere Fenster */
@media screen and (max-width:64em)
{
        nav#infoseiten
        {
                text-align:right;
                z-index:4;
        }
        nav#infoseiten ul
        {
                padding:4px 0 4px 14em;
        }
        nav#infoseiten a
        {
                padding-right:4px;
        }
}


/* und fuer mobil */
@media screen and (max-width:50em)
{
/*         ab dieser Groesse wie die anderen Menues */


        #sidebar li
        {
                display:block;
                list-style:none;
                margin:0 0 .5em 0;
        }

        #sidebar li a /* angleichen*/
        {
                background-color:white;
                display:block;
                padding: .2em 0 .2em 36px;
                background-position:14px center;
        }

        nav#infoseiten/*  war oben */
        {
                position:static;
                width:auto;
                background:#fbeec4;
                text-align:left;
        }


        nav#infoseiten li a:hover
        {
                background-position:22px center;
        }
        #sidebar h2
        {
               /* position:static;
                margin:0;
                padding:0 0 0 14px;
                background:#fbeec4;*/
        }
        #sidebar ul,
        nav#infoseiten ul/*  Seitenpadding ueberschreiben */
        {
                background:#fbeec4;
                padding:0 0 1em 0;
        }


/*         on/off wird per JS gesetzt */
        div#sbzone1.off
        {
                position:fixed;
                background:rgba(0,0,0,0);

                top:-1600px;
                height:100%;
                left:0;
                z-index:1;
                width:100%;
                border-top:4em solid #fbeec4;
                transition-property:top, background;
                transition-duration: 600ms;

/* outline:1px dashed gray */
        }
        div#sbzone1.on
        {
                position:fixed;
                background:rgba(153,0,0,.9);

                top:0;
                height:100%;
                overflow:auto;
                border-top:6em solid #fbeec4;

                left:0;
                z-index:1;
                width:100%;
                transition-property:top, background;
                transition-duration: 900ms;
        }





}




/* Suche */

#suche
{
        position:fixed;
        top:0;
        right:0;
        z-index:3;
        width:20em;
        height:2em;
        padding:0;
        overflow:hidden;
}

#suche fieldset
{
        border:0;
        width:20em;
        text-align:left;
        padding:8px 0 0 0;
        text-align:right;
}

#suche label
{
        padding:2px 2em 2px 36px;
        background-image:url(../img/pfeil.svg);
        background-position:14px center;
        background-repeat:no-repeat;
        cursor:pointer;
        transition:background-position 500ms;
}
#suche label:hover
{
        background-color:white;
        text-decoration:underline;

        background-position:22px center;
        background-image:url(../img/pfeil.svg);
}



#s
{
        font-family:inherit;
        font-size:100%;
        width:95%;
        padding:4px 4px 4px 15px;
        border:4px solid #fbeec4;
        background-position:left center;
        background-image:url(../img/pfeil.svg);
        background-repeat:no-repeat;
        position:absolute;
        left:0;
        top:-6em;/* oben ausserhalb des sichtbaren Bereichs*/
        transition:top 1000ms;
}
#s:focus /*Fokus durch Klick aufs Label */
{
        top:0;/* ins Sichtfeld schieben */
        transition:top 250ms;
}

#s:invalid
{
        box-shadow:none;/*  Voreinstellung im FF */
        outline:none;
}
#search-submit
{
        position:absolute;
        left:-500em;
}


@media screen and (max-width:64em)
{/*  ab hier passt es nicht mehr nebens Menue */
        #suche
        {
                position:relative;
                right:0;
                z-index:1;
                margin:0 0 1em 0;
        }
                                #suche #s
        {
                display:block;
                height:auto;
                position:static;
                width:100%;
/*                 margin:auto; */
        }
        #suche fieldset
        {
                text-align:left;
        }

        #suche label
        {
                display:block;
                background-color:white;
        }
}

@media screen and (max-width:50em)
{
        #suche
        {
                position:static;
                width:100%;
                background:#fbeec4;
                margin:0;
                padding:1em 0 4em 0;
        }
        #suche fieldset
        {
                width:100%;
        }
        #suche fieldset label
        {
                font-weight:600;
                font-size:120%;
                color:#333;
                margin:0 0 .5em 0;
        }

        #suche #s
        {
                display:block;
                height:auto;
                position:static;
                width:95%;
                margin:auto;
        }

        #suche label,
        #suche label:hover
        {
                background:none;

        }
}



/* Widget-Fusszone */
#fusszone-e1
{
        clear:both;
        width:100%;
        padding-bottom:2em;
        background:#fbeec4;

}
#fusszone-e2
{
        max-width:100em;
}
#fusszone-e3
{
        padding-left:25%;
        overflow:hidden;/*  Hoehen-Ausdehnung wg. float */
}
#fusszone-e3 h2
{
        font-weight:600;
        font-size:120%;
        color:#333;
        margin:0 0 .5em 0;
}

#fusszone-e3 aside
{
        width:12em;
        margin:1em 3em 0 0;
        float:left;
}

@media screen and (max-width:64em)
{
        #fusszone-e2
        {
                max-width:none;
        }
        #fusszone-e3
        {
                padding-left:1em;
        }

}


/* Fuss */

#fuss
{
        clear:both;
        background:#fbeec4;
        margin:0;
        padding:0 1em .2em 0;
}
#fuss p
{
        max-width:none;
        text-align:right;
}

#toplink
{

        width:4em;
        height:4em;
        overflow:hidden;
/*         text-indent:-500em; */
                                text-indent:100%;
        white-space: nowrap;
        overflow:hidden;
        background:rgba(238,238,238,.8) url(../img/oben-edit.svg) center no-repeat;
        background-size:70%;
        position:fixed;
        bottom:0;
        left:0;
        border-top-right-radius:1em;
        transition:left 500ms;
}

#toplink.off
{
        left:-10em;
}

#toplink.on
{
        left:0;
}


@media screen and (max-width:64em)
{
        #toplink
        {
                width:3em;
                height:3em;
                background-size:2.5em 2.5em;
        }

}

.elastic-video {
            position: relative;
            padding-bottom: 55%;
            padding-top: 15px;
            height: 0;
            overflow: hidden;
            }

.elastic-video iframe {
 position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

article q
{
        font-style:italic;
  quotes:"„" "“";
}


#zusatz  a[href^="http://"],
#zusatz  a[href^="https://"]
{
        padding-left:0;
        padding-right:18px;
        background-image:none;
}

dt {font-weight:bold;padding-top:2.5em;padding-bottom:1em}

dd {
        line-height:1.8;
        max-width:42em;
        margin:1em 0 0 0;
        -moz-hyphens: auto;
        -o-hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
}