/* Wetter Widget – übernimmt die Schrift des Themes.
   Der farbige Streifen links zeigt die Wetterlage auf einen Blick. */

.ww-widget {
	--ww-bg: #ffffff;
	--ww-fg: #1f2a37;
	--ww-muted: #64707d;
	--ww-line: #e4e8ec;
	--ww-sky: #8fa3b5;
	width: var(--ww-breite, 145px);
	max-width: 100%;
	box-sizing: border-box;
	container-type: inline-size;
	font-size: 15px;
	line-height: 1.35;
	color: var(--ww-fg);
}

.ww-widget.ww-stil-dunkel {
	--ww-bg: #18212b;
	--ww-fg: #eef2f5;
	--ww-muted: #9aa8b5;
	--ww-line: #2b3744;
}

@media (prefers-color-scheme: dark) {
	.ww-widget.ww-stil-auto {
		--ww-bg: #18212b;
		--ww-fg: #eef2f5;
		--ww-muted: #9aa8b5;
		--ww-line: #2b3744;
	}
}

/* Farbe je Wetterlage */
.ww-sky-klar     { --ww-sky: #f2b233; }
.ww-sky-nacht    { --ww-sky: #4b5a9c; }
.ww-sky-wolken   { --ww-sky: #8fa3b5; }
.ww-sky-nebel    { --ww-sky: #b4bcc4; }
.ww-sky-regen    { --ww-sky: #3a86c8; }
.ww-sky-schnee   { --ww-sky: #9fd4ee; }
.ww-sky-gewitter { --ww-sky: #7a4fb5; }

.ww-widget .ww-card {
	position: relative;
	background: var(--ww-bg);
	border: 1px solid var(--ww-line);
	border-left: 6px solid var(--ww-sky);
	border-radius: 10px;
	padding: 14px 16px 10px;
	transition: border-color 0.6s ease;
}

.ww-widget.ww-loading .ww-card { opacity: 0.65; }

.ww-widget .ww-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
}

.ww-widget .ww-place   { font-weight: 600; }
.ww-widget .ww-updated { font-size: 0.8em; color: var(--ww-muted); white-space: nowrap; }

.ww-widget .ww-now {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 10px 0 12px;
}

.ww-widget .ww-icon { font-size: 46px; line-height: 1; }

.ww-widget .ww-temp {
	font-size: 2.6em;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.ww-widget .ww-desc { color: var(--ww-muted); margin-top: 2px; }

.ww-widget .ww-details {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 0;
	padding: 10px 0;
	border-top: 1px solid var(--ww-line);
}

.ww-widget .ww-details dt { font-size: 0.78em; color: var(--ww-muted); margin: 0; }
.ww-widget .ww-details dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.ww-widget .ww-forecast {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 10px 0 4px;
	border-top: 1px solid var(--ww-line);
}

.ww-widget .ww-forecast li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	margin: 0;
	text-align: center;
}

.ww-widget .ww-day   { font-size: 0.82em; font-weight: 600; }
.ww-widget .ww-ficon { font-size: 22px; line-height: 1.2; }
.ww-widget .ww-range { font-variant-numeric: tabular-nums; }
.ww-widget .ww-range span { color: var(--ww-muted); margin-left: 4px; }
.ww-widget .ww-rain  { font-size: 0.72em; color: var(--ww-muted); }

.ww-widget .ww-credit {
	display: block;
	margin-top: 6px;
	font-size: 0.7em;
	color: var(--ww-muted);
	text-align: right;
	text-decoration: none;
}
.ww-widget .ww-credit:hover,
.ww-widget .ww-credit:focus-visible { text-decoration: underline; }

.ww-widget .ww-error {
	margin: 0;
	padding: 12px 14px;
	border: 1px dashed var(--ww-line);
	border-radius: 10px;
	color: var(--ww-muted);
	font-size: 0.9em;
}

/* Kompaktes Layout für schmale Breiten (z. B. 145 px) */
@container (max-width: 240px) {
	.ww-widget .ww-card {
		font-size: 13px;
		padding: 9px 9px 7px;
		border-left-width: 4px;
		border-radius: 8px;
	}
	.ww-widget .ww-head { flex-direction: column; align-items: flex-start; gap: 0; }
	.ww-widget .ww-place { overflow-wrap: anywhere; }
	.ww-widget .ww-updated { font-size: 0.75em; }
	.ww-widget .ww-now { gap: 8px; margin: 6px 0 8px; }
	.ww-widget .ww-icon { font-size: 30px; }
	.ww-widget .ww-temp { font-size: 1.9em; }
	.ww-widget .ww-desc { font-size: 0.82em; }

	.ww-widget .ww-details { grid-template-columns: 1fr; gap: 2px; padding: 7px 0; }
	.ww-widget .ww-details > div { display: flex; justify-content: space-between; gap: 6px; }
	.ww-widget .ww-details dt { font-size: 0.85em; }
	.ww-widget .ww-details dd { font-size: 0.9em; }

	.ww-widget .ww-forecast { grid-template-columns: 1fr; gap: 3px; padding: 7px 0 2px; }
	.ww-widget .ww-forecast li {
		display: grid;
		grid-template-columns: 1fr auto auto;
		align-items: center;
		gap: 5px;
		text-align: left;
	}
	.ww-widget .ww-ficon { font-size: 15px; }
	.ww-widget .ww-range { font-size: 0.9em; white-space: nowrap; }
	.ww-widget .ww-range span { margin-left: 3px; }
	.ww-widget .ww-rain { display: none; }
	.ww-widget .ww-credit { font-size: 0.68em; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
	.ww-widget .ww-card { transition: none; }
}