/* Container für die gesamte Karten-Sektion */
.map-wrapper {
    display: flex;
    flex-wrap: wrap; /* Lässt Elemente auf Handys untereinander rutschen */
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    margin: 20px 0;
    font-family: sans-serif;
    background: #fff;
}

/* Die linke Seitenleiste mit der Liste */
#location-list {
    flex: 1 1 300px; /* Nimmt mind. 300px ein, wächst aber mit */
    height: 500px;
    background: #fdfdfd;
    overflow-y: auto; /* Scrollbar, falls die Liste lang wird */
    border-right: 1px solid #ddd;
}

/* Überschrift der Liste */
#location-list h3 {
    padding: 15px;
    margin: 0;
    background: #f4f4f4;
    font-size: 1.1rem;
    border-bottom: 1px solid #ddd;
    color: #333;
}

/* Die Liste selbst */
#dance-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Einzelne Listeneinträge */
#dance-list li {
    padding: 15px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background 0.2s ease;
}

/* Hover-Effekt (wenn man mit der Maus drüberfährt) */
#dance-list li:hover {
    background: #fff5f5; /* Ein ganz leichter Rot-Ton */
}

/* Name des Ortes in der Liste */
#dance-list li strong {
    display: block;
    color: #d32f2f; /* Ein schönes Rot für die Tanzschul-Farben? */
    margin-bottom: 3px;
}

/* Die Karte auf der rechten Seite */
#map-events-canvas {
    flex: 2 1 450px; /* Karte ist breiter als die Liste */
    height: 500px;
    min-height: 350px;
}

/* Anpassung für mobile Geräte */
@media (max-width: 768px) {
    #location-list {
        border-right: none;
        border-bottom: 1px solid #ddd;
        height: 250px; /* Auf Handys die Liste etwas kürzer machen */
    }
    .map-wrapper {
        flex-direction: column;
    }
}