/* ===================================================================
 * Wetteranzeige (components/weather.php)
 *
 * Folgt der Gestaltung der übrigen Abschnitte:
 *   - Überschrift in --primary, Untertitel in --secondary (wie bei den
 *     Veranstaltungen)
 *   - Karten mit 20px Radius und dem weichen Schatten der Event-Karten
 *   - Anheben beim Überfahren, mit derselben Beschleunigungskurve
 *   - Die aktuelle Lage trägt den Farbverlauf, den auch das Datumsschild
 *     der Veranstaltungen und die Schaltflächen verwenden
 * =================================================================== */

/* Weiß, weil der Abschnitt zwischen dem hellen Eventbereich und dem
   beigen Buchungsbereich sitzt – so wechseln sich die Flächen weiter ab. */
.weather-section {
  background-color: var(--background-white);
  padding: 4rem 0;
}

.weather-headline {
  font-family: var(--font-heading);
  font-size: var(--font-size-section-title);
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.weather-intro {
  font-family: var(--font-body);
  font-size: var(--font-size-subsection);
  color: var(--secondary);
  margin-bottom: 2rem;
}

/* --- Aktuelle Lage: das Schaustück des Abschnitts --- */

.weather-now {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 100%;
  padding: 2rem;
  background: var(--gradient-primary);
  color: var(--text-white);
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(71, 127, 186, 0.25);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.weather-now:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(71, 127, 186, 0.35);
}

.weather-now .weather-icon {
  width: 72px;
  height: 72px;
  color: var(--text-white);
  flex-shrink: 0;
  opacity: 0.95;
}

.weather-now-label {
  font-size: var(--font-size-badge-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.weather-now-temp {
  font-family: var(--font-heading);
  font-size: var(--font-size-overlay);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
}

.weather-now-text {
  font-size: var(--font-size-lg);
  opacity: 0.95;
}

.weather-now-wind {
  font-size: var(--font-size-body-xs);
  opacity: 0.8;
  margin-top: 0.4rem;
}

/* --- Die nächsten Tage --- */

.weather-days {
  display: grid;
  /* min() verhindert, dass die Kacheln auf schmalen Handys breiter
     werden als der Bildschirm. */
  grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr));
  gap: 1rem;
  height: 100%;
}

.weather-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem 0.5rem;
  background: var(--background-white);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  text-align: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.weather-day:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 12px 40px rgba(71, 127, 186, 0.2);
}

.weather-day .weather-icon {
  width: 38px;
  height: 38px;
  color: var(--primary);
}

.weather-day-label {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-medium);
  color: var(--secondary);
  font-size: var(--font-size-body-sm);
}

.weather-day-temp {
  font-family: var(--font-heading);
  white-space: nowrap;
}

.weather-max {
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  font-size: var(--font-size-lg);
}

.weather-min {
  color: var(--text-light);
  margin-left: 0.35rem;
}

/* Neuschnee: dasselbe Blau wie die übrigen Hervorhebungen */
.weather-day-snow {
  font-size: var(--font-size-badge-sm);
  color: var(--primary);
  font-weight: var(--font-weight-medium);
}

/* --- Quellenangabe --- */

.weather-source {
  margin: 2rem 0 0;
  font-size: var(--font-size-xs);
  color: var(--text-light);
}

@media (max-width: 767px) {
  .weather-section {
    padding: 2.5rem 0;
  }

  .weather-now {
    justify-content: center;
    padding: 1.5rem;
    margin-bottom: 1rem;
    /* Untereinander keine Höhe erzwingen – sonst ragt die Kachel samt
       Abstand in die Tageskacheln darunter */
    height: auto;
  }

  .weather-now .weather-icon {
    width: 56px;
    height: 56px;
  }
}