﻿/* ------------------------------------------------------------------
     CSS-Eigenschaften für  mobile Geräte (ab 320 px)            
       + Alles in einer Spalte untereinander anordnen                                              
-------------------------------------------------------------------- */
@media only screen and ( min-width: 320px ) {
    .width320 {
        display: none;
    }

    .width768 {
        display: none;
    }

    .width1024 {
        display: none;
    }

    .width1280 {
        display: none;
    }

    .content {
        display: grid;
        grid-template-columns: calc(100%/2) calc(100%/2) ;
        text-align: left;
    }


    .infokontext {
        display: inline-block;
    }

    .hide {
        display: none;
    }

    .infokontext:hover + .hide {
        display: inline-grid;
        position: relative;
        left: 150px;
        /*animation-name: hovering;*/
        /*animation-duration: 3s;*/
        /*animation-iteration-count: revert;*/
        /*animation-timing-function: ; */
    }

    
        @keyframes hovering {
            from {
                transform: translate(0,0px);
            }

            50% {
                transform: translate(0, -25px);
            }

            to {
                transform: translate(0, -0px);
            }
        }

        .menue-button {
            display: block;
            margin: auto;
        }

        #menue-button:target .menue-button-beschr-close {
        }

        #menue-button:target .menue-button-beschr-open {
            display: none;
        }

        #steuerung {
            display: none;
        }

        /*---------------------------------------------------------------------*/

    }