body {    /* Allgemeine Angaben für body   */
  background: #white;
 background-image:url("../bilder/hintergrund_d.jpg");
 background-size: 100%;
  font-family: Gabriola, Comic Sans MS, Times New Roman, Times, serif;
  color: #002060;
  overflow-x: auto;
  overflow-y: auto;
}
.center4 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: middle;
  width: 100%;
   background: url(../bilder/home2.jpg) no-repeat center;
  color: #002060;
  text-indent:70px;
}
.center4 a:hover {
  background: url(../bilder/home3.jpg) no-repeat center;;
  }


.gallery {
        --size: 30vh;
        /* control the size */

        --gap: 2vh;
        /* control the gap */

        --zoom: 2.5;
        /* control the scale factor */
        vertical-align: middle;
        display: grid;
        gap: var(--gap);
        height: calc(3*var(--size) + 2*var(--gap));
        aspect-ratio: 1;
        grid-template-columns: repeat(3, auto);
}

@media (max-width: 400px) {
.gallery {
        --size: 46vmin;
        /* control the size */

        --gap: 3vmin;
        /* control the gap */

        --zoom: 2;
        /* control the scale factor */
        vertical-align: middle;
        display: grid;
        gap: var(--gap);
        width: calc(2*var(--size) + 1*var(--gap));
        aspect-ratio: 1;
        grid-template-columns: repeat(2, auto);
}
}

.gallery figure {
        margin: 0;
        padding: 0;
        position: relative;
}

.gallery figcaption {
        position: absolute;
        bottom: 0;
        left: 0;
        text-align: center;
        width: 100%;
        opacity: 0;
        color: white;
        background: rgb(0 0 0 / 0.3);
}

.gallery figure:hover figcaption,
.gallery figure:focus figcaption {
        opacity: 1;
}

.gallery > figure img {
        width: 0;
        height: 0;
        min-height: 100%;
        min-width: 100%;
        object-fit: cover;
        cursor: pointer;
        filter: grayscale(100%);
        transition: .35s linear;
}

.gallery figure:hover img,
.gallery figure:focus img {
        filter: grayscale(0);
        width: calc(var(--size)*var(--zoom));
        height: calc(var(--size)*var(--zoom));
}

body {
        margin: 0;


 min-height: 100vh;

        display: flex;
        flex-direction: column;
        place-content: center;
}