/* =======================
   Reset & Grundlayout
   ======================= */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Flex-Layout: sorgt dafür, dass die Karte den verfügbaren Platz einnimmt */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}


/* =======================
   Hauptbereich (main)
   ======================= */
main {
    flex: 1;
    display: flex;
    flex-direction: column;

    /* wichtig für korrektes Verhalten in Flexbox */
    min-height: 0;
}


/* =======================
   Karte
   ======================= */
#map {
    flex: 1;
    width: 100%;

    /* verhindert Overflow-/Scroll-Probleme */
    min-height: 0;
}

/* =======================
   Custom Marker (gemeinsame Basis)
   ======================= */
.marker-circle-red,
.marker-circle-green {
    width: 10px;
    height: 10px;

    border: 3px solid white;
    border-radius: 50%;

    box-shadow: 0 0 4px rgba(0,0,0,0.5);

    display: block; /* wichtig für Leaflet divIcon */
}


/* Farben getrennt definieren */
.marker-circle-red {
    background: red;
}

.marker-circle-green {
    background: green;
}

/* =======================
   Footer (nur Routenseite)
   ======================= */
body.route footer {
    margin-top: 0;
    background-color: var(--footer-bg);
    color: var(--text-color);
}