/*
                        figure, figcaption {
                                margin: 0;
                                padding: 0;
                        }

                        figure.einzel {
                                overflow:hidden;
                                position: relative;
                                display: inline-block;
                                width: 100%;
                        }

                        figure img {
                                width: 100%;
                                display: block;
                        }
                        */
                        figcaption {
                                position: absolute;
                                bottom: 0;
                                width: 100%;
                                text-align: center;
                                line-height: 3em;
                                color: white;
                                background: rgba(0,0,0,0.5);
                        }

                        figcaption {
                                position: absolute;
                                bottom: -3em;
                                /* gilt für das erste (linke) Beispiel */
                                text-align: center;
                                line-height: 3em;
                                white-space: nowrap;
                                color: white;
                                background: rgba(0,0,0,0);
                                -webkit-transition: all 1s ease;
                                transition: all 1s ease;
                                overvlow: hidden;
                        }

                        figure.mitte figcaption {
                                width: 0;
                                left:50%;
                        }

                        /* gilt für das letzte (rechte) Beispiel */
                        figure.rechts figcaption {
                                width: 0;
                                bottom: 50%;
                                left: 50%;
                                overflow: hidden;
                        }

                        figure.fragezeichen:focus figcaption,
                        figure.fragezeichen:hover figcaption
                         {
                                bottom: 0;
                                left:0;
                                width: 100%;
                                background: rgba(0,0,0,0.6);
                        }

                        /* das Fragezeichen als Pseudo-Element */
                        figure.fragezeichen:before
                        {
                                content: "?";
                                position: absolute;
                                bottom: 0.2em;
                                left: 44%;
                                background: rgba(255,255,255,0.6);
                                color: black;
                                width: 1.4em;
                                height: 1.4em;
                                border-radius: 1.3em;
                                text-align: center;
                                font-size: 1.4em;
                                line-height: 1.4em;
                                -webkit-transition: all 1s ease;
                                transition: all 1s ease;
                        }

                        figure.fragezeichen:focus:before,
                        figure.fragezeichen:hover:before
                          {
                                background: rgba(255,255,255,0);
                                color: rgba(0,0,0,0);
                        }
                     /*
                        @media only screen and (max-width:800px) {
                                body{
                                        width: 100%;
                                        margin: 2% 0;
                                        padding: 1%;
                                }

                                figure.einzel {
                                        width: 48%;
                                }
                        }

                        @media only screen and (max-width:600px) {
                                figure.einzel {
                                        width: 100%;
                                }
                        }
                       */