/* BOSolar Spendenstand – animated battery. Sizes scale with the container (page column or sidebar). */
.bosolar-akku {
	container-type: inline-size;
	max-width: 820px;
	margin: 0 auto;
	padding: 1em 0;
	text-align: center;
	line-height: 1.2;
	color: #1b3a26;
}

.bosolar-akku__title {
	margin-bottom: 1.1em;
	font-size: clamp(12px, 3.4cqw, 28px);
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #4b6b56;
}

.bosolar-akku__battery {
	display: flex;
	align-items: center;
}

.bosolar-akku__cell {
	flex: 1;
	aspect-ratio: 2.85 / 1;
	box-sizing: border-box;
	padding: clamp(3px, 1.5cqw, 13px);
	border: clamp(4px, 2.2cqw, 18px) solid #24412f;
	border-radius: clamp(10px, 4.5cqw, 38px);
	background: #fff;
	box-shadow: 0 10px 28px rgba(36, 65, 47, .14);
}

.bosolar-akku__fill {
	position: relative;
	overflow: hidden;
	height: 100%;
	max-width: 100%;
	border-radius: clamp(5px, 2.6cqw, 22px);
	background: linear-gradient(180deg, #56d677 0%, #23a94c 100%);
}

/* Light sweep once fully "charged" */
.bosolar-akku__fill::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .5) 50%, transparent 75%);
	transform: translateX(-110%);
}

.bosolar-akku.is-charged .bosolar-akku__fill::after {
	animation: bosolar-akku-shine 3.5s ease-in-out .4s infinite;
}

@keyframes bosolar-akku-shine {
	0%       { transform: translateX(-110%); }
	55%, 100% { transform: translateX(110%); }
}

.bosolar-akku__cap {
	flex: 0 0 auto;
	width: clamp(5px, 4.4cqw, 36px);
	height: clamp(14px, 12.8cqw, 105px);
	border-radius: 0 clamp(3px, 1.4cqw, 12px) clamp(3px, 1.4cqw, 12px) 0;
	background: #24412f;
}

.bosolar-akku__value {
	margin-top: .35em;
	font-size: clamp(20px, 6.6cqw, 54px);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* Amount and goal each stay on one line; in a narrow sidebar the goal wraps below. */
.bosolar-akku__now,
.bosolar-akku__goal {
	white-space: nowrap;
}

.bosolar-akku__goal {
	font-size: .62em;
	font-weight: 400;
	color: #6b8072;
}

.bosolar-akku__percent {
	margin-top: .5em;
	font-size: clamp(13px, 2.7cqw, 22px);
	font-variant-numeric: tabular-nums;
	color: #6b8072;
}

.bosolar-akku__date {
	margin-top: .4em;
	font-size: clamp(11px, 2cqw, 16px);
	color: #8a9a8f;
}

/* Until the script takes over, start from empty so there is no flash of the final state. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	.bosolar-akku:not(.is-init) .bosolar-akku__fill { width: 0 !important; }
	.bosolar-akku:not(.is-init) .bosolar-akku__value,
	.bosolar-akku:not(.is-init) .bosolar-akku__percent { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
	.bosolar-akku.is-charged .bosolar-akku__fill::after { animation: none; }
}