@media screen and (max-width: 853px) {
    body {
        font-size: 0.9em;
        grid-template-columns: 6px 1fr 6px;
        grid-template-rows: auto auto 1fr auto;
        grid-template-areas: "r1c1  r1c2 r1c3" "r4c1 r4c2 r4c3" "r2c1 r2c2 r2c3" "r3c1 r3c2 r3c3";
    }

    .corner-top-left {
        border-image: url(../img/bg-tl.png);
        border-width: 6px 0px 0px 6px;
        border-image-slice: 6 0 0 6 fill;
    }

    .corner-bottom-left {
        border-image: url(../img/bg-bl.png);
        border-width: 0px 0px 0px 6px;
        border-image-slice: 0 0 0 6 fill;
    }

    .logo {
        width: 60px;
        height: 45px;
        left: calc(100vw - 75px);
        top: 0px;
    }

    body > header  h1 {
        font-size: 1.5em;
    }

    body > nav {
        grid-area: r4c2;
        min-width: auto;
        display: flex;
        margin-bottom: 10px;
    }

    body > nav .nav {
        border: none;
        padding: 0;
    }

    body > nav .nav ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 3px;
        padding-bottom: 0px;
    }

    body > nav ul li {
        min-width: auto;
        border: none;
    }


    body > nav ul span,
    body > nav ul button {
        color: black;
        font-size: 0.7em;
        padding: 3px 4px;
        background-color: var(--popup);
    }

    body > nav ul button.selected {
        background-color: var(--akzent);
    }

    body > nav .nav-empty, nav .nav-footer {
        display: none;
    }



    body > main .main-content {
        padding: 10px;
    }


    div.grid-3 .row-1 img {
        width: 15vw;
    }

    .showImage {
        padding: 60px;
    }
}


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

    .grid-3 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        /*grid-template-areas: "grid-3-img grid-3-content" "grid-3-file grid-3-content";*/
        column-gap: 3px;
        row-gap: 5px;
    }

    div.grid-3 div {
        padding: 0px;
    }

    .grid-3 .header { display:  none; }
    div.grid-3 .row-1:not(.last),
    div.grid-3 .row-2:not(.last) {
        border: none;
    
    }

    div.grid-3 .row-1 { text-align: center; }
    div.grid-3 .row-3:not(.last) {
        border-bottom-width: 3px;
        padding-bottom: 5px;
        margin-bottom: 10px;
    }

    div.grid-3 .row-1 img {
        width: 25vw;
    }

    .showImage {
        padding: 10px;
    }
}