/* ================
   Weather Widget
   Karten stehen stets UNTEREINANDER (1 Spalte)
   ================ */

/* ===== Map + Wetter nebeneinander (Desktop), gestapelt (Mobile) ===== */
.map-weather-container {
  display: grid;
  grid-template-columns: 1fr 360px; /* Map flexibel, Wetter fix */
  gap: 24px;
  align-items: stretch;
  max-width: 1200px;
  margin: 24px auto;
  padding: 0 16px;
}

.map-container { min-height: 450px; }
.map-container iframe {
  width: 100%;
  height: 100%;
  min-height: 450px;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* Wetter-Wrapper */
.weather-widget-container {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.weather-widget {
  width: 100%;
  height: 100%;
  min-height: 450px;                 /* an Map-Höhe angeglichen */
  max-width: 520px;
  background: var(--secondary-light);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  padding: 16px 16px 12px;
}

.weather-widget h3 {
  margin: 0 0 12px 0;
  font-size: 1.5rem;
  letter-spacing: 0.3px;
  color: var(--white);
}

#loading {
  font-size: 0.95rem;
  color: #666;
  padding: 4px 0 10px;
}

/* ===== Kartenliste: IMMER 1 Spalte (untereinander) ===== */
.forecast-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* ===== Einzelkarte =====
   Rechter Block wird ABSOLUT positioniert, damit er die Zeilen links NICHT aufbläst */
.weather-card {
  position: relative;
  display: grid;                     /* für sauberen vertical rhythm */
  grid-template-columns: 1fr;        /* nur linke Spalte im Flow */
  row-gap: 6px;                      /* vertikaler Rhythmus links */
  border-radius: 14px;
  padding: 12px;
  padding-right: 124px;              /* Platz für rechten Block (112 + 12px) */
  background: radial-gradient(120% 120% at 100% 0%, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.55) 60%, rgba(255,255,255,0.45) 100%);
  box-shadow: 0 3px 12px rgba(0,0,0,0.06);
  min-height: 128px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}

.weather-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(17,171,176,0.08), rgba(255,255,255,0));
  pointer-events: none;
}

.weather-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.10);
}

/* ----- Linker Block: Tag, Datum, Temperatur, Tief/Hoch ----- */
.weather-card .dayline { margin-bottom: 4px; line-height: 1.2; }
.weather-card .dayname { font-weight: 500; font-size: 1.5rem; }
.weather-card .date    { font-size: 0.9rem; color: #666; display: block; margin-top: 2px; }

.weather-card .temp-now {
  margin-top: 4px;
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* (Diese .cond links wird später ausgeblendet, wenn .right vorhanden ist) */
.weather-card .cond  { margin-top: 6px; font-size: 0.85rem; color: #444; min-height: 18px; }

.weather-card .hilow {
  margin-top: 8px;
  display: inline-flex;
  gap: 12px;
  font-size: 0.92rem;
  line-height: 1.2;
}
.weather-card .hi { color: #c0392b; font-weight: 600; }
.weather-card .lo { color: #2980b9; font-weight: 600; }

.weather-card .meta  { margin-top: 1px; display: inline-flex; gap: 10px; font-size: 0.78rem; color: #666; line-height: 0.2; }

/* Sicherheitsnetz: links bündig bleiben */
.weather-card .dayline,
.weather-card .temp-now,
.weather-card .cond,
.weather-card .hilow,
.weather-card .meta {
  text-align: left;
  justify-self: start;
}

/* ----- Rechter Block (NEU): Icon oben, Zustandszeile darunter ----- */
.weather-card .right{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;                /* volle Höhe */
  width: 112px;
  display: flex;
  flex-direction: column;   /* untereinander */
  align-items: center;      /* mittig ausrichten */
  justify-content: center;  /* vertikal zentrieren */
  border-left: 1.5px solid rgba(0,0,0,0.12);
  padding-left: 12px;
  text-align: center;
}

/* Icon im rechten Block */
.weather-card .right .icon{
  font-family: 'Material Symbols Outlined';
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  font-size: 84px;
  line-height: 1;
}

/* Zustandslabel unter dem Icon (steht NUN im rechten Block) */
.weather-card .right .cond{
  margin-top: 8px;
  font-size: 0.85rem;
  color: #444;
  line-height: 1.2;
  min-height: 18px;
}

/* Alte/links platzierte cond ausblenden, sofern .right existiert */
.weather-card .right ~ .cond,
.weather-card > .cond { display: none; }

/* Vorhandene .mainrow-Layouts neutralisieren (falls vorhanden) */
.weather-card .mainrow { display: contents; }

/* ===== Responsives Verhalten ===== */
@media (max-width: 980px) {
  .map-weather-container { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  .weather-widget { padding: 12px; }
  .weather-card   { min-height: 120px; padding: 10px; padding-right: 100px; }
  .weather-card .right { width: 90px; }
  .weather-card .right .icon { font-size: 64px; }
  .weather-card .temp-now { font-size: 1.8rem; }
}

/* --- Optionale Schutznetze, falls globale Styles reinfunken --- */
.weather-card p { margin: 0; }                 /* Absätze im Wetter: keine globalen Margins */
.index-container .weather-card p { margin: 0; } /* falls Widget im index-container liegt */


/* Karten ohne aktuelle Temperatur enger & ausgeglichener darstellen */
.weather-card.no-now {
  min-height: 110px;     /* kleiner als die Heute-Karte */
  padding-top: 8px;
}

.weather-card.no-now .dayline { margin-bottom: 2px; }
.weather-card.no-now .hilow   { margin-top: 6px; }

/* Die Meta-Zeile lesbarer (dein Wert 0.2 ist zu klein) */
.weather-card .meta { line-height: 1.2; }

@media (max-width: 985px) {
  .weather-widget-container { display: none; }
}