/* Infografik „Flächenverluste".
   Nutzt die gemeinsamen Tokens aus basis.css (inkl. Dark-Mode). Die Serien-
   Farben liegen als Custom Properties vor, damit grafik.js sie auslesen kann
   und der Dark-Mode sie überschreiben darf. */

.rwif-fv {
	--fv-c-weltweit: #1E5C3C;
	--fv-c-brasilien: #C4632A;
	--fv-c-indonesien: #2F6F9E;
	--fv-c-drkongo: #B0862F;
	--fv-c-gfw: #1E5C3C;
	--fv-c-inpe: #C4632A;
	--fv-c-mapbiomas: #2F6F9E;
	--fv-fire: #F07A1E;
	--fv-gone: #5A2A10;
	--fv-intact: #2D7A3E;
	--fv-bar: #C4472A;
}

@media (prefers-color-scheme: dark) {
	.rwif-fv {
		--fv-c-weltweit: #56AA78;
		--fv-c-brasilien: #E08A54;
		--fv-c-indonesien: #5C9BC8;
		--fv-c-drkongo: #D2A24C;
		--fv-c-gfw: #56AA78;
		--fv-c-inpe: #E08A54;
		--fv-c-mapbiomas: #5C9BC8;
		--fv-intact: #3F9161;
		--fv-gone: #7A4020;
	}
}

/* — Umschalter — */
.rwif-fv-switchbar {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	border-top: 1px solid var(--rwif-line);
	border-bottom: 1px solid var(--rwif-line);
	padding: 16px 0;
}
.rwif-fv-switchgrp { display: flex; flex-direction: column; gap: 8px; }
.rwif-fv-switchgrp-lbl {
	font-family: var(--rwif-ui);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--rwif-ink-faint);
}
.rwif-fv-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.rwif-fv-chip {
	font-family: var(--rwif-ui);
	font-size: 14px;
	padding: 6px 14px;
	border: 1.5px solid var(--rwif-line);
	border-radius: 18px;
	background: var(--rwif-on-ground);
	color: var(--rwif-ink-soft);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	transition: background .12s, color .12s, border-color .12s;
}
.rwif-fv-chip .rwif-fv-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .5; }
.rwif-fv-chip.on { color: #fff; border-color: transparent; }
.rwif-fv-chip.on .rwif-fv-dot { opacity: 1; background: rgba(255, 255, 255, .9); }
.rwif-fv-chip[data-k="weltweit"].on { background: var(--fv-c-weltweit); }
.rwif-fv-chip[data-k="brasilien"].on { background: var(--fv-c-brasilien); }
.rwif-fv-chip[data-k="indonesien"].on { background: var(--fv-c-indonesien); }
.rwif-fv-chip[data-k="drkongo"].on { background: var(--fv-c-drkongo); }
.rwif-fv-chip[data-k="gfw"].on { background: var(--fv-c-gfw); }
.rwif-fv-chip[data-k="inpe"].on { background: var(--fv-c-inpe); }
.rwif-fv-chip[data-k="mapbiomas"].on { background: var(--fv-c-mapbiomas); }
.rwif-fv-chip.disabled { opacity: .4; cursor: not-allowed; }

/* — Diagramm — */
.rwif-fv-chartsection { display: flex; flex-direction: column; gap: 10px; }
.rwif-fv-charttitle { font-family: var(--rwif-ui); font-size: 13px; color: var(--rwif-ink-soft); }
#rwif-fv-chart { width: 100%; height: auto; display: block; overflow: visible; }
.rwif-fv-chart-grid line { stroke: var(--rwif-line); stroke-width: 1; }
.rwif-fv-chart-axis text { font-family: var(--rwif-ui); font-size: 13px; fill: var(--rwif-ink-soft); }
.rwif-fv-chart-title-y { font-family: var(--rwif-ui); font-size: 13px; fill: var(--rwif-ink-soft); font-weight: 600; }
.rwif-fv-bar { transition: opacity .12s; cursor: default; }
.rwif-fv-bar:hover { opacity: .8; }
/* Balkenfarbe je Serie über Klassen, damit der Dark-Mode sie überschreiben kann. */
.rwif-fv-bar.fv-weltweit { fill: var(--fv-c-weltweit); }
.rwif-fv-bar.fv-brasilien { fill: var(--fv-c-brasilien); }
.rwif-fv-bar.fv-indonesien { fill: var(--fv-c-indonesien); }
.rwif-fv-bar.fv-drkongo { fill: var(--fv-c-drkongo); }
.rwif-fv-bar.fv-gfw { fill: var(--fv-c-gfw); }
.rwif-fv-bar.fv-inpe { fill: var(--fv-c-inpe); }
.rwif-fv-bar.fv-mapbiomas { fill: var(--fv-c-mapbiomas); }
.rwif-fv-note { font-family: var(--rwif-ui); font-size: 11px; color: var(--rwif-ink-faint); font-style: italic; margin: 0; }

.rwif-fv-databtn {
	align-self: flex-start;
	font-family: var(--rwif-ui);
	font-size: 12px;
	color: var(--rwif-forest);
	background: var(--rwif-on-ground);
	border: 1.5px solid var(--rwif-line);
	border-radius: 18px;
	padding: 6px 15px;
	cursor: pointer;
}
.rwif-fv-databtn:hover { border-color: var(--rwif-forest); }
.rwif-fv-datatable { overflow-x: auto; }
.rwif-fv-datatable table { border-collapse: collapse; font-family: var(--rwif-ui); font-size: 12px; width: 100%; }
.rwif-fv-datatable th, .rwif-fv-datatable td { border: 1px solid var(--rwif-line); padding: 4px 9px; text-align: right; white-space: nowrap; }
.rwif-fv-datatable th:first-child, .rwif-fv-datatable td:first-child { text-align: left; }
.rwif-fv-datatable thead th { background: var(--rwif-paper-2); color: var(--rwif-ink); font-weight: 700; }
.rwif-fv-datatable td.rwif-fv-empty { color: var(--rwif-ink-faint); }
.rwif-fv-datanote { font-family: var(--rwif-ui); font-size: 11px; color: var(--rwif-ink-soft); line-height: 1.55; margin: 0; }
.rwif-fv-datanote strong { color: var(--rwif-ink); }

/* — Counter — */
.rwif-fv-counter {
	background: var(--rwif-paper-2);
	border: 1px solid var(--rwif-line);
	border-radius: 10px;
	padding: 22px 20px 16px;
}
.rwif-fv-counter-ey {
	font-family: var(--rwif-ui);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fv-c-brasilien);
	font-weight: 700;
	text-align: center;
	margin: 0 0 4px;
}
.rwif-fv-counter-head { display: flex; justify-content: center; margin-bottom: 12px; }
.rwif-fv-counter-src {
	font-family: var(--rwif-ui);
	font-size: 12px;
	color: #fff;
	background: var(--rwif-forest);
	padding: 3px 11px;
	border-radius: 3px;
}
.rwif-fv-big {
	font-family: var(--rwif-ui);
	font-size: clamp(44px, 9vw, 64px);
	font-weight: 700;
	color: var(--rwif-forest);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	text-align: center;
}
.rwif-fv-big-unit { font-family: var(--rwif-ui); font-size: 15px; color: var(--rwif-ink-soft); text-align: center; margin-top: 6px; }
.rwif-fv-unit-hl { color: var(--fv-c-brasilien); font-weight: 700; }
.rwif-fv-progress { margin: 16px 0 14px; }
.rwif-fv-progress-lbl { display: flex; justify-content: space-between; font-family: var(--rwif-ui); font-size: 11px; color: var(--rwif-ink-faint); margin-bottom: 4px; }
.rwif-fv-track { height: 10px; background: var(--rwif-paper-3); border-radius: 2px; overflow: hidden; }
.rwif-fv-fill { height: 100%; background: var(--fv-bar); border-radius: 2px; transition: width .1s linear; }

.rwif-fv-fieldwrap { margin: 16px 0 6px; }
.rwif-fv-fieldcap { font-family: var(--rwif-ui); font-size: 12px; color: var(--rwif-ink-soft); text-align: center; margin-bottom: 8px; }
.rwif-fv-grid11 { display: grid; grid-template-columns: repeat(11, 1fr); gap: 6px; max-width: 620px; margin: 0 auto; }
.rwif-fv-p { aspect-ratio: 105 / 68; border-radius: 2px; position: relative; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.rwif-fv-p.intact { background: var(--fv-intact); }
.rwif-fv-p.intact::before { content: ''; position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 2px solid rgba(255, 255, 255, .7); border-radius: 50%; }
.rwif-fv-p.intact::after { content: ''; position: absolute; left: 50%; top: 0; width: 2px; height: 100%; background: rgba(255, 255, 255, .7); transform: translateX(-50%); }
.rwif-fv-p.gone { background: var(--fv-gone); }
.rwif-fv-p.gone::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(0, 0, 0, .25) 4px, rgba(0, 0, 0, .25) 8px); }
.rwif-fv-p.burning { background: var(--fv-fire); box-shadow: 0 0 12px 2px rgba(240, 122, 30, .8); animation: rwif-fv-fire .6s ease-out forwards; }
@keyframes rwif-fv-fire {
	0% { background: #FFCC33; transform: scale(1.12); }
	60% { background: var(--fv-fire); }
	100% { background: var(--fv-gone); transform: scale(1); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
}

.rwif-fv-stats { display: flex; justify-content: space-around; border-top: 1px solid var(--rwif-line); border-bottom: 1px solid var(--rwif-line); padding: 12px 0; margin: 14px 0 10px; }
.rwif-fv-s-val { font-family: var(--rwif-ui); font-size: 20px; font-weight: 700; color: var(--rwif-forest); font-variant-numeric: tabular-nums; text-align: center; }
.rwif-fv-s-lbl { font-family: var(--rwif-ui); font-size: 9px; color: var(--rwif-ink-faint); text-transform: uppercase; letter-spacing: .05em; text-align: center; margin-top: 3px; }
.rwif-fv-next { font-family: var(--rwif-ui); font-size: 13px; color: var(--rwif-ink-soft); text-align: center; }
.rwif-fv-next span { color: var(--fv-bar); font-weight: 700; font-variant-numeric: tabular-nums; }

/* — Datenlage-Box — */
.rwif-fv-callout {
	background: var(--rwif-paper-2);
	border: 1px solid var(--rwif-line);
	padding: 12px 15px;
	border-radius: 6px;
	font-size: 15px;
	color: var(--rwif-ink-soft);
}
.rwif-fv-callout strong { color: var(--fv-c-brasilien); }

/* — Tooltip (per JS an <body>) — */
.rwif-fv-tooltip {
	position: fixed;
	pointer-events: none;
	background: #1f1f1f;
	color: #fff;
	font-family: var(--rwif-ui);
	font-size: 12px;
	padding: 6px 9px;
	border-radius: 4px;
	opacity: 0;
	transition: opacity .1s;
	white-space: nowrap;
	z-index: 2147483000;
}
.rwif-fv-tooltip b { color: #ffd27a; }