.mpdesignframe {
    background: #333;
    color: #dedede;
    background: linear-gradient(346deg, rgba(51,51,51,1) 0%, rgba(85,85,85,1) 49%, rgba(68,68,68,1) 100%); 
    background: url('../gfx/pexels-char-1264000.jpg') no-repeat center top;
    background-attachment: fixed;
    background-size: cover;
    font-size: 1rem;
    font-family: arial;

    /*body, header, nav, & .login-button, & #content-image, span {padding: 0;}

    body {
    inset: 0;
    margin: 0;
    
    background: #333;
    color: #dedede;
    zbackground: linear-gradient(346deg, rgba(224,224,224,1) 0%, rgba(255,255,255,1) 100%); 
    background: linear-gradient(346deg, rgba(51,51,51,1) 0%, rgba(85,85,85,1) 49%, rgba(68,68,68,1) 100%); 
    
    font-size: 14pt;
    font-family: arial;
    }*/

    & #wrapper {
    background: linear-gradient(346deg,
        #222a 0%,
        #333a 49%,
        #444a 100%
     ); 

    height: 100%;
    width: 100%;
    max-width: 100%;
    padding: 0;
    
    display: flex;
    flex-flow: column nowrap;
    gap: .5rem;

    overflow-y: scroll;
    }


    & header {
        grid-column-start: 1;
        grid-column-end: span 3;
        grid-row: 1;
        padding-right: 1rem;
        
        display: flex;
        justify-content: space-between;

        & nav {
            /*    display: none;
                flex-flow: row nowrap;
                justify-content: space-around;
            */
            display: none;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            position: fixed;
            width: 100%;
            height: 100%;
            background: #000d;
            inset: 53px 0 0 0;
    
            gap: 1rem;
            padding: 2rem 1rem;
            z-index: 6;

            > a {
                height: min-content;
                text-decoration: none;;
                color: mintcream;
                background: #4a6;
                padding: 1rem;

                &:hover {
                    color: #4a6;
                    text-decoration-line: underline;
                    text-decoration-thickness: 2px;
                    background: mintcream;
                }
            }
        }

        & .login-button {
            grid-column-start: 3;
            grid-column-end: span 3;
            display: flex;
            justify-content: end;
            align-items: center;
        }
    }

    

& #sidebar {
    display: flex;
    flex-flow: column nowrap;
    grid-column-start: 1;
    grid-column-end: span 3;
    grid-row-start: 2;
    gap: .5rem;

    & > div {
        padding: .25rem .5rem;
    }
    
    & #logo {grid-row-start: 2;}

    & #logo {
    height: 150px;
    display: flex;
    align-items: flex-end;
    justify-content: end;
    }

    & #kontakt {grid-row-start: 3; background: #4a6}
    & #anfahrt {grid-row-start: 4; background: #5a7; min-height: 200px;
        & img {
            max-width: 100%;
        }
    }
    & #zeiten {grid-row-start: 5; background: #6a8}
}
    & main {
    /*position*/
    grid-row-start: 3;
    grid-row-end: span 4;
    grid-column-start: 1;
    grid-column-end: span 3;

        
    /*traits*/
    display: flex;
    flex-flow: column nowrap;
    grid-template-rows: repeat(3, min-content);
    gap: .5rem;
    
    max-width: 100%;

    scrollbar-width: thin;
    }
    
    & .content-headline {
        grid-column-start: 1;
        grid-column-end: span 2;
        grid-row-start: 1;

        height: 150px;
        display: flex;
        align-items: flex-end;
        padding: .5rem;
        
        background: #6a9;
        font-size: 1.5rem;
    }

    & .content-image-description {
        margin-top: -1rem;
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-end;
        zgrid-column-start: 1;
        zgrid-column-end: span 2;
        zgrid-row-start: 2;
        grid-row: 3;
        padding: .5rem; 
        background: linear-gradient(50deg, rgba(68,170,102,1) 0%, rgba(51,153,68,1) 100%);
    }
    
    & .content-image {grid-column-start: 1; grid-column-end: span 2; grid-row-start: 2;}
    & .content-image img {max-width: 100%;}
    
    & #content {
        grid-column-start: 1;
        grid-column-end: span 2;
        grid-row-start: 4;
        display: grid;
        grid-template-columns: 1fr;
        grid-row-gap: .5rem;

        & .content-full, .content-right-note {grid-column-start: 1;}


        & > * {
            grid-column-end: span 2;
        }
    }
    
    & #content p {
        grid-column-start: 1;
        background: #4a6;
        margin: 0;
        padding: .5rem
    }
    
    
    & .content-right-note {
        display: block;
        grid-column-start: 2;
        grid-column-end: span 2;

        & img {
            width: 100%;
        }
    }
    & .content-right-note, .content2 {
        grid-row-start: 2;
        grid-row-end: 4;
    }

    & footer {
        grid-column-start: 1;
        grid-column-end: span 2;

        display: flex; justify-content: center;
    }

    & .phat {font-weight: 600; font-size: 2rem; border: 2px solid mintcream;}
    & .normal {font-weight: 100; font-size: 1.5rem; color:#4a6}
}