/* Infografik „Der Katalog des Lebens".
   Teilt Aufbau und Klassen mit grafiken/insekten; da CSS pro Grafik geladen
   wird, stehen die gemeinsamen .rwif-ins-* Regeln hier noch einmal. Ergänzt um
   den Insekten-Verweis und den Mykorrhiza-Kasten. */

.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(40px, 7vw, 60px);
	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-av-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; }
.rwif-ins-bar.hl { fill: var(--rwif-forest); }

.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; }

/* Insekten-Verweis (Ebene Tiere). */
.rwif-av-extra[hidden] { display: none; }
.rwif-av-link-a {
	font-family: var(--rwif-ui);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--rwif-forest);
	text-decoration: none;
}
.rwif-av-link-a:hover { text-decoration: underline; }

/* Hinweiskästen (Mykorrhiza auf Ebene Pilze, Erklärung auf Ebene Übrige). */
.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); }