/* Infografik „Vorkommen tropischer Regenwälder".
   Teilt Aufbau und Klassen mit grafiken/insekten und grafiken/artenverteilung;
   da CSS pro Grafik geladen wird, stehen die gemeinsamen .rwif-ins-* Regeln hier
   noch einmal. Ergänzt um zwei Balken-Varianten: den neutralen Grund-Balken des
   Trichters (Landfläche) und den goldenen Deutschland-Vergleichsbalken. */

.rwif-ins-hero {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: -8px 0 0;
}
.rwif-ins-hero-num {
	font-family: var(--rwif-display);
	font-weight: 700;
	font-size: clamp(34px, 6vw, 52px);
	line-height: 1;
	color: var(--rwif-titel);
	letter-spacing: -.01em;
}
.rwif-ins-hero-txt {
	font-family: var(--rwif-body);
	font-size: 18px;
	color: var(--rwif-ink-soft);
}

.rwif-ins-chartsection {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.rwif-ins-crumb {
	font-family: var(--rwif-ui);
	font-size: 13px;
	color: var(--rwif-ink-faint);
}
.rwif-ins-crumb[hidden] { display: none; }
.rwif-ins-back {
	color: var(--rwif-forest);
	text-decoration: none;
	font-weight: 600;
}
.rwif-ins-back:hover { text-decoration: underline; }

.rwif-ins-charttitle {
	font-family: var(--rwif-ui);
	font-weight: 700;
	font-size: 17px;
	color: var(--rwif-titel);
}

#rwif-vk-chart {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.rwif-ins-lbl {
	font-family: var(--rwif-ui);
	font-size: 14px;
	fill: var(--rwif-ink);
}
.rwif-ins-lbl.hl { font-weight: 700; }
.rwif-ins-val {
	font-family: var(--rwif-ui);
	font-size: 13px;
	fill: var(--rwif-ink-soft);
}

.rwif-ins-bar { transition: fill .12s; fill: var(--rwif-forest); }
.rwif-ins-bar.hl { fill: var(--rwif-forest); }
.rwif-ins-bar.ground { fill: var(--rwif-dust); }   /* Trichter: gesamte Landfläche */
.rwif-ins-bar.ref { fill: var(--rwif-savanna); }   /* Deutschland-Vergleich */

.rwif-ins-row.drill { cursor: pointer; }
.rwif-ins-row.drill:hover .rwif-ins-bar.hl { fill: var(--rwif-leaf); }
.rwif-ins-row.drill:focus-visible {
	outline: 2px solid var(--rwif-forest);
	outline-offset: 2px;
}

.rwif-ins-hint,
.rwif-ins-note {
	font-family: var(--rwif-ui);
	font-size: 12.5px;
	color: var(--rwif-ink-faint);
	margin: 0;
}
.rwif-ins-hint[hidden] { display: none; }

/* Infokasten je Ebene (Regionen, Amazonien). */
.rwif-av-infobox {
	font-family: var(--rwif-ui);
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--rwif-ink-soft);
	background: color-mix(in srgb, var(--rwif-forest) 7%, var(--rwif-paper));
	border: 1px solid var(--rwif-line);
	border-radius: 8px;
	padding: 11px 13px;
}
.rwif-av-infobox[hidden] { display: none; }
.rwif-av-infobox strong { color: var(--rwif-titel); }