body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f0f0f0;
    padding: 20px;
}

.controls {
  margin-bottom: 15px;
}

.controls label {
  margin: 0 10px;
}

#container {
    border: 2px solid #333; /* Fügt einen schwarzen Rand hinzu */
    background-color: #fff; /* Setzt den Hintergrund auf Weiß */
    margin: 20px 0; /* Horizontalen Margin entfernt, vertikalen beibehalten */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Fügt einen leichten Schatten hinzu */
    
    /* NEU: Keine festen Pixel-Abmessungen mehr, sondern dynamisch im JS gesetzt */
    width: 100%; /* Wichtig, damit das Elternelement die Größe korrekt erkennt */
    min-height: 500px; /* Mindesthöhe beibehalten, bis JS die finale Höhe setzt */
}

/* Navbar Abgrenzung */
.navbar {
    border-bottom: 2px solid #444; /* feine Linie unten */
    box-shadow: 0 2px 5px rgba(0,0,0,0.4); /* leichter Schatten */
}

/* Optional: dunklere Kartenfarbe */
.bg-darker-card {
    background-color: #2b2b2b;
}