/* Wetter-Widget Styling */
#weather-widget {
	display: flex;
	flex-direction: column;
	width: auto; /* Anpassung an Inhalt */
	min-width: 220px; /* Etwas vergrößert für bessere Darstellung */
	background: transparent; /* blend into header */
	padding: 0; /* header grid manages spacing */
	border-radius: 0;
	/* removed border and shadow per request */
	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	transition: all 0.3s ease;
	box-shadow: none;
	border: none;
}

/* Erste Zeile mit Airport und Temperatur */
.weather-primary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 0;
}

/* Zweite Zeile mit zusätzlichen Wetterdaten */
.weather-secondary {
	display: flex;
	align-items: center;
	justify-content: space-between; /* Gleichmäßige Verteilung */
	font-size: 0.875rem;
	color: #64748b;
	margin-top: 0;
	flex-wrap: nowrap;
	height: 1.2em;
	line-height: 1.2;
	width: 100%; /* Volle Breite nutzen */
}

/* Gemeinsame Basisstile für alle Elemente in der zweiten Zeile */
.weather-secondary > span {
	display: inline-block;
	white-space: nowrap;
	font-size: 0.875rem;
	font-weight: normal;
	color: #64748b;
}

/* Airport Code */
.weather-airport {
	font-weight: 500; /* reduced for lighter title weight */
	color: #3a4354;
	font-size: 0.95rem; /* Kompakter: zuvor 1rem */
	min-width: 40px;
}

/* Temperatur Container */
.weather-data {
	display: flex;
	align-items: center;
	gap: 6px;
}

#weather-temp {
	font-weight: 600;
	font-size: 1.05rem; /* Kompakter: zuvor 1.125rem */
	min-width: 45px;
	text-align: right;
	margin-right: 8px;
	color: #3a4354;
}

#weather-icon {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #64748b;
}

/* Korrektur für den "Clear" Text im Wetter-Widget */
.weather-description-text {
	text-align: center;
	margin: 0 auto;
	padding: 0 2px;
	/* WICHTIG: kein opacity hier */
}

/* Wind-Informationen */
#weather-wind {
	margin-right: 12px;
}

.weather-wind-icon {
	display: inline-block;
	font-size: 1.1rem; /* Kompakter: zuvor 1.25rem */
	margin-right: 3px;
	transform-origin: center;
	transition: transform 0.3s ease;
	font-weight: bold;
}

/* Wind-Tooltips */
.weather-wind-tooltip {
	position: relative;
	cursor: help;
}

.weather-wind-tooltip:hover::after {
	content: "Windrichtung und -geschwindigkeit";
	position: absolute;
	bottom: 100%;
	left: 0;
	background: rgba(58, 67, 84, 0.9);
	color: white;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	white-space: nowrap;
	z-index: 100;
}

/* Sichtweite-Informationen */
#weather-visibility {
	margin-left: 12px;
}

/* Wetterbeschreibung */
#weather-description {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: none; /* Kein festes Maximum mehr */
	position: relative;
	text-align: center; /* Zentriert den Text */
}

/* Lade-Anzeige */
@keyframes pulse {
	0% {
		opacity: 0.6;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0.6;
	}
}

#weather-description:contains("Laden..."),
#weather-description:contains("Verbinde...") {
	animation: pulse 1.5s infinite;
}

/* Laden-Animation - nutzt nun eine CSS-Klasse statt eines Inline-Styles */
#weather-description.loading {
	opacity: 0.7;
	animation: pulse 1.5s infinite;
}

/* Verstecktes Element */
.weather-secondary > span.hidden {
	display: none !important;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
	.weather-secondary {
		flex-direction: column;
		gap: 2px;
	}
}

@media (max-width: 640px) {
	#weather-widget {
		width: auto; /* Automatische Breite */
		min-width: 160px;
		padding: 6px 10px;
	}

	.weather-airport {
		font-size: 0.9rem;
	}

	#weather-temp {
		font-size: 0.9rem;
	}
}

/* Dark Mode Unterstützung */
.dark-mode #weather-widget {
	background: transparent !important;
	color: var(--dark-text) !important;
	border: none !important;
}

.dark-mode .weather-airport,
.dark-mode #weather-temp,
.dark-mode #weather-visibility,
.dark-mode .weather-description-text,
.dark-mode .weather-secondary,
.dark-mode #weather-icon {
	color: var(--dark-text) !important;
}