body {
        display: grid;
        gap: 0.1em;
}

@media (min-width: 30em) {
        /* Breite beträgt mindestens 30em */

        body {
                grid-template-columns: 1fr 3fr;
                grid-template-rows: auto 1fr 3.5em;
        }
}
header,
footer {
        grid-column: 1 / -1;
}

header {
        background: #FFFFCC;
        border-color: #d5d5d5;
        color: #5000A0;
}

main {
        background: #FFFFFF;
        border-color: #df6c20;
        color: #5000A0;

}

aside {
        background: #FFFFCC;
        border-color: #8db243;
        color: #5000A0;
}

footer {
        background: #FFFFCC;
        border-color: #8a9da8;
}

footer * {
        float: right;
        clear: right;
        margin: 0 0 1em;
}

body {
        margin: 0 auto;
        max-width: 60em;
        font-family: Arial,"Courier New",Verdana;
}

header,
nav,
main,
article,
section,
aside,
footer {
        border-radius: 0.5em 0.5em 0.5em;
        border: thin solid;
        padding: 0.5em;
       }


footer {
        display:flex;
       }
footer a  {
        flex: 1 0 0;
}


 table,
th,
td {
        border: thin solid transparent;
}

td {
        padding: .5em;
}

#ohneRahmen {
        border-collapse: collapse;
}


caption {
        text-align: left;
}

thead {
        position: sticky;
        top: 0;
        color: #5000A0;
        background: Aqua;
}

.gallery {
        --size: 10em;
        /* control the size */

        --gap: 1em;
        /* control the gap */

        --zoom: 2;
        /* control the scale factor */

        display: grid;
        gap: var(--gap);
        width: calc(3*var(--size) + 2*var(--gap));
        aspect-ratio: 1;
        grid-template-columns: repeat(3, 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: rgba(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(80%);
        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: grid;
        place-content: center;
}