/* =========================================================================
   Highlights Schwyz – Wetterportal (/wetter/)
   Ergänzt das Haupt-Design-System (main.css, zuerst geladen). Nutzt dessen
   Design-Tokens (--c-*, --sp-*, --fs-*, --radius*, --shadow*).
   Wegfarben-Invariante gilt hier NICHT (kein Signalisationsbezug); die
   Wetter-Akzente nutzen die CI (Rot #e8403d / Schwarz).
   ========================================================================= */

/* --- Kopf der Wetterseite ------------------------------------------------ */
.wx-head { padding-block: var(--sp-6) var(--sp-5); }
.wx-head__sub { color: var(--c-text-soft); font-size: var(--fs-sm); margin-top: var(--sp-2); }
.wx-lead {
  font-size: var(--fs-md); line-height: var(--lh-snug); color: var(--c-ink);
  margin-top: var(--sp-4); max-width: var(--measure);
  border-left: 3px solid var(--c-accent); padding-left: var(--sp-4);
}

/* --- Sektions-Titel schlank --------------------------------------------- */
.wx-section { padding-block: var(--sp-6); }
.wx-section + .wx-section { border-top: 1px solid var(--c-line); }
.wx-section__title { font-size: var(--fs-lg); margin-bottom: var(--sp-4); }
.wx-note { color: var(--c-text-soft); font-size: var(--fs-xs); margin-top: var(--sp-3); }
.wx-note a { color: inherit; }

/* --- Aktuelles Wetter (F2) ---------------------------------------------- */
.wx-now {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4) var(--sp-6);
  align-items: center;
  background: var(--c-bg-alt); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm);
}
.wx-now__temp { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3rem, 2rem + 6vw, 4.5rem); line-height: 1; letter-spacing: -0.03em; }
.wx-now__icon { width: 68px; height: 68px; }
.wx-now__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-5); }
.wx-metric { display: flex; flex-direction: column; }
.wx-metric__k { font-size: var(--fs-xs); color: var(--c-text-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.wx-metric__v { font-size: var(--fs-md); font-weight: 600; }
.wx-now__full { grid-column: 1 / -1; }

/* --- Stundenprognose (F3) ----------------------------------------------- */
.wx-hours { display: flex; gap: var(--sp-3); overflow-x: auto; padding-bottom: var(--sp-3);
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.wx-hour {
  scroll-snap-align: start; flex: 0 0 auto; width: 76px; text-align: center;
  border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-3) var(--sp-2);
  background: var(--c-paper);
}
.wx-hour__t { font-size: var(--fs-xs); color: var(--c-text-soft); }
.wx-hour__icon { width: 34px; height: 34px; margin: var(--sp-2) auto; }
.wx-hour__temp { font-weight: 700; }
.wx-hour__p { font-size: var(--fs-xs); color: var(--c-lake); min-height: 1.2em; }
.wx-hour__w { font-size: var(--fs-xs); color: var(--c-text-soft); }

/* --- 5-Tages-Prognose (F4) ---------------------------------------------- */
.wx-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-3); }
.wx-day { border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-4) var(--sp-3);
  text-align: center; background: var(--c-paper); }
.wx-day__name { font-weight: 700; }
.wx-day__date { font-size: var(--fs-xs); color: var(--c-text-soft); }
.wx-day__icon { width: 42px; height: 42px; margin: var(--sp-3) auto; }
.wx-day__temp { font-weight: 700; }
.wx-day__temp .min { color: var(--c-text-soft); font-weight: 500; }
.wx-day__meta { font-size: var(--fs-xs); color: var(--c-text-soft); margin-top: var(--sp-2); }
.wx-chart { margin-top: var(--sp-5); }
.wx-chart svg { width: 100%; height: auto; display: block; }
.wx-chart figcaption { font-size: var(--fs-xs); color: var(--c-text-soft); margin-top: var(--sp-2); }

/* --- Winterblock (F5) --------------------------------------------------- */
.wx-winter { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); }
.wx-panel { border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-5); background: var(--c-paper); }
.wx-danger { display: flex; align-items: center; gap: var(--sp-4); }
.wx-danger__level { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-2xl);
  width: 3ch; text-align: center; border-radius: var(--radius); padding: var(--sp-2) 0; }
/* offizielle EAWS-Gefahrenstufen-Farben */
.lvl-1 { background: #ccff66; color: #1a1817; }
.lvl-2 { background: #ffff00; color: #1a1817; }
.lvl-3 { background: #ff9900; color: #1a1817; }
.lvl-4 { background: #ff0000; color: #fff; }
.lvl-5 { background: #ff0000; color: #fff; border: 3px solid #1a1817; }

/* --- Beschreibung + Nachbarn (F8) --------------------------------------- */
.wx-neighbours { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.wx-chip { display: inline-flex; align-items: center; gap: var(--sp-2);
  border: 1px solid var(--c-line); border-radius: 999px; padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm); text-decoration: none; color: var(--c-ink); background: var(--c-paper); }
.wx-chip:hover { border-color: var(--c-accent); }

/* --- Disclaimer / Attribution (F10) ------------------------------------- */
.wx-disclaimer { background: var(--c-bg-alt); border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5); font-size: var(--fs-sm); color: var(--c-text-soft); }
.wx-source { font-size: var(--fs-xs); color: var(--c-text-soft); }

/* --- Landing / Region: Ortsliste ---------------------------------------- */
.wx-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3); }
.wx-index__item { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
  border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4);
  text-decoration: none; color: var(--c-ink); background: var(--c-paper); }
.wx-index__item:hover { border-color: var(--c-accent); box-shadow: var(--shadow-sm); }
.wx-index__name { font-weight: 600; }
.wx-index__meta { font-size: var(--fs-xs); color: var(--c-text-soft); }
.wx-index__temp { font-weight: 700; display: flex; align-items: center; gap: var(--sp-2); }
.wx-index__temp svg { width: 26px; height: 26px; }
.wx-filter { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.wx-filter button { border: 1px solid var(--c-line); background: var(--c-paper); border-radius: 999px;
  padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); }
.wx-filter button[aria-pressed="true"] { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }

@media (max-width: 560px) {
  .wx-now { grid-template-columns: 1fr; text-align: center; }
  .wx-now__grid { grid-template-columns: repeat(2, 1fr); }
}