/* ==========================================================================
   Wetter für 7 Tage (13.09.2026)

   Das Fenster hinter den drei Wetterkacheln im Hero. Eigene Datei statt
   Anhang an munta.css, damit parallele Arbeiten an munta.css sich nicht
   gegenseitig überschreiben (siehe Deploy-Falle). Geladen wird sie nur,
   wenn es das Fenster auch gibt.

   Aussehen wie das Spritpreis-Fenster: Navy-Kopf, weiße Karte.
   ========================================================================== */

/* ---------- Die Kacheln werden anklickbar – sonst bleiben sie, wie sie sind ---------- */

.vorschau__tag { position: relative; }

.vorschau__knopf {
  position: absolute; inset: 0;
  margin: 0; padding: 0;
  border: 0; border-radius: inherit;
  background: transparent;
  cursor: pointer;
}
.vorschau__knopf:hover { background: rgba(255, 255, 255, .08); }
.vorschau__knopf:focus-visible { outline: 3px solid var(--brand-orange, #FE8A00); outline-offset: 2px; }

/* ---------- Das Fenster ---------- */

.wetter-fenster {
  width: min(30rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--surface, #fff);
  color: var(--text, #001531);
  text-align: left;
  text-shadow: none;
  letter-spacing: normal;
  text-transform: none;
  font-size: 1rem;
  box-shadow: 0 24px 60px rgba(0, 21, 49, .35);
  overflow: auto;
}
.wetter-fenster::backdrop { background: rgba(0, 21, 49, .5); backdrop-filter: blur(2px); }

.wetter-fenster__kopf {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1rem;
  background:
    radial-gradient(100% 160% at 100% 0%, rgba(254, 138, 0, .35) 0%, rgba(254, 138, 0, 0) 60%),
    linear-gradient(135deg, #001531 0%, #176B9A 130%);
  color: #fff;
}
.wetter-fenster__icon {
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem; flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
}
.wetter-fenster__kopf-svg { width: 1.45rem; height: 1.45rem; color: #fff; }
.wetter-fenster__titel { margin: 0; font-size: 1.2rem; line-height: 1.15; color: #fff; flex: 1; }
.wetter-fenster__titel span {
  display: block;
  font-size: .72rem; font-weight: 500; color: rgba(255, 255, 255, .78);
}
.wetter-fenster__zu {
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.wetter-fenster__zu:hover { background: rgba(255, 255, 255, .28); }

/* ---------- Die Tage ---------- */

.wetter-woche { list-style: none; margin: 0; padding: .6rem .75rem; display: grid; gap: .35rem; }

.wetter-woche__tag {
  display: grid;
  grid-template-columns: 5.6rem 2.4rem 1fr;
  grid-template-areas:
    "wann symbol grade"
    "wann symbol mehr";
  align-items: center;
  column-gap: .6rem;
  padding: .5rem .7rem;
  border-radius: 10px;
  background: #F4F7FA;
  border: 1px solid rgba(0, 21, 49, .06);
  transition: background-color .3s, box-shadow .3s;
}
.wetter-woche__tag--tendenz { background: #FAFBFC; }
.wetter-woche__tag--tendenz .wetter-woche__svg,
.wetter-woche__tag--tendenz .wetter-woche__grade { opacity: .85; }

/* Der angeklickte Tag */
.wetter-woche__tag.ist-gewaehlt {
  background: #FFF4E5;
  border-color: rgba(254, 138, 0, .45);
  box-shadow: inset 3px 0 0 #FE8A00;
}

.wetter-woche__wann { grid-area: wann; display: grid; line-height: 1.2; }
.wetter-woche__wann strong { font-size: .92rem; font-weight: 750; }
.wetter-woche__wann small { font-size: .72rem; color: var(--text-muted, #5F6874); }
.wetter-woche__we { color: #176B9A; }

.wetter-woche__symbol { grid-area: symbol; display: grid; justify-items: center; line-height: 0; }
.wetter-woche__svg { width: 2rem; height: 2rem; color: #001531; }
.wetter-woche__symbol small { display: none; }

.wetter-woche__grade {
  grid-area: grade;
  display: grid; grid-template-columns: 2.2rem 1fr 2.2rem; align-items: center; gap: .45rem;
  font-variant-numeric: tabular-nums;
}
.wetter-woche__min { text-align: right; font-size: .86rem; color: var(--text-muted, #5F6874); }
.wetter-woche__max { font-size: .98rem; font-weight: 800; }

.wetter-woche__skala {
  position: relative; height: 7px;
  border-radius: 4px;
  background: rgba(0, 21, 49, .08);
}
.wetter-woche__skala span {
  position: absolute; top: 0; bottom: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, #5AA9D6 0%, #F2C14E 60%, #FE8A00 100%);
}

.wetter-woche__mehr {
  grid-area: mehr;
  display: flex; flex-wrap: wrap; gap: .15rem .8rem;
  margin-top: .15rem;
  font-size: .72rem; color: var(--text-muted, #5F6874);
}
.wetter-woche__mehr > span { display: inline-flex; align-items: center; gap: .2rem; white-space: nowrap; }
.wetter-woche__mini { width: .95rem; height: .95rem; }
.wetter-woche__nass { color: #176B9A; font-weight: 700; }

.wetter-woche__trenner {
  display: flex; align-items: center; gap: .5rem;
  margin: .25rem 0 0;
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted, #5F6874);
}
.wetter-woche__trenner::before,
.wetter-woche__trenner::after { content: ""; flex: 1; height: 1px; background: rgba(0, 21, 49, .12); }

.wetter-fenster__hinweis,
.wetter-fenster__quelle {
  margin: 0; padding: 0 1rem;
  font-size: .72rem; line-height: 1.4; color: var(--text-muted, #5F6874);
}
.wetter-fenster__hinweis { padding-top: .1rem; }
.wetter-fenster__quelle { padding-top: .35rem; padding-bottom: .9rem; }
.wetter-fenster__quelle a { color: inherit; text-decoration: underline; }

@media (max-width: 479px) {
  .wetter-woche { padding: .5rem; }
  .wetter-woche__tag { grid-template-columns: 4.4rem 2rem 1fr; column-gap: .45rem; padding: .45rem .55rem; }
  .wetter-woche__svg { width: 1.75rem; height: 1.75rem; }
  .wetter-woche__grade { grid-template-columns: 1.8rem 1fr 1.9rem; gap: .35rem; }
}

@media (min-width: 480px) {
  .wetter-woche__symbol small {
    display: block; margin-top: .25rem;
    font-size: .62rem; line-height: 1.1; color: var(--text-muted, #5F6874);
    text-align: center; white-space: nowrap;
  }
  .wetter-woche__tag { grid-template-columns: 6.2rem 4.2rem 1fr; }
}