html, body { height:100%; margin:0; padding:0; }

#container { display:flex; height:calc(100vh - 60px); margin-top: 60px }

#map { flex:1; height: 100%; /* WICHTIG: Muss Höhe haben! */ }

#sidebar { width:25%; overflow:auto; border-right:1px solid #ccc; padding:8px; box-sizing:border-box; }

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030; /* höher als default content */
    background-color: #fff; /* wichtig für visuelle Trennung */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.controls { margin-bottom:8px; }
.controls input, .controls select { width: 100%; margin-bottom:4px; padding:4px; }
.station-item { padding:8px; cursor:pointer; border-bottom:1px solid #eee; }
.station-item:hover { background:#f0f0f0; }

/* Custom InfoWindow styling */
/* Reduce and reposition the close button and center the close icon */
.gm-style .gm-ui-hover-effect {
    width: 16px !important;
    height: 16px !important;
    top: 8px !important;
    right: 8px !important;
    background: none !important;
    background-position: center center !important;
    background-size: 16px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* Ensure the InfoWindow container positions correctly relative to the tail */
.gm-style .gm-style-iw-c {
    margin-top: -10px !important;
    margin-left: -10px !important;
}
/* Constrain InfoWindow content width and style */
.gm-style .gm-style-iw {
    max-width: 220px !important;
    padding: 8px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
}
.gm-style .gm-style-iw div {
    font-size: 14px !important;
    line-height: 1.5 !important;
}