.menuicon {
    margin: 0;
    display: block;
    border-bottom: 1px solid #eee;
    font-size: 18pt;
    line-height: 44px;
    text-align: center;
    /*padding-left: 20px;*/
    cursor: pointer;
}
    .menuicon a {
        text-decoration: none;
        color: #333;
    }


.item label {
    margin: 0;
    text-align: center;
    display: block;
    padding: 4px;
    background-color: #3a3a3a; /*#fc575e*/
    font-size: 11pt;
    text-transform: uppercase;
    color: #fff; /*#f8f8f8*/
    /*cursor: pointer;*/
    border-bottom: solid 1px #eee;
}

.item ul {
    margin: 0;
    padding: 0;
    /* REZ max-height: 0; */
    overflow: hidden; /* ul wird erst sichtbar, wenn menu engeschaltet wird */
    transition: all .2s;
    text-align: center;
}

    .item ul li a {
        margin: 0;
        display: block;
        text-decoration: none;
        color: #333;
        font-size: 11pt;
        border-bottom: 1px solid #aaa;
        padding: 10px;
    }

        .item ul li a:hover {
            background: #eee;
        }
        /*.item ul li a:active {
        	color: #fff;
            background: #e23b2d;
        }*/
        .active { /* diesen setze ich logisch im Code */
        	background: #eee;
        }

        
        
/* Dark mode */
@media (prefers-color-scheme: dark) {
	.menuicon {
	    border-bottom: 1px solid #111;
	}
	    .menuicon a {
	        color: #ddd;
	    }
	
	
	.item label {
	    background-color: #222; /*#fc575e*/
	    color: #fff; 
	    border-bottom: solid 1px #222;
	}
	
	   .item ul li a {
	        color: #ddd;
	        border-bottom: 1px solid #555;
	    }
	
	        .item ul li a:hover {
	            background: #444;
	        }
	        .active { /* diesen setze ich logisch im Code */
	        	background: #444;
	        }
}