/* Hückeswagen Wetter – ausschließlich auf die Wetterbausteine begrenzt. */
.hgw { max-width: 640px; margin: 20px auto; color: #17212d; font-family: inherit; line-height: 1.5; }
.hgw, .hgw * { box-sizing: border-box; }
.hgw p { margin: 0; }
/* Wetterseite: breitere Darstellung innerhalb der verfügbaren Seitenbreite. */
.hgw[data-hgw="full"] { width: 100%; max-width: 960px; container-type: inline-size; }
.hgw .hgw-icon { display: block; width: 28px; height: 28px; flex-shrink: 0; color: #1e73be; }
/* Lokales Hückeswagen-Foto mit dunklem Verlauf für weiße Schrift. */
.hgw .hgw-current { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 280px; padding: 28px 12px; border-radius: 22px; text-align: center; color: #fff; background: linear-gradient(180deg,rgba(8,24,38,.38),rgba(8,24,38,.82)),url('hueckeswagen.jpg') 42% center / cover; }
.hgw .hgw-current .hgw-icon { width: 62px; height: 62px; color: #fff; }
.hgw .hgw-temperature { font-size: 64px; font-weight: 500; line-height: 1.15; letter-spacing: -2px; }
.hgw .hgw-condition { font-size: 19px; margin: 6px 0; }
.hgw .hgw-current p, .hgw .hgw-temperature { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
/* Niederschlag und Wind in zwei gleich breiten Karten. */
.hgw .hgw-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 24px; }
.hgw .hgw-fact { padding: 16px; border-radius: 16px; background: #fff; border: 1px solid #e5e9ed; }
.hgw .hgw-fact strong { display: block; font-size: 21px; font-weight: 600; margin-top: 6px; }
.hgw .hgw-muted { color: #596874; font-size: 13px; }
/* Stunden- und Tagesvorhersage. */
.hgw .hgw-section { background: #fff; padding: 18px 14px; border: 1px solid #e5e9ed; border-radius: 18px; margin-top: 16px; }
.hgw .hgw-section h2 { font-size: 18px; line-height: 1.3; margin: 0 0 18px; color: #17212d; }
.hgw .hgw-hours { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
.hgw .hgw-hour { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 14px; }
.hgw .hgw-rain { color: #17619f; font-size: 13px; white-space: nowrap; }
.hgw .hgw-note { font-size: 12px; color: #596874; margin-top: 16px; }
.hgw .hgw-day { display: grid; grid-template-columns: minmax(85px,1.2fr) 42px minmax(70px,1fr) minmax(70px,1fr) minmax(80px,1fr); align-items: center; gap: 7px; padding: 13px 0; border-top: 1px solid #e5e9ed; font-size: 14px; }
.hgw .hgw-day > span:first-child { overflow-wrap: anywhere; }
/* Größeres Tagessymbol und beschriftete Sonnen-/Regenwerte. */
.hgw .hgw-day > .hgw-icon { width: 32px; height: 32px; stroke-width: 2; }
.hgw .hgw-day-sun, .hgw .hgw-day-rain { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.hgw .hgw-day-sun .hgw-icon { width: 21px; height: 21px; color: #b87500; }
.hgw .hgw-day-rain .hgw-icon { width: 19px; height: 21px; color: #1e73be; }
.hgw .hgw-range { text-align: right; white-space: nowrap; }
/* Startseitenanzeige: gesamter Baustein verlinkt auf die ausgewählte Wetterseite. */
.hgw .hgw-teaser { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #e5e9ed; border-radius: 18px; padding: 18px; color: #17212d; text-decoration: none; }
.hgw a.hgw-teaser:hover { border-color: #1e73be; background: #f1f7fc; }
.hgw .hgw-teaser-text { flex: 1; min-width: 0; }
.hgw .hgw-teaser-text strong, .hgw .hgw-teaser-text .hgw-muted { display: block; }
.hgw .hgw-arrow { font-size: 28px; color: #1e73be; }
.hgw a:focus-visible { outline: 3px solid #1e73be; outline-offset: 3px; }
/* Zeitstempel, Quellenangabe und ehrliche Fehler-/Alterungsanzeige. */
.hgw .hgw-updated { margin-top: 14px; font-size: 12px; text-align: center; color: #596874; }
.hgw .hgw-source { margin-top: 5px; text-align: center; font-size: 11px; color: #596874; }
.hgw .hgw-source a { color: #17619f; text-decoration: underline; }
.hgw .hgw-source-note { display: block; }
.hgw .hgw-unavailable, .hgw .hgw-loading { padding: 18px; border-radius: 16px; background: #fff; border: 1px solid #e5e9ed; }
.hgw .hgw-stale { margin-top: 14px; color: #754300; background: #fff3d6; padding: 12px; border-radius: 10px; font-size: 13px; }
/* Zusätzliche Wetterbeschreibung für Screenreader. */
.hgw .hgw-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* Kleine Displays: kompakte Abstände ohne horizontales Scrollen. */
@media (max-width: 380px) {
    .hgw .hgw-section { padding: 16px 10px; }
    
    .hgw .hgw-fact { padding: 12px; }
}

/* Kurzer Startseitenblock: Quellenzeile ohne zusätzliche Absatzabstände. */
/* Oberen Absatzabstand der Startseitenkarte teilweise ausgleichen. */
.hgw[data-hgw="compact"] { margin: -8px 0 12px; }
.hgw[data-hgw="compact"] .hgw-source { margin: 5px 0 0; padding: 0; line-height: 1.35; text-align: left; }



/* Schmale Container: Werte übersichtlich in einer zweiten Zeile. */
@container (max-width: 480px) {
.hgw .hgw-day { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.hgw .hgw-day > span:first-child { grid-column: 1 / 3; }
.hgw .hgw-day > .hgw-icon { grid-column: 3; justify-self: end; }
.hgw .hgw-day-sun { grid-column: 1; }
.hgw .hgw-day-rain { grid-column: 2; }
.hgw .hgw-range { grid-column: 3; }
}

/* Handy: Wetterbild ohne oberen Widget-Abstand und ohne Rundungen. */
@media (max-width: 767px) {
    .hgw[data-hgw="full"] {
        margin-top: 0;
    }

    .hgw[data-hgw="full"] .hgw-current {
        border-radius: 0;
    }
}