/* Wetter */

.wm-weather-current__details :is(dt, dd) {
  display: inline;
}

.wm-weather-current__details > div {
  margin: 0;
}

@media(min-width: 64em) {
  .wm-weather-current__infos,
  .wm-weather-current__text {
    width: calc(50% - (var(--stack-spacing) / 2));
  }
}

.wm-weather-intraday__item {
  padding: 10px 20px;
  flex: 1 0 6rem;
}

.wm-weather-intraday__item--active {
  background: var(--wm-color-nebelgrau-light);
}

.wm-weather-high-temp {
  font-size: 2em;
}

.wm-weather-high-temp--today {
  font-size: 3em;
}

.wm-weather-high-temp--water {
  font-size: 1.3em;
}

.wm-weather-intraday__time {
  font-size: 0.9em;
}

.wm-weather-intraday__temp {
  line-height: 1.5;
}

.wm-weather-temp {
  font-variation-settings: "wght" 640;
}

.wm-weather-forecast--high {
  font-size: 2em;
}

.wm-weather-forecast-inline--high {
  font-size: 1.2em;
}

.wm-weather-inline {
  --tab-border-width: 0;
  --tabs-spacing: var(--wm-spacing-s);
  --tabs-gap: var(--wm-spacing-s);
  
  --tab-font-weight: normal;
  --tab-font-variation-settings: "wght" 400;
  --tab-background-color: var(--wm-color-weiss);
  --tab-background-color--active: var(--wm-color-nebelgrau-light);
  
  --tabpanel-border-width: 0;
}

.wm-weather-beaufort {
  display: block;
  width: calc(100% / (12 / var(--beaufort-scale)));
  padding: 0.5rem;
  box-sizing: content-box;
}

@container style(--beaufort-scale: 0) {
    .wm-weather-beaufort {
        width: 100%;
    }
}

@container style(--beaufort-scale: 1) {
    .wm-weather-beaufort {
        background: oklch(from var(--wm-color-flieder) 97% c h);
    }
}

@container style(--beaufort-scale: 2) {
    .wm-weather-beaufort {
        background: oklch(from var(--wm-color-flieder) 92% c h);
    }
}

@container style(--beaufort-scale: 3) {
    .wm-weather-beaufort {
        background: oklch(from var(--wm-color-flieder) 87% c h);
    }
}

@container style(--beaufort-scale: 4) {
    .wm-weather-beaufort {
        background: oklch(from var(--wm-color-flieder) 82% c h);
    }
}

@container style(--beaufort-scale: 5) {
    .wm-weather-beaufort {
        background: oklch(from var(--wm-color-flieder) l c h);
    }
}

@container style(--beaufort-scale: 6) {
    .wm-weather-beaufort {
        background: oklch(from var(--wm-color-flieder) 72% c h);
    }
}

@container style(--beaufort-scale: 7) {
    .wm-weather-beaufort {
        background: oklch(from var(--wm-color-flieder) 67% c h);
    }
}

@container style(--beaufort-scale: 8) {
    .wm-weather-beaufort {
        background: oklch(from var(--wm-color-flieder) 62% c h);
        color: var(--wm-color-weiss);
    }
}

@container style(--beaufort-scale: 9) {
    .wm-weather-beaufort {
        background: oklch(from var(--wm-color-flieder) 57% c h);
        color: var(--wm-color-weiss);
    }
}

@container style(--beaufort-scale: 10) {
    .wm-weather-beaufort {
        background: oklch(from var(--wm-color-flieder) 52% c h);
        color: var(--wm-color-weiss);
    }
}

@container style(--beaufort-scale: 11) {
    .wm-weather-beaufort {
        background: oklch(from var(--wm-color-flieder) 47% c h);
        color: var(--wm-color-weiss);
    }
}
@container style(--beaufort-scale: 12) {
    .wm-weather-beaufort {
        background: oklch(from var(--wm-color-flieder) 42% c h);
        color: var(--wm-color-weiss);
    }
}