.container {
    width: 98%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-left:   0.4em;
    margin-top:    1.1em;
    margin-bottom: 1.1em;
}

.container img {
    max-width: 100%;
    height: auto;
                 margin-right: 0.1em;
                 margin-left: 0em;
                 margin-top: 0.2em;
                 margin-bottom: 0.6em;
    border: thin solid grey;
    border-radius: 0.3em;
    box-shadow: 10px 10px 10px white inset, 10px 10px 10px grey;
    /* Maintain aspect ratio */
    flex: 1 1 auto;
    /* Allow images to grow and shrink */
    object-fit: cover;
}

BODY {
        background-color : white;
        }
/* globale Schriftarten festlegen */
h1,h2,h3,h4,p,ul,ol,li,div,td,th,span,b,i,body {
    font-family:Verdana,Arial,Helvetica,sans-serif;
}
.pgob {
        }

.pgb {
        }

.pgbb {
        border-color : black;
        border-style : double;
        border-width : 4px;
        }

.pt {
        font-family : Verdana,Arial,Helvetica,sans-serif;
        font-weight : bold;
        text-align : center;
        white-space : pre;
        }

DIV.pgi P {
        color : black;
        font-family : Verdana,Arial,Helvetica,sans-serif;
        margin : 0px;
        padding : 6pt;
        }

.pgib {
        background-color : white;
        border-color : brown;
        border-style : double;
        border-width : 4px;
        }

.popen {
        color : black;
        font-style : normal;
        font-weight : bold;
        text-align : left;
        }

.peco {
        color : black;
        font-style : normal;
        font-weight : bold;
        text-align : right;
        }

.ptitle {
        color : black;
        font-style : normal;
        font-weight : normal;
        }

.pplay {
        color : black;
        font-style : normal;
        font-weight : bold;
        }

.pelo {
        font-style : normal;
        font-weight : normal;
        }

.pevent {
        color : black;
        font-style : italic;
        font-weight : normal;
        text-align : center;
        }

DIV.pgm P {
        color : black;
        font-family : Verdana,Arial,Helvetica,sans-serif;
        margin : 0pt;
        padding : 0em;
        }

.pintro {
        font-family : Verdana,Arial,Helvetica,sans-serif;
        font-style : normal;
        font-weight : normal;
        }

.pm {
        color : black;
        font-weight : bold;
        line-height : 140%;
        text-align : justify;
        }

.pc {
        color : black;
        font-family : Verdana,Arial,Helvetica,sans-serif;
        font-style : normal;
        font-weight : normal;
        }

.pc2 {
        }

.pf {
        font-family : LinaresFigurine, ZurichFigurine, "Zurich New", HastingsFigurine;
        font-style : normal;
        }

.panno {
        font-style : normal;
        font-weight : normal;
        }

.ianno {
        color : black;
        }

.pclock {
        }


/* Standardnavigation; position-fixed funktioniert nicht im IE unter Windows. D. h., die Navigation verschwindet beim vertikalen Scrollen. Bei anderen Browsern (Opera, Mozilla, Konqueror etc.) bleibt sie fixiert. */
#navi {
        position:absolute;
        top:430px;
        left:52px;
        margin-top:0px;
        padding:0px;
        width:250px;
}

/* Standard-Menübutton */
div.menu {
        font-family:Verdana,Arial,Helvetica,sans-serif;
        font-weight:bold;
        color:#FFFFFF;
        background-color:#003080;
        text-align:center;
        margin-bottom:5px;
        padding:2px;
}
.menu a {
        display:block;
        width:250px;
}

.menu a:link {
        color:#ffffff;
        text-decoration:none;
}

.menu a:visited {
        color:#ffffff;
        text-decoration:none;
}
.menu a:hover {
        color:#ffffff;
        background-color:#0060FF;
        text-decoration:none;
}
.menu a:active {
        color:#ffffff;
        background-color:#0060FF;
        text-decoration:none;
}
.menu a:focus {
        color:#ffffff;
        background-color:#0060FF;
        text-decoration:none;
}

DIV.pgm A:link {
        color : black;
        text-decoration : none;
        }

DIV.pgm A:visited {
        color : black;
        text-decoration : none;
        }

DIV.pgm A:hover {
        color : blue;
        text-decoration : none;
        }

DIV.pgm A:active {
        text-decoration : none;
        }

DIV.pgm .pc A:link {
        color : black;
        text-decoration : none;
        }

DIV.pgm .pc A:visited {
        color : black;
        text-decoration : none;
        }

DIV.pgm .pc A:hover {
        color : blue;
        text-decoration : none;
        }

DIV.pgm .pc A:active {
        color : blue;
        text-decoration : none;
        }

DIV.pgm .pc2 A:link {
        color : black;
        text-decoration : none;
        }

DIV.pgm .pc2 A:visited {
        color : black;
        text-decoration : none;
        }

DIV.pgm .pc2 A:hover {
        color : blue;
        text-decoration : none;
        }

DIV.pgm .pc2 A:active {
        color : blue;
        text-decoration : none;
        }

DIV.pgm SPAN.pc A:link {
        }

DIV.pgm SPAN.pc A:visited {
        }

DIV.pgm SPAN.pc A:hover {
        }

DIV.pgm SPAN.pc A:active {
        }

DIV.pgm SPAN.pc2 A:link {
        }

DIV.pgm SPAN.pc2 A:visited {
        }

DIV.pgm SPAN.pc2 A:hover {
        }

DIV.pgm SPAN.pc2 A:active {
        }

DIV.pgm .pc EM {
        }

DIV.pgm .pc2 EM {
        }

DIV.pgm IMG {
        }

img.picright {
  width: 100%;
  height: auto;
}
img.picleft {
  width: 100%;
  height: auto;
}

@media (min-width: 35em) {
img.picright {
        max-width: 270px;
        width: auto;
        max-height: 270px;
        height: auto;
        float: right;
        margin-left: 0.5em;
        margin-top: 0.2em;
        margin-bottom: 0.6em;
        clear: right; /*clear-Property um floats zu containen, also störenden overflow durch andere gefloatete Bilder zu vermeiden | Hugo*/
        border: thin solid grey;
        border-radius: 0.3em;
        box-shadow: 10px 10px 10px white inset, 10px 10px 10px grey;
}

    figure.picright {
                 float:right;
                 max-width: 270px;
                 height: auto;
                 clear: right; /*clear-Property um floats zu containen, also störenden overflow durch andere gefloatete Bilder zu vermeiden | Hugo*/
    }

img.picleft {
        max-width: 270px;
        width: auto;
        max-height: 270px;
        height: auto;
        float: left;
        margin-right: 1.2em;
        margin-top: 0.2em;
        margin-bottom: 0.6em;
        clear: left; /*clear-Property um floats zu containen, also störenden overflow durch andere gefloatete Bilder zu vermeiden | Hugo*/
        border: thin solid grey;
        border-radius: 0.3em;
        box-shadow: 10px 10px 10px white inset, 10px 10px 10px grey;
}

    figure.picleft {
                 float:left;
                 max-width: 270px;
                 height: auto;
                 clear: right; /*clear-Property um floats zu containen, also störenden overflow durch andere gefloatete Bilder zu vermeiden | Hugo*/
    }

}

@media (min-width: 50em) {
img.picright {
        max-width: 270px;
        width: auto;
        max-height: 270px;
        height: auto;
}
img.picleft {
        max-width: 270px;
        width: auto;
        max-height: 270px;
        height: auto;
}