/* https://www.cssportal.com/css3-menu-generator/ */

#menu {   /* Navigationsleiste TOP #cc6666 */ 
    width: 100%; 
    max-width: 60em; /* 960 Pixel*/
    background: #cc6666;
    color: #FFFFFF;
    height: 35px; /*height: 45px; border-radius: 20px*/
    border-radius: 10px;
   }

   #menu ul, #menu li {
    margin: 0 auto;
    padding: 0;
    list-style: none
   }

   #menu ul {
    width: 100%;
   }

   #menu li {
    float: left;
    display: inline;
    position: relative;
   }

   #menu a {
    display: block;
    line-height: 35px;
    padding: 0 10px;
    text-decoration: none;
    color: #ffffff;
    font-size: 14px; /*font-size: 16px;*/
   }

   .link-first { /* MEIN EINTRAG: Abstand vom linken Rand und den ersten Link */
    margin-left: 10px;
   }

   #menu a.dropdown-arrow:after {
    content: "\25BE";
    margin-left: 5px;
   }

   #menu li a:hover {
    color: #F33328;
    background: #e6b5a7;
   }

   #menu input {
    display: none;
    margin: 0;
    padding: 0;
    height: 35px; /* height: 45px; */
    width: 100%;
    opacity: 0;
    cursor: pointer
   }

   #menu label {
    display: none;
    line-height: 35px; /* line-height: 45px; */
    text-align: center;
    position: absolute;
    left: 35px
   }

   #menu label:before {
    font-size: 1.6em;
    content: "\2261";
    margin-left: 20px;
   }

   #menu ul.sub-menus{
    height: auto;
    overflow: hidden;
    width: 150px;   /* Breite vom Submenue Orginal 170px*/
    background: #444444;
    position: absolute;
    z-index: 99;
    display: none;
   }

   #menu ul.sub-menus li {
    display: block;
    width: 100%;
   }

   #menu ul.sub-menus a {
    color: #FFFFFF;
    font-size: 12px; /* font-size: 16px;*/
   }

   #menu li:hover ul.sub-menus {
    display: block
   }

   #menu ul.sub-menus a:hover{
    background: #e6b5a7;
    color: #444444;
   }

/* Bis Auflösung Breite 760px wird das Hamburger Menue gezeigt. 
768px width hat Ipad Mini. kein Hamburger Menue nötig.
Aktuell ist Navigationsliste 691,2px breit.  1 bis 3 cm mehr, dann fällt der letzte Link "Logout" aus der
Leiste und wird in eine neue Zeile geschrieben. Wichtig Anzahl der Links und somit BREITE.
Beim IE fällt immer der letzte Link herunter!!! :-(
@media only screen and (min-width: 481px) and (max-width: 760px) Das funktioniert nicht. 
@media only screen and (max-width: 760px)- alle Bildschirme mit einer maximalen Breite von 767px
sollen das angegebene machen. Also bis breite 760px Hamburger Menue zeigen.
*/  

    @media only screen and (max-width: 760px) { 
        #menu {position:relative}
        #menu ul {background:#444444;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;text-align:left;}
        #menu ul.sub-menus {width:100%;position:static;}
        #menu ul.sub-menus a {padding-left:30px;}
        #menu li {display:block;float:none;width:auto;}
        #menu input, #menu label {position:absolute;top:0;left:0;display:block}
        #menu input {z-index:4}
        #menu input:checked + label {color:#FFFFFF}
        #menu input:checked + label:before {content:"\00d7"}
        #menu input:checked ~ ul {display:block}
    }

    @media only screen and (max-width: 480px) {   
        body {                                                                                      
            width: 90%;
        }
        .main {
            flex-direction: column; 
            width: 100%;
            padding: 0px; /* 13.2 geändert. Vorher 10px */
        }          

        .item {
            padding: 3px;
        }
       
        .main_img {
            width: 100%;
            /*margin-top: 20px;
            margin-bottom: 20px;
            text-align: center;*/
        }

        .main_content {
            width: 100%;
        }
    }