/* Grundlegende Stile */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
}
header {
    text-align: center; padding: 10px; background-color: #f8f9fa; border-bottom: 1px solid #dee2e6;
    z-index: 1000; flex-shrink: 0;
}
header h1 { margin: 0; font-size: 1.5em; }

/* Moderne Temperatur-Legende */
.temp-legend-bar {
  position: relative;
  height: 20px;
  border-radius: 999px;
  overflow: visible;
  border: 1px solid #e5e7eb;
  background: linear-gradient(90deg,
    #4B0082 -10%,
    #8A2BE2 0%,
    #00008B 16%,
    #0000FF 24%,
    #40E0D0 32%,
    #32CD32 40%,
    #90EE90 50%,
    #ADFF2F 60%,
    #FFD700 72%,
    #FFA500 84%,
    #FF0000 100%,
    #B22222 110%
  );
  margin-bottom: 28px; /* Platz für Labels */
}

.temp-legend-tick {
  position: absolute;
  top: 0px; width: 1.5px; height: 18px;
  background: #111827; opacity: .9;
}

/* Labels über der Skala */
.temp-legend-label {
  position: absolute;
  top: -19px;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Sorgt dafür, dass optionaler "Temperatur (°C)"-Text nicht klebt */
.temp-legend .text-center {
  margin-top: 5px;
  display: block;
}

/* NEU: kompakter Abstand der Legende zur Karte
   (kann in der preview.html zusätzlich per !important überschrieben werden) */
/* Abstand Legende → Karte wirklich reduzieren */
.temp-legend {
  margin-bottom: 0.2rem !important;  /* halb so groß wie vorher */
  padding-bottom: 0 !important;      /* falls aus CSS kommt */
}

header {
  margin-bottom: 0 !important;       /* verhindert Doppelabstand */
}


/* Legende unter der Karte (falls vorhanden) */
.legend {
    display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
    gap: 4px 12px; margin: 8px 0 0; color: #555; font-size: 0.9em;
}
.legend-item { display: inline-flex; align-items: center; }
.legend-color {
    width: 15px; height: 15px; border-radius: 50%; border: 1px solid #ccc;
    margin-right: 5px;
}

/* Karte */
#map {
    height: 100%; width: 100%; background-color: #ddd;
}

/* Marker-Stile */
.map-marker-icon {
    border-radius: 50%; border: 2px solid white; box-shadow: 0 2px 5px rgba(0,0,0,0.4);
    display: flex; align-items: center; justify-content: center; color: white; font-weight: 500;
    font-size: 13px; text-shadow: 1px 1px 2px rgba(0,0,0,0.7); transition: background-color 0.4s ease;
}

/* --- VOLLSTÄNDIGE FARBSKALA FÜR TEMPERATUR --- */
.status-unavailable { background-color: #9E9E9E; }
.temp-level-1 { background-color: #4B0082; }
.temp-level-2 { background-color: #8A2BE2; }
.temp-level-3 { background-color: #00008B; }
.temp-level-4 { background-color: #0000FF; }
.temp-level-5 { background-color: #40E0D0; color: #111; }
.temp-level-6 { background-color: #32CD32; }
.temp-level-7 { background-color: #90EE90; color: #111; }
.temp-level-8 { background-color: #ADFF2F; color: #111; }
.temp-level-9 { background-color: #FFD700; color: #111; }
.temp-level-10 { background-color: #FFA500; }
.temp-level-11 { background-color: #FF0000; }

/* Mobile Optimierung */
@media (max-width: 768px) {
    header h1 { font-size: 1.2em; }
    .legend { font-size: 0.75em; gap: 2px 8px; }
    .legend-color { width: 12px; height: 12px; }
    header { padding: 5px; }
    .map-marker-icon { font-size: 11px; }
}