﻿
/* 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 #3a35b2;
*/


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


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

.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;
                height:32em;

                background:url(../img/diarylogo-280.png) 75% 10px no-repeat;
                background-size:70% auto;
        }
        #kopf p a:hover
        {
                background:url(../img/diarylogo-280-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;
        }
        #kopf h1,
        #kopf p a
        {
                display:block;
                padding:6px 0 8px 1em;

                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:#eee;
                z-index:3;
        }
}




/* Links */
a:link
{
        color:#3a35b2;
        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:transform, 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 #3a35b2;
        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://claudia-klinger.de/digidiary"],
main a[href^="https://claudia-klinger.de/digidiary"],
main a[href^="http://www.claudia-klinger.de/digidiary"],
main a[href^="https://www.claudia-klinger.de/digidiary"]
{
        padding-left:0;
        padding-right:0;
        background:none;
}



main a.ohne[href^="http://"],
main a.ohne[href^="https://"]

{
       padding-left:0;
        padding-right:0px;
        
        background:none;
}



/* Inhaltszone */

main
{
        background:#fefefe;
        margin:0 0 0 0;
        min-height:24em;
        padding:206px 3% 1em 25%; /*  25% = Platz fuer Header  */
        border-right:20em solid #eee; /*  Hintergrund fuer Seitenspalte */
        float:left;
                                display:block;
}



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

@media screen and (max-width:50em)
{
        main
        {
                padding:2em 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,
body.page-template-blogroll05 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 #eee;
        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;
}

main p.center {display:block;text-align:center}



/* Grafiken */


img.size-large
{
        width:100%;
        max-width:520px;
        height:auto;
}
img.size-medium
{
        width:100%;
        max-width:300px;
        height:auto;
}
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:#3a35b2;
}
nav.pagination .current
{
        font-weight:bold;
}


nav#prev_next a[rel=prev]
{
	display:block;
	width:30%;
	clear:both;
	float:left;
}

nav#prev_next a[rel=next]
{
	display:block;
	width:30%;
	float:right;
	text-align:right;
}


nav#prev_next p {clear:both}





/* 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 #eee;
}
#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;
}

#comments_template .comment_text ol
{
                margin-top:1em;
        list-style:decimal;
}
#comments_template .comment_text ul
{
                margin-top:1em;
        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:#eee;
        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:#eee;
        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:14em;
        padding:0;
        margin:0 1.8em 1em 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/plus.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:#eee;
}


#sidebar.blogroll {padding-top:0}


@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 aside
body.page-template-blogroll02 aside,
body.page-template-blogroll03 aside,
body.page-template-blogroll04 aside,
body.page-template-blogroll05 aside
{display:none}


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






/* Linkdesign Seitenspalte und oben */

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

#sidebar a
{
        display:block;
        color:black;
        text-decoration:none;
        padding:2px 2px 2px 36px;
        background-image:url(../img/plus.svg);
        background-position:14px center;
        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);
}

#sidebar a.ohne
{
        display:block;
        color:black;
        text-decoration:none;
        padding:2px 2px 2px 36px;
        background-image:none;
        background-position:14px center;
        background-repeat:no-repeat;
        background-size:12px 12px;
        transition:background-position 500ms;
}

#sidebar a.ohne:hover,
#sidebar a.ohne:focus,
#sidebar a.ohne:active
{
        text-decoration:underline;
        background-color:white;
        background-position:22px center;
        background-image:none;
}


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

}



#sidebar h2
{
        font-weight:600;
        font-size:100%;
        color:#3a35b2;
        color:#333;
        margin:1.5em 0 .8em 12px;
}

/* Anzeigen-Widget */
#sidebar #text-4 h2
{
        color:#999;
        font-weight:bold;
        font-size:100%;
        text-align:right;
        padding:0;
        margin:0 1.6em 0 0;
}



#sidebar #text-4 a /*  Menue-Linkdarstellung aufheben */
{
        display:inline;
        background:none;
        padding:2px;
}


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

}

#sidebar #socials img /* Extra-Div fuer 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;
       }

#sidebar #text-4 p
{
        text-align:center;
}
#sidebar #text-4 a img
{
        border:0;
        width:40%;
        max-width:126px !important;
        padding:2%;
}

#sidebar #text-4 a:hover img,
#sidebar #text-4 a:focus img
{
        outline:1px solid #3a35b2;
}




/* Letzte Kommentare */

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

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



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

        #menutoggle
        {
                position:fixed;
                top:0;
                right:0;
                z-index:3;
                display:block;
                text-indent:-500em;
                width:3em;
                height:3em;
                overflow:hidden;
                background:rgba(238,238,238,.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:#eee;
}

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:#eee;
        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:#eee;
}


/* 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:#ccc;
                text-align:left;
        }


        nav#infoseiten li a:hover
        {
                background-position:22px center;
        }
        #sidebar h2
        {
               /* position:static;
                margin:0;
                padding:0 0 0 14px;
                background:#eee;*/
        }
        #sidebar ul,
        nav#infoseiten ul/*  Seitenpadding ueberschreiben */
        {
                background:#eee;
                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 #eee;
                transition-property:top, background;
                transition-duration: 600ms;

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

                top:0;
                height:100%;
                overflow:auto;
                border-top:4em solid #eee;

                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/plus.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 #eee;
        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 fieldset
        {
                text-align:left;
        }

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

@media screen and (max-width:50em)
{
        #suche
        {
                position:static;
                width:100%;
                background:#eee;
                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:#eee;

}
#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:#eee;
        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;
        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:"„" "“";
}

.kontur {font-size:4em; color: #FFFFFF;
    text-shadow: 0 0 0.2em #8877FF, 0 0 0.2em #8877FF, 0 0 0.2em #8877FF;}


