:where(.koeln-weather, .koeln-weather-teaser) {
  --kw-bg: #f6f8fa;
  --kw-card: #ffffff;
  --kw-text: #1f2933;
  --kw-muted: #667788;
  --kw-line: #dbe3e9;
  --kw-blue: #0b6fa4;
  --kw-blue-soft: #edf6fb;
  --kw-orange: #f4a000;
  --kw-orange-soft: #fff6e7;
  --kw-warning: #b85b00;
  --kw-warning-soft: #fff1df;
  --kw-unknown: #f2f4f5;
  --kw-radius: 10px;
  color: var(--kw-text);
  font: inherit;
}

.koeln-weather,
.koeln-weather * ,
.koeln-weather-teaser,
.koeln-weather-teaser * { box-sizing: border-box; }

.koeln-weather { width: 100%; }
.weather-header { margin: 0 0 1rem; }
.weather-header h1 { margin: 0 0 .25rem; font-size: 1.75rem; line-height: 1.15; font-weight: 700; }
.weather-status { color: var(--kw-muted); font-size: .9rem; }

.weather-warning {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
  margin: 0 0 1rem;
  padding: .9rem 1rem;
  border: 1px solid #efc27c;
  border-left: 5px solid var(--kw-warning);
  border-radius: var(--kw-radius);
  background: var(--kw-warning-soft);
}
.weather-warning[hidden] { display: none; }
.weather-warning--unknown { border-color: #cfd5d9; border-left-color: #7a858d; background: var(--kw-unknown); }
.weather-warning__icon { width: 30px; height: 30px; margin-top: .05rem; }
.weather-warning strong { display: block; margin: 0 0 .18rem; font-size: 1rem; line-height: 1.25; }
.weather-warning span { font-size: .92rem; line-height: 1.4; }

.weather-today {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, .95fr);
  gap: .9rem;
  margin: 0 0 1rem;
}
.weather-hero {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  min-height: 150px;
  padding: 1.15rem 1.2rem;
  border: 1px solid #cfe1ec;
  border-radius: var(--kw-radius);
  background: linear-gradient(135deg, #f4f9fc 0%, #ffffff 100%);
}
.weather-hero__icon { width: 70px; height: 70px; }
.weather-hero__eyebrow { display: block; margin-bottom: .15rem; color: var(--kw-blue); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.weather-condition { display: block; margin-bottom: .3rem; font-size: 1.22rem; font-weight: 700; line-height: 1.25; }
.weather-temp { display: block; font-size: 1.7rem; font-weight: 700; line-height: 1.15; }

.weather-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: .55rem;
}
.weather-fact {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: center;
  min-height: 45px;
  padding: .65rem .75rem;
  border: 1px solid var(--kw-line);
  border-radius: 8px;
  background: var(--kw-card);
}
.weather-fact__icon { width: 26px; height: 26px; }
.weather-label { color: var(--kw-muted); font-size: .84rem; line-height: 1.25; }
.weather-value { font-size: 1rem; font-weight: 700; white-space: nowrap; }

.weather-editorial {
  margin: 0 0 1.5rem;
  padding: .85rem 1rem;
  border-left: 4px solid var(--kw-blue);
  border-radius: 0 8px 8px 0;
  background: var(--kw-blue-soft);
  font-size: 1rem;
  line-height: 1.5;
}

.weather-section { margin: 1.5rem 0; }
.weather-section h2 { margin: 0 0 .8rem; font-size: 1.18rem; line-height: 1.25; }

.weather-hourly {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
}
.weather-hour {
  min-width: 0;
  padding: .8rem;
  border: 1px solid var(--kw-line);
  border-radius: 8px;
  background: var(--kw-card);
}
.weather-hour__time { display: block; margin-bottom: .25rem; color: var(--kw-muted); font-size: .82rem; font-weight: 700; }
.weather-hour__temp { display: block; margin-bottom: .45rem; font-size: 1.28rem; font-weight: 700; }
.weather-hour__detail { display: flex; align-items: center; gap: .3rem; margin-top: .2rem; color: var(--kw-muted); font-size: .78rem; line-height: 1.2; }
.weather-hour__detail img { width: 16px; height: 16px; flex: 0 0 auto; }

.weather-forecast {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .7rem;
}
.weather-day {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas:
    "icon date"
    "icon condition"
    "temp temp"
    "meta meta";
  gap: .15rem .65rem;
  padding: .9rem;
  border: 1px solid var(--kw-line);
  border-radius: 9px;
  background: var(--kw-card);
}
.weather-day__icon { grid-area: icon; width: 42px; height: 42px; align-self: center; }
.weather-day__date { grid-area: date; font-size: .9rem; }
.weather-day__condition { grid-area: condition; color: var(--kw-muted); font-size: .82rem; line-height: 1.2; }
.weather-day__temp { grid-area: temp; margin-top: .5rem; font-size: 1.05rem; font-weight: 700; }
.weather-day__meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: .35rem .7rem; margin-top: .35rem; color: var(--kw-muted); font-size: .77rem; }
.weather-day__meta span { display: inline-flex; align-items: center; gap: .25rem; }
.weather-day__meta img { width: 15px; height: 15px; }

.weather-footer { margin-top: 1.5rem; padding-top: .8rem; border-top: 1px solid var(--kw-line); }
.weather-source { color: var(--kw-muted); font-size: .82rem; line-height: 1.4; }
.weather--unavailable .weather-today,
.weather--unavailable .weather-editorial,
.weather--unavailable .weather-section { display: none; }

.koeln-weather-teaser {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: .8rem;
  align-items: center;
  padding: .9rem 1rem;
  border: 1px solid var(--kw-line);
  border-radius: var(--kw-radius);
  background: var(--kw-card);
  color: inherit;
  text-decoration: none;
}
.koeln-weather-teaser:hover { border-color: var(--kw-blue); }
.weather-teaser__icon { width: 50px; height: 50px; }
.weather-teaser__content { min-width: 0; }
.weather-teaser__kicker { display: block; color: var(--kw-blue); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.weather-teaser__main { display: block; margin: .18rem 0; font-weight: 700; line-height: 1.25; }
.weather-teaser__sub { display: block; color: var(--kw-muted); font-size: .84rem; line-height: 1.3; }
.weather-teaser--warning { border-color: #efc27c; background: var(--kw-warning-soft); }
.weather-teaser--warning .weather-teaser__kicker { color: var(--kw-warning); }
.weather-teaser--unknown { background: var(--kw-unknown); }

@media (max-width: 760px) {
  .weather-today { grid-template-columns: 1fr; }
  .weather-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .weather-fact { grid-template-columns: 26px minmax(0, 1fr); grid-template-areas: "icon label" "icon value"; align-items: start; }
  .weather-fact__icon { grid-area: icon; }
  .weather-label { grid-area: label; }
  .weather-value { grid-area: value; }
  .weather-hourly { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .weather-header h1 { font-size: 1.5rem; }
  .weather-hero { grid-template-columns: 60px minmax(0, 1fr); padding: 1rem; min-height: 130px; }
  .weather-hero__icon { width: 56px; height: 56px; }
  .weather-temp { font-size: 1.5rem; }
  .weather-facts { grid-template-columns: 1fr; }
  .weather-fact { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: none; align-items: center; }
  .weather-fact__icon, .weather-label, .weather-value { grid-area: auto; }
  .weather-hourly { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weather-forecast { grid-template-columns: 1fr; }
}

/* V1.6 – Typografie und Lesbarkeit für das schmale Koeln-Magazin-Contentlayout */
.koeln-weather {
  font-size: 16px;
  line-height: 1.45;
}
.weather-header h1 { font-size: 25px; line-height: 1.2; }
.weather-status { font-size: 14px; }
.weather-warning strong { font-size: 16px; }
.weather-warning span { font-size: 14px; line-height: 1.45; }
.weather-hero__eyebrow { font-size: 12px; }
.weather-condition { font-size: 19px; line-height: 1.3; }
.weather-temp { font-size: 27px; }
.weather-label { font-size: 13px; }
.weather-value { font-size: 16px; }
.weather-editorial { font-size: 15px; line-height: 1.55; }
.weather-section h2 { font-size: 18px; }

.weather-hourly {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.weather-hour { padding: 10px; }
.weather-hour__time { font-size: 13px; }
.weather-hour__temp { font-size: 19px; }
.weather-hour__detail { font-size: 12px; line-height: 1.3; }
.weather-hour__detail img { width: 18px; height: 18px; }

.weather-forecast {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.weather-day { padding: 10px; }
.weather-day__date { font-size: 14px; }
.weather-day__condition { font-size: 12px; line-height: 1.3; }
.weather-day__temp { font-size: 16px; }
.weather-day__meta { font-size: 12px; line-height: 1.35; }
.weather-day__meta img { width: 17px; height: 17px; }
.weather-source { font-size: 12px; line-height: 1.45; }

.koeln-weather-teaser { font-size: 15px; }
.weather-teaser__kicker { font-size: 12px; }
.weather-teaser__main { font-size: 16px; }
.weather-teaser__sub { font-size: 13px; }

@media (max-width: 760px) {
  .weather-hourly { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weather-forecast { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .weather-header h1 { font-size: 22px; }
  .weather-condition { font-size: 18px; }
  .weather-temp { font-size: 25px; }
  .weather-section h2 { font-size: 17px; }
  .weather-hourly,
  .weather-forecast { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Köln-Wetter V1.7 – typografische Feinjustierung
   Nur Frontend. Keine Änderungen an Daten- oder Serverlogik. */

#wetter-koeln .kw-section-title {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  margin-top: 22px;
  margin-bottom: 10px;
}

#wetter-koeln .kw-hourly,
#wetter-koeln .kw-forecast {
  margin-top: 8px;
}

#wetter-koeln .kw-hourly-card,
#wetter-koeln .kw-forecast-card {
  padding: 12px 14px;
}

#wetter-koeln .kw-hourly-card .kw-meta,
#wetter-koeln .kw-hourly-card .kw-sub,
#wetter-koeln .kw-forecast-card .kw-meta,
#wetter-koeln .kw-forecast-card .kw-sub {
  font-size: 14px;
  line-height: 1.45;
}

#wetter-koeln .kw-hourly-card .kw-time {
  font-size: 14px;
  line-height: 1.3;
  font-weight: 700;
  margin-bottom: 5px;
}

#wetter-koeln .kw-hourly-card .kw-temp {
  font-size: 19px;
  line-height: 1.25;
  font-weight: 700;
  margin-bottom: 4px;
}

#wetter-koeln .kw-forecast-card .kw-day {
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
  margin-bottom: 4px;
}

#wetter-koeln .kw-forecast-card .kw-date {
  font-size: 13px;
  line-height: 1.35;
  margin-bottom: 6px;
}

#wetter-koeln .kw-warning {
  padding-top: 12px;
  padding-bottom: 12px;
}

#wetter-koeln .kw-editorial-text,
#wetter-koeln .kw-text {
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 767px) {
  #wetter-koeln .kw-section-title {
    font-size: 17px;
    margin-top: 18px;
  }

  #wetter-koeln .kw-hourly-card .kw-meta,
  #wetter-koeln .kw-hourly-card .kw-sub,
  #wetter-koeln .kw-forecast-card .kw-meta,
  #wetter-koeln .kw-forecast-card .kw-sub {
    font-size: 13px;
  }

  #wetter-koeln .kw-editorial-text,
  #wetter-koeln .kw-text {
    font-size: 14px;
    line-height: 1.55;
  }
}
.wetter-faq {
  margin-top: 28px;
}

.wetter-faq h2 {
  margin-bottom: 12px;
}

.wetter-faq details {
  border-top: 1px solid #d9e1e7;
  padding: 10px 0;
}

.wetter-faq details:last-child {
  border-bottom: 1px solid #d9e1e7;
}

.wetter-faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
}

.wetter-faq p {
  margin: 10px 0 4px;
  font-size: 15px;
  line-height: 1.6;
}