/* Infografik „Der Nährstoffkreislauf des Regenwaldes".
   Nutzt die gemeinsamen Basis-Tokens (assets/basis.css) und die Export-Leiste
   (assets/export.css). Eigene Klassen tragen das Präfix .rwif-nk-. */

.rwif-grafik.rwif-nk { gap: 18px; }

/* — Große Kennzahl (Hero) — */
.rwif-nk-hero {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: -4px 0 -2px;
}
.rwif-nk-hero-num {
	font-family: var(--rwif-display);
	font-weight: 700;
	font-size: clamp(40px, 7.5vw, 64px);
	line-height: 1;
	color: var(--rwif-alert);
	letter-spacing: -.01em;
}
.rwif-nk-hero-txt {
	font-family: var(--rwif-body);
	font-size: 18px;
	color: var(--rwif-ink-soft);
}

/* — Umschalter — */
.rwif-nk-ctrl {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-family: var(--rwif-ui);
	margin-top: 16px;
}
.rwif-nk-ctrl-lbl {
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--rwif-ink-faint);
}
.rwif-nk-toggle { display: flex; gap: 6px; flex-wrap: wrap; }
.rwif-nk-toggle button {
	font-family: var(--rwif-ui);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	padding: 8px 14px;
	border-radius: 9px;
	border: 1px solid var(--rwif-line);
	background: var(--rwif-paper-2);
	color: var(--rwif-ink-soft);
	transition: border-color .15s, color .15s, background .15s;
}
.rwif-nk-toggle button:hover { border-color: var(--rwif-leaf); color: var(--rwif-forest); }
.rwif-nk-toggle button.on {
	background: var(--rwif-forest);
	border-color: var(--rwif-forest);
	color: #fff;
}

/* — Ansichtsbereich — */
.rwif-nk-section { display: flex; flex-direction: column; gap: 12px; }
.rwif-nk-charttitle {
	font-family: var(--rwif-ui);
	font-size: 16px;
	font-weight: 700;
	color: var(--rwif-titel);
	margin-bottom: 2px;
}
.rwif-nk-view { display: none; }
.rwif-nk-view.on { display: block; }
.rwif-nk-frame { line-height: 0; border-radius: 10px; overflow: hidden; background: var(--rwif-paper); }
.rwif-nk-svg { display: block; width: 100%; height: auto; }

/* — Hinweis-/Tipp-Zeile — */
.rwif-nk-hint {
	font-family: var(--rwif-body);
	font-size: 15.5px;
	color: var(--rwif-ink-soft);
	margin: 0;
	min-height: 3em;
}
.rwif-nk-hint strong { color: var(--rwif-titel); }

/* — Aktionsreihe (Tour + Export) — */
.rwif-nk-tourbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.rwif-actionbtn.rwif-nk-primary {
	background: var(--rwif-forest);
	border-color: var(--rwif-forest);
	color: #fff;
}
.rwif-actionbtn.rwif-nk-primary:hover { color: #fff; }
.rwif-nk-ind { font-family: var(--rwif-ui); font-size: 12px; color: var(--rwif-ink-faint); }

/* — Quellzeile — */
.rwif-nk-note {
	font-family: var(--rwif-ui);
	font-size: 12px;
	color: var(--rwif-ink-faint);
	margin: 0;
	line-height: 1.4;
}

/* — Nummerierte Stationspunkte (Kreislauf: grün) — */
.rwif-nk-st, .rwif-nk-stb { cursor: pointer; }
/* Kein Fokus-Rechteck bei Mausklick; Tastatur-Fokus bleibt sichtbar. */
.rwif-nk-st:focus, .rwif-nk-stb:focus { outline: none; }
.rwif-nk-st:focus-visible, .rwif-nk-stb:focus-visible { outline: 2px solid var(--rwif-forest); outline-offset: 2px; }
.rwif-nk-num { stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); transition: fill .15s, stroke-width .15s; }
.rwif-nk-st .rwif-nk-num { fill: var(--rwif-forest); }
.rwif-nk-numtext {
	font-family: var(--rwif-ui);
	font-size: 18px;
	font-weight: 800;
	text-anchor: middle;
	dominant-baseline: central;
	pointer-events: none;
}
.rwif-nk-st .rwif-nk-numtext { fill: #fff; }
.rwif-nk-ring { fill: none; stroke: var(--rwif-savanna); stroke-width: 3; opacity: 0; }
.rwif-nk-st:hover .rwif-nk-num { fill: var(--rwif-leaf); stroke-width: 3.5; }
.rwif-nk-st:hover .rwif-nk-ring { opacity: .5; }
.rwif-nk-st.on .rwif-nk-num { fill: var(--rwif-alert); }
.rwif-nk-st.on .rwif-nk-ring { opacity: 1; animation: rwif-nk-pulse 1.4s ease-out infinite; }

/* — Nummerierte Stationspunkte (Sahara: beige) — */
.rwif-nk-stb .rwif-nk-num { fill: #d8c39a; }
.rwif-nk-stb .rwif-nk-numtext { fill: #4a3820; }
.rwif-nk-stb .rwif-nk-ring { stroke: #b98a3a; }
.rwif-nk-stb:hover .rwif-nk-num { fill: #eaddbe; stroke-width: 3.5; }
.rwif-nk-stb:hover .rwif-nk-ring { opacity: .55; }
.rwif-nk-stb.on .rwif-nk-num { fill: var(--rwif-alert); }
.rwif-nk-stb.on .rwif-nk-numtext { fill: #fff; }
.rwif-nk-stb.on .rwif-nk-ring { opacity: 1; animation: rwif-nk-pulse 1.4s ease-out infinite; }

@keyframes rwif-nk-pulse {
	0%   { opacity: .85; r: 20; }
	70%  { opacity: 0;   r: 44; }
	100% { opacity: 0;   r: 44; }
}

/* — Overlay-Beschriftungen — */
.rwif-nk-ovl {
	font-family: var(--rwif-ui);
	font-weight: 800;
	paint-order: stroke;
	stroke: #fff;
	stroke-width: 5;
	stroke-linejoin: round;
}
.rwif-nk-up { fill: var(--rwif-forest); }
.rwif-nk-down { fill: var(--rwif-dust); }
.rwif-nk-place {
	font-family: var(--rwif-ui);
	font-size: 20px;
	font-weight: 800;
	paint-order: stroke;
	stroke: #fff;
	stroke-width: 4;
	stroke-linejoin: round;
}

/* — Staubfahne — */
.rwif-nk-plume-band { fill: none; stroke: #e0b878; stroke-width: 50; stroke-linecap: round; opacity: .5; }
.rwif-nk-plume-line { fill: none; stroke: #c99042; stroke-width: 5; stroke-dasharray: 2 10; stroke-linecap: round; }

/* — Werte erscheinen beim Klick — */
.rwif-nk-valgrp { opacity: 0; transition: opacity .2s; pointer-events: none; }
.rwif-nk-valgrp.on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.rwif-nk-ring { animation: none !important; }
	.rwif-nk-st.on .rwif-nk-ring, .rwif-nk-stb.on .rwif-nk-ring { opacity: .6; }
}