/* * * * * * * * * * * * * * * * * * */
/*                                   */
/*        BASIS-WEBFONTS.CSS         */
/*Enthält die grundlegenden Elemente */
/*  und einen oder mehrere Webfonts  */
/*                                   */
/* * * * * * * * * * * * * * * * * * */


@import url("../wf_newsreader/css?family=Newsreader&display=swap");
/*  Grundlegende Formatierungen für den Einsatz von wf_newsreader                              */
html {
    background-color: #f2f2f2;
}

p {
    /* Hier ist bisher noch keine Swap-Font angegeben */
    font-family: Newsreader;
    font-size: 1.34em;
    font-weight:400;
    line-height :1.4;
}


body {
    /*    background: #eee;*/
    font-family: "Newsreader";
    background-color: #f2f2f2;    
    margin: 0 0 50px 0;
    max-width: 900px;
    min-height: 800px;
    padding: 1em 2em 1em;
}

h1 {
    font-weight: 500;
    font-size: 4em;
    Line-height:.8em;
    margin:0.3em;
}
h1 span{
    padding-left:3.2em;
}

h1.missing span{
    padding-left:0;
}

h2 {
    font-weight: 500;
    font-size: 2.2em;
    font-style: italic;
    margin-top: 0.2em;
    margin-bottom: 0.8em;
    line-height: 1.1em;
}

h2 + p {
    margin: 0.1em 0;
}

h3{
    margin: 0;
    padding:0;
    font-style: italic;
    font-size: 1.8em !important;
    font-weight: 500 !important;
}
h3 + p{
    margin:10 0 5 0 !important;
}



h4{
    margin: 0;
    padding:0!;
    font-style: italic;
    font-size: 1.4em !important;
    font-weight: 500 !important;
}

h4 + p{
    margin:0;
}

p.comment{
    font-family: Newsreader;
    color: #303025;
    font-size: 1.3em;
    font-weight:400;
    line-height :1.3;   
    margin-left:2em;
}

ul.imtext{
    font-family: Newsreader;
    color: #303025;
    font-size: 1.3em;
    font-weight:400;
    line-height :1.3;   
    margin-left:1em;
}


/* besondere Styles für Info-seiten  */

.info .main-left p {
    font-size: 1.23em;
    font-weight: 400;
    line-height: 1.2em;
    color:#303025;
}

.info .main-left p.asterisk{
    text-align:center; 
    line-height: 1.3;
    margin: 0;
    font-size: 3em!important;
}

/*p.asterisk_u{
    text-align:center; 
    line-height: 0.5;
    margin-bottom: 10px!important;    
    font-size: 2em!important;
}

p.asterisk_w{
    text-align:center; 
    line-height: 1;
    margin-bottom: 10px!important;    
    font-size: 2em!important;
}*/

/* * * * *  Switch Unsichtbar * * * * */

p.unsichtbar{
    display: none;
    position:relative;
    left:500px;
    top:-90px;
}
/* * * * *  /Switch Unsichtbar * * * * */

hr {
    color: black;
}

div.main-left hr {
    margin-bottom: 2em;
}



/* Für den Footer */

#footer {
    border-top: 2px solid #ccc!important;
    width: 100%!important;
    /*    margin-top:2em;*/
    padding-top: 1em!important;
    padding-bottom: 2em!important;
}

#footer p {
    font-size: 1em!important;
    line-height: 1!important;
    margin-bottom: 0 0 0.5em !important;
    padding: 0!important;
}

#footer * {
    font-family: arial !important;
}

#footer p.headline {
    font-size: 1.6em!important;
    line-height: 10%!important;
    /*margin-top: px!important;*/
}

/*  Styling für den Aufwärtspfeil */

a.back-to-top {
    font-family:sans-serif;
    font-weight: bold;
    font-size:3em;
    line-height: 1;
    color:#fff;
    background-color: #E4BF7f;
    padding:3px 5px 1px 5px !important;
    transform:rotate(180deg) scale( 1, 0.7 );
    opacity:1;
    text-decoration:none;
    position: fixed;
    right:50px;
    bottom:100px;
    z-index: 2;
} 

#suma{
    float:right;
    margin-right:0;
    position:relative;
    top:-115px;
}

.artlist #suma{
    float:right;
    margin-right:0;
    position:relative;
    top:-90px!important;
}
    
#suma  .SearchInput{
    width:16.4em;
    font-size:1em;
}
 

/*+++++++++++++++++++++++++*/


@media only screen and (max-width: 700px) {


    h1 {
        font-size: 3em !important;
    }

    div.main-left {
        margin: 0 !important;
    }

    #catliste {
        margin: 0;

    }

    #catliste ul li {
        margin: 0;
    }

    body#artlist header h1 {
        font-size: 2em !important;
    }

    body#artlist div.grid-main {
        grid-template-columns: 100% !important;
    }
    #footer p.headline{
        font-size:.9em;
        line-height:1!important;
    }
       
    
/*    Randspalte mobil     
    
    #randspalte-mobil div.doppelpack{
        flow:left;
    }*/
    
    #randspalte-mobil a img{
        width:200px;
    }
    
    div#randspalte-mobil span.tooltiptext{
        display: none;
    }
    
    div#randspalte-mobil span.aster{
        display:none!important;
    }
    
/*    themlist   */
    
    div.item{padding-bottom: 15px;}
    
    div.item img
    {
        width:200px!important;
    }
    
 /*    artikel   */   
    
        body.artikel h1 {
        font-size: 3em !important;
    }
    
    body.artikel div.main-left{
        font-size: .8em;
    }
    
    body.artikel #footer p.headline{
        line-height:1em!important;

    }
    figure.imtext{
/*        position:relative;
        top:20px;*/
        width:230px;
    }
}

    
/*  Hier beginnen die Aufrufe der WF-Dateien. Sie sollten immer am Ende des Stylesheet stehen. */

@font-face {
    font-family: newsreader;
    font-style: normal;
    font-weight: 200;
    src: url(../wf_newsreader/newsreader-200.woff2) format("woff2");
    font-display: swap;
}

@font-face {
    font-family: newsreader;
    font-style: italic;
    font-weight: 200;
    src: url(../wf_newsreader/newsreader-200italic.woff2) format("woff2");
    font-display: swap;
}


@font-face {
    font-family: newsreader;
    font-style: normal;
    font-weight: 300;
    src: url(../wf_newsreader/newsreader-300.woff2) format("woff2");
    font-display: swap;
}

@font-face {
    font-family: newsreader;
    font-style: italic;
    font-weight: 300;
    src: url(../wf_newsreader/newsreader-300italic.woff2) format("woff2");
    font-display: swap;
}

@font-face {
    font-family: newsreader;
    font-style: normal;
    font-weight: 400;
    src: url(../wf_newsreader/newsreader-regular.woff2) format("woff2");
    font-display: swap;
}

@font-face {
    font-family: newsreader;
    font-style: italic;
    font-weight: 400;
    src: url(../wf_newsreader/newsreader-italic.woff2) format("woff2");
    font-display: swap;
}

@font-face {
    font-family: newsreader;
    font-weight: 500;
    src: url(../wf_newsreader/newsreader-500.woff2) format("woff2");
    font-display: swap;
}

@font-face {
    font-family: newsreader;
    font-style: italic;
    font-weight: 500;
    src: url(../wf_newsreader/newsreader-500italic.woff2) format("woff2");
    font-display: swap;
}

@font-face {
    font-family: newsreader;
    font-style: bolder;
    font-weight: 600;
    src: url(../wf_newsreader/newsreader-600.woff2) format("woff2");
    font-display: swap;
}

@font-face {
    font-family: newsreader;
    font-style: italic;
    font-weight: 600;
    src: url(../wf_newsreader/newsreader-600italic.woff2) format("woff2");
    font-display: swap;
}

@font-face {
    font-family: newsreader;
    font-style: bold;
    font-weight: 700;
    src: url(../wf_newsreader/newsreader-700.woff2) format("woff2");
    font-display: swap;
}

@font-face {
    font-family: newsreader;
    font-style: italic;
    font-weight: 700;
    src: url(..newsreader/newsreader-700italic.woff2) format("woff2");
    font-display: swap;
}

@font-face {
    font-family: newsreader;
    font-style: bold;
    font-weight: 800;
    src: url(../wf_newsreader/newsreader-800.woff2) format("woff2");
    font-display: swap;
}

@font-face {
    font-family: newsreader;
    font-style: italic;
    font-weight: 800;
    src: url(../wf_newsreader/newsreader-800italic.woff2) format("woff2");
    font-display: swap;
}

/* Im Prinzip könnte man diese Anagben auch im Layout-CSS vornehmen. Wegen der verschiedenen Schriftgrößen und optischen Wirkung der Fonts ist es vermutlich sinnvoll, einen Satz von Basisdefinitionen zusammen mit dem Fontaufruf vorzunehmen und abzustimmen. */