@media screen {

    *, *:before, *:after {
    box-sizing: inherit;
    }

    html {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 100%; 
    overflow-y: scroll;
    box-sizing: border-box;
    }

    body { 
    font-size: 0.875rem; /* Standardschriftgröße */ 
    background: white; /* Hintergrundfarbe Inhaltsbereich */
    color: #333; /* Textfarbe Standard */
    min-width: 300px; /* wenn schmaler, wird Inhalt nicht mehr umgebrochen */
    box-shadow: 0px 0px 10px 3px #ADB5AA; /* Schatten um Body */
    border-radius: 0.8em; /* Abrundung Body */
    }

    main {
    line-height: 1.5;
    padding: 1em 2em 1em 2em
    }

    footer {
    border-top-style: solid;
    border-top-width: 2em;
    background: #4f9575;
    color: white;
    border-radius: 0.5em;
    }

    /* Headerbild formatieren */
    img#mainpicture {
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
    border-radius: 0.5em;
    }
    
    /* Logo über Headerbild setzen und formatieren */
    img#overlay {
    opacity: 0.8;
    max-width: 22%;
    height: auto;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
    border-radius: 0.5em;
    position: absolute; /*bezogen auf .pageheader*/
    top: 2em;
    right: 2em;
    }

    /* Hauptüberschriften im Inhaltsbereich und in der Sidebar */ 
    main h2, aside h2 {
    font-size: 1.5rem;
    line-height: 1.2;
    color: #4F9575; 
    padding: 0;
    margin: 0; 
    }

    /* Überschriften im Inhaltsbereich und in der Sidebar */ 
    main h3, aside h3 { 
    font-size: 1.3rem;
    color: #4F9575;
    line-height: 1.2; 
    padding-top: 0.5em;
    border-top: 1px solid #ddd;
    margin: 1.5em 0 0.25em 0;
    }

    /* Absätze im Inhaltsbereich und in der Sidebar */ 
    main p, aside p {
    margin-top: 1.5em; 
    margin-bottom: 1em; 
    }

    /* Bilder nicht größer als das Elternelement */
    img {
    max-width: 100%;
    height: auto;
    }

    /* Grafiken im Inhaltsbereich */ 
    main img, aside img {
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
    border-radius: 0.5em;
    }

    /* padding für Layoutbereiche */ 
    .navmain, .asside-area, .pagefooter {
    padding: 1rem 2rem 1rem 2rem;
    }

    /* Bilder in Galerie links ausrichten */
    .galerie_img_left {
    margin-bottom: 1.5em;
    float: left;
    }

    /* Bilder in Galerie rechts ausrichten */
    .galerie_img_right {
    margin-bottom: 1.5em;
    float: right;
    }

    /* Formatiert Das Banner auf den Seiten */
    .pageheader {
    position: relative; /*damit #overlay Bezug zum Header und nicht zu HTML hat*/
    padding: 1rem 1rem 0 1rem;
    }

    /* Textformat Link im Footer */
    .pagefooter a {
    color: white;
    text-decoration: none;
    }

    /* Links im Inhaltsbereich und in der Sidebar */ 
    main a, aside a { 
    color: #4F9575;
    text-decoration: none;
    }

    aside a.active {
    background: #4f9575;
    color: #fff;
    text-decoration: none;
    }

    /* Listen mit quadratischem Bullet */ 
    main ul, aside ul {
    list-style-type: square;
    padding: 0;
    margin: 1em 0 2em 2em;
    }
    /* Horizontaler Abstand zwischen den Listenelementen */
    aside li {
    margin-bottom: 0.5em;
    }

    /* Format DIV Quellenangabe Wikipedia */
    .wikipedia{
    box-sizing:border-box;
    margin: 1em 0em 1em 0em;
    border: 1px solid #ddd;
    padding: 1em 1em;
    max-width:50em;
    border-radius:.8em;
    font-style: oblique;
    font-size: 80%;
    color: #888888;
    }

    /* Format Sondermeldung note.php*/
    .extra{
    box-sizing:border-box;
    margin: 1em 0em 2em 0em;
    padding: 0 1em 0 1em;
    Background: #4f9575;
    border: 1px solid #ddd;
    box-shadow: 0px 2px 6px rgb(0 0 0 / 30%);
    border-radius:0.5em;
    /* font-weight: bold; */
    font-size: 120%;
    color: #ffffff;
    }

    /* Auf- und Zuklappen des Artikeltextes durch Klick auf "weiterlesen..." bzw. "weniger..." */
    .readmore:focus{outline: none;}
    .readmore span, a.weniger{display:none;}
    .readmore:focus span{display:inline;}
    .readmore:focus a.weniger{display:inline;}
    .readmore:after{content:'...weiterlesen'; color: #4F9575;}
    .readmore:focus:after{content:'';}

    /* Textformat Quelle Kommentar oder Spruch */
    .citation {
    font-style: oblique;
    font-size: 80%;
    color: #4F9575;
    }

    /* Automatische Silbentrennung z. B. in der Satzung */
    .silbentrennung {
    hyphens: auto; 
    }

    /* Blocksatz verwenden z. B. in der Satzung*/
    .blocksatz {
    text-align: justify;
    }

    /* Formatierung der Listenelemente für die Satzung */
    ul.punkt {list-style-type: disc; margin:0; padding-left: 1em;}
    ul.quadrat {list-style-type: square; margin:0; padding-left: 1em;}
    ol.dezimal {list-style-type: decimal; margin:0; padding-left: 1em;}
    ol.kleinbuchstabe {list-style-type: lower-alpha; margin:0; padding-left: 1em;}

} /* Ende @media */ 


/* Darstellung auf breiten Viewports (Monitor) */
@media screen and (min-width: 768px) { 

    html {
    background: #ddd;
    min-height: 100%;
    background-size: cover;
    background-image: url(Background2.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    }

    /* Inhaltsfenster 90% der Bilschirmbreite aber maximal 960 Pixel */
    body {
    width: 90%;
    max-width: 960px;
    margin: 1em auto; /* 1em oben, rechts,links gleichmäßig */
    }

    /* Main Inhalt wird linksseitig dargestellt */
    main {
    float: left;
    width: 68%;
    }

    /* Aside Inhalt floatet auf die Rechte Seite neben Main Inhalt */
    aside {
    float: right;
    width: 30%;
    }

    /* Setzt den Footer unter die gefloateten Elemente Main und Aside */
    footer {
    clear: both;
    }
} /* Ende @media */ 


/*----------------- Formatierung der Tabellen auf breiten und schmalen Viewports -----------------*/

@media only screen and (max-width: 769px) {
    
    /* Tabelle zwingen, nicht mehr wie Tabellen zu sein */
    #schedule table, 
    #schedule thead, 
    #schedule tbody, 
    #schedule th, 
    #schedule td, 
    #schedule tr { 
    display: block; 
    }
    
    /* Tabellenüberschriften ausblenden (aber nicht display: none;, für Barrierefreiheit) */
    #schedule thead tr { 
    position: absolute;
    top: -9999px;
    left: -9999px;
    }
 
    #schedule tr { border: 1px solid #ccc; }
    
    /* Sich wie eine Reihe verhalten */
    #schedule td { 
    border: none;
    border-bottom: 1px solid #eee; 
    position: relative;
    padding-left: 50%; 
    white-space: normal;
    text-align:left;
    }
 
    /* Jetzt wie ein Tabellenkopf */
    #schedule td:before { 
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap;
    text-align:left;
    font-weight: bold;
    }

    /* Daten "Beschriften" */
    #schedule td:before { content: attr(data-title); }

} /* Ende @media */ 

    /* Grundformatierung der Tabellen aus Seite "Termine" */
    table{
    margin-top: 2em;
    width:100%;
    border-collapse:collapse;
    border-spacing:0;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
    }
    /* Farbliche Änderung beim Mouseover der Zeilen */
    tbody tr:hover { 
    background-color: #4F9575;
    color: #ffffff;
    }

    /* Spaltenbreiten der Tabellen festlegen für <col> */
    #spalte1 {width: 15%;}
    #spalte2 {width: 15%;}
    #spalte3 {width: 40%;}
    #spalte4 {width: 30%;}

    .table-condensed th,.table-condensed td {
    padding:4px 5px;
    }
    
    .table-bordered{
    border:1px solid #ddd;
    border-collapse:separate;
    border-radius:4px;
    }

    /* Text im Tabellenkopf 'th' */
    .th_text {
    background-color:#efefef;
    text-align: left;
    }

    .table-bordered th+th,
    .table-bordered td+td,
    .table-bordered th+td,
    .table-bordered td+th {
    border-left:1px solid #ddd;
    }

    .table-bordered thead:first-child tr:first-child th,
    .table-bordered tbody:first-child tr:first-child th,
    .table-bordered tbody:first-child tr:first-child td {
    border-top:0;
    }

    .table-bordered thead:first-child tr:first-child th:first-child,
    .table-bordered tbody:first-child tr:first-child td:first-child {
    border-radius:4px 0 0 0;
    }

    .table-bordered thead:first-child tr:first-child th:last-child,
    .table-bordered tbody:first-child tr:first-child td:last-child {
    border-radius:0 4px 0 0;
    }

    .table-bordered thead:last-child tr:last-child th:last-child,
    .table-bordered tbody:last-child tr:last-child td:last-child {
    border-radius:0 0 4px 0;
    }


/*---------------------- Formatierung der Menüs und Navigation ----------------------*/

/* Menüformatierung für Breite Viewports */

@media screen and (min-width: 600px) {

    div.menubutton { 
    display: none;
    }

    .navlist {
    padding: 0;
    border-bottom: 1px solid #ddd;
    margin: 0;
    }
    .navlist li {
    list-style-type: none; 
    display: inline-block;
    }
    .navlist a {
    display: block;
    min-width: 6em; /*  Breite der Menübutton */
    background-color: #eee;
    color: #333;
    text-align: center;
    text-decoration: none;
    border-radius: 0.5rem;
    padding: 0.5em 0; /* Höhe der Button */
    margin: 0 0.5em 1em 0; /* 0.5em=Abstand der Button */
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
    }
    .navlist a.active {
    background: #4f9575;
    color: #fff;
    text-decoration: none; 
    }
    .navlist a:hover {
    background: #1e4432;
    color: #fff;
    }

    .navlist a:focus {
    text-decoration: underline;
    }

} /* Ende @media */

/* Menüformatierung für schmale Viewports */

/* Navigation für kleine Viewports mit :target */ 
/* Benutzt die ID #menu, die an body vergeben wurde */ 

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

    /* Kopfbereich vorbereiten */ 
    .pageheader {
    box-shadow: 0 2px 6px rgba(51,51,51,0.3);
    position: relative;
    }

    /* Menübutton positionieren */ 
    div.menubutton {
    display: block;
    position: absolute;
    left: 1rem;
    top: 1rem;
    z-index: 10;
    }

    /* Menübutton gestalten */ 
    div.menubutton a {
    font-size: 1.2rem;
    display: block; 
    color: white;
    background: #4f9575;;
    text-decoration: none;
    padding: 0.5em;
    margin: 0.7em;
    border-radius: 0.25rem;
    border: none;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
    }

    /* Pfeile nach und nach unten */ 
    div.menubutton a.showmenu:after {
    content: " \25bc"; /* Pfeil nach unten */ 
    font-size: 0.7rem; 
    }
    div.menubutton a.hidemenu:after {
    content: " \25b2"; /* Pfeil nach oben */ 
    font-size: 0.7rem; 
    }  
    /* Menübutton ausblenden */ 
    div.menubutton a.hidemenu {
    display:none; 
    }

    /* Grundformatierung für den Navigationsbereich */ 
    .navmain {
    padding: 0 1em; 
    margin: 0;
    background: white;
    }

    /* Die Navigationsliste gestalten */ 
    .navlist {
    overflow: hidden; /*verhindert Rollbalken in der kleinen Ansicht*/
    transition: 0.5s;  /* Aufrollverzögerung des Menüs*/
    list-style-type: none;
    padding: 0; 
    border-radius: 0 0 1rem 1rem; /* Abrundung des Menüs */
    margin: 0; 
    }

    .navlist li { 
    display: block; 
    border-bottom: 1px solid #ddd; /* Trennstrich zwischen Menüpunkten */
    }

    .navlist li:last-of-type {
    border-bottom: 0; /* unterer Menüpunkt kein Rand */
    }

    /* Die Links im Navigationsbereich gestalten */ 
    .navlist a {
    display: block; 
    text-decoration: none;
    background: #eee; /* Hintergrundfarbe der inaktiven Elemente */
    color: #333; /* Textfarbe der inaktiven Menüpunkte */
    padding: 1rem; 
    }

    .navlist a.active {
    background: #4f9575;
    color: white;
    text-decoration: none; 
    } 

    .navlist a:hover {
    background: #1e4432;
    color: #fff;
    }

    /* Navigationsliste ausblenden */ 
    .navlist { max-height: 0; } 

    /* Wenn #menu in der URL steht, die Navigationsliste einblenden */ 
    /* Den Wert für max-height ggf. an die Länge der Navigation anpassen */ 
    #menu:target .navlist { max-height: 25em; }

    /* Button mit Pfeil nach unten ausblenden */
    #menu:target a.showmenu { display: none; }
    /* Button mit Pfeil nach oben einblenden */
    #menu:target a.hidemenu { display: block; }

} /* Ende @media */