/**
 * Terje WIKI - Interaktiver Skill-Tree (Path-of-Exile / "Gate of Fates"-Look).
 *
 * ALLE Regeln sind unter .twiki gescoped, damit das Plugin nicht mit anderen
 * Plugins/Themes kollidiert. Eigene Design-Tokens leben lokal auf .twiki.
 *
 * Aufbau:
 *   - Ladebildschirm (.twiki-loading) mit DME-Branding + Glassmorphism-Panel.
 *   - Topbar (Branding / Suche / Sprache).
 *   - Stage mit SVG-Talentbaum (radial), Zoom-Controls, Tooltip, Detailkarte.
 *
 * Zustaende werden ueber CSS-Klassen (.is-active / .is-dim / .is-focused)
 * gesteuert; Transitions nur fuer Deckkraft/Glow (performant).
 */

/* ======================================================== *
 *  Tokens (lokal)
 * ======================================================== */
.twiki {
	--bg: #060a0e;
	--bg-2: #0a1218;
	--cyan: #22d3ee;
	--cyan-br: #5eeaff;
	--teal: #2dd4bf;
	--lime: #a3e635;
	--amber: #fbbf24;
	--pink: #fb7185;
	--txt: #dbe8ec;
	--txt-dim: #8aa1a9;
	--txt-faint: #5a6d74;

	/* Glassmorphism (exakt vorgegebene Werte). */
	--glass-bg: rgba(255, 255, 255, 0.1);
	--glass-radius: 16px;
	--glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	--glass-border: 1px solid rgba(255, 255, 255, 0.17);

	position: relative;
	z-index: 0;
	display: block;
	width: 100%;
	max-width: 1560px;
	min-height: 86vh;
	margin: 0 auto;
	color: var(--txt);
	font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	border-radius: 20px;
	overflow: hidden;
	background:
		radial-gradient(1100px 720px at 22% 8%, rgba(34, 211, 238, 0.10), transparent 60%),
		radial-gradient(900px 640px at 86% 92%, rgba(45, 212, 191, 0.09), transparent 62%),
		radial-gradient(1400px 900px at 50% 50%, #0b1820 0%, var(--bg-2) 46%, var(--bg) 100%);
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}

.twiki *,
.twiki *::before,
.twiki *::after {
	box-sizing: border-box;
}

/* Dezente Sternen-/Aurora-Textur. */
.twiki::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.35), transparent),
		radial-gradient(1px 1px at 70% 60%, rgba(255, 255, 255, 0.25), transparent),
		radial-gradient(1.5px 1.5px at 45% 80%, rgba(94, 234, 255, 0.30), transparent),
		radial-gradient(1px 1px at 85% 20%, rgba(255, 255, 255, 0.22), transparent),
		radial-gradient(1.5px 1.5px at 12% 70%, rgba(45, 212, 191, 0.25), transparent);
	background-repeat: repeat;
	background-size: 360px 360px, 420px 420px, 500px 500px, 300px 300px, 460px 460px;
	opacity: 0.5;
}

/* ======================================================== *
 *  Ladebildschirm
 * ======================================================== */
.twiki-loading {
	position: absolute;
	inset: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 1;
	transition: opacity 0.6s ease;
}
.twiki-loading.is-leaving {
	opacity: 0;
	pointer-events: none;
}

.twiki-loading-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	max-width: 420px;
	width: 100%;
	padding: 38px 34px 32px;
	text-align: center;

	background: var(--glass-bg);
	border-radius: var(--glass-radius);
	box-shadow: var(--glass-shadow);
	-webkit-backdrop-filter: blur(6.5px);
	backdrop-filter: blur(6.5px);
	border: var(--glass-border);
}

.twiki-loading-badge,
.twiki-brand-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: 'Chakra Petch', sans-serif;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: #021016;
	background: linear-gradient(135deg, var(--cyan-br), var(--teal));
	box-shadow: 0 0 22px rgba(34, 211, 238, 0.45);
}
.twiki-loading-badge {
	width: 54px;
	height: 54px;
	border-radius: 14px;
	font-size: 18px;
}

.twiki-loading-title {
	margin: 4px 0 0;
	font-family: 'Chakra Petch', sans-serif;
	font-weight: 700;
	font-size: clamp(22px, 4vw, 30px);
	letter-spacing: 0.06em;
	color: #fff;
	text-shadow: 0 0 18px rgba(34, 211, 238, 0.25);
}
.twiki-loading-title span {
	color: var(--cyan-br);
	text-shadow: 0 0 20px rgba(94, 234, 255, 0.5);
}

.twiki-loading-sub {
	margin: 0;
	font-family: 'Chakra Petch', sans-serif;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-size: 12px;
	color: var(--txt-dim);
}

.twiki-load-btn {
	margin-top: 10px;
	padding: 12px 30px;
	font-family: 'Chakra Petch', sans-serif;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.08em;
	color: #021016;
	cursor: pointer;
	border: 0;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--cyan-br), var(--teal));
	box-shadow: 0 0 26px rgba(34, 211, 238, 0.4);
	transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.twiki-load-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 0 34px rgba(34, 211, 238, 0.6);
}
.twiki-load-btn:disabled {
	opacity: 0.55;
	cursor: progress;
}

.twiki-loading-status {
	margin: 2px 0 0;
	min-height: 16px;
	font-size: 12px;
	color: var(--txt-dim);
}

/* Zwei Lade-Buttons: Einfache Ansicht = PRIMAER (empfohlen, prominent),
   Interaktiver Baum = sekundaer (dezent). Untereinander, primaer zuerst. */
.twiki-load-choices {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 12px;
	width: 100%;
	max-width: 320px;
}

/* Primaerer Button (Einfache Ansicht): voller Akzent-Verlauf, groesser. */
.twiki-load-btn--primary {
	margin-top: 0;
	padding: 14px 30px;
	font-size: 16px;
	color: #021016;
	background: linear-gradient(135deg, var(--cyan-br), var(--teal));
	border: 0;
	box-shadow: 0 0 28px rgba(34, 211, 238, 0.45);
}
.twiki-load-btn--primary:hover {
	box-shadow: 0 0 38px rgba(34, 211, 238, 0.65);
}

/* Sekundaerer Button (Interaktiver Baum): dezent, glasig. */
.twiki-load-btn--secondary {
	margin-top: 0;
	padding: 10px 24px;
	font-size: 13px;
	color: var(--txt);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: none;
}
.twiki-load-btn--secondary:hover {
	color: #fff;
	box-shadow: 0 0 18px rgba(94, 234, 255, 0.18);
}

/* Erklaerender Hinweis unter den Buttons. */
.twiki-loading-hint {
	margin: 4px 0 0;
	max-width: 300px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--txt-dim);
}

/* ======================================================== *
 *  Modus-Umschalter (Ansicht: Baum | Einfach) - in BEIDEN Modi
 * ======================================================== */
.twiki-modebar {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.twiki-modebar-label {
	font-family: 'Chakra Petch', sans-serif;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--txt-dim);
}
.twiki-modebtns {
	display: inline-flex;
	padding: 3px;
	gap: 2px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 11px;
}
.twiki-modebtn {
	padding: 6px 12px;
	font-family: 'Chakra Petch', sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--txt-dim);
	cursor: pointer;
	background: transparent;
	border: 0;
	border-radius: 8px;
	transition: color 0.15s ease, background 0.15s ease;
}
.twiki-modebtn:hover { color: var(--txt); }
.twiki-modebtn.is-active {
	color: #021016;
	background: linear-gradient(135deg, var(--cyan-br), var(--teal));
}

/* Im klassischen Modus die Modus-Bar dezent absetzen (rechtsbuendig). */
.twiki.twiki-mode-classic .twiki-modebar {
	float: right;
	margin: 0 0 14px 14px;
	padding: 4px 4px 4px 10px;
	border-radius: 24px;
	border: 1px solid rgba(110, 200, 210, 0.13);
	background: rgba(18, 28, 34, 0.55);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
.twiki.twiki-mode-classic .twiki-modebar + .twiki-langbar {
	clear: none;
}

/* ======================================================== *
 *  Topbar
 * ======================================================== */
.twiki.twiki-mode-tree .twiki-topbar {
	position: relative;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding: 14px 18px;
	background: linear-gradient(180deg, rgba(6, 12, 16, 0.85), rgba(6, 12, 16, 0));
}

.twiki.twiki-mode-tree .twiki-brand {
	display: flex;
	align-items: center;
	gap: 12px;
}
.twiki-brand-badge {
	width: 40px;
	height: 40px;
	border-radius: 11px;
	font-size: 14px;
}
.twiki.twiki-mode-tree .twiki-brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}
.twiki.twiki-mode-tree .twiki-brand-title {
	font-family: 'Chakra Petch', sans-serif;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.05em;
	color: #fff;
}
.twiki.twiki-mode-tree .twiki-brand-accent {
	color: var(--cyan-br);
}
.twiki.twiki-mode-tree .twiki-brand-sub {
	font-family: 'Chakra Petch', sans-serif;
	font-size: 10px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--txt-dim);
}

.twiki.twiki-mode-tree .twiki-tools {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.twiki.twiki-mode-tree .twiki-search {
	position: relative;
}
.twiki.twiki-mode-tree .twiki-search-input {
	width: 220px;
	max-width: 52vw;
	padding: 9px 14px;
	font: inherit;
	font-size: 13px;
	color: var(--txt);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 11px;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.twiki.twiki-mode-tree .twiki-search-input::placeholder { color: var(--txt-faint); }
.twiki.twiki-mode-tree .twiki-search-input:focus {
	border-color: rgba(94, 234, 255, 0.6);
	box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.16);
}

.twiki-langbar {
	display: inline-flex;
	padding: 3px;
	gap: 2px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 11px;
}
.twiki-lang {
	padding: 6px 12px;
	font-family: 'Chakra Petch', sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--txt-dim);
	cursor: pointer;
	background: transparent;
	border: 0;
	border-radius: 8px;
	transition: color 0.15s ease, background 0.15s ease;
}
.twiki-lang:hover { color: var(--txt); }
.twiki-lang.is-active {
	color: #021016;
	background: linear-gradient(135deg, var(--cyan-br), var(--teal));
}

/* ======================================================== *
 *  Stage + SVG
 * ======================================================== */
.twiki.twiki-mode-tree .twiki-stage {
	position: relative;
	z-index: 10;
	width: 100%;
	height: clamp(680px, 82vh, 1200px);
}

.twiki.twiki-mode-tree .twiki-svg {
	display: block;
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	cursor: grab;
	touch-action: none;
}

/* Abdunkel-Ebene: beim Anklicken eines Knotens (.is-bgdim am Stage) wird der
   HINTERGRUND um 50% abgedunkelt. Liegt unter dem SVG-Graphen (z-index 0), der
   aktive, scharfe Strang bleibt darueber voll hell. */
.twiki.twiki-mode-tree .twiki-stage::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: #000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.twiki.twiki-mode-tree .twiki-stage.is-bgdim::before {
	opacity: 0.5;
}
.twiki.twiki-mode-tree .twiki-svg:active { cursor: grabbing; }
.twiki.twiki-mode-tree .twiki-viewport {
	will-change: transform;
}

/* --- Kanten ------------------------------------------------ *
 * Ruhezustand (nichts angeklickt): die Straenge sind nur SCHWACH und
 * DUENN sichtbar - KEIN Glow/Filter, neutrale Farbe, niedrige Deckkraft.
 * Alle Knoten bleiben sichtbar; die leuchtenden Wege erscheinen erst
 * entlang aktivierter Pfade (.is-active). Die Optik wird ausschliesslich
 * ueber CSS-Klassen gesteuert (keine Inline-Glow/Opacity-Attribute).
 */
.twiki.twiki-mode-tree .twiki-edge {
	fill: none;
	stroke: rgba(150, 180, 190, 0.5);
	stroke-width: 1;
	opacity: 0.28;
	stroke-linecap: round;
	filter: none;
	transition: opacity 0.28s ease, stroke 0.28s ease, stroke-width 0.28s ease, filter 0.28s ease;
	cursor: pointer;
}
/* Uebersichts-Kanten (Hub->Kategorie->Gruppe) im Ruhezustand dezent SICHTBAR,
   damit die Struktur lesbar ist - matt, ohne Glow. */
.twiki.twiki-mode-tree .twiki-edge--t3 { stroke-width: 1.6; opacity: 0.34; }
.twiki.twiki-mode-tree .twiki-edge--t2 { stroke-width: 1.2; opacity: 0.26; }
.twiki.twiki-mode-tree .twiki-edge--t1 { stroke-width: 1; }

/* Perk-Kanten (lazy): erst ab Drill-down relevant; Grundzustand versteckt. */
.twiki.twiki-mode-tree .twiki-edge--perk { opacity: 0; }
.twiki.twiki-mode-tree .twiki-edge--perk.is-perk { opacity: 0.18; }
.twiki.twiki-mode-tree .twiki-edge--perk.is-hidden {
	opacity: 0;
	pointer-events: none;
}

/* Fokussiert: nicht-aktive Kanten stark zuruecknehmen + UNSCHARF (Blur).
   Der aktive Strang liegt scharf im Vordergrund, der Rest tritt verschwommen
   zurueck. transition deckt filter mit ab (siehe .twiki-edge oben). */
.twiki.twiki-mode-tree .twiki-svg.is-focused .twiki-edge {
	opacity: 0.07;
	filter: blur(1.9px);
}
.twiki.twiki-mode-tree .twiki-edge.is-dim {
	opacity: 0.06;
	filter: blur(1.9px);
}

/* Aktiver Pfad + Kind-Kanten: hell aufleuchten mit vollem Glow in der
   KATEGORIE-Farbe (--twiki-active, gesetzt am .twiki-svg.cat-*). Ohne aktive
   Kategorie faellt die Farbe auf neutrales Cyan zurueck. */
.twiki.twiki-mode-tree .twiki-svg.is-focused .twiki-edge.is-active,
.twiki.twiki-mode-tree .twiki-edge.is-active {
	opacity: 1;
	stroke: var(--twiki-active, var(--cyan-br));
	stroke-width: 2.8;
	filter: drop-shadow(0 0 6px var(--twiki-active, rgba(94, 234, 255, 0.85)));
	/* Strahl-Aufbau A->B: pathLength="1" am <path> -> dashoffset 1->0 zeichnet
	   vom Pfadstart (M = Elternknoten) zum Ende (L = Kindknoten). */
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	animation: twiki-draw 0.5s ease forwards;
}
.twiki.twiki-mode-tree .twiki-edge--perk.is-active {
	stroke-width: 2;
}

/* --- Knoten ------------------------------------------------ */
.twiki.twiki-mode-tree .twiki-node { cursor: pointer; }
.twiki.twiki-mode-tree .twiki-halo {
	fill: rgba(34, 211, 238, 0.16);
	opacity: 0.6;
	transition: opacity 0.28s ease, fill 0.28s ease;
}
.twiki.twiki-mode-tree .twiki-core {
	fill: #0c1820;
	stroke: rgba(255, 255, 255, 0.10);
	stroke-width: 1;
	transition: fill 0.28s ease;
}
.twiki.twiki-mode-tree .twiki-ring {
	fill: none;
	stroke-width: 2.2;
	opacity: 0.9;
	transition: opacity 0.28s ease, stroke-width 0.28s ease;
	filter: drop-shadow(0 0 4px currentColor);
}
.twiki.twiki-mode-tree .twiki-node--t1 .twiki-ring { stroke-width: 1.8; }
.twiki.twiki-mode-tree .twiki-node--t3 .twiki-ring { stroke-width: 3; }
.twiki.twiki-mode-tree .twiki-node-img {
	opacity: 0.92;
	pointer-events: none;
	clip-path: circle(50%);
}

/* --- Perk-Knoten (lazy / Drill-down) ----------------------- *
 * Grundzustand: nicht vorhanden. Beim Oeffnen einer Gruppe werden sie ins
 * DOM gehaengt; .is-perk = sichtbar, .is-enter = Start des Einblendens
 * (gestaffelt via inline transition-delay), .is-hidden = wieder weg.
 */
.twiki.twiki-mode-tree .twiki-node--t1 {
	opacity: 0;
	transition: opacity 0.32s ease, transform 0.32s ease;
}
.twiki.twiki-mode-tree .twiki-node--t1.is-perk { opacity: 1; }
.twiki.twiki-mode-tree .twiki-node--t1.is-perk.is-enter {
	opacity: 0;
	transform: scale(0.6);
}
.twiki.twiki-mode-tree .twiki-node--t1.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.twiki.twiki-mode-tree .twiki-label {
	font-family: 'Chakra Petch', sans-serif;
	font-size: 13px;
	fill: var(--txt);
	paint-order: stroke;
	stroke: rgba(3, 8, 11, 0.92);
	stroke-width: 3.4px;
	pointer-events: none;
	transition: opacity 0.2s ease;
}
/* Kategorie- und Gruppen-Labels sind in der Uebersicht IMMER lesbar. */
.twiki.twiki-mode-tree .twiki-node--t3 .twiki-label { font-size: 16px; font-weight: 700; fill: #fff; }
.twiki.twiki-mode-tree .twiki-node--t2 .twiki-label { font-size: 12.5px; fill: #e7f2f5; font-weight: 600; }
/* Perk-Labels (Tier 1): nur im geoeffneten Zustand sichtbar, klein. */
.twiki.twiki-mode-tree .twiki-node--t1 .twiki-label { font-size: 11px; opacity: 0; }
.twiki.twiki-mode-tree .twiki-node--t1.is-perk .twiki-label { opacity: 0.95; }
.twiki.twiki-mode-tree .twiki-label--hub {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.1em;
	fill: #fff;
}

/* Hub-Look (neutral cyan). */
.twiki.twiki-mode-tree .twiki-node--hub .twiki-core { fill: #07141b; }
.twiki.twiki-mode-tree .twiki-node--hub .twiki-ring { stroke: var(--cyan-br); stroke-width: 3; }
.twiki.twiki-mode-tree .twiki-node--hub .twiki-halo { fill: rgba(94, 234, 255, 0.22); }
/* Hover: Tier-1-Label einblenden + Knoten leicht anheben. */
.twiki.twiki-mode-tree .twiki-node:hover .twiki-halo { opacity: 1; }
.twiki.twiki-mode-tree .twiki-node--t1:hover .twiki-label { opacity: 1; }
.twiki.twiki-mode-tree .twiki-node:hover .twiki-ring { stroke-width: 3.2; }
/* Fokus-Zustand (Strang). Nur Uebersichts-Knoten (Hub/Kat/Gruppe) erhalten
   die Grund-Deckkraft; Perks (Tier1) behalten ihre eigene Sichtbarkeitslogik
   (is-perk / is-hidden), damit versteckte Perks nicht aufploppen. */
.twiki.twiki-mode-tree .twiki-svg.is-focused .twiki-node:not(.twiki-node--t1) { opacity: 0.95; }
/* Inaktive Knoten: gedimmt UND unscharf (Blur), damit der aktive, scharfe
   Strang im Vordergrund klar hervortritt. */
.twiki.twiki-mode-tree .twiki-node.is-dim:not(.twiki-node--t1) {
	opacity: 0.8;
	filter: brightness(0.28) saturate(0.5) blur(2.2px);
}
/* Sichtbare (geoeffnete) Kinder duerfen dimmen+blurren; versteckte bleiben unsichtbar. */
.twiki.twiki-mode-tree .twiki-node--t1.is-perk.is-dim {
	opacity: 0.8;
	filter: brightness(0.28) saturate(0.5) blur(2.2px);
}
.twiki.twiki-mode-tree .twiki-node--t1.is-hidden { opacity: 0 !important; }

/* Aktiver Knoten: scharf, voller Glow, Ring + Halo in der KATEGORIE-Farbe
   (--twiki-active). Ohne aktive Kategorie neutral (Original-Akzent bleibt). */
.twiki.twiki-mode-tree .twiki-node.is-active .twiki-halo {
	opacity: 1;
	/* Dezenter, wiederholter Glow-/Skalier-Puls um aktive Knoten (Kategorie-Farbe
	   via --twiki-active). transform-origin am Knoten-Mittelpunkt (Kreis bei 0,0). */
	transform-origin: 0 0;
	animation: twiki-pulse 1.8s ease-in-out infinite;
}
.twiki.twiki-mode-tree .twiki-node.is-active .twiki-ring {
	opacity: 1;
	stroke-width: 3.4;
}
.twiki.twiki-mode-tree .twiki-node.is-active .twiki-core { fill: #11242e; }
.twiki.twiki-mode-tree .twiki-node--t1.is-active .twiki-label { opacity: 1; }

/* Kategorie-Farbe nur auf den AKTIVEN Strang anwenden (SVG traegt .cat-*). Die
   inline gesetzte Ring-stroke-Farbe wird hier ueberschrieben; Glow folgt mit. */
.twiki.twiki-mode-tree .twiki-svg.cat-medicine .twiki-node.is-active .twiki-ring,
.twiki.twiki-mode-tree .twiki-svg.cat-skills .twiki-node.is-active .twiki-ring,
.twiki.twiki-mode-tree .twiki-svg.cat-radiation .twiki-node.is-active .twiki-ring {
	stroke: var(--twiki-active, var(--cyan-br));
	filter: drop-shadow(0 0 6px var(--twiki-active, rgba(94, 234, 255, 0.85)));
}
.twiki.twiki-mode-tree .twiki-svg.cat-medicine .twiki-node.is-active .twiki-halo,
.twiki.twiki-mode-tree .twiki-svg.cat-skills .twiki-node.is-active .twiki-halo,
.twiki.twiki-mode-tree .twiki-svg.cat-radiation .twiki-node.is-active .twiki-halo {
	fill: var(--twiki-active, rgba(34, 211, 238, 0.16));
	opacity: 0.28;
}

/* Ausgewaehlter Perk (Detailkarte offen): zusaetzlich betont. */
.twiki.twiki-mode-tree .twiki-node--t1.is-selected .twiki-ring {
	opacity: 1;
	stroke-width: 3.6;
}
.twiki.twiki-mode-tree .twiki-node--t1.is-selected .twiki-halo { opacity: 1; }
.twiki.twiki-mode-tree .twiki-node--t1.is-selected .twiki-label { opacity: 1; font-weight: 700; }

/* Grow-on-Click: angeklickter Knoten (aktiv ODER ausgewaehlt) waechst um 25%.
   Skaliert um den Knoten-Mittelpunkt (SVG transform-origin = lokaler Ursprung 0,0,
   und die Kreise liegen bei 0,0). So wird der Knoten gross genug, dass sein
   Text gut lesbar ist (wie in der einfachen Ansicht). */
.twiki.twiki-mode-tree .twiki-node-scale {
	transform-origin: 0 0;
	transition: transform 0.18s ease;
}
.twiki.twiki-mode-tree .twiki-node.is-active .twiki-node-scale,
.twiki.twiki-mode-tree .twiki-node.is-selected .twiki-node-scale {
	transform: scale(1.25);
}

/* ======================================================== *
 *  Zoom-Controls
 * ======================================================== */
.twiki.twiki-mode-tree .twiki-ctrls {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 18;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.twiki.twiki-mode-tree .twiki-ctrl {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
	color: var(--txt);
	cursor: pointer;

	/* Blickdichteres dunkles Glas -> gut lesbare Icons (statt transparentem Weiss). */
	background: rgba(10, 17, 22, 0.88);
	border-radius: 12px;
	box-shadow: var(--glass-shadow);
	-webkit-backdrop-filter: blur(6.5px);
	backdrop-filter: blur(6.5px);
	border: var(--glass-border);
	transition: color 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.twiki.twiki-mode-tree .twiki-ctrl:hover {
	color: var(--cyan-br);
	transform: translateY(-1px);
	border-color: rgba(94, 234, 255, 0.5);
}

/* ======================================================== *
 *  Tooltip
 * ======================================================== */
.twiki.twiki-mode-tree .twiki-tooltip {
	position: absolute;
	z-index: 22;
	left: 0;
	top: 0;
	transform: translate(-50%, -150%);
	padding: 5px 10px;
	font-family: 'Chakra Petch', sans-serif;
	font-size: 12px;
	white-space: nowrap;
	color: #fff;
	pointer-events: none;
	opacity: 0;
	background: rgba(8, 18, 24, 0.92);
	border: 1px solid rgba(94, 234, 255, 0.4);
	border-radius: 8px;
	box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
	transition: opacity 0.12s ease;
}
.twiki.twiki-mode-tree .twiki-tooltip.is-on { opacity: 1; }
/* ======================================================== *
 *  Detailkarte (Glassmorphism)
 * ======================================================== */
.twiki.twiki-mode-tree .twiki-detail {
	position: absolute;
	z-index: 24;
	top: 16px;
	right: 16px;
	width: 340px;
	max-width: calc(100% - 32px);
	max-height: calc(100% - 32px);
	overflow: auto;
	padding: 20px 20px 22px;

	/* Blickdichtes dunkles Glas statt des fast transparenten Weiss -> klarer
	   Textkontrast / gute Lesbarkeit. Border/Blur/Radius bleiben erhalten. */
	background: rgba(10, 17, 22, 0.88);
	border-radius: var(--glass-radius);
	box-shadow: var(--glass-shadow);
	-webkit-backdrop-filter: blur(6.5px);
	backdrop-filter: blur(6.5px);
	border: var(--glass-border);

	opacity: 0;
	transform: translateX(14px);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.twiki.twiki-mode-tree .twiki-detail.is-open {
	opacity: 1;
	transform: translateX(0);
	pointer-events: auto;
}

.twiki.twiki-mode-tree .twiki-detail-close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
	color: var(--txt);
	cursor: pointer;
	background: transparent;
	border: 0;
	border-radius: 8px;
	transition: color 0.15s ease, background 0.15s ease;
}
.twiki.twiki-mode-tree .twiki-detail-close:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
}

.twiki.twiki-mode-tree .twiki-detail-crumb {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: 'Chakra Petch', sans-serif;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cyan-br);
	margin-bottom: 10px;
	padding-right: 28px;
}
.twiki.twiki-mode-tree .twiki-crumb-sep { color: var(--txt-faint); }
.twiki.twiki-mode-tree .twiki-crumb-grp { color: var(--amber); }
.twiki.twiki-mode-tree .twiki-detail-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}
.twiki.twiki-mode-tree .twiki-detail-icon {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
}
.twiki.twiki-mode-tree .twiki-detail-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.twiki.twiki-mode-tree .twiki-detail-name {
	margin: 0;
	font-family: 'Chakra Petch', sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: #fff;
	line-height: 1.2;
}

.twiki.twiki-mode-tree .twiki-detail-desc {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--txt);
}

.twiki.twiki-mode-tree .twiki-detail-sub {
	margin: 14px 0 8px;
	font-family: 'Chakra Petch', sans-serif;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--txt-dim);
}

.twiki.twiki-mode-tree .twiki-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}
.twiki.twiki-mode-tree .twiki-chip {
	padding: 5px 11px;
	font-size: 12px;
	color: var(--txt);
	background: rgba(94, 234, 255, 0.1);
	border: 1px solid rgba(94, 234, 255, 0.28);
	border-radius: 999px;
}

.twiki.twiki-mode-tree .twiki-stats {
	margin: 0;
	display: grid;
	gap: 6px;
}
.twiki.twiki-mode-tree .twiki-stat {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 11px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 9px;
}
.twiki.twiki-mode-tree .twiki-stat-k {
	margin: 0;
	font-size: 12px;
	color: var(--txt-dim);
}
.twiki.twiki-mode-tree .twiki-stat-v {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	text-align: right;
}

/* ======================================================== *
 *  Fehlerbox
 * ======================================================== */
.twiki-error {
	position: relative;
	z-index: 30;
	max-width: 520px;
	margin: 80px auto;
	padding: 26px;
	text-align: center;
	color: var(--txt);

	background: var(--glass-bg);
	border-radius: var(--glass-radius);
	box-shadow: var(--glass-shadow);
	-webkit-backdrop-filter: blur(6.5px);
	backdrop-filter: blur(6.5px);
	border: var(--glass-border);
}

/* ======================================================== *
 *  Mobile
 * ======================================================== */
@media (max-width: 720px) {
	.twiki.twiki-mode-tree .twiki-stage { height: clamp(560px, 74vh, 980px); }
	.twiki.twiki-mode-tree .twiki-search-input { width: 150px; }

	/* Detailkarte als Bottom-Sheet. */
	.twiki.twiki-mode-tree .twiki-detail {
		top: auto;
		right: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		max-width: 100%;
		max-height: 64%;
		border-radius: 16px 16px 0 0;
		transform: translateY(18px);
	}
	.twiki.twiki-mode-tree .twiki-detail.is-open { transform: translateY(0); }
}

/* ======================================================== *
 *  Animationen (Strahl-Aufbau / Puls)
 * ======================================================== */
/* Strahl-Aufbau A->B: dashoffset 1->0 zeichnet den Strang vom Eltern- zum
   Kindknoten (pathLength="1" am <path>). */
@keyframes twiki-draw {
	from { stroke-dashoffset: 1; }
	to   { stroke-dashoffset: 0; }
}
/* Dezenter Puls um aktive Knoten: leicht variierende Deckkraft + Skalierung. */
@keyframes twiki-pulse {
	0%, 100% { opacity: 0.85; transform: scale(1); }
	50%      { opacity: 1;    transform: scale(1.12); }
}

/* ======================================================== *
 *  Reduced Motion
 * ======================================================== */
@media (prefers-reduced-motion: reduce) {
	/* Keine Strahl-Aufbau-/Puls-Animation: Kante sofort voll sichtbar
	   (dashoffset 0), aktiver Halo statisch. */
	.twiki.twiki-mode-tree .twiki-edge.is-active {
		animation: none !important;
		stroke-dasharray: none;
		stroke-dashoffset: 0;
	}
	.twiki.twiki-mode-tree .twiki-node.is-active .twiki-halo {
		animation: none !important;
		transform: none;
	}
	.twiki-loading,
	.twiki-load-btn,
	.twiki-modebtn,
	.twiki.twiki-mode-tree .twiki-edge,
	.twiki.twiki-mode-tree .twiki-halo,
	.twiki.twiki-mode-tree .twiki-core,
	.twiki.twiki-mode-tree .twiki-ring,
	.twiki.twiki-mode-tree .twiki-label,
	.twiki.twiki-mode-tree .twiki-node,
	.twiki.twiki-mode-tree .twiki-node--t1,
	.twiki.twiki-mode-tree .twiki-node.is-dim,
	.twiki.twiki-mode-tree .twiki-node-scale,
	.twiki.twiki-mode-tree .twiki-detail,
	.twiki.twiki-mode-tree .twiki-tooltip,
	.twiki.twiki-mode-tree .twiki-ctrl {
		transition: none !important;
	}
	/* Kein Scale-Pop beim Drill-down. */
	.twiki.twiki-mode-tree .twiki-node--t1.is-perk.is-enter {
		opacity: 1;
		transform: none;
	}
}

/* === Mehr Flaeche: Theme-Container-Beschraenkung auf der Wiki-Seite aufheben === */
.container:has(.twiki),
.tp-page-post:has(.twiki),
.tg-page-content:has(.twiki) { max-width: 100% !important; overflow: visible !important; }

/* === Lesbarkeit: Theme-Hover-Farbe (gold/gelb) darf die Wiki-Buttons nicht ueberschreiben === */
.twiki .twiki-load-btn,
.twiki .twiki-load-btn:hover,
.twiki .twiki-load-btn:focus { color: #021016 !important; }
/* Primaer (Einfache Ansicht) = dunkler Text auf hellem Verlauf. */
.twiki .twiki-load-btn--primary,
.twiki .twiki-load-btn--primary:hover,
.twiki .twiki-load-btn--primary:focus { color: #021016 !important; }
/* Sekundaer (Interaktiver Baum) = heller Text auf glasigem Grund. */
.twiki .twiki-load-btn--secondary,
.twiki .twiki-load-btn--secondary:hover,
.twiki .twiki-load-btn--secondary:focus { color: var(--txt) !important; }
.twiki .twiki-modebtn,
.twiki .twiki-modebtn:hover,
.twiki .twiki-modebtn:focus,
.twiki .twiki-lang,
.twiki .twiki-lang:hover,
.twiki .twiki-lang:focus,
.twiki .twiki-fit,
.twiki .twiki-fit:hover,
.twiki .twiki-zoom-btn,
.twiki .twiki-zoom-btn:hover { color: var(--txt) !important; }
.twiki .twiki-modebtn.is-active,
.twiki .twiki-lang.is-active { color: #021016 !important; }