html, body {
 height: 100%;
 width: 100%;
 margin: 0;
 background: #2B65EC;
 font-family: Arial, sans-serif;
 display: flex;
}

.menu {
 width: 200px;
 background: #f4f4f4;
 padding: 10px;
 display: flex;
 flex-direction: column;
 gap: 5px;
}

.menu-item {
 padding: 10px;
 cursor: pointer;
 border-radius: 6px;
}

.menu-header {
 padding: 2px;
 cursor: pointer;
 border-radius: 6px;
}

.menu-item:hover {
 background: #ffcc80;
}

.menu-item.active {
 background: #e17000;
 color: white;
 font-weight: bold;
}

.content {
 padding: 20px;
}

#info {
 position: absolute;
 top: 3px;
 left: 3px;
 width: calc(100% - 6px);
 height: 60px;
 background: #ffcc80;
 color: #ffffff;
 border-radius: 6px;
}

#map {
 position: absolute;
 top: 66px;
 left: 203px;
 width: calc(100% - 206px);
 bottom: 3px;
 height: calc(100% - 69px); 
 border-radius: 6px;
}

#leftside {
 position: absolute;
 top: 66px;
 left: 3px;
 width: 200px;
 color: white;
 font-size: 12px;
 border-radius: 6px;
}

#titel {
 position: absolute;
 top: 23px;
 left: 50%;
 font-family: Arial sans-serif;
 font-weight: bold;
 font-size: 20px;
 color: black;
}

#links {
 position: absolute;
 top: 4px;
 right: 4px;
 font-family: Courier New;
 font-weight: bold;
 font-size: 14px;
 color: black;
}

.legend {
    padding: 4px 6px;
    font: 10px/12px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
    line-height: 16px;
    color: #555;
}
.legend i {
    width: 16px;
    height: 16px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}